Question

您好，我正在制作测验模块。学生可以参加测验。提交后，如果未通过测验，则学生可以“重新参加测验”。一旦学生单击“重考”，将仅显示用户给出错误答案的问题。当学生进行测验时，我第一次使用php和HTML模态显示问题。与使用jquery和javascript相比，我将用户的响应传递给后端，并检查它是否通过或失败。如果失败，则表示我有错误的问题ID，我想在他们接受“要求”时显示。遵循代码：

Index.php

//When user clicks this button, modal will be pop-up and questions will be displayed one by one.
<a href="#" class="btn btn-danger btn-lg" data-toggle="modal" data-target="#Quiz" id="start-quiz">Start Quiz</a>


<!-- Quiz Modal -->
<div class="modal fade quiz-modal" id="Quiz">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <? foreach ($questions as $i=>$question) { ?>
            <div class='question'>
                <div class="modal-header">
                    <div class="row">
                        <h4>QUIZ</h4>
                    </div>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div id="quest-content" class="quest">
                            <h4 class="question-title"><?=$question->number?>) <?=$question->title?></h4>
                            <ul class="list-unstyled">
                                <? foreach ($question->getAnswers() as $answer) { ?>
                                    <li>
                                        <div class="checkbox">
                                                <input class="cb" type="checkbox" name="answer[]" value="<?=$answer->title?>">
                                                <?=$answer->title?> 
                                        </div>
                                    </li>
                                <? } ?> 
                            </ul>
                            <br>
                            <br>
                            <p class='error'>Please select an answer</p>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <p class='quest_num'><?=$question->number?> of <?=count($questions)?></p>
                    <?  if( count($questions) === 1 ) { ?>
                        <a class="btn button btn-lg quiz-btn">Submit Quiz</a>
                    <? } else if ( count($questions) === $i +1 ) { ?>
                        <a class="btn button btn-lg quiz-btn">Submit Quiz</a>
                    <? }  else { ?>
                        <a href="" class=" btn button btn-lg quiz-btn">Next Question</a>
                    <? } ?>
                </div>
            </div>
            <? } ?>
        </div>
    </div>
</div>

下面是<script>，我正在做几件事：如果有更多问题，按钮将显示“下一步”，如果是最后一个问题，按钮将显示“提交”。提交测验后，它将通过$.post将用户的响应发送到后端，并取回错误ID的问题ID数组。使用此错误问题的ID，当用户单击“重新参加测验”时，它应该仅使用这些ID再次显示测验。

<script type="text/javascript">
$(document).on('ready', function(){
    var answers = [];
    $('.quiz-btn').click(function(e){
        e.preventDefault()
        var checkbox = $(this).parents('.question').children('.modal-body').children('.row').children('.quest').children('ul').children('li').children('.checkbox').children('.icheckbox_square');
        var btn = $(this).parents('.question').children('.modal-footer').children('.quiz-btn')
        var next = false
        var submit = false
        console.log(checkbox)
        $(checkbox).each(function(){
            if ( $(this).hasClass('checked') && $(btn).html() == 'Next Question' ) {
                answers.push($(this).children('.cb:checked').val());
                console.log(answers);
                next = true
            } 
            else if ($(this).hasClass('checked') && $(btn).html() == 'Submit Quiz') {
                answers.push($(this).children('.cb:checked').val());
                submit = true
            }
        });

        if ( next ) {
            e.preventDefault();
            $(this).parents('.question').slideUp(500);
            $(this).parents('.question').next('.question').delay(500).slideDown(500);
        } else if ( submit ) {
            e.preventDefault();
            $.post('/student/submit_quiz',{answers: answers, module: <?=$model->course_module->id?>}, function(data){
                var correct = data['correct'];
                var incorrect = data['incorrect'];

                if(incorrect){
                    if(incorrect.length > 0){
                        var div = $('.quest')[$('.quest').length - 1];
                        var footer = $('.modal-footer')[$('.modal-footer').length - 1];
                        var progress = (correct.length*100)/(<?=count($questions)?>);
                        div.innerHTML = "<h4 class='question-title'>" + (correct.length)+"/<?=count($questions)?> questions correct <h4>";
                        div.innerHTML += "<div class='error'><p><strong>We are sorry but you have " + incorrect.length +" answers incorrect</strong><br>Please go back and review and reanswer those questions.</p></div>";
                        footer.innerHTML = "<a onclick='retakeQuiz(["+incorrect+"])' class='btn btn-success btn-lg quiz-btn'>Retake Quiz</a>";
                    } else {
                        var div = $('.quest')[$('.quest').length - 1];
                        var footer = $('.modal-footer')[$('.modal-footer').length - 1];
                        var progress = (correct.length*100)/(<?=count($questions)?>);
                        div.innerHTML = "<h4 class='question-title'> Congratulations!! You Passed this Module.<h4>";
                        footer.innerHTML = "<a href='/student/course/<?=$model->course->id?>' class='btn btn-default btn-lg'>Continue</a>";
                    }
                }
            });
        } else {
            console.log(next)
            $('.quest .error').fadeIn();
        }
    });
});

function retakeQuiz(incorrect) {
    $.each(incorrect, function(key, val) {
        alert('index ' + key + ' points to file ' + val);
        //Here incorrect is the array of Wrong Question's IDs. How can I use that id to show only this questions in my above modal. 
    });
}
</script>

我想知道所有我只有一个模态-一个又一个显示测验问题，当测验完成并且用户提交测验时，它将显示合格或不合格的消息以及相应的按钮说“继续”或“重考”。如果单击“重新参加测验”，则会在模态上显示错误的问题。因此，我只有一个模式，但是只是通过javascript动态更改内容。

我尽力解释了我的问题和代码。希望能得到一些帮助。非常感谢您的帮助。

Answer 1

像这样从两个侧面进行操作总是会有点麻烦。除了使用jQuery更改问题外，您是否可以更改PHP端点以给定一组ID返回模式内容？这是个好主意：

您的PHP代码的端点包含ID列表。这些ID传递给执行此操作的PHP代码，并返回ID问题列表（以及相应的答案）。当用户第一次访问您的页面时，您的PHP代码会将所有问题自动加载到模式中，以便用户获得整个测验（类似于您现在在初始页面加载时的加载方式）。

他们完成测验后，您说您存储了他们弄错的问题的ID。 我建议的是将ID发送到您的php代码，以返回仅包含错误输入的问题ID的新生成的模式。然后，您可以简单地用结果替换模式内容。也许是这样的东西（这都是伪代码，但我希望它能使想法得到理解）

// user has finished taking the quiz

$.get({
    "url": "/yourendpoint" + ids.toString()
    "method": "GET"
}.then(function(data){
    $(".modal-content").html(data);
});

Answer 2

我的建议是将属性 id 添加到每个问题分区，其问题ID的值如下所示

<? foreach ($questions as $i=>$question) { ?>
        <div class='question' id="<? $question->id ?>">
          // Your remaining code here
        </div>
<? } ?>

提交表单后，在您的ajax调用回调中，删除问题div，其ID如下所示不在响应中

function retakeQuiz(incorrect) {
    // I am assuming incorrect as [id, id, id] for example
    $('.question').each(function (index, question) {
       if (!incorrect.includes($(question).attr('id'))) {
           $(question).remove();
       }
    });
}

如何通过javascript函数更改模态的内容？

2 个答案: