feat:
- include nested checkboxes - include hint button - include test for titles - increase size of textboxes
This commit is contained in:
parent
5bfe82f9ba
commit
b9d208ac53
GPG Key ID:
5BD36BA2E9EE33D0
|
|
@ -4,6 +4,10 @@
|
|||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<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>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,9 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@fontsource/montserrat": "^4.5.14",
|
||||
"@fortawesome/react-fontawesome": "^0.2.0",
|
||||
"react": "^18.2.0",
|
||||
"react-checkbox-tree": "^1.8.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"underscore": "^1.13.6"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -4,9 +4,15 @@ dependencies:
|
|||
'@fontsource/montserrat':
|
||||
specifier: ^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:
|
||||
specifier: ^18.2.0
|
||||
version: 18.2.0
|
||||
react-checkbox-tree:
|
||||
specifier: ^1.8.0
|
||||
version: 1.8.0(react@18.2.0)
|
||||
react-dom:
|
||||
specifier: ^18.2.0
|
||||
version: 18.2.0(react@18.2.0)
|
||||
|
|
@ -509,6 +515,31 @@ packages:
|
|||
resolution: {integrity: sha512-fTvrteVzuFUePhr4QYBGoK8G/YHLJ3IhF1HhKg0AxcFvZajJT7rM7ULdmKLSd2PkX44R3aaFZq1zDbmjbGGI+w==}
|
||||
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:
|
||||
resolution: {integrity: sha512-UybHIJzJnR5Qc/MsD9Kr+RpO2h+/P1GhOwdiLPXK5TWk5sgTdu88bTD9UP+CKbPPh5Rni1u0GjAdYQLemG8g+g==}
|
||||
engines: {node: '>=10.10.0'}
|
||||
|
|
@ -765,6 +796,10 @@ packages:
|
|||
supports-color: 7.2.0
|
||||
dev: true
|
||||
|
||||
/classnames@2.3.2:
|
||||
resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==}
|
||||
dev: false
|
||||
|
||||
/color-convert@1.9.3:
|
||||
resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
|
||||
dependencies:
|
||||
|
|
@ -1504,6 +1539,10 @@ packages:
|
|||
resolution: {integrity: sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==}
|
||||
dev: true
|
||||
|
||||
/lodash@4.17.21:
|
||||
resolution: {integrity: sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==}
|
||||
dev: false
|
||||
|
||||
/loose-envify@1.4.0:
|
||||
resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
|
||||
hasBin: true
|
||||
|
|
@ -1530,7 +1569,6 @@ packages:
|
|||
resolution: {integrity: sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==}
|
||||
engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
|
||||
hasBin: true
|
||||
dev: true
|
||||
|
||||
/natural-compare@1.4.0:
|
||||
resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
|
||||
|
|
@ -1543,7 +1581,6 @@ packages:
|
|||
/object-assign@4.1.1:
|
||||
resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
dev: true
|
||||
|
||||
/object-inspect@1.12.3:
|
||||
resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==}
|
||||
|
|
@ -1680,7 +1717,6 @@ packages:
|
|||
loose-envify: 1.4.0
|
||||
object-assign: 4.1.1
|
||||
react-is: 16.13.1
|
||||
dev: true
|
||||
|
||||
/punycode@2.3.0:
|
||||
resolution: {integrity: sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==}
|
||||
|
|
@ -1691,6 +1727,18 @@ packages:
|
|||
resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
|
||||
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):
|
||||
resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
|
||||
peerDependencies:
|
||||
|
|
@ -1703,7 +1751,6 @@ packages:
|
|||
|
||||
/react-is@16.13.1:
|
||||
resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
|
||||
dev: true
|
||||
|
||||
/react-refresh@0.14.0:
|
||||
resolution: {integrity: sha512-wViHqhAd8OHeLS/IRMJjTSDHF3U9eWi62F/MledQGPdJGDhodXJ9PBLNGr6WWL7qlH12Mt3TyTpbS+hGXMjCzQ==}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -5,17 +5,6 @@
|
|||
text-align: left;
|
||||
}
|
||||
|
||||
.VerseValidator {
|
||||
padding: 5px;
|
||||
border: 1px;
|
||||
border-style: solid;
|
||||
|
||||
}
|
||||
|
||||
.verse-box {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.box-label {
|
||||
padding: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,95 +5,15 @@ Implemented features:
|
|||
*/
|
||||
import VerseData from "./assets/verse.json"
|
||||
import { useState } from "react";
|
||||
import CheckboxTree from 'react-checkbox-tree';
|
||||
import 'react-checkbox-tree/lib/react-checkbox-tree.css';
|
||||
import _ from 'underscore';
|
||||
import './VerseSampler.css'
|
||||
|
||||
// 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]);
|
||||
};
|
||||
import VerseValidator from "./VerseValidator";
|
||||
|
||||
const GenerateTestList = ({ packs, testCount}) => {
|
||||
let testList = packs.filter((pack) => pack.include)
|
||||
.map((element) => element.pack)
|
||||
.reduce(
|
||||
let testList = packs.reduce(
|
||||
// grab all elements included checked in "packs"
|
||||
(accumulator, currentValue) => accumulator.concat(VerseData[currentValue]),
|
||||
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() {
|
||||
// create checklist array for pack selection
|
||||
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 packObj = new Object();
|
||||
packObj.pack = element;
|
||||
|
|
@ -115,7 +91,8 @@ function App() {
|
|||
)
|
||||
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 testCountChange = (e) => {
|
||||
const value = e.target.value
|
||||
|
|
@ -123,32 +100,43 @@ function App() {
|
|||
}
|
||||
|
||||
|
||||
// variables for pack selection
|
||||
const [checked, setChecked] = useState([])
|
||||
const [expanded, setExpanded] = useState([])
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className="App">
|
||||
<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">
|
||||
Number of Verses Tested:
|
||||
</label>
|
||||
<input
|
||||
className="test-count-box"
|
||||
type='text'
|
||||
id='testCountBox'
|
||||
name='testCountBox'
|
||||
type="text"
|
||||
id="testCountBox"
|
||||
name="testCountBox"
|
||||
onChange={testCountChange}
|
||||
/>
|
||||
|
||||
<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>
|
||||
{packs
|
||||
.filter((pack) => pack.include)
|
||||
{checked
|
||||
.map((element) => (
|
||||
<li key={element.pack}>{element.pack}</li>
|
||||
<li key={element}>{element}</li>
|
||||
))}
|
||||
</div>
|
||||
</div>*/}
|
||||
<h1>Verses:</h1>
|
||||
<GenerateTestList packs={packs} testCount={testCount} />
|
||||
|
||||
<GenerateTestList packs={checked} testCount={testCount} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
@ -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
|
||||
|
|
@ -1,32 +1,107 @@
|
|||
{
|
||||
"LessonsOnAssurance": [
|
||||
"loa": [
|
||||
{
|
||||
"id": 1,
|
||||
"title": "Assurance of Salvation",
|
||||
"chapterTitle": "",
|
||||
"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."
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"title": "Assurance of Answered Prayer",
|
||||
"chapterTitle": "",
|
||||
"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."
|
||||
},
|
||||
{
|
||||
"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",
|
||||
"chapterTitle": "Living the New Life",
|
||||
"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!"
|
||||
}
|
||||
],
|
||||
"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",
|
||||
"chapterTitle": "",
|
||||
"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?"
|
||||
}
|
||||
]
|
||||
],
|
||||
"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."
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@ import ReactDOM from 'react-dom/client'
|
|||
// import App from './App.jsx'
|
||||
import App from './VerseSampler.jsx'
|
||||
// import App from './MultiCheckbox.jsx'
|
||||
// import Widget from './ReactCheckboxTree.jsx'
|
||||
import './index.css'
|
||||
import "@fontsource/montserrat"
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue