You are using a browser not supported by the Wolfram Cloud
Supported browsers include recent versions of Chrome, Edge, Firefox and Safari.
I understand and wish to continue anyway »
WOLFRAM NOTEBOOK
Make a Mini Message Board
Make a Mini Message Board
In this module, students will get a first look at data storage and website permissions, and will make one of their first websites.
Appropriate for ages 11+.
Allow 90 minutes to complete the module.
Important note: This module should be led by an instructor with basic Wolfram Language knowledge. If you would like to learn the language, please try this free online introduction. If you would like a Computational Thinking Initiative ambassador or volunteer to help you run an adventure, please contact us.
Appropriate for ages 11+.
Allow 90 minutes to complete the module.
Important note: This module should be led by an instructor with basic Wolfram Language knowledge. If you would like to learn the language, please try this free online introduction. If you would like a Computational Thinking Initiative ambassador or volunteer to help you run an adventure, please contact us.
Learning Objective
◼
Students will be able to develop a web form, store an input and build a visualization for the stored data.
Computational Thinking Principles and Practices
◼
Interpreting a problem or idea in a way that a computer can assist with it
◼
Treating the computer’s “misunderstandings” as proxies for one’s own
Standards Alignment
◼
AP CS Principles:
◼
LO 1.2.1: create a computational artifact for creative expression
◼
LO 1.2.2: create a computational artifact using computing tools and techniques to solve a problem
◼
LO 1.2.3: create a new computational artifact by combining or modifying existing artifacts
◼
LO 1.2.5: analyze the correctness, usability, functionality and suitability of computational artifacts
◼
EK 5.4.1E: locating and correcting errors in a program is called debugging the program
◼
EK 7.1.1D: cloud computing fosters new ways to communicate and collaborate
Helpful Background
◼
The Wolfram Data Drop: https://datadrop.wolframcloud.com
STARTING POINT
STARTING POINT
“Today we are going to make a system that allows us to share comments with one another over the internet. To do this, we will first make a form that takes in a message, we will store that message in a databin and then the form will pull all of the entries from the databin and display them. First, let’s make this form.”
In[1]:=
FormPage["message""String",#message&]
Out[1]=
Input a message and point out the output.
Out[1]=
Input another message and point out the output.
Out[1]=
“Try inputting a message. Do you see your message when you press ‘OK’?”
◼ When you input a message, is the output the same as what you put in the text field?
◼ What is the difference between using FormFunction and FormPage? Try it out. Which do you think is better for what we are trying to do?
CHECKPOINT
Check that students have made a form with a text field that outputs their messages.
“This form only shows my last message, but I want it to save the messages and show them all. Let’s set up a place to save my messages. We’ll use something called a databin.”
In[2]:=
CreateDatabin[]
Out[2]=
Databin
In[3]:=
messageBin=Databin["jv5er0TQ"]
Out[3]=
Databin
Describe setting the databin to a variable. Simply let students know that whenever they use messageBin in the future, it will refer to the databin they just made. This will allow them to access all of the messages they have previously entered.
Point out that there are no entries in the databin (i.e. “Entry count: 0”).
“Let’s add an entry.”
Spend some time on the Wolfram Data Drop webpage. Students can get to this page by clicking the “+” box in their databin object and clicking the hyperlink for their bin’s short URL. Show students how to log in, view their databin entries, add an entry and change the name of their bin.
◼ Have you logged in successfully?
◼ Have you added at least two entries to your databin by using the webpage?
◼ Do you see the entries of your databin?
◼ What is a “databin”? What is an “entry”?
◼ What did you name your databin on the browser? What did you name the variable for it in your notebook?
CHECKPOINT
Check that students have created a databin and started adding entries on their web browsers.
Show students that all of their databin objects in their notebooks now have a higher entry count. Explain that this updates dynamically.
“Let’s add an entry programmatically and see all of the databin objects’ entry counts increase.”
In[4]:=
DatabinAdd[messageBin,"Hello from my notebook!"]
Out[4]=
Databin
◼ Have you successfully added an entry programmatically in your notebook?
◼ Based on the output you are getting, what do you think might be wrong?
◼ Looks like we need to do some debugging. Is there anything in your code that is an alarming color?
◼ Does your code look like your neighbors’? How does it differ?
CHECKPOINT
Check to see if students have successfully added an entry to their databins programmatically.
“Now let’s use the form to add an entry to the databin.”
Copy and paste the form from earlier into a new cell.
FormPage["message""String",#message&]
Copy and paste DatabinAdd[...] to replace #message.
FormPage["message""String",DatabinAdd[messageBin,"Hello from my notebook!"]&]
Then replace “Hello from my notebook!” with #message.
In[5]:=
FormPage["message""String",DatabinAdd[messageBin,#message]&]
Out[5]=
Before inputting a new message, point out the entry count for the databin.
Input a message and point out the output.
Out[5]=
“Great! Our entry count has increased, which means we have successfully added an entry using the form!”
Students may realize that the output is not what they were expecting; take a minute to walk around the class to make sure each student can add an entry to their databin using a form.
◼ Have you successfully added an entry to your databin by using a form?
◼ Based on the output you are getting, what do you think might be wrong?
◼ Looks like we need to do some debugging. Is there anything in your code that is an alarming color?
◼ Does your code look like your neighbors’? How does it differ?
CHECKPOINT
Check to see if students have successfully added an entry to their databins using a form.
“But now we have another problem. What’s wrong?”
Allow students time to answer.
You may need to guide them back to the original form and remind them that the goal here is to list all of the messages as the output.
“How can we show all of the values from the databin?”
Allow students time to figure this out on their own.
Copy and paste Values[dataBin] next to the DatabinAdd[...] function.
Input a message and point out that this is still not the desired output.
“If we add a semicolon after DatabinAdd, that will tell the code to ‘do this, but don’t tell me the output.’”
“Notice that now our #message has changed color! That is because it is not properly paired with an & anymore now that our semicolon is separating it. We can put parentheses around the group to say, ‘Please use the & for everything in this group.’”
Add parentheses to the form.
Input a message to display the output.
◼ Can you successfully display all of the messages in your databin as output?
◼ Based on the output you are getting, what do you think might be wrong?
◼ Did you add a semicolon and a set of parentheses in the correct places?
◼ Looks like we need to do some debugging. Is there anything in your code that is an alarming color?
◼ Does your code look like your neighbors’? How does it differ?
CHECKPOINT
Check to see if students can successfully display all of the messages in their databins as output when a new message is added.
“Let’s deploy our form to the internet so others can add messages to our bins.”
Wrap the form with the CloudDeploy function, and add the option Permissions set to Public. Encourage students to set their deployed forms to a variable. The assigned URL will therefore remain the same each time they deploy their forms.
Click the URL and demonstrate the form in the cloud.
“Share your URL with your neighbor, and have them start sending you messages as well.”
Students may point out that the URL is really long and hard to share. Show them how to shorten their URLs.
◼ Have your friends started sending you messages?
◼ Can you talk back and forth with your friend?
CHECKPOINT
Check that students have shared with a neighbor and have exchanged messages.
“Now that you’ve shared with your friends, what are some other things we should add to this to make it more interesting?”
◼ Want to get rid of the curly brackets? Use Column and ExportForm[_,“PNG”].
◼ We are going to deploy this to the internet for others to use and see. Do you like the font, the color, the order, etc.?
◼ What if someone puts in a long message? How could we limit the size of their message? Add conditionals.
◼ Could we stop people from using profanity in their messages? Try Classify[“Profanity”,#message].
◼ Could we style a post based on the identified sentiment? Try Classify[“Sentiment”,#message].
◼ Who wrote the message? How could we add their name to the message? Add another input to the form and add some sort of identifier for a different person.
◼ When did that message come in? Use timestamps.
◼ Could we start more than one thread of messages?
◼ Can your users share an image?
◼ How could someone report a bad message to you?
◼ Can we limit who is able to add messages to the bin rather than the entire “public”?
FINAL POINT
FINAL POINT
Ten minutes before the end of the module time.
Summarize
Summarize
Summarize what was done in the module and talk about findings.
Refer
Refer
Refer back to the learning objective and summarize how you have reached it.
Extend
Extend
Possible Additional Relevant Functions
Possible Additional Relevant Functions
Classify[“Profanity”,_] • Style • DatabinRemove • If • Which • Hyperlink • Column • ExportForm[_,“PNG”]
Possible Pitfalls
Possible Pitfalls
◼
If the occasion arises, use this activity to talk with your students about their responsibilities as developers on the internet. Encourage them to develop systems that address and deter inappropriate use. They may want to add “report” buttons or conditionals and classifiers that check for inappropriate words or phrases in the messages. Also be aware of the maturity level of the group, and potentially remind them ahead of time that inappropriate actions may result in consequences.
◼
Students may ask why FormPage[“message”“String”,DatabinAdd[messageBin,#message]&;Values[messageBin]] doesn’t seem to work and why the & needs to span the entire function. Show them the FullForm of both the suggested and correct code. Point out that the entire second argument for FormPage is interpreted as Function no matter where the & is, and discuss the documentation for Function.