ezquiz 0.2.1__py3-none-any.whl → 0.3.0__py3-none-any.whl

ezquiz/apigame.py

@@ -1,10 +1,10 @@
 from pathlib import Path
 from random import choice
-from typing import Literal
 
 import uvicorn
 from fastapi import FastAPI, Request
 from fastapi.responses import HTMLResponse, JSONResponse
+from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
 
 from ezquiz.ezquiz import Q
@@ -21,9 +21,17 @@ class APIGame:
 
     def start(
         self,
+        *,
+        host: str,
+        port: int,
         **fastapi_kw,
     ):
         app = FastAPI(**fastapi_kw)
+        app.mount(
+            "/static",
+            StaticFiles(directory=Path(__file__).parent / "static"),
+            name="static",
+        )
 
         templates = Jinja2Templates(directory=Path(__file__).parent / "templates")
 
@@ -56,7 +64,14 @@ class APIGame:
             return JSONResponse(
                 {
                     "complete": False,
-                    "question": {"category": cat, "seed": seed, "text": prompt},
+                    "question": {
+                        "category": cat,
+                        "seed": seed,
+                        "text": prompt["text"],
+                        "type": prompt.get("type", "simple"),
+                        "context": prompt.get("context", ""),
+                        "hints": prompt.get("hints", []),
+                    },
                 }
             )
 
@@ -82,4 +97,4 @@ class APIGame:
                 }
             )
 
-        uvicorn.run(app)
+        uvicorn.run(app, host=host, port=port)

ezquiz/ezquiz.py

@@ -1,3 +1,4 @@
+from random import choice
 from typing import Callable, Generic, Literal, TypedDict, TypeVar
 
 T = TypeVar("T")
@@ -11,7 +12,7 @@ class Q(Generic[T]):
     def __init__(
         self,
         get_seed: Callable[[], T],
-        ask: Callable[[T], str],
+        ask: Callable[[T], dict],
         correct: Callable[[T], str],
         check: Callable[[T, str], bool] | None = None,
         explain: Callable[[T], Explain] | None = None,
@@ -32,3 +33,17 @@ class Q(Generic[T]):
 
         else:
             self.explain = explain
+
+    @classmethod
+    def from_dict(cls, dct: dict, question_type: str = "simple", **kwargs):
+        return cls(
+            get_seed=lambda: choice(list(dct.keys())),
+            ask=lambda seed: {
+                "text": str(seed),
+                "type": question_type,
+                "context": "",
+                "hints": [],
+            },
+            correct=lambda seed: dct[seed],
+            **kwargs,
+        )

ezquiz/static/js/api.js

@@ -0,0 +1,51 @@
+/**
+ * API communication module
+ */
+
+/**
+ * Fetch the next question from the API
+ * @param {string[]} categories - Selected category names
+ * @returns {Promise<Object>} Question data or completion status
+ */
+export async function fetchNextQuestion(categories) {
+  const response = await fetch('api/next', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({ categories })
+  });
+  
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+  
+  return response.json();
+}
+
+/**
+ * Submit an answer to the API
+ * @param {string} category - Question category
+ * @param {*} seed - Question seed
+ * @param {string} answer - User's answer
+ * @returns {Promise<Object>} Result with correctness and explanation
+ */
+export async function submitAnswer(category, seed, answer) {
+  const response = await fetch('api/submit', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({
+      category,
+      seed,
+      answer: answer.trim()
+    })
+  });
+  
+  if (!response.ok) {
+    throw new Error(`HTTP error! status: ${response.status}`);
+  }
+  
+  return response.json();
+}

ezquiz/static/js/diff.js

@@ -0,0 +1,110 @@
+/**
+ * Text diff visualization module
+ * Implements Levenshtein distance algorithm for string alignment
+ */
+
+/**
+ * Escape special characters for HTML display
+ * @param {string} c - Character to escape
+ * @returns {string} Escaped character
+ */
+function escapeChar(c) {
+  return c === " " ? " " : c;
+}
+
+/**
+ * Align two strings using dynamic programming (Levenshtein distance)
+ * @param {string} a - First string
+ * @param {string} b - Second string
+ * @returns {{aAlign: string, bAlign: string}} Aligned strings
+ */
+function alignStrings(a, b) {
+  a = a || "";
+  b = b || "";
+  
+  const dp = Array.from({ length: a.length + 1 }, () =>
+    Array(b.length + 1).fill(0),
+  );
+
+  for (let i = 0; i <= a.length; i++) dp[i][0] = i;
+  for (let j = 0; j <= b.length; j++) dp[0][j] = j;
+
+  for (let i = 1; i <= a.length; i++) {
+    for (let j = 1; j <= b.length; j++) {
+      dp[i][j] =
+        a[i - 1] === b[j - 1]
+          ? dp[i - 1][j - 1]
+          : 1 + Math.min(dp[i - 1][j], dp[i][j - 1], dp[i - 1][j - 1]);
+    }
+  }
+
+  let i = a.length,
+    j = b.length;
+  let aAlign = "",
+    bAlign = "";
+
+  while (i > 0 || j > 0) {
+    if (i > 0 && j > 0 && a[i - 1] === b[j - 1]) {
+      aAlign = a[i - 1] + aAlign;
+      bAlign = b[j - 1] + bAlign;
+      i--;
+      j--;
+    } else if (i > 0 && j > 0 && dp[i][j] === dp[i - 1][j - 1] + 1) {
+      aAlign = a[i - 1] + aAlign;
+      bAlign = b[j - 1] + bAlign;
+      i--;
+      j--;
+    } else if (i > 0 && dp[i][j] === dp[i - 1][j] + 1) {
+      aAlign = a[i - 1] + aAlign;
+      bAlign = " " + bAlign;
+      i--;
+    } else {
+      aAlign = " " + aAlign;
+      bAlign = b[j - 1] + bAlign;
+      j--;
+    }
+  }
+
+  return { aAlign, bAlign };
+}
+
+/**
+ * Render a visual diff between two strings
+ * @param {string} userAnswer - User's submitted answer
+ * @param {string} correctAnswer - Correct answer
+ * @returns {string} HTML string with visual diff
+ */
+export function renderTextDiff(userAnswer, correctAnswer) {
+  userAnswer = String(userAnswer || "");
+  correctAnswer = String(correctAnswer || "");
+  
+  const { aAlign, bAlign } = alignStrings(userAnswer, correctAnswer);
+
+  let top = "";
+  let bottom = "";
+
+  for (let i = 0; i < aAlign.length; i++) {
+    const a = aAlign[i];
+    const b = bAlign[i];
+
+    // TOP ROW (user input)
+    if (a === " " && b !== " ") {
+      top += `<span class="diff-grey">-</span>`;
+    } else if (a === b) {
+      top += `<span class="diff-green">${escapeChar(a)}</span>`;
+    } else if (a !== " ") {
+      top += `<span class="diff-red">${escapeChar(a)}</span>`;
+    }
+
+    // BOTTOM ROW (reference)
+    if (b === " ") {
+      bottom += " ";
+    } else if (a === b) {
+      bottom += `<span class="diff-green">${escapeChar(b)}</span>`;
+    } else {
+      bottom += `<span class="diff-grey">${escapeChar(b)}</span>`;
+    }
+  }
+
+  return `<div class="diff"><div class="diff-row">${top}</div><div class="diff-row">${bottom}</div></div>`;
+}

