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

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.

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!