显示内容而不提交答案
Display content without submitting the answer
我希望问答应用程序在用户选择答案时自动转到下一个问题,但按照设置方式,用户必须单击提交答案,然后单击next,然后转到下一问题。
我想把按钮完全去掉。
演示:http://output.jsbin.com/eRiSUhIB/1/
Javascript:
var quiz = [{
"question": "What is the full form of IP?",
"choices": ["Internet Provider", "Internet Port", "Internet Protocol"],
"correct": "Internet Protocol"
}, {
"question": "Who is the founder of Microsoft?",
"choices": ["Bill Gates", "Steve Jobs", "Steve Wozniak"],
"correct": "Bill Gates"
}, {
"question": "1 byte = ?",
"choices": ["8 bits", "64 bits", "1024 bits"],
"correct": "8 bits"
}, {
"question": "The C programming language was developed by?",
"choices": ["Brendan Eich", "Dennis Ritchie", "Guido van Rossum"],
"correct": "Dennis Ritchie"
}, {
"question": "What does CC mean in emails?",
"choices": ["Carbon Copy", "Creative Commons", "other"],
"correct": "Carbon Copy"
}];
// define elements
var content = $("content"),
questionContainer = $("question"),
choicesContainer = $("choices"),
scoreContainer = $("score"),
submitBtn = $("submit");
// init vars
var currentQuestion = 0,
score = 0,
askingQuestion = true;
function $(id) { // shortcut for document.getElementById
return document.getElementById(id);
}
function askQuestion() {
var choices = quiz[currentQuestion].choices,
choicesHtml = "";
// loop through choices, and create radio buttons
for (var i = 0; i < choices.length; i++) {
choicesHtml += "<input type='radio' name='quiz" + currentQuestion +
"' id='choice" + (i + 1) +
"' value='" + choices[i] + "'>" +
" <label for='choice" + (i + 1) + "'>" + choices[i] + "</label><br>";
}
// load the question
questionContainer.textContent = "Q" + (currentQuestion + 1) + ". " +
quiz[currentQuestion].question;
// load the choices
choicesContainer.innerHTML = choicesHtml;
// setup for the first time
if (currentQuestion === 0) {
scoreContainer.textContent = "Score: 0 right answers out of " +
quiz.length + " possible.";
submitBtn.textContent = "Submit Answer";
}
}
function checkAnswer() {
// are we asking a question, or proceeding to next question?
if (askingQuestion) {
submitBtn.textContent = "Next Question";
askingQuestion = false;
// determine which radio button they clicked
var userpick,
correctIndex,
radios = document.getElementsByName("quiz" + currentQuestion);
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) { // if this radio button is checked
userpick = radios[i].value;
}
// get index of correct answer
if (radios[i].value == quiz[currentQuestion].correct) {
correctIndex = i;
}
}
// setup if they got it right, or wrong
var labelStyle = document.getElementsByTagName("label")[correctIndex].style;
labelStyle.fontWeight = "bold";
if (userpick == quiz[currentQuestion].correct) {
score++;
labelStyle.color = "green";
} else {
labelStyle.color = "red";
}
scoreContainer.textContent = "Score: " + score + " right answers out of " +
quiz.length + " possible.";
} else { // move to next question
// setting up so user can ask a question
askingQuestion = true;
// change button text back to "Submit Answer"
submitBtn.textContent = "Submit Answer";
// if we're not on last question, increase question number
if (currentQuestion < quiz.length - 1) {
currentQuestion++;
askQuestion();
} else {
showFinalResults();
}
}
}
function showFinalResults() {
content.innerHTML = "<h2>You've complited the quiz!</h2>" +
"<h2>Below are your results:</h2>" +
"<h2>" + score + " out of " + quiz.length + " questions, " +
Math.round(score / quiz.length * 100) + "%<h2>";
}
window.addEventListener("load", askQuestion, false);
submitBtn.addEventListener("click", checkAnswer, false);
这应该完全符合您的要求:)。希望它能有所帮助!
var quiz = [{
"question": "What is the full form of IP?",
"choices": ["Internet Provider", "Internet Port", "Internet Protocol"],
"correct": "Internet Protocol"
}, {
"question": "Who is the founder of Microsoft?",
"choices": ["Bill Gates", "Steve Jobs", "Steve Wozniak"],
"correct": "Bill Gates"
}, {
"question": "1 byte = ?",
"choices": ["8 bits", "64 bits", "1024 bits"],
"correct": "8 bits"
}, {
"question": "The C programming language was developed by?",
"choices": ["Brendan Eich", "Dennis Ritchie", "Guido van Rossum"],
"correct": "Dennis Ritchie"
}, {
"question": "What does CC mean in emails?",
"choices": ["Carbon Copy", "Creative Commons", "other"],
"correct": "Carbon Copy"
}];
// define elements
var content = $("content"),
questionContainer = $("question"),
choicesContainer = $("choices"),
scoreContainer = $("score"),
submitBtn = $("submit");
// init vars
var currentQuestion = 0,
score = 0,
askingQuestion = true;
function $(id) { // shortcut for document.getElementById
return document.getElementById(id);
}
function askQuestion() {
var choices = quiz[currentQuestion].choices,
choicesHtml = "";
}
相关文章:
- Javascript生成的表单未提交
- 将输入字段中的文本提交到我的数据库,同时将其添加到我的列表中
- HTML表单提交时未执行外部函数
- 在POST中将html表作为csv提交
- 我应该使用Ng提交还是点击表格
- 根据ajax搜索答案自动填写表单并提交
- 单击提交按钮后,答案逐渐消失
- 显示内容而不提交答案
- 如果答案正确,如何将提交按钮重定向到下一页
- 提交表单时,检查文本框是否为某个字符串,并根据答案显示警报
- 在 DNN 中提交表单,典型答案不起作用
- 尽管答案错误,JavaScript表单仍提交
- 验证提交到数据库的答案
- 我需要在表单提交后显示一条包含变量(表单中的答案)的消息
- 如何提交表格,并在每个不同的'选择mysql-query'并将答案插入mysql数据库
- 如何在javascript中比较提交的测验答案数组与正确答案数组
- Jquery UI,自动完成,尝试以表单形式提交所选答案
- 在提交之前验证所需的答案是否有响应
- 我该如何让我提交的答案继续堆叠在一起
- 如何检查提交的单选按钮是否包含正确答案