ezquiz/static/js/main.js

@@ -0,0 +1,14 @@
+/**
+ * Main entry point
+ * Initializes all view modules
+ */
+
+import { initSetup } from './views/setup.js';
+import { initQuiz } from './views/quiz.js';
+import { initSidebar } from './views/sidebar.js';
+
+document.addEventListener('DOMContentLoaded', () => {
+  initSetup();
+  initSidebar();
+  initQuiz();
+});

ezquiz/static/js/state.js

@@ -0,0 +1,36 @@
+/**
+ * State management module
+ * Encapsulates all application state
+ */
+
+class State {
+  constructor() {
+    this.selectedCategories = [];
+    this.currentQuestion = null;
+    this.questionNumber = 0;
+    this.showingResult = false;
+  }
+
+  selectCategories(categories) {
+    this.selectedCategories = [...categories];
+  }
+
+  setQuestion(question) {
+    this.currentQuestion = question;
+    this.questionNumber++;
+    this.showingResult = false;
+  }
+
+  markShowingResult() {
+    this.showingResult = true;
+  }
+
+  reset() {
+    this.selectedCategories = [];
+    this.currentQuestion = null;
+    this.questionNumber = 0;
+    this.showingResult = false;
+  }
+}
+
+export const state = new State();

ezquiz/static/js/views/quiz.js

@@ -0,0 +1,185 @@
+/**
+ * Quiz view module
+ * Handles the question display and answer submission
+ */
+
+import { state } from '../state.js';
+import { submitAnswer, fetchNextQuestion } from '../api.js';
+import { showResult } from './results.js';
+
+const setupView = document.getElementById('setup-view');
+const quizView = document.getElementById('quiz-view');
+const questionText = document.getElementById('question-text');
+const answerInput = document.getElementById('answer-input');
+const questionCounter = document.getElementById('question-counter');
+const selectedCategoriesDisplay = document.getElementById('selected-categories-display');
+const submitBtn = document.getElementById('submit-btn');
+const questionContainer = document.getElementById('question-container');
+const resultContainer = document.getElementById('result-container');
+const contextContainer = document.getElementById('context-container');
+const questionContext = document.getElementById('question-context');
+
+/**
+ * Display the quiz interface with current question
+ * Supports both "simple" and "fill" question types
+ */
+export function showQuiz() {
+  setupView.classList.add('hidden');
+  quizView.classList.remove('hidden');
+  
+  // Reset UI for new question
+  resultContainer.classList.add('hidden');
+  resultContainer.innerHTML = '';
+  questionContainer.classList.remove('hidden');
+  submitBtn.textContent = 'Submit Answer (Enter)';
+  
+  questionCounter.textContent = `Question ${state.questionNumber}`;
+  selectedCategoriesDisplay.textContent = state.selectedCategories.join(', ');
+  
+  const question = state.currentQuestion;
+  
+  // Display context if present
+  if (question.context) {
+    questionContext.textContent = question.context;
+    contextContainer.classList.remove('hidden');
+  } else {
+    contextContainer.classList.add('hidden');
+    questionContext.textContent = '';
+  }
+  
+  if (question.type === 'fill') {
+    renderFillQuestion(question);
+  } else {
+    renderSimpleQuestion(question);
+  }
+}
+
+/**
+ * Render a simple question with text and input field below
+ * @param {Object} question - Question object with text
+ */
+function renderSimpleQuestion(question) {
+  questionContainer.innerHTML = `
+    <p id="question-text" class="text-xl text-gray-800 mb-4">${escapeHtml(question.text)}</p>
+    <input type="text" id="answer-input" 
+           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+           placeholder="Your answer...">
+  `;
+  
+  const input = document.getElementById('answer-input');
+  if (input) {
+    input.focus();
+  }
+}
+
+/**
+ * Render a fill-in-the-blank question with inline input
+ * @param {Object} question - Question object with text containing [...]
+ */
+function renderFillQuestion(question) {
+  const parts = question.text.split('[...]');
+  
+  if (parts.length !== 2) {
+    // Fallback to simple if [...] not found or appears multiple times
+    renderSimpleQuestion(question);
+    return;
+  }
+  
+  questionContainer.innerHTML = `
+    <div class="fill-container text-xl text-gray-800">
+      <span>${escapeHtml(parts[0])}</span>
+      <input type="text" id="answer-input" 
+             class="inline-input"
+             placeholder="">
+      <span>${escapeHtml(parts[1])}</span>
+    </div>
+  `;
+  
+  const input = document.getElementById('answer-input');
+  if (input) {
+    input.focus();
+  }
+}
+
+/**
+ * Escape HTML special characters
+ * @param {string} text - Text to escape
+ * @returns {string} Escaped text
+ */
+function escapeHtml(text) {
+  const div = document.createElement('div');
+  div.textContent = text;
+  return div.innerHTML;
+}
+
+/**
+ * Get the current answer from the input field
+ * @returns {string} The answer value
+ */
+function getAnswer() {
+  const input = document.getElementById('answer-input');
+  return input ? input.value.trim() : '';
+}
+
+/**
+ * Handle answer submission
+ */
+async function handleSubmit() {
+  if (state.showingResult) {
+    // Get next question
+    try {
+      const data = await fetchNextQuestion(state.selectedCategories);
+      
+      if (data.complete) {
+        alert('Quiz complete! Great job!');
+        import('./setup.js').then(({ resetSetup }) => resetSetup());
+        return;
+      }
+      
+      state.setQuestion(data.question);
+      showQuiz();
+    } catch (error) {
+      console.error('Error fetching question:', error);
+      alert('Failed to load next question. Please try again.');
+    }
+    return;
+  }
+
+  const answer = getAnswer();
+  
+  if (!answer) {
+    alert('Please enter an answer');
+    return;
+  }
+
+  try {
+    const data = await submitAnswer(
+      state.currentQuestion.category,
+      state.currentQuestion.seed,
+      answer
+    );
+    
+    state.markShowingResult();
+    showResult(data);
+  } catch (error) {
+    console.error('Error submitting answer:', error);
+    alert('Failed to submit answer. Please try again.');
+  }
+}
+
+/**
+ * Initialize the quiz view
+ */
+export function initQuiz() {
+  submitBtn.addEventListener('click', handleSubmit);
+  
+  // Enter key handler for quiz view
+  document.addEventListener('keypress', (e) => {
+    if (e.key === 'Enter' && !setupView.classList.contains('hidden')) {
+      return;
+    }
+    if (e.key === 'Enter' && !quizView.classList.contains('hidden')) {
+      handleSubmit();
+    }
+  });
+}

