richard
/
scripture_memory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 

- include nested checkboxes
- include hint button
- include test for titles
- increase size of textboxes
This commit is contained in:
Richard Wong 2023-05-09 17:42:17 +09:00
parent 5bfe82f9ba
commit b9d208ac53
Signed by: richard
GPG Key ID: 5BD36BA2E9EE33D0
10 changed files with 475 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -4,6 +4,10 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.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
rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
/>
<title>Vite + React</title> <title>Vite + React</title>
</head> </head>
<body> <body>

2
package.json
View File

@ -11,7 +11,9 @@
}, },
"dependencies": { "dependencies": {
"@fontsource/montserrat": "^4.5.14", "@fontsource/montserrat": "^4.5.14",
"@fortawesome/react-fontawesome": "^0.2.0",
"react": "^18.2.0", "react": "^18.2.0",
"react-checkbox-tree": "^1.8.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"underscore": "^1.13.6" "underscore": "^1.13.6"
}, },

55
pnpm-lock.yaml
View File

@ -4,9 +4,15 @@ dependencies:
'@fontsource/montserrat': '@fontsource/montserrat':
specifier: ^4.5.14 specifier: ^4.5.14
version: 4.5.14 version: 4.5.14
'@fortawesome/react-fontawesome':
specifier: ^0.2.0
version: 0.2.0(@fortawesome/fontawesome-svg-core@6.4.0)(react@18.2.0)
react: react:
specifier: ^18.2.0 specifier: ^18.2.0
version: 18.2.0 version: 18.2.0
react-checkbox-tree:
specifier: ^1.8.0
version: 1.8.0(react@18.2.0)
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)
@ -509,6 +515,31 @@ packages:
resolution: {integrity: sha512-fTvrteVzuFUePhr4QYBGoK8G/YHLJ3IhF1HhKg0AxcFvZajJT7rM7ULdmKLSd2PkX44R3aaFZq1zDbmjbGGI+w==} resolution: {integrity: sha512-fTvrteVzuFUePhr4QYBGoK8G/YHLJ3IhF1HhKg0AxcFvZajJT7rM7ULdmKLSd2PkX44R3aaFZq1zDbmjbGGI+w==}
dev: false dev: false
/@fortawesome/fontawesome-common-types@6.4.0:
resolution: {integrity: sha512-HNii132xfomg5QVZw0HwXXpN22s7VBHQBv9CeOu9tfJnhsWQNd2lmTNi8CSrnw5B+5YOmzu1UoPAyxaXsJ6RgQ==}
engines: {node: '>=6'}
requiresBuild: true
dev: false
/@fortawesome/fontawesome-svg-core@6.4.0:
resolution: {integrity: sha512-Bertv8xOiVELz5raB2FlXDPKt+m94MQ3JgDfsVbrqNpLU9+UE2E18GKjLKw+d3XbeYPqg1pzyQKGsrzbw+pPaw==}
engines: {node: '>=6'}
requiresBuild: true
dependencies:
'@fortawesome/fontawesome-common-types': 6.4.0
dev: false
/@fortawesome/react-fontawesome@0.2.0(@fortawesome/fontawesome-svg-core@6.4.0)(react@18.2.0):
resolution: {integrity: sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==}
peerDependencies:
'@fortawesome/fontawesome-svg-core': ~1 || ~6
react: '>=16.3'
dependencies:
'@fortawesome/fontawesome-svg-core': 6.4.0
prop-types: 15.8.1
react: 18.2.0
dev: false
/@humanwhocodes/config-array@0.11.8: /@humanwhocodes/config-array@0.11.8:
resolution: {integrity: sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==} resolution: {integrity: sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==}
engines: {node: '>=10.10.0'} engines: {node: '>=10.10.0'}
@ -765,6 +796,10 @@ packages:
supports-color: 7.2.0 supports-color: 7.2.0
dev: true dev: true
/classnames@2.3.2:
resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==}
dev: false
/color-convert@1.9.3: /color-convert@1.9.3:
resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==} resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
dependencies: dependencies:
@ -1504,6 +1539,10 @@ packages:
resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==} resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
dev: true dev: true
/lodash@4.17.21:
resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
dev: false
/loose-envify@1.4.0: /loose-envify@1.4.0:
resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==} resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
hasBin: true hasBin: true
@ -1530,7 +1569,6 @@ packages:
resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==} resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
hasBin: true hasBin: true
dev: true
/natural-compare@1.4.0: /natural-compare@1.4.0:
resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
@ -1543,7 +1581,6 @@ packages:
/object-assign@4.1.1: /object-assign@4.1.1:
resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
engines: {node: '>=0.10.0'} engines: {node: '>=0.10.0'}
dev: true
/object-inspect@1.12.3: /object-inspect@1.12.3:
resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==} resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==}
@ -1680,7 +1717,6 @@ packages:
loose-envify: 1.4.0 loose-envify: 1.4.0
object-assign: 4.1.1 object-assign: 4.1.1
react-is: 16.13.1 react-is: 16.13.1
dev: true
/punycode@2.3.0: /punycode@2.3.0:
resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==} resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
@ -1691,6 +1727,18 @@ packages:
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
dev: true dev: true
/react-checkbox-tree@1.8.0(react@18.2.0):
resolution: {integrity: sha512-ufC4aorihOvjLpvY1beab2hjVLGZbDTFRzw62foG0+th+KX7e/sdmWu/nD1ZS/U5Yr0rWGwedGH5GOtR0IkUXw==}
peerDependencies:
react: ^15.3.0 || ^16.0.0 || ^17.0.0 || ^18.0.0
dependencies:
classnames: 2.3.2
lodash: 4.17.21
nanoid: 3.3.6
prop-types: 15.8.1
react: 18.2.0
dev: false
/react-dom@18.2.0(react@18.2.0): /react-dom@18.2.0(react@18.2.0):
resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==} resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
peerDependencies: peerDependencies:
@ -1703,7 +1751,6 @@ packages:
/react-is@16.13.1: /react-is@16.13.1:
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==} resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
dev: true
/react-refresh@0.14.0: /react-refresh@0.14.0:
resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==} resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==}

