feat: add pause/stop button after answer reveal

Author: thodel

content/intro-lecture/quiz/index.html

@@ -157,6 +157,17 @@
     border-top: 1px solid rgba(255,255,255,0.12); padding-top: 6px;
   }
 
+  .stop-btn {
+    padding: 10px 28px; font-size: 14px; font-weight: 800;
+    background: rgba(255,255,255,0.12); border: 2px solid rgba(255,255,255,0.3);
+    color: white; border-radius: 24px; cursor: pointer;
+    transition: background 0.15s;
+  }
+  .stop-btn:hover { background: rgba(255,255,255,0.22); }
+  .stop-btn.next-mode {
+    background: rgba(99,102,241,0.35); border-color: #818cf8;
+  }
+
   /* ── Result ── */
   #result .trophy  { font-size: 72px; text-align: center; margin: 16px 0 8px; }
   #result h2       { font-size: 26px; font-weight: 900; text-align: center; margin-bottom: 6px; }
@@ -248,6 +259,9 @@ <h3>Mixed (Both Types)</h3>
     <button class="confirm-btn" id="confirmBtn" onclick="confirmMulti()" disabled>Confirm ✓</button>
   </div>
   <div class="feedback" id="feedback"></div>
+  <div id="stopBar" style="display:none;text-align:center;margin-top:10px">
+    <button class="stop-btn" id="stopBtn" onclick="stopAutoAdvance()">⏸ Pause · Next →</button>
+  </div>
 </div>
 
 <!-- ── RESULT ── -->
@@ -359,6 +373,9 @@ <h2 id="rTitle"></h2>
 function loadQuestion() {
   multiSelected = new Set();
   clearInterval(timerInterval);
+  clearTimeout(autoTimer); autoTimer = null;
+  document.getElementById('stopBar').style.display = 'none';
+  document.getElementById('stopBtn').onclick = stopAutoAdvance;
   timeLeft = 30;
 
   const q = QUIZ_Q[currentIdx];
@@ -478,13 +495,38 @@ <h2 id="rTitle"></h2>
 
   document.getElementById('scoreTop').textContent = score;
 
-  setTimeout(()=>{
+  // Show pause/next bar and start auto-advance timer
+  const stopBar = document.getElementById('stopBar');
+  const stopBtn = document.getElementById('stopBtn');
+  stopBar.style.display = 'block';
+  stopBtn.className = 'stop-btn';
+  stopBtn.textContent = '⏸ Pause · Next →';
+
+  autoTimer = setTimeout(() => {
+    stopBar.style.display = 'none';
     currentIdx++;
     if (currentIdx < QUIZ_Q.length) loadQuestion();
     else showResult();
   }, 2500);
 }
 
+let autoTimer = null;
+
+function stopAutoAdvance() {
+  clearTimeout(autoTimer);
+  autoTimer = null;
+  const stopBtn = document.getElementById('stopBtn');
+  stopBtn.className = 'stop-btn next-mode';
+  stopBtn.textContent = '▶ Next question →';
+  stopBtn.onclick = () => {
+    document.getElementById('stopBar').style.display = 'none';
+    currentIdx++;
+    if (currentIdx < QUIZ_Q.length) loadQuestion();
+    else showResult();
+    stopBtn.onclick = stopAutoAdvance; // reset for next round
+  };
+}
+
 // ── Result ────────────────────────────────────────────────────────────────
 function showResult() {
   show('result');