2016-03-20 33 views
-1

由於某些原因,只有score0纔想增加。雖然兩個for-loops看起來相同(如果我錯了,真的很抱歉)。所以totScore只是從score0變量中獲得值。但是當然,我希望totScore從兩個變量中獲得價值,從而獲得測驗的總分。試圖從測驗中取回分數

此外,爲什麼當我寫score0 += 1;時,它會將score0加上4,這對我沒有任何意義。

如果您更改我的代碼很多請不要使用任何JQuery。 謝謝!

<!DOCTYPE html> 
<html> 
<body> 
<form id='quizForm'> 
    <ul> 
     <li> 
      <h3>How many letters are there in 'FB'?</h3> 
      <input type="radio" name="question0" value="A" />2<br> 
      <input type="radio" name="question0" value="B" />1<br> 
      <input type="radio" name="question0" value="C" />3<br> 
      <input type="radio" name="question0" value="D" />4<br> 
     </li> 
    </ul> 
    <ul> 
     <li> 
      <h3>How many letters are there in 'IBM'?</h3> 
      <input type="radio" name="question1" value="A" />2<br> 
      <input type="radio" name="question1" value="B" />1<br> 
      <input type="radio" name="question1" value="C" />3<br> 
      <input type="radio" name="question1" value="D" />4<br> 
     </li> 
    </ul> 
</form> 

<button onclick="showScore()">Show results 
</button> 
     <script>  
     //Score and answer variables 
     var score1 = 0; 
     var score0 = 0; 
     var totScore = 0; 
     var answers = ["A","C"] 
//function to calculate the score. 
function getScore() { 
    // some arrays and stuff 
    userInput1 = new Array(10); 
    userInput0 = new Array(10); 
    var question0s = document.getElementsByName("question0"); 

    //for loop to see which radio was checked 
    for (var i = 0; i < question0s.length; i++) { 
     if (question0s[i].checked) { 
      userInput0[0] = question0s[i].value; 
    } 
    if (userInput0[0] == answers[0]) { 
     // Only god knows why the hell I have to divide 4 
     score0 += 1/4; 
    } 
    else if (userInput0[0] != answers [0]){ 
     //so that user can't just switch back and fourth from inputs to get higher score. 
     score0 -= 1 ; 
    } 
    } 
    //if user has changed her answer multiple times she will get an answer with a negative value. I don't want that, so if score is less than 0 it turns to 0. 
    if (score0 < 0){ 
     score0 = score0 * 0; 
    } 

    var question1s = document.getElementsByName("question1"); 
    //for loop to see which radio was checked 
    for (var y = 0; y < question1s.length; y++) { 
     if (question1s[y].checked) { 
      userInput1[0] = question1[y].value; 
    } 
    if (userInput1[0] == answers[0]) { 
     score1 += 1; 
    } 
    else if (userInput1[0] != answers [0]){ 
    //so that user can't just switch back and fourth from inputs to get higher score. 
     score1 -= 1 ; 
    } 
    } 
    if (score1 < 0){ 
     //if user has changed her answer multiple times she will get an answer with a negative value. I don't want that, so if score is less than 0 it turns to 0. 
     score1 = score1 * 0; 
    } 
    //getting score from all different questions 
    totScore += score1 + score0; 
} 
//checking for changes in the form 
var quizForm = document.getElementById('quizForm'); 
quizForm.addEventListener("change", function(){ 
    getScore(); 
}); 


// onclick function 
function showScore(){ 
    alert (totScore); 
} 
    </script> 
</body> 
</html> 

回答

0

至於爲什麼你沒有得到正確的處理,你有一個無效的變量question1這裏:

userInput1[0] = question1[y].value; 

現在讓我們來解決這個問題,而且要做得更好。

首先,你有一些全局變量,所以讓我們在一個簡單的命名空間下得到它,並把它稱爲quiz

從標記中獲取點擊處理程序併爲此創建一個偵聽器。

現在至於你的邏輯,你正在循環單選按鈕。現在單選按鈕的工作方式是隻有一個可以選擇,所以讓我們利用這個優勢不要做循環。

使用單選按鈕,如果還沒有選中它,那麼使用我們的新選擇技術它將是NULL,因此我們可以使用它來確定兩個問題是否都已被回答,然後如果這是真的,我們可以把分數。否則,他們得不到分數(得分爲0),直到所有問題都被回答(不是NULL)。

