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

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

Solution

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.