CS1046 – Flipped Classroom #3  USING IFs AND
LOOPS IN THE PROJECTS
Instructions:






You must have completed labs 5 and 6 BEFORE doing this “flipped classroom”. Make sure you have
completed those labs!
There are 3 exercises that must be completed to get the mark for this “flipped classroom” session
In groups of 2 or 3 students, complete the exercises. You should be pair/team programming, i.e. only
one of you needs to do the typing, but all 3 of you should be problem solving together. TAKE TURNS
DOING THE TYPING!
On completion of each exercise, have one member in your group raise his/her hand and ask the
instructor to try out your exercise. If it is completed to the instructor’s standards, move on to the next
exercise.
DO NOT DELETE ANY WORK YOU DO IN THE FLIPPED CLASSROOMS as you may need your work to
complete later exercises. For each exercise, make sure that all members in your group receive a copy of
the final product.
To troubleshoot, first discuss the issue amongst yourself. Secondly, search the internet for assistance.
Finally, if you get really stuck, ask your instructor or teaching assistant for assistance.
Objectives:




To practice deciding when you will need to use IF statements and loops
To practice writing code that contains an IF statement and a loop
To gain experience on designing functions
To learn collaboratively how to problem solve.
Exercise 1 – Continuing on with the “Guess A Number” game
1. Make a folder called guessing and in this folder put your files from last week in it (your .html, .css and .js
files) or you can use these ones:
a. http://www.csd.uwo.ca/~lreid/cs1046/flippedclassroom/FlippedThree/FilesToUse/guessing.html
b. http://www.csd.uwo.ca/~lreid/cs1046/flippedclassroom/FlippedThree/FilesToUse/guessing.css
c. http://www.csd.uwo.ca/~lreid/cs1046/flippedclassroom/FlippedThree/FilesToUse/guessing.js
2. You should have your random number AND your user’s guess functions completed from the last flipped
classroom. Now let’s work on the method that checks to see
if the user’s guesses match the correct answer. NOTE: Do
NOT use any <form> tags in your HTML because your global
variables won’t retain their values after you click on the
button if your HTML contains a <form> tag.
3. Add a button called “Start Game” to your html that will call
your function that generated the random number (1 to 100)
to be the answer. Give it an onclick that calls the function
setAnswer. You could disable the start button as follows:
4.
5.
6.
7.
8.
(document.getElementById(“whateveridyougiveit”).disabled = true; once they start the game and then
enable it again once they win the game OR take too many guesses.
When the user clicks on Check My Guess button, call the getGuess function which will then call the
checkGuess function and use the alert function to tell the user if his/her guess is higher than the answer
or lower than the answer or equal to the answer, add one to your counter and get the user to guess
again.
Check if the user takes more than 10 guesses to find the number. If so, then output a message like “Sorry
you lose, you took too many guesses” using the alert function and make the start game button enabled
again.
If the user finds the answer in less than 10 guess, then output a congratulations message and make the
start game button enabled again.
CONGRATULATIONS, you just wrote a working computer game!
Call over the t.a./instructor to play your game!
Exercise 2 – Continuing on with the “Hangman” game
1. Create a folder called hangman then put the required files in it. Use
either your work from your second exercise in flipped classroom 2,
OR you can use these ones:
 http://www.csd.uwo.ca/~lreid/cs1046/flippedclassroom/Fli
ppedThree/FilesToUse/hangman.html
 http://www.csd.uwo.ca/~lreid/cs1046/flippedclassroom/Fli
ppedThree/FilesToUse/hangman.js
 http://www.csd.uwo.ca/~lreid/cs1046/flippedclassroom/Fli
ppedThree/FilesToUse/hangman.css
 http://www.csd.uwo.ca/~lreid/cs1046/flippedclassroom/Fli
ppedThree/FilesToUse/images/ (NOTE: these are the
hangman images you will need to complete this project)
 Note: there are some alert() calls in these functions to help see if the code is working
correctly, you can remove those if you like as you complete the code (or leave them in if you
want to double check values in variables).
2. Set up your hangman folder like this:
a. Make sure that you put all the images in the image folder  the seven hangman pictures:
3. In your checkIfLetterInAnswer(whichLetter) function, add a switch statement or an if statement, that
checks if the letter is one of the letters in your puzzle. Our puzzle is “modern family” so, it will check
if the letter pressed is one of “m”, “o”, “d”, “e”, etc… or “y”. If it is one of those letters then call the
method to display the letter (NOTE: we will write this function in a future flipped classroom, not in
this one), OTHERWISE, add 1 to your variable that counts the number of guesses and call the method
to display one of the 7 images.
4. Complete the function that displays the images. This is a perfect situation for using a switch
statement (but you can use an If then else if statement also). Check the variable that tells how many
wrong guesses they have taken, if for example, they have 2 wrong guesses, then you will want to
display image hangman3.png. To display this image, you will need to change the .src property as
follows:
document.getElementById("hangmanDude").src="images/hangman3.png";
don’t forget to break out of the switch statement (i.e. use the break; statement).
5. When you display the last image, you should also tell the user that they have lost the game and
output the correct answer. You could do this by calling the showResults() method.
6. Change the showResults method to make sure you have an if statement to see if the number of
wrong guesses is more than 6, then the user has lost the game, otherwise print “Congratulations”
7. Test your program and make sure that when you press the WRONG buttons, that the image appear
and that on the LAST image, a “Sorry you lost” message is displayed
8. Call over the t.a./instructor once you have written the code to complete the above tasks.
Exercise 3 – Continuing on with the “Jeopardy” game
1. Make a folder called guessing and in this folder put your files from last week in it (your .html, .css and .js
files) or you can use these ones:
a. http://www.csd.uwo.ca/~lreid/cs1046/flippedclassroom/FlippedThree/FilesToUse/jeopardy.html
2. Open your .js file and .html file in Notepad++
3. In the toggleButtons method, use the getElementsByTagName or getElementsByClass to get all the
buttons, then using a for loop, set the disabled property to false for all the question buttons (you can
stop your loop when you get to allButtons.length).
4. In the function where you get the users answer, write an if statement to see if what they submitted is
equal to the current answer. So that the user is not penalized for using a different case, you might want
to convert both the user answer and the current answer to lower case before you compare them. If the
user got it right, output a message like “Correct”. If the user got it wrong, output a message like “Wrong”.
Adjust player 1’s score accordingly (right now we will just assume we have only one player)
5. Write a function that checks to see what value the “How many players” drop down box is, and set the
howManyPlayers variable according to what the user picked. Then call this method from toggleButtons().
This method will be a bit tricky. You need to make a variable to hold the dropdown box object (use
getElementById). If this variable is say dd, then dd.selectedIndex will tell you which one was selected.
The object has an array of options, and the option at selectedIndex will be one the user picked. So
dd.options[dd.selectedIndex] is the one the user picked. If you want the text in between the <option>
and </option> then use: dd.options[dd.selectedIndex].text, or if you want the value=”..”, then use:
dd.options[dd.selectedIndex].value. In our example, the number is in the .text property, so we would
need something like howManyPlayers = dd.options[dd.selectedIndex].text;
6. Now output the initial score of each player for the value the user picked from the dropdown box. You
could use a for loop to do this.
7. Also, display the scores for each player every time a player answers a question. You could use a for loop
to do this.
8. We will figure out how to display the correct question and answer in the next flipped classroom.
9. Call over the t.a./instructor once you have written the code to complete the above tasks.
Make sure everyone in the group gets a copy of ALL the files you created today.
Make sure that the instructor has recorded your name and Western user ID so that you get the marks for
participating in this flipped classroom!