ezquiz/static/js/views/results.js

@@ -0,0 +1,65 @@
+/**
+ * Results view module
+ * Handles display of answer feedback and explanations
+ */
+
+import { renderTextDiff } from '../diff.js';
+import { state } from '../state.js';
+
+const submitBtn = document.getElementById('submit-btn');
+const questionContainer = document.getElementById('question-container');
+const resultContainer = document.getElementById('result-container');
+
+/**
+ * Display the result of an answer submission
+ * @param {Object} data - Result data from API
+ * @param {boolean} data.correct - Whether answer was correct
+ * @param {string} data.submitted_answer - User's answer
+ * @param {string} data.correct_answer - Correct answer
+ * @param {string} data.explanation - Explanation or "{textdiff}"
+ */
+export function showResult(data) {
+  questionContainer.classList.add('hidden');
+  resultContainer.classList.remove('hidden');
+  submitBtn.textContent = 'Next Question (Enter)';
+  
+  const isCorrect = data.correct;
+  const bgColor = isCorrect ? 'bg-green-100' : 'bg-red-100';
+  const textColor = isCorrect ? 'text-green-800' : 'text-red-800';
+  const icon = isCorrect ? '✓' : '✗';
+  const message = isCorrect ? 'Correct!' : 'Incorrect';
+  
+  // Check if explanation is textdiff placeholder
+  const isTextDiff = data.explanation === "{textdiff}";
+  
+  let explanationHtml = '';
+  if (!isCorrect && isTextDiff) {
+    explanationHtml = `
+      <div class="bg-gray-50 border-l-4 border-gray-400 p-4">
+        ${renderTextDiff(data.submitted_answer, data.correct_answer)}
+      </div>
+    `;
+  } else if (!isCorrect && data.explanation) {
+    explanationHtml = `<div class="bg-blue-50 border-l-4 border-blue-500 p-4"><p class="text-gray-700"><strong>Explanation:</strong> ${data.explanation}</p></div>`;
+  }
+  
+  resultContainer.innerHTML = `
+    <div class="${bgColor} border-l-4 ${isCorrect ? 'border-green-500' : 'border-red-500'} p-4 mb-4">
+      <div class="flex items-center">
+        <span class="text-2xl mr-3">${icon}</span>
+        <div>
+          <p class="font-bold ${textColor} text-lg">${message}</p>
+          <p class="text-gray-600 mt-1">Your answer: <span class="font-semibold">${data.submitted_answer}</span></p>
+          ${!isCorrect && !isTextDiff ? `<p class="text-gray-600 mt-1">Correct answer: <span class="font-semibold">${data.correct_answer}</span></p>` : ''}
+        </div>
+      </div>
+    </div>
+    ${explanationHtml}
+    <div class="mt-4 text-sm text-gray-500 text-center">Press Enter to continue</div>
+  `;
+  
+  // Blur focus to prevent double submission
+  if (document.activeElement) {
+    document.activeElement.blur();
+  }
+}

ezquiz/static/js/views/setup.js

