Application Day: Branching Adventure

 Quiz  Let's look at the schedule  Branching Adventure - explanation  Branching Adventure – work time 2

 Assignment 1 ("A1") was posted last Friday  It's due on November 4 th (that's 1.5 weeks from today, and 1 week from next class)  You can (and should!!!) start work on it ASAP  We'll cover logical operators next class, which is the last piece you need to complete it.  The Midterm is on Monday, November 9 th, in class  The exam will be paper and pencil  You WILL be allowed to use your 3x5 card on the exam  I will be focusing on in-class exercises, material from the slides, and quizzes  MAKE SURE THAT ANYTHING YOU KNOW HOW TO DO ANYTHING THAT YOU MISSED ON ANY QUIZES!!!  I'll provide more detail later 3

4 Branching Adventure

 First, let's play the game a bit  Second, state machine diagram  We'll use a number for each state 5

Branching Adventure!!!  Heading 1 will remain unchanged  The will show the picture + text with a different image for each state  The is currently unused, but we could use it to display messages  The three buttons will always be present on the page  We'll show/hide them based on the number of buttons we actually need for each state  We'll have a single function react to handle any of them being clicked 6

$(document).ready( function() { $("#choice1").click( onClick ); $("#choice2").click( onClick ); $("#choice3").click( onClick ); // Set up the game to start: currentState = 1; $("#thePicture").attr("src", "image01.png"); $("#choice1").val("Click here to start!"); $("#choice2").hide(); $("#choice3").hide(); });  $("#choice1").click( onClick ) = Tell jQuery to use the onClick function to handle clicks  onClick is declared right after this  currentState = 1; = remember that we're in state #1  $("#thePicture").attr("src", "image01.png"); = We need to manually change the image to match the current state  $("#choice1").val("Click here to start!"); = This sets the text on the first button  $("#choice2").hide(); = This hides the second button (etc.) 7

var whichButton =0; if( $(this).attr("id") == "choice1") whichButton = 1; else if( $(this).attr("id") == "choice2") whichButton = 2; else if( $(this).attr("id") == "choice3") whichButton = 3;  It's easier to deal with a number than a button, generally  So we'll figure out which button was clicked, and set whichButton to 1, 2, or 3  This will simplify the rest of the function  if( $(this).attr("id") == "choice1") =  $(this) is whichever button was clicked .attr("id") gets the id attribute  == "choice1" checks if that attribute is the same as the string (text) "choice1"  whichButton = 1; = then assign 1 to the variable 'whichButton' 8

else if( currentState == 2) { // They're "in town" if( whichButton == 1) { // If they chose "go find the dragon": currentState = 3; $("#thePicture").attr("src", "image03.png"); $("#choice1").show().val("Try to talk your way out of this one"); $("#choice2").show().val("Fight the dragon!"); $("#choice3").hide(); }  else if( currentState == 2) { = We've got a giant multiway if/else, one for each state  if( whichButton == 1) { … } = do this if they clicked the first button  The stuff in the middle says which state to change to (in this case, 3), loads up the new image ( "image03.png"), hides any unused buttons (such as #3), shows the used buttons and adjusts their text (more detail on this next slide) 9

else if( currentState == 2) { // They're "in town" if( whichButton == 1) { // If they chose "go find the dragon": currentState = 3; $("#thePicture").attr("src", "image03.png"); $("#choice1").show().val("Try to talk your way out of this one"); $("#choice2").show().val("Fight the dragon!"); $("#choice3").hide(); }  $("#choice1") = select the first button – this is normal jQuery that we've seen before  show() = show the button if it was previously hidden. .val("Try to talk your way out of this one"); = set the text on that same button (button #1)  Notice the '.show().val()' chain of method – this is a jQuery idiom, and ( I believe) one of the reasons why it's so popular 10

 Work on Exercise #1 for the 'Branching Adventure' part of this lecture 11