Addition Quiz Game
Let me break down the code and explain each part in detail. https://youtu.be/V8yuvT0fAm0 --- ### **HTML Structure** #### 1. **Page Header** ```html
` text (game title) is styled with dark-gray color.
- **Question Styling**:
- The `.question` class ensures proper spacing between questions and makes the text readable.
- **Input and Button Styling**:
- Makes the input boxes and buttons user-friendly with larger padding and font sizes.
- **Result Styling**:
- Displays the result (score) prominently below the quiz.
---
### **HTML Body**
#### 3. **Main Structure**
```html
Addition Quiz Game
```
- **Title**: The `` contains the title of the game.
- **Quiz Container**:
- `` acts as a placeholder where questions are dynamically inserted using JavaScript.
- **Submit Button**:
- Clicking the button triggers the `calculateScore()` function, which evaluates the answers and calculates the score.
- **Result Section**:
- `` is an empty area where the score is displayed after submitting the answers.
---
### **JavaScript Functionality**
#### 4. **Question Generation**
```javascript
const numQuestions = 10;
const questions = [];
for (let i = 0; i < numQuestions; i++) {
const num1 = Math.floor(Math.random() * (10 ** (2 + Math.floor(Math.random() * 3)))) + 1; // 2, 3, or 4-digit number
const num2 = Math.floor(Math.random() * (10 ** (2 + Math.floor(Math.random() * 3)))) + 1; // 2, 3, or 4-digit number
questions.push({ num1, num2 });
}
```
- **Purpose**: This generates 10 random addition questions with 2, 3, or 4-digit numbers.
- `Math.random()` generates a random number between 0 and 1.
- `Math.floor()` rounds the number down to the nearest integer.
- `10 ** (2 + Math.floor(Math.random() * 3))` ensures the number is in the range of 2, 3, or 4 digits.
- The `questions` array stores the randomly generated numbers as objects (e.g., `{ num1: 123, num2: 456 }`).
#### 5. **Rendering Questions in HTML**
```javascript
const quizContainer = document.getElementById('quiz-container');
questions.forEach((q, index) => {
const questionDiv = document.createElement('div');
questionDiv.className = 'question';
questionDiv.innerHTML = `Question ${index + 1}: ${q.num1} + ${q.num2} = `;
quizContainer.appendChild(questionDiv);
});
```
- **Purpose**: Dynamically creates and displays the 10 addition questions.
- The `quizContainer` references the ``.
- `questions.forEach()` iterates through each question in the `questions` array.
- For each question:
- A new `` element is created (`questionDiv`).
- The `` contains the question text (e.g., `123 + 456 =`) and an input box for the user to type their answer.
- `quizContainer.appendChild(questionDiv)` adds this `` to the container.
#### 6. **Calculating the Score**
```javascript
function calculateScore() {
let score = 0;
questions.forEach((q, index) => {
const userAnswer = parseInt(document.getElementById(`answer-${index}`).value);
const correctAnswer = q.num1 + q.num2;
if (userAnswer === correctAnswer) {
score++;
}
});
document.getElementById('result').textContent = `You scored ${score} out of ${numQuestions}!`;
}
```
- **Purpose**: Evaluates the user's answers and calculates their score.
- `questions.forEach()` iterates through each question.
- For each question:
- It retrieves the user’s input using `document.getElementById` and converts it to an integer (`parseInt()`).
- It calculates the correct answer (`q.num1 + q.num2`).
- If the user’s answer matches the correct answer, the score is incremented.
- Finally, the score is displayed in the ``.
---
### How It Works:
1. **Page Load**:
- JavaScript generates 10 random addition questions and displays them dynamically in the quiz container.
2. **User Input**:
- The user types their answers into the input fields next to each question.
3. **Submit**:
- When the user clicks the "Submit Answers" button, the `calculateScore()` function is triggered.
4. **Score Calculation**:
- Each answer is checked against the correct result.
- The total score is calculated and displayed in the result section.
This game is an interactive addition quiz where users practice their math skills and see their results instantly.
`.
- `questions.forEach()` iterates through each question in the `questions` array.
- For each question:
- A new `
` element is created (`questionDiv`).
- The `
` contains the question text (e.g., `123 + 456 =`) and an input box for the user to type their answer.
- `quizContainer.appendChild(questionDiv)` adds this `
` to the container.
#### 6. **Calculating the Score**
```javascript
function calculateScore() {
let score = 0;
questions.forEach((q, index) => {
const userAnswer = parseInt(document.getElementById(`answer-${index}`).value);
const correctAnswer = q.num1 + q.num2;
if (userAnswer === correctAnswer) {
score++;
}
});
document.getElementById('result').textContent = `You scored ${score} out of ${numQuestions}!`;
}
```
- **Purpose**: Evaluates the user's answers and calculates their score.
- `questions.forEach()` iterates through each question.
- For each question:
- It retrieves the user’s input using `document.getElementById` and converts it to an integer (`parseInt()`).
- It calculates the correct answer (`q.num1 + q.num2`).
- If the user’s answer matches the correct answer, the score is incremented.
- Finally, the score is displayed in the `
`.
---
### How It Works:
1. **Page Load**:
- JavaScript generates 10 random addition questions and displays them dynamically in the quiz container.
2. **User Input**:
- The user types their answers into the input fields next to each question.
3. **Submit**:
- When the user clicks the "Submit Answers" button, the `calculateScore()` function is triggered.
4. **Score Calculation**:
- Each answer is checked against the correct result.
- The total score is calculated and displayed in the result section.
This game is an interactive addition quiz where users practice their math skills and see their results instantly.
No comments:
Post a Comment