Search code examples
javascripthtmlwhile-loopprompt

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>


Solution

  • 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>