クイックでラジオボタンが選択されているときに、正しいと間違った答えがハイライト表示されます

Question

ラジオボタンを使用した選択肢のクイズスクリプトで作業しています。ラジオボタンを選択すると、正解が選択されていればラジオボタンが緑色に強調表示されるという機能を追加したかったのです。誤った回答が選択された場合、選択されたラジオボタンは赤色で強調表示され、正解も緑色で強調表示されます。送信ボタンが有効になります。

送信ボタンをクリックすると、次の質問に進み、クイズが終了するまでプロセスが繰り返されます。問題は、強調表示が送信ボタンがクリックされた後にのみ機能することです。クイズは2番目の質問から作業を停止します。どのように私はこれを修正するのですか？私は以下のjsfiddleとコードを含んでいます。これを手助けできる人もいます。

var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0; 
var questions = [ 
    ["What is 10 + 4?", "12", "14", "16", "B"], 
    ["What is 20 - 9?", "7", "13", "11", "C"], 
    ["What is 7 x 3?", "21", "24", "25", "A"], 
    ["What is 8/2?", "10", "2", "4", "C"] 
]; 
function _(x) { 
    return document.getElementById(x); 
} 
function renderQuestion() { 
    test = _("test"); 
    if (pos >= questions.length) { 
     test.innerHTML = "<h2>You got " + correct + " of " + questions.length + " questions correct</h2>"; 
     _("test_status").innerHTML = "Test Completed"; 
     pos = 0; 
     correct = 0; 
     return false; 
    } 
    _("test_status").innerHTML = "Question " + (pos + 1) + " of " + questions.length; 
    question = questions[pos][0]; 
    chA = questions[pos][1]; 
    chB = questions[pos][2]; 
    chC = questions[pos][3]; 
    test.innerHTML = "<h3>" + question + "</h3>"; 
    test.innerHTML += "<input type='radio' class='choice' name='choices' value='A'id='choA'> <label for='choA'>" + chA + "</label><br>"; 
    test.innerHTML += "<input type='radio' class='choice' name='choices' value='B'id='choB'> <label for='choB'>" + chB + "</label><br>"; 
    test.innerHTML += "<input type='radio' class='choice' name='choices' value='C'id='choC'> <label for='choC'>" + chC + "</label><br>"; 
    test.innerHTML += "<button onclick='checkAnswer()' disabled='disabled' id='choiceSubmit'>Submit Answer</button>"; 
} 

function checkAnswer() { 
    debugger; 
    if ($("#test input:checked").val() == questions[pos][4]) { 
     // correct question clicked 
     $("#test input:checked+label").css("background-color", "green"); 
     correct++; 
    } 
    else { 
     // wrong question clicked 
     $("#test input:checked+label").css("background-color", "red"); 
    } 
    setTimeout(function() { 
     pos++; 
     renderQuestion(); 
    }, 1000); 
} 

$("document").ready(function() { 
    renderQuestion(); 
    var choiceClicked = false; 

    if (!choiceClicked) { 
     $("#test input").change(function() { 
      choiceClicked = true; 
      $("#choiceSubmit").removeAttr("disabled"); 

     }); 
    } 


}); 

https://jsfiddle.net/diviseed/n59y2qaa/1/

Answer 1

私は送信ボタンがハイライトを行いcheckAnswer()が取得していないためだ

をクリックした後https://jsfiddle.net/n59y2qaa/12/

