Arithmetic Practise

<!
DOCTYPE html>
<html>
<head>
<title>Maths quiz</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
text-align: center;
margin-top: 50px;
}
form {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
margin-top: 50px;
}
label {
margin-right: 10px;
}
input[type="text"] {
padding: 5px;
border-radius: 5px;
border: none;
margin-right: 10px;
width: 150px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="number"] {
padding: 5px;
border-radius: 5px;
border: none;
width: 80px;
margin-right: 10px;
text-align: center;
}
#question {
display: none;
margin-top: 50px;
text-align: center;
}
#answer {
display: none;
margin-top: 20px;
text-align: center;
}
#answer-label {
margin-right: 5px;
}
#equal-sign {
margin: 0 10px;
font-weight: bold;
font-size: 20px;
}
#feedback {
margin-top: 20px;
text-align: center;
font-weight: bold;
font-size: 20px;
}
#feedback span {
margin-right: 5px;
}
#next-question {
display: none;
margin-top: 20px;
text-align: center;
}
#score-container {
display: none;
margin-top: 50px;
text-align: center;
font-weight: bold;
font-size: 24px;
}
#score-label {
margin-right: 10px;
}
</style>
</head>
<body>
<h1>Maths quiz</h1>
<div id="username-container">
<form onsubmit="startQuiz(); return false;">
<label for="username">Enter your username:</label>
<input type="text" id="username" required>
<input type="submit" value="Start">
</form>
</div>
<div id="question-container">
<div id="question"></div>
<form onsubmit="submitAnswer(); return false;">
<input type="number" id="answer" required autofocus>
<label id="answer-label" for="answer">=</label>
<input type="submit" value="Submit">
</form>
<div id="feedback"></div>
<div id="next-question">
<button onclick="nextQuestion()">Next question</button>
</div>
</div>
<div id="score-container">
<div id="score-label">Your score:</div>
<div id="score"></div>
</div>
<script>
const MAX_NUMBER = 10000;
var username;
var quizData = [];
var currentQuestion = 0;
var score = 0;
// Function to generate a random integer between min and max

(inclusive)
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// Function to generate a new question

function generateQuestion() {
var x = getRandomInt(0, MAX_NUMBER);
var y = getRandomInt(0, MAX_NUMBER);
var operator = getRandomInt(0, 1); // 0 for addition, 1 for
subtraction
if (operator == 0) {
// Addition
return {
question: x + " + " + y + " = ",
answer: x + y
};
} else {
// Subtraction
if (x < y) {
// Swap x and y so the answer is positive
var temp = x;
x = y;
y = temp;
}
return {
question: x + " - " + y + " = ",
answer: x - y
};
}
}
// Function to start the quiz

function startQuiz() {
username = document.getElementById("username").value;
document.getElementById("username-container").style.display =
"none";
document.getElementById("question-container").style.display =
"block";
document.getElementById("question").style.display = "block";
document.getElementById("answer").style.display = "block";
document.getElementById("next-question").style.display = "none";
document.getElementById("score-container").style.display =
"none";
for (var i = 0; i < 10; i++) {

var question = generateQuestion();
quizData.push(question);
}
showQuestion();
}
// Function to display the current question
function showQuestion() {
document.getElementById("question").innerHTML =
quizData[currentQuestion].question;
document.getElementById("answer").value = "";
document.getElementById("answer").focus();
document.getElementById("feedback").innerHTML = "";
}
// Function to submit the user's answer

function submitAnswer() {
answer = parseInt(document.getElementById("answer").value);
var feedbackContainer = document.getElementById("feedback");
if (answer == quizData[currentQuestion].answer) {
feedbackContainer.innerHTML = '<span style="color:
green">✔ Correct</span>';
score++;
} else {
feedbackContainer.innerHTML = '<span style="color:
red">✘ Incorrect</span>';
}
document.getElementById("next-question").style.display = "block";
document.getElementById("answer").disabled = true;
}
// Function to go to the next question

function nextQuestion() {
currentQuestion++;
if (currentQuestion < quizData.length) {
showQuestion();
document.getElementById("answer").disabled = false;
document.getElementById("next-question").style.display =
"none";
} else {
endQuiz();
}
}
// Function to end the quiz

function endQuiz() {
var timestamp = new Date().toLocaleString();
var scorePercentage = score / quizData.length * 100;
localStorage.setItem(username + " - " + timestamp,
scorePercentage.toFixed(2) + "% - " + JSON.stringify(quizData));
document.getElementById("question-container").style.display =
"none";
document.getElementById("score-container").
// function to load the next question
function loadNextQuestion() {
currentQuestionIndex++;
if (currentQuestionIndex >= quizData.length) {
// end the quiz if there are no more questions
endQuiz();
} else {
showQuestion();
}
}
// function to end the quiz

function endQuiz() {
document.getElementById("question-container").style.display = "none";
document.getElementById("score-container").style.display = "block";
document.getElementById("final-score").innerHTML = "Your final score is: "
+ score + "/" + quizData.length;
}
// event listener for when the user clicks an answer choice

var answerButtons = document.getElementsByClassName("answer-choice");
for (var i = 0; i < answerButtons.length; i++) {
answerButtons[i].addEventListener("click", function() {
// check if the answer is correct
if (this.innerHTML === quizData[currentQuestionIndex].correctAnswer) {
score++;
}
// load the next question
loadNextQuestion();
});
}
// display the first question

showQuestion();
})();

Arithmetic Practise

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Arithmetic Practise

Uploaded by

Copyright:

Available Formats

<!

// Function to generate a random integer between min and max

// Function to generate a new question

// Function to start the quiz

for (var i = 0; i < 10; i++) {

// Function to submit the user's answer

// Function to go to the next question

// Function to end the quiz

// function to end the quiz

// event listener for when the user clicks an answer choice

// display the first question

You might also like