Просмотр кода страницы Викторина

<div class="navigation-not-searchable">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="question-buttons">
<button id="prev" disabled>Предыдущий вопрос</button>
<button id="next">Следующий вопрос</button>
</div>
<div class="progress-bar">
  <span class="progress-bar-current"></span>
  <span class="progress-bar-remaining"></span>
</div>
<div class="category-message category-message-intersection"><i class="fa fa-lightbulb-o"></i> Сначала необходимо ответить на все вопросы и нажать на кнопку "Узнать результат!" в последнем вопросе, а после обновления страницы вы получите свой результат в виде количества правильных ответов, а также комментарии к каждому вопросу. </div>
<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 = '<span class="progress-bar-current" style="width: ' + progressBarWidth + 'px;"></span><span class="progress-bar-remaining" style="width: ' + remainingWidth + 'px;"></span>';
}

  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>
</div>
<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>