CODEWITHSUNDEEP
javascripthtmlwhile-loopprompt
Saskatoon233
Saskatoon233

Reputation: 25

Repeat a prompt field until a condition is true

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>

Upvotes: 1

Views: 693

Answers (1)

Tanner Kopel
Tanner Kopel

Reputation: 28

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>

Upvotes: 1

Related Questions