@@ -0,0 +1,85 @@
+/**
+ * Setup view module
+ * Handles category selection and quiz initialization
+ */
+
+import { state } from '../state.js';
+import { showQuiz } from './quiz.js';
+import { fetchNextQuestion } from '../api.js';
+
+const setupView = document.getElementById('setup-view');
+const startBtn = document.getElementById('start-btn');
+
+/**
+ * Get selected categories from checkboxes
+ * @param {string} selector - Checkbox selector
+ * @returns {string[]} Selected category values
+ */
+function getSelectedCategories(selector) {
+  const checkboxes = document.querySelectorAll(selector);
+  return Array.from(checkboxes).map(cb => cb.value);
+}
+
+/**
+ * Sync sidebar checkboxes with current state
+ */
+function syncSidebarCategories() {
+  document.querySelectorAll('.sidebar-category-checkbox').forEach(cb => {
+    cb.checked = state.selectedCategories.includes(cb.value);
+  });
+}
+
+/**
+ * Load and display the first question
+ */
+async function loadFirstQuestion() {
+  try {
+    const data = await fetchNextQuestion(state.selectedCategories);
+    
+    if (data.complete) {
+      alert('Quiz complete! Great job!');
+      resetSetup();
+      return;
+    }
+    
+    state.setQuestion(data.question);
+    showQuiz();
+  } catch (error) {
+    console.error('Error fetching question:', error);
+    alert('Failed to load question. Please try again.');
+  }
+}
+
+/**
+ * Reset the setup view
+ */
+function resetSetup() {
+  setupView.classList.remove('hidden');
+  document.getElementById('quiz-view').classList.add('hidden');
+  
+  document.querySelectorAll('.category-checkbox, .sidebar-category-checkbox').forEach(cb => {
+    cb.checked = false;
+  });
+  
+  state.reset();
+}
+
+/**
+ * Initialize the setup view
+ */
+export function initSetup() {
+  startBtn.addEventListener('click', async () => {
+    const categories = getSelectedCategories('.category-checkbox:checked');
+    
+    if (categories.length === 0) {
+      alert('Please select at least one category');
+      return;
+    }
+    
+    state.selectCategories(categories);
+    syncSidebarCategories();
+    await loadFirstQuestion();
+  });
+}
+
+export { resetSetup, getSelectedCategories };

ezquiz/static/js/views/sidebar.js

@@ -0,0 +1,57 @@
+/**
+ * Sidebar view module
+ * Handles category updates during quiz
+ */
+
+import { state } from '../state.js';
+import { fetchNextQuestion } from '../api.js';
+import { showQuiz } from './quiz.js';
+
+const updateCategoriesBtn = document.getElementById('update-categories-btn');
+
+/**
+ * Get selected categories from sidebar checkboxes
+ * @returns {string[]} Selected category values
+ */
+function getSidebarCategories() {
+  const checkboxes = document.querySelectorAll('.sidebar-category-checkbox:checked');
+  return Array.from(checkboxes).map(cb => cb.value);
+}
+
+/**
+ * Update categories and load next question
+ */
+async function handleUpdateCategories() {
+  const categories = getSidebarCategories();
+  
+  if (categories.length === 0) {
+    alert('Please select at least one category');
+    return;
+  }
+  
+  state.selectCategories(categories);
+  
+  try {
+    const data = await fetchNextQuestion(state.selectedCategories);
+    
+    if (data.complete) {
+      alert('Quiz complete! Great job!');
+      const { resetSetup } = await import('./setup.js');
+      resetSetup();
+      return;
+    }
+    
+    state.setQuestion(data.question);
+    showQuiz();
+  } catch (error) {
+    console.error('Error fetching question:', error);
+    alert('Failed to update categories. Please try again.');
+  }
+}
+
+/**
+ * Initialize the sidebar
+ */
+export function initSidebar() {
+  updateCategoriesBtn.addEventListener('click', handleUpdateCategories);
+}

ezquiz/templates/base.html

@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ title }}</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <style>
+        .diff {
+            font-family: "Courier New", monospace;
+            font-size: 1.15em;
+            white-space: pre;
+            margin-top: 1rem;
+        }
+        .diff-row {
+            margin-bottom: 2px;
+            line-height: 1.2;
+        }
+        .diff-green {
+            color: #2e7d32;
+            font-weight: bold;
+        }
+        .diff-red {
+            color: #c62828;
+            font-weight: bold;
+        }
+        .diff-grey {
+            color: #9e9e9e;
+        }
+        .inline-input {
+            display: inline-block;
+            max-width: 16ch;
+            border: none;
+            border-bottom: 2px solid #374151;
+            background: transparent;
+            padding: 0 4px;
+            font-size: inherit;
+            font-family: inherit;
+            outline: none;
+            color: inherit;
+            text-align: center;
+        }
+        .inline-input:focus {
+            border-bottom-color: #2563eb;
+        }
+        .fill-container {
+            line-height: 2;
+        }
+    </style>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <div class="container mx-auto px-4 py-8 max-w-4xl">
+        {% block content %}{% endblock %}
+    </div>
+    <script type="module" src="static/js/main.js"></script>
+</body>
+</html>

ezquiz/templates/components/quiz_view.html

@@ -0,0 +1,39 @@
+<!-- Quiz View with Sidebar -->
+<div id="quiz-view" class="hidden">
+    <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
+        {% include "components/sidebar.html" %}
+
+        <!-- Main Quiz Content -->
+        <div class="md:col-span-3">
+            <div class="bg-white rounded-lg shadow-md p-6">
+                <div class="flex justify-between items-center mb-6">
+                    <span id="question-counter" class="text-sm text-gray-500">Question 1</span>
+                    <span id="selected-categories-display" class="text-xs text-gray-400"></span>
+                </div>
+                
+                <!-- Context Display (hidden if empty) -->
+                <div id="context-container" class="mb-4 hidden">
+                    <p id="question-context" class="text-sm text-gray-500 italic whitespace-pre-wrap"></p>
+                </div>
+                
+                <!-- Question Container -->
+                <div id="question-container" class="mb-6">
+                    <p id="question-text" class="text-xl text-gray-800 mb-4"></p>
+                    <input type="text" id="answer-input" 
+                           class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                           placeholder="Your answer...">
+                </div>
+                
+                <button id="submit-btn" 
+                        class="w-full bg-green-600 text-white font-semibold py-3 px-6 rounded-lg hover:bg-green-700 transition duration-200">
+                    Submit Answer (Enter)
+                </button>
+
+                <!-- Result Container (initially hidden) -->
+                <div id="result-container" class="mt-6 hidden">
+                    <!-- Result content will be inserted here -->
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

