Feat: introduce hide reference feature

This commit is contained in:
Richard Wong 2024-03-16 16:33:49 +09:00
parent f79a92cf95
commit 9109554f45
Signed by: richard
GPG Key ID: 5BD36BA2E9EE33D0
3 changed files with 96 additions and 13 deletions

View File

@ -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 />

View File

@ -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;

View File

@ -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">
<h2>{pack} - {reference}</h2>
{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>
</>
)}