Spaces:

awacke1
/

SamsTopTenQuiz

Running

App Files Files Community

awacke1 commited on 6 days ago

Commit

6068085

verified ·

1 Parent(s): d434610

Update index.html

Browse files

Files changed (1) hide show

index.html +446 -184

index.html CHANGED Viewed

@@ -3,128 +3,112 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Sam's Birthday - Favorites With Plinko Game Card 📝</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
         body {
             font-family: 'Inter', sans-serif;
-            background-color: #f0f4f8; /* Light blue-gray background */
-        }
-        .game-title {
-            color: #3730a3; /* Indigo-800 */
         }
         .question-card {
             background-color: #ffffff;
-            border-radius: 12px; /* Slightly less rounded */
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* Tailwind shadow-md */
-            page-break-inside: avoid; /* Avoid breaking cards across printed pages */
-        }
-        .question-text-strong {
-            color: #4338ca; /* Indigo-700 */
         }
-        .answer-label {
-            color: #3f3f46; /* Zinc-700 */
-        }
-        input[type="text"].answer-input {
-            border: 1px solid #d1d5db; /* Gray-300 */
-            padding: 0.5rem 0.75rem; /* p-2 px-3 */
-            border-radius: 0.375rem; /* rounded-md */
             width: 100%;
             box-sizing: border-box;
         }
-        input[type="text"].answer-input:focus {
             outline: none;
-            border-color: #4f46e5; /* Indigo-600 */
             box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.3);
         }
         .correct-answer-section {
-            background-color: #f0fdf4; /* Green-50 */
-            border-left: 4px solid #22c55e; /* Green-500 */
             padding: 0.5rem 0.75rem;
-            border-radius: 0.25rem; /* rounded-sm */
-        }
-        .correct-answer-text {
-            color: #15803d; /* Green-700 */
         }
-        .btn-toggle-answers {
-            background-color: #4f46e5; /* Indigo-600 */
             color: white;
             transition: background-color 0.3s ease;
         }
-        .btn-toggle-answers:hover {
-            background-color: #4338ca; /* Indigo-700 */
         }
-        .bonus-prompt-text {
-            color: #6d28d9; /* Violet-700 */
         }
-        /* Initially hide answer sections */
-        .correct-answer-container.hidden-answers .correct-answer-section {
-            display: none;
         }
-        /* Print-specific styles */
         @media print {
-            body {
-                background-color: #ffffff; /* White background for printing */
-                -webkit-print-color-adjust: exact; /* Ensures colors print in Chrome/Safari */
-                print-color-adjust: exact; /* Standard */
-            }
-            .btn-toggle-answers, .print-hide {
-                display: none !important; /* Hide buttons and other non-print elements */
-            }
-            .question-card {
-                box-shadow: none; /* Remove shadow for printing */
-                border: 1px solid #e5e7eb; /* Light border for cards */
-                margin-bottom: 1rem; /* Space between cards on print */
-            }
-            .correct-answer-section {
-                display: block !important; /* Always show answers when printing */
-                background-color: #f9fafb !important; /* Lighter bg for print */
-                border-left: 2px solid #6b7280 !important; /* Gray border for print */
-                padding: 0.25rem 0.5rem;
-            }
-            .correct-answer-text {
-                color: #1f2937 !important; /* Darker text for print */
-            }
-            input[type="text"].answer-input {
-                border-bottom: 1px solid #9ca3af; /* Underline style for print */
-                border-top: none;
-                border-left: none;
-                border-right: none;
-                border-radius: 0;
-                padding-left: 0;
-                padding-right: 0;
-            }
-            input[type="text"].answer-input::placeholder {
-                color: transparent; /* Hide placeholder on print */
-            }
-            .cards-container-grid {
-                grid-template-columns: repeat(1, minmax(0, 1fr)) !important; /* Single column for print */
-            }
-            .page-container {
-                padding: 0.5in !important; /* Adjust print margins */
-                max-width: 100% !important;
-            }
-            .game-title, .footer-text {
-                text-align: center;
-            }
         }
     </style>
 </head>
 <body class="p-4 sm:p-6 md:p-8">
     <div id="pageContainer" class="page-container max-w-5xl mx-auto">
-        <header class="text-center mb-8">
-            <h1 class="game-title text-3xl sm:text-4xl font-bold">Sam's Birthday - Favorites With Plinko Game Card 📝</h1>
-            <p class="text-gray-600 mt-2">How well do you know Sam? Fill in the answers below!</p>
         </header>
-        <div class="text-center mb-8 print-hide">
-            <button id="toggleAnswersBtn" class="btn-toggle-answers py-2 px-6 rounded-lg font-semibold text-lg">
                 Reveal Answers
             </button>
         </div>
         <div id="cardsContainer" class="correct-answer-container hidden-answers cards-container-grid grid grid-cols-1 md:grid-cols-2 gap-6">
