Math Quiz Fill in the Blanks Grade 5 Exercise Free Learn HTML 101

Math Quiz - Fill in the Blanks

Select an operation:

Addition Subtraction Multiplication Division

---

VIDEO Watch

---

Key Modifications for Fill-in-the-Blank Question Format: Each math question now includes a blank (__) in the equation for the user to fill in. Examples: Addition: 5 + __ = 11 (Answer: 6) Subtraction: 8 - __ = 3 (Answer: 5) Multiplication: 7 × __ = 21 (Answer: 3) Division: 12 ÷ __ = 4 (Answer: 3) Question Logic: The missing part of the equation is calculated dynamically. The blank is always where the user needs to provide the answer. Dynamic Question Generation: Questions are generated based on the operation selected in the dropdown. The correct answer is stored in the questions array for later validation. Score Calculation: The user’s input is compared with the correct answer for each question. If the answer is correct: The input box is highlighted in green. If the answer is wrong: The input box is highlighted in red. The correct answer is displayed next to the input field. Division Handling: Ensures the generated question always produces integer answers by using multiplication to derive the dividend. Feedback to User: Provides instant feedback on incorrect answers by displaying the correct answer. Game Workflow The user selects an operation (Addition, Subtraction, Multiplication, or Division). Clicks Start Quiz to generate 10 random fill-in-the-blank questions. Fills in the blanks for all questions. Submits the answers using the Submit Answers button. The app evaluates the answers, highlights correct/incorrect fields, and displays the score.

---

1. HTML Structure The HTML provides the structure of the application. Page Elements Title and Heading: html Copy code

Math Quiz - Fill in the Blanks

The main heading of the page. It introduces the user to the app. Dropdown for Operation Selection: html Copy code Addition Subtraction Multiplication Division A dropdown menu () that allows the user to select a mathematical operation (Addition, Subtraction, Multiplication, or Division). Each has a value corresponding to the operation. Buttons: html Copy code Start Quiz button: Calls the generateQuestions() function to create and display questions. Submit Answers button: Calls the calculateScore() function to evaluate the user’s answers. Initially hidden (style="display:none;") and displayed only after the quiz is generated. Quiz Container: html Copy code

A placeholder

where the dynamically generated questions will be added. Result Display: html Copy code

A placeholder

where the final score is displayed after the user submits their answers. 2. CSS Styling The CSS styles ensure a clean and visually appealing layout. Body Styling: css Copy code body { font-family: Arial, sans-serif; text-align: center; padding: 20px; background-color: #f4f4f4; } Sets the font, centers the text, adds padding around the content, and applies a light-gray background. Dynamic Feedback Colors: css Copy code .correct { border: 2px solid green; background-color: #e6ffe6; } .wrong { border: 2px solid red; background-color: #ffe6e6; } Correct Answer: Green border and light-green background for correct answers. Wrong Answer: Red border and light-red background for incorrect answers. Correct Answer Display: css Copy code .correct-answer { font-size: 14px; color: red; } Displays the correct answer in red when the user gets it wrong. 3. JavaScript Logic This section contains all the logic for generating the quiz, validating answers, and displaying results. A. Helper Functions Random Number Generator: javascript Copy code function getRandomNumber(min, max) { return Math.floor(Math.random() * (max - min + 1)) + min; } Generates random numbers between min and max, inclusive. Ensures random values for creating the math problems. B. Generating Questions Generate Questions Function: javascript Copy code function generateQuestions() { const operation = document.getElementById('operation').value; questions = []; const quizContainer = document.getElementById('quiz-container'); quizContainer.innerHTML = ''; document.getElementById('result').innerHTML = ''; document.getElementById('submit-btn').style.display = 'block'; Retrieves the selected operation from the dropdown (operation). Resets previous questions and results. Makes the Submit Answers button visible. Dynamic Question Generation: For each operation, the function creates a problem where the user must fill in the blank. Addition: javascript Copy code num1 = getRandomNumber(10, 999); answer = getRandomNumber(10, 999); num2 = num1 + answer; // num1 + answer = num2 questionText = `${num1} + __ = ${num2}`; Creates questions like 15 + __ = 20. The user must fill in the missing value. Subtraction: javascript Copy code num2 = getRandomNumber(10, 999); answer = getRandomNumber(10, num2); // Ensure num2 > answer num1 = num2 - answer; // num1 + answer = num2 questionText = `${num2} - __ = ${num1}`; Creates questions like 25 - __ = 15. Multiplication: javascript Copy code num1 = getRandomNumber(2, 99); answer = getRandomNumber(2, 99); num2 = num1 * answer; // num1 * answer = num2 questionText = `${num1} × __ = ${num2}`; Creates questions like 5 × __ = 20. Division: javascript Copy code answer = getRandomNumber(2, 20); num2 = getRandomNumber(2, 20); num1 = answer * num2; // num1 / answer = num2 questionText = `${num1} ÷ __ = ${num2}`; Creates questions like 15 ÷ __ = 3. Each question and its correct answer are stored in an array (questions). Dynamic Question UI: javascript Copy code const questionDiv = document.createElement('div'); questionDiv.className = 'question'; questionDiv.innerHTML = ` ${i + 1}. ${questionText}

`; quizContainer.appendChild(questionDiv); Dynamically creates a

for each question, which includes: Question text. An input box for the user to fill in the blank. A hidden to display the correct answer if the user gets it wrong. C. Validating Answers Calculate Score Function: javascript Copy code function calculateScore() { let score = 0; questions.forEach((q, index) => { const inputField = document.getElementById(`answer-${index}`); const userAnswer = parseFloat(inputField.value); const correctAnswerSpan = document.getElementById(`correct-answer-${index}`); Loops through each question and retrieves the user’s input from the corresponding input field. Check Answer: javascript Copy code if (userAnswer === q.answer) { score++; inputField.classList.add('correct'); inputField.classList.remove('wrong'); correctAnswerSpan.style.display = 'none'; } else { inputField.classList.add('wrong'); inputField.classList.remove('correct'); correctAnswerSpan.textContent = `(Correct Answer: ${q.answer})`; correctAnswerSpan.style.display = 'inline'; } If the answer is correct: The input box is highlighted in green. If the answer is wrong: The input box is highlighted in red. The correct answer is displayed in the element next to the question. Display Final Score: javascript Copy code document.getElementById('result').textContent = `You scored ${score} out of ${numQuestions}!`; After all answers are validated, the user’s score is displayed. Summary This code creates a fun and interactive math quiz where: Users select the operation (Addition, Subtraction, Multiplication, or Division). They solve "fill-in-the-blank" style problems. The app evaluates the answers and provides: Immediate visual feedback (green for correct, red for wrong). The correct answer for wrong attempts. A final score is displayed at the end.