使用Javascript爲測驗結果添加詳細的輸入表格

Question

我目前正在製作一個在線測驗。目前的代碼工作正常，但我想看看誰得分。我對JavaScript仍然非常陌生，並且我一直在爲一位朋友構建測驗。我學到了很多東西，只是讓這個東西起作用。

可能有人請指出我如何添加一個簡單的文本輸入或兩個會顯示在搜索結果頁面被稱爲在問題數組的末尾朝着正確的方向

我想能夠讓用戶輸入他們的姓名，並使用php郵件將結果一起提交。

我試圖添加一個簡單的html輸入字段，如下面的HTML區域，但它從來沒有產生任何結果。

<input name="Name" type="text" value="" size="80"> 

Here is my fiddle to see my setup:

var allQuestions = [{ 
    question: "Anger can be thought of as a like other feelings and emotions.", 
    choices: ["Emotion", "Wave length", "Continuum", "Exercise"], 
    correctAnswer: 2 
}, { 
    question: "Strong, silent type of personality will usually when things finally overwhelm him.", 
    choices: ["Explode", "Implode", "Leave", "Cry"], 
    correctAnswer: 0 
}, { 
    question: "People that complain about everything, and see themselves as victims, fit the personality type called.", 
    choices: ["Prosecutor", "Grouch", "Exterminator", "Terminator"], 
    correctAnswer: 1 
}, { 
    question: "When someone wants to point out the faults in others, in order to shift blame off of himself, he is probably a", 
    choices: ["Displacer", "Intimidator", "Prosecutor", "grouch"], 
    correctAnswer: 2 
}, 
{ 
    question: "The type of personality takes his anger out on people or things he views as 「less threatening」 than the person he is actually mad at.", 
    choices: ["Grouch", "Displacer", "Prosecutor", "Coward"], 
    correctAnswer: 1 
}, 
{ 
    question: "The easiest type of anger personality to spot is usually the. Often these types come from abusive backgrounds.", 
    choices: ["Intimidator", "Grouch", "Displacer", "Prosecutor"], 
    correctAnswer: 0 
}, 
{ 
    question: "Anger has a medical definition, saying it is an state that ranges from to intense fury and rage.", 
    choices: ["Mental State Embarrassment", "Emotional State Mild Irritation", "Exhausted State Yawning", "Typical State Relaxing"], 
    correctAnswer: 1 
},      
{ 
    question: "Anger is often compared to a", 
    choices: ["Flock of Geese", "Chord of Wood", "Pressure Cooker", "Bag of Ice"], 
    correctAnswer: 2 
}, 
{ 
    question: "Anger and rage can become a form of . These people are known as rageaholics.", 
    choices: ["Addiction", "Skin Disease", "Problem", "Comfort Zone"], 
    correctAnswer: 0 
},      
{ 
    question: "First rule When you are don’t say anything!", 
    choices: ["Right", "Wrong", "Angry", "Confused"], 
    correctAnswer: 2 
},      
{ 
    question: "Many times, we feel angry because a situation seems negative, and seems to clash with our.", 
    choices: ["Belief System", "Current Plans", "Family Members", "Schedule"], 
    correctAnswer: 0 
},      
{ 
    question: "Many people carry beliefs, that keep them feeling victimized all of the time.", 
    choices: ["Stoic", "Unusual", "Irrational", "Western"], 
    correctAnswer: 2 
}, 
{ 
    question: "To contain anger, all we have to do is learn to view life from a perspective.", 
    choices: ["Personal", "Different", "Closed", "Unknown"], 
    correctAnswer: 1 
},      

]; 

//you can access checkbox name through an array 
//match array number to number in allQuestions array 

var questionNum = 0; 
var scoreNum = 0; 
var makeQuestions = ""; 
var failedQuestions = []; 

$(document).ready(function() { 
    makeQuestions = function() { 
     if (questionNum === allQuestions.length) { 
      $("input[value=SUBMIT]").remove(); 
      $("#questions").text(" All Complete!") .append("<br> Please click the button below to submit your results.") .append("<br>Your score is" + " " + scoreNum); 
      $("#questions").append("<br><input type='button' id='submit_answers' value='SUBMIT'><br><br>"); 
      $("#answers_correct").val(scoreNum); 
      $("#questions").append("Failed questions: " + failedQuestions.join()); 
     } else { 
      $("#questions").text(allQuestions[questionNum].question); 
      for (var i = 0; i < allQuestions[questionNum]['choices'].length; i++) { 
       $('#words').append('<input type="radio" name="buttons">' + allQuestions[questionNum]['choices'][i] + '</input'); 
      } 
     } 
    } 
    makeQuestions(); 


    $('#submit_answers').on('click', function() { 
     $('#answer_submission_form').submit(); 
    }); 

}); 



var checkQuestions = function() { 
    var lenG = document.getElementsByName("buttons").length; 
    console.log(lenG); 
    var rightAnswer = allQuestions[questionNum]['correctAnswer']; 
    for (var i = 0; i < lenG; i++) { 
     if (document.getElementsByName("buttons")[i].checked === true) { 
      console.log(i); 
      console.log(document.getElementsByName("buttons")[i].checked); 
      //compare value to what was inputted 
      if (i === rightAnswer) { 
       scoreNum += 1; 
       alert("Correct! Your score is" + " " + scoreNum); 
      } else { 
       failedQuestions.push(questionNum); 
       alert("False! Your score is still" + " " + scoreNum); 
      } 
     } 


    } 
    questionNum = questionNum + 1; 
    $("#words").empty(); 
    makeQuestions(); 

} 

Answer 1

我不知道，如果這是你需要什麼，但我添加了一個小提琴：

http://jsfiddle.net/5Jjam/40/

我加了div與id='name' 。這包含用於輸入文字的input字段。當所有答案都已提交時，將顯示此信息。