Feat: introduce hide reference feature
This commit is contained in:
parent
f79a92cf95
commit
9109554f45
|
@ -11,7 +11,7 @@ import _ from 'underscore';
|
||||||
import './VerseSampler.css'
|
import './VerseSampler.css'
|
||||||
import VerseValidator from "./VerseValidator";
|
import VerseValidator from "./VerseValidator";
|
||||||
|
|
||||||
const GenerateTestList = ({ packs, testCount, toShuffle}) => {
|
const GenerateTestList = ({ packs, testCount, toShuffle, toHideReference}) => {
|
||||||
let testList = packs.reduce(
|
let testList = packs.reduce(
|
||||||
// grab all elements included checked in "packs"
|
// grab all elements included checked in "packs"
|
||||||
(accumulator, currentValue) => accumulator.concat(VerseData[currentValue]),
|
(accumulator, currentValue) => accumulator.concat(VerseData[currentValue]),
|
||||||
|
@ -19,14 +19,15 @@ const GenerateTestList = ({ packs, testCount, toShuffle}) => {
|
||||||
);
|
);
|
||||||
testList = toShuffle ? _.sample(testList, testCount) : _.first(testList, testCount);
|
testList = toShuffle ? _.sample(testList, testCount) : _.first(testList, testCount);
|
||||||
return (
|
return (
|
||||||
<ArrayTester array={testList} />
|
<ArrayTester array={testList} toHideReference={toHideReference} />
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const ArrayTester = ({ array }) => {
|
const ArrayTester = ({ array, toHideReference }) => {
|
||||||
const list = array.map((element) => (
|
const list = array.map((element) => (
|
||||||
// key needs to be unique; chose 3 elements that will separate all elements
|
// 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
|
return list
|
||||||
}
|
}
|
||||||
|
@ -148,8 +149,21 @@ function App() {
|
||||||
const handleShuffleCheckboxChange = () => {
|
const handleShuffleCheckboxChange = () => {
|
||||||
// Toggle the state when the checkbox is changed
|
// Toggle the state when the checkbox is changed
|
||||||
setShuffle(!toShuffle);
|
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
|
// refresh button for refresh
|
||||||
const RefreshButton = ({ onClick }) => {
|
const RefreshButton = ({ onClick }) => {
|
||||||
|
@ -190,6 +204,23 @@ function App() {
|
||||||
</h2>
|
</h2>
|
||||||
<p>(Otherwise cards will appear in sequential order)</p>
|
<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>
|
<h2>Pick Your Packs:</h2>
|
||||||
<CheckboxWidget
|
<CheckboxWidget
|
||||||
checked={checked}
|
checked={checked}
|
||||||
|
@ -212,6 +243,7 @@ function App() {
|
||||||
packs={checked}
|
packs={checked}
|
||||||
testCount={testCount}
|
testCount={testCount}
|
||||||
toShuffle={toShuffle}
|
toShuffle={toShuffle}
|
||||||
|
toHideReference={toHideReference}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
|
@ -9,6 +9,16 @@
|
||||||
max-width: 400px;
|
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 {
|
.chapter-title-box {
|
||||||
min-width:400px;
|
min-width:400px;
|
||||||
height: 5vh;
|
height: 5vh;
|
||||||
|
|
|
@ -1,16 +1,40 @@
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import "./VerseValidator.css"
|
import "./VerseValidator.css";
|
||||||
|
|
||||||
|
|
||||||
// function to render and handle logic of each of the cells
|
// 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 VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse } , toHideReference}) => { // useful use of destructuring here
|
||||||
const [inputVerse, setVerse] = useState('')
|
|
||||||
const [verseBool, setVerseBool] = useState(false)
|
const [inputReference, setReference] = useState('')
|
||||||
const [inputTitle, setTitle] = useState('')
|
const [referenceBool, setReferenceBool] = useState(false)
|
||||||
const [titleBool, setTitleBool] = useState(false)
|
|
||||||
const [inputChapterTitle, setChapterTitle] = useState('')
|
const [inputChapterTitle, setChapterTitle] = useState('')
|
||||||
const [chapterTitleBool, setChapterTitleBool] = useState(false)
|
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)
|
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 */}
|
{/* function to check correctness of verse input */}
|
||||||
const verseChange = (e) => {
|
const verseChange = (e) => {
|
||||||
const value = e.target.value;
|
const value = e.target.value;
|
||||||
|
@ -75,7 +99,23 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="VerseValidator">
|
<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>
|
<h2>{pack} - {reference}</h2>
|
||||||
|
)}
|
||||||
|
|
||||||
{chapterTitle && (
|
{chapterTitle && (
|
||||||
<div>
|
<div>
|
||||||
|
@ -122,8 +162,9 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
|
||||||
{/* This shows the answers*/}
|
{/* This shows the answers*/}
|
||||||
{hintBool && (
|
{hintBool && (
|
||||||
<>
|
<>
|
||||||
<h3>{chapterTitle}</h3>
|
<p>{reference}</p>
|
||||||
<h4>{title}</h4>
|
<p>{chapterTitle}</p>
|
||||||
|
<p>{title}</p>
|
||||||
<p>{verse}</p>
|
<p>{verse}</p>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
Loading…
Reference in New Issue