71
src/ReactCheckboxTree.jsx Normal file
View File

@ -0,0 +1,71 @@
import React from 'react';
import { useState } from "react";
import CheckboxTree from 'react-checkbox-tree';
import 'react-checkbox-tree/lib/react-checkbox-tree.css';
// import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
const nodes = [
{
value: 'loa',
label: 'Lessons on Assurance'
},
{
value: 'tms60',
label: 'TMS60',
children: [
{ value: 'pack-a', label: 'Pack A' },
{ value: 'pack-b', label: 'Pack B' },
{ value: 'pack-c', label: 'Pack C' },
{ value: 'pack-d', label: 'Pack D' },
{ value: 'pack-e', label: 'Pack E' }
]
},
{
value: 'dep',
label: 'DEP',
children: [
{ value: 'dep1', label: 'DEP 1' },
{ value: 'dep2', label: 'DEP 2' },
{ value: 'dep3', label: 'DEP 3' },
{ value: 'dep4', label: 'DEP 4' }
]
}
];
// class Widget extends React.Component {
// state = {
// checked: [],
// expanded: [],
// };
//
// render() {
// return (
// <CheckboxTree
// nodes={nodes}
// checked={this.state.checked}
// expanded={this.state.expanded}
// onCheck={checked => this.setState({ checked })}
// onExpand={expanded => this.setState({ expanded })}
// />
// );
// }
// }
function Widget() {
const [checked, setChecked] = useState([])
const [expanded, setExpanded] = useState([])
console.log(checked)
return (
<div className="CheckboxTree">
<CheckboxTree
nodes={nodes}
checked={checked}
expanded={expanded}
onCheck={setChecked}
onExpand={setExpanded}
/>
</div>
);
}
export default Widget

