Compare commits
No commits in common. "6b95c2fb75a44eab0199632e5e65606ff3d6a589" and "3a1f76d9da5057520e36713599f2dead2fe1432d" have entirely different histories.
6b95c2fb75
...
3a1f76d9da
|
|
@ -2,13 +2,13 @@
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/svg+xml" href="/droplet.svg" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<link
|
<link
|
||||||
rel="stylesheet"
|
rel="stylesheet"
|
||||||
href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
|
href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
|
||||||
/>
|
/>
|
||||||
<title>Scripture Memory Tester</title>
|
<title>Vite + React</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,6 @@
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-checkbox-tree": "^1.8.0",
|
"react-checkbox-tree": "^1.8.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-string-diff": "^0.2.0",
|
|
||||||
"underscore": "^1.13.6"
|
"underscore": "^1.13.6"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,5 @@
|
||||||
lockfileVersion: '6.0'
|
lockfileVersion: '6.0'
|
||||||
|
|
||||||
settings:
|
|
||||||
autoInstallPeers: true
|
|
||||||
excludeLinksFromLockfile: false
|
|
||||||
|
|
||||||
dependencies:
|
dependencies:
|
||||||
'@fontsource/montserrat':
|
'@fontsource/montserrat':
|
||||||
specifier: ^4.5.14
|
specifier: ^4.5.14
|
||||||
|
|
@ -17,9 +13,6 @@ dependencies:
|
||||||
react-dom:
|
react-dom:
|
||||||
specifier: ^18.2.0
|
specifier: ^18.2.0
|
||||||
version: 18.2.0(react@18.2.0)
|
version: 18.2.0(react@18.2.0)
|
||||||
react-string-diff:
|
|
||||||
specifier: ^0.2.0
|
|
||||||
version: 0.2.0(react@18.2.0)
|
|
||||||
underscore:
|
underscore:
|
||||||
specifier: ^1.13.6
|
specifier: ^1.13.6
|
||||||
version: 1.13.6
|
version: 1.13.6
|
||||||
|
|
@ -845,11 +838,6 @@ packages:
|
||||||
object-keys: 1.1.1
|
object-keys: 1.1.1
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/diff@4.0.2:
|
|
||||||
resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
|
|
||||||
engines: {node: '>=0.3.1'}
|
|
||||||
dev: false
|
|
||||||
|
|
||||||
/doctrine@2.1.0:
|
/doctrine@2.1.0:
|
||||||
resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
|
resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
|
||||||
engines: {node: '>=0.10.0'}
|
engines: {node: '>=0.10.0'}
|
||||||
|
|
@ -1741,16 +1729,6 @@ packages:
|
||||||
engines: {node: '>=0.10.0'}
|
engines: {node: '>=0.10.0'}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
/react-string-diff@0.2.0(react@18.2.0):
|
|
||||||
resolution: {integrity: sha512-wB8Dr2T8CD/nuRMSEs9PHQ08e+o4a65SmkMZYrZRIEFzrbFpyrb9GuDmBwE7dxqcw06CqrLWXEuibUDJQX60LQ==}
|
|
||||||
engines: {node: '>=10'}
|
|
||||||
peerDependencies:
|
|
||||||
react: '>=16'
|
|
||||||
dependencies:
|
|
||||||
diff: 4.0.2
|
|
||||||
react: 18.2.0
|
|
||||||
dev: false
|
|
||||||
|
|
||||||
/react@18.2.0:
|
/react@18.2.0:
|
||||||
resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
|
resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
|
||||||
engines: {node: '>=0.10.0'}
|
engines: {node: '>=0.10.0'}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
|
||||||
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M19 13.8C19 17.7764 15.866 21 12 21C8.13401 21 5 17.7764 5 13.8C5 12.8452 5.18069 11.9338 5.50883 11.1C6.54726 8.46135 12 3 12 3C12 3 17.4527 8.46135 18.4912 11.1C18.8193 11.9338 19 12.8452 19 13.8Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 522 B |
|
|
@ -0,0 +1 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
|
|
@ -15,16 +15,4 @@
|
||||||
|
|
||||||
.test-count-box-label {
|
.test-count-box-label {
|
||||||
padding: 5px
|
padding: 5px
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
.rct-icon {
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
|
||||||
.rct-icon {
|
|
||||||
color: black;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -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, toHideReference}) => {
|
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]),
|
||||||
|
|
@ -19,15 +19,13 @@ const GenerateTestList = ({ packs, testCount, toShuffle, toHideReference}) => {
|
||||||
);
|
);
|
||||||
testList = toShuffle ? _.sample(testList, testCount) : _.first(testList, testCount);
|
testList = toShuffle ? _.sample(testList, testCount) : _.first(testList, testCount);
|
||||||
return (
|
return (
|
||||||
<ArrayTester array={testList} toHideReference={toHideReference} />
|
<ArrayTester array={testList} />
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const ArrayTester = ({ array, toHideReference }) => {
|
const ArrayTester = ({ array }) => {
|
||||||
const list = array.map((element) => (
|
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
|
return list
|
||||||
}
|
}
|
||||||
|
|
@ -131,7 +129,7 @@ function App() {
|
||||||
|
|
||||||
// initialize state variable testCount
|
// initialize state variable testCount
|
||||||
// purpose: to set number of verses to test
|
// purpose: to set number of verses to test
|
||||||
const [testCount, setTestCount] = useState(15)
|
const [testCount, setTestCount] = useState(5)
|
||||||
const testCountChange = (e) => {
|
const testCountChange = (e) => {
|
||||||
const value = e.target.value
|
const value = e.target.value
|
||||||
setTestCount(value)
|
setTestCount(value)
|
||||||
|
|
@ -149,21 +147,8 @@ 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 }) => {
|
||||||
|
|
@ -188,12 +173,9 @@ function App() {
|
||||||
type="text"
|
type="text"
|
||||||
id="testCountBox"
|
id="testCountBox"
|
||||||
name="testCountBox"
|
name="testCountBox"
|
||||||
placeholder={testCount}
|
|
||||||
onChange={testCountChange}
|
onChange={testCountChange}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<p>(It will only give you as many verses as there are in selected packs)</p>
|
|
||||||
|
|
||||||
<h2>
|
<h2>
|
||||||
Set Shuffle:
|
Set Shuffle:
|
||||||
<input
|
<input
|
||||||
|
|
@ -204,23 +186,6 @@ 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}
|
||||||
|
|
@ -243,12 +208,12 @@ function App() {
|
||||||
packs={checked}
|
packs={checked}
|
||||||
testCount={testCount}
|
testCount={testCount}
|
||||||
toShuffle={toShuffle}
|
toShuffle={toShuffle}
|
||||||
toHideReference={toHideReference}
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<p><x-small> Built on: {VITE_BUILD_DATE} </x-small></p>
|
<p><x-small>last updated: November 9, 2023</x-small></p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,78 +1,38 @@
|
||||||
.App {
|
|
||||||
max-width: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.VerseValidator {
|
.VerseValidator {
|
||||||
padding-block: 1px 10px;
|
padding: 5px;
|
||||||
border-top: 1px solid black;
|
border: 1px;
|
||||||
max-width: 400px;
|
border-style: solid;
|
||||||
|
max-width: 618px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.reference-box {
|
.title-box {
|
||||||
max-width:400px;
|
/*padding: 5px;*/
|
||||||
height: 5vh;
|
height: 3vh;
|
||||||
display: block;
|
display: block;
|
||||||
width: 99%;
|
width: 100%;
|
||||||
border: 1px solid grey;
|
border: 0;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chapter-title-box {
|
.chapter-title-box {
|
||||||
max-width:400px;
|
/*padding: 5px;*/
|
||||||
height: 5vh;
|
height: 3vh;
|
||||||
display: block;
|
display: block;
|
||||||
width: 99%;
|
width: 100%;
|
||||||
border: 1px solid grey;
|
border: 0;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-box {
|
|
||||||
max-width: 400px;
|
|
||||||
height: 5vh;
|
|
||||||
display: block;
|
|
||||||
width: 99%;
|
|
||||||
border: 1px solid grey;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.verse-box {
|
.verse-box {
|
||||||
max-width:400px;
|
/*padding: 5px;*/
|
||||||
height: 10vh;
|
height: 10vh;
|
||||||
display: block;
|
display: block;
|
||||||
width: 99%;
|
width: 100%;
|
||||||
border: 1px solid grey;
|
border: 0;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.answer-button-box {
|
|
||||||
display: flex;
|
|
||||||
gap: 10px;
|
|
||||||
padding-top: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.answer-box {
|
|
||||||
width: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.diff-box {
|
|
||||||
width: 80%;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
|
||||||
.correct {
|
|
||||||
background-color: #e6ffe6; /* Change the background color as needed */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
.correct {
|
|
||||||
background-color: #495749; /* Change the background color as needed */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
||||||
|
|
@ -1,43 +1,15 @@
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import "./VerseValidator.css";
|
import "./VerseValidator.css"
|
||||||
import { StringDiff } from "react-string-diff";
|
|
||||||
|
|
||||||
|
const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse } }) => {
|
||||||
// function to render and handle logic of each of the cells
|
|
||||||
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 [inputVerse, setVerse] = useState('')
|
||||||
const [verseBool, setVerseBool] = useState(false)
|
const [verseBool, setVerseBool] = useState(false)
|
||||||
|
const [inputTitle, setTitle] = useState('')
|
||||||
|
const [titleBool, setTitleBool] = useState(false)
|
||||||
|
const [inputChapterTitle, setChapterTitle] = useState('')
|
||||||
|
const [chapterTitleBool, setChapterTitleBool] = useState(false)
|
||||||
const[hintBool, setHintBool] = useState(false)
|
const[hintBool, setHintBool] = useState(false)
|
||||||
const[diffBool, setDiffBool] = 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 verseChange = (e) => {
|
||||||
const value = e.target.value;
|
const value = e.target.value;
|
||||||
let string1 = value;
|
let string1 = value;
|
||||||
|
|
@ -57,7 +29,6 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
|
||||||
setVerseBool(bool);
|
setVerseBool(bool);
|
||||||
};
|
};
|
||||||
|
|
||||||
{/* function to check correctness of title input */}
|
|
||||||
const titleChange = (e) => {
|
const titleChange = (e) => {
|
||||||
const value = e.target.value;
|
const value = e.target.value;
|
||||||
let string1 = value;
|
let string1 = value;
|
||||||
|
|
@ -77,8 +48,6 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
|
||||||
setTitleBool(bool);
|
setTitleBool(bool);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
{/* function to check correctness of chapter title input */}
|
|
||||||
const chapterTitleChange = (e) => {
|
const chapterTitleChange = (e) => {
|
||||||
const value = e.target.value;
|
const value = e.target.value;
|
||||||
let string1 = value;
|
let string1 = value;
|
||||||
|
|
@ -98,124 +67,75 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
|
||||||
setChapterTitleBool(bool);
|
setChapterTitleBool(bool);
|
||||||
};
|
};
|
||||||
|
|
||||||
const DiffViewer = ({oldValue, newValue}) => {
|
|
||||||
const string1 = String(oldValue)
|
|
||||||
.replace(/[^\w\s]/g, "")
|
|
||||||
.toLowerCase();
|
|
||||||
|
|
||||||
const string2 = String(newValue)
|
|
||||||
.replace(/[^\w\s]/g, "")
|
|
||||||
.toLowerCase();
|
|
||||||
|
|
||||||
return (<StringDiff oldValue={string1} newValue={string2} diffMethod="diffWords" />)
|
|
||||||
|
let result = "";
|
||||||
|
|
||||||
|
if (chapterTitle) {
|
||||||
|
if (chapterTitleBool && titleBool && verseBool) {
|
||||||
|
result = "Correct"
|
||||||
|
} else {
|
||||||
|
result = ""
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (titleBool && verseBool) {
|
||||||
|
result = "Correct"
|
||||||
|
} else {
|
||||||
|
result = ""
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="VerseValidator">
|
<div className="VerseValidator">
|
||||||
{/* toggle hiding reference */}
|
<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>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* toggle chapterTitle */}
|
|
||||||
{chapterTitle && (
|
{chapterTitle && (
|
||||||
<div>
|
<>
|
||||||
<label className="main-title-box-label" htmlFor="chapterTitleBox">
|
<label className="main-title-box-label" htmlFor="chapterTitleBox">
|
||||||
Input Chapter Title:
|
Input Chapter Title:
|
||||||
</label>
|
</label>
|
||||||
<textarea
|
<textarea
|
||||||
className={`chapter-title-box${chapterTitleBool ? " correct" : ""}`}
|
className="chapter-title-box"
|
||||||
type="text"
|
type="text"
|
||||||
id="chapterTitleBox"
|
id="chapterTitleBox"
|
||||||
name="chapterTitleBox"
|
name="chapterTitleBox"
|
||||||
onChange={chapterTitleChange}
|
onChange={chapterTitleChange}
|
||||||
/>
|
/>
|
||||||
</div>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* input box for title */}
|
|
||||||
<label className="title-box-label" htmlFor="titleBox">
|
<label className="title-box-label" htmlFor="titleBox">
|
||||||
Input Title:
|
Input Title:
|
||||||
</label>
|
</label>
|
||||||
<textarea
|
<textarea
|
||||||
className={`title-box${titleBool ? " correct" : ""}`}
|
className="title-box"
|
||||||
type="text"
|
type="text"
|
||||||
id="titleBox"
|
id="titleBox"
|
||||||
name="titleBox"
|
name="titleBox"
|
||||||
onChange={titleChange}
|
onChange={titleChange}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* input box for verse */}
|
|
||||||
<label className="verse-box-label" htmlFor="verseBox">
|
<label className="verse-box-label" htmlFor="verseBox">
|
||||||
Input Verse:
|
Input Verse:
|
||||||
</label>
|
</label>
|
||||||
<textarea
|
<textarea
|
||||||
className={`verse-box${verseBool ? " correct" : ""}`}
|
className="verse-box"
|
||||||
type="text"
|
type="text"
|
||||||
id="verseBox"
|
id="verseBox"
|
||||||
name="verseBox"
|
name="verseBox"
|
||||||
onChange={verseChange}
|
onChange={verseChange}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{/* button to toggle show answer*/}
|
<ul>{result}</ul>
|
||||||
<div className="answer-button-box">
|
|
||||||
<button onClick={() => setHintBool(!hintBool)}>Show Answer:</button>
|
<button onClick={() => setHintBool(!hintBool)}>Show Answer:</button>
|
||||||
<button onClick={() => setDiffBool(!diffBool)}>Show Diff:</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* This shows the answers*/}
|
|
||||||
{hintBool && (
|
{hintBool && (
|
||||||
<div className="answer-box">
|
<>
|
||||||
<h3>Answers</h3>
|
<h3>{chapterTitle}</h3>
|
||||||
<p>Reference:<br />{reference}</p>
|
<h4>{title}</h4>
|
||||||
{chapterTitle && (
|
<p>{verse}</p>
|
||||||
<>
|
</>
|
||||||
<p>ChapterTitle<br />{chapterTitle}</p>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
<p>Title:<br />{title}</p>
|
|
||||||
<p>Verse:<br />{verse}</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* This shows the difference between given and input answers*/}
|
|
||||||
{diffBool && (
|
|
||||||
<div className="diff-box">
|
|
||||||
<h3>Differences</h3>
|
|
||||||
{chapterTitle && (
|
|
||||||
<div>
|
|
||||||
ChapterTitle:
|
|
||||||
<DiffViewer
|
|
||||||
oldValue={chapterTitle}
|
|
||||||
newValue={inputChapterTitle}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
<p></p>
|
|
||||||
<div>
|
|
||||||
Title: <DiffViewer oldValue={title} newValue={inputTitle} />
|
|
||||||
</div>
|
|
||||||
<p></p>
|
|
||||||
<div>
|
|
||||||
Verse: <DiffViewer oldValue={verse} newValue={inputVerse} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -1454,7 +1454,7 @@
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"pack": "DEP 5",
|
"pack": "DEP 5",
|
||||||
"title": "Let no bitter root grow up",
|
"title": "Let no bitter root grow",
|
||||||
"chapterTitle": "Attitude of fellowship",
|
"chapterTitle": "Attitude of fellowship",
|
||||||
"reference": "Hebrews 12:15",
|
"reference": "Hebrews 12:15",
|
||||||
"verse": "See to it that no one misses the grace of God and that no bitter root grows up to cause trouble and defile many."
|
"verse": "See to it that no one misses the grace of God and that no bitter root grows up to cause trouble and defile many."
|
||||||
|
|
|
||||||
|
|
@ -4,7 +4,4 @@ import react from '@vitejs/plugin-react'
|
||||||
// https://vitejs.dev/config/
|
// https://vitejs.dev/config/
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [react()],
|
plugins: [react()],
|
||||||
define: {
|
|
||||||
VITE_BUILD_DATE: JSON.stringify(new Date().toLocaleString()),
|
|
||||||
},
|
|
||||||
})
|
})
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue