190 likes | 250 Vues
Asgt 04 directory - quiz.html. Javascript. innerHTML. div tags. data conversion. random numbers. time delayed function calls. Desired Behavior. 1. User requests an arithmetic problem. 2. JS-App generates random arithmetic problem for user. 3. User has limited time to answer.
E N D
Javascript innerHTML div tags data conversion random numbers time delayed function calls
Desired Behavior 1. User requests an arithmetic problem. 2. JS-App generates random arithmetic problem for user. 3. User has limited time to answer. 4. JS-App evaluates user's answer & announces result. 1 3 JS-App User 4 2
Enter answer here Question 1 - User What is 17 + 19 ? Sorry - correct answer is 17 + 19 = 36 2 - App 4 - App 35 3- User
Need: random numbers delays ability to change page content
RANDOM Making random no.s - 6 - 26 0 < r < 1 (decimals) Math.round ( ) 20 * Math.random ( ) + .5 + 5 1 ... 21 .5 < r < 20.5 0 < r < 20 (decimals) 6...26 avoids easy problems like 2+13
INNERHTML Manufacture random arithmetic question w = "<br>What is " +x+ " plus " +y+ " ?<br><br>" document.getElementById(1).innerHTML = w Replace HTML for element where id=1
Enter answer here Question Access input via id use getElementById…value to get & change What is 17 + 19 ? div area with id Use getElementById…innerHTML to change
How to make browser delay or wait for a response -- for a limited time only ?
DELAYS Gives user time to answer Executed after 3500 millisecond delay setTimeout ( , ) "F2( )" 3500 delayed execution of F2 Built-in Javascript function
Temporal Logic delay question() Generates question Waits for answer setTimeout ("answer()", 3000 ) answer() Evaluates answer Posts response
Data conversion Get user input z = document.getElementById(2).value z = parseInt (z) Make z into a number
INNERHTML Question Answer here Construct response to user's answer w = "<br>Sorry, the correct answer is " +x+ " + " +y+ " =" z document.getElementById(1).innerHTML = w replaces div's inner HTML
Interaction Diagram JS app User Click button User requests question App builds the question Posts the question User thinks App then waits before Getting user's answer ( ) Enters answer early App gets user's answer Constructs response to user's answer & posts late
Function calls function - triggered by click User JS app Click button User requests question question ( ) makes delayed call to answer( ) answer ( ) function - called by question