Feat: introduce hide reference feature

src/VerseSampler.jsx

@@ -11,7 +11,7 @@ import _ from 'underscore';
 import './VerseSampler.css'
 import VerseValidator from "./VerseValidator";
 
-const GenerateTestList = ({ packs, testCount, toShuffle}) => {
+const GenerateTestList = ({ packs, testCount, toShuffle, toHideReference}) => {
   let testList = packs.reduce(
                           // grab all elements included checked in "packs"
                           (accumulator, currentValue) => accumulator.concat(VerseData[currentValue]),
@@ -19,14 +19,15 @@ const GenerateTestList = ({ packs, testCount, toShuffle}) => {
                         );
   testList = toShuffle ? _.sample(testList, testCount) : _.first(testList, testCount);
   return (
-    <ArrayTester array={testList} />
+    <ArrayTester array={testList} toHideReference={toHideReference} />
   )
 }
 
-const ArrayTester = ({ array }) => {
+const ArrayTester = ({ array, toHideReference }) => {
   const list = array.map((element) => (
     // key needs to be unique; chose 3 elements that will separate all elements
-    <VerseValidator key={element.pack + element.title + element.reference} element={element} />
+    <VerseValidator key={element.pack + element.title + element.reference}
+    element={element} toHideReference={toHideReference} />
   ))
   return list
 }
@@ -148,8 +149,21 @@ function App() {
   const handleShuffleCheckboxChange = () => {
     // Toggle the state when the checkbox is changed
     setShuffle(!toShuffle);
+    // additional state change to disable HideReference when shuffling
+    if (!toShuffle) {
+      setHideReference(false);
+    }
   };
 
+  // state for toHideReference
+  const [toHideReference, setHideReference] = useState(false);
+  // Function to handle checkbox change
+  const handleHideReferenceCheckboxChange = () => {
+    // Toggle the state when the checkbox is changed
+    setHideReference(!toHideReference);
+  };
+
+
 
   // refresh button for refresh
   const RefreshButton = ({ onClick }) => {
@@ -190,6 +204,23 @@ function App() {
       </h2>
       <p>(Otherwise cards will appear in sequential order)</p>
 
+      <div>
+        {!toShuffle ? 
+        <>
+          <h2>
+            Set Hide Reference:
+            <input
+              type="checkbox"
+              checked={toHideReference}
+              onChange={handleHideReferenceCheckboxChange}
+            />
+          </h2>
+          <p>(If you also want to test the verse reference)</p> 
+        </>:
+        <p></p>}
+      </div>
+
+
       <h2>Pick Your Packs:</h2>
       <CheckboxWidget
         checked={checked}
@@ -212,6 +243,7 @@ function App() {
         packs={checked}
         testCount={testCount}
         toShuffle={toShuffle}
+        toHideReference={toHideReference}
       />
 
     <hr />

src/VerseValidator.css

@@ -9,6 +9,16 @@
   max-width: 400px;
 }
 
+.reference-box {
+  min-width:400px;
+  height: 5vh;
+  display: block;
+  width: 99%;
+  border: 1px solid grey;
+  border-radius: 5px;
+  font-size: 15px;
+}
+
 .chapter-title-box {
   min-width:400px;
   height: 5vh;

src/VerseValidator.jsx

@@ -1,16 +1,40 @@
 import { useState } from "react";
-import "./VerseValidator.css"
+import "./VerseValidator.css";
+
 
 // function to render and handle logic of each of the cells
-const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse } }) => {  // useful use of destructuring here
-  const [inputVerse, setVerse] = useState('')
-  const [verseBool, setVerseBool] = useState(false)
-  const [inputTitle, setTitle] = useState('')
-  const [titleBool, setTitleBool] = useState(false)
+const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse } , toHideReference}) => {  // useful use of destructuring here
+
+  const [inputReference, setReference] = useState('')
+  const [referenceBool, setReferenceBool] = useState(false)
   const [inputChapterTitle, setChapterTitle] = useState('')
   const [chapterTitleBool, setChapterTitleBool] = useState(false)
+  const [inputTitle, setTitle] = useState('')
+  const [titleBool, setTitleBool] = useState(false)
+  const [inputVerse, setVerse] = useState('')
+  const [verseBool, setVerseBool] = useState(false)
   const[hintBool, setHintBool] = useState(false)
 
+
+  // function to check correctness of verse input
+  // so far only perform checking on full spelling of reference names
+  const referenceChange = (e) => {
+
+    const value = e.target.value;
+
+    const string1 = String(value)
+      .replace(/\s+/g, "")
+      .toLowerCase();
+    const string2 = String(reference)
+      .replace(/\s+/g, "")
+      .toLowerCase();
+
+    const bool = (string1 === string2);
+
+    setReference(value);
+    setReferenceBool(bool);
+  };
+
   {/* function to check correctness of verse input */}
   const verseChange = (e) => {
     const value = e.target.value;
@@ -75,7 +99,23 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
 
   return (
     <div className="VerseValidator">
+      {toHideReference ? (
+        <div>
+        <label className="reference-label" htmlFor="referenceBox">
+          Input Verse Reference:
+        </label>
+        <textarea
+          className={`reference-box${referenceBool ? ' correct' : ''}`}
+          type="text"
+          id="referenceBox"
+          name="referenceBox"
+          onChange={referenceChange}
+        />
+        </div>
+
+      ) : (
         <h2>{pack} - {reference}</h2>
+      )}
 
       {chapterTitle && (
         <div>
@@ -122,8 +162,9 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
       {/* This shows the answers*/} 
       {hintBool && (
         <>
-          <h3>{chapterTitle}</h3>
-          <h4>{title}</h4>
+          <p>{reference}</p>
+          <p>{chapterTitle}</p>
+          <p>{title}</p>
           <p>{verse}</p>
         </>
       )}