Javascript Tools Document Object Model Problem Modeling & Solution Interaction Diagram Javascript Example quizzer06.html under Javascript-Examples > JavaScript-DOM - Purpose

innerHTML div tags time delayed functions data conversion - timed, random calculation game random numbers Javascript

1. User requests an arithmetic problem. 2. JS-App generates a random problem for the user. 3. User has limited time to answer. 4. JS-App evaluates user's answer and posts result. System Behavior User JS-App

Question Enter answer here 1 - User 2 - App What is ? 3- User Sorry - correct answer is = App

How to make random numbers ?

Making random no.s - Math.random ( )20 *+.5 Math.round ( ) < r < 1 0 < r < 20.5 < r < RANDOM eliminates easy problems like 2+13

How to replace existing Html ?

w = " What is " document.getElementById( 1 ).innerHTML = w Manufacture random arithmetic question Replace HTML for element where id=1 +x++y+" plus "" ? " INNERHTML

Question Enter answer here div area with id What is ? Access input via id use innerHTML to change use getElementById to get & change

How to make browser delay or wait ?

setTimeout (, )3500"F2( )" Executed after 3500 millisecond delay Built-in Javascript function delayed execution of F2 Gives user time to answer DELAYS

Generates question Evaluates answer Posts response question() answer() delay Waits for answer Temporal Logic setTimeout ("answer()", 3000 )

How to make convert numbers to the correct type ?

z = document.getElementById(2).value z = parseInt (z) Get user input Make z into a number Data conversion

w = " What is " document.getElementById( 1 ).innerHTML = w Manufacture random arithmetic question Replace HTML for element where id=1 +x++y+" plus "" ? " INNERHTML

w = " Sorry, the correct answer is " document.getElementById( 1 ).innerHTML = Construct response to user's answer replaces div's HTML +x++y+" + "" =" INNERHTML +z w Question Answer here

Desired behavior user app Asks for question Makes the question Waits for response 1 - User requests an arithmetic problem. 2 - JS App posts a random problem to the user.

Some useful diagrams for Interactions

Interaction Diagram UserJS app User requests question Click button User thinks App builds the question Posts the question App waits before getting user's answer ( ) Enters answer App gets user's answer early late Constructs response to user's answer & posts

Function calls UserJS app User requests question Click button question ( ) makes delayed call to answer( ) answer ( ) function - triggered by click function - called by question