ezquiz/templates/components/setup_view.html

@@ -0,0 +1,22 @@
+<!-- Initial Setup View -->
+<div id="setup-view" class="bg-white rounded-lg shadow-md p-6">
+    <h1 class="text-3xl font-bold text-gray-800 mb-6 text-center">{{ title }}</h1>
+    
+    <div class="mb-6">
+        <h2 class="text-lg font-semibold text-gray-700 mb-3">Select Categories:</h2>
+        <div class="space-y-2" id="categories-container">
+            {% for value in categories %}
+            <label class="flex items-center space-x-3 p-3 border rounded-lg hover:bg-gray-50 cursor-pointer transition">
+                <input type="checkbox" name="categories" value="{{ value }}" 
+                       class="w-5 h-5 text-blue-600 rounded focus:ring-blue-500 category-checkbox">
+                <span class="text-gray-700">{{ value }}</span>
+            </label>
+            {% endfor %}
+        </div>
+    </div>
+    
+    <button id="start-btn" 
+            class="w-full bg-blue-600 text-white font-semibold py-3 px-6 rounded-lg hover:bg-blue-700 transition duration-200">
+        Start Quiz
+    </button>
+</div>

ezquiz/templates/components/sidebar.html

@@ -0,0 +1,19 @@
+<!-- Sidebar with Categories -->
+<div class="md:col-span-1">
+    <div class="bg-white rounded-lg shadow-md p-4 sticky top-4">
+        <h3 class="font-semibold text-gray-700 mb-3">Categories</h3>
+        <div class="space-y-2" id="sidebar-categories">
+            {% for value in categories %}
+            <label class="flex items-center space-x-2 cursor-pointer">
+                <input type="checkbox" name="sidebar-categories" value="{{ value }}" 
+                       class="w-4 h-4 text-blue-600 rounded focus:ring-blue-500 sidebar-category-checkbox">
+                <span class="text-sm text-gray-600">{{ value }}</span>
+            </label>
+            {% endfor %}
+        </div>
+        <button id="update-categories-btn" 
+                class="w-full mt-4 bg-gray-600 text-white text-sm font-semibold py-2 px-4 rounded hover:bg-gray-700 transition duration-200">
+            Update
+        </button>
+    </div>
+</div>

ezquiz/templates/index.html

@@ -1,419 +1,6 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{{ title }}</title>
-    <script src="https://cdn.tailwindcss.com"></script>
-</head>
-<body class="bg-gray-50 min-h-screen">
-    <div class="container mx-auto px-4 py-8 max-w-4xl">
-        <!-- Initial Setup View -->
-        <div id="setup-view" class="bg-white rounded-lg shadow-md p-6">
-            <h1 class="text-3xl font-bold text-gray-800 mb-6 text-center">{{ title }}</h1>
-            
-            <div class="mb-6">
-                <h2 class="text-lg font-semibold text-gray-700 mb-3">Select Categories:</h2>
-                <div class="space-y-2" id="categories-container">
-                    {% for value in categories %}
-                    <label class="flex items-center space-x-3 p-3 border rounded-lg hover:bg-gray-50 cursor-pointer transition">
-                        <input type="checkbox" name="categories" value="{{ value }}" 
-                               class="w-5 h-5 text-blue-600 rounded focus:ring-blue-500 category-checkbox">
-                        <span class="text-gray-700">{{ value }}</span>
-                    </label>
-                    {% endfor %}
-                </div>
-            </div>
-            
-            <button id="start-btn" 
-                    class="w-full bg-blue-600 text-white font-semibold py-3 px-6 rounded-lg hover:bg-blue-700 transition duration-200">
-                Start Quiz
-            </button>
-        </div>
+{% extends "base.html" %}
 
