Fix timer and add multi-answer question support

- Replace broken JS DOM-based timer with gr.Timer (server-side 1s tick);
handles countdown display and auto-submit on expiry
- Add gr.CheckboxGroup alongside gr.Radio; questions with list
correct_answer show the checkbox variant with "Select all that apply"
- Update correct_answer to arrays for question ids 19, 37, 44, 46, 54
- Grade by comparing sorted answer lists so order doesn't matter
- Add CLAUDE.md with architecture and dev notes

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

CLAUDE.md

@@ -0,0 +1,48 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Running the App
+
+```bash
+pip install -r requirements.txt
+python app.py
+```
+
+The app is also deployed to Hugging Face Spaces (configured via the YAML frontmatter in README.md), where it runs automatically on push.
+
+## Architecture
+
+This is a single-file Gradio app (`app.py`) with a JSON question bank (`questionnaire.json`).
+
+**Data flow:**
+- `questionnaire.json` — source of truth. Has two top-level keys: `exam_info` (metadata, passing score, certifications) and `questions` (array of 67 question objects). Each question has `options` (list of strings), `correct_answer` (0-indexed int), and `explanation`.
+- All questions are loaded at module startup into `QUESTIONS` and `EXAM_INFO` globals.
+
+**State management:**
+- All quiz state lives in Gradio `gr.State` components: `quiz_questions`, `quiz_start_time`, `quiz_active`, `current_question_idx`, `user_answers`.
+- `user_answers` is a list of 10 elements, each `None` or a 0-indexed integer matching the selected option.
+- Answers are stored by parsing the first character of the Radio choice string (e.g., `"A. Some option"` → `ord('A') - 65 = 0`).
+
+**Timer:**
+- The countdown timer is client-side JavaScript injected via `demo.load(..., js=...)`. It uses a `MutationObserver` to detect when Start/Restart buttons appear, then sets an interval to update the DOM directly. When time runs out, it programmatically clicks the Submit button.
+- The Python server has no timer polling; `quiz_start_time` state exists but the actual countdown is purely frontend.
+
+**Navigation pattern:**
+- `navigate_question(direction, ...)` handles Prev/Next (hardcoded to 10 questions, index 0–9).
+- `jump_to_question(question_label, ...)` parses `"Question N"` strings from the Dropdown.
+- Both restore the previously saved answer when loading a question.
+
+## Adding Questions
+
+Add objects to the `questions` array in `questionnaire.json`. Each question must follow this schema:
+```json
+{
+  "id": <int>,
+  "section": "<category string>",
+  "question": "<question text>",
+  "options": ["<A>", "<B>", "<C>", "<D>"],
+  "correct_answer": <0-indexed int>,
+  "explanation": "<shown only for wrong answers>"
+}
+```

app.py

@@ -2,7 +2,6 @@ import gradio as gr
 import json
 import random
 import time
-from typing import Optional
 
 # Load questions from JSON file
 def load_questions():
@@ -13,42 +12,49 @@ def load_questions():
 QUESTIONS, EXAM_INFO = load_questions()
 TIME_LIMIT = 5 * 60  # 5 minutes in seconds
 
+def is_multi_answer(question: dict) -> bool:
+    return isinstance(question["correct_answer"], list)
+
 def select_random_questions(num_questions: int = 10) -> list:
-    """Select random questions from the pool."""
     return random.sample(QUESTIONS, min(num_questions, len(QUESTIONS)))
-    
-def format_question(question: dict, index: int) -> str:   
-    """Format a question for display."""
-    return f"**Question {index + 1}** ({question['section']})\n\n{question['question']}"
+
+def format_question(question: dict, index: int) -> str:
+    suffix = " *(Select all that apply)*" if is_multi_answer(question) else ""
+    return f"**Question {index + 1}** ({question['section']}){suffix}\n\n{question['question']}"
 
 def calculate_time_remaining(start_time: float) -> tuple[int, int, bool]:
