From 44094ffdf373668a1fba919827a85990cf66a4eb Mon Sep 17 00:00:00 2001
From: shraddha <224512+shraddha@users.noreply.github.com>
Date: Tue, 6 Aug 2024 15:45:52 +0530
Subject: [PATCH 1/8] color coding for answers

Fixed the issue - Color-coding of the answers for pretest and posttest pages needs to be fixed. #499 (https://github.com/virtual-labs/ph3-lab-mgmt/issues/499)
---
 assets/js/assessment_v2.js | 130 +++++++++++++++----------------------
 1 file changed, 53 insertions(+), 77 deletions(-)

diff --git a/assets/js/assessment_v2.js b/assets/js/assessment_v2.js
index 65ab4c28..45d54998 100644
--- a/assets/js/assessment_v2.js
+++ b/assets/js/assessment_v2.js
@@ -8,6 +8,10 @@ const difficultyLevels = ["beginner", "intermediate", "advanced"];
 let difficulty = [];
 let questions = { all: myQuestions };
 
+// Store the correct answers and user selections
+let correctAnswers = {}; // { questionId: correctAnswer }
+let userSelections = {}; // { questionId: selectedAnswer }
+
 const addEventListener_explanations = () => {
   let accordions = document.getElementsByClassName("accordion");
   Array.from(accordions).forEach((accordion) => {
@@ -18,11 +22,7 @@ const addEventListener_explanations = () => {
 
       /* Toggle between hiding and showing the active panel */
       let panel = accordion.parentElement.nextElementSibling;
-      if (panel.style.display === "block") {
-        panel.style.display = "none";
-      } else {
-        panel.style.display = "block";
-      }
+      panel.style.display = panel.style.display === "block" ? "none" : "block";
     });
   });
 };
@@ -41,6 +41,24 @@ const addEventListener_checkbox = () => {
   });
 };
 
