Update quizzes functionality

assets/css/quizzes.css

@@ -9,3 +9,10 @@ h5::before {
   list-style-type: none; 
   padding-left: 0;
 }
+
+.solution { }
+.hidden  { display: none !important;}
+
+.solution :is(h1,h2,h3,h4,h5,h6)::before {
+  content: none !important;
+}

assets/js/quizzes.js

@@ -22,57 +22,61 @@ function checkQuestion(id) {
   const container = document.getElementById(id);
   if (!container) return;
 
-  // Remove existing check-all icon if present
+  // 0) verberg eerst altijd alle uitleg-secties
+  container.querySelectorAll('.solution').forEach(sol => {
+    sol.style.display = 'none';
+  });
+
+  // 1) verwijder bestaand check-all icoon
   const heading = container.querySelector('h5');
   if (heading) {
-    const checkAllIcon = heading.querySelector('.bi-check-all');
-    if (checkAllIcon) {
-      heading.removeChild(checkAllIcon);
-    }
+    const existingAll = heading.querySelector('.bi-check-all');
+    if (existingAll) heading.removeChild(existingAll);
   }
 
+  // 2) doorloop alle quizzes en markeer items
   const quizzes = container.querySelectorAll('ul.quiz');
   let allCorrectChecked = true;
 
   quizzes.forEach(quiz => {
-    const items = quiz.querySelectorAll('li');
-    items.forEach(item => {
-      const checkbox = item.querySelector('input[type="checkbox"]');
-      const existingIcon = item.querySelector('i.bi');
-
-      // Remove existing icons
-      if (existingIcon) {
-        item.removeChild(existingIcon);
-      }
-
-      if (checkbox.checked && item.querySelector('.correct')) {
-        item.classList.add('text-success'); // Add green color for correct answers
-        item.classList.remove('text-danger');
-        const checkIcon = document.createElement('i');
-        checkIcon.classList.add('bi', 'bi-check', 'text-success');
-        item.appendChild(checkIcon);
-      } else if ((checkbox.checked && !item.querySelector('.correct')) || (!checkbox.checked && item.querySelector('.correct'))) {
-        item.classList.add('text-danger'); // Add red color for incorrect answers
-        item.classList.remove('text-success');
-        const crossIcon = document.createElement('i');
-        crossIcon.classList.add('bi', 'bi-x', 'text-danger');
-        item.appendChild(crossIcon);
+    quiz.querySelectorAll('li').forEach(item => {
+      const checkbox   = item.querySelector('input[type="checkbox"]');
+      const wasCorrect = !!item.querySelector('.correct');
+      const oldIcon    = item.querySelector('i.bi');
+      if (oldIcon) item.removeChild(oldIcon);
+
+      if (checkbox.checked && wasCorrect) {
+        item.classList.add('text-success');
+        const icon = document.createElement('i');
+        icon.classList.add('bi','bi-check','text-success');
+        item.appendChild(icon);
+
+      } else if ((checkbox.checked && !wasCorrect) || (!checkbox.checked && wasCorrect)) {
+        item.classList.add('text-danger');
+        const icon = document.createElement('i');
+        icon.classList.add('bi','bi-x','text-danger');
+        item.appendChild(icon);
         allCorrectChecked = false;
+
       } else {
-        item.classList.remove('text-success');
-        item.classList.remove('text-danger');
+        item.classList.remove('text-success','text-danger');
       }
     });
   });
 
+  // 3) als alles goed is, toon groen check-all én de uitleg
   if (allCorrectChecked && heading) {
-    const checkAllIcon = document.createElement('i');
-    checkAllIcon.classList.add('text-success');
-    checkAllIcon.classList.add('bi', 'bi-check-all');
-    heading.appendChild(checkAllIcon);
+    const allIcon = document.createElement('i');
+    allIcon.classList.add('bi','bi-check-all','text-success');
+    heading.appendChild(allIcon);
+
+    container.querySelectorAll('.solution').forEach(sol => {
+      sol.style.display = '';  // herstel default display
+    });
   }
 }
 
+
 function resetQuestion(id) {
   const container = document.getElementById(id);
   if (!container) return;
@@ -115,3 +119,75 @@ function resetQuestion(id) {
     }
   }
 }
+
+function toggleSolution(id) {
+  const sol = document.getElementById(id);
+  if (!sol) return;
+  sol.classList.toggle('hidden');
+}
+
+function showPasswordModal(solutionId, quizKey) {
+  const target = document.getElementById(solutionId);
+
+  // if already shown, hide instead
+  if (target.classList.contains('show')) {
+    new bootstrap.Collapse(target, { toggle: false }).hide();
+    return;
+  }
+
+  // otherwise prompt via modal
+  const pwdModal = new bootstrap.Modal(
+    document.getElementById('passwordModal')
+  );
+  document.getElementById('passwordSubmitButton').onclick = () => {
+    checkPassword(solutionId, quizKey);
+  };
+  document.getElementById('passwordInput').onkeydown = e => {
+    if (e.key === 'Enter') checkPassword(solutionId, quizKey);
+  };
+  pwdModal.show();
+}
+
+function checkPassword(solutionId, quizKey) {
+  const attempt = document.getElementById('passwordInput').value;
+  const correct = passwords[quizKey];
+  const collapseEl = document.getElementById(solutionId);
+
+  if (attempt === correct) {
+    // reveal the collapse
+    new bootstrap.Collapse(collapseEl, { toggle: false }).show();
+    // hide the modal
+    bootstrap.Modal.getInstance(
+      document.getElementById('passwordModal')
+    ).hide();
+  } else {
+    alert('Incorrect password.');
+  }
+}
+
+function copyContent(idSuffix) {
+  const spanId = idSuffix;
+  const spanElement = document.getElementById(spanId);
+  if (spanElement) {
+    const textToCopy = spanElement.textContent || spanElement.innerText;
+    navigator.clipboard.writeText(textToCopy).then(function() {
+    }, function(err) {
+      });
+  }
+}
+
+const passwords = {
+  "exc-laa": "logicROCKS!",
+  "exc-val": "AIdoestoo!",
+  "exc-for": "Formal?",
+  "exc-bool": "TrueOrFalse",
+  "exc-sat": "Icantgetno",
+  "exc-if": "Password",
+  "exc-proof": "Mellon",
+  "exc-fol": "Sesame",
+  "exc-finf": "Schibboleth",
+  "exc-mv": "MoreThanTwo",
+  "exc-prob": "Probably",
+  "exc-learn" : "NonScholae"
+  // Add more solutionId: password pairs here
+};

layouts/quizzes/_markup/render-heading.html

@@ -19,3 +19,23 @@ <h5 class="my-2 flex-fill" >
       </button>
     </div>
   </div>
+
+  <div class="modal fade" id="passwordModal" tabindex="-1" aria-hidden="true">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title">Enter password</h5>
+          <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+        </div>
+        <div class="modal-body">
+          <input id="passwordInput" type="password" class="form-control"
+                 placeholder="Password…">
+        </div>
+        <div class="modal-footer">
+          <button id="passwordSubmitButton" type="button" class="btn btn-primary">
+            Submit
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>