Как добавить индикатор выполнения, когда каждый тест завершен?

Question

Я создал несколько тестов. В каждой коробке всего 5 вопросов и полная кнопка. Я хочу иметь индикатор выполнения, который увеличивается, когда каждый раздел завершен (1-5). Кроме того, я хочу, чтобы каждый раздел был серым, чтобы вы могли разблокировать следующий раздел. Это доступ, когда пользователь вошел в систему, я использую PHP и MySQL. Я задавался вопросом, может ли кто-нибудь предложить способ достижения этого.

HTML

         <div class="grid-container">
             <a href="challenge1.html"><div class="grid-item item1">1. Discover HTML Basics and Tags</div></a>
             <a href="challenge2.html"><div class="grid-item item2">2. Styling HTML with Tags</div></a>
             <a href="challenge3.html" class="grid-item item3"><div>3. Creating Links and Images</div></a>
             <a href="challenge4.html"><div class="grid-item item4">4. Building Features</div></a>
             <a href="challenge5.html"><div class="grid-item item5">5. Building Lists</div></a>
         </div>

JS

$(document).ready(function() {
const startButton = document.getElementById('start-btn')
const nextButton = document.getElementById('next-btn')
const completeButton = document.getElementById('complete-btn')
const questionContainerElement = document.getElementById('question-container')
const questionElement = document.getElementById('question')
const answerButtonsElement = document.getElementById('answer-buttons')

let shuffledQuestions, currentQuestionIndex

startButton.addEventListener('click', startGame)
nextButton.addEventListener('click', () => {
  currentQuestionIndex++
  setNextQuestion()
})

function startGame() {
  startButton.classList.add('hide')
  shuffledQuestions = questions.sort(() => Math.random() - .5)
  currentQuestionIndex = 0
  questionContainerElement.classList.remove('hide')
  setNextQuestion()
}

function setNextQuestion() {
  resetState()
  showQuestion(shuffledQuestions[currentQuestionIndex])
}

function showQuestion(question) {
  questionElement.innerText = question.question
  question.answers.forEach(answer => {
    const button = document.createElement('button')
    button.innerText = answer.text
    button.classList.add('btn')
    if (answer.correct) {
      button.dataset.correct = answer.correct
    }
    button.addEventListener('click', selectAnswer)
    answerButtonsElement.appendChild(button)
  })
}

function resetState() {
  clearStatusClass(document.body)
  nextButton.classList.add('hide')
  while (answerButtonsElement.firstChild) {
    answerButtonsElement.removeChild(answerButtonsElement.firstChild)
  }
}

function selectAnswer(e) {
  const selectedButton = e.target
  const correct = selectedButton.dataset.correct
  setStatusClass(document.body, correct)
  Array.from(answerButtonsElement.children).forEach(button => {
    setStatusClass(button, button.dataset.correct)
  })
  if (shuffledQuestions.length > currentQuestionIndex + 1) {
    nextButton.classList.remove('hide')
  } else {
    completeButton.innerText = 'Complete'
    completeButton.classList.remove('hide')
  }
}

function setStatusClass(element, correct) {
  clearStatusClass(element)
  if (correct) {
    element.classList.add('correct')
  } else {
    element.classList.add('wrong')
  }
}

function clearStatusClass(element) {
  element.classList.remove('correct')
  element.classList.remove('wrong')
}
function completeprogress {
    if ()
}

const questions = [
  {
    question: 'What does HTML stand for?',
    answers: [
      { text: 'Hyperlinks and Text Markup Language', correct: true },
      { text: 'Hyper Text Markup Language', correct: false },
      { text: 'Home Tool Markup Language', correct: false }
    ]
  },
  {
    question: 'Which character is used to indicate an end tag?',
    answers: [
      { text: '<', correct: false },
      { text: '*', correct: false },
      { text: '/', correct: true },
      { text: ';', correct: false }
    ]
  },
  {
    question: 'Who is making the Web standards?',
    answers: [
      { text: 'Google', correct: false },
      { text: 'Mozilla', correct: false },
      { text: 'Microsoft', correct: false },
      { text: 'The World Wide Web Consortium', correct: true }
    ]
  },
  {
    question: 'What is the correct HTML for making a text input field?',
    answers: [
      { text: '<input type="textfield">', correct: false },
      { text: '<input type="text">', correct: true },
      { text: '<textfield>', correct: false },
      { text: '<textinput type="text">', correct: false }
    ]
  },
  {
    question: 'Choose the correct HTML element for the largest heading:',
    answers: [
      { text: '<head>', correct: false },
      { text: '<h6>', correct: false },
      { text: '<heading>', correct: false },
      { text: '<h1>', correct: true }
    ]
  }
]
});

Answer 1

Следующие логи c будут работать. Просто надо потренироваться, если вы хотите сделать это на стороне клиента или в php.

<?php 
// once a quiz is complete, add a status to the session. This could also be stored client side
session_start();

if(!isset($_SESSION['NumberComplete'])){
    $_SESSION['NumberComplete'] = 0;
}

// run this when the quiz is completed to increment the counter
$_SESSION['NumberComplete'] = (isset($_SESSION['NumberComplete']) ? $_SESSION['NumberComplete']++ : 1);

// read out the data on page load into a js var
echo '<script>var numberComplete='.$_SESSION['NumberComplete'].';</script>';
?> 

<div id="NumberComplete" style="width:100%;height:50px">
    <div id="percent" style="background-color: green;width:10%;height: 50px;"></div>
</div>


<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>
<script>
    var totalQuizes = 5;

    // run this either on page load, or dynamically when you have a new percentage to update
    $(function(){
        $("#NumberComplete #percent").css( {"width": (numberComplete / totalQuizes) * 100 + "%" } );
    });
</script>