quiz feature and button

Author: strejoarciles

templates/boneset.html

@@ -28,6 +28,7 @@
                 <span id="text-button-Home" role="button" tabindex="0">Home</span>
                 <span id="text-button-Tutor" role="button" tabindex="0">Tutor</span>
                 <span id="text-button-Study" role="button" tabindex="0">Study</span>
+                <span id="start-quiz-btn" role="button" tabindex="0">Quiz Me! 🎓</span>
                 <div id="help-button-container">
                     <span id="text-button-Help" role="button" tabindex="0" onclick="document.getElementById('new-help-modal').style.display='flex';" style="pointer-events: auto !important; z-index: 9999 !important; cursor: pointer;">Help</span>
                 </div>
@@ -153,6 +154,48 @@ <h2>Visual Reference</h2>
         </div>
     </main>
 
+    <!-- Quiz Modal -->
+    <div id="quiz-modal" role="dialog" aria-labelledby="quiz-title" aria-modal="true">
+        <div id="quiz-container">
+            <!-- Quiz Header -->
+            <div class="quiz-header">
+                <div class="quiz-info">
+                    <div id="quiz-progress">Question 1 of 10</div>
+                    <div id="quiz-score">Score: 0/10</div>
+                </div>
+                <button id="exit-quiz-btn" aria-label="Exit quiz">Exit Quiz</button>
+            </div>
+            
+            <!-- Quiz Content -->
+            <div class="quiz-content">
+                <h2 id="quiz-question-text">What bone is this?</h2>
+                
+                <!-- Bone Image Display -->
+                <div id="quiz-bone-image">
+                    <div class="quiz-image-placeholder">
+                        <p>🦴</p>
+                        <p>Loading bone image...</p>
+                    </div>
+                </div>
+                
+                <!-- Answer Choices -->
+                <div id="quiz-choices">
+                    <!-- Choices will be dynamically inserted here -->
+                </div>
+                
+                <!-- Feedback -->
+                <div id="quiz-feedback" class="quiz-feedback">
+                    <!-- Feedback will be dynamically inserted here -->
+                </div>
+            </div>
+            
+            <!-- Quiz Actions -->
+            <div class="quiz-actions">
+                <button id="next-question-btn" style="display: none;">Next Question</button>
+            </div>
+        </div>
+    </div>
+    
     <!-- NEW Help Modal - Clean Version -->
     <div id="new-help-modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 99999; align-items: center; justify-content: center;">
         <div style="background: white; padding: 40px; border-radius: 16px; max-width: 650px; margin: 20px; border: 3px solid #FFD700; box-shadow: 0 25px 60px rgba(0,0,0,0.4);">
@@ -184,6 +227,10 @@ <h2 style="color: #003366; text-align: center; margin-bottom: 25px; border-botto
                             <span style="position: absolute; left: 0; color: #0369a1; font-weight: bold;">•</span>
                             Use Previous and Next navigation buttons to browse through related items
                         </li>
+                        <li style="margin: 8px 0; position: relative; padding-left: 25px;">
+                            <span style="position: absolute; left: 0; color: #0369a1; font-weight: bold;">•</span>
+                            Click <strong>"Quiz Me!"</strong> to test your knowledge with interactive quizzes
+                        </li>
                     </ul>
 
                     <p style="margin: 20px 0 0 0; font-style: italic; color: #4a5568; font-size: 1rem;">Press the ESC key to close this help window at any time.</p>
@@ -208,6 +255,13 @@ <h2 style="color: #003366; text-align: center; margin-bottom: 25px; border-botto
                 if (modal) {
                     modal.style.display = 'none';
                 }
+                
+                // Also close quiz modal if open
+                const quizModal = document.getElementById('quiz-modal');
+                if (quizModal && quizModal.style.display === 'flex') {
+                    // Trigger exit quiz button click
+                    document.getElementById('exit-quiz-btn')?.click();
+                }
             }
         });
     </script>

templates/js/main.js

@@ -5,6 +5,7 @@ import { setupNavigation, setBoneAndSubbones, disableButtons } from "./navigatio
 import { loadDescription } from "./description.js";
 import { displayBoneData, clearViewer } from "./viewer.js";
 import { initializeSearch } from "./search.js";
+import quizManager from "./quiz.js";
 
 let combinedData = { bonesets: [], bones: [], subbones: [] };
 
@@ -21,13 +22,26 @@ document.addEventListener("DOMContentLoaded", async () => {
     // 2. Sidebar behavior
     initializeSidebar();
 
-
-
-    // 4. Fetch data and populate dropdowns
+    // 3. Fetch data FIRST (moved from step 4)
     combinedData = await fetchCombinedData();
     populateBonesetDropdown(combinedData.bonesets);
     setupDropdownListeners(combinedData);
 
+    // 4. Initialize quiz system AFTER data is loaded
+    try {
+        // Manually set the bones data in quizManager
+        quizManager.allBones = combinedData.bones || [];
+        
+        if (quizManager.allBones.length >= 3) {
+            quizManager.setupEventListeners();
+            console.log("Quiz system initialized successfully with", quizManager.allBones.length, "bones");
+        } else {
+            console.warn("Not enough bones for quiz:", quizManager.allBones.length);
+        }
+    } catch (error) {
+        console.error("Error initializing quiz:", error);
+    }
+
     // Keep bone and subbone selects disabled until the user explicitly selects a boneset
     const boneSelectEl = document.getElementById("bone-select");
     const subboneSelectEl = document.getElementById("subbone-select");