1 / 19

Random Arithmetic Quiz App with Time Delayed Function Calls

This JavaScript quiz app generates random arithmetic problems for users with limited time to answer. It evaluates user responses and announces results. Learn to create random numbers, implement delays, and convert data types. Explore how to update page content dynamically. Understand event triggers, delayed function calls, and user interactions.

major
Download Presentation

Random Arithmetic Quiz App with Time Delayed Function Calls

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Asgt 04 directory - quiz.html

  2. Javascript innerHTML div tags data conversion random numbers time delayed function calls

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

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

  5. Need: random numbers delays ability to change page content

  6. How to make random numbers ?

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

  8. How to replace current HTML

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

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

  11. How to make browser delay or wait for a response -- for a limited time only ?

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

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

  14. How to convert inputs to numbers ?

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

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

  17. Diagrams to describe Interactions

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

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

More Related