Student Instructions

Getting Text from the User

Up until now, the event-driven apps you have created responded to the user clicking an element or typing a number when you used promptNum. What if we want the user to provide text instead of a number? You can probably think of many apps and websites that ask you to provide text in order to do something.

In programming, we have to represent text in a specific way to distinguish it from other words in our code, such as variable names. But we'll cover that later...

At the beginning of class you created a Mad Libs on paper, which takes user input in the form of nouns, adjectives, and verbs to create a unique "How-to" manual. You'll be translating your own Mad Libs How-to into an app in this lesson.

Do This:

• Play with this Mad Libs app a couple of times to see a digital version of the paper game.
• Think about how the final text is created based on the input from the user. How would you describe in words the algorithm for creating it?

Student Instructions

Strings

The primary data type we have used so far is Numbers. If we want to interact with user-submitted text, however, we'll need to learn about a new data type called a String. A string is a sequence of ASCII characters.

Combining Strings: often you will want to combine multiple strings to create one longer string. You can do this with the + operator. The formal name of this process is concatenation.

The program you're about to see is a very simple Mad Libs app that uses strings that are created inside the program and saved inside of variables. These strings are then concatenated with other strings to create a Mad Lib.

Do This:

• The input words of this Mad Lib are currently set to the empty string.
• Add your own input words and run the program to generate the Mad Lib.

Student Instructions

Importance of Double Quotes

You may have noticed that the strings we've seen are wrapped in double quotes. These double quotes are not part of the string. Instead this is how you indicate that a sequence of characters is a string and not the name of a variable.

As you start writing programs with strings it is common to generate errors from forgetting to place them in double quotes. We're going to generate some of those errors now so that we can recognize them more easily later.

Do This:

• This program generates many errors because strings were not placed in quotes.
• Run the program before you change it to see the errors that are generated.
• Add double quotes around all the strings so that the program runs without errors.

Student Instructions

Text Input Elements

So far we've been using promptNum as a simple way to get a number as input. Now that we know a little about strings we are going to create user interface elements that users can use to submit text (i.e. strings) instead. The first and simplest example is textInput which you can find in Design Mode.

Do This:

• Add two text input elements to this program, one for the name and one for the age of the user.
• Give your text input elements descriptive and meaningful IDs.
• In Design Mode set their default text to prompt the user for their name and age.
• Compare your app to the example below.

Student Instructions

Getting Text Input

As we saw a user can now type inside of a text input whenever they want, but now we'll need a way to access that text. In order to do that you'll need to use the getText command, which you can now find in the UI Controls tab.

You can use a getText command just like a string within a console.log or write command. Just like with setText you will refer to the UI element by its ID.

Do This:

• Read the documentation for getText.
• Add an event handler to the Submit button that fires when your button is clicked.
• Inside the event handler place code that will log the name your user input to the console.

Student Instructions

Saving Text Input in Variables

Often we want to save the information we pull in from the user for later use in our program. The best way to do this is to save it in a variable.

Do This:

• Create two variables inside your event handler to store the age and name of the user.
• Use getText() to update the values stored in each of these variables.
• Change your console.log statements to use your variable instead of getText.

Student Instructions

Generating Text Output

So far we've been outputting our messages to the console, but now we'd like to display them in the app. In order to do so we're going to be using a new UI element called a textArea. You can use setText with a textArea just like you would with a textLabel.

If we want to combine user input with default text we can do so with string concatenation. Together with a textArea we can use this ability to compose longer messages based on user input.

Do This:

• Add a textArea to your app and give it a descriptive and meaningful ID.
• Create a variable inside your event handler called userMessage to hold the full message that will be sent to the user.
• Use string concatenation to compose a message from the user input.
• Use setText to place your userMessage inside the textArea you created.

Student Instructions

String Capitalization

If you want to change the capitalization of a string you can do so with two new functions