11
src/VerseSampler.css
View File

@ -5,17 +5,6 @@
text-align: left; text-align: left;
} }
.VerseValidator {
padding: 5px;
border: 1px;
border-style: solid;
}
.verse-box {
padding: 5px;
}
.box-label { .box-label {
padding: 5px; padding: 5px;
} }

186
src/VerseSampler.jsx
View File

@ -5,95 +5,15 @@ Implemented features:
*/ */
import VerseData from "./assets/verse.json" import VerseData from "./assets/verse.json"
import { useState } from "react"; import { useState } from "react";
import CheckboxTree from 'react-checkbox-tree';
import 'react-checkbox-tree/lib/react-checkbox-tree.css';
import _ from 'underscore'; import _ from 'underscore';
import './VerseSampler.css' import './VerseSampler.css'
import VerseValidator from "./VerseValidator";
// const ArrayPrinter = ({ array }) => {
// const list = array.map((element, i) =>
// <div className="ArrayPrinter" key={i}>
// <li key={element.reference}>{element.reference}</li>
// <li key={element.title}>{element.title}</li>
// <li key={element.verse}>{element.verse}</li>
// </div>
// )
// return list
// }
const ArrayTester = ({ array }) => {
const list = array.map((element, i) => (
<VerseValidator element={element} />
))
return list
}
const VerseValidator = ({ element: { id, title, reference, verse } }) => {
const [inputVerse, setVerse] = useState('')
const [resultBool, setBool] = useState(false)
const verseChange = (e) => {
const value = e.target.value
let string1 = value;
let string2 = verse;
console.log(verse);
console.log(value);
string1 = String(string1).replace(/[^\w\s]/g, "").replace(/\s+/g, "").toLowerCase();
string2 = String(string2).replace(/[^\w\s]/g, "").replace(/\s+/g, "").toLowerCase();
const bool = string1 === string2;
setVerse(value)
setBool(bool)
}
return (
<div className="VerseValidator">
<label className='box-label' htmlFor='verseBox'>{reference}</label>
<input
className="verse-box"
type='text'
id='verseBox'
name='verseBox'
onChange={verseChange}
/>
<ul>{inputVerse}</ul>
<ul>{String(resultBool)}</ul>
</div>
)
}
const ButtonMapper = ({packs, setPacks}) => {
return (
packs.map(({ pack, include }, i) => (
<div key={i}>
<label htmlFor={i}>
<input
type="checkbox"
onChange={() => handleChange(setPacks, packs, include, i)}
checked={include}
id={i}
/>
<span>{pack}</span>
</label>
</div>
)
))}
const handleChange = (setPacks, packs, include, i) => {
// extract desired item
let tmp = packs[i];
tmp.include = !include;
// clone existing array
let packsClone = [...packs];
// assign modified item back
packsClone[i] = tmp;
setPacks([...packsClone]);
};
const GenerateTestList = ({ packs, testCount}) => { const GenerateTestList = ({ packs, testCount}) => {
let testList = packs.filter((pack) => pack.include) let testList = packs.reduce(
.map((element) => element.pack) // grab all elements included checked in "packs"
.reduce(
(accumulator, currentValue) => accumulator.concat(VerseData[currentValue]), (accumulator, currentValue) => accumulator.concat(VerseData[currentValue]),
new Array() new Array()
); );
@ -103,9 +23,65 @@ const GenerateTestList = ({ packs, testCount}) => {
) )
} }
const ArrayTester = ({ array }) => {
const list = array.map((element) => (
<VerseValidator key={element.reference} element={element} />
))
return list
}
const nodes = [
{
value: 'loa',
label: 'Lessons on Assurance'
},
{
value: 'tms60',
label: 'TMS60',
children: [
{ value: 'tms-60-pack-a', label: 'Pack A' },
{ value: 'tms-60-pack-b', label: 'Pack B' },
{ value: 'tms-60-pack-c', label: 'Pack C' },
{ value: 'tms-60-pack-d', label: 'Pack D' },
{ value: 'tms-60-pack-e', label: 'Pack E' }
]
},
{
value: 'dep',
label: 'DEP',
children: [
{ value: 'dep-1', label: 'DEP 1' },
{ value: 'dep-2', label: 'DEP 2' },
{ value: 'dep-3', label: 'DEP 3' },
{ value: 'dep-4', label: 'DEP 4' }
]
}
];
const CheckboxWidget = ({checked, expanded, setChecked, setExpanded}) => {
return (
<div className="CheckboxTree">
<CheckboxTree
nodes={nodes}
checked={checked}
expanded={expanded}
onCheck={setChecked}
onExpand={setExpanded}
/>
</div>
);
}
function App() { function App() {
// create checklist array for pack selection // create checklist array for pack selection
const packList = Object.keys(VerseData); const packList = Object.keys(VerseData);
// return a list of packObj's
// 1. packObj.pack for the pack name
// 2. packObj.include for whether to include the pack
const packObjList = packList.map((element) => { const packObjList = packList.map((element) => {
const packObj = new Object(); const packObj = new Object();
packObj.pack = element; packObj.pack = element;
@ -115,40 +91,52 @@ function App() {
) )
const [packs, setPacks] = useState(packObjList) const [packs, setPacks] = useState(packObjList)
// set number for number of samples // initialize state variable testCount
// purpose: to set number of verses to test
const [testCount, setTestCount] = useState(5) 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)
} }
// variables for pack selection
const [checked, setChecked] = useState([])
const [expanded, setExpanded] = useState([])
return ( return (
<div className="App"> <div className="App">
<h1>Pick Number of Verses:</h1> <h1>Pick Number of Verses:</h1>
<label className='test-count-box-label' htmlFor='testCountBox'>Number of Verses Tested:</label> <label className="test-count-box-label" htmlFor="testCountBox">
<input Number of Verses Tested:
</label>
<input
className="test-count-box" className="test-count-box"
type='text' type="text"
id='testCountBox' id="testCountBox"
name='testCountBox' name="testCountBox"
onChange={testCountChange} onChange={testCountChange}
/> />
<h1>Pick Your Packs:</h1> <h1>Pick Your Packs:</h1>
<ButtonMapper packs={packs} setPacks={setPacks} /> <CheckboxWidget
checked={checked}
expanded={expanded}
setChecked={setChecked}
setExpanded={setExpanded}
/>
<div className="PackDisplay"> {/*<div className="PackDisplay">
<h1>Packs Tested:</h1> <h1>Packs Tested:</h1>
{packs {checked
.filter((pack) => pack.include)
.map((element) => ( .map((element) => (
<li key={element.pack}>{element.pack}</li> <li key={element}>{element}</li>
))} ))}
</div> </div>*/}
<h1>Verses:</h1> <h1>Verses:</h1>
<GenerateTestList packs={packs} testCount={testCount} /> <GenerateTestList packs={checked} testCount={testCount} />
</div> </div>
); );
} }