+// Function to initialize the quiz
+const initializeQuiz = () => {
+  questions.all.forEach((question, index) => {
+    correctAnswers[question.id] = question.correctAnswer;
+    userSelections[question.id] = null;
+
+    const answers = document.querySelectorAll(`#question-${question.id} .answer`);
+    answers.forEach((answer) => {
+      answer.addEventListener("click", () => handleAnswerSelection(question.id, answer));
+    });
+  });
+};
+
+// Function to handle answer selection
+const handleAnswerSelection = (questionId, selectedAnswer) => {
+  userSelections[questionId] = selectedAnswer.textContent;
+};
+
 const populateQuestions = () => {
   let num = 0;
   myQuestions.forEach((currentQuestion) => {
@@ -105,81 +123,39 @@ function updateQuestions() {
   }
 }
 
-function showResults() {
-  // gather answer containers from our quiz
-  const answerContainers = quizContainer.querySelectorAll(".answers");
-  // keep track of user's answers
+const showResults = () => {
   let numCorrect = 0;
-  let toatNum = 0;
-  // for each question...
-  myQuestions.forEach((currentQuestion) => {
-    // find selected answer
-    if (
-      difficulty.indexOf(currentQuestion.difficulty) === -1 &&
-      difficulty.length !== Object.keys(questions).length - 1
-    )
-      return;
-    let questionNumber = currentQuestion.num;
-    const answerContainer = answerContainers[questionNumber];
-    const selector = `input[name=question${questionNumber}]:checked`;
-    const userAnswer = (answerContainer.querySelector(selector) || {}).value;
-    // Add to total
-    toatNum++;
-    // if answer is correct
-    if (userAnswer === currentQuestion.correctAnswer) {
-      // Reset if previously red colored answers
-      answerContainers[questionNumber].childNodes.forEach((e) => {
-        if (e != undefined) {
-          if (e.style) e.style.color = "black";
-        }
-      });
-
-      // add to the number of correct answers
-      numCorrect++;
+  const totalNum = questions.all.length;
 
-      // color the answers green
-      //answerContainers[questionNumber].style.color = "lightgreen";
-      // Show all explanations
-      if (currentQuestion.explanations) {
-        for (let answer in currentQuestion.answers) {
-          let explanation = currentQuestion.explanations[answer];
-          let explanationButton = document.getElementById(
-            "explanation" + questionNumber.toString() + answer
-          );
-          if (explanation) {
-            explanationButton.parentElement.nextElementSibling.innerHTML = explanation;
-            explanationButton.style.display = "inline-block";
-          } else {
-            explanationButton.style.display = "none";
-          }
-        }
-      }
-    } else if (userAnswer) {
-      // if answer is wrong or blank
-      // color the answers red
-      document.getElementById(
-        "answer" + questionNumber.toString() + userAnswer
-      ).style.color = "red";
-      // Show only explanation for wrong answer
-      if (currentQuestion.explanations && userAnswer) {
-        let explanation = currentQuestion.explanations[userAnswer];
-        let explanationButton = document.getElementById(
-          "explanation" + questionNumber.toString() + userAnswer
-        );
-        if (explanation) {
-          explanationButton.parentElement.nextElementSibling.innerHTML = explanation;
-          explanationButton.style.display = "inline-block";
-        } else {
-          explanationButton.style.display = "none";
-        }
+  questions.all.forEach((question) => {
+    const correctAnswer = correctAnswers[question.id];
+    const userAnswer = userSelections[question.id];
+    const answers = document.querySelectorAll(`#question-${question.id} .answer`);
+
+    answers.forEach((answer) => {
+      if (answer.textContent === correctAnswer) {
+        answer.style.color = "green";
+      } else if (answer.textContent === userAnswer) {
+        answer.style.color = "red";
+      } else {
+        answer.style.color = "black";
       }
+    });
+
+    if (userAnswer === correctAnswer) {
+      numCorrect++;
     }
   });
-  // show number of correct answers out of total
-  resultsContainer.innerHTML = `Score: ${numCorrect} out of ${toatNum}`;
-}
 
-populateQuestions();
-addEventListener_explanations();
-addEventListener_checkbox();
-submitButton.addEventListener("click", showResults);
+  // Show number of correct answers out of total
+  resultsContainer.innerHTML = `Score: ${numCorrect} out of ${totalNum}`;
+};
+
+// Call initializeQuiz to set up the quiz after the DOM is fully loaded
+document.addEventListener("DOMContentLoaded", () => {
+  initializeQuiz();
+  populateQuestions();
+  addEventListener_explanations();
+  addEventListener_checkbox();
+  submitButton.addEventListener("click", showResults);
+});

From 2d6f1cab08044d0748145b3d6e89a69ec76e0af0 Mon Sep 17 00:00:00 2001
From: shraddha <224512+shraddha@users.noreply.github.com>
Date: Tue, 6 Aug 2024 15:52:56 +0530
Subject: [PATCH 2/8] Revert "color coding for answers"

This reverts commit 44094ffdf373668a1fba919827a85990cf66a4eb.
---
 assets/js/assessment_v2.js | 130 ++++++++++++++++++++++---------------
 1 file changed, 77 insertions(+), 53 deletions(-)

diff --git a/assets/js/assessment_v2.js b/assets/js/assessment_v2.js
index 45d54998..65ab4c28 100644
--- a/assets/js/assessment_v2.js
+++ b/assets/js/assessment_v2.js
@@ -8,10 +8,6 @@ const difficultyLevels = ["beginner", "intermediate", "advanced"];
 let difficulty = [];
 let questions = { all: myQuestions };
 
-// Store the correct answers and user selections
-let correctAnswers = {}; // { questionId: correctAnswer }
-let userSelections = {}; // { questionId: selectedAnswer }
-
 const addEventListener_explanations = () => {
   let accordions = document.getElementsByClassName("accordion");
   Array.from(accordions).forEach((accordion) => {
@@ -22,7 +18,11 @@ const addEventListener_explanations = () => {
 
       /* Toggle between hiding and showing the active panel */
       let panel = accordion.parentElement.nextElementSibling;
-      panel.style.display = panel.style.display === "block" ? "none" : "block";
+      if (panel.style.display === "block") {
+        panel.style.display = "none";
+      } else {
+        panel.style.display = "block";
+      }
     });
   });
 };
@@ -41,24 +41,6 @@ const addEventListener_checkbox = () => {
   });
 };
 
-// Function to initialize the quiz
-const initializeQuiz = () => {
-  questions.all.forEach((question, index) => {
-    correctAnswers[question.id] = question.correctAnswer;
-    userSelections[question.id] = null;
-
-    const answers = document.querySelectorAll(`#question-${question.id} .answer`);
-    answers.forEach((answer) => {
-      answer.addEventListener("click", () => handleAnswerSelection(question.id, answer));
-    });
-  });
-};
-
-// Function to handle answer selection
-const handleAnswerSelection = (questionId, selectedAnswer) => {
-  userSelections[questionId] = selectedAnswer.textContent;
-};
-
 const populateQuestions = () => {
   let num = 0;
   myQuestions.forEach((currentQuestion) => {
@@ -123,39 +105,81 @@ function updateQuestions() {
   }
 }
 
-const showResults = () => {
+function showResults() {
+  // gather answer containers from our quiz
+  const answerContainers = quizContainer.querySelectorAll(".answers");
+  // keep track of user's answers
   let numCorrect = 0;
-  const totalNum = questions.all.length;
-
-  questions.all.forEach((question) => {
-    const correctAnswer = correctAnswers[question.id];
-    const userAnswer = userSelections[question.id];
-    const answers = document.querySelectorAll(`#question-${question.id} .answer`);
+  let toatNum = 0;
+  // for each question...
+  myQuestions.forEach((currentQuestion) => {
+    // find selected answer
+    if (
+      difficulty.indexOf(currentQuestion.difficulty) === -1 &&
+      difficulty.length !== Object.keys(questions).length - 1
+    )
+      return;
+    let questionNumber = currentQuestion.num;
+    const answerContainer = answerContainers[questionNumber];
+    const selector = `input[name=question${questionNumber}]:checked`;
+    const userAnswer = (answerContainer.querySelector(selector) || {}).value;
+    // Add to total
+    toatNum++;
+    // if answer is correct
+    if (userAnswer === currentQuestion.correctAnswer) {
+      // Reset if previously red colored answers
+      answerContainers[questionNumber].childNodes.forEach((e) => {
+        if (e != undefined) {
+          if (e.style) e.style.color = "black";
+        }
+      });
+
+      // add to the number of correct answers
+      numCorrect++;
 
-    answers.forEach((answer) => {
-      if (answer.textContent === correctAnswer) {
-        answer.style.color = "green";
-      } else if (answer.textContent === userAnswer) {
-        answer.style.color = "red";
-      } else {
-        answer.style.color = "black";
+      // color the answers green
+      //answerContainers[questionNumber].style.color = "lightgreen";
+      // Show all explanations
+      if (currentQuestion.explanations) {
+        for (let answer in currentQuestion.answers) {
+          let explanation = currentQuestion.explanations[answer];
+          let explanationButton = document.getElementById(
+            "explanation" + questionNumber.toString() + answer
+          );
+          if (explanation) {
+            explanationButton.parentElement.nextElementSibling.innerHTML = explanation;
+            explanationButton.style.display = "inline-block";
+          } else {
+            explanationButton.style.display = "none";
+          }
+        }
+      }
+    } else if (userAnswer) {
+      // if answer is wrong or blank
+      // color the answers red
+      document.getElementById(
+        "answer" + questionNumber.toString() + userAnswer
+      ).style.color = "red";
+      // Show only explanation for wrong answer
+      if (currentQuestion.explanations && userAnswer) {
+        let explanation = currentQuestion.explanations[userAnswer];
+        let explanationButton = document.getElementById(
+          "explanation" + questionNumber.toString() + userAnswer
+        );
+        if (explanation) {
+          explanationButton.parentElement.nextElementSibling.innerHTML = explanation;
+          explanationButton.style.display = "inline-block";
+        } else {
+          explanationButton.style.display = "none";
+        }
       }
-    });
-
-    if (userAnswer === correctAnswer) {
-      numCorrect++;
     }
   });
+  // show number of correct answers out of total
+  resultsContainer.innerHTML = `Score: ${numCorrect} out of ${toatNum}`;
+}
 
-  // Show number of correct answers out of total
-  resultsContainer.innerHTML = `Score: ${numCorrect} out of ${totalNum}`;
-};
-
-// Call initializeQuiz to set up the quiz after the DOM is fully loaded
-document.addEventListener("DOMContentLoaded", () => {
-  initializeQuiz();
-  populateQuestions();
-  addEventListener_explanations();
-  addEventListener_checkbox();
-  submitButton.addEventListener("click", showResults);
-});
+populateQuestions();
+addEventListener_explanations();
+addEventListener_checkbox();
+submitButton.addEventListener("click", showResults);

From e4b4b680f42f57be5c0bcde664336b04b3b64910 Mon Sep 17 00:00:00 2001
From: shraddha <224512+shraddha@users.noreply.github.com>
Date: Tue, 6 Aug 2024 16:02:11 +0530
Subject: [PATCH 3/8] color coding for answers updated

Fixed the issue - Color-coding of the answers for pretest and posttest pages needs to be fixed. #499 (#499)
---
 assets/js/assessment_v2.js | 93 ++++++++++++++------------------------
 1 file changed, 33 insertions(+), 60 deletions(-)

diff --git a/assets/js/assessment_v2.js b/assets/js/assessment_v2.js
index 65ab4c28..5690c4da 100644
--- a/assets/js/assessment_v2.js
+++ b/assets/js/assessment_v2.js
@@ -106,80 +106,53 @@ function updateQuestions() {
 }
 
 function showResults() {
-  // gather answer containers from our quiz
-  const answerContainers = quizContainer.querySelectorAll(".answers");
-  // keep track of user's answers
   let numCorrect = 0;
-  let toatNum = 0;
-  // for each question...
-  myQuestions.forEach((currentQuestion) => {
-    // find selected answer
-    if (
-      difficulty.indexOf(currentQuestion.difficulty) === -1 &&
-      difficulty.length !== Object.keys(questions).length - 1
-    )
-      return;
-    let questionNumber = currentQuestion.num;
-    const answerContainer = answerContainers[questionNumber];
-    const selector = `input[name=question${questionNumber}]:checked`;
-    const userAnswer = (answerContainer.querySelector(selector) || {}).value;
-    // Add to total
-    toatNum++;
-    // if answer is correct
+  const totalNum = questions.all.length;
+
+  questions.all.forEach((currentQuestion, questionNumber) => {
+    const userAnswer = document.querySelector(`input[name=question${questionNumber}]:checked`)?.value;
+
     if (userAnswer === currentQuestion.correctAnswer) {
-      // Reset if previously red colored answers
-      answerContainers[questionNumber].childNodes.forEach((e) => {
-        if (e != undefined) {
-          if (e.style) e.style.color = "black";
-        }
-      });
-
-      // add to the number of correct answers
+      // if answer is correct
       numCorrect++;
-
-      // color the answers green
-      //answerContainers[questionNumber].style.color = "lightgreen";
-      // Show all explanations
-      if (currentQuestion.explanations) {
-        for (let answer in currentQuestion.answers) {
-          let explanation = currentQuestion.explanations[answer];
-          let explanationButton = document.getElementById(
-            "explanation" + questionNumber.toString() + answer
-          );
-          if (explanation) {
-            explanationButton.parentElement.nextElementSibling.innerHTML = explanation;
-            explanationButton.style.display = "inline-block";
-          } else {
-            explanationButton.style.display = "none";
-          }
-        }
-      }
+      document.getElementById(
+        "answer" + questionNumber.toString() + userAnswer
+      ).style.color = "lightgreen";
+      //console.log(`Question ${questionNumber}: Correct answer selected. Color changed to lightgreen.`);
     } else if (userAnswer) {
-      // if answer is wrong or blank
-      // color the answers red
+      // if answer is wrong
       document.getElementById(
         "answer" + questionNumber.toString() + userAnswer
       ).style.color = "red";
-      // Show only explanation for wrong answer
-      if (currentQuestion.explanations && userAnswer) {
-        let explanation = currentQuestion.explanations[userAnswer];
-        let explanationButton = document.getElementById(
-          "explanation" + questionNumber.toString() + userAnswer
-        );
-        if (explanation) {
-          explanationButton.parentElement.nextElementSibling.innerHTML = explanation;
-          explanationButton.style.display = "inline-block";
-        } else {
-          explanationButton.style.display = "none";
-        }
+      //console.log(`Question ${questionNumber}: Incorrect answer selected. Color changed to red.`);
+    }
+
+    // Show explanation for the selected answer
+    if (currentQuestion.explanations && userAnswer) {
+      let explanation = currentQuestion.explanations[userAnswer];
+      let explanationButton = document.getElementById(
+        "explanation" + questionNumber.toString() + userAnswer
+      );
+      if (explanation) {
+        explanationButton.parentElement.nextElementSibling.innerHTML = explanation;
+        explanationButton.style.display = "inline-block";
+      } else {
+        explanationButton.style.display = "none";
       }
     }
   });
+
   // show number of correct answers out of total
-  resultsContainer.innerHTML = `Score: ${numCorrect} out of ${toatNum}`;
+  resultsContainer.innerHTML = `Score: ${numCorrect} out of ${totalNum}`;
+  //console.log(`Results displayed: ${numCorrect} out of ${totalNum}`);
 }
 
 populateQuestions();
 addEventListener_explanations();
 addEventListener_checkbox();
 submitButton.addEventListener("click", showResults);
+
+populateQuestions();
+addEventListener_explanations();
+addEventListener_checkbox();
+submitButton.addEventListener("click", showResults);
\ No newline at end of file

From 1647213a0dca586541ed67a985a9a89f7980908f Mon Sep 17 00:00:00 2001
From: shraddha <224512+shraddha@users.noreply.github.com>
Date: Sun, 11 Aug 2024 16:29:50 +0530
Subject: [PATCH 4/8] updated the right code for color coding of answers

For the issue - https://github.com/virtual-labs/ph3-lab-mgmt/issues/499
---
 assets/js/assessment_v2.js | 341 ++++++++++++++++++++-----------------
 1 file changed, 184 insertions(+), 157 deletions(-)

diff --git a/assets/js/assessment_v2.js b/assets/js/assessment_v2.js
index 5690c4da..7c30e47d 100644
--- a/assets/js/assessment_v2.js
+++ b/assets/js/assessment_v2.js
@@ -1,158 +1,185 @@
-"use strict";
-
-const quizContainer = document.getElementById("quiz");
-const resultsContainer = document.getElementById("results");
-const submitButton = document.getElementById("submit");
-const difficultyLevels = ["beginner", "intermediate", "advanced"];
-
-let difficulty = [];
-let questions = { all: myQuestions };
-
-const addEventListener_explanations = () => {
-  let accordions = document.getElementsByClassName("accordion");
-  Array.from(accordions).forEach((accordion) => {
-    accordion.addEventListener("click", function () {
-      /* Toggle between adding and removing the "active" class,
-    to highlight the button that controls the panel */
-      accordion.classList.toggle("active");
-
-      /* Toggle between hiding and showing the active panel */
-      let panel = accordion.parentElement.nextElementSibling;
-      if (panel.style.display === "block") {
-        panel.style.display = "none";
-      } else {
-        panel.style.display = "block";
-      }
-    });
-  });
-};
-
-const addEventListener_checkbox = () => {
-  difficulty.forEach((diff) => {
-    let cBox = document.getElementById(diff);
-    cBox.addEventListener("change", function () {
-      if (cBox.checked) {
-        difficulty.push(diff);
-      } else {
-        difficulty.splice(difficulty.indexOf(diff), 1);
-      }
-      updateQuestions();
-    });
-  });
-};
-
-const populateQuestions = () => {
-  let num = 0;
-  myQuestions.forEach((currentQuestion) => {
-    if (difficultyLevels.indexOf(currentQuestion.difficulty) === -1) {
-      currentQuestion.difficulty = "beginner";
-    }
-    if (!(currentQuestion.difficulty in questions)) {
-      questions[currentQuestion.difficulty] = [];
-    }
-    questions[currentQuestion.difficulty].push(currentQuestion);
-
-    currentQuestion.num = num;
-    num += 1;
-  });
-
-  if (Object.keys(questions).length > 2) {
-    document.getElementById("difficulty-label").style.display = "flex";
-    difficultyLevels.forEach((diff) => {
-      if (!(diff in questions)) {
-        return;
-      }
-      difficulty.push(diff);
-      let checkbox = document.getElementById(diff);
-      checkbox.checked = true;
-      checkbox.parentElement.style.display = "flex";
-    });
-  } else {
-    difficultyLevels.forEach((diff) => {
-      if (!(diff in questions)) {
-        return;
-      }
-      difficulty.push(diff);
-    });
-  }
-};
-
-const checkDifficulties = (classlist) => {
-  if (difficulty.length === Object.keys(questions).length - 1) return true;
-  for (let i in difficulty) {
-    if (classlist.contains(difficulty[i])) return true;
-  }
-  // If beginner is checked list the unlisted question as beginner
-  for (let i in difficultyLevels) {
-    if (classlist.contains(difficultyLevels[i])) return false;
-  }
-  if (difficulty.indexOf("beginner") > -1) {
-    return true;
-  }
-};
-
-function updateQuestions() {
-  const quiz = document.getElementById("quiz");
-  const qquestions = quiz.getElementsByClassName("question");
-  for (let i = 0; i < qquestions.length; i += 1) {
-    if (!checkDifficulties(qquestions[i].classList)) {
-      qquestions[i].style.display = "none";
-      qquestions[i].nextElementSibling.style.display = "none";
-    } else {
-      qquestions[i].style.display = "block";
-      qquestions[i].nextElementSibling.style.display = "flex";
-    }
-  }
-}
-
-function showResults() {
-  let numCorrect = 0;
-  const totalNum = questions.all.length;
-
-  questions.all.forEach((currentQuestion, questionNumber) => {
-    const userAnswer = document.querySelector(`input[name=question${questionNumber}]:checked`)?.value;
-
-    if (userAnswer === currentQuestion.correctAnswer) {
-      // if answer is correct
-      numCorrect++;
-      document.getElementById(
-        "answer" + questionNumber.toString() + userAnswer
-      ).style.color = "lightgreen";
-      //console.log(`Question ${questionNumber}: Correct answer selected. Color changed to lightgreen.`);
-    } else if (userAnswer) {
-      // if answer is wrong
-      document.getElementById(
-        "answer" + questionNumber.toString() + userAnswer
-      ).style.color = "red";
-      //console.log(`Question ${questionNumber}: Incorrect answer selected. Color changed to red.`);
-    }
-
-    // Show explanation for the selected answer
-    if (currentQuestion.explanations && userAnswer) {
-      let explanation = currentQuestion.explanations[userAnswer];
-      let explanationButton = document.getElementById(
-        "explanation" + questionNumber.toString() + userAnswer
-      );
-      if (explanation) {
-        explanationButton.parentElement.nextElementSibling.innerHTML = explanation;
-        explanationButton.style.display = "inline-block";
-      } else {
-        explanationButton.style.display = "none";
-      }
-    }
-  });
-
-  // show number of correct answers out of total
-  resultsContainer.innerHTML = `Score: ${numCorrect} out of ${totalNum}`;
-  //console.log(`Results displayed: ${numCorrect} out of ${totalNum}`);
-}
-
-populateQuestions();
-addEventListener_explanations();
-addEventListener_checkbox();
-submitButton.addEventListener("click", showResults);
-
-populateQuestions();
-addEventListener_explanations();
-addEventListener_checkbox();
+"use strict";
+
+const quizContainer = document.getElementById("quiz");
+const resultsContainer = document.getElementById("results");
+const submitButton = document.getElementById("submit");
+const difficultyLevels = ["beginner", "intermediate", "advanced"];
+
+let difficulty = [];
+let questions = { all: myQuestions };
+
+const addEventListener_explanations = () => {
+  let accordions = document.getElementsByClassName("accordion");
+  Array.from(accordions).forEach((accordion) => {
+    accordion.addEventListener("click", function () {
+      /* Toggle between adding and removing the "active" class,
+    to highlight the button that controls the panel */
+      accordion.classList.toggle("active");
+
+      /* Toggle between hiding and showing the active panel */
+      let panel = accordion.parentElement.nextElementSibling;
+      if (panel.style.display === "block") {
+        panel.style.display = "none";
+      } else {
+        panel.style.display = "block";
+      }
+    });
+  });
+};
+
+const addEventListener_checkbox = () => {
+  difficulty.forEach((diff) => {
+    let cBox = document.getElementById(diff);
+    cBox.addEventListener("change", function () {
+      if (cBox.checked) {
+        difficulty.push(diff);
+      } else {
+        difficulty.splice(difficulty.indexOf(diff), 1);
+      }
+      updateQuestions();
+    });
+  });
+};
+
+const populateQuestions = () => {
+  let num = 0;
+  myQuestions.forEach((currentQuestion) => {
+    if (difficultyLevels.indexOf(currentQuestion.difficulty) === -1) {
+      currentQuestion.difficulty = "beginner";
+    }
+    if (!(currentQuestion.difficulty in questions)) {
+      questions[currentQuestion.difficulty] = [];
+    }
+    questions[currentQuestion.difficulty].push(currentQuestion);
+
+    currentQuestion.num = num;
+    num += 1;
+  });
+
+  if (Object.keys(questions).length > 2) {
+    document.getElementById("difficulty-label").style.display = "flex";
+    difficultyLevels.forEach((diff) => {
+      if (!(diff in questions)) {
+        return;
+      }
+      difficulty.push(diff);
+      let checkbox = document.getElementById(diff);
+      checkbox.checked = true;
+      checkbox.parentElement.style.display = "flex";
+    });
+  } else {
+    difficultyLevels.forEach((diff) => {
+      if (!(diff in questions)) {
+        return;
+      }
+      difficulty.push(diff);
+    });
+  }
+};
+
+const checkDifficulties = (classlist) => {
+  if (difficulty.length === Object.keys(questions).length - 1) return true;
+  for (let i in difficulty) {
+    if (classlist.contains(difficulty[i])) return true;
+  }
+  // If beginner is checked list the unlisted question as beginner
+  for (let i in difficultyLevels) {
+    if (classlist.contains(difficultyLevels[i])) return false;
+  }
+  if (difficulty.indexOf("beginner") > -1) {
+    return true;
+  }
+};
+
+function updateQuestions() {
+  const quiz = document.getElementById("quiz");
+  const qquestions = quiz.getElementsByClassName("question");
+  for (let i = 0; i < qquestions.length; i += 1) {
+    if (!checkDifficulties(qquestions[i].classList)) {
+      qquestions[i].style.display = "none";
+      qquestions[i].nextElementSibling.style.display = "none";
+    } else {
+      qquestions[i].style.display = "block";
+      qquestions[i].nextElementSibling.style.display = "flex";
+    }
+  }
+}
+
+function showResults() {
+  // gather answer containers from our quiz
+   const answerContainers = quizContainer.querySelectorAll(".answers");   
+  // keep track of user's answers
+  let numCorrect = 0;
+  let totalNum = 0;
+    
+  // for each question...
+  myQuestions.forEach((currentQuestion) => {
+    // find selected answer
+    if (
+      difficulty.indexOf(currentQuestion.difficulty) === -1 &&
+      difficulty.length !== Object.keys(questions).length - 1
+    )
+      return;
+    let questionNumber = currentQuestion.num;
+    const answerContainer = answerContainers[questionNumber];
+    const selector = `input[name=question${questionNumber}]:checked`;
+    const userAnswer = (answerContainer.querySelector(selector) || {}).value;
+    // Add to total
+    totalNum++;
+
+    // if answer is correct
+    if (userAnswer === currentQuestion.correctAnswer) {
+      // Color the correct answer lightgreen
+      const correctAnswerElement = document.getElementById(
+        "answer" + questionNumber.toString() + userAnswer
+      );
+      correctAnswerElement.style.color = "lightgreen";
+
+      // add to the number of correct answers
+      numCorrect++;
+
+      // Show all explanations
+      if (currentQuestion.explanations) {
+        for (let answer in currentQuestion.answers) {
+          let explanation = currentQuestion.explanations[answer];
+          let explanationButton = document.getElementById(
+            "explanation" + questionNumber.toString() + answer
+          );
+          if (explanation) {
+            explanationButton.parentElement.nextElementSibling.innerHTML = explanation;
+            explanationButton.style.display = "inline-block";
+          } else {
+            explanationButton.style.display = "none";
+          }
+        }
+      }
+    } else if (userAnswer) {
+      // if answer is wrong
+      document.getElementById(
+        "answer" + questionNumber.toString() + userAnswer
+      ).style.color = "red";
+      
+      // Show explanation for the selected answer
+      if (currentQuestion.explanations && userAnswer) {
+        let explanation = currentQuestion.explanations[userAnswer];
+        let explanationButton = document.getElementById(
+          "explanation" + questionNumber.toString() + userAnswer
+        );
+        if (explanation) {
+          explanationButton.parentElement.nextElementSibling.innerHTML = explanation;
+          explanationButton.style.display = "inline-block";
+        } else {
+          explanationButton.style.display = "none";
+        }
+      }
+    }
+  });
+
+  // show number of correct answers out of total
+  resultsContainer.innerHTML = `Score: ${numCorrect} out of ${totalNum}`;
+}
+
+populateQuestions();
+addEventListener_explanations();
+addEventListener_checkbox();
 submitButton.addEventListener("click", showResults);
\ No newline at end of file

From 59ddd9d3743859a2fcc6a98a9428b182337cd634 Mon Sep 17 00:00:00 2001
From: shraddha <224512+shraddha@users.noreply.github.com>
Date: Fri, 16 Aug 2024 09:51:04 +0530
Subject: [PATCH 5/8] defining dataLayer globally

For fixing issues :
https://github.com/virtual-labs/svc-bug-report/issues/12
https://github.com/virtual-labs/ph3-lab-mgmt/issues/506
---
 assets/js/event-handler.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/assets/js/event-handler.js b/assets/js/event-handler.js
index 35cf8854..5969b7c3 100644
--- a/assets/js/event-handler.js
+++ b/assets/js/event-handler.js
@@ -1,5 +1,8 @@
 "use-strict";
 
+// Ensure dataLayer is defined Globally before using it
+window.dataLayer = window.dataLayer || [];
+
 const Toast = Swal.mixin({
   toast: true,
   position: 'bottom-end',

From d67c81d68501777b6083508233f183a8be55f530 Mon Sep 17 00:00:00 2001
From: shraddha <224512+shraddha@users.noreply.github.com>
Date: Mon, 26 Aug 2024 19:24:35 +0530
Subject: [PATCH 6/8] bug reporting form submission toast placement is fixed

This fix is with reference to the issue : Form submission and Include screenshot - functionality needs fixing #13 (link - https://github.com/virtual-labs/svc-bug-report/issues/13)
---
 assets/css/toast.css                            | 16 ++++++++++++++++
 assets/js/event-handler.js                      |  2 +-
 exp_build/templates/partials/commons.handlebars |  1 +
 lab_build/skeleton.html                         |  1 +
 4 files changed, 19 insertions(+), 1 deletion(-)
 create mode 100644 assets/css/toast.css

diff --git a/assets/css/toast.css b/assets/css/toast.css
new file mode 100644
index 00000000..85e04757
--- /dev/null
+++ b/assets/css/toast.css
@@ -0,0 +1,16 @@
+/* assets/css/toast.css */
+.custom-toast-popup {
+    border-radius: 10px; /* Rounded corners */
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* Custom shadow */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed; /* Fixed positioning */
+    top: 50%; /* Center vertically */
+    left: 50%; /* Center horizontally */
+    transform: translate(-50%, -50%); /* Adjust for exact centering */
+    z-index: 1000; /* Ensure it appears above other elements */
+    padding: 10px;
+    color: #fff;
+    font-size: 1rem;
+  }
\ No newline at end of file
diff --git a/assets/js/event-handler.js b/assets/js/event-handler.js
index 5969b7c3..09fd7a2d 100644
--- a/assets/js/event-handler.js
+++ b/assets/js/event-handler.js
@@ -5,7 +5,7 @@ window.dataLayer = window.dataLayer || [];
 
 const Toast = Swal.mixin({
   toast: true,
-  position: 'bottom-end',
+  position: 'center',
   showConfirmButton: false,
   timer: 3000,
   timerProgressBar: true,
diff --git a/exp_build/templates/partials/commons.handlebars b/exp_build/templates/partials/commons.handlebars
index 0108e160..f18240a7 100644
--- a/exp_build/templates/partials/commons.handlebars
+++ b/exp_build/templates/partials/commons.handlebars
@@ -12,6 +12,7 @@
 />
 <link rel="stylesheet" href="{{assets_path}}/assets/css/github-markdown.min.css" />
 <link rel="stylesheet" href="{{assets_path}}/assets/css/vlabs-style.css" />
+<link rel="stylesheet" href="{{assets_path}}/assets/css/toast.css" />
 <link rel="stylesheet" href="{{assets_path}}/assets/katex_assets/katex.min.css" />
 
 <script src="{{assets_path}}/assets/js/jquery-3.4.1.slim.min.js"></script>
diff --git a/lab_build/skeleton.html b/lab_build/skeleton.html
index d5d874a1..bb4bf0f8 100644
--- a/lab_build/skeleton.html
+++ b/lab_build/skeleton.html
@@ -15,6 +15,7 @@
   <link rel="stylesheet" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css" />
   <link href="https://fonts.googleapis.com/css2?family=Open+Sans&family=Raleway&display=swap" rel="stylesheet" />
   <link href="css/vlabs-style.css" rel="stylesheet" />
+  <link href="css/toast.css" rel="stylesheet" />
   <script src="js/jquery-3.4.1.slim.min.js"></script>
   <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js"
     integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU"

From eed09fdc2352a6a0043cf51c6f0eff5c8ece0550 Mon Sep 17 00:00:00 2001
From: shraddha <224512+shraddha@users.noreply.github.com>
Date: Sun, 8 Sep 2024 00:49:44 +0530
Subject: [PATCH 7/8] fix the lab from lab_display_name

fix for Rating of a lab is not shown at all.
(https://github.com/virtual-labs/ph3-lab-mgmt/issues/522)
---
 lab_build/page-templates/navbar.handlebars | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lab_build/page-templates/navbar.handlebars b/lab_build/page-templates/navbar.handlebars
index 538a3f9d..bf0c2d1a 100644
--- a/lab_build/page-templates/navbar.handlebars
+++ b/lab_build/page-templates/navbar.handlebars
@@ -1,7 +1,7 @@
 <ul class="navbar-nav ml-auto text-center d-flex flex-md-row">
     <li class="vl-rating-display">
         <rating-display spreadsheetid="1x12nhpp0QvnsA6x-O1sV4IA9SAbfVsq_wiexWkutOmU" sheetname="Lab-Clean"
-            columnname="Lab Name" columnvalue="{{lab_display_name}}"
+            columnname="Lab Name" columnvalue="{{lab}}"
             imagesdirectory="https://virtual-labs.github.io/svc-rating/"></rating-display>
     </li>
     <li class="nav-item px-2 m-1">

From f925328a81ea134c2a5616a854ad7df202ef9c5e Mon Sep 17 00:00:00 2001
From: shraddha <224512+shraddha@users.noreply.github.com>
Date: Mon, 9 Sep 2024 09:36:00 +0530
Subject: [PATCH 8/8] change in initialization and condition access of
 dataLayer

Removed the global initialization of dataLayer and added conditional checks for dataLayer.

Ref - https://github.com/virtual-labs/ph3-lab-mgmt/issues/506
---
 assets/js/event-handler.js | 33 +++++++++++++++++----------------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/assets/js/event-handler.js b/assets/js/event-handler.js
index 09fd7a2d..cf119fad 100644
--- a/assets/js/event-handler.js
+++ b/assets/js/event-handler.js
@@ -1,8 +1,5 @@
 "use-strict";
 
-// Ensure dataLayer is defined Globally before using it
-window.dataLayer = window.dataLayer || [];
-
 const Toast = Swal.mixin({
   toast: true,
   position: 'center',
@@ -19,12 +16,14 @@ document.getElementById('bug-report').addEventListener('vl-bug-report', (e) => {
   if (e.detail.status === 200 || e.detail.status === 201) {
     const learningUnit = document.head.querySelector('meta[name="learning-unit"]').content;
     const task = document.head.querySelector('meta[name="task-name"]').content;
-    dataLayer.push({
-      event: "vl-bug-report",
-      "bug-type": e.detail.issues,
-      "learning-unit": learningUnit ? learningUnit : "",
-      "task-name": task ? task : ""
-    })
+    if (window.dataLayer) {
+      window.dataLayer.push({
+        event: "vl-bug-report",
+        "bug-type": e.detail.issues,
+        "learning-unit": learningUnit ? learningUnit : "",
+        "task-name": task ? task : ""
+      })
+    }
     Toast.fire({
       icon: 'success',
       iconColor: "white",
@@ -47,13 +46,15 @@ document.getElementById('bug-report').addEventListener('vl-bug-report', (e) => {
 function handleRatingSubmit(e) {
   const learningUnit = document.head.querySelector('meta[name="learning-unit"]').content;
   const task = document.head.querySelector('meta[name="task-name"]').content;
-  dataLayer.push({
-    event: "vl-rating-submit",
-    "rating": e.detail.rating,
-    "rating-value": e.detail.rating,
-    "learning-unit": learningUnit ? learningUnit : "",
-    "task-name": task ? task : ""
-  });
+  if (window.dataLayer) {
+    window.dataLayer.push({
+      event: "vl-rating-submit",
+      "rating": e.detail.rating,
+      "rating-value": e.detail.rating,
+      "learning-unit": learningUnit ? learningUnit : "",
+      "task-name": task ? task : ""
+    });
+  }
   Toast.fire({
     icon: 'success',
     iconColor: "white",