Note that the syntax is similar to console.log . This is because toUpperCase really only makes sense as a command when you are using a string, just as log only makes sense when you are talking about the console. This function evaluates to a new string in which all characters have been made uppercase / lowercase. If you want to update the value in your original variable you'll have to do so explicitly, as in

var myString = "lower case for now";
myString = myString.toUpperCase();

Do This:

• Update your application so that the user's name is printed in UPPERCASE.

Student Instructions

Back to Mad Libs: Design Your App

Now that you've had some practice getting user text and making new strings with it, you're ready to turn your How-to Mad Libs into an app. To get started, you'll set up the layout. There are two main screens:

Screen 1: Collect User Input
- On this screen, you'll use text labels and text input design elements to set up the different words you want the user to provide. - A Next button takes you to Screen 2 to view the full Mad Libs.

Screen 2: View Mad Libs
- On this screen, you'll use the text area design element to create the space where the user's completed Mad Libs will be displayed. - A Play again button takes you back to Screen 1.

Screen 1:	Screen 2:

Do This:

• Create the two screens for your app, including the design elements in each one.
• Requirement: Request at least 3 separate words from the user on Screen 1.
• Create the event handlers for the Next and Play again buttons to respond to clicks.
• Use setScreen in the event handlers to get the screen navigation working.

Student Instructions

Update the Text Area with Your Mad Libs Outline

When figuring out how to make progress with a program, it helps to break the problem down into smaller steps and test your program incrementally. So rather than jumping straight to getting the user input and concatenating it with your Mad Libs outline, start first by just making sure that you can get your Mad Libs outline to appear in the text area when the Next button is clicked on the first screen.

But wait! If you just use setText and pass in the string of your Mad Libs outline, it will look like the screen on the left where all the steps are smushed together. You can use one or more newline characters, "\n", in your string to create a line break in your text.

Without newlines	With newlines

Do This:

• When the Next button is clicked, you already switch to Screen 2, but now you should also call setText on the text area on Screen 2 to your Mad Libs outline. See the images above for one way to temporarily handle the word placeholders.
• Add in newline characters "\n" in your Mad Libs string to format it.

<samp>console.log("How to Drive\nStep 1.");<br/><br/></samp>

*will be displayed as...*<br/><br/>

<samp>How to Drive<br/>Step 1.<br/><br/></samp>

*...on your console.*

var step1 = "Step 1: ...";<br/>

var step2 = "Step 2: ...";<br/>

console.log(step1 + "\n" + step2);<br/><br/></samp>

*will be displayed as...*<br/><br/>

<samp>Step 1: ...<br/>Step 2: ...<br/><br/></samp>

*...on your console.*

Student Instructions

Make It Mad! Add the User's Text to Your Mad Libs Outline

Now that you have your Mad Libs outline appearing in the text area, it's time to incorporate the user's text to make your Mad Libs come alive.

Do This:

• Did you pick good ID names for your text input elements? Update them now if you didn't!
• When the Next button is clicked, get the user's text from the text inputs on Screen 1 and store each in a separate variable.
• Use string concatenation to incorporate the user's text into your Mad Labs string before updating the text area on Screen 2.

Student Instructions

Why Are You Yelling At Me?! toUpperCase and toLowerCase

The main functionality of the Mad Libs app is complete, but there are some finishing touches to add. The user may type input with random letter capitalization, but the Mad Libs output string should be consistently capitalized.

Do This:

• Pick one or more pieces of the user's input text to transform into "yelling" or emphasize by making it uppercase before displaying it.
• For the other pieces of the user's input text, make it lowercase before displaying it.

Student Instructions

Play It Again and Again!

When the user clicks the "Play again" button, the first screen should reset and not show the user's previous text.

Do This:

• When the "Play again" button is clicked, clear the text from each text input on Screen 1.
• Free play: Add images, or more How-to steps for your Mad Libs, and invite others to play!

Student Instructions

What is the output of this code segment?

var phrase = "I am so";
var emotion = "excited";
var sentence = phrase + " " + emotion.toUpperCase() + "!";
console.log(sentence);