提问人:Mwow 提问时间:11/10/2023 更新时间:11/11/2023 访问量:9
滑块测验将以前的测验尝试添加到幻灯片底部。(光滑的SLider)
Slider Quiz adds previous quiz attempts to the bottom of the slide. (Slick SLider)
问:
我接手了一个几年前开发的项目,我相信已经完成了一半。(或者真的......规格已更改) 所以我有一个测验,用户有三次尝试通过测验。在他们第一次失败后,他们的结果最终会被添加到幻灯片的底部。
我认为这是 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++;
}
答:
0赞
Mwow
11/11/2023
#1
我们找到了答案。我很棒的同事帮助我解决了这个问题。作为 JSON 请求的一部分,它正在幻灯片上重建整个 HTML。我们注释掉了该函数,它解决了这个问题。
评论
0赞
Szzaass
11/11/2023
棒!如果可能的话,请记住将您的答案标记为正确,以表明此问题已解决。
评论