-        <!-- Quiz View with Sidebar -->
-        <div id="quiz-view" class="hidden">
-            <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
-                <!-- Sidebar with Categories -->
-                <div class="md:col-span-1">
-                    <div class="bg-white rounded-lg shadow-md p-4 sticky top-4">
-                        <h3 class="font-semibold text-gray-700 mb-3">Categories</h3>
-                        <div class="space-y-2" id="sidebar-categories">
-                            {% for value in categories %}
-                            <label class="flex items-center space-x-2 cursor-pointer">
-                                <input type="checkbox" name="sidebar-categories" value="{{ value }}" 
-                                       class="w-4 h-4 text-blue-600 rounded focus:ring-blue-500 sidebar-category-checkbox">
-                                <span class="text-sm text-gray-600">{{ value }}</span>
-                            </label>
-                            {% endfor %}
-                        </div>
-                        <button id="update-categories-btn" 
-                                class="w-full mt-4 bg-gray-600 text-white text-sm font-semibold py-2 px-4 rounded hover:bg-gray-700 transition duration-200">
-                            Update
-                        </button>
-                    </div>
-                </div>
-
-                <!-- Main Quiz Content -->
-                <div class="md:col-span-3">
-                    <div class="bg-white rounded-lg shadow-md p-6">
-                        <div class="flex justify-between items-center mb-6">
-                            <span id="question-counter" class="text-sm text-gray-500">Question 1</span>
-                            <span id="selected-categories-display" class="text-xs text-gray-400"></span>
-                        </div>
-                        
-                        <!-- Question Container -->
-                        <div id="question-container" class="mb-6">
-                            <p id="question-text" class="text-xl text-gray-800 mb-4"></p>
-                            <input type="text" id="answer-input" 
-                                   class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                                   placeholder="Your answer...">
-                        </div>
-                        
-                        <button id="submit-btn" 
-                                class="w-full bg-green-600 text-white font-semibold py-3 px-6 rounded-lg hover:bg-green-700 transition duration-200">
-                            Submit Answer (Enter)
-                        </button>
-
-                        <!-- Result Container (initially hidden) -->
-                        <div id="result-container" class="mt-6 hidden">
-                            <!-- Result content will be inserted here -->
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-
-    <style>
-        .diff {
-            font-family: "Courier New", monospace;
-            font-size: 1.15em;
-            white-space: pre;
-            margin-top: 1rem;
-        }
-        .diff-row {
-            margin-bottom: 2px;
-            line-height: 1.2;
-        }
-        .diff-green {
-            color: #2e7d32;
-            font-weight: bold;
-        }
-        .diff-red {
-            color: #c62828;
-            font-weight: bold;
-        }
-        .diff-grey {
-            color: #9e9e9e;
-        }
-    </style>
-    <script>
-        // Store selected categories globally
-        let selectedCategories = [];
-        let currentQuestion = null;
-        let questionNumber = 0;
-        let showingResult = false;
-
-        // Text diff functions
-        function escapeChar(c) {
-            return c === " " ? "&nbsp;" : c;
-        }
-
-        function alignStrings(a, b) {
-            // Handle null/undefined inputs
-            a = a || "";
-            b = b || "";
-            
-            const dp = Array.from({ length: a.length + 1 }, () =>
-                Array(b.length + 1).fill(0),
-            );
-
-            for (let i = 0; i <= a.length; i++) dp[i][0] = i;
-            for (let j = 0; j <= b.length; j++) dp[0][j] = j;
-
-            for (let i = 1; i <= a.length; i++) {
-                for (let j = 1; j <= b.length; j++) {
-                    dp[i][j] =
-                        a[i - 1] === b[j - 1]
-                            ? dp[i - 1][j - 1]
-                            : 1 + Math.min(dp[i - 1][j], dp[i][j - 1], dp[i - 1][j - 1]);
-                }
-            }
-
-            let i = a.length,
-                j = b.length;
-            let aAlign = "",
-                bAlign = "";
-
-            while (i > 0 || j > 0) {
-                if (i > 0 && j > 0 && a[i - 1] === b[j - 1]) {
-                    aAlign = a[i - 1] + aAlign;
-                    bAlign = b[j - 1] + bAlign;
-                    i--;
-                    j--;
-                } else if (i > 0 && j > 0 && dp[i][j] === dp[i - 1][j - 1] + 1) {
-                    aAlign = a[i - 1] + aAlign;
-                    bAlign = b[j - 1] + bAlign;
-                    i--;
-                    j--;
-                } else if (i > 0 && dp[i][j] === dp[i - 1][j] + 1) {
-                    aAlign = a[i - 1] + aAlign;
-                    bAlign = " " + bAlign;
-                    i--;
-                } else {
-                    aAlign = " " + aAlign;
-                    bAlign = b[j - 1] + bAlign;
-                    j--;
-                }
-            }
-
-            return { aAlign, bAlign };
-        }
-
-        function renderTextDiff(userAnswer, correctAnswer) {
-            // Handle null/undefined inputs
-            userAnswer = String(userAnswer || "");
-            correctAnswer = String(correctAnswer || "");
-            
-            const { aAlign, bAlign } = alignStrings(userAnswer, correctAnswer);
-
-            let top = "";
-            let bottom = "";
-
-            for (let i = 0; i < aAlign.length; i++) {
-                const a = aAlign[i];
-                const b = bAlign[i];
-
-                // TOP ROW (user input)
-                if (a === " " && b !== " ") {
-                    top += `<span class="diff-grey">-</span>`;
-                } else if (a === b) {
-                    top += `<span class="diff-green">${escapeChar(a)}</span>`;
-                } else if (a !== " ") {
-                    top += `<span class="diff-red">${escapeChar(a)}</span>`;
-                }
-
-                // BOTTOM ROW (reference)
-                if (b === " ") {
-                    bottom += " ";
-                } else if (a === b) {
-                    bottom += `<span class="diff-green">${escapeChar(b)}</span>`;
-                } else {
-                    bottom += `<span class="diff-grey">${escapeChar(b)}</span>`;
-                }
-            }
-
-            return `<div class="diff"><div class="diff-row">${top}</div><div class="diff-row">${bottom}</div></div>`;
-        }
-
-        // Get DOM elements
-        const setupView = document.getElementById('setup-view');
-        const quizView = document.getElementById('quiz-view');
-        const startBtn = document.getElementById('start-btn');
-        const submitBtn = document.getElementById('submit-btn');
-        const updateCategoriesBtn = document.getElementById('update-categories-btn');
-        const questionText = document.getElementById('question-text');
-        const answerInput = document.getElementById('answer-input');
-        const resultContainer = document.getElementById('result-container');
-        const questionCounter = document.getElementById('question-counter');
-        const selectedCategoriesDisplay = document.getElementById('selected-categories-display');
-        const questionContainer = document.getElementById('question-container');
-
-        // Start button click handler
-        startBtn.addEventListener('click', async () => {
-            // Get selected categories
-            const checkboxes = document.querySelectorAll('.category-checkbox:checked');
-            selectedCategories = Array.from(checkboxes).map(cb => cb.value);
-            
-            if (selectedCategories.length === 0) {
-                alert('Please select at least one category');
-                return;
-            }
-
-            // Sync sidebar checkboxes
-            syncSidebarCategories();
-
-            // Fetch first question
-            await fetchNextQuestion();
-        });
-
-        // Update categories button click handler
-        updateCategoriesBtn.addEventListener('click', async () => {
-            const checkboxes = document.querySelectorAll('.sidebar-category-checkbox:checked');
-            selectedCategories = Array.from(checkboxes).map(cb => cb.value);
-            
-            if (selectedCategories.length === 0) {
-                alert('Please select at least one category');
-                return;
-            }
-
-            // Fetch next question with updated categories
-            await fetchNextQuestion();
-        });
-
-        // Sync sidebar checkboxes with selected categories
-        function syncSidebarCategories() {
-            document.querySelectorAll('.sidebar-category-checkbox').forEach(cb => {
-                cb.checked = selectedCategories.includes(cb.value);
-            });
-        }
-
-        // Fetch next question
-        async function fetchNextQuestion() {
-            try {
-                const response = await fetch('api/next', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({ categories: selectedCategories })
-                });
-                
-                const data = await response.json();
-                
-                if (data.complete) {
-                    // Quiz complete
-                    alert('Quiz complete! Great job!');
-                    resetQuiz();
-                } else {
-                    currentQuestion = data.question;
-                    questionNumber++;
-                    showQuestion();
-                }
-            } catch (error) {
-                console.error('Error fetching question:', error);
-                alert('Failed to load question. Please try again.');
-            }
-        }
-
-        // Submit button click handler
-        submitBtn.addEventListener('click', async () => {
-            if (showingResult) {
-                // If showing result, Enter goes to next question
-                await fetchNextQuestion();
-                return;
-            }
-
-            const answer = answerInput.value.trim();
-            
-            if (!answer) {
-                alert('Please enter an answer');
-                return;
-            }
-
-            try {
-                const response = await fetch('api/submit', {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/json'
-                    },
-                    body: JSON.stringify({
-                        category: currentQuestion.category,
-                        seed: currentQuestion.seed,
-                        answer: answer,
-                    })
-                });
-                
-                const data = await response.json();
-                showResult(data);
-            } catch (error) {
-                console.error('Error submitting answer:', error);
-                alert('Failed to submit answer. Please try again.');
-            }
-        });
-
-        // Show question view
-        function showQuestion() {
-            setupView.classList.add('hidden');
-            quizView.classList.remove('hidden');
-            
-            // Reset UI
-            resultContainer.classList.add('hidden');
-            resultContainer.innerHTML = '';
-            questionContainer.classList.remove('hidden');
-            submitBtn.textContent = 'Submit Answer (Enter)';
-            showingResult = false;
-            
-            questionText.textContent = currentQuestion.text;
-            questionCounter.textContent = `Question ${questionNumber}`;
-            selectedCategoriesDisplay.textContent = selectedCategories.join(', ');
-            answerInput.value = '';
-            answerInput.focus();
-        }
-
-        // Show result view
-        function showResult(data) {
-            showingResult = true;
-            questionContainer.classList.add('hidden');
-            resultContainer.classList.remove('hidden');
-            submitBtn.textContent = 'Next Question (Enter)';
-            
-            const isCorrect = data.correct;
-            const bgColor = isCorrect ? 'bg-green-100' : 'bg-red-100';
-            const textColor = isCorrect ? 'text-green-800' : 'text-red-800';
-            const icon = isCorrect ? '✓' : '✗';
-            const message = isCorrect ? 'Correct!' : 'Incorrect';
-            
-            // Check if explanation is textdiff placeholder
-            const isTextDiff = data.explanation === "{textdiff}";
-            
-            let explanationHtml = '';
-            if (!isCorrect && isTextDiff) {
-                explanationHtml = `
-                    <div class="bg-gray-50 border-l-4 border-gray-400 p-4">
-                        ${renderTextDiff(data.submitted_answer, data.correct_answer)}
-                    </div>
-                `;
-            } else if (!isCorrect && data.explanation) {
-                explanationHtml = `<div class="bg-blue-50 border-l-4 border-blue-500 p-4"><p class="text-gray-700"><strong>Explanation:</strong> ${data.explanation}</p></div>`;
-            }
-            
-            resultContainer.innerHTML = `
-                <div class="${bgColor} border-l-4 ${isCorrect ? 'border-green-500' : 'border-red-500'} p-4 mb-4">
-                    <div class="flex items-center">
-                        <span class="text-2xl mr-3">${icon}</span>
-                        <div>
-                            <p class="font-bold ${textColor} text-lg">${message}</p>
-                            <p class="text-gray-600 mt-1">Your answer: <span class="font-semibold">${data.submitted_answer}</span></p>
-                            ${!isCorrect && !isTextDiff ? `<p class="text-gray-600 mt-1">Correct answer: <span class="font-semibold">${data.correct_answer}</span></p>` : ''}
-                        </div>
-                    </div>
-                </div>
-                ${explanationHtml}
-                <div class="mt-4 text-sm text-gray-500 text-center">Press Enter to continue</div>
-            `;
-            
-            // Focus on document to capture Enter key
-            document.activeElement.blur();
-        }
-
-        // Reset quiz to initial state
-        function resetQuiz() {
-            quizView.classList.add('hidden');
-            setupView.classList.remove('hidden');
-            
-            // Uncheck all checkboxes
-            document.querySelectorAll('.category-checkbox, .sidebar-category-checkbox').forEach(cb => {
-                cb.checked = false;
-            });
-            
-            selectedCategories = [];
-            currentQuestion = null;
-            questionNumber = 0;
-            showingResult = false;
-        }
-
-        // Allow Enter key to submit answer or go to next question
-        document.addEventListener('keypress', (e) => {
-            if (e.key === 'Enter' && !setupView.classList.contains('hidden')) {
-                // Don't handle Enter on setup view
-                return;
-            }
-            if (e.key === 'Enter' && !quizView.classList.contains('hidden')) {
-                submitBtn.click();
-            }
-        });
-    </script>
-</body>
-</html>
+{% block content %}
+    {% include "components/setup_view.html" %}
+    {% include "components/quiz_view.html" %}
+{% endblock %}

