Embed Size (px)
Citation preview
BIT116: Scripting
Application Day: Branching Adventure
2
Today Quiz
Let's look at the schedule
Branching Adventure - explanation
Branching Adventure – work time
3
A1, Midterm Assignment 1 ("A1") was posted last Friday
It's due on November 4th (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 9th, 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
4
Branching Adventure
5
Overview First, let's play the game a bit
Second, state machine diagram We'll use a number for each state
6
Overall Ideas<body><form action="">
<h1>Branching Adventure!!!</h1>
<img src="image01.png" id="thePicture"/><br/>
<h2 id="msg"></h2>
<div id="theButtons">
<input type="button" value="Then click this button!" id="choice1"/>
<input type="button" value="To Be Determined" id="choice2" />
<input type="button" value="TBD" id="choice3" />
</div>
</form></body>
Heading 1 will remain unchanged
The <img> will show the picture + text with a different image for each state
The <h2 id="msg"> 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
7
Setup$(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.)
8
Convert button click to a number
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'
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();
}
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)
10
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
11
Do Exercises Work on Exercise #1 for the 'Branching Adventure' part of this lecture
