滑块测验将以前的测验尝试添加到幻灯片底部。(光滑的SLider)

Slider Quiz adds previous quiz attempts to the bottom of the slide. (Slick SLider)

提问人:Mwow 提问时间:11/10/2023 更新时间:11/11/2023 访问量:9

问:

我接手了一个几年前开发的项目,我相信已经完成了一半。(或者真的......规格已更改) 所以我有一个测验,用户有三次尝试通过测验。在他们第一次失败后,他们的结果最终会被添加到幻灯片的底部。

我认为这是 AJAX 和 JSON 保留了数据。有没有办法在我的 if 语句中加入一些东西,以便在尝试失败时清除它们?

下面的粗体代码是我的 if failed 语句。我不擅长AJAX:( 提前感谢,如果我错过了任何有助于解决的代码,请告诉我。

屏幕截图

法典:

var count = 0;
let quizbutton2 = $('.btn, .btn-lesson-quiz');
function saveQuizData(event, isPreQuiz) {
    var res = [];
    event.closest('.pre-quiz-question').querySelectorAll('#quiz input:checked').forEach(function (e) {
        var UserQuizViewModel = new Object();
        UserQuizViewModel.CourseQuizID = event.closest('.pre-quiz-question').querySelectorAll('#QuizID')[0].getAttribute('value');//$("#LessonQuizID").val();
        UserQuizViewModel.QuizQuestionID = e.getAttribute('name');
        UserQuizViewModel.QuizAnswer = e.getAttribute('value');
        res.push(UserQuizViewModel)
    });
    var parentElem = event.closest(".pre-quiz-question");


    if (!isPreQuiz) {
        var allInputs = event.closest('.pre-quiz-question').querySelectorAll('input');
        var arr = [];
        getAllElementsWithAttribute('required', allInputs).map(x => {
            var obj = new Object();
            obj.name = x.name;
            obj.checked = x.checked;
            obj.value = x.defaultValue;
            arr.push(obj)
        })

        var selectedItems = arr.filter(x => { return x.checked === true }).filter((v, i, a) => a.findIndex(v2 => (v2.name === v.name)) === i).map(x => x.name);
        var noSelectedItems = arr.filter((v, i, a) => a.findIndex(v2 => (v2.name === v.name)) === i).map(x => x.name).filter(x => !selectedItems.includes(x))

        if (selectedItems && selectedItems.length > 0) {
            selectedItems.map(x => {
                $('.quiz-error-' + x).removeClass('error-active');
            })
        }

        if (noSelectedItems && noSelectedItems.length > 0) {
            noSelectedItems.map(x => {
                $('.quiz-error-' + x).addClass('error-active');
            })

            if (count == 0) {
                var setHeight = $('.slick-list').css("height");
                if (noSelectedItems.length >= 1) {
                    $('.slick-list').css("height", (parseInt(setHeight.substring(0, setHeight.length - 2)) + noSelectedItems.length * 18));
                }
            }
             
            //$('.slick-list').css("height", "max-content");     
            scrollToElem(event.closest('.pre-quiz-question').querySelector('.error-active'), true);
            $('.slick-track').css("position", "sticky");         
        }
    }
    else {
        var noSelectedItems = [];
    }

    if (noSelectedItems.length === 0) {
        if (res && res != null && res.length > 0) {
            res = JSON.stringify({ 'userQuizAttempt': res });
            event.disabled = true;
            scrollToElem(document.querySelector('.slidebox'), false);
            $.ajax({
                type: "POST",
                url: "/coursequiz/quizattempt",
                data: res,
                contentType: "application/json; charset=utf-8",
            }).done(function (result) {
                console.log(result);
                var setHeight = $('.slick-list').css("height");
                if (count == 0 && noSelectedItems.length >= 1) {
                    $('.slick-list').css("height", (parseInt(setHeight.substring(0, setHeight.length - 2)) + noSelectedItems.length * 18))
                }

                if (event.closest('.pre-quiz-question').previousElementSibling && event.closest('.pre-quiz-question').previousElementSibling.className.includes('quiz-score')) {
                    event.closest('.pre-quiz-question').previousElementSibling.style.display = "none";
                }
                else {
                    $('.slick-list').css("height", (parseInt(setHeight.substring(0, setHeight.length - 2)) + 40))
                }

                if (result.includes('quiz-passed')) {
                    parentElem.insertAdjacentHTML('afterend', result);
                    //parentElem.remove();
                    $('.next-bottom').show();
                     $('.next-top').show();
                    event.disabled = false;
                    alert ("You have passed! Please click the next button to continue with the course.");
                    $("#score-top").css("height","50px");
                    location.reload();
                }
                

         **   else {
             
                    parentElem.insertAdjacentHTML('afterend', result);
                    showMessage();
                   event.disabled = false; 
                   $(quizbutton2).prop('disabled', true); 
                }
                **
            
                //if (isPreQuiz) {
                   // parentElem.remove();
               // }
                //scrollToElem(document.querySelector('.slidebox'), false);
                //$('.slick-list').css("height", "max-content");
   
            }).fail(function (xhr) {
                console.log('error : ' + xhr.status + ' - ' + xhr.statusText + ' - ' + xhr.responseText);
            });;
            $.ajax({
                type: "POST",
                url: "/coursequiz/getcorrectanswers",
                data: res,
                contentType: "application/json; charset=utf-8"
            }).done(function(result) {
                var correctAnswers = result.CorrectAnswers;

                if(document.querySelectorAll('.correct-answer').length){
                    var classes = document.querySelectorAll('.correct-answer');
                    for(i = 0; i < classes.length; i++){
                       classes[i].classList.remove('correct-answer')
                    }
                }

                if(document.querySelectorAll('.incorrect-answer').length){
                    var classes = document.querySelectorAll('.incorrect-answer');
                    for(i = 0; i < classes.length; i++){
                        classes[i].classList.remove('incorrect-answer')
                    }
                }

                if(document.querySelectorAll('.slick-current input[type="radio"]:checked, input[type="checkbox"]:checked').length){
                    for(i = 0; i < document.querySelectorAll('.slick-current input[type="radio"]:checked, input[type="checkbox"]:checked').length; i++){
                        if(document.querySelectorAll('.slick-current input[type="radio"]:checked, input[type="checkbox"]:checked')[i].value.includes(correctAnswers[i])){
                            document.querySelectorAll('.slick-current input[type="radio"]:checked + label, input[type="checkbox"]:checked + label')[i].classList.add('correct-answer');
                        } else{
                            document.querySelectorAll('.slick-current input[type="radio"]:checked + label, input[type="checkbox"]:checked + label')[i].classList.add('incorrect-answer');
                        }
                    }
                }

            }).fail(function(xhr) {
                console.log('error : ' + xhr.status + ' - ' + xhr.statusText + ' - ' + xhr.responseText);
            });
        }
    }
    count++;
}

javascript 剃刀 光滑的 .js

评论


答:

0赞 Mwow 11/11/2023 #1

我们找到了答案。我很棒的同事帮助我解决了这个问题。作为 JSON 请求的一部分,它正在幻灯片上重建整个 HTML。我们注释掉了该函数,它解决了这个问题。

评论

0赞 Szzaass 11/11/2023
棒!如果可能的话,请记住将您的答案标记为正确,以表明此问题已解决。