@@ -136,142 +120,420 @@
         </footer>
     </div>
-    <script>
         const gameData = [
-            { question: "Name Sam's all time favorite musical group?  Hint: Their debut album was in 1986.", answer: "Beastie Boys" },
-            { question: "What is Sam's favorite game?  Hint: She grew up playing this game with her Grandma.", answer: "Yahtzee" },
             {
                 question: "In her 20's, Sam lived briefly in which two states?",
-                answer: ["California", "Texas"], // Array of parts for multi-input
-                answerLabels: ["First State:", "Second State:"] // Labels for each input
             },
-            { question: "Name Sam's longest Employer.  Hint: Close to 20 years employment.", answer: "MSU", alternatives: ["Metropolitan State University"] },
             {
                 question: "Sam holds a BA degree in _____, and Masters degree in _____?",
-                answer: ["Political Science", "Public Administration"], // Array of parts for multi-input
-                answerLabels: ["BA Degree:", "Masters Degree:"] // Labels for each input
             },
-            { question: "What is Sam's biggest fear?", answer: "Snakes" },
-            { question: "Name the first National Park that Sam and Aaron travelled to.  Hint: It was during COVID.", answer: "Death Valley" },
-            { question: "Sam and her BFF have matching tattoos which is the title of a song. What is the Paul McCartney song?", answer: "Let It Be" },
-            { question: "What animal would Sam like to have as an indoor pet?", answer: "Raccoon" },
             {
                 question: "If Sam won $1000 shopping spree at the store of her choice, which store would it be?",
-                answer: "Menards", // Main answer for bonus question
-                bonusPrompt: "Bonus: Why would she choose this store?",
-                bonusAnswer: "Rebate"
             }
         ];
         const cardsContainerEl = document.getElementById('cardsContainer');
-        const toggleAnswersBtn = document.getElementById('toggleAnswersBtn');
-        function renderCards() {
-            cardsContainerEl.innerHTML = ''; // Clear existing cards
             gameData.forEach((item, index) => {
                 const card = document.createElement('div');
                 card.className = 'question-card p-5 sm:p-6 flex flex-col';
-                let cardInnerHTML = '';
-                // Condition for multi-part non-bonus questions (e.g., Q3, Q5)
-                if (Array.isArray(item.answer) && item.answerLabels && !item.bonusPrompt) {
-                    cardInnerHTML = `
-                        <div class="flex-grow">
-                            <h3 class="text-lg font-semibold question-text-strong mb-2">
-                                <span class="question-number">${index + 1}.</span>
-                                ${item.question}
-                            </h3>
-                            <div class="mb-3 mt-3">
-                                <label for="answer-part1-${index}" class="block text-sm font-medium answer-label mb-1">${item.answerLabels[0]}</label>
-                                <input type="text" id="answer-part1-${index}" name="answer-part1-${index}" class="answer-input w-full" placeholder="${item.answerLabels[0].replace(':', '...')}">
-                            </div>
-                            <div class="mb-3">
-                                <label for="answer-part2-${index}" class="block text-sm font-medium answer-label mb-1">${item.answerLabels[1]}</label>
-                                <input type="text" id="answer-part2-${index}" name="answer-part2-${index}" class="answer-input w-full" placeholder="${item.answerLabels[1].replace(':', '...')}">
                             </div>
                         </div>
-                        <div class="mt-auto">
-                            <div class="correct-answer-section mb-2">
-                                <p class="text-xs font-medium text-gray-600">Correct Answer (${item.answerLabels[0].replace(':', '')}):</p>
-                                <p class="correct-answer-text font-semibold">${item.answer[0]}</p>
-                            </div>
-                            <div class="correct-answer-section">
-                                <p class="text-xs font-medium text-gray-600">Correct Answer (${item.answerLabels[1].replace(':', '')}):</p>
-                                <p class="correct-answer-text font-semibold">${item.answer[1]}</p>
                             </div>
                         </div>
-                    `;
-                }
-                // Condition for bonus questions (e.g., Q10)
-                else if (item.bonusPrompt) {
-                    // 'item.answer' is the main answer for the bonus question
-                    const mainAnswerForBonusDisplay = item.answer;
-                    cardInnerHTML = `
-                        <div class="flex-grow">
-                            <h3 class="text-lg font-semibold question-text-strong mb-2">
-                                <span class="question-number">${index + 1}.</span>
-                                ${item.question}
-                            </h3>
-                            <div class="mb-3 mt-3">
-                                <label for="answer-main-${index}" class="block text-sm font-medium answer-label mb-1">Your Answer (Main):</label>
-                                <input type="text" id="answer-main-${index}" name="answer-main-${index}" class="answer-input w-full" placeholder="Main answer...">
-                            </div>
-                            <p class="text-sm font-semibold bonus-prompt-text mt-4 mb-1">${item.bonusPrompt}</p>
-                            <div class="mb-3">
-                                <label for="answer-bonus-${index}" class="block text-sm font-medium answer-label mb-1">Your Answer (Bonus):</label>
-                                <input type="text" id="answer-bonus-${index}" name="answer-bonus-${index}" class="answer-input w-full" placeholder="Bonus answer...">
                             </div>
                         </div>
-                        <div class="mt-auto">
-                            <div class="correct-answer-section mb-2">
-                                <p class="text-xs font-medium text-gray-600">Correct Answer (Main):</p>
-                                <p class="correct-answer-text font-semibold">${mainAnswerForBonusDisplay}</p>
-                            </div>
-                            <div class="correct-answer-section">
-                                <p class="text-xs font-medium text-gray-600">Correct Answer (Bonus):</p>
-                                <p class="correct-answer-text font-semibold">${item.bonusAnswer}</p>
                             </div>
                         </div>
-                    `;
-                }
-                // Default for single-answer questions
-                else {
-                    const singleAnswerDisplay = item.answer; // Assuming item.answer is a string here
-                    cardInnerHTML = `
-                        <div class="flex-grow">
-                            <h3 class="text-lg font-semibold question-text-strong mb-2">
-                                <span class="question-number">${index + 1}.</span>
-                                ${item.question}
-                            </h3>
-                            <div class="mb-3 mt-3">
-                                <label for="answer-${index}" class="block text-sm font-medium answer-label mb-1">Your Answer:</label>
-                                <input type="text" id="answer-${index}" name="answer-${index}" class="answer-input w-full" placeholder="Type your answer here...">
                             </div>
-                        </div>
-                        <div class="correct-answer-section mt-auto">
                             <p class="text-xs font-medium text-gray-600">Correct Answer:</p>
-                            <p class="correct-answer-text font-semibold">${singleAnswerDisplay}</p>
-                        </div>
-                    `;
                 }
-                card.innerHTML = cardInnerHTML;
                 cardsContainerEl.appendChild(card);
             });
         }