{ezquiz-0.2.1.dist-info → ezquiz-0.3.0.dist-info}/METADATA

@@ -1,9 +1,9 @@
 Metadata-Version: 2.4
 Name: ezquiz
-Version: 0.2.1
+Version: 0.3.0
 Summary: Add your description here
 Author-email: Alejandro Rodriguez <alejandro.rodriguez@alexanderthamm.com>
-Requires-Python: >=3.14
+Requires-Python: >=3.12
 Requires-Dist: fastapi>=0.128.0
 Requires-Dist: jinja2>=3.1.6
 Requires-Dist: uvicorn>=0.40.0

ezquiz-0.3.0.dist-info/RECORD

@@ -0,0 +1,21 @@
+ezquiz/__init__.py,sha256=_Ycs0PzsU0K53tGDxZMRP1kQ-TvIrF2_hTYNniOymxo,109
+ezquiz/apigame.py,sha256=EVTuh_yzgaJzYIqfLz5G9kMhmuXeKtCS9V3YlBsAgV0,3073
+ezquiz/cligame.py,sha256=h_bs4Cm-44ibzpacIycEGaprnFWYKsyTJuyoeaGEYRk,325
+ezquiz/ezquiz.py,sha256=wlFp_bNcIvYGeAZjiibGnvtbvtDvbo-tD-9xBCNU08E,1393
+ezquiz/py.typed,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
+ezquiz/static/js/api.js,sha256=2cS5T9e-r-Z-xMUNXazqYDSLXF0oZ8EUoO7APu3IbqA,1205
+ezquiz/static/js/diff.js,sha256=XkKUXCdPkeM8dV6SB3E5SQTFNWJLuGYd2rrn-QSy4Z0,2918
+ezquiz/static/js/main.js,sha256=cd7Iy5Yy2ad3T4QU-DVFIDfgYeHNYBQYiiv8an6BB0k,306
+ezquiz/static/js/state.js,sha256=-BYxQRlJEabrf1cGwAWnsKvM_tqYhYTIrJT_kOyS88U,692
+ezquiz/static/js/views/quiz.js,sha256=4B2dBbviAlKYx6MnRSy0ljWNk9uUlGgyWIEXmF1a-k0,5266
+ezquiz/static/js/views/results.js,sha256=W2y8tYDIimZvg3oRHR9xvrvHNWNMQfwMGU_DXhJtr1g,2572
+ezquiz/static/js/views/setup.js,sha256=F7ieSzeewMfzxtsYz6E3kvkZbmR40o5TGZwH0KZAWgU,2103
+ezquiz/static/js/views/sidebar.js,sha256=6YMU54R8CzuiNjWBdNNU0-a4cfr13wQrGN1dfIj9QAk,1429
+ezquiz/templates/base.html,sha256=eURyfna3FsZ9GtA4t-XShBREubLOxX_vd0OXsGCOo20,1519
+ezquiz/templates/index.html,sha256=rO5jY2Ljn5o7PiZB_d_MeQsiC4B1WBIPCsVwr_5h5ZA,155
+ezquiz/templates/components/quiz_view.html,sha256=I--taugMtf_TubsdY56zTgZzwRAj2ao9k7k4ub7iOUU,1879
+ezquiz/templates/components/setup_view.html,sha256=LzPY7OLI5rqwF1BLDqRtmk3uoitPuDD2ouwpxVVfyHQ,1023
+ezquiz/templates/components/sidebar.html,sha256=xjxQpOEqTfGheQNLKtZcSsdKwgByEXA4pzMN4WVP3xo,931
+ezquiz-0.3.0.dist-info/METADATA,sha256=EvxxF0vIHQuDf5Aadl0FxCOpgWAa6Qzq6kgSJZo9kps,276
+ezquiz-0.3.0.dist-info/WHEEL,sha256=WLgqFyCfm_KASv4WHyYy0P3pM_m7J5L9k2skdKLirC8,87
+ezquiz-0.3.0.dist-info/RECORD,,

