Migrate Quizzes to Svelte 5 and TS (with minor improvements) (#958)

* Feature/migrate quizzes to Svelte 5

- Replaces run() with effect() for reactivity
- Uses $state and $derived for all dynamic values
- Handles audio playback, quiz progression, and result saving
- Ensures full client-side functionality without server code

* Fix quiz type definitions

* Convert quiz page load to TS

* Convert quiz page to TS

* Refactor and simplify quiz methods

* CR feedback

* Fix svelte-check error

* Fix IndexedDB types

---------

Co-authored-by: joslane <josiahjlane@gmail.com>

Author: FyreByrd

config/index.d.ts

@@ -63,7 +63,7 @@ export type BookConfig = {
     hashedFileName?: string; // currently just for HTML books
     audio: BookCollectionAudioConfig[];
     features: any;
-    quizFeatures?: any;
+    quizFeatures?: Record<string, string | boolean | number>;
     footer?: HTML;
     style?: StyleConfig;
     styles?: {
@@ -335,3 +335,47 @@ export type DictionaryConfig = AppConfig & {
         };
     }[];
 };
+
+export type QuizExplanation = {
+    text?: string;
+    audio?: string;
+};
+
+export type QuizAnswer = {
+    //\aw or \ar
+    correct: boolean;
+    text?: string;
+    image?: string;
+    audio?: string;
+    explanation?: QuizExplanation;
+    // field is used extensively in UI, adding here for type-safety
+    clicked?: boolean;
+};
+
+export type QuizQuestion = {
+    //\qu
+    text: string;
+    image?: string;
+    audio?: string;
+    columns?: number; //\ac
+    explanation?: QuizExplanation;
+    answers: QuizAnswer[];
+};
+
+export type Quiz = {
+    id: string; //\id
+    name?: string; //\qn
+    shortName?: string; //\qs
+    rightAnswerAudio?: string[]; //\ra
+    wrongAnswerAudio?: string[]; //\wa
+    questions: QuizQuestion[];
+    scoreMessageBefore?: string; //\sb
+    scoreMessageAfter?: string; //\sa
+    commentary?: {
+        //\sc
+        rangeMin: number;
+        rangeMax?: number;
+        message: string;
+    }[];
+    passScore?: number; //\pm
+};

convert/convertBooks.ts

@@ -3,7 +3,15 @@
 
 import * as fs from 'fs';
 import path, { basename, extname, join } from 'path';
-import type { BookConfig, BookTabConfig, ScriptureConfig } from '$config';
+import type {
+    BookConfig,
+    BookTabConfig,
+    Quiz,
+    QuizAnswer,
+    QuizExplanation,
+    QuizQuestion,
+    ScriptureConfig
+} from '$config';
 import { freeze, postQueries, queries } from '../sab-proskomma-tools';
 import { SABProskomma } from '../src/lib/sab-proskomma';
 import type { ConfigTaskOutput } from './convertConfig';
@@ -599,48 +607,6 @@ export async function convertBooks(
     };
 }
 
-export type QuizExplanation = {
-    text?: string;
-    audio?: string;
-};
-
-export type QuizAnswer = {
-    //\aw or \ar
-    correct: boolean;
-    text?: string;
-    image?: string;
-    audio?: string;
-    explanation?: QuizExplanation;
-};
-
-export type QuizQuestion = {
-    //\qu
-    text: string;
-    image?: string;
-    audio?: string;
-    columns?: number; //\ac
-    explanation?: QuizExplanation;
-    answers: QuizAnswer[];
-};
-
-export type Quiz = {
-    id: string; //\id
-    name?: string; //\qn
-    shortName?: string; //\qs
-    rightAnswerAudio?: string[]; //\ra
-    wrongAnswerAudio?: string[]; //\wa
-    questions: QuizQuestion[];
-    scoreMessageBefore?: string; //\sb
-    scoreMessageAfter?: string; //\sa
-    commentary?: {
-        //\sc
-        rangeMin: number;
-        rangeMax?: number;
-        message: string;
-    }[];
-    passScore?: number; //\pm
-};
-
 function convertHtmlBook(context: ConvertBookContext, book: BookConfig, files: any[]) {
     const srcFile = path.join(context.dataDir, 'books', context.bcId, book.file);
 

src/lib/data/quiz.ts

@@ -1,3 +1,4 @@
+import type { ScriptureConfig } from '$config';
 import config from '$lib/data/config';
 import { openDB, type DBSchema } from 'idb';
 
@@ -16,13 +17,13 @@ interface Quiz extends DBSchema {
         key: number;
         value: QuizScore;
         indexes: {
-            'collection, book': string;
+            'collection, book': [string, string];
             date: number;
         };
     };
 }
 
-let quizDB = null;
+let quizDB: Awaited<ReturnType<typeof openDB<Quiz>>> | null = null;
 async function openQuiz() {
     if (!quizDB) {
         quizDB = await openDB<Quiz>('quiz', 1, {
@@ -53,15 +54,18 @@ export async function addQuiz(item: {
             return;
         }
         const date = new Date()[Symbol.toPrimitive]('number');
-        const bookCollection = config.bookCollections.find((x) => x.id === item.collection);
-        const bookIndex = bookCollection.books.findIndex((x) => x.id === item.book);
+        const scriptConfig = config as ScriptureConfig;
+        const bookCollection = scriptConfig.bookCollections?.find((x) => x.id === item.collection);
+        const bookIndex = bookCollection?.books.findIndex((x) => x.id === item.book);
 
-        const nextItem = {
-            ...item,
-            date: date,
-            bookIndex: bookIndex
-        };
-        await quiz.add('quiz', nextItem);
+        if (bookIndex !== undefined && bookIndex >= 0) {
+            const nextItem = {
+                ...item,
+                date: date,
+                bookIndex: bookIndex
+            };
+            await quiz.add('quiz', nextItem);
+        }
     } catch (error) {
         console.error('Error adding quiz result:', error);
     }
@@ -81,8 +85,8 @@ export async function findQuiz(item: { collection: string; book: string }) {
     return result;
 }
 
-export async function checkQuizAccess(quizId) {
+export async function checkQuizAccess(quizId: string) {
     const quiz = await openQuiz();
-    const result = await quiz.getAllFromIndex('quiz', 'collection, book');
+    const result: QuizScore[] = await quiz.getAllFromIndex('quiz', 'collection, book');
     return result.some((item) => item.book === quizId && item.pass);
 }