diff --git a/src/VerseValidator.css b/src/VerseValidator.css index 99f1427..5a5d2b8 100644 --- a/src/VerseValidator.css +++ b/src/VerseValidator.css @@ -58,7 +58,7 @@ font-size: 15px; } -.answer-button-box { +.verse-validator-button-box { display: flex; gap: 10px; padding-top: 10px; diff --git a/src/VerseValidator.jsx b/src/VerseValidator.jsx index d09b85b..55de04e 100644 --- a/src/VerseValidator.jsx +++ b/src/VerseValidator.jsx @@ -9,10 +9,18 @@ const STATE = { CORRECT: 2, }; - // function to render and handle logic of each of the cells -const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse } , toHideReference, liveValidation, clearKey, t, index, onShowAnswer}) => { // 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('') @@ -26,6 +34,12 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse const [isComposing, setIsComposing] = useState(false); const isInitialMount = useRef(true); + // State for hint word counts + const [referenceHintCount, setReferenceHintCount] = useState(0); + const [titleHintCount, setTitleHintCount] = useState(0); + const [chapterTitleHintCount, setChapterTitleHintCount] = useState(0); + const [verseHintCount, setVerseHintCount] = useState(0); + useEffect(() => { if (isInitialMount.current) { isInitialMount.current = false; @@ -54,6 +68,12 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse setVerse(''); setVerseBool(STATE.INCORRECT); setDiffBool(false); // optionally hide answer again + setHintBool(false); + // Reset hint counts + setReferenceHintCount(0); + setTitleHintCount(0); + setChapterTitleHintCount(0); + setVerseHintCount(0); }; @@ -259,6 +279,19 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse validateReference(value); }} /> + {hintBool && ( +
+

+ Hint: {reference.split(' ').slice(0, referenceHintCount).join(' ')} +

+ +
+ )} ) : (

@@ -292,69 +325,112 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse setChapterTitle(value); validateChapterTitle(value); }} - /> + {hintBool && ( +
+

+ Hint: {chapterTitle.split(' ').slice(0, chapterTitleHintCount).join(' ')} +

+ +
+ )} )} {/* input box for title */} - -