простой тест с JQuery и отслеживать правильные ответы

0

это моя вторая попытка создать вопрос.

Я хочу создать викторину с jquery. Каждый вопрос имеет два ответа: один правильный и один неправильный. когда вопрос задан, я не хочу, чтобы на него можно было ответить снова. вот почему я делаю ответы dissappear. они также могут быть непривлекательными.

Тем не менее, мне действительно нужно иметь возможность отслеживать счет правильных ответов.

И я хочу, чтобы блок "Всего результатов" появлялся, когда на все вопросы отвечали.

У кого-нибудь есть предложения?

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>   
  • 3
    Имейте в виду, что JavaScript может быть прочитан конечным пользователем (щелкните правой кнопкой мыши на странице -> показать источник)
  • 0
    Да, я знаю. Это не имеет значения. это простой тест для развлечения.
Теги:

1 ответ

1
Лучший ответ

Я бы изменил его на нечто подобное (чтобы сделать его более динамичным):

<div class="question">Question 1
    <div class="answers">
        <p>
            <input type="radio" name="q1" data-type="0">
            answer 1
        </p>
         <p>
            <input type="radio" name="q1" data-type="1">
            answer 2
        </p>
    </div>
</div>

$(function(){

     $('.answers input[type="radio"]').click(function(){

          var type = $(this).data('type'),
              correctAnswerCount = 
                 $('.answers input[type="radio"]:checked[data-type="1"]').length;

          alert(type === 1 ? 'Correct' : 'Wrong');
     });

});

http://jsfiddle.net/7FzPR/2/

Имейте в виду, что вы можете просто проверить html, чтобы узнать правильные ответы.

  • 0
    хорошо с этим. но я бы хотел, чтобы он отслеживал правильные ответы, и когда на все вопросы будут даны ответы, в конце появится общий счет.
  • 0
    @sTef Я обновлю код, следите за обновлениями
Показать ещё 6 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню