Question

82

How to check if an entered answer is correct with HTML code?

rated 0 times [ 86] [ 4] / answers: 1 / hits: 6186 / 4 Years ago, sat, may 23, 2020, 12:00:00

I'm developing an escape room game for my students in Google Sites, and I have a problem with de HTML code.
The goal is to enter a text answer in a text box and then check whether that answer is correct or not. If not correct, a message should appear warning this and the continue button should not be enabled; while in case the answer was correct, a message should appear congratulating them and unlock the button to continue.

I made a first version of the HTML code (see below) but it doesn't work for me, as I have problems in the if section.

Could someone please help me solve this? I am a science teacher, a novice in programming and due to COVID-19 I would like to implement something different for my students.
Thank you very much in advance!

<head>

<title></title>





<script>

function checkAnswers(){

    Student_answer = document.f1.Student_answer.value

    Teacher_answer = abc



    if (Student_answer.length == 0 || Teacher_answer.length == 0) {

        alert(You must enter an answer to continue...);

        return false;

        }



    if (Student_answer == Teacher_answer) {

        alert(CONGRATULATIONS! Your answer is correct! You have advanced to the next level);

        //<button onclick=window.location.href = 'https://www.google.com';>Next Riddle</button>

        //NOTE: here is where the button should be activated and click on it to advance to an hyperlink 

        }



        else 

        {

        alert(Worng answer, please, keep trying...<br />);

        //NOTE: here the button must be disabled

        }



}

</script>

</head>

<body>



<h3>Write here your answer...</h3>

<br>



<form action= name=f1>

Youy answer: <input type=password name=clave1 size=20>

<br>

<br>

<input type=button value=Check onClick=checkAnswers()>



</form>

</body>

</html>```

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

janettejordynm

Add To Favorites

Follow

Total Points: 550

Total Questions: 94

Total Answers: 98

Location: Senegal

Member since Fri, Aug 21, 2020

4 Years ago

janettejordynm questions

1 Chunk file upload with axios

Tue, Nov 24, 20, 00:00, 4 Years ago

1 Node unable to find module alias defined in tsconfig and package.json

Thu, Jun 18, 20, 00:00, 4 Years ago

1 Can someone explain this piece of Javascript code?

Mon, Apr 6, 20, 00:00, 4 Years ago

1 AES Encryption/Decryption in Node JS similar to Java

Tue, Feb 18, 20, 00:00, 4 Years ago

1 Express not setting Cookie

Wed, Oct 23, 19, 00:00, 5 Years ago

View All

answered 4 Years ago averyc · Accepted Answer

This works.

<html>

  <head>

    <title></title>

    <script>

    function checkAnswers(){

        // The following is what I changed.

        Student_answer = document.querySelector('[name=clave1]').value

        Teacher_answer = abc



        if (Student_answer.length === 0 || Teacher_answer.length === 0) {

            alert(You must enter an answer to continue...);

            return false;

        }



        if (Student_answer === Teacher_answer) {

            alert(CONGRATULATIONS! Your answer is correct! You have advanced to the next level.);

            document.body.innerHTML += '<button onclick=window.location.href = 'https://www.google.com';>Next Riddle</button>'

            //NOTE: here is where the button should be activated and click on it to advance to an hyperlink 

        } else {

            alert(Wrong answer, please, keep trying...);

            //NOTE: here the button must be disabled

        }



    }

    </script>

  </head>

  <body>



    <h3>Write here your answer...</h3>

    <br>



    <form action= name=f1 onsubmit >

      Your answer: <input type=password name=clave1 size=20>

      <br>

      <br>

      <input type=button value=Check onClick=checkAnswers()>



    </form>

  </body>

</html>

I also made some grammar and style fixes in your code.

Edit: I added the button functionality you asked about in your comment.