Feat: introduce option to enable/disable shuffling

This commit is contained in:
Richard Wong 2023-10-19 09:02:09 +09:00
parent b6136cb1ad
commit 8b7ab4b7a1
Signed by: richard
GPG Key ID: 5BD36BA2E9EE33D0
1 changed files with 28 additions and 5 deletions

View File

@ -11,13 +11,13 @@ import _ from 'underscore';
import './VerseSampler.css' import './VerseSampler.css'
import VerseValidator from "./VerseValidator"; import VerseValidator from "./VerseValidator";
const GenerateTestList = ({ packs, testCount}) => { const GenerateTestList = ({ packs, testCount, toShuffle}) => {
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]),
new Array() new Array()
); );
testList = _.sample(testList, testCount); testList = toShuffle ? _.sample(testList, testCount) : _.first(testList, testCount);
return ( return (
<ArrayTester array={testList} /> <ArrayTester array={testList} />
) )
@ -130,10 +130,20 @@ function App() {
const [expanded, setExpanded] = useState([]) const [expanded, setExpanded] = useState([])
// state for toShuffle
const [toShuffle, setShuffle] = useState(false);
// Function to handle checkbox change
const handleShuffleCheckboxChange = () => {
// Toggle the state when the checkbox is changed
setShuffle(!toShuffle);
};
return ( return (
<div className="App"> <div className="App">
<h1>Pick Number of Verses:</h1> <h1>Scripture Memory Tester</h1>
<h2>Pick Number of Verses:</h2>
<label className="test-count-box-label" htmlFor="testCountBox"> <label className="test-count-box-label" htmlFor="testCountBox">
Number of Verses Tested: Number of Verses Tested:
</label> </label>
@ -145,7 +155,16 @@ function App() {
onChange={testCountChange} onChange={testCountChange}
/> />
<h1>Pick Your Packs:</h1> <h2>
Set Shuffle:
<input
type="checkbox"
checked={toShuffle}
onChange={handleShuffleCheckboxChange}
/>
</h2>
<h2>Pick Your Packs:</h2>
<CheckboxWidget <CheckboxWidget
checked={checked} checked={checked}
expanded={expanded} expanded={expanded}
@ -154,7 +173,11 @@ function App() {
/> />
<h1>Verses:</h1> <h1>Verses:</h1>
<GenerateTestList packs={checked} testCount={testCount} /> <GenerateTestList
packs={checked}
testCount={testCount}
toShuffle={toShuffle}
/>
</div> </div>
); );
} }