これは、質問を作成する 2 回目の試みです。
jqueryでクイズを作りたいです。各問題には 2 つの答えがあり、1 つは正解で、もう 1 つは不正解です。質問が答えられたとき、私は再び答えられたくありません。それが私が答えを消す理由です。クリックできない可能性もあります。
それにもかかわらず、私が本当に必要としているのは、正解のスコアを追跡できることです。
そして、すべての質問に回答したときに「合計結果」ブロックが表示されるようにします。
誰にも提案はありますか?
data-type="1" は、答えが正しいことを意味します
data-type="0" は答えが間違っていることを意味します
コードの改善は歓迎されるか、改善のための提案です。
次のコードを作成しました
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<style type="text/css">
.hide{
display:none;
}
</style>
<div id="Question1">Question 1
<div id="answers_q1">
<div id="answer1_q1" class="ans" data-type="1">answer 1</div>
<div id="answer2_q1" class="ans" data-type="0">answer 2</div>
</div>
</div>
<br />
<div id="Question2">Question 2
<div id="answers_q2">
<div id="answer1_q2" class="ans" data-type="1">answer 1</div>
<div id="answer2_q2" class="ans" data-type="0">answer 2</div>
</div>
</div>
<br />
<div id="Question3">Question 3
<div id="answers_q3">
<div id="answer1_q3" class="ans" data-type="1">answer 1</div>
<div id="answer2_q3" class="ans" data-type="0">answer 2</div>
</div>
</div>
<br />
<div id="total">Total Results
<div id="answers_total">
You have <span id="count"></span> correct answers out of total 3 Questions!!!
</div>
</div>
<script language="javascript" type="text/javascript">
$(function() {
$(".ans").click(function(e){
var res = $(this).attr('data-type');
var clickCounter = $('#count').data('clickCounter');
clickCounter = (clickCounter + res);
$('#count').data('clickCounter', clickCounter);
$('#count').html( clickCounter );
});
$("#answer1_q1").click(function() {
$("#answers_q1").html('Correct');
});
$("#answer2_q1").click(function() {
$("#answers_q1").html('Wrong');
});
$("#answer1_q2").click(function() {
$("#answers_q2").html('Correct');
});
$("#answer2_q2").click(function() {
$("#answers_q2").html('Wrong');
});
$("#answer1_q3").click(function() {
$("#answers_q3").html('Correct');
});
$("#answer2_q3").click(function() {
$("#answers_q3").html('Wrong');
});
/**/
});
</script>