Question

我已经使用复选框创建了分步测试

此功能跳到下一个问题：

  $('button.next').click(function(e) {
    // prevent the next buttons from submitting the form
    e.preventDefault();
    // hide this form-row, and show the next one
    $(this).parents('div.form-row').hide().next('div.form-row').show();
  });

此功能可检测到选中了哪个复选框，以及该复选框是对还是错...依次为每个问题着色进度圆圈。

$('.correct').change(function(){
    var item = $(this).data('progress');
if ($(this).is(":checked") && $(this).hasClass('correct-answer')) {
        $('.quiz-progress-circle[data-progress="' + item + '"]').removeClass("progress-incorrect");
        $('.quiz-progress-circle[data-progress="' + item + '"]').addClass("progress-correct");
} else {
        $('.quiz-progress-circle[data-progress="' + item + '"]').removeClass("progress-correct");
  $('.quiz-progress-circle[data-progress="' + item + '"]').addClass("progress-incorrect");
}
});

目前这是“实时的”工作，因此您只需选中每个复选框，然后查看问题的进度圆圈是红色还是绿色-因此可以轻松地进行欺骗。那不是目的。

仅当单击下一个按钮时，如何才能触发正确的答案检测？无法返回上一个问题，因此一旦他们检查了答案并单击“下一步”，这将是最终决定。

更新：

  $('button.next').click(function(e) {
    // prevent the next buttons from submitting the form
    e.preventDefault();
    // hide this form-row, and show the next one


            var item = $(this).parents('div.form-row').find('.correct').data('progress');
        if ($(this).parents('div.form-row').find('.correct').is(":checked") && $(this).parents('div.form-row').find('.correct').hasClass('correct-answer')) {
                $('.quiz-progress-circle[data-progress="' + item + '"]').removeClass("progress-incorrect");
                $('.quiz-progress-circle[data-progress="' + item + '"]').addClass("progress-correct");
        } else {
                $('.quiz-progress-circle[data-progress="' + item + '"]').removeClass("progress-correct");
          $('.quiz-progress-circle[data-progress="' + item + '"]').addClass("progress-incorrect");
        }



    $(this).parents('div.form-row').hide().next('div.form-row').show();
  });

这总是将进度圈标记为正确，不确定哪里出了问题？

Answer 1

因此，基本上，您想要的是更改方法，以便在单击下一个按钮时触发代码

实际上，当单击“下一步”按钮时，您将转到下一步，因此我假设您要显示绿色的“正确答案！”。模态在某处

$('button.next').click(function(e) {
  e.preventDefault();

  // I do the check here instead of when the checkbox is checked
  if($('.correct:checked').hasClass('correct-answer')) {
    $('.red,.green').hide();  
    $('.green').show();
  }
  else{
    $('.red,.green').hide();  
    $('.red').show();
  }

  $(this).parents('div.form-row').hide().next('div.form-row').show();


});

请确保添加2个title / div / p（根据需要），其中一个类别为红色，另一个类别为绿色内含文字（“答案不正确”，“答案正确”）

Answer 2

在@ vincent-d的帮助下解决：

  $('button.next, input.check').click(function(e) {
    // prevent the next buttons from submitting the form
    e.preventDefault();

        var item = $(this).parents('div.form-row').find('.correct:first').data('progress');
    if ($(this).parents('div.form-row').find('.correct:first').is(":checked") && $(this).parents('div.form-row').find('.correct:first').hasClass('correct-answer')) {
            $('.quiz-progress-circle[data-progress="' + item + '"]').removeClass("progress-incorrect");
            $('.quiz-progress-circle[data-progress="' + item + '"]').addClass("progress-correct");
    } else {
            $('.quiz-progress-circle[data-progress="' + item + '"]').removeClass("progress-correct");
      $('.quiz-progress-circle[data-progress="' + item + '"]').addClass("progress-incorrect");
    }

    // hide this form-row, and show the next one
    $(this).parents('div.form-row').hide().next('div.form-row').show();
  });

仅在单击下一个按钮时才检测已选中的复选框

2 个答案: