diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json index 55402f7..1325ade 100644 --- a/public/locales/en/translation.json +++ b/public/locales/en/translation.json @@ -15,7 +15,8 @@ "note_live_validation": "Check this box to enable live validation feedback as you type. Uncheck to only show correctness upon completion.", "pick_pack": "Pick your pack(s)", "tools": "Tools:", - "verses": "Verses:" + "verses": "Verses:", + "problem_verses_session": "Statistics (This Session):" }, "verse_validator": { "input_reference": "Input Verse Reference:", diff --git a/public/locales/kn/translation.json b/public/locales/kn/translation.json index 1106508..09b6a96 100644 --- a/public/locales/kn/translation.json +++ b/public/locales/kn/translation.json @@ -15,7 +15,8 @@ "note_live_validation": "Check this box to enable live validation feedback as you type. Uncheck to only show correctness upon completion.", "pick_pack": "Pick your pack(s)", "tools": "Tools:", - "verses": "Verses:" + "verses": "Verses:", + "problem_verses_session": "Statistics (This Session):" }, "verse_validator": { "input_reference": "Input Verse Reference: ", diff --git a/src/VerseSampler.jsx b/src/VerseSampler.jsx index 46eeb55..477835c 100644 --- a/src/VerseSampler.jsx +++ b/src/VerseSampler.jsx @@ -4,7 +4,7 @@ Implemented features: - create checklist from keys */ import fullVerseData from "./assets/verse.json" // the actual verse json data file -import { useState, useEffect, useMemo } from "react"; +import { useState, useEffect, useMemo, useCallback } from "react"; import CheckboxTree from 'react-checkbox-tree'; import 'react-checkbox-tree/lib/react-checkbox-tree.css'; import _ from 'underscore'; @@ -16,7 +16,7 @@ import logo from './assets/droplet.svg'; import { Suspense } from "react"; -const ArrayTester = ({ array, toHideReference, liveValidation, clearKey, translate}) => { +const ArrayTester = ({ array, toHideReference, liveValidation, clearKey, translate, onShowAnswer}) => { const list = array.map((element, index) => ( // key needs to be unique; chose 3 elements that will separate all elements )) return list @@ -99,6 +100,18 @@ function Page() { setClearKey(clearKey => clearKey + 1); }; + // New state for tracking problem verses within the session + const [sessionProblemVerses, setSessionProblemVerses] = useState({}); + + // Callback for when 'Show Answer' is clicked in VerseValidator + const handleShowAnswer = useCallback((verseIdentifier) => { + const key = `${verseIdentifier.pack}|${verseIdentifier.reference}`; + setSessionProblemVerses(prev => ({ + ...prev, + [key]: (prev[key] || 0) + 1 + })); + }, []); + // setup i18 for function const { t, i18n } = useTranslation(); @@ -200,6 +213,11 @@ function Page() { return toShuffle ? _.sample(list, testCount) : _.first(list, testCount); }, [VerseData, checked, testCount, toShuffle, shuffleKey]); + // Reset session problem verses when the testList changes (new session) + useEffect(() => { + setSessionProblemVerses({}); + }, [testList]); + return ( @@ -302,9 +320,25 @@ function Page() { liveValidation={liveValidation} clearKey={clearKey} // Pass clearKey down translate={t} + onShowAnswer={handleShowAnswer} /> } + {Object.keys(sessionProblemVerses).length > 0 && ( +
+

{t('main.problem_verses_session')}

+ +
+ )} +

Built on: {VITE_BUILD_DATE}

diff --git a/src/VerseValidator.jsx b/src/VerseValidator.jsx index 408f9a4..d09b85b 100644 --- a/src/VerseValidator.jsx +++ b/src/VerseValidator.jsx @@ -12,7 +12,7 @@ const STATE = { // function to render and handle logic of each of the cells -const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse } , toHideReference, liveValidation, clearKey, t, index}) => { // useful use of destructuring here +const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse } , toHideReference, liveValidation, clearKey, t, index, onShowAnswer}) => { // useful use of destructuring here const [inputReference, setReference] = useState('') const [referenceBool, setReferenceBool] = useState(STATE.INCORRECT) const [inputChapterTitle, setChapterTitle] = useState('') @@ -355,7 +355,15 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse {/* button to toggle show answer*/}
{/* */} - +