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

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

3. 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 13 4 2

4. Question Enter answer here 1 - User 2 - App What is 17 + 19 ? 3- User Sorry - correct answer is 17 + 19 = 36 35 4 - App

5. How to make random numbers ?

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

7. How to replace existing Html ?

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

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

10. How to make browser delay or wait ?

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

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

13. How to make convert numbers to the correct type ?

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

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

16. 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

17. 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.

18. Some useful diagrams for Interactions

19. 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

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