Day 8: Arrays and Loops
Today we will practice arrays with occasional loops through the game of Mad Libs. Note that loops may not be necessary for every exercise.
Mad Libs is a word game where players fill in the blanks with random words, such that the final sentence is usually funny. If you're unfamiliar with Mad Libs, please read the Wikipedia description here.
"___________! he said ________ as he jumped into his convertible ______ and drove off with his _________ wife."
exclamation adverb noun adjective
For the 1st exercise, make a copy of the starter code. For subsequent exercises, feel free to comment out your previous code and create a new
main function for the current exercise. Please switch driver and navigator each app.The following code is the above example Mad Lib written in JavaScript, where the exclamation, adverb, and noun have been hard-coded and
randomAdj refers to the random adjective our program will randomly select to complete the Mad Lib.var madLib =
'"WOW!" he said EXCITEDLY as he jumped into his convertible PAPAYA and drove off with his ' +
randomAdj +
' wife.';
Please read all instructions before getting started.
- 1.When the Fundamentals Starter Code app loads, the user can input 1 adjective at a time to store in the app. Store the user-inputted adjectives in a global array variable.
- 2.When the user inputs the word "create" the app completes the Mad Lib with a random word from the user-inputted adjectives array and outputs the completed Mad Lib in the grey box.
In order to get a random value from an array we can generate a random integer in the range of: zero to the last index of the array.
var getRandomIndex = function (arrayLength) {
// create a random number from zero to array length minus one.
// this number is in the range from the first
// index (zero) to the last index (array length minus one)
var randomIndex = Math.floor(Math.random() * arrayLength);
return randomIndex;
};
Keep track of which words are selected. Create and allow the user to switch to a new game mode that always shows a completed Mad Lib on Submit using the set of words (verb, adjective, etc.) that the app has (randomly) selected most often so far.
When the Fundamentals Starter Code app loads it starts in "input", or normal mode. In input mode, the user can add adjectives to their adjectives list with each Submit.
When the user inputs "create", change the game mode to create mode. In create mode, each Submit prompts the app to complete your Mad Lib.
When the Fundamentals Starter Code app loads, the user can input 1 or more adjectives to store in the app with each Submit. To input more than 1 word for each Submit, the user would give each word separated by a space, e.g., "green nice silly". We can use JavaScript's string
split method to split the input string into an array of substrings. See W3Schools docs here for details.Reminder: There is no need to complete all exercises on this page. Once comfortable with the concepts, feel free to work on Project 2: Beat That! as a pair, or go back and solve / refactor previous More Comfortable exercises like Hawker Food Omakase with your newly learnt skills.
Update our Mad Lib to take additional word types.
var madLib = `${randomExclamation}! he said ${randomAdverb} as he jumped into his convertible ${randomNoun} and drove off with his ${randomAdj} wife.`;
Create modes to input words from different word types, e.g. exclamation, adverb, noun, and adjective. For each type, prompt the user what type of word they should be entering. If it's too tedious to support 4 word types, considering starting with 2 word types.
Store an array of Mad Lib sentences in your app. For example, Mad Lib 1 might be:
She asked {adverb} for the {noun} and when they were rude, she said {exclamation} and hung up the {adjective} phone.
Mad Lib 2 might be:
It was a {adjective}, cold November day. I woke up to the {adjective} smell of {noun} roasting in the {noun} downstairs.
Update create mode to pick a random Mad Lib sentence and set of words and output the completed Mad Lib in the grey box on Submit.
Here is a reference solution for Day 7 exercises. Here is a reference solution for Day 7 More Comfortable exercises. Please only view the reference solution for each exercise after you have attempted the exercise yourself. Note that there are many ways to implement these solutions and the reference solution is only 1 way.