38
src/VerseValidator.css Normal file
View File

@ -0,0 +1,38 @@
.VerseValidator {
padding: 5px;
border: 1px;
border-style: solid;
}
.title-box {
/*padding: 5px;*/
height: 3vh;
display: block;
width: 100%;
border: 0;
border-radius: 5px;
font-size: 15px;
}
.chapter-title-box {
/*padding: 5px;*/
height: 3vh;
display: block;
width: 100%;
border: 0;
border-radius: 5px;
font-size: 15px;
}
.verse-box {
/*padding: 5px;*/
height: 10vh;
display: block;
width: 100%;
border: 0;
border-radius: 5px;
font-size: 15px;
}

139
src/VerseValidator.jsx Normal file
View File

@ -0,0 +1,139 @@
import { useState } from "react";
import "./VerseValidator.css"
const VerseValidator = ({ element: { title, chapterTitle, reference, verse } }) => {
const [inputVerse, setVerse] = useState('')
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 verseChange = (e) => {
const value = e.target.value;
let string1 = value;
let string2 = verse;
string1 = String(string1)
.replace(/[^\w\s]/g, "")
.replace(/\s+/g, "")
.toLowerCase();
string2 = String(string2)
.replace(/[^\w\s]/g, "")
.replace(/\s+/g, "")
.toLowerCase();
const bool = string1 === string2;
setVerse(value);
setVerseBool(bool);
};
const titleChange = (e) => {
const value = e.target.value;
let string1 = value;
let string2 = title;
string1 = String(string1)
.replace(/[^\w\s]/g, "")
.replace(/\s+/g, "")
.toLowerCase();
string2 = String(string2)
.replace(/[^\w\s]/g, "")
.replace(/\s+/g, "")
.toLowerCase();
const bool = string1 === string2;
setTitle(value);
setTitleBool(bool);
};
const chapterTitleChange = (e) => {
const value = e.target.value;
let string1 = value;
let string2 = title;
string1 = String(string1)
.replace(/[^\w\s]/g, "")
.replace(/\s+/g, "")
.toLowerCase();
string2 = String(string2)
.replace(/[^\w\s]/g, "")
.replace(/\s+/g, "")
.toLowerCase();
const bool = string1 === string2;
setChapterTitle(value);
setChapterTitleBool(bool);
};
let result = "";
if (verseBool && titleBool) {
result = "Correct";
} else {
result = "";
}
return (
<div className="VerseValidator">
<h2>{reference}</h2>
{chapterTitle && (
<>
<label className="main-title-box-label" htmlFor="chapterTitleBox">
Input Chapter Title:
</label>
<textarea
className="chapter-title-box"
type="text"
id="chapterTitleBox"
name="chapterTitleBox"
onChange={chapterTitleChange}
/>
</>
)}
<label className="title-box-label" htmlFor="titleBox">
Input Title:
</label>
<textarea
className="title-box"
type="text"
id="titleBox"
name="titleBox"
onChange={titleChange}
/>
<label className="verse-box-label" htmlFor="verseBox">
Input Verse:
</label>
<textarea
className="verse-box"
type="text"
id="verseBox"
name="verseBox"
onChange={verseChange}
/>
<ul>{result}</ul>
<button onClick={() => setHintBool(!hintBool)}>Show hint:</button>
{hintBool && (
<>
<h3>{chapterTitle}</h3>
<h4>{title}</h4>
<p>{verse}</p>
</>
)}
</div>
);
}
export default VerseValidator