• のみハイライト表示が動作することだと思いますラジオボタンをクリック/変更すると呼び出されます。
  • クイズが押された後に提出するドキュメントに新しいラジオボタンを持って来るので、あなたがあまりにも彼らのために$("#test input").change(function() {})を設定する必要がありますので、の二番目クエスト

  から作業を停止します。

  div#test { 
   
        border: #000 1px solid; 
   
        padding: 10px 40px 40px 40px; 
   
       }

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
   
  <h2 id="test_status"></h2> 
   
  <div id="test"></div> 
   
  <script> 
   
      var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0; 
   
      var questions = [ 
   
       ["What is 10 + 4?", "12", "14", "16", "B"], 
   
       ["What is 20 - 9?", "7", "13", "11", "C"], 
   
       ["What is 7 x 3?", "21", "24", "25", "A"], 
   
       ["What is 8/2?", "10", "2", "4", "C"] 
   
      ]; 
   
      function _(x) { 
   
       return document.getElementById(x); 
   
      } 
   
      function renderQuestion() { 
   
       test = _("test"); 
   
       if (pos >= questions.length) { 
   
        test.innerHTML = "<h2>You got " + correct + " of " + questions.length + " questions correct</h2>"; 
   
        _("test_status").innerHTML = "Test Completed"; 
   
        pos = 0; 
   
        correct = 0; 
   
        return false; 
   
       } 
   
       _("test_status").innerHTML = "Question " + (pos + 1) + " of " + questions.length; 
   
       question = questions[pos][0]; 
   
       chA = questions[pos][1]; 
   
       chB = questions[pos][2]; 
   
       chC = questions[pos][3]; 
   
       test.innerHTML = "<h3>" + question + "</h3>"; 
   
       test.innerHTML += "<input onclick='checkAnswer()' type='radio' class='choice' name='choices' value='A'id='choA'> <label for='choA'>" + chA + "</label><br>"; 
   
       test.innerHTML += "<input onclick='checkAnswer()' type='radio' class='choice' name='choices' value='B'id='choB'> <label for='choB'>" + chB + "</label><br>"; 
   
       test.innerHTML += "<input onclick='checkAnswer()' type='radio' class='choice' name='choices' value='C'id='choC'> <label for='choC'>" + chC + "</label><br>"; 
   
       test.innerHTML += "<button onclick='nextAnswer()' disabled='disabled' id='choiceSubmit'>Submit Answer</button>"; 
   
      } 
   
  
   
      function checkAnswer() { 
   
       choiceClicked = true; 
   
       $("#choiceSubmit").removeAttr("disabled"); 
   
       $("#test label").css("background-color", "transparent"); 
   
       if ($("#test input:checked").val() == questions[pos][4]) { 
   
        // correct question clicked 
   
        $("#test input:checked+label").css("background-color", "green"); 
   
        correct++; 
   
       } 
   
       else { 
   
        // wrong question clicked 
   
        $("#test input:checked+label").css("background-color", "red"); 
   
       } 
   
      } 
   
      function nextAnswer(){ 
   
       setTimeout(function() { 
   
        pos++; 
   
        renderQuestion(); 
   
       }, 1000);  
   
      } 
   
      $("document").ready(function() { 
   
       renderQuestion(); 
   
      }); 
   
  </script> 
   
  </html>

Answer 2

あなたがのonclickイベントにcheckAnswerを（）結合されているので、要素を動的に

$（ "文書"）のようなものを使用することをお勧めしcreated.Soされている場合、それが結合されていません。レディ（関数（）{

renderQuestion(); 
    var choiceClicked = false; 

    $(document).on("click","#choiceSubmit",function(){ 
     checkAnswer(); 
    }) 

    $(document).on("click","input[type=radio][name=choices]",function(){ 

     $("#choiceSubmit").removeAttr("disabled"); 
    })  
}); 

checkAnswer（）メソッドは、

に修正されなければなりません

function checkAnswer() { 
    debugger; 
    if ($("#test input:checked").val() == questions[pos][4]) { 
     // correct question clicked 

     console.log($("#test input:checked").val()) 
     $("#test input:checked+label").addClass('green-background') 
     $("#test input:checked").addClass('green-background') 
     correct++; 
    } 
    else { 
     // wrong question clicked 
     $("#test input:checked+label").addClass('red-background') 
     $("#test input:checked").addClass('red-background') 
    } 
    setTimeout(function() { 
     pos++; 
     renderQuestion(); 
    }, 1000); 
} 

最後にトリックを行うには、CSSは以下の通りです：

div#test{ 
    border: #000 1px solid; 
    padding: 10px 40px 40px 40px; 
    } 

input[type='radio']:checked:before { 
    background:red; 
} 


input[type='radio'] { 
    -webkit-appearance:none; 
    width:20px; 
    height:20px; 
    border:1px solid darkgray; 
    border-radius:50%; 
    outline:none;  
    box-shadow:0 0 5px 0px gray inset; 
} 

input[type='radio']:hover { 
    box-shadow:0 0 5px 0px orange inset; 
} 

input[type='radio']:before { 
    content:''; 
    display:block; 
    width:60%; 
    height:60%; 
    margin: 20% auto;  
    border-radius:50%;  
} 
.green-background{ 
    background-color: green; 
} 
.red-background{ 
    background-color: red; 
} 

ここでフィドルのリンクは、このことができますhttps://jsfiddle.net/g8ycw0gw/2/ 希望です！乾杯！！