//Score and answer variables= 
var quiz = { 
    score0: 0, 
    score1: 0, 
    totalScore: 0, 
    answers: ["A", "C"], 
    maxScore: 2, 
    tries: 0 
}; 
//function to calculate the score. 
function getScore() { 
    var answer0 = document.querySelector('input[name="question0"]:checked'); 
    quiz.score0 = answer0 != null && quiz.answers[0] == answer0.value ? 1 : 0; 
    var answer1 = document.querySelector('input[name="question1"]:checked'); 
    quiz.score1 = answer1 != null && quiz.answers[1] == answer1.value ? 1 : 0; 
    // if either is null, not all answered 
    if (answer0 != null && answer1 != null) { 
    // if previous tries, subtract how many 
    if (quiz.tries) { 
     quiz.totalScore = quiz.totalScore ? quiz.totalScore - quiz.tries : 0; 
     quiz.totalScore = quiz.totalScore < 0 ? 0 : quiz.totalScore ;//0 if negative 
    } else { 
     quiz.totalScore = quiz.score1 + quiz.score0; 
    } 
    quiz.tries++; 
    } 
} 
// onclick function 
function showScore() { 
    alert(quiz.totalScore + " in tries: " + quiz.tries); 
} 
// add listeners 
//checking for changes in the form 
var quizForm = document.getElementById('quizForm'); 
quizForm.addEventListener("change", function() { 
    getScore(); 
}); 
var resultButton = document.getElementById('results'); 
resultButton.addEventListener("click", function() { 
    showScore(); 
}); 

試試上面出在這裏:https://jsfiddle.net/MarkSchultheiss/qx4hLjLq/2/

你也可以做更多與此通過將在該quiz是這樣的:

//Score and answer variables= 
var quiz = { 
    totalScore: 0, 
    tries: 0, 
    maxScore: 2, 
    answered: 0, 
    questions: [{ 
    question: {}, 
    name: "question0", 
    score: 0, 
    answer: "A" 
    }, { 
    question: {}, 
    name: "question1", 
    score: 0, 
    answer: "C" 
    }], 
    checkQuestion: function(q) { 
    q.score = q.question != null && q.answer == q.question.value ? 1 : 0; 
    }, 
    //function to calculate the score. 
    getScore: function() { 
    this.answered = 0; 
    for (var i = 0; i < this.questions.length; i++) { 
     var sel = 'input[name="' + this.questions[i].name + '"]:checked'; 
     this.questions[i].question = document.querySelector(sel); 
     this.checkQuestion(this.questions[i]); 
     this.answered = this.questions[i].question ? this.answered + 1 : this.answered; 
    } 
    console.dir(this); 

    // if either is null, not all answered 
    if (this.answered == this.questions.length) { 
     for (var i = 0; i < this.questions.length; i++) { 
     this.totalScore = this.totalScore + this.questions[i].score; 
     } 
     if (this.tries) { 
     this.totalScore = this.tries && this.totalScore ? this.totalScore - this.tries : 0; 
     this.totalScore = this.totalScore < 0 ? 0 : this.totalScore; //0 if negative 
     } 
     this.tries++; 
    } 
    }, 

    // onclick function 
    showScore: function() { 
    var t = ""; 
    if (this.answered != this.questions.length) { 
     t = "Not all questions ansered!" 
    } else { 
     t = this.totalScore + " in tries: " + this.tries; 
    } 
    alert(t); 
    } 
}; 
// add listeners 
//checking for changes in the form 
var quizForm = document.getElementById('quizForm'); 
quizForm.addEventListener("change", function() { 
    quiz.getScore(); 
}); 
var resultButton = document.getElementById('results'); 
resultButton.addEventListener("click", function() { 
    quiz.showScore(); 
}); 

第二個例子在行動:https://jsfiddle.net/MarkSchultheiss/qx4hLjLq/4/

0

那麼如果你想簡單地從測試中得到結果,請使用下面的代碼:

<!DOCTYPE html> 
<html> 
<body> 
    <ul> 
     <li> 
      <h3>How many letters are there in 'FB'?</h3> 
      <input type="radio" name="question0"/>1<br> 
      <input type="radio" name="question0"/>2<br> 
      <input type="radio" name="question0"/>3<br> 
      <input type="radio" name="question0"/>4<br> 
     </li> 
    </ul> 
    <ul> 
     <li> 
      <h3>How many letters are there in 'IBM'?</h3> 
      <input type="radio" name="question1"/>1<br> 
      <input type="radio" name="question1"/>2<br> 
      <input type="radio" name="question1"/>3<br> 
      <input type="radio" name="question1"/>4<br> 
     </li> 
    </ul> 
<button onclick="calculate()">Submit</button> 
<script> 
function calculate(){ 
    var answers = [1, 2]; 
    var score = 0; 
    var question0s = document.getElementsByName("question0"); 
    var question1s = document.getElementsByName("question1"); 
    if (question0s[answers[0]].checked == true) { 
     score++; 
    } 
    if (question1s[answers[1]].checked == true) { 
     score++; 
    } 
    alert ("You got " + score + " out of " + answers.length + "."); 
} 
</script> 
</body> 
</html> 

看起來你每次答案改變時都會調用腳本,而且效率很低。我只在所有答案已經完成並且用戶按下提交時纔打電話。

而之所以增加4次是因爲如果您將第一個答案設置爲A,它會將其寫入userinput0並且不會再被更改,因爲答案是唯一被檢查的答案,並且它會重複數量的選擇有,其中有4個。因此,你重複4次的賦值語句,所以你正在添加4.

+0

哦,是的,該代碼是比我的哈哈好多了。謝謝,真的很有幫助! –

+0

如果我的回答回答了您的所有問題,請檢查大投票數字下面的勾號。它幫助我並將這個問題標記爲已回答。 – Bradman175