I'm trying to make a quiz with JavaScript and html. The user is asked to enter an answer of a question in a prompt field, the users answer and the right answer is sent to a function that compares them. If the answer subtracted with the right answer equals zero, the function will return a Point. If that isn't true the function won't return a point. If the answer from the user is anything other than 1-3 the function alerts of an invalid input. Everything here works however I want to add a feature that makes the code ask the same question again if the users answer is invalid, in other Words not 1-3. I've tried using while loops but can't get that to work. Any suggestions to how I could solve this and/or any other tips to make the code more structured.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<META CHARSET="UTF-8">
<TITLE>Quiz</TITLE>
</HEAD>
<BODY>
<SCRIPT TYPE="text/javascript">
var points = 0;
var answer = parseInt(prompt("Which animal is not a mammal? \n 1. Shark \n 2. Dolphin \n 3. Whale"));
correctanswer = 1;
control(answer, correctanswer);
answer = parseInt(prompt("Which country is not in asia? \n 1. Georgia \n 2. Ukraine \n 3. Iran"));
correctanswer = 2;
control(answer, correctanswer);
answer = parseInt(prompt("What is amazons founder named? \n 1. Jeff Bezos \n 2. Kenneth Spielberg \n 3. Elon Musk"));
correctanswer = 1;
control(answer, correctanswer);
answer = parseInt(prompt("Which element are diamonds made of? \n 1. Platinum \n 2. Iron \n 3. Carbon"));
correctanswer = 3;
control(answer, correctanswer);
answer = parseInt(prompt("Which gases make up the biggest part of the atmosphere? \n 1. Oxygen and carbondioxide \n 2. Nitrogen and oxygen \n 3. Oxygen and hydrogen"));
correctanswer = 2;
control(answer, correctanswer);
answer = parseInt(prompt("Which country is not in the EU? \n 1. Lithuania \n 2. Croatia \n 3. Bosnia"));
correctanswer = 3;
control(answer, correctanswer);
function control(answer, correctanswer) {
if(answer < 1 || answer > 3 || isNaN(answer)) {
alert("Invalid input! Try again!");
}
else if((answer - correctanswer) == 0) {
return points += 1;
}
}
document.write("You got: " + points + " total points of 6 .")
</SCRIPT>
</BODY>
</HTML>
Replace some of your code with the following function.
function askQuestion(question, correctAnswer) {
let answer = parseInt(prompt(question));
control(answer, correctAnswer);
if (answer !== 1 && answer !== 2 && answer !== 3) {
askQuestion(question, correctAnswer);
}
}
This will make your code much shorter, along with adding the functionality of repeating the questions if invalid input is given.
Here is the askQuestion() function implemented in your code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Quiz</title>
</head>
<body>
<script type="text/javascript">
function askQuestion(question, correctAnswer) {
let answer = parseInt(prompt(question));
control(answer, correctAnswer);
if (answer !== 1 && answer !== 2 && answer !== 3) {
askQuestion(question, correctAnswer);
}
}
let points = 0;
askQuestion("Which animal is not a mammal? \n 1. Shark \n 2. Dolphin \n 3. Whale", 1);
askQuestion("Which country is not in asia? \n 1. Georgia \n 2. Ukraine \n 3. Iran", 2);
//Do the same for the rest of the questions...
function control(answer, correctanswer) {
if (answer < 1 || answer > 3 || isNaN(answer)) {
alert("Invalid input! Try again!");
}
else if((answer - correctanswer) == 0) {
return points += 1;
}
}
document.write("You got: " + points + " total points of 6 .")
</script>
</body>
</html>