Модификация плагина jQuizler для выбора нескольких вариантов ответа в тесте
Необходимо сделать интерактивный тест с возможностью выбора нескольких вариантов ответа, за основу взял плагин jQuizler, но в нем к сожалению, можно выбрать только один. Знающие люди могут помочь?
Код HTML файла:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Занятие 1</title>
<link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap" rel="stylesheet">
<link rel="shortcut icon" type="image/x-icon" href="../../img/favicon.ico" />
<!--<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>-->
<script type="text/javascript" src="../../js/jquery-3.5.1.js"></script>
<script type="text/javascript" src="../../js/jQuizler.js"></script>
<link rel="stylesheet" href="../../css/bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="../../css/stylemodul.css">
<link rel="stylesheet" href="../../css/jQuizler.css" />
<script type="text/javascript">
var questions = [
{
type: "choose",
question: "<h2 align='center'>Вопрос 1</h2>",
answers: [
"Ответ 1",
"Ответ 2",
"Ответ 3",
"Ответ 4",
"Ответ 5"
],
correct: [5]
},
{
type: "choose",
question: "<h2 align='center'>Вопрос 2</h2>",
answers: [
"Ответ 1",
"Ответ 2",
"Ответ 3",
"Ответ 4",
"Ответ 5"
],
correct: [5]
},
{
type: "choose",
question: "<h2 align='center'>Вопрос 3</h2>",
answers: [
"Ответ 1",
"Ответ 2",
"Ответ 3",
"Ответ 4",
"Ответ 5"
],
correct: [5]
},
{
type: "choose",
question: "<h2 align='center'>Вопрос 4</h2>",
answers: [
"Ответ 1",
"Ответ 2",
"Ответ 3",
"Ответ 4",
"Ответ 5"
],
correct: [5]
},
{
type: "choose",
question: "<h2 align='center'>Вопрос 5</h2>",
answers: [
"Ответ 1",
"Ответ 2",
"Ответ 3",
"Ответ 4",
"Ответ 5"
],
correct: [5]
},
{
type: "choose",
question: "<h2 align='center'>Вопрос 6</h2>",
answers: [
"Ответ 1",
"Ответ 2",
"Ответ 3",
"Ответ 4",
"Ответ 5"
],
correct: [5]
},
{
type: "choose",
question: "<h2 align='center'>Вопрос 7</h2>",
answers: [
"Ответ 1",
"Ответ 2",
"Ответ 3",
"Ответ 4",
"Ответ 5"
],
correct: [5]
},
{
type: "choose",
question: "<h2 align='center'>Вопрос 8</h2>",
answers: [
"Ответ 1",
"Ответ 2",
"Ответ 3",
"Ответ 4",
"Ответ 5"
],
correct: [5]
},
{
type: "choose",
question: "<h2 align='center'>Вопрос 9</h2>",
answers: [
"Ответ 1",
"Ответ 2",
"Ответ 3",
"Ответ 4",
"Ответ 5"
],
correct: [5]
},
{
type: "choose",
question: "<h2 align='center'>Вопрос 10</h2>",
answers: [
"Ответ 1",
"Ответ 2",
"Ответ 3",
"Ответ 4",
"Ответ 5"
],
correct: [5]
}
];
$("document").ready(function(){
$("#jQuizler").jQuizler(questions);
});
function refreshPage(){
window.location.reload();
}
</script>
</head>
<body>
<header>
<div class="header_logo">
<a href="../../index.html"><img src="../../img/rosgvard_logo_white.png" alt="Логотип"></a>
</div>
<div class="header_name">
<p>NAME</p>
</div>
<div class="header_user">
<p1>Пользователь</p1>
<div class="header_logout">
<a href="../../index.html"><span>Выход</span></a>
</div>
</div>
</header>
<nav>
<div class="header_bottom">
<div>
<a href="../../index.html"><span>NAME</span></a>
</div>
<div class="statistic">
<div class="progress progress-info progress-striped" style="display: block;">
<div id="percent" class="bar" style="width: 0%;"></div>
</div>
<div class="tema">
<ul class="level">
<li><p>Базовый уровень</p></li>
</ul>
</div>
</div>
</div>
</nav>
<main>
<div>
<hr>
</div>
<div class="content_test">
<wrapper>
<div class="overlay_test">
<div class="test">
<div id="jQuizler" class="main-quiz-holder">
<h1>Тест на тему: "Название темы"</h1>
<button class="btn btn-large">Начать тест</button>
</div>
</div>
</div>
</wrapper>
</div>
</main>
</body>
</html>
Koд JS файла:
(function($){
$.fn.extend({
jQuizler: function(questions) {
if (questions == null)
throw 'No questions was provided.';
var reviewQuiz = false;
var percentage = 0;
var percentPiece = 100 / questions.length;
var rightAnswers = 0;
$(this).html("<div class=\"intro\">" + $(this).html() + "</div>");
$(this).click(function(){
$(this).off('click');
$(".intro").hide();
$(this).css("text-align", "left");
$('.progress').css("display", "block");
$(".test").addClass('test1').html();
var question = $("#question-1");
question.css({opacity : '0', height : '0px'});
question.animate({
opacity : '1',
height : '100%'
}, 500, function(e){});
question.css('display', 'block');
percentage += percentPiece;
$(".progress div").css("width", percentage + "%");
});
(function($){
$.shuffle = function(arr) {
for(
var j, x, i = arr.length; i;
j = parseInt(Math.random() * i),
x = arr[--i], arr[i] = arr[j], arr[j] = x
);
return arr;
}
})(jQuery);
String.prototype.replaceAll = function (find, replace) {
var str = this;
return str.replace(new RegExp(find, 'g'), replace);
};
return this.each(function(){
var html = "";
html += "<div class=\"results slide-container question\" style=\"display:none\"></div>";
$.each(questions, function(index, question){
html += "<div id=\"question-" + (index + 1) + "\" class=\"slide-container question\">";
//html += "<div class=\"question-number\">Вопрос " + (index + 1) + ' из ' + questions.length + "</div><div style=\"margin:0px; clear:both\"></div>";
html += question.question;
var correctAnswers = [];
for (var i = 0; i < question.correct.length; i++)
correctAnswers.push(question.answers[question.correct[i] - 1]);
question.answers = $.shuffle(question.answers);
var correctAnswersNewIndexes = [];
for (var i = 0; i < question.correct.length; i++)
correctAnswersNewIndexes.push(question.answers.indexOf(correctAnswers[i]));
question.correct = correctAnswersNewIndexes;
/*for (var i = 0; i < question.correct.length; i++)
console.log(question.answers[correctAnswersNewIndexes[i]]);*/
html += "<ul class=\"answers\">";
for (var i = 0; i < question.answers.length; i++)
html += "<li class=\"btn\">" + question.answers[i] + "</li>";
html += "</ul>";
html += "<div class=\"nav-container\">";
html += "<div class=\"notice alert alert-info\">Выберите ответ</div>";
if (index != 0) {
html += "<button class=\"prev btn btn-infos\"><i class='icon-arrow-left icon-white'></i> Назад</button>";
}
if (index != questions.length-1) {
html += "<button class=\"next btn btn-success\">Далее <i class='icon-arrow-right icon-white'></i></button>";
html += "<div style=\"clear:both\"></div>";
} else {
html += "<button class=\"final btn btn-success\">Результат <i class='icon-ok icon-white'></i></button>";
html += "<div style=\"clear:both\"></div>";
}
html += "</div></div>";
html += "</div>";
});
///html += "<div style=\"margin:0px; clear:both\"></div>";
$(this).append(html);
$("div[id*='question-'] li").click(function(){
if (!reviewQuiz) {
/*$(this).siblings().removeClass("selected");
$(this).toggleClass("selected");*/
$(this).siblings().removeClass("btn-info");
$(this).toggleClass("btn-info");
}
});
$(".final").click(function(e){
var div = $(e.target).closest("div[id*='question-']");
var userAnswer = div.find("li.btn-info");
if (userAnswer.index() == -1 && !reviewQuiz) {
var notice = div.find(".notice");
notice.css('opacity', '0');
notice.animate({
opacity: 1
}, 500, function(){});
div.find(".notice").css('display', 'block');
} else if (!reviewQuiz) {
div.find(".notice").css('display', 'none');
percentage += percentPiece;
if (percentage > 100) percentage = 100;
$("#percent").css("width", percentage + "%");
var resultHTML = "<h3 style=\"text-align: center\">РЕЗУЛЬТАТЫ</h3>";
var buttonsHTML = '';
$.each(questions, function(index, question){
//console.log("Правильные ответы: " + question.correct);
var element = $("#question-" + (index+1) + " ul li.btn-info");
//console.log("Ответ пользователя: " + element.index());
if (element.index() == question.correct) {
element.removeClass("btn-info");
element.addClass("btn-success");
buttonsHTML += "<button class=\"btn btn-success\"><i class='icon-ok-sign icon-white'></i> Вопрос " + (index+1) + "</button>";
rightAnswers++;
} else {
element.removeClass("btn-info");
element.addClass("btn-danger");
buttonsHTML += "<button class=\"btn btn-danger\"><i class='icon-remove-sign icon-white'></i> Вопрос " + (index+1) + "</button>";
for (var i=0; i<question.correct.length; i++) {
element.parent().find('li').eq(question.correct[i]).addClass("btn-success");
}
}
});
resultHTML += "<p style=\"margin: 14px 0px\">Вы ответили на " + Math.round(((rightAnswers * 100) / questions.length) * 100) / 100 + "% вопросов.</p>";
if (Math.round(((rightAnswers * 100) / questions.length) * 100) / 100 < 80) {
resultHTML += "<div class=\"alertres alert-infores\">Вы недостаточно усвоили данную тему</div>";
resultHTML += buttonsHTML;
resultHTML += "<p style=\"margin-top:25px; text-align: center\"><button class=\"reload-button2\" onClick=\"refreshPage()\">Начать заново</button></p>";
} else {
resultHTML += "<div class=\"alertres alert-infores\">Вы хорошо усвоили данную тему</div>";
resultHTML += buttonsHTML;
resultHTML += "<p style=\"margin-top:25px; text-align: center\"><button class=\"reload-button\" onClick=\"refreshPage()\">Повторить</button></p>";
resultHTML += "<p style=\"margin-top:25px; text-align: center\"><button class=\"nextles\" onclick=\"window.history.back()\">Следущее занятие</button></p>";
}
div.animate({
opacity : '0'
}, 500, function(e){
div.css('display', 'none');
div.find(".notice").css('display', 'none');
$(".results").append(resultHTML);
$(".results").css("opacity", "0");
$(".results").css("display", "block");
$(".results").animate({
opacity : '1'
}, 500, function(e){
});
});
$(".progress").animate({
opacity : '0'
}, 100, function(e){});
reviewQuiz = true;
} else {
$(".results").animate({
opacity: "1",
display: "block"
}, 100, function(e){});
div.animate({
opacity : '0'
}, 500, function(e){
div.css('display', 'none');
div.find(".notice").css('display', 'none');
$(".results").append(resultHTML);
$(".results").css("opacity", "0");
$(".results").css("display", "block");
$(".results").animate({
opacity : '1'
}, 500, function(e){
});
});
$(".progress").animate({
opacity : '0'
}, 100, function(e){});
}
return false;
});
$(".next").click(function(e){
var div = $(e.target).closest("div[id*='question-']");
var userAnswer = div.find("li.btn-info");
if (userAnswer.index() == -1 && !reviewQuiz) {
var notice = div.find(".notice");
notice.css('opacity', '0');
notice.animate({
opacity: 1
}, 500, function(){});
div.find(".notice").css('display', 'block');
} else {
var nextId = parseInt(div.attr('id').replace('question-', '')) + 1;
//console.log(nextId);
var newQuestion = $("#question-" + nextId);
div.animate({
opacity : '0'
}, 500, function(e){
div.css('display', 'none');
div.find(".notice").css('display', 'none');
newQuestion.css({opacity : '0', height : '0px'});
newQuestion.animate({
opacity : '1',
height : '100%'
}, 500, function(e){});
newQuestion.css('display', 'block');
});
percentage += percentPiece;
$(".progress div").css("width", percentage + "%");
}
return false;
});
$(".prev").click(function(e){
var div = $(e.target).closest("div[id*='question-']");
var prevId = parseInt(div.attr('id').replace('question-', '')) - 1;
var newQuestion = $("#question-" + prevId);
div.animate({
opacity : '0'
}, 500, function(e){
div.css('display', 'none');
//div.find(".notice").css('display', 'none');
newQuestion.css({opacity : '0', height : '0px'});
newQuestion.animate({
opacity : '1',
height : '100%'
}, 500, function(e){});
newQuestion.css('display', 'block');
});
percentage -= percentPiece;
$(".progress div").css("width", percentage + "%");
return false;
});
});
}
});
})(jQuery);