Gallery
Share
Explore

The JavaScript Calculator

Below is an HTML file with embedded CSS and JavaScript to create a basic arithmetic quiz for students. This quiz includes 10 questions that are generated dynamically, with a field for entering answers and a submit button. The CSS changes depending on whether the answer is correct or incorrect.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Arithmetic Quiz</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
padding: 20px;
background-color: #f4f4f9;
}
.question {
margin: 20px 0;
}
#result {
font-size: 20px;
margin-top: 20px;
}
.happy {
color: green;
background-color: #ccffcc;
}
.sad {
color: red;
background-color: #ffcccc;
}
input[type="number"], button {
padding: 8px;
font-size: 16px;
margin-top: 5px;
}
</style>
</head>
<body>
<h1>Arithmetic Quiz</h1>
<div class="question">
<p id="questionText"></p>
<input type="number" id="answer" placeholder="Enter your answer here">
<button onclick="submitAnswer()">Submit Answer</button>
</div>
<div id="result"></div>

<script>
var currentQuestion = 0;
var questions = [];
var answers = [];

function generateQuestions() {
for (let i = 0; i < 10; i++) {
const num1 = Math.floor(Math.random() * 20) + 1; // numbers between 1 and 20
const num2 = Math.floor(Math.random() * 20) + 1;
const operation = Math.random() > 0.5 ? '+' : '-'; // randomly choose addition or subtraction
const question = num1 + " " + operation + " " + num2;
const answer = operation === '+' ? num1 + num2 : num1 - num2;
questions.push(question);
answers.push(answer);
}
}

function displayQuestion() {
if (currentQuestion < questions.length) {
document.getElementById('questionText').textContent = "What is " + questions[currentQuestion] + "?";
document.getElementById('answer').value = '';
document.getElementById('answer').focus();
} else {
document.getElementById('questionText').textContent = "Quiz completed!";
document.getElementById('result').textContent = '';
}
}

function submitAnswer() {
var userAnswer = parseInt(document.getElementById('answer').value, 10);
if (userAnswer === answers[currentQuestion]) {
document.getElementById('result').textContent = "Correct! Well done!";
document.getElementById('result').className = "happy";
} else {
document.getElementById('result').textContent = "Incorrect! The correct answer was " + answers[currentQuestion];
document.getElementById('result').className = "sad";
}
currentQuestion++;
setTimeout(displayQuestion, 2000); // wait 2 seconds before showing the next question
}

// Initialize the quiz
generateQuestions();
displayQuestion();
</script>
</body>
</html>

Features of the Quiz:

CSS Styles: The page has basic styling to make it visually appealing and to differentiate between correct and incorrect answers dynamically.
JavaScript Logic: The JavaScript:
Dynamically generates 10 arithmetic questions (either addition or subtraction).
Validates the user's answers and displays appropriate feedback.
Moves to the next question after a short delay once an answer is submitted.

How it Works:

When the page loads, 10 questions are generated and stored, along with their answers.
The user is presented with one question at a time.
When the user submits an answer, it is checked against the correct answer.
If correct, the feedback area turns green and praises the user.
If incorrect, it turns red and provides the correct answer.
The quiz automatically advances to the next question after displaying the result for two seconds.
This quiz is an interactive and engaging way for students to practice basic arithmetic, with immediate feedback on their answers to enhance learning.
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.