如何用HTML代码检查输入的答案是否正确?

我正在为我的Google Sites中的学生开发逃生室游戏,而de HTML代码有问题。 目的是在文本框中输入文本答案,然后检查该答案是否正确。如果不正确,则应显示一条消息警告此消息,并且不应启用继续按钮。如果答案是正确的,则会出现一条消息,祝贺他们并解锁按钮以继续。

我制作了HTML代码的第一个版本(请参见下文),但是它对我不起作用,因为if部分存在问题。

有人可以帮我解决这个问题吗?我是一名科学老师,还是编程新手,由于COVID-19,我想为我的学生实施一些与众不同的方法。 提前非常感谢您!

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

评论
囍

在使用JS读取输入内容的同时,您的HTML中只有一个小问题 考虑这个HTML

<h3>Write here your answer...</h3>
<br>
<form name="f1">
  Your answer: <input type="password" name="studentAnswer" size="20">
  <br>
  <br>
  <input type="button" value="Check" onClick="checkAnswers()">

</form>

I've edited the name of the input, as you need to "select" it from JS using the name. So as you can see the input name is now studentAnswer, and that's how you reference it in your JS code, which I've edited as following

function checkAnswers() {
// document.$formName.$inputName
  Student_answer = document.f1.studentAnswer.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
  }

}

为了避免混淆您,我尽量简单了,好主意,您有恕我直言

点赞
评论