I'm currently trying to create a Maths quiz page.
The idea is that the user sees the question, enters the number into the text box, presses the submit button. If the answer is correct an alert should come up on the window to say the answer was correct and if incorrect the same thing but to say it's wrong.
Can anyone help with my JavaScript? I've been trying to write it so that on the click of the submit button the code runs an if statement to see if the answer is write or wrong therefore triggering the alert.
var Answer1 = "8";
var Guess1 = document.getElementById("AnsI1");
Guess1.addEventListener("click", Check1)
function Check1()
{
if (Guess1 == Answer1)
{
alert("You are correct! Move onto the next question")
}
else
{
alert("You are incorrect, please try again")
}
}<!DOCTYPE html>
<html lang="en">
<!--Mobile Compatibility-->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Style Sheet, Google Font Link, Page Title-->
<head>
<link rel="stylesheet" type="text/css" href="Site.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Langar&display=swap" rel="stylesheet">
<title>Maths Quiz</title>
</head>
<body id="QuizBod">
<h2 id="QTitle">Maths Quiz</h2>
<p id="MQ1">4 + 4</p>
<label class ="Albl">Answer:
<input id="AnsI1" type="text">
<button id="Sub1">submit</button>
</label>
<p id="MQ2">12 + 13</p>
<label class ="Albl">Answer:
<input id="AnsI2" type="text">
<button id="Sub2">submit</button>
</label>
<p id="MQ3">9 - 7</p>
<label class ="Albl">Answer:
<input id="AnsI3" type="text">
<button id="Sub3">submit</button>
</label>
<p id="MQ4">29 - 13</p>
<label class ="Albl">Answer:
<input id="AnsI4" type="text">
<button id="Sub4">submit</button>
</label>
<p id="MQ5">3 x 3</p>
<label class ="Albl">Answer:
<input id="AnsI5" type="text">
<button id="Sub5">submit</button>
</label>
<p id="MQ6">7 x 6</p>
<label class ="Albl">Answer:
<input id="AnsI6" type="text">
<button id="Sub6">submit</button>
</label>
<p id="MQ7">6 / 2</p>
<label class ="Albl">Answer:
<input id="AnsI7" type="text">
<button id="Sub7">submit</button>
</label>
<p id="MQ8">30 / 5</p>
<label class ="Albl">Answer:
<input id="AnsI8" type="text">
<button id="Sub8">submit</button>
</label>
<script src="MathsQuiz.js"></script>
</body>
Aucun commentaire:
Enregistrer un commentaire