-    """Calculate remaining time and check if expired."""
     elapsed = time.time() - start_time
     remaining = max(0, TIME_LIMIT - elapsed)
     minutes = int(remaining // 60)
     seconds = int(remaining % 60)
-    expired = remaining <= 0
-    return minutes, seconds, expired
+    return minutes, seconds, remaining <= 0
 
 def grade_quiz(selected_questions: list, user_answers: list) -> tuple[int, int, list]:
-    """Grade the quiz and return score and details."""
     correct_count = 0
     results = []
 
     for i, (question, answer) in enumerate(zip(selected_questions, user_answers)):
-        correct_idx = question["correct_answer"]
-        is_correct = answer == correct_idx
+        correct = question["correct_answer"]
+        if isinstance(correct, int):
+            correct = [correct]
+
+        is_correct = sorted(answer or []) == sorted(correct)
         if is_correct:
             correct_count += 1
 
+        user_ans_text = ", ".join(
+            f"{chr(65+a)}. {question['options'][a]}" for a in (answer or [])
+        ) or "No answer provided"
+        correct_ans_text = ", ".join(
+            f"{chr(65+a)}. {question['options'][a]}" for a in correct
+        )
+
         results.append({
             "question_num": i + 1,
             "question": question["question"],
             "section": question["section"],
-            "user_answer": answer,
-            "user_answer_text": question["options"][answer] if answer is not None else "No answer",
-            "correct_answer": correct_idx,
-            "correct_answer_text": question["options"][correct_idx],
+            "user_answer_text": user_ans_text,
+            "correct_answer_text": correct_ans_text,
             "is_correct": is_correct,
             "explanation": question["explanation"]
         })
@@ -56,11 +62,10 @@ def grade_quiz(selected_questions: list, user_answers: list) -> tuple[int, int,
     return correct_count, len(selected_questions), results
 
 def format_results(correct: int, total: int, results: list) -> str:
-    """Format the quiz results for display."""
     percentage = (correct / total) * 100
     passing = percentage >= EXAM_INFO["passing_score"]
 
-    output = f"# Quiz Results\n\n"
+    output = "# Quiz Results\n\n"
     output += f"## Score: {correct}/{total} ({percentage:.1f}%)\n\n"
     output += f"**Status: {'PASSED' if passing else 'FAILED'}** (Passing score: {EXAM_INFO['passing_score']}%)\n\n"
     output += "---\n\n"
@@ -70,20 +75,35 @@ def format_results(correct: int, total: int, results: list) -> str:
         output += f"### Question {result['question_num']} {status_icon}\n"
         output += f"**Section:** {result['section']}\n\n"
         output += f"**Question:** {result['question']}\n\n"
-
-        if result["user_answer"] is not None:
-            output += f"**Your answer:** {chr(65 + result['user_answer'])}. {result['user_answer_text']}\n\n"
-        else:
-            output += f"**Your answer:** No answer provided\n\n"
+        output += f"**Your answer:** {result['user_answer_text']}\n\n"
 
         if not result["is_correct"]:
-            output += f"**Correct answer:** {chr(65 + result['correct_answer'])}. {result['correct_answer_text']}\n\n"
+            output += f"**Correct answer:** {result['correct_answer_text']}\n\n"
             output += f"**Explanation:** {result['explanation']}\n\n"
 
         output += "---\n\n"
 
     return output
 
+def get_answer_components(question: dict, answers: list, q_idx: int):
+    """Return (radio_update, checkbox_update) for displaying a question."""
+    choices = [f"{chr(65+i)}. {opt}" for i, opt in enumerate(question["options"])]
+    saved = answers[q_idx] or []
+
+    if is_multi_answer(question):
+        prev = [choices[i] for i in saved]
+        return (
+            gr.update(choices=choices, value=None, visible=False),
+            gr.update(choices=choices, value=prev, visible=True),
+        )
+    else:
+        prev = choices[saved[0]] if saved else None
+        return (
+            gr.update(choices=choices, value=prev, visible=True),
+            gr.update(choices=[], value=[], visible=False),
+        )
+
+
 # Create Gradio interface
 with gr.Blocks(title="NVIDIA Certification Practice Quiz") as demo:
     # State variables
@@ -91,7 +111,7 @@ with gr.Blocks(title="NVIDIA Certification Practice Quiz") as demo:
     quiz_start_time = gr.State(0.0)
     quiz_active = gr.State(False)
     current_question_idx = gr.State(0)
-    user_answers = gr.State([None] * 10)
+    user_answers = gr.State([[] for _ in range(10)])
 
     gr.Markdown(f"""
     # {EXAM_INFO['title']}
@@ -121,10 +141,9 @@ with gr.Blocks(title="NVIDIA Certification Practice Quiz") as demo:
 
         question_display = gr.Markdown("", elem_id="question-display")
 
-        answer_choices = gr.Radio(
-            choices=[],
-            label="Select your answer:",
-            interactive=True
+        answer_radio = gr.Radio(choices=[], label="Select your answer:", interactive=True)
+        answer_checkbox = gr.CheckboxGroup(
+            choices=[], label="Select all that apply:", interactive=True, visible=False
         )
 
         with gr.Row():
@@ -135,215 +154,165 @@ with gr.Blocks(title="NVIDIA Certification Practice Quiz") as demo:
     results_section = gr.Markdown(visible=False)
     restart_btn = gr.Button("Start New Quiz", visible=False, variant="primary")
 
+    quiz_timer = gr.Timer(value=1)
+
+    # --- Event handler functions ---
+
     def start_quiz():
-        """Initialize a new quiz."""
         questions = select_random_questions(10)
         start_time = time.time()
-        answers = [None] * 10
+        answers = [[] for _ in range(10)]
 
-        first_question = questions[0]
-        question_text = format_question(first_question, 0)
-        choices = [f"{chr(65+i)}. {opt}" for i, opt in enumerate(first_question["options"])]
+        question_text = format_question(questions[0], 0)
+        radio_update, checkbox_update = get_answer_components(questions[0], answers, 0)
 
         return (
-            questions,  # quiz_questions
-            start_time,  # quiz_start_time
-            True,  # quiz_active
-            0,  # current_question_idx
-            answers,  # user_answers
-            gr.update(visible=True),  # quiz_section
-            question_text,  # question_display
-            gr.update(choices=choices, value=None, interactive=True),  # answer_choices
-            gr.update(visible=False),  # results_section
-            gr.update(visible=False),  # restart_btn
-            gr.update(visible=False),  # start_btn
-            "**Time Remaining:** 05:00",  # timer_display
-            "**Answered:** 0/10",  # answer_status
-            gr.update(value="Question 1")  # question_selector
+            questions,                      # quiz_questions
+            start_time,                     # quiz_start_time
+            True,                           # quiz_active
+            0,                              # current_question_idx
+            answers,                        # user_answers
+            gr.update(visible=True),        # quiz_section
+            question_text,                  # question_display
+            radio_update,                   # answer_radio
+            checkbox_update,                # answer_checkbox
+            gr.update(visible=False),       # results_section
+            gr.update(visible=False),       # restart_btn
+            gr.update(visible=False),       # start_btn
+            "**Time Remaining:** 05:00",    # timer_display
+            "**Answered:** 0/10",           # answer_status
+            gr.update(value="Question 1"),  # question_selector
         )
 
     def navigate_question(direction, current_idx, questions, answers):
-        """Navigate to previous or next question."""
-        # Calculate new index
-        if direction == "prev":
-            new_idx = max(0, current_idx - 1)
-        else:
-            new_idx = min(9, current_idx + 1)
-
-        # Load new question
+        new_idx = max(0, current_idx - 1) if direction == "prev" else min(9, current_idx + 1)
         question = questions[new_idx]
-        question_text = format_question(question, new_idx)
-        choices = [f"{chr(65+i)}. {opt}" for i, opt in enumerate(question["options"])]
-
-        # Set previous answer if exists
-        prev_answer = None
-        if answers[new_idx] is not None:
-            prev_answer = choices[answers[new_idx]]
-
-        answered_count = sum(1 for a in answers if a is not None)
-
+        radio_update, checkbox_update = get_answer_components(question, answers, new_idx)
+        answered_count = sum(1 for a in answers if a)
         return (
             new_idx,
-            question_text,
-            gr.update(choices=choices, value=prev_answer),
+            format_question(question, new_idx),
+            radio_update,
+            checkbox_update,
             f"**Answered:** {answered_count}/10",
-            gr.update(value=f"Question {new_idx + 1}")
+            gr.update(value=f"Question {new_idx + 1}"),
         )
 
     def jump_to_question(question_label, current_idx, questions, answers):
-        """Jump to a specific question."""
-        # Parse question number
         new_idx = int(question_label.split()[1]) - 1
-
-        # Load question
         question = questions[new_idx]
-        question_text = format_question(question, new_idx)
-        choices = [f"{chr(65+i)}. {opt}" for i, opt in enumerate(question["options"])]
-
-        # Set previous answer if exists
-        prev_answer = None
-        if answers[new_idx] is not None:
-            prev_answer = choices[answers[new_idx]]
-
-        answered_count = sum(1 for a in answers if a is not None)
-
+        radio_update, checkbox_update = get_answer_components(question, answers, new_idx)
+        answered_count = sum(1 for a in answers if a)
         return (
             new_idx,
-            question_text,
-            gr.update(choices=choices, value=prev_answer),
-            f"**Answered:** {answered_count}/10"
+            format_question(question, new_idx),
+            radio_update,
+            checkbox_update,
+            f"**Answered:** {answered_count}/10",
         )
 
-    def save_answer(answer, current_idx, answers):
-        """Save the current answer."""
+    def save_answer_radio(answer, current_idx, answers):
         answers = answers.copy()
         if answer is not None:
-            answer_idx = ord(answer[0]) - 65
-            answers[current_idx] = answer_idx
+            answers[current_idx] = [ord(answer[0]) - 65]
+        answered_count = sum(1 for a in answers if a)
+        return answers, f"**Answered:** {answered_count}/{len(answers)}"
 
-        answered_count = sum(1 for a in answers if a is not None)
+    def save_answer_checkbox(selected, current_idx, answers):
+        answers = answers.copy()
+        answers[current_idx] = sorted([ord(s[0]) - 65 for s in selected]) if selected else []
+        answered_count = sum(1 for a in answers if a)
         return answers, f"**Answered:** {answered_count}/{len(answers)}"
 
-    def submit_quiz(questions, answers):
-        """Submit the quiz and show results."""
+    def do_submit(questions, answers):
         correct, total, results = grade_quiz(questions, answers)
         results_text = format_results(correct, total, results)
+        return (
+            gr.update(visible=False),                       # quiz_section
+            gr.update(value=results_text, visible=True),    # results_section
+            gr.update(visible=True),                        # restart_btn
+            gr.update(visible=False),                       # start_btn
+            False,                                          # quiz_active
+            "**Quiz Submitted**",                           # timer_display
+        )
+
+    def tick_timer(quiz_active_val, start_time_val, questions, answers):
+        if not quiz_active_val:
+            return (gr.update(), gr.update(), gr.update(), gr.update(), gr.update(), quiz_active_val)
 
+        minutes, seconds, expired = calculate_time_remaining(start_time_val)
+
+        if not expired:
+            return (
+                f"**Time Remaining:** {minutes:02d}:{seconds:02d}",
+                gr.update(), gr.update(), gr.update(), gr.update(),
+                quiz_active_val,
+            )
+
+        # Auto-submit on expiry
+        correct, total, results = grade_quiz(questions, answers)
+        results_text = format_results(correct, total, results)
         return (
-            gr.update(visible=False),  # quiz_section
-            gr.update(value=results_text, visible=True),  # results_section
-            gr.update(visible=True),  # restart_btn
-            gr.update(visible=False),  # start_btn
-            False,  # quiz_active
-            "**Quiz Submitted**"  # timer_display
+            "**Time Expired**",
+            gr.update(visible=False),
+            gr.update(value=results_text, visible=True),
+            gr.update(visible=True),
+            gr.update(visible=False),
+            False,
         )
 
-    # Event handlers
-    start_btn.click(
-        start_quiz,
-        outputs=[
-            quiz_questions, quiz_start_time, quiz_active, current_question_idx, user_answers,
-            quiz_section, question_display, answer_choices, results_section, restart_btn,
-            start_btn, timer_display, answer_status, question_selector
-        ]
-    )
+    # --- Wire up events ---
 
-    restart_btn.click(
-        start_quiz,
-        outputs=[
-            quiz_questions, quiz_start_time, quiz_active, current_question_idx, user_answers,
-            quiz_section, question_display, answer_choices, results_section, restart_btn,
-            start_btn, timer_display, answer_status, question_selector
-        ]
-    )
+    start_outputs = [
+        quiz_questions, quiz_start_time, quiz_active, current_question_idx, user_answers,
+        quiz_section, question_display, answer_radio, answer_checkbox,
+        results_section, restart_btn, start_btn, timer_display, answer_status, question_selector,
+    ]
+    start_btn.click(start_quiz, outputs=start_outputs)
+    restart_btn.click(start_quiz, outputs=start_outputs)
 
+    nav_outputs = [
+        current_question_idx, question_display, answer_radio, answer_checkbox,
+        answer_status, question_selector,
+    ]
     prev_btn.click(
-        lambda *args: navigate_question("prev", *args),
+        lambda *a: navigate_question("prev", *a),
         inputs=[current_question_idx, quiz_questions, user_answers],
-        outputs=[current_question_idx, question_display, answer_choices, answer_status, question_selector]
+        outputs=nav_outputs,
     )
-
     next_btn.click(
-        lambda *args: navigate_question("next", *args),
+        lambda *a: navigate_question("next", *a),
         inputs=[current_question_idx, quiz_questions, user_answers],
-        outputs=[current_question_idx, question_display, answer_choices, answer_status, question_selector]
+        outputs=nav_outputs,
     )
 
     question_selector.change(
         jump_to_question,
         inputs=[question_selector, current_question_idx, quiz_questions, user_answers],
-        outputs=[current_question_idx, question_display, answer_choices, answer_status]
+        outputs=[current_question_idx, question_display, answer_radio, answer_checkbox, answer_status],
     )
 
-    answer_choices.change(
-        save_answer,
-        inputs=[answer_choices, current_question_idx, user_answers],
-        outputs=[user_answers, answer_status]
+    answer_radio.change(
+        save_answer_radio,
+        inputs=[answer_radio, current_question_idx, user_answers],
+        outputs=[user_answers, answer_status],
+    )
+    answer_checkbox.change(
+        save_answer_checkbox,
+        inputs=[answer_checkbox, current_question_idx, user_answers],
+        outputs=[user_answers, answer_status],
     )
 
     submit_btn.click(
-        submit_quiz,
+        do_submit,
         inputs=[quiz_questions, user_answers],
-        outputs=[quiz_section, results_section, restart_btn, start_btn, quiz_active, timer_display]
+        outputs=[quiz_section, results_section, restart_btn, start_btn, quiz_active, timer_display],
     )
 
-    # Timer update using JavaScript
-    demo.load(
-        None,
-        None,
-        None,
-        js="""
-        () => {
-            let timerInterval = null;
-            let startTime = null;
-            const timeLimit = 5 * 60 * 1000; // 5 minutes in milliseconds
-
-            function updateTimer() {
-                if (!startTime) return;
-
-                const elapsed = Date.now() - startTime;
-                const remaining = Math.max(0, timeLimit - elapsed);
-                const minutes = Math.floor(remaining / 60000);
-                const seconds = Math.floor((remaining % 60000) / 1000);
-
-                const timerEl = document.querySelector('[data-testid="markdown"] p strong');
-                if (timerEl && timerEl.textContent.includes('Time')) {
-                    timerEl.parentElement.innerHTML = `<strong>Time Remaining:</strong> ${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
-                }
-
-                if (remaining <= 0) {
-                    clearInterval(timerInterval);
-                    // Trigger submit button click
-                    const submitBtn = Array.from(document.querySelectorAll('button')).find(b => b.textContent.includes('Submit'));
-                    if (submitBtn) submitBtn.click();
-                }
-            }
-
-            // Watch for quiz start
-            const observer = new MutationObserver(() => {
-                const startBtn = Array.from(document.querySelectorAll('button')).find(b => b.textContent === 'Start Quiz');
-                const restartBtn = Array.from(document.querySelectorAll('button')).find(b => b.textContent === 'Start New Quiz');
-
-                if (startBtn) {
-                    startBtn.addEventListener('click', () => {
-                        startTime = Date.now();
-                        if (timerInterval) clearInterval(timerInterval);
-                        timerInterval = setInterval(updateTimer, 1000);
-                    }, { once: true });
-                }
-
-                if (restartBtn) {
-                    restartBtn.addEventListener('click', () => {
-                        startTime = Date.now();
-                        if (timerInterval) clearInterval(timerInterval);
-                        timerInterval = setInterval(updateTimer, 1000);
-                    });
-                }
-            });
-
-            observer.observe(document.body, { childList: true, subtree: true });
-        }
-        """
+    quiz_timer.tick(
+        tick_timer,
+        inputs=[quiz_active, quiz_start_time, quiz_questions, user_answers],
+        outputs=[timer_display, quiz_section, results_section, restart_btn, start_btn, quiz_active],
     )
 
 if __name__ == "__main__":

questionnaire.json

@@ -256,7 +256,7 @@
         "GPUs connected via PCIe Gen3 instead of Gen4",
         "CPU using older DDR4 memory"
       ],
-      "correct_answer": 1,
+      "correct_answer": [1, 2],
       "explanation": "The correct answers are B and C. Inefficient data loading creates a pipeline stall where the GPU waits for data. PCIe Gen3 (16 GB/s) vs Gen4 (32 GB/s) can bottleneck transfers to GPU memory, especially for high-bandwidth GPUs like A100."
     },
     {
@@ -490,7 +490,7 @@
         "Power plan set to Power Saver",
         "Maya scene contains corrupted geometry"
       ],
-      "correct_answer": 0,
+      "correct_answer": [0, 2],
       "explanation": "The correct answers are A and C. PCIe Gen3 vs Gen4 significantly impacts bandwidth (16 GB/s vs 32 GB/s). Power Saver mode limits GPU clock speeds and performance. Both directly reduce rendering performance."
     },
     {
@@ -581,7 +581,7 @@
         "PCIe Gen3 instead of Gen4",
         "CPU using DDR4 memory"
       ],
-      "correct_answer": 1,
+      "correct_answer": [1, 2],
       "explanation": "The correct answers are B and C. Inefficient data loading creates pipeline stalls where GPU waits for data. PCIe Gen3 (16 GB/s) vs Gen4 (32 GB/s) limits host-to-GPU transfer bandwidth, bottlenecking memory-intensive operations."
     },
     {
@@ -607,7 +607,7 @@
         "Increase system RAM",
         "Configure NCCL for correct network interface"
       ],
-      "correct_answer": 0,
+      "correct_answer": [0, 1, 3],
       "explanation": "The correct answers are A, B, and D. PCIe peer-to-peer enables direct GPU-to-GPU transfers. InfiniBand/RoCE provide high-bandwidth, low-latency networking. Proper NCCL configuration ensures optimal use of available network interfaces. Increasing system RAM doesn't improve inter-GPU communication."
     },
     {
@@ -711,7 +711,7 @@
         "Implement async prefetching with torch.Generator",
         "Use faster storage (NVMe vs HDD)"
       ],
-      "correct_answer": 0,
+      "correct_answer": [0, 3],
       "explanation": "The correct answers are A and D. DataLoader with multiple workers parallelizes data loading. Faster storage (NVMe) directly improves I/O performance. Loading entire dataset to RAM is impractical for large datasets. torch.Generator is for reproducibility, not async prefetching."
     },
     {