ezquiz-0.2.1.dist-info/RECORD

@@ -1,9 +0,0 @@
-ezquiz/__init__.py,sha256=_Ycs0PzsU0K53tGDxZMRP1kQ-TvIrF2_hTYNniOymxo,109
-ezquiz/apigame.py,sha256=bFuPDbf9oYRRiiemzTkoTaCJQixUdvlqorZJOZZhsTU,2552
-ezquiz/cligame.py,sha256=h_bs4Cm-44ibzpacIycEGaprnFWYKsyTJuyoeaGEYRk,325
-ezquiz/ezquiz.py,sha256=ix00WYO6Zy2EFaS1xHvW6dyzGIz7OdTRac7MCcHuGI4,941
-ezquiz/py.typed,sha256=47DEQpj8HBSa-_TImW-5JCeuQeRkm5NMpJWZG3hSuFU,0
-ezquiz/templates/index.html,sha256=iJnVwbbP1V-hEusURh8rUKya1MoMl6Yq-8MdOcsWAmI,17260
-ezquiz-0.2.1.dist-info/METADATA,sha256=AzH9WFdBq_bNODGnt3LSLosKaUiLHOxAnrXMBaIZbSk,276
-ezquiz-0.2.1.dist-info/WHEEL,sha256=WLgqFyCfm_KASv4WHyYy0P3pM_m7J5L9k2skdKLirC8,87
-ezquiz-0.2.1.dist-info/RECORD,,