89
src/assets/verse.json
View File

@ -1,32 +1,107 @@
{ {
"LessonsOnAssurance": [ "loa": [
{ {
"id": 1,
"title": "Assurance of Salvation", "title": "Assurance of Salvation",
"chapterTitle": "",
"reference": "1 John 5:11-12", "reference": "1 John 5:11-12",
"verse": "And this is the testimony: God has given us eternal life, and this life is in his Son. He who has the Son has life; he who does not have the Son of God does not have life." "verse": "And this is the testimony: God has given us eternal life, and this life is in his Son. He who has the Son has life; he who does not have the Son of God does not have life."
}, },
{ {
"id": 2,
"title": "Assurance of Answered Prayer", "title": "Assurance of Answered Prayer",
"chapterTitle": "",
"reference": "John 16:24", "reference": "John 16:24",
"verse": "Until now you have not asked for anything in my name. Ask and you will receive, and your joy will be complete." "verse": "Until now you have not asked for anything in my name. Ask and you will receive, and your joy will be complete."
},
{
"title": "Assurance of Victory",
"chapterTitle": "",
"reference": "1 Corinthians 10:13",
"verse": "No temptation has seized you except what is common to man. And God is faithful; he will not let you be tempted beyond what you can bear. But when you are tempted, he will also provide a way out so that you can stand up under it."
},
{
"title": "Assurance of Forgiveness",
"chapterTitle": "",
"reference": "1 John 1:9",
"verse": "If we confess our sins, he is faithful and just and will forgive us our sins and purify us from all unrighteousness."
},
{
"title": "Assurance of Guidance",
"chapterTitle": "",
"reference": "Proverbs 3:5-6",
"verse": "Trust in the LORD with all your heart and lean not on your own understanding;in all your ways acknowledge him, and he will make your paths straight."
} }
], ],
"TMS60": [ "tms-60-pack-a": [
{ {
"id": 1,
"title": "Christ the Center", "title": "Christ the Center",
"chapterTitle": "Living the New Life",
"reference": "2 Cor 5:17", "reference": "2 Cor 5:17",
"verse": "Therefore, if anyone is in Christ, he is a new creation; the old has gone, the new has come!" "verse": "Therefore, if anyone is in Christ, he is a new creation; the old has gone, the new has come!"
} }
], ],
"DEP1": [ "tms-60-pack-b": [
{
"title": "All Have Sinned",
"chapterTitle": "Proclaiming Christ",
"reference": "Romans 3:23",
"verse": "for all have sinned and fall short of the glory of God, "
}
],
"tms-60-pack-c": [
{
"title": "His Spirit",
"chapterTitle": "Reliance on God's Resources",
"reference": "1 Corinthians 3:16",
"verse": "Don't you know that you yourselves are God's temple and that God's Spirit lives in you?"
}
],
"tms-60-pack-d": [
{
"title": "Put Christ First",
"chapterTitle": "Being Christ's Disciple",
"reference": "Matthew 6:33",
"verse": "But seek first his kingdom and his righteousness, and all these things will be given to you as well."
}
],
"tms-60-pack-e": [
{
"title": "Love",
"chapterTitle": "Growth in Christlikeness",
"reference": "John 13:34-35",
"verse": "A new command I give you: Love one another. As I have loved you, so you must love one another. By this all men will know that you are my disciples, if you love one another."
}
],
"dep-1": [
{ {
"id": 1,
"title": "Can be assured", "title": "Can be assured",
"chapterTitle": "",
"reference": "2 Corinthians 13:5", "reference": "2 Corinthians 13:5",
"verse": "Examine yourselves to see whether you are in the faith; test yourselves. Do you not realize that Christ Jesus is in you--unless, of course, you fail the test?" "verse": "Examine yourselves to see whether you are in the faith; test yourselves. Do you not realize that Christ Jesus is in you--unless, of course, you fail the test?"
} }
],
"dep-2": [
{
"title": "God wants to fellowship with us",
"chapterTitle": "why do we have quiet time",
"reference": "1 Corinthians 1:9",
"verse": "God, who has called you into fellowship with his Son Jesus Christ our Lord, is faithful."
}
],
"dep-3": [
{
"title": "Inspired by God",
"chapterTitle": "Authority of the Word",
"reference": "2 Timothy 3:16",
"verse": "All Scripture is God-breathed and is useful for teaching, rebuking, correcting and training in righteousness,"
}
],
"dep-4": [
{
"title": "Cease not to pray",
"chapterTitle": "Command of Prayer",
"reference": "1 Thessalonians 5:17 (KJV)",
"verse": "Pray without ceasing."
}
] ]
} }

1
src/main.jsx
View File

@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client'
// import App from './App.jsx' // import App from './App.jsx'
import App from './VerseSampler.jsx' import App from './VerseSampler.jsx'
// import App from './MultiCheckbox.jsx' // import App from './MultiCheckbox.jsx'
// import Widget from './ReactCheckboxTree.jsx'
import './index.css' import './index.css'
import "@fontsource/montserrat" import "@fontsource/montserrat"