source /home/dave/GPTeasers/backend/.venv/bin/activate

Merge branch 'main' of github.com:DJSaunders1997/GPTeasers

Author: DJSaunders1997

frontend/index.html

@@ -79,6 +79,18 @@ <h1>GPTeasers 🧠💡</h1>
           />
         </div>
 
+        <div class="input-group">
+          <label for="quizNumQuestions">Number of Questions:</label>
+          <p>How many questions should this quiz have?</p>
+          <input
+            type="number"
+            id="quizNumQuestions"
+            min="1"
+            max="10"
+            value="5"
+          />
+        </div>
+
         <div class="input-group">
           <label for="quizModel">Select Model Provider:</label>
           <p>Select the AI model to generate your quiz.</p>
@@ -109,18 +121,32 @@ <h1>GPTeasers 🧠💡</h1>
 
         <div id="quiz-container" style="display: none;">
           <h1 id="quizTitle">Title</h1>
+          <div id="quizMeta" class="quiz-meta" aria-live="polite">
+            <span id="quizProgress">Question 1 of 10</span>
+            <span id="quizScore">Score: 0</span>
+          </div>
           <h2 id="question-text">Question</h2>
 
+          <div id="quizFeedback" class="quiz-feedback" role="status" aria-live="polite" style="display: none;"></div>
+
           <button id="option-A">A</button>
           <button id="option-B">B</button>
           <button id="option-C">C</button>
+          <button id="nextQuestionButton" style="display: none;">Next Question →</button>
+          <button id="newQuizButton" style="display: none;">New Quiz</button>
         </div>
 
         <div id="questionsContainer">
           <!-- Questions will be dynamically added here -->
         </div>
 
       </section>
+
+      <section id="quizHistory" aria-label="Quiz history" style="display: none;">
+        <h2>Your Quiz History</h2>
+        <p id="historyEmptyMessage">No quiz attempts yet.</p>
+        <ul id="quizHistoryList"></ul>
+      </section>
 
       <footer>Website by David Saunders.</footer>
     </main>

frontend/scripts/app.js

