diff --git a/src/VerseSampler.jsx b/src/VerseSampler.jsx
index 0dba62c..53c3d32 100644
--- a/src/VerseSampler.jsx
+++ b/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 (
-
+
)
}
-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
-
+
))
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() {
(Otherwise cards will appear in sequential order)
+
+ {!toShuffle ?
+ <>
+
+ Set Hide Reference:
+
+
+
(If you also want to test the verse reference)
+ >:
+
}
+
+
+
Pick Your Packs:
diff --git a/src/VerseValidator.css b/src/VerseValidator.css
index 1636b05..214375c 100644
--- a/src/VerseValidator.css
+++ b/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;
diff --git a/src/VerseValidator.jsx b/src/VerseValidator.jsx
index 6c28307..cc8b52d 100644
--- a/src/VerseValidator.jsx
+++ b/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 (
-
{pack} - {reference}
+ {toHideReference ? (
+
+
+
+
+
+ ) : (
+
{pack} - {reference}
+ )}
{chapterTitle && (
@@ -122,8 +162,9 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
{/* This shows the answers*/}
{hintBool && (
<>
-
{chapterTitle}
-
{title}
+
{reference}
+
{chapterTitle}
+
{title}
{verse}
>
)}