测验教程,仅当选中其中一个答案时才显示按钮"submit"



我按照YouTube上的教程创建了一个测验。
我看到即使您没有选择任何选项,您仍然可以继续下一个问题,因此为了避免这种情况,我想仅在选择其中一个单选按钮时才显示按钮。谁能帮我为此添加 if 语句。

var quiz;
var quizStatus;
var pos = 0;
var correct = 0;
var chA, chB, chC, choice;
var question;
var choices;
var buttonC;
var questions = [
["Who is the king of the world?", "Jakub", "Tomek", "Darek", "A"],
["What is the capital of Poland?", "Warsaw", "Paris", "Rome", "A"],
["Who is Robert Lewandowski?", "An Actor", "A football player", "A Doctor", "B"]
];
function displayQuestions() {
if (pos === questions.length) {
quiz.innerHTML = "you compleate the test <br>";
quiz.innerHTML += "your score is " + correct;
quiz.innerHTML += '<input type="button"  value="Restart" onclick="restartTest()">'
}
quiz = document.getElementById("quiz");
quizStatus = document.getElementById("quiz-status");
question = questions[pos][0];
chA = questions[pos][1];
chB = questions[pos][2];
chC = questions[pos][3];
quizStatus.innerHTML = "Question" + (pos + 1) + "of" + questions.length;
"<br>";
quiz.innerHTML = question + "<br>";
quiz.innerHTML += '<input type="radio" name="choices" value="A">' + chA + "<br>"
quiz.innerHTML += '<input type="radio" name="choices" value="B">' + chB + "<br>"
quiz.innerHTML += '<input type="radio" name="choices" value="C">' + chC + "<br>"
quiz.innerHTML += '<input id="buttonC" type="button"  value="Submit" onclick="submitQuestion()">'
}
function submitQuestion() {
choices = document.getElementsByName("choices");
buttonC = document.getElementById("buttonC");
for (var i = 0; i < choices.length; i++) {
if (choices[i].checked) {
choice = choices[i].value;
}
}
if (choice == questions[pos][4]) {
correct++;
}
pos++;
displayQuestions();
}
function restartTest() {
pos = 0
correct = 0
displayQuestions()
}
window.addEventListener("load", displayQuestions, false);
<div id="quiz-status"></div>
<div id="quiz"></div>
<div id="result"></div>

首先,这里有一个代码笔的链接: https://codepen.io/superawesomecoder1/pen/BVJjXY

基本上,我所做的是将禁用的标签添加到按钮上,使其禁用,直到用户选中其中一个复选框。

quiz.innerHTML += '<input id="buttonC" type="button"  value="Submit" onclick="submitQuestion()" disabled>'

然后,只需将以下内容添加到每个按钮即可。 在我的示例中,我制作了一个缩短的变量,因此代码更短一些。

onclick="document.getElementById(&quot;buttonC&quot;).disabled = false">

让我知道这是否适合您!

相关内容

最新更新