feat: added hint feature

src/VerseValidator.css

@@ -58,7 +58,7 @@
   font-size: 15px;
 }
 
-.answer-button-box {
+.verse-validator-button-box {
   display: flex;
   gap: 10px;
   padding-top: 10px;

src/VerseValidator.jsx

@@ -10,9 +10,17 @@ 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, 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 && (
+            <div className="hint-area">
+              <p className="hint-text">
+                Hint: {reference.split(' ').slice(0, referenceHintCount).join(' ')}
+              </p>
+              <button
+                onClick={() => setReferenceHintCount(prev => prev + 1)}
+                disabled={referenceHintCount >= reference.split(' ').length}
+              >
+                Next Word
+              </button>
+            </div>
+          )}
         </div>
       ) : (
         <h2>
@@ -292,12 +325,25 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
               setChapterTitle(value);
               validateChapterTitle(value);
             }}
-
           />
+          {hintBool && (
+            <div className="hint-area">
+              <p className="hint-text">
+                Hint: {chapterTitle.split(' ').slice(0, chapterTitleHintCount).join(' ')}
+              </p>
+              <button
+                onClick={() => setChapterTitleHintCount(prev => prev + 1)}
+                disabled={chapterTitleHintCount >= chapterTitle.split(' ').length}
+              >
+                Next Word
+              </button>
+            </div>
+          )}
         </div>
       )}
 
       {/* input box for title */}
+      <div>
         <label className="title-box-label">
           {t('verse_validator.input_title')} 
         </label>
@@ -321,10 +367,24 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
             setTitle(value);
             validateTitle(value);
           }}
-
         />
+        {hintBool && (
+          <div className="hint-area">
+            <p className="hint-text">
+              Hint: {title.split(' ').slice(0, titleHintCount).join(' ')}
+            </p>
+            <button
+              onClick={() => setTitleHintCount(prev => prev + 1)}
+              disabled={titleHintCount >= title.split(' ').length}
+            >
+              Next Word
+            </button>
+          </div>
+        )}
+      </div>
 
       {/* input box for verse */}
+      <div>
         <label className="verse-box-label">
           {t('verse_validator.input_verse')} 
         </label>
@@ -348,13 +408,29 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
             setVerse(value);
             validateVerse(value);
           }}
-
-
         />
+        {hintBool && (
+          <div className="hint-area">
+            <p className="hint-text">
+              Hint: {verse.split(' ').slice(0, verseHintCount).join(' ')}
+            </p>
+            <button
+              onClick={() => setVerseHintCount(prev => prev + 1)}
+              disabled={verseHintCount >= verse.split(' ').length}
+            >
+              Next Word
+            </button>
+          </div>
+        )}
+      </div>
 
-      {/* button to toggle show answer*/}
-      <div className="answer-button-box">
-        {/* <button onClick={() => setHintBool(!hintBool)}>Show Answer:</button> */}
+      {/* buttons to toggle per-block functionality*/}
+      <div className="verse-validator-button-box">
+        {/* hint button*/}
+        <button onClick={() => setHintBool(!hintBool)}>
+            {hintBool ? 'Hide Hints' : 'Show Hints'}
+        </button>
+        {/* show answer button*/}
         <button onClick={() => {
             // Toggle the diff display
             setDiffBool(prev => !prev);
@@ -363,7 +439,8 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
             if (!diffBool && onShowAnswer) {
                 onShowAnswer({ pack, title, reference });
             }
-        }}>Show Answer:</button>
+        }}>Show Answer</button>
+        {/* reset button*/}
         <button onClick={handleReset}>Reset</button>
       </div>