Math Quiz Maker Project

Write a web page that lets the user select a type of math to be quizzed on, then generates a quiz with input areas for answers, and then grades the quiz upon submission.

The attempted quiz would look something like this (where [__] represents an input field):

5 * 2 = [10] Correct 2 * 9 = [16] Incorrect, the answer is 18 7 * 3 = [21] Correct 8 * 7 = [56] Correct 3 * 3 = [9] Correct Score: 80%
Demo

Requirements

  • Have a selector for choosing the type of math to be quizzed on (addition, subtraction, or multiplication).
  • Have a "Generate" button which will display five random math problems and an answer input area for each.
  • Math problems should consist of 2 whole number, each between 2 and 12 (e.g. "2 - 6 = ").
  • Put a blank line between each problem displayed.
  • Add a "Submit" button which will grade the quiz and cause a display area to show the user their score as a percentage.

Extra challenges

  • Add an area after each question that will show "Correct" or "Incorrect" and display the correct answer after the submit button is clicked.
  • Have it disable the input areas after the submit button is pressed (myElement.disabled = true;)
  • Add a reset function that will clear the answers, feedback, and score, and will make the input areas enabled again; call the function whenever the "Generate" button is clicked.

Hints

Hint: Random number generator code

A random number between 2 and 12 can be generated like this

var num = 2 + Math.floor(Math.random() * 10);
Hint: Possible structure and code for quiz generator
var mathSymbol = ... for (var i = 1; i < 6; i++) { var rand1 = ... var rand2 = ... var qText = rand1 + " " + mathSymbol + ... document.getElementById( "q_area_"+i ).innerText = ... ... }