@@ -8,45 +8,52 @@ import Quiz from "./quiz.js";
 
 class App {
   constructor() {
-    const numQuestions = 10;
     // Initialise app elements as JS objects.
-    this.quiz = new Quiz(numQuestions);
-    this.controller = new Controller(this.quiz);
+    this.quiz = null; // created on demand per quiz run
+    this.controller = new Controller();
     this.ui = new UI();
+    this.quizHistory = this.loadQuizHistory();
+    this.currentTopic = "";
+    this.currentDifficulty = "";
+    this.currentModel = "";
+
+    // Render any existing history on load
+    this.ui.renderHistory(this.quizHistory);
 
     // Initialize mobile menu toggle
     this.initMobileMenu();
 
     // Load supported models dynamically
     this.loadSupportedModels();
 
-    // Initialise button event listeners.
-    // The arrow function implicitly binds the method to the current instance of this class.
-    document
-      .querySelector("#fetchQuizButton")
-      .addEventListener("click", () => this.fetchQuizData());
-    document
-      .querySelector("#fetchQuizButton")
-      .addEventListener("click", () => this.fetchAIImage());
-    // Answer buttons aren't visible when the page first loads
-    document
-      .querySelector("#option-A")
-      .addEventListener("click", () => this.checkAnswer("A"));
-    document
-      .querySelector("#option-B")
-      .addEventListener("click", () => this.checkAnswer("B"));
-    document
-      .querySelector("#option-C")
-      .addEventListener("click", () => this.checkAnswer("C"));
-
-    // If Enter key is pressed then simulate button press
-    document
-      .getElementById("quizTopic")
-      .addEventListener("keydown", function (event) {
-        // Check if the pressed key was the Enter key
-        if (event.key === "Enter") {
-          event.preventDefault(); // Prevent any default action
-          document.querySelector("#fetchQuizButton").click(); // Simulate a click on the button
+    // Initialise button event listeners
+    this.bindButtonEvents();
+    this.bindEnterKeyToQuizButton();
+  }
+
+  /**
+   * Bind event listeners to quiz control buttons.
+   * @private
+   */
+  bindButtonEvents() {
+    this.ui.elements.fetchButton.addEventListener("click", () => this.fetchQuizData());
+    this.ui.elements.fetchButton.addEventListener("click", () => this.fetchAIImage());
+    this.ui.elements.buttonA.addEventListener("click", () => this.checkAnswer("A"));
+    this.ui.elements.buttonB.addEventListener("click", () => this.checkAnswer("B"));
+    this.ui.elements.buttonC.addEventListener("click", () => this.checkAnswer("C"));
+    this.ui.elements.nextQuestionButton.addEventListener("click", () => this.nextQuestion());
+    this.ui.elements.newQuizButton.addEventListener("click", () => location.reload());
+  }
+
+  /**
+   * Bind Enter key on quiz topic input to trigger quiz generation.
+   * @private
+   */
+  bindEnterKeyToQuizButton() {
+    this.ui.elements.topicInput.addEventListener("keydown", (event) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        this.ui.elements.fetchButton.click();
         }
       });
   }
@@ -55,8 +62,8 @@ class App {
    * Initialize mobile menu toggle functionality
    */
   initMobileMenu() {
-    const navbarToggle = document.getElementById('navbar-toggle');
-    const navbarLinks = document.getElementById('navbar-links');
+    const navbarToggle = this.ui.elements.navbarToggle;
+    const navbarLinks = this.ui.elements.navbarLinks;
 
     if (navbarToggle && navbarLinks) {
       navbarToggle.addEventListener('click', () => {
@@ -89,6 +96,17 @@ class App {
     const topic = this.ui.getTopic();
     const difficulty = this.ui.getDifficulty();
     const model = this.ui.getModel();
+    const numQuestions = this.ui.getNumQuestions();
+
+    // Persist current quiz metadata for history logging
+    this.currentTopic = topic;
+    this.currentDifficulty = difficulty;
+    this.currentModel = model;
+
+    // Create fresh quiz state with requested number of questions
+    this.quiz = new Quiz(numQuestions);
+    this.controller.quiz = this.quiz;
+    this.controller.numQuestions = numQuestions;
 
     // Check if topic is empty or contains only whitespace
     if (!topic.trim()) {
@@ -128,7 +146,7 @@ class App {
 
   async fetchAIImage() {
     // Use the topic as a prompt to image
-    const prompt = document.getElementById("quizTopic").value;
+    const prompt = this.ui.elements.topicInput.value;
 
     // Check if prompt is empty or contains only whitespace
     if (!prompt.trim()) {
@@ -159,12 +177,39 @@ class App {
     const question = this.quiz.getCurrentQuestion();
     // Update UI elements
     this.ui.displayCurrentQuestion(question);
+    this.ui.updateProgress(this.quiz.currentIndex + 1, this.quiz.numQuestions, this.quiz.score);
   }
 
   // Calls quiz check answer method
   // and displays the next question
+  /**
+   * Handles answer selection, renders inline feedback, and advances quiz flow.
+   * @param {"A"|"B"|"C"} answer - Selected option key.
+   */
   checkAnswer(answer) {
-    this.quiz.checkAnswer(answer);
+    const result = this.quiz.checkAnswer(answer);
+
+    if (!result) {
+      return;
+    }
+
+    if (result.isFinished) {
+      this.saveQuizResult(result);
+      this.ui.showFinalScore(result);
+      this.ui.updateProgress(this.quiz.numQuestions, this.quiz.numQuestions, this.quiz.score);
+      return;
+    }
+
+    this.ui.hideAnswerButtons();
+    this.ui.showAnswerFeedback(result);
+    this.ui.showNextQuestionButton();
+  }
+
+  nextQuestion() {
+    this.ui.hideFeedback();
+    this.ui.hideNextQuestionButton();
+    this.ui.hideNewQuizButton();
+    this.ui.showAnswerButtons();
     this.showQuestion();
   }
 
@@ -191,6 +236,58 @@ class App {
       // The dropdown will keep its existing hardcoded options if this fails
     }
   }
+
+  /**
+   * Retrieve quiz history from localStorage.
+   * @returns {Array} Stored quiz attempts.
+   */
+  loadQuizHistory() {
+    try {
+      const raw = localStorage.getItem("gptQuizHistory");
+      return raw ? JSON.parse(raw) : [];
+    } catch (error) {
+      console.warn("Failed to load quiz history from localStorage", error);
+      return [];
+    }
+  }
+
+  /**
+   * Append the current quiz result to localStorage history.
+   * @param {Object} result - Final quiz result payload.
+   */
+  saveQuizResult(result) {
+    const entry = {
+      topic: this.currentTopic,
+      difficulty: this.currentDifficulty,
+      model: this.currentModel,
+      score: result.score,
+      totalQuestions: result.totalQuestions,
+      finishedAt: new Date().toISOString(),
+    };
+
+    try {
+      const history = this.loadQuizHistory();
+      history.push(entry);
+      localStorage.setItem("gptQuizHistory", JSON.stringify(history));
+      this.quizHistory = history;
+      this.ui.renderHistory(history);
+    } catch (error) {
+      console.warn("Failed to save quiz history to localStorage", error);
+    }
+  }
+
+  /**
+   * Clear quiz history from localStorage and UI.
+   */
+  clearQuizHistory() {
+    try {
+      localStorage.removeItem("gptQuizHistory");
+      this.quizHistory = [];
+      this.ui.renderHistory([]);
+    } catch (error) {
+      console.warn("Failed to clear quiz history", error);
+    }
+  }
 }
 
 const app = new App();

frontend/scripts/config.js

@@ -0,0 +1,71 @@
+/**
+ * Configuration constants for DOM selectors and CSS classes.
+ * Centralizes all hardcoded strings for easier maintenance.
+ */
+
+export const HTML_ELEMENT_IDS = {
+  // Quiz generation
+  fetchQuizButton: "#fetchQuizButton",
+  quizTopic: "#quizTopic",
+  quizNumQuestions: "#quizNumQuestions",
+  quizDifficulty: "#quizDifficulty",
+  quizModel: "#quizModel",
+
+  // Quiz interaction
+  optionA: "#option-A",
+  optionB: "#option-B",
+  optionC: "#option-C",
+  nextQuestionButton: "#nextQuestionButton",
+  newQuizButton: "#newQuizButton",
+
+  // History
+  historySection: "#quizHistory",
+  historyList: "#quizHistoryList",
+  historyEmptyMessage: "#historyEmptyMessage",
+
+  // UI containers
+  inputContainer: "#inputContainer",
+  intro: "#intro",
+  quizContainer: "#quiz-container",
+  quizSection: "#quizSection",
+
+  // Quiz display elements
+  quizTitle: "#quizTitle",
+  quizProgress: "#quizProgress",
+  quizScore: "#quizScore",
+  questionText: "#question-text",
+  quizFeedback: "#quizFeedback",
+  AIImage: "#AIImage",
+
+  // Loading elements
+  loadingMessage: "#loadingMessage",
+  loadingBarContainer: "#loadingBarContainer",
+  loadingBar: "#loadingBar",
+
+  // Navigation
+  navbarToggle: "#navbar-toggle",
+  navbarLinks: "#navbar-links",
+};
+
+export const CSS_CLASSES = {
+  quizMeta: "quiz-meta",
+  quizFeedback: "quiz-feedback",
+  feedbackCorrect: "feedback-correct",
+  feedbackWrong: "feedback-wrong",
+  feedbackFinal: "feedback-final",
+  feedbackChoices: "feedback-choices",
+  choiceCorrect: "choice-correct",
+  choiceNeutral: "choice-neutral",
+  navbarActive: "active",
+};
+
+/**
+ * Safely retrieve a DOM element by its selector.
+ * @param {string} selector - ID selector (e.g., "#elementId")
+ * @returns {HTMLElement|null} The element or null if not found
+ */
+export function getElement(selector) {
+  // Remove # if present and use getElementById for performance
+  const id = selector.startsWith("#") ? selector.slice(1) : selector;
+  return document.getElementById(id);
+}

frontend/scripts/controller.js

@@ -9,7 +9,7 @@ class Controller {
    * @constructor
    * @param {Quiz} quiz - The quiz object to be initialized.
    */
-  constructor(quiz) {
+  constructor(quiz = null, defaultNumQuestions = 5) {
     this.eventSource = null;
     this.messageCount = 0;
     // Determine if we are running locally based on the hostname.
@@ -24,8 +24,8 @@ class Controller {
     this.baseURLQuiz = `${this.baseURL}/GenerateQuiz`;
     this.baseURLImage = `${this.baseURL}/GenerateImage`;
     this.baseURLModels = `${this.baseURL}/SupportedModels`;
-    this.quiz = quiz; // this will be initialized as a quiz object
-    this.numQuestions = this.quiz.numQuestions;    
+    this.quiz = quiz; // may be set later by App
+    this.numQuestions = defaultNumQuestions;
   }
 
   /**