Merge pull request #11 from T-Thiry/progress-bar

Progress bar

Author: jszor

css/styles.css

@@ -281,13 +281,52 @@ input[type="radio"]:focus-visible+label {
   margin: 0 auto 0.75rem auto;
 }
 
-#summary-card h3 {
+input[type="radio"]:focus-visible+label {
+  outline: var(--focus-outline);
+  border-radius: 0.25rem;
+}
+
+/* Progress bar */
+.quiz-progress {
+  margin: 2rem 0;
+}
+
+.progress-bar {
+  background-color: var(--progress-bg);
+  border-radius: 8px;
+  height: 20px;
+  margin: 0 2rem 0 2rem;
+  overflow: hidden;
+  position: relative;
+}
+
+.progress-fill {
+  background-color: var(--primary-color);
+  height: 100%;
+  transition: width 0.3s ease;
+  border-radius: 8px;
+}
+
+.progress-text {
+  margin-top: 0.5rem;
   text-align: center;
-  word-wrap: break-word;
-  margin: 2rem auto 0.5rem auto;
+  font-weight: 500;
 }
 
-#summary-card p {
+.error-message {
+  font-size: 1rem;
+  font-weight: 600;
+  /* not final color, just testing */
+  color: red; 
+}
+
+.error-container {
+  margin-top: 2rem;
+}
+
+/* Submit button Jasmin commented out because we now have it as a nav button
+.form-controls {
+  margin-top: 2rem;
   text-align: center;
   margin: 0 auto 0.5rem auto;
 }

index.html

@@ -61,6 +61,13 @@ <h2>
       >
       <form id="accessibility-quiz">
         <h2>Accessibility Quiz</h2>
+        <!-- Progress bar -->
+        <div class="quiz-progress" role="status" aria-live="polite">
+          <div class="progress-bar">
+            <div class="progress-fill" style="width: 0%"></div>
+          </div>
+          <p class="progress-text">0 of 6 questions answered</p>
+        </div>
 
         <fieldset
           class="quiz-card"
@@ -94,6 +101,8 @@ <h2>Accessibility Quiz</h2>
           />
           <label for="question-one-c">Auto playing videos</label>
 
+          <div class="error-container" role="status" aria-live="assertive"></div>
+
           <div class="nav-buttons">
             <button
               type="button"
@@ -135,6 +144,8 @@ <h2>Accessibility Quiz</h2>
           />
           <label for="question-two-c">Long, dense text</label>
 
+          <div class="error-container" aria-live="polite"></div>
+
           <div class="nav-buttons">
             <button
               type="button"
@@ -179,6 +190,9 @@ <h2>Accessibility Quiz</h2>
             value="Text over background images"
           />
           <label for="question-three-c">Text over background images</label>
+
+          <div class="error-container" aria-live="polite"></div>
+
           <div class="nav-buttons">
             <button
               type="button"
@@ -223,6 +237,9 @@ <h2>Accessibility Quiz</h2>
             value="Complex text layout"
           />
           <label for="question-four-c">Complex text layout</label>
+
+          <div class="error-container" aria-live="polite"></div>
+
           <div class="nav-buttons">
             <button
               type="button"
@@ -268,6 +285,8 @@ <h2>Accessibility Quiz</h2>
           />
           <label for="question-five-c">Sound-only cues</label>
 
+          <div class="error-container" aria-live="polite"></div>
+
           <div class="nav-buttons">
             <button
               type="button"
@@ -313,6 +332,8 @@ <h2>Accessibility Quiz</h2>
           />
           <label for="question-six-c">Tiny clickable areas</label>
 
+          <div class="error-container" aria-live="polite"></div>
+
           <div class="nav-buttons">
             <button
               type="button"

js/main.js

@@ -51,25 +51,56 @@ document.addEventListener('DOMContentLoaded', function () {
     return selectedOption ? selectedOption.value : null;
   };
 
+  // Progress bar logic
+
+  const form = document.getElementById('accessibility-quiz');
+  const progressBar = document.querySelector(".quiz-progress");
+  const progressFill = document.querySelector('.progress-fill');
+  const progressText = document.querySelector('.progress-text');
+  let answeredQuestions = new Set();
+
+  const updateProgress = () => {
+        const totalQuestions = 6; 
+        const answeredCount = answeredQuestions.size;
+        const percentage = (answeredCount / totalQuestions) * 100;
+
+        progressFill.style.width = `${percentage}%`;
+        progressText.textContent = `${answeredCount} of ${totalQuestions} questions answered`;
+        announcer.textContent = `${answeredCount} of ${totalQuestions} questions answered`;
+      }
+
+  form.querySelectorAll('input[type="radio"]').forEach((radio) => {
+        radio.addEventListener('change', () => {
+          const questionName = radio.name; 
+          answeredQuestions.add(questionName);
+          updateProgress();
+        });
+      });
+
+  // const createErrorMessage = () => {
+  //   const errorMessage = document.createElement("div");
+  //   errorMessage.classList.add("error-message");
+  //   errorMessage.setAttribute("aria-live", "polite");
+  //   errorMessage.textContent = "Please select an answer before proceeding.";
+  //   return errorMessage;
+  // };
 
   const createErrorMessage = () => {
-    const errorMessage = document.createElement("div");
-    errorMessage.classList.add("error-message");
-    errorMessage.setAttribute("aria-live", "polite");
-    errorMessage.textContent = "Please select an answer before proceeding.";
-    return errorMessage;
-  };
+    const errorContainer = document.querySelectorAll('.error-container')[currentIndex];
+    errorContainer.textContent = "Please select an answer before proceeding";
+  }
 
   const showSummary = () => {
     let summaryCard = document.getElementById("summary-card");
+    progressBar.setAttribute("hidden", "true");
 
     if (!summaryCard) {
       summaryCard = document.createElement("fieldset");
       summaryCard.id = "summary-card";
       summaryCard.classList.add("quiz-card");
       summaryCard.innerHTML = `
         <h2>Your results:</h2>
-        <div id="summary-content"></div>
+        <div id="summary-content" aria-live="polite"></div>
         <button type="button" id="restart-btn">Restart Quiz</button>
       `;
       document.getElementById("accessibility-quiz").appendChild(summaryCard);
@@ -99,15 +130,20 @@ document.addEventListener('DOMContentLoaded', function () {
     restartButton.addEventListener("click", () => {
       currentIndex = 0;
       userAnswers = {};
-
+      
+      progressBar.removeAttribute("hidden");
       summaryCard.classList.remove("active");
 
       document.querySelectorAll('input[type="radio"]:checked').forEach((radio) => {
         radio.checked = false;
       });
 
+      answeredQuestions.clear();
+
       showCard(currentIndex);
 
+      updateProgress();
+      
     });
 
     showCard(cards.length);
@@ -118,17 +154,23 @@ document.addEventListener('DOMContentLoaded', function () {
 
     const currentCard = cards[currentIndex];
     const selectedAnswer = getSelectedAnswer();
+    const errorContainer = document.querySelectorAll('.error-container')[currentIndex];
 
     // Check if error message already exists and remove it if it does
-    const existingError = currentCard.querySelector(".error-message");
-    if (existingError) {
-      existingError.remove();
-    }
+    // const existingError = currentCard.querySelector(".error-message");
+    // if (existingError) {
+    //   existingError.remove();
+    // }
 
     // If no answer selected create an error message
+    // if (!selectedAnswer) {
+    //   const errorMessage = createErrorMessage();
+    //   errorContainer.appendChild(errorMessage);
+    //   return;
+    // }
+
     if (!selectedAnswer) {
-      const errorMessage = createErrorMessage();
-      currentCard.appendChild(errorMessage);
+      createErrorMessage();
       return;
     }