如何通過表單輸入從正確答案中獲得分數

Question

我正在創建一個包含 10 個問題的測驗：通過無線電輸入的 5 個多項選擇和通過文本輸入的 5 個書面答案。 請參閱下面兩個輸入的代碼。 但我也想為這些問題添加一個評分系統。 我在這里找到了一個關於堆棧溢出的好腳本，它可以在用戶輸入表單輸入時保持分數。 我將在下面添加它。

我用來檢查無線電輸入答案的腳本：

$(document).ready(function(){ 
  $('input[name=radio1]').change(function(){
     $('.alert').remove();
    if($('input[name=radio1]:checked').val() === "1") {
      $(this).parent().append('<span class="correct">✓ Correct!</span>');
    } else {
      $(this).parent().append('<span class="incorrect">✗ Correct answer = B</span>');
    }
  });
});

給出的正確分析器基於value="1" 。 其他答案具有value="0" 。

我用來檢查文本輸入答案的腳本：

$('submit').on('click', function() {
    markAnswers(1)
});

var answers = {
  q1: ["Auto's"]
};

function markAnswers(id) {
  $(`#q${id}`).each(function () {

    let userAnswer = this.value.replace(/[^\w\'\,\-\?\!\"\:\—\;]/g,'');

    if ($.inArray(userAnswer, answers[this.id]) === -1) {
      $(this).parent().append(`<br><span class='incorrect'>✗ Correct answer = ${answers[this.id]}</span>`);
    } else {
      $(this).parent().append("<br><span class='correct'>✓ Correct!</span>");
    }
  });
}

文本輸入的正確值由上面的腳本確定。

現在，我發現保留分數的腳本通過data-score=收集分數。 但我想只value 。 請參閱下面的原始腳本：

$('.track').change(function(e) {
    update_progress();
});

// supports any number of inputs and calculates done as %

function update_progress() {
    var score = 0
    $('input.track').each(function(){
      var _score = $(this).data("score")
        if ($(this).val().length > 0) {
          score += _score
        }
      })
  $('#score').text(score)
    var count = $('.track').length;
    var length = $('.track').filter(function() {
    return this.value;
}).length;
    var done = Math.floor(length * (100 / count));
    $('.perc').text(done);
    $('.meter').width(done + "%");
}

該腳本可以在這里找到： https ://stackoverflow.com/a/58297288/4546157 真的很好。 它會保留分數，但也會顯示您是否已完成表格。

我希望每個正確答案的值為 1，因此在測驗結束時，用戶的最高得分為 10/10。 但是，一個很大的但是，我不知道如何實現它。 希望看到大家的建議或解決方案。 謝謝！

Answer 1

你會這樣做。 雖然使用全局可用變量是不好的做法，但為了簡單起見，我把它們放在那里。 最好將所有內容包裝在 div 中並將分數/進度存儲為數據屬性。

筆： https ://codepen.io/lenadax/pen/QWQqMxP?editors=1111

 // global vars, put them somewhere else var progress = 0; var score = 0; $('form.question').each(function(i, el) { // I'm lazy so form id is the same as input name for each question let inputs = $(`input[name=${$(this).attr('id')}]`); inputs.on('change', function() { // increase progress by 1 if button has been selected. progress++; if ($(this).val() === "1") { // increase score if correct choice selected score++; $('<span class="result correct">').text('✓ Correct!').appendTo(el); } else { $('<span class="result incorrect">').text('X Incorrect!').appendTo(el); } // get number of questions let question_count = $('form.question').length; // disable after choosing for less hassle inputs.prop('disabled', true); // calculate the progress in percent let progress_num = progress / question_count * 100; $('.perc').text(progress_num); $('#score').text(`${score} / ${question_count}`); }); })

 input { display: inline-block; } label { display: inline-block; } button { display: block; } form { width: 200px; border: 1px solid gray; margin: 10px; padding:10px 5px; } .result { display: block; } .result.incorrect { color: red; } .result.correct { color: green; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <html> <body> <form class="question" id="question1"> <span>Question 1</span> </p> <input name="question1" id="answer1" type="radio" value="0"/> <label for="answer1">Wrong answer</label> </p> <input name="question1" id="answer2" type="radio" value="1"/> <label for="answer2">Right answer</label> </form> <form class="question" id="question2"> <span>Question 2</span> </p> <input name="question2" id="answer1" type="radio" value="0"/> <label for="answer1">Wrong answer</label> </p> <input name="question2" id="answer2" type="radio" value="0"/> <label for="answer2">Wrong answer</label> </p> <input name="question2" id="answer3" type="radio" value="1"/> <label for="answer3">Right answer</label> </form> <h5>Done <span class='perc'>0</span>%</h5> <h5>Score <span id="score">0</span></h5> </body> </html>

如何通過表單輸入從正確答案中獲得分數

問題描述

1 個解決方案

解決方案1
1 2022-05-24 10:34:47

如何通過表單輸入從正確答案中獲得分數

問題描述

1 個解決方案

解決方案1 1 2022-05-24 10:34:47

解決方案1
1 2022-05-24 10:34:47