创建一个自动显示答案说明的JavaScript测验

Fiddler演示： http ： //jsfiddle.net/natmit/7Du6N/

我一直在拔我的头发所以任何来自JavaScript / Jquery天才的帮助都非常感谢…我已经联系了这段代码的作者，他没有回复。

我需要帮助使测验做下面列出的这些事情：

1. 用户单击选择后，立即显示说明而不单击“检查答案”。

2. 我根本不想要“检查答案”按钮。 应该隐藏提交按钮，直到用户点击选项，然后它应显示标记为“下一个问题”，然后单击，转到测验中的下一个问题。

3. 移动说明以显示答案选项下方。

4. 在结果页面上，我需要一种方法来显示一个图像，如果他们得分1-5正确，并且如果他们得分6-8正确（假设总共有8个问题）则需要一个不同的图像。

N先生，谢谢你

var quiztitle = "Quiz Title"; /** * Set the information about your questions here. The correct answer string needs to match * the correct choice exactly, as it does string matching. (case sensitive) * */ var quiz = [ { "question" : "Q1: Who came up with the theory of relativity?", "image" : "http://sofzh.miximages.com/javascript/Albert_Einstein_Head.jpg/220px-Albert_Einstein_Head.jpg", "choices" : [ "Sir Isaac Newton", "Nicolaus Copernicus", "Albert Einstein", "Ralph Waldo Emmerson" ], "correct" : "Albert Einstein", "explanation" : "Albert Einstein drafted the special theory of relativity in 1905.", }, { "question" : "Q2: Who is on the two dollar bill?", "image" : "http://sofzh.miximages.com/javascript/US_$2_obverse-high.jpg/320px-US_%242_obverse-high.jpg", "choices" : [ "Thomas Jefferson", "Dwight D. Eisenhower", "Benjamin Franklin", "Abraham Lincoln" ], "correct" : "Thomas Jefferson", "explanation" : "The two dollar bill is seldom seen in circulation. As a result, some businesses are confused when presented with the note.", }, { "question" : "Q3: What event began on April 12, 1861?", "image" : "", "choices" : [ "First manned flight", "California became a state", "American Civil War began", "Declaration of Independence" ], "correct" : "American Civil War began", "explanation" : "South Carolina came under attack when Confederate soldiers attacked Fort Sumter. The war lasted until April 9th 1865.", }, ]; /******* No need to edit below this line *********/ var currentquestion = 0, score = 0, submt=true, picked; jQuery(document).ready(function($){ /** * HTML Encoding function for alt tags and attributes to prevent messy * data appearing inside tag attributes. */ function htmlEncode(value){ return $(document.createElement('div')).text(value).html(); } /** * This will add the individual choices for each question to the ul#choice-block * * @param {choices} array The choices from each question */ function addChoices(choices){ if(typeof choices !== "undefined" && $.type(choices) == "array"){ $('#choice-block').empty(); for(var i=0;i<choices.length; i++){ $(document.createElement('li')).addClass('choice choice-box').attr('data-index', i).text(choices[i]).appendTo('#choice-block'); } } } /** * Resets all of the fields to prepare for next question */ function nextQuestion(){ submt = true; $('#explanation').empty(); $('#question').text(quiz[currentquestion]['question']); $('#pager').text('Question ' + Number(currentquestion + 1) + ' of ' + quiz.length); if(quiz[currentquestion].hasOwnProperty('image') && quiz[currentquestion]['image'] != ""){ if($('#question-image').length == 0){ $(document.createElement('img')).addClass('question-image').attr('id', 'question-image').attr('src', quiz[currentquestion]['image']).attr('alt', htmlEncode(quiz[currentquestion]['question'])).insertAfter('#question'); } else { $('#question-image').attr('src', quiz[currentquestion]['image']).attr('alt', htmlEncode(quiz[currentquestion]['question'])); } } else { $('#question-image').remove(); } addChoices(quiz[currentquestion]['choices']); setupButtons(); } /** * After a selection is submitted, checks if its the right answer * * @param {choice} number The li zero-based index of the choice picked */ function processQuestion(choice){ if(quiz[currentquestion]['choices'][choice] == quiz[currentquestion]['correct']){ $('.choice').eq(choice).css({'background-color':'#50D943'}); $('#explanation').html('Correct! ' + htmlEncode(quiz[currentquestion]['explanation'])); score++; } else { $('.choice').eq(choice).css({'background-color':'#D92623'}); $('#explanation').html('Incorrect. ' + htmlEncode(quiz[currentquestion]['explanation'])); } currentquestion++; $('#submitbutton').html('NEXT QUESTION »').on('click', function(){ if(currentquestion == quiz.length){ endQuiz(); } else { $(this).text('Check Answer').css({'color':'#222'}).off('click'); nextQuestion(); } }) } /** * Sets up the event listeners for each button. */ function setupButtons(){ $('.choice').on('mouseover', function(){ $(this).css({'background-color':'#e1e1e1'}); }); $('.choice').on('mouseout', function(){ $(this).css({'background-color':'#fff'}); }) $('.choice').on('click', function(){ picked = $(this).attr('data-index'); $('.choice').removeAttr('style').off('mouseout mouseover'); $(this).css({'border-color':'#222','font-weight':700,'background-color':'#c1c1c1'}); if(submt){ submt=false; $('#submitbutton').css({'color':'#000'}).on('click', function(){ $('.choice').off('click'); $(this).off('click'); processQuestion(picked); }); } }) } /** * Quiz ends, display a message. */ function endQuiz(){ $('#explanation').empty(); $('#question').empty(); $('#choice-block').empty(); $('#submitbutton').remove(); $('#question').text("You got " + score + " out of " + quiz.length + " correct."); $(document.createElement('h2')).css({'text-align':'center', 'font-size':'4em'}).text(Math.round(score/quiz.length * 100) + '%').insertAfter('#question'); } /** * Runs the first time and creates all of the elements for the quiz */ function init(){ //add title if(typeof quiztitle !== "undefined" && $.type(quiztitle) === "string"){ $(document.createElement('h1')).text(quiztitle).appendTo('#frame'); } else { $(document.createElement('h1')).text("Quiz").appendTo('#frame'); } //add pager and questions if(typeof quiz !== "undefined" && $.type(quiz) === "array"){ //add pager $(document.createElement('p')).addClass('pager').attr('id','pager').text('Question 1 of ' + quiz.length).appendTo('#frame'); //add first question $(document.createElement('h2')).addClass('question').attr('id', 'question').text(quiz[0]['question']).appendTo('#frame'); //add image if present if(quiz[0].hasOwnProperty('image') && quiz[0]['image'] != ""){ $(document.createElement('img')).addClass('question-image').attr('id', 'question-image').attr('src', quiz[0]['image']).attr('alt', htmlEncode(quiz[0]['question'])).appendTo('#frame'); } $(document.createElement('p')).addClass('explanation').attr('id','explanation').html(' ').appendTo('#frame'); //questions holder $(document.createElement('ul')).attr('id', 'choice-block').appendTo('#frame'); //add choices addChoices(quiz[0]['choices']); //add submit button $(document.createElement('div')).addClass('choice-box').attr('id', 'submitbutton').text('Check Answer').css({'font-weight':700,'color':'#222','padding':'30px 0'}).appendTo('#frame'); setupButtons(); } } init(); });   /*css reset */ html,body,div,span,h1,h2,h3,h4,h5,h6,p,code,small,strike,strong,sub,sup,b,u,i{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;} body{line-height:1; font:normal 0.9em/1em "Helvetica Neue", Helvetica, Arial, sans-serif;} ol,ul{list-style:none;} strong{font-weight:700;} #frame{max-width:620px;width:auto;border:1px solid #ccc;background:#fff;padding:10px;margin:3px;} h1{font:normal bold 2em/1.8em "Helvetica Neue", Helvetica, Arial, sans-serif;text-align:left;border-bottom:1px solid #999;padding:0;width:auto} h2{font:italic bold 1.3em/1.2em "Helvetica Neue", Helvetica, Arial, sans-serif;padding:0;text-align:center;margin:20px 0;} p.pager{margin:5px 0 5px; font:bold 1em/1em "Helvetica Neue", Helvetica, Arial, sans-serif;color:#999;} img.question-image{display:block;max-width:250px;margin:10px auto;border:1px solid #ccc;width:100%;height:auto;} #choice-block{display:block;list-style:none;margin:0;padding:0;} #submitbutton{background:#5a6b8c;} #submitbutton:hover{background:#7b8da6;} #explanation{margin:0 auto;padding:20px;width:75%;} .choice-box{display:block;text-align:center;margin:8px auto;padding:10px 0;border:1px solid #666;cursor:pointer;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}  

Answer 1

请尝试以下代码。 在选择答案时，它将显示3秒的解释，然后转到下一个问题。

Answer 2

我在这里更新了代码 –

 var quiztitle = "Social Security Quiz"; var quiz = [ { "question" : "Q1: Who came up with the theory of relativity?", "image" : "http://sofzh.miximages.com/javascript/Albert_Einstein_Head.jpg/220px-Albert_Einstein_Head.jpg", "choices" : [ "Sir Isaac Newton", "Nicolaus Copernicus", "Albert Einstein", "Ralph Waldo Emmerson" ], "correct" : "Albert Einstein", "explanation" : "Albert Einstein drafted the special theory of relativity in 1905.", }, { "question" : "Q2: Who is on the two dollar bill?", "image" : "http://sofzh.miximages.com/javascript/US_$2_obverse-high.jpg/320px-US_%242_obverse-high.jpg", "choices" : [ "Thomas Jefferson", "Dwight D. Eisenhower", "Benjamin Franklin", "Abraham Lincoln" ], "correct" : "Thomas Jefferson", "explanation" : "The two dollar bill is seldom seen in circulation. As a result, some businesses are confused when presented with the note.", }, { "question" : "Q3: What event began on April 12, 1861?", "image" : "", "choices" : [ "First manned flight", "California became a state", "American Civil War began", "Declaration of Independence" ], "correct" : "American Civil War began", "explanation" : "South Carolina came under attack when Confederate soldiers attacked Fort Sumter. The war lasted until April 9th 1865.", }, ]; var currentquestion = 0, score = 0, submt = true, picked; $(document).ready(function(){ $("#submitbutton").hide(); function htmlEncode(value) { return $(document.createElement('div')).text(value).html(); } function addChoices(choices) { if (typeof choices !== "undefined" && $.type(choices) == "array") { $('#choice-block').empty(); for (var i = 0; i < choices.length; i++) { $(document.createElement('li')).addClass('choice choice-box').attr('data-index', i).text(choices[i]).appendTo('#choice-block'); } } } function nextQuestion() { submt = true; alert("nQ"); $('#explanation').empty(); $('#question').text(quiz[currentquestion]['question']); $('#pager').text('Question ' + Number(currentquestion + 1) + ' of ' + quiz.length); if (quiz[currentquestion].hasOwnProperty('image') && quiz[currentquestion]['image'] != "") { if ($('#question-image').length == 0) { $(document.createElement('img')).addClass('question-image').attr('id', 'question-image').attr('src', quiz[currentquestion]['image']).attr('alt', htmlEncode(quiz[currentquestion]['question'])).insertAfter('#question'); } else { $('#question-image').attr('src', quiz[currentquestion]['image']).attr('alt', htmlEncode(quiz[currentquestion]['question'])); } } else { $('#question-image').remove(); } addChoices(quiz[currentquestion]['choices']); setupButtons(); } function processQuestion(choice) { alert(choice); currentquestion++; alert(currentquestion); $("#submitbutton").hide(); if (currentquestion == quiz.length) { endQuiz(); } else { nextQuestion(); } } function setupButtons() { $('.choice').on('mouseover', function () { $(this).css({ 'background-color': '#e1e1e1' }); }); $('.choice').on('mouseout', function () { $(this).css({ 'background-color': '#fff' }); }) $('.choice').on('click', function () { alert(""); choice = $(this).attr('data-index'); $('.choice').removeAttr('style').off('mouseout mouseover'); $(this).css({ 'border-color': '#222', 'font-weight': 700, 'background-color': '#c1c1c1' }); if (quiz[currentquestion]['choices'][choice] == quiz[currentquestion]['correct']) { $('.choice').eq(choice).css({ 'background-color': '#50D943' }); $('#explanation').html('Correct! ' + htmlEncode(quiz[currentquestion]['explanation'])); score++; } else { $('.choice').eq(choice).css({ 'background-color': '#D92623' }); $('#explanation').html('Incorrect. ' + htmlEncode(quiz[currentquestion]['explanation'])); } $("#submitbutton").show(); if (submt) { alert("submit"); submt = false; $('#submitbutton').css({ 'color': '#000' }); $("#submitbutton").click(function(){ alert("click"); $('.choice').off('click'); $(this).off('click'); processQuestion(choice); }); } }) } function endQuiz() { $('#explanation').empty(); $('#question').empty(); $('#choice-block').empty(); $('#submitbutton').remove(); $('#question').text("You got " + score + " out of " + quiz.length + " correct."); $(document.createElement('h2')).css({ 'text-align': 'center', 'font-size': '4em' }).text(Math.round(score / quiz.length * 100) + '%').insertAfter('#question'); } function init() { //add title if (typeof quiztitle !== "undefined" && $.type(quiztitle) === "string") { $(document.createElement('h1')).text(quiztitle).appendTo('#frame'); } else { $(document.createElement('h1')).text("Quiz").appendTo('#frame'); } //add pager and questions if (typeof quiz !== "undefined" && $.type(quiz) === "array") { //add pager $(document.createElement('p')).addClass('pager').attr('id', 'pager').text('Question 1 of ' + quiz.length).appendTo('#frame'); //add first question $(document.createElement('h2')).addClass('question').attr('id', 'question').text(quiz[0]['question']).appendTo('#frame'); //add image if present if (quiz[0].hasOwnProperty('image') && quiz[0]['image'] != "") { $(document.createElement('img')).addClass('question-image').attr('id', 'question-image').attr('src', quiz[0]['image']).attr('alt', htmlEncode(quiz[0]['question'])).appendTo('#frame'); } $(document.createElement('p')).addClass('explanation').attr('id', 'explanation').html(' ').appendTo('#frame'); //questions holder $(document.createElement('ul')).attr('id', 'choice-block').appendTo('#frame'); //add choices addChoices(quiz[0]['choices']); //add submit button $(document.createElement('div')).addClass('choice-box').attr('id', 'submitbutton').text('Check Answer').css({ 'font-weight': 700, 'color': '#222', 'padding': '30px 0', }).appendTo('#frame'); $("#submitbutton").hide(); setupButtons(); } } init(); }); 

工作小提琴手： – http://jsfiddle.net/7Du6N/6/