收集答案并进行测试

Question

我正试着和我的学生们一起寻宝。基本上，他们会做一些事情，输入一个答案，如果答案正确，那么页面应该给他们跳转到下一条线索的URL。如果是错误的，他们会得到一个"；对不起，错了"消息，可以一直输入，直到他们得到它。我已经阅读了几个网站，并尝试了不同的东西。我已经完成了输入，但不知道如何在JS中显示供他们点击的热链接。我有一个免费的网站设置，想插入这个Javascript，但它当然不起作用！

function myFunction() {
var letter = document.getElementById("personsInput").value;
var text;
let linkName = "Next challenge.";
// If the word is correct “chocolate"
if (letter === "chocolate") {
text = "<a ref ='https:// this is where the URL goes'> +linkName + " < /a>";
// If the word is anything else
} else {
text = "Sorry, wrong answer";
}
document.getElementById("demo").innerHTML = text;
}

<input id="personsInput" type="text">
<button onclick="myFunction()">What is your answer?</button>
<p id="demo"></p>

Answer 1

1. 您缺少"<a ...> + linkname的右引号
2. 您的锚点标记需要href，而不是ref。我解决了这两个问题，它按预期工作

<input id="personsInput" type="text">
<button onclick="myFunction()">What is your answer?</button>
<p id="demo"></p>
<script>
function myFunction() {
var letter = document.getElementById("personsInput").value;
var text;
let linkName = "Next challenge.";
// If the word is correct “chocolate"
if (letter === "chocolate") {
text = "<a href ='https:// this is where the URL goes'>" +linkName + "</a>";
// If the word is anything else
} else {
text = "Sorry, wrong answer";
}
document.getElementById("demo").innerHTML = text;
}
</script>

Answer 2

这里有另一种方法使用document.createElement

<script>
function myFunction() {
const answer = document.getElementById("personsInput").value;
const resultArea = document.getElementById("demo")
const linkName = "Next challenge.";
const wrongAnswer = "Sorry, wrong answer.";
resultArea.innerHTML = '';
if (answer === "chocolate") {
const link = document.createElement('a');
link.href = 'http://google.com';
link.text = linkName;
link.target = '_blank';
resultArea.appendChild(link);
} else {
text = "Sorry, wrong answer";
resultArea.innerHTML = wrongAnswer;
}
}
</script>
<input id="personsInput" type="text">
<button onclick="myFunction()">What is your answer?</button>
<p id="demo">
</p>

正如其他答案中所指出的，这可能不是考试学生的最佳方式，因为他们可以查看来源并从中获得正确答案。

Answer 3

你明白了！你只是错过了一个结束语；在URL所在的位置之后。

警告你的学生将能够检查网站来源并看到正确的答案。

text = "<a ref ='https:// this is where the URL goes'>" + linkName + "
</a>";

function myFunction() {
var letter = document.getElementById("personsInput").value;
var text;
let linkName = "Next challenge.";
// If the word is correct “chocolate"
if (letter === "chocolate") {
text = "<a ref ='https:// this is where the URL goes'>" + linkName + " </a>";
// If the word is anything else
} else {
text = "Sorry, wrong answer";
}
document.getElementById("demo").innerHTML = text;
}

<input id="personsInput" type="text">
<button onclick="myFunction()">What is your answer?</button>
<p id="demo"></p>