-        toggleAnswersBtn.addEventListener('click', () => {
-            cardsContainerEl.classList.toggle('hidden-answers');
-            if (cardsContainerEl.classList.contains('hidden-answers')) {
-                toggleAnswersBtn.textContent = 'Reveal Answers';
             } else {
-                toggleAnswersBtn.textContent = 'Hide Answers';
             }
         });
-        // Initial render of cards
-        renderCards();
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sam's Birthday - Interactive Quiz 📝</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
     <style>
         body {
             font-family: 'Inter', sans-serif;
+            background-color: #f0f4f8;
         }
+        .game-title { color: #3730a3; }
         .question-card {
             background-color: #ffffff;
+            border-radius: 12px;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            page-break-inside: avoid;
         }
+        .question-text-strong { color: #4338ca; }
+        .answer-label { color: #3f3f46; }
+        input[type="text"].answer-input, input[type="text"].name-input {
+            border: 1px solid #d1d5db;
+            padding: 0.5rem 0.75rem;
+            border-radius: 0.375rem;
             width: 100%;
             box-sizing: border-box;
         }
+        input[type="text"].answer-input:focus, input[type="text"].name-input:focus {
             outline: none;
+            border-color: #4f46e5;
             box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.3);
         }
         .correct-answer-section {
+            background-color: #f0fdf4;
+            border-left: 4px solid #22c55e;
             padding: 0.5rem 0.75rem;
+            border-radius: 0.25rem;
+            margin-top: 0.5rem; /* Space between answer and its key */
         }
+        .correct-answer-text { color: #15803d; }
+        .btn-action {
+            background-color: #4f46e5;
             color: white;
             transition: background-color 0.3s ease;
         }
+        .btn-action:hover { background-color: #4338ca; }
+        .btn-save {
+            background-color: #10b981; /* Emerald-500 */
         }
+        .btn-save:hover {
+            background-color: #059669; /* Emerald-600 */
         }
+        .feedback-emoji {
+            font-size: 1.25rem; /* Make emojis a bit bigger */
+            margin-left: 0.5rem;
+        }
+        .score-display {
+            background-color: #e0e7ff; /* Indigo-100 */
+            color: #3730a3; /* Indigo-800 */
+            padding: 0.75rem 1rem;
+            border-radius: 8px;
+            font-weight: 600;
+            text-align: center;
         }
+        /* Initially hide answer sections and feedback emojis */
+        .correct-answer-container.hidden-answers .correct-answer-section { display: none; }
+        .feedback-emoji { display: none; }
+        .correct-answer-container.checked-answers .feedback-emoji { display: inline-block; }
         @media print {
+            body { background-color: #ffffff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
+            .btn-action, .btn-save, .print-hide, #nameInputSection, #scoreDisplaySection { display: none !important; }
+            .question-card { box-shadow: none; border: 1px solid #e5e7eb; margin-bottom: 1rem; }
+            .correct-answer-section { display: block !important; background-color: #f9fafb !important; border-left: 2px solid #6b7280 !important; padding: 0.25rem 0.5rem; }
+            .correct-answer-text { color: #1f2937 !important; }
+            input[type="text"].answer-input { border-bottom: 1px solid #9ca3af; border-top: none; border-left: none; border-right: none; border-radius: 0; padding-left: 0; padding-right: 0; }
+            input[type="text"].answer-input::placeholder { color: transparent; }
+            .cards-container-grid { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
+            .page-container { padding: 0.5in !important; max-width: 100% !important; }
+            .game-title, .footer-text { text-align: center; }
+            .feedback-emoji { display: inline-block !important; } /* Show emojis on print if answers are checked */
         }
     </style>
 </head>
 <body class="p-4 sm:p-6 md:p-8">
     <div id="pageContainer" class="page-container max-w-5xl mx-auto">
+        <header class="text-center mb-6">
+            <h1 class="game-title text-3xl sm:text-4xl font-bold">Sam's Birthday - Interactive Quiz 📝</h1>
         </header>
+        <div id="nameInputSection" class="mb-6 max-w-md mx-auto">
+            <label for="playerNameInput" class="block text-sm font-medium text-gray-700 mb-1">Player Name:</label>
+            <input type="text" id="playerNameInput" class="name-input" placeholder="Enter your name (e.g., Aaron)">
+        </div>
+        <div id="scoreDisplaySection" class="mb-6 text-center" style="display: none;">
+            <p id="scoreText" class="score-display">Score: 0 / 13 (0%)</p>
+        </div>
+        <div class="text-center mb-8 space-x-4 print-hide">
+            <button id="checkAnswersBtn" class="btn-action py-2 px-6 rounded-lg font-semibold text-lg">
                 Reveal Answers
             </button>
+            <button id="saveProgressBtn" class="btn-action btn-save py-2 px-6 rounded-lg font-semibold text-lg">
+                Save Progress
+            </button>
         </div>
         <div id="cardsContainer" class="correct-answer-container hidden-answers cards-container-grid grid grid-cols-1 md:grid-cols-2 gap-6">
         </footer>
     </div>
+    <script type="module">
+        // Firebase Imports
+        import { initializeApp } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-app.js";
+        import { getAuth, signInAnonymously, onAuthStateChanged, signInWithCustomToken } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-auth.js";
+        import { getFirestore, doc, setDoc, getDoc, serverTimestamp, updateDoc } from "https://www.gstatic.com/firebasejs/11.6.1/firebase-firestore.js";
+        // IMPORTANT: Replace with your actual Firebase config
+        const firebaseConfig = typeof __firebase_config !== 'undefined' ? JSON.parse(__firebase_config) : {
+            apiKey: "YOUR_API_KEY",
+            authDomain: "YOUR_AUTH_DOMAIN",
+            projectId: "YOUR_PROJECT_ID",
+            storageBucket: "YOUR_STORAGE_BUCKET",
+            messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
+            appId: "YOUR_APP_ID"
+        };
+        const appId = typeof __app_id !== 'undefined' ? __app_id : 'sams-birthday-quiz-default';
+        // Initialize Firebase
+        const app = initializeApp(firebaseConfig);
+        const auth = getAuth(app);
+        const db = getFirestore(app);
+        let userId = null;
+        let gameDocRef = null;
+        let hasUserTyped = false; // Track if user has typed anything
         const gameData = [
+            { question: "Name Sam's all time favorite musical group?  Hint: Their debut album was in 1986.", answer: "Beastie Boys", id: "q1" },
+            { question: "What is Sam's favorite game?  Hint: She grew up playing this game with her Grandma.", answer: "Yahtzee", id: "q2" },
             {
                 question: "In her 20's, Sam lived briefly in which two states?",
+                answer: ["California", "Texas"], answerLabels: ["First State:", "Second State:"], id: "q3", parts: 2
             },
+            { question: "Name Sam's longest Employer.  Hint: Close to 20 years employment.", answer: "MSU", alternatives: ["Metropolitan State University"], id: "q4" },
             {
                 question: "Sam holds a BA degree in _____, and Masters degree in _____?",
+                answer: ["Political Science", "Public Administration"], answerLabels: ["BA Degree:", "Masters Degree:"], id: "q5", parts: 2
             },
+            { question: "What is Sam's biggest fear?", answer: "Snakes", id: "q6" },
+            { question: "Name the first National Park that Sam and Aaron travelled to.  Hint: It was during COVID.", answer: "Death Valley", alternatives: ["Death Valley National Park"], id: "q7" },
+            { question: "Sam and her BFF have matching tattoos which is the title of a song. What is the Paul McCartney song?", answer: "Let It Be", id: "q8" },
+            { question: "What animal would Sam like to have as an indoor pet?", answer: "Raccoon", id: "q9" },
             {
                 question: "If Sam won $1000 shopping spree at the store of her choice, which store would it be?",
+                answer: "Menards", bonusPrompt: "Bonus: Why would she choose this store?", bonusAnswer: "Rebate", id: "q10", parts: 1 // Main answer is 1 part, bonus is separate
             }
         ];
+        const TOTAL_POSSIBLE_POINTS = 13; // 9 single + 2 for q3 + 2 for q5 = 13 (bonus is one of these)
         const cardsContainerEl = document.getElementById('cardsContainer');
+        const checkAnswersBtn = document.getElementById('checkAnswersBtn');
+        const saveProgressBtn = document.getElementById('saveProgressBtn');
+        const playerNameInputEl = document.getElementById('playerNameInput');
+        const scoreTextEl = document.getElementById('scoreText');
+        const scoreDisplaySectionEl = document.getElementById('scoreDisplaySection');
+        function normalizeAnswer(answer) {
+            return answer.trim().toLowerCase();
+        }
+        function renderCards(savedAnswers = {}, savedFeedback = {}) {
+            cardsContainerEl.innerHTML = '';
+            hasUserTyped = Object.keys(savedAnswers).length > 0 || !!playerNameInputEl.value;
             gameData.forEach((item, index) => {
                 const card = document.createElement('div');
                 card.className = 'question-card p-5 sm:p-6 flex flex-col';
+                let inputFieldsHTML = '';
+                let answerSectionsHTML = '';
+                if (item.parts === 2 && item.answerLabels) { // Multi-part questions (Q3, Q5)
+                    inputFieldsHTML = `
+                        <div class="mb-3 mt-3">
+                            <label for="${item.id}-part1" class="block text-sm font-medium answer-label mb-1">${item.answerLabels[0]}</label>
+                            <div class="flex items-center">
+                                <input type="text" id="${item.id}-part1" data-question-id="${item.id}" data-part-index="0" class="answer-input w-full" placeholder="${item.answerLabels[0].replace(':', '...')}" value="${savedAnswers[`${item.id}-part1`] || ''}">
+                                <span id="feedback-${item.id}-part1" class="feedback-emoji">${savedFeedback[`${item.id}-part1`] || ''}</span>
                             </div>
                         </div>
+                        <div class="mb-3">
+                            <label for="${item.id}-part2" class="block text-sm font-medium answer-label mb-1">${item.answerLabels[1]}</label>
+                            <div class="flex items-center">
+                                <input type="text" id="${item.id}-part2" data-question-id="${item.id}" data-part-index="1" class="answer-input w-full" placeholder="${item.answerLabels[1].replace(':', '...')}" value="${savedAnswers[`${item.id}-part2`] || ''}">
+                                <span id="feedback-${item.id}-part2" class="feedback-emoji">${savedFeedback[`${item.id}-part2`] || ''}</span>
                             </div>
+                        </div>`;
+                    answerSectionsHTML = `
+                        <div class="correct-answer-section mb-2">
+                            <p class="text-xs font-medium text-gray-600">Correct Answer (${item.answerLabels[0].replace(':', '')}):</p>
+                            <p class="correct-answer-text font-semibold">${item.answer[0]}</p>
                         </div>
+                        <div class="correct-answer-section">
+                            <p class="text-xs font-medium text-gray-600">Correct Answer (${item.answerLabels[1].replace(':', '')}):</p>
+                            <p class="correct-answer-text font-semibold">${item.answer[1]}</p>
+                        </div>`;
+                } else if (item.bonusPrompt) { // Bonus question (Q10)
+                    inputFieldsHTML = `
+                        <div class="mb-3 mt-3">
+                            <label for="${item.id}-main" class="block text-sm font-medium answer-label mb-1">Your Answer (Main):</label>
+                            <div class="flex items-center">
+                                <input type="text" id="${item.id}-main" data-question-id="${item.id}" data-part-type="main" class="answer-input w-full" placeholder="Main answer..." value="${savedAnswers[`${item.id}-main`] || ''}">
+                                <span id="feedback-${item.id}-main" class="feedback-emoji">${savedFeedback[`${item.id}-main`] || ''}</span>
                             </div>
                         </div>
+                        <p class="text-sm font-semibold bonus-prompt-text mt-4 mb-1">${item.bonusPrompt}</p>
+                        <div class="mb-3">
+                            <label for="${item.id}-bonus" class="block text-sm font-medium answer-label mb-1">Your Answer (Bonus):</label>
+                            <div class="flex items-center">
+                                <input type="text" id="${item.id}-bonus" data-question-id="${item.id}" data-part-type="bonus" class="answer-input w-full" placeholder="Bonus answer..." value="${savedAnswers[`${item.id}-bonus`] || ''}">
+                                <span id="feedback-${item.id}-bonus" class="feedback-emoji">${savedFeedback[`${item.id}-bonus`] || ''}</span>
                             </div>
+                        </div>`;
+                    answerSectionsHTML = `
+                        <div class="correct-answer-section mb-2">
+                            <p class="text-xs font-medium text-gray-600">Correct Answer (Main):</p>
+                            <p class="correct-answer-text font-semibold">${item.answer}</p>
                         </div>
+                        <div class="correct-answer-section">
+                            <p class="text-xs font-medium text-gray-600">Correct Answer (Bonus):</p>
+                            <p class="correct-answer-text font-semibold">${item.bonusAnswer}</p>
+                        </div>`;
+                } else { // Single-part questions
+                    inputFieldsHTML = `
+                        <div class="mb-3 mt-3">
+                            <label for="${item.id}" class="block text-sm font-medium answer-label mb-1">Your Answer:</label>
+                            <div class="flex items-center">
+                                <input type="text" id="${item.id}" data-question-id="${item.id}" class="answer-input w-full" placeholder="Type your answer here..." value="${savedAnswers[item.id] || ''}">
+                                <span id="feedback-${item.id}" class="feedback-emoji">${savedFeedback[item.id] || ''}</span>
                             </div>
+                        </div>`;
+                    answerSectionsHTML = `
+                        <div class="correct-answer-section">
                             <p class="text-xs font-medium text-gray-600">Correct Answer:</p>
+                            <p class="correct-answer-text font-semibold">${item.answer}</p>
+                        </div>`;
                 }
+                card.innerHTML = `
+                    <div class="flex-grow">
+                        <h3 class="text-lg font-semibold question-text-strong mb-2">
+                            <span class="question-number">${index + 1}.</span>
+                            ${item.question}
+                        </h3>
+                        ${inputFieldsHTML}
+                    </div>
+                    <div class="mt-auto answer-key-container">
+                        ${answerSectionsHTML}
+                    </div>`;
                 cardsContainerEl.appendChild(card);
             });
+            updateButtonStates();
+            attachInputListeners(); // Attach listeners after rendering
+            if (Object.keys(savedFeedback).length > 0) { // If feedback exists, means answers were checked
+                cardsContainerEl.classList.remove('hidden-answers');
+                cardsContainerEl.classList.add('checked-answers');
+                checkAnswersBtn.textContent = 'Answers Checked';
+            } else {
+                 cardsContainerEl.classList.add('hidden-answers');
+                 cardsContainerEl.classList.remove('checked-answers');
+            }
+        }
+        function attachInputListeners() {
+            document.querySelectorAll('.answer-input, #playerNameInput').forEach(input => {
+                input.addEventListener('input', () => {
+                    hasUserTyped = true;
+                    updateButtonStates();
+                });
+            });
         }
+        function updateButtonStates() {
+            if (hasUserTyped || playerNameInputEl.value.trim() !== "") {
+                checkAnswersBtn.textContent = 'Check Answers with Key';
             } else {
+                checkAnswersBtn.textContent = 'Reveal Answers';
+            }
+             // If answers are already checked, reflect that
+            if (cardsContainerEl.classList.contains('checked-answers') && !cardsContainerEl.classList.contains('hidden-answers')) {
+                 checkAnswersBtn.textContent = 'Answers Checked';
+            }
+        }
+        function collectAnswers() {
+            const userAnswers = {};
+            document.querySelectorAll('.answer-input').forEach(input => {
+                const questionId = input.dataset.questionId;
+                if (input.dataset.partIndex) { // Multi-part (Q3, Q5)
+                    userAnswers[`${questionId}-part${parseInt(input.dataset.partIndex) + 1}`] = input.value;
+                } else if (input.dataset.partType) { // Bonus (Q10)
+                     userAnswers[`${questionId}-${input.dataset.partType}`] = input.value;
+                } else { // Single part
+                    userAnswers[questionId] = input.value;
+                }
+            });
+            return userAnswers;
+        }
+        function handleCheckAnswers() {
+            cardsContainerEl.classList.remove('hidden-answers');
+            cardsContainerEl.classList.add('checked-answers'); // To show emojis
+            let currentScore = 0;
+            const userAnswers = collectAnswers();
+            const feedbackEmojis = {};
+            gameData.forEach(item => {
+                if (item.parts === 2) { // Q3, Q5
+                    for (let i = 0; i < 2; i++) {
+                        const userAnswer = normalizeAnswer(userAnswers[`${item.id}-part${i + 1}`] || '');
+                        const correctAnswer = normalizeAnswer(item.answer[i]);
+                        if (userAnswer === correctAnswer) {
+                            currentScore++;
+                            feedbackEmojis[`${item.id}-part${i+1}`] = '✅';
+                        } else {
+                            feedbackEmojis[`${item.id}-part${i+1}`] = '❌';
+                        }
+                        document.getElementById(`feedback-${item.id}-part${i+1}`).textContent = feedbackEmojis[`${item.id}-part${i+1}`];
+                    }
+                } else if (item.bonusPrompt) { // Q10
+                    const mainUserAnswer = normalizeAnswer(userAnswers[`${item.id}-main`] || '');
+                    const mainCorrectAnswer = normalizeAnswer(item.answer);
+                    let mainCorrect = false;
+                    if (mainUserAnswer === mainCorrectAnswer || (item.alternatives && item.alternatives.map(normalizeAnswer).includes(mainUserAnswer))) {
+                        currentScore++;
+                        feedbackEmojis[`${item.id}-main`] = '✅';
+                        mainCorrect = true;
+                    } else {
+                        feedbackEmojis[`${item.id}-main`] = '❌';
+                    }
+                    document.getElementById(`feedback-${item.id}-main`).textContent = feedbackEmojis[`${item.id}-main`];
+                    // Only score bonus if main was correct (optional rule, implementing as strict for now)
+                    // if (mainCorrect) {
+                        const bonusUserAnswer = normalizeAnswer(userAnswers[`${item.id}-bonus`] || '');
+                        const bonusCorrectAnswer = normalizeAnswer(item.bonusAnswer);
+                        if (bonusUserAnswer === bonusCorrectAnswer) {
+                            currentScore++; //This makes it 13 points total
+                            feedbackEmojis[`${item.id}-bonus`] = '✅';
+                        } else {
+                            feedbackEmojis[`${item.id}-bonus`] = '❌';
+                        }
+                    // } else {
+                    //     feedbackEmojis[`${item.id}-bonus`] = '➖'; // Indicate bonus not attempted or main was wrong
+                    // }
+                    document.getElementById(`feedback-${item.id}-bonus`).textContent = feedbackEmojis[`${item.id}-bonus`];
+                } else { // Single answer questions
+                    const userAnswer = normalizeAnswer(userAnswers[item.id] || '');
+                    const correctAnswer = normalizeAnswer(item.answer);
+                    if (userAnswer === correctAnswer || (item.alternatives && item.alternatives.map(normalizeAnswer).includes(userAnswer))) {
+                        currentScore++;
+                        feedbackEmojis[item.id] = '✅';
+                    } else {
+                        feedbackEmojis[item.id] = '❌';
+                    }
+                    document.getElementById(`feedback-${item.id}`).textContent = feedbackEmojis[item.id];
+                }
+            });
+            const percentage = TOTAL_POSSIBLE_POINTS > 0 ? Math.round((currentScore / TOTAL_POSSIBLE_POINTS) * 100) : 0;
+            scoreTextEl.textContent = `Score: ${currentScore} / ${TOTAL_POSSIBLE_POINTS} (${percentage}%)`;
+            scoreDisplaySectionEl.style.display = 'block';
+            checkAnswersBtn.textContent = 'Answers Checked';
+            hasUserTyped = true; // Ensure button state remains "checked"
+            saveGameState(true, currentScore, percentage, feedbackEmojis); // Save with checked state
+        }
+        async function saveGameState(isChecked = false, score = 0, percentage = 0, feedback = {}) {
+            if (!userId || !gameDocRef) {
+                console.warn("User not authenticated or gameDocRef not set. Cannot save yet. Will retry on auth.");
+                return;
+            }
+            const playerName = playerNameInputEl.value.trim() || "Anonymous Player";
+            const answers = collectAnswers();
+            const gameState = {
+                playerName: playerName,
+                answers: answers,
+                lastUpdated: serverTimestamp(),
+                isChecked: isChecked, // New field to indicate if answers were checked
+                score: isChecked ? score : null,
+                percentage: isChecked ? percentage : null,
+                feedback: isChecked ? feedback : {}
+            };
+            try {
+                await setDoc(gameDocRef, gameState, { merge: true });
+                console.log("Game state saved for player:", playerName);
+            } catch (error) {
+                console.error("Error saving game state: ", error);
+            }
+        }
+        async function loadGameState() {
+            if (!userId) {
+                 console.warn("User ID not available for loading game state.");
+                 renderCards(); // Render empty cards if no user ID
+                 updateButtonStates();
+                 return;
+            }
+            // Corrected path: collection "samsFavoritesGameData", document "userGameState"
+            gameDocRef = doc(db, "artifacts", appId, "users", userId, "samsFavoritesGameData", "userGameState");
+            console.log("Attempting to load game state from:", gameDocRef.path);
+            try {
+                const docSnap = await getDoc(gameDocRef);
+                if (docSnap.exists()) {
+                    const data = docSnap.data();
+                    playerNameInputEl.value = data.playerName || 'Aaron'; // Default to Aaron if no name
+                    renderCards(data.answers || {}, data.feedback || {});
+                    if (data.isChecked) {
+                        scoreTextEl.textContent = `Score: ${data.score || 0} / ${TOTAL_POSSIBLE_POINTS} (${data.percentage || 0}%)`;
+                        scoreDisplaySectionEl.style.display = 'block';
+                        cardsContainerEl.classList.remove('hidden-answers');
+                        cardsContainerEl.classList.add('checked-answers');
+                        checkAnswersBtn.textContent = 'Answers Checked';
+                         hasUserTyped = true; // If data loaded, assume interaction
+                    }
+                } else {
+                    console.log("No saved game state found. Starting fresh.");
+                    playerNameInputEl.value = 'Aaron'; // Default for new users
+                    renderCards(); // Render empty cards
+                }
+            } catch (error) {
+                console.error("Error loading game state: ", error);
+                renderCards(); // Render empty cards on error
+            }
+            updateButtonStates();
+        }
+        // Authentication and Initialization
+        onAuthStateChanged(auth, async (user) => {
+            if (user) {
+                userId = user.uid;
+                console.log("User authenticated with UID:", userId);
+                 // Define gameDocRef here, now that userId is available
+                gameDocRef = doc(db, "artifacts", appId, "users", userId, "samsFavoritesGameData", "userGameState");
+                await loadGameState();
+            } else {
+                // User is signed out or not yet signed in. Try custom token or anonymous.
+                console.log("No user signed in. Attempting sign-in.");
+                if (typeof __initial_auth_token !== 'undefined' && __initial_auth_token) {
+                    try {
+                        await signInWithCustomToken(auth, __initial_auth_token);
+                        console.log("Signed in with custom token.");
+                        // onAuthStateChanged will trigger again with the new user.
+                    } catch (error) {
+                        console.error("Error signing in with custom token, falling back to anonymous:", error);
+                        await signInAnonymously(auth).catch(anonError => console.error("Anonymous sign-in also failed:", anonError));
+                    }
+                } else {
+                    try {
+                        await signInAnonymously(auth);
+                        console.log("Signed in anonymously.");
+                        // onAuthStateChanged will trigger again with the new user.
+                    } catch (error) {
+                        console.error("Error signing in anonymously: ", error);
+                        renderCards();
+                        updateButtonStates();
+                    }
+                }
+            }
+        });
+        checkAnswersBtn.addEventListener('click', () => {
+            if (checkAnswersBtn.textContent === 'Answers Checked') return; // Don't re-check
+            if (cardsContainerEl.classList.contains('hidden-answers') && !hasUserTyped) {
+                 // If revealing answers without typing anything
+                cardsContainerEl.classList.remove('hidden-answers');
+                checkAnswersBtn.textContent = 'Check Answers with Key'; // Prompt to type then check
+            } else {
+                handleCheckAnswers();
+            }
+        });
+        saveProgressBtn.addEventListener('click', () => {
+            // Determine if answers have been checked to pass correct state to saveGameState
+            const isChecked = cardsContainerEl.classList.contains('checked-answers') && !cardsContainerEl.classList.contains('hidden-answers');
+            let score = 0;
+            let percentage = 0;
+            let feedback = {};
+            if (isChecked) {
+                // If checked, parse score from display or re-calculate (safer to re-calculate if needed)
+                // For simplicity, assume scoreTextEl is up-to-date if isChecked is true
+                const scoreMatch = scoreTextEl.textContent.match(/Score: (\d+) \/ \d+ \((\d+)%\)/);
+                if (scoreMatch) {
+                    score = parseInt(scoreMatch[1]);
+                    percentage = parseInt(scoreMatch[2]);
+                }
+                // Collect feedback emojis again
+                document.querySelectorAll('.feedback-emoji').forEach(el => {
+                    const idParts = el.id.split('-'); // e.g., feedback-q1 or feedback-q3-part1
+                    let key = idParts[1];
+                    if (idParts.length > 2 && (idParts[2] === 'part1' || idParts[2] === 'part2' || idParts[2] === 'main' || idParts[2] === 'bonus')) {
+                         key += `-${idParts[2]}`;
+                    }
+                    if(el.textContent && el.textContent !== '➖') feedback[key] = el.textContent;
+                });
             }
+            saveGameState(isChecked, score, percentage, feedback);
         });
+        // Initial setup
+        // renderCards(); // Render empty cards initially, loadGameState will populate if data exists
+        // updateButtonStates(); // Called within loadGameState or auth callback
     </script>
 </body>
 </html>