1. Radio Buttons

2.  Quiz  Radio Buttons  Check boxes 2

3.  Assignment 1 ("A1") should be posted tomorrow or Friday  You'll have at least a week to do it, probably 2+  I'll announce this on Canvas, so set up your notifications to tell you ASAP!  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  I may or may not have a study guide / sample exam 3

4. 4 Radio buttons

5.  Image from: https://en.wikipedia.org/wiki/Radio_buttonhttps://en.wikipedia.org/wiki/Radio_button  HTML:  We're NOT going to use id here  (we can't have duplicates id's)  Instead, we're going to give all the individual HTML elements the same name  (name attribute allows for duplicates)  We need to define the text separately  "Cat", "Dog", and "Turtle" in the above image  FILE: radio_buttons_demo.html 5

6. 6

7. Radio Buttons How much does BIT 116 rock? Totally A Ton!!!! Text before button It's Ok Why, God, why did I sign up for this class? Some Fascinating Text! That I will change! With jQuery!  <input = Start of the button itself. Note that there's no closing tag. This element puts ONLY the button on the page  type="radio" = Tells the browser to put a radio button on the page  name="enthusiasm" = We picked enthusiasm. Pick any valid name you want, but be consistent  value="High"> = Again, pick anything you want (we picked High). Each button needs to have a unique value. For the others we picked SoSo and Low.  Totally A Ton!!!! = Notice that the text is outside the button and unconnected to it 7

8. $("#getFeedback").click( function() { var whichOne = $('input:radio[name=enthusiasm]:checked').val(); // First, what do we get: // >>> is added so it's clear what the var is, even if it's empty/blank alert(">>>" + whichOne + "<<<");  $('input = We're going to start by asking for all the 'input elements, and then filtering out the ones we're not interested in  :radio = Ignore (filter out) anything who's type is not radio  (as specified using the type="radio" attribute in the HTML – see previous slide)  [name=enthusiasm] = Amongst the radio buttons, only look at those elements who have a name attribute and that name attribute is 'enthusiasm'  :checked') = Amongst the radio inputs named 'enthusiasm', select the one that is checked (if any) .val(); = Finally, get the value from that button. The value will be either High, SoSo, or Low (as specified using the value="…"> attribute in the HTML – see previous slide) 8

9. $("#getFeedback").click( function() { var whichOne = $('input:radio[name=enthusiasm]:checked').val(); // First, what do we get: // >>> is added so it's clear what the var is, even if it's empty/blank alert(">>>" + whichOne + "<<<");  We're going to start off by simply showing the value of the radio button 9

10. $("#getFeedback").click( function() { var whichOne = $('input:radio[name=enthusiasm]:checked').val(); // - to fit everything on one slide if( whichOne === undefined ) $("#msgHere").html( "You need to make a choice!"); else if( whichOne === "High" ) $("#msgHere").html( "Great! I'm glad that you're enjoying the course"); else if( whichOne === "SoSo" ) $("#msgHere").html( "That's too bad. What can I do to help?"); else if( whichOne === "Low" ) $("#msgHere").html( "That's definitely too bad! Please talk to the prof to get some help ASAP!! :( :( :("); else $("#msgHere").html( "INTERNAL ERROR: We should never execute this line of code!!"); });  if( whichOne === undefined ) = check if the user didn't select anything  NOTE: there's no quotes around the undefined !!!  if( whichOne === "High" ) = Otherwise look for the text that we specified in the HTML  else = We shouldn't need this, but it's better to be safe than sorry 10

11.  Work on Exercise #1 for the 'radio buttons' section of this lecture 11