Feature/quiz functionality

convert/convertBooks.ts

@@ -201,8 +201,9 @@ export async function convertBooks(
                             'quizzes',
                             book.id + '.json'
                         ),
-                        content: JSON.stringify(convertQuizBook(context, book))
+                        content: JSON.stringify(convertQuizBook(context, book), null, 2)
                     });
+                    process.stdout.write(` ${book.id}`);
                     break;
                 default:
                     bookConverted = true;
@@ -291,28 +292,30 @@ export async function convertBooks(
     };
 }
 
-type QuizAnswer = {
+export type QuizExplanation = {
+    text?: string;
+    audio?: string;
+};
+
+export type QuizAnswer = {
     //\aw or \ar
     correct: boolean;
     text?: string;
     image?: string;
     audio?: string;
-    explanation?: {
-        //\ae
-        text: string;
-        audio?: string;
-    };
+    explanation?: QuizExplanation;
 };
 
-type QuizQuestion = {
+export type QuizQuestion = {
     //\qu
     text: string;
     image?: string;
     audio?: string;
+    explanation?: QuizExplanation;
     answers: QuizAnswer[];
 };
 
-type Quiz = {
+export type Quiz = {
     id: string; //\id
     name?: string; //\qn
     shortName?: string; //\qs
@@ -359,7 +362,7 @@ function convertQuizBook(context: ConvertBookContext, book: Book): Quiz {
             const parsed = m.match(/([0-9]+)( *- *[0-9]+)? ([^\\\r\n]+)/i)!;
             return {
                 rangeMin: parseInt(parsed[1]),
-                rangeMax: parsed[2] ? parseInt(parsed[2]) : undefined,
+                rangeMax: parsed[2] ? parseInt(parsed[2].replace('-', '')) : parseInt(parsed[1]),
                 message: parsed[3]
             };
         }),
@@ -409,13 +412,30 @@ function convertQuizBook(context: ConvertBookContext, book: Book): Quiz {
                 }
                 break;
             case 'ae':
-                if (!question.answers[aCount - 1].explanation) {
-                    question.answers[aCount - 1].explanation = { text: '' };
-                }
-                if (hasAudioExtension(parsed[2])) {
-                    question.answers[aCount - 1].explanation!.audio = parsed[2];
-                } else {
-                    question.answers[aCount - 1].explanation!.text = parsed[2];
+                {
+                    const isAudio = hasAudioExtension(parsed[2]);
+                    const hasExplanationsInAnswers = isAudio
+                        ? question.answers.some((answer) => answer.explanation?.audio !== undefined)
+                        : question.answers.some((answer) => answer.explanation?.text != undefined);
+
+                    if (aCount == 0) {
+                        // Question-level explanation
+                        question.explanation = updateExplanation(question.explanation, parsed[2]);
+                    } else {
+                        if (aCount == 1 || hasExplanationsInAnswers) {
+                            // Answer-specific explanation
+                            question.answers[aCount - 1].explanation = updateExplanation(
+                                question.answers[aCount - 1].explanation,
+                                parsed[2]
+                            );
+                        } else {
+                            // Question-level explanation (same for all answers)
+                            question.explanation = updateExplanation(
+                                question.explanation,
+                                parsed[2]
+                            );
+                        }
+                    }
                 }
                 break;
         }
@@ -424,6 +444,21 @@ function convertQuizBook(context: ConvertBookContext, book: Book): Quiz {
     return quiz;
 }
 
+function updateExplanation(
+    explanation: QuizExplanation | undefined,
+    text: string
+): QuizExplanation {
+    if (!explanation) {
+        explanation = {};
+    }
+    if (hasAudioExtension(text)) {
+        explanation.audio = text;
+    } else {
+        explanation.text = text;
+    }
+    return explanation;
+}
+
 function convertScriptureBook(
     pk: SABProskomma,
     context: ConvertBookContext,

src/lib/components/BookSelector.svelte

@@ -12,7 +12,10 @@ The navbar component.
     import config from '$lib/data/config';
     import SelectList from './SelectList.svelte';
     import * as numerals from '$lib/scripts/numeralSystem';
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
 
+    export let displayLabel;
     $: book = $nextRef.book === '' ? $refs.book : $nextRef.book;
     $: chapter = $nextRef.chapter === '' ? $refs.chapter : $nextRef.chapter;
     $: verseCount = getVerseCount(chapter, chapters);
@@ -29,9 +32,11 @@ The navbar component.
     $: v = $t.Selector_Verse;
 
     let bookSelector;
-    $: label = config.bookCollections
-        .find((x) => x.id === $refs.collection)
-        .books.find((x) => x.id === book).name;
+    $: label =
+        displayLabel ??
+        config.bookCollections
+            .find((x) => x.id === $refs.collection)
+            .books.find((x) => x.id === book).name;
 
     function chapterCount(book) {
         let count = Object.keys(books.find((x) => x.bookCode === book).versesByChapters).length;
@@ -48,7 +53,20 @@ The navbar component.
     /**
      * Pushes reference changes to nextRef. Pushes final change to default reference.
      */
+
     async function navigateReference(e) {
+        // Handle special book navigation first
+        if (e.detail.tab === b && e.detail?.url) {
+            const book = e.detail.text;
+            addHistory({
+                collection: $refs.collection,
+                book,
+                chapter: '',
+                url: e.detail.url
+            });
+            goto(e.detail.url);
+            return;
+        }
         if (!showChapterSelector) {
             $nextRef.book = e.detail.text;
             await refs.set({ book: $nextRef.book, chapter: 1 });
@@ -104,6 +122,7 @@ The navbar component.
             verse: $nextRef.verse
         });
         document.activeElement.blur();
+        goto(`${base}/`);
     }
 
     function resetNavigation() {
@@ -113,24 +132,35 @@ The navbar component.
         nextRef.reset();
     }
 
-    /**list of books in current docSet*/
+    /**list of books, quizzes, and quiz groups in current docSet*/
     $: books = $refs.catalog.documents;
     /**list of chapters in current book*/
     $: chapters = books.find((d) => d.bookCode === book).versesByChapters;
 
+    function getBookUrl(book) {
+        let url;
+        if (book.type === 'quiz') {
+            url = `${base}/quiz/${$refs.collection}/${book.id}`;
+        }
+        return url;
+    }
+
     let bookGridGroup = ({ colId, bookLabel = 'abbreviation' }) => {
         let groups = [];
         var lastGroup = null;
 
         config.bookCollections
             .find((x) => x.id === colId)
             .books.forEach((book) => {
-                // Include books only in the catalog (i.e. only supported book types)
-                if (books.find((x) => x.bookCode === book.id)) {
+                const url = getBookUrl(book);
+                if (books.find((x) => x.bookCode === book.id) || url) {
                     let label = book[bookLabel] || book.name;
-                    let cell = { label: label, id: book.id };
+                    let cell = { label, id: book.id, url };
                     let group = book.testament || '';
-                    if ((lastGroup == null || group !== lastGroup) && config.mainFeatures['book-group-titles']) {
+                    if (
+                        (lastGroup == null || group !== lastGroup) &&
+                        config.mainFeatures['book-group-titles']
+                    ) {
                         // Create new group
                         groups.push({
                             header: book.testament
@@ -143,8 +173,8 @@ The navbar component.
                         lastGroup = group;
                     } else {
                         // Add Book to last group
-                        let cells = groups[groups.length - 1].cells;
-                        groups[groups.length - 1].cells = [...cells, cell];
+                        let cells = groups.at(-1).cells;
+                        groups.at(-1).cells = [...cells, cell];
                     }
                 }
             });

src/lib/components/HistoryCard.svelte

@@ -10,6 +10,7 @@ TODO:
     import { formatDateAndTime } from '$lib/scripts/dateUtils';
     import { base } from '$app/paths';
     import config from '$lib/data/config';
+    import { goto } from '$app/navigation';
     export let history: HistoryItem;
 
     $: bc = config.bookCollections.find((x) => x.id === history.collection);
@@ -22,21 +23,29 @@ TODO:
         : history.chapter;
     $: dateFormat = formatDateAndTime(new Date(history.date));
     $: textDirection = bc.style.textDirection;
-</script>
 
-<!-- history cards are alway LTR with the reference following the text direction -->
-<div class="history-item-block dy-card w-100 bg-base-100 shadow-lg my-4" style:direction="ltr">
-    <!-- svelte-ignore a11y-click-events-have-key-events -->
-    <a
-        style="text-decoration:none;"
-        href="{base}/"
-        on:click={() =>
+    function onHistoryClick() {
+        if (history.url) {
+            goto(history.url);
+        } else {
             refs.set({
                 docSet,
                 book: history.book,
                 chapter: history.chapter,
                 verse: history.verse
-            })}
+            })
+            goto(`${base}/`);
+        }
+    }
+</script>
+
+<!-- history cards are alway LTR with the reference following the text direction -->
+<div class="history-item-block dy-card w-100 bg-base-100 shadow-lg my-4" style:direction="ltr">
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div
+        style="text-decoration:none;"
+        on:click={onHistoryClick}
     >
         <div
             class="history-card grid grid-cols-1"
@@ -55,5 +64,5 @@ TODO:
             </div>
             <div class="history-item-date justify-self-start">{dateFormat}</div>
         </div>
-    </a>
+    </div>
 </div>

src/lib/components/SelectGrid.svelte

@@ -64,9 +64,12 @@ A component to display menu options in a grid.
         return color;
     };
 
-    function handleClick(opt: string) {
+    function handleClick(opt: any) {
+        const text = opt.id;
+        const url = opt?.url;
         dispatch('menuaction', {
-            text: opt
+            text,
+            url
         });
     }
 </script>
@@ -114,7 +117,7 @@ A component to display menu options in a grid.
             <!-- svelte-ignore a11y-click-events-have-key-events -->
             <!-- svelte-ignore a11y-no-static-element-interactions -->
             <span
-                on:click={() => handleClick(cell.id)}
+                on:click={() => handleClick(cell)}
                 id={cell.id}
                 class="dy-btn dy-btn-square dy-btn-ghost normal-case truncate text-clip"
                 style={cellStyle}

src/lib/components/SelectList.svelte

@@ -9,9 +9,12 @@ A component to display menu options in a list.
 
     const dispatch = createEventDispatcher();
 
-    function handleClick(opt: string) {
+    function handleClick(opt: any) {
+        const text = opt.id;
+        const url = opt?.url;
         dispatch('menuaction', {
-            text: opt
+            text,
+            url
         });
     }
 
@@ -32,7 +35,7 @@ A component to display menu options in a list.
                             <!-- svelte-ignore a11y-interactive-supports-focus -->
                             <span
                                 on:click={() =>
-                                    handleClick(group.cells[ri * group.cells.length + ci].id)}
+                                    handleClick(group.cells[ri * group.cells.length + ci])}
                                 class="menu p-0 cursor-pointer hover:bg-base-100 min-w-[16rem]"
                                 role="button"
                             >

src/lib/components/TabsMenu.svelte

@@ -18,6 +18,7 @@ A component to display tabbed menus.
     function handleMenuaction({ detail }: CustomEvent) {
         dispatch('menuaction', {
             text: detail.text,
+            url: detail?.url,
             tab: active
         });
     }

src/lib/data/history.ts

@@ -6,6 +6,7 @@ export interface HistoryItem {
     book: string;
     chapter: string;
     verse?: string;
+    url?: string;
 }
 interface History extends DBSchema {
     history: {
@@ -39,6 +40,7 @@ export async function addHistory(item: {
     book: string;
     chapter: string;
     verse?: string;
+    url?: string;
 }) {
     let history = await openHistory();
     if (nextTimer) {

src/lib/data/stores/audio.js

@@ -6,6 +6,11 @@ import config from '../config';
 setDefaultStorage('audioActive', config.mainFeatures['audio-turn-on-at-startup']);
 export const audioActive = writable(localStorage.audioActive === 'true');
 audioActive.subscribe((value) => (localStorage.audioActive = value));
+
+setDefaultStorage('quizAudioActive', true);
+export const quizAudioActive = writable(localStorage.quizAudioActive);
+quizAudioActive.subscribe((value) => (localStorage.quizAudioActive = value));
+
 /**which element should be highlighted as the audio is playing*/
 function createaudioHighlightElements() {
     const external = writable([]);

src/routes/quiz/[collection]/[id]/+page.js

@@ -0,0 +1,21 @@
+import { base } from '$app/paths';
+
+/** @type {import('./$types').PageLoad} */
+export async function load({ params, fetch }) {
+    const id = params.id;
+    const collection = params.collection;
+
+    try {
+        const response = await fetch(`${base}/collections/${collection}/quizzes/${id}.json`);
+
+        if (!response.ok) {
+            throw new Error('Failed to fetch quiz JSON file');
+        }
+
+        const quizData = await response.json();
+        return { quiz: quizData };
+    } catch (error) {
+        console.error('Error fetching quiz JSON file:', error);
+        return {};
+    }
+}