<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
Сначала необходимо ответить на все вопросы и нажать на кнопку "Узнать результат!" в последнем вопросе, а после обновления страницы вы получите свой результат в виде количества правильных ответов, а также комментарии к каждому вопросу.
<script>
document.addEventListener('DOMContentLoaded', function() {
const prevButton = document.getElementById('prev');
const nextButton = document.getElementById('next');
const questions = document.querySelectorAll('.quizQuestions .question');
const questionsPerPage = 1;
let currentPage = 0;
const lastPage = Math.ceil(questions.length / questionsPerPage) - 1;
const submitButton = document.querySelector('input[type="submit"]');
let submitButtonDisplayed = false;
const quizForm = document.querySelector('.quizForm');
const questionCount = questions.length;
const arrowTds = document.querySelectorAll('td');
arrowTds.forEach(function(td) {
if (td.textContent.includes('→')) {
td.style.display = 'none';
}
});
const correctionEl = document.querySelector('.correction');
if (correctionEl) {
document.querySelector('.quiz .quizForm').style.paddingTop = '35px';
}
function showPage(page) {
for (let i = 0; i < questions.length; i++) {
if (i < page * questionsPerPage || i >= (page + 1) * questionsPerPage) {
questions[i].style.display = 'none';
} else {
questions[i].style.display = 'block';
}
}
showProgressBar(page);
if (page === 0) {
prevButton.disabled = true;
} else {
prevButton.disabled = false;
}
if (page === lastPage) {
nextButton.disabled = true;
const currentQuestion = questions[currentPage];
const incorrectTable = currentQuestion.querySelector('.incorrect');
const correctTable = currentQuestion.querySelector('.correct');
if (incorrectTable || correctTable) {
submitButtonDisplayed = true;
} else if (!submitButtonDisplayed) {
submitButton.style.display = 'block';
submitButtonDisplayed = true;
}
} else {
nextButton.disabled = false;
if (submitButtonDisplayed) {
submitButton.style.display = 'block';
} else {
submitButton.style.display = 'none';
}
}
}
function nextPage() {
if (currentPage < lastPage) {
currentPage++;
showPage(currentPage);
if (correctionEl && correctionEl.offsetHeight > 0) {
correctionEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
} else {
quizForm.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}
}
function prevPage() {
if (currentPage > 0) {
currentPage--;
showPage(currentPage);
if (correctionEl && correctionEl.offsetHeight > 0) {
correctionEl.scrollIntoView({ behavior: 'smooth', block: 'start' });
} else {
quizForm.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
// Check if we're on the last page again
if (currentPage === lastPage) {
nextButton.disabled = true;
if (!submitButtonDisplayed) {
submitButton.style.display = 'block';
submitButtonDisplayed = true;
}
} else {
nextButton.disabled = false;
submitButton.style.display = 'none';
submitButtonDisplayed = false;
}
}
}
// Add the "of X" text after each question number
questions.forEach(function(question) {
const questionId = question.querySelector('.questionId');
questionId.textContent = questionId.textContent + ' из ' + questionCount;
});
if ($('span.correction').length > 0) {
$('span.questionId').css('top', '50px');
}
function showProgressBar(page) {
const progressBar = document.querySelector('.progress-bar');
const progress = (page + 1) / (lastPage + 1);
const progressBarWidth = Math.round(progressBar.offsetWidth * progress);
const remainingWidth = progressBar.offsetWidth - progressBarWidth;
progressBar.innerHTML = '';
}
showProgressBar(currentPage);
showPage(currentPage);
nextButton.addEventListener('click', function(event) {
event.preventDefault();
nextPage();
nextButton.blur(); // remove focus from the button
});
prevButton.addEventListener('click', function(event) {
event.preventDefault();
prevPage();
prevButton.blur(); // remove focus from the button
});
// Get all the div elements with the class "question"
const questionDivs = document.querySelectorAll('.question');
// Loop through each div element
questionDivs.forEach(questionDiv => {
// Get all the tr elements with the class "proposal" within the current div
const proposalRows = questionDiv.querySelectorAll('.proposal');
proposalRows.forEach(row => {
row.addEventListener('click', event => {
const clickedElement = event.target;
if (clickedElement.classList.contains('check') || clickedElement.closest('.check')) {
const inputElement = row.querySelector('.check');
inputElement.checked = !inputElement.checked;
} else {
const inputElement = row.querySelector('.check');
if (inputElement) {
inputElement.checked = !inputElement.checked;
} else {
console.error('Could not find input element for row:', row);
}
}
proposalRows.forEach(proposalRow => {
if (proposalRow !== row) {
proposalRow.classList.remove('selected');
}
});
row.classList.add('selected');
if (currentPage === lastPage) {
setTimeout(() => {
submitButton.click();
}, 150);
} else {
setTimeout(() => {
nextPage();
}, 150);
}
});
});
const rows = questionDiv.querySelectorAll('tr.proposal, tr.correction');
rows.forEach(row => {
const input = row.querySelector('input[checked="checked"]');
if (input) {
row.style.backgroundColor = '#2786c2';
}
});
});
function updateCorrectionPosition() {
var correction = document.querySelector('span.correction');
if (correction) {
var correctionTop = correction.getBoundingClientRect().top + window.pageYOffset;
window.scrollTo(0, correctionTop);
}
}
window.addEventListener('load', updateCorrectionPosition);
$('tr.proposal').each(function() {
$(this).find('a').each(function() {
$(this).click(function(event) {
event.preventDefault();
});
});
});
});
</script>
<style>
.quizQuestions {
margin-top: -1em;
}
.quizQuestions .question {
display: none;
}
.quizQuestions .question:first-child {
display: block;
}
span.questionText {
font-weight: bold;
color: white;
}
.thumbcaption {
color: #222;
font-weight: initial;
}
.quiz .question {
margin-left: 0;
}
span.questionId {
position: absolute;
top: 3em;
left: 2em;
z-index: 2;
}
.question p {
text-align: center!important;
}
.quiz .quizForm {
background-image: linear-gradient(rgb(0 0 0 / 35%), rgb(30 30 27 / 0%)), url("https://wikiwarriors.org/mediawiki/images/6/64/Test_background.png");
text-align: center;
padding-bottom: 50px;
}
.quiz table.object {
background-color: transparent;
margin: 0 auto;
width: 50%;
border-collapse: separate;
border-spacing: 10px;
}
.quiz .sign {
display: none;
}
tr {
cursor: pointer;
}
table tbody tr td, table tr td {
color: white;
text-align: center;
}
tr a {
color: white;
}
table tr.proposal, table tr:nth-of-type(even) {
background: #0000007d;
}
table.settings tr:nth-of-type(even) {
background: transparent;
}
.question-buttons {
text-align: center;
margin-top: -85px;
margin-bottom: 10px;
}
input.check {
display: none;
}
tr.proposal.selected, tr.proposal.selected:hover {
background-color: #2786c2;
}
tr.proposal:hover {
background-color: #5ea3cf;
}
input[type=submit] {
display: none;
}
input.reset {
display: block;
}
input[type="submit"] {
background-color: #66120e;
border: none;
padding: 7px;
color: white;
margin: 15px auto;
box-shadow: none;
}
input[type="submit"]:hover {
background-color: #2786c2;
}
.quiz table.settings {
position: absolute;
left: 10px;
top: 15%;
}
table.correct tr.correction td {
background-color: #14866d;
display: block;
margin-top: -10px;
}
table.incorrect tr.correction td {
background-color: #dd3333;
display: block;
margin-top: -10px;
}
span.correction {
background-color: #783fd3!important;
color: #ffe000;
font-weight: bold;
padding: 10px 50px;
font-size: 1.3em;
margin-left: auto;
margin-right: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
text-align: center;
}
.progress-bar {
display: block;
width: 100%;
height: 10px;
margin-top: 15px;
background-color: #ccc;
position: relative;
}
.progress-bar-current {
display: block;
height: 100%;
background-color: #66120e;
position: absolute;
left: 0;
top: 0;
}
.progress-bar-remaining {
display: block;
height: 100%;
background-color: #fff;
position: absolute;
right: 0;
top: 0;
}
.settings tr {
cursor: default;
}
button:focus {
outline: none;
}
.correction a {
color: #ffa604;
}
.correction a:hover {
color: #f5dd99;
}
.proposal a:hover {
color: inherit;
text-decoration: none;
}
@media only screen and (max-width:640px) {
.quiz .quizForm {
padding-bottom: 40px;
}
button {
font-size: small;
}
.question-buttons {
margin-top: -70px;
}
.quiz table.object {
width: 100vw;
}
span.correction {
padding: 10px 0px;
font-size: 1em;
}
.quiz table.settings {
width: 200px;
position: inherit;
margin-top: 40px;
}
tr.proposal {
background-color: #0000007d;
}
span.questionId {
left: 50%;
top: 15px;
}
table.object {
table-layout: fixed;
}
tr.proposal td {
width: 100vw;
}
}
</style>
