Feat: changed correctness to be at per-element level using color
This commit is contained in:
parent
511dd6f859
commit
f79a92cf95
|
@ -1,5 +1,9 @@
|
||||||
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
|
||||||
|
|
|
@ -25,6 +25,7 @@ const GenerateTestList = ({ packs, testCount, toShuffle}) => {
|
||||||
|
|
||||||
const ArrayTester = ({ array }) => {
|
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} />
|
||||||
))
|
))
|
||||||
return list
|
return list
|
||||||
|
@ -215,8 +216,7 @@ function App() {
|
||||||
|
|
||||||
<hr />
|
<hr />
|
||||||
|
|
||||||
<p><x-small>last updated: November 10, 2023</x-small></p>
|
<p><x-small> Built on: {VITE_BUILD_DATE} </x-small></p>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,24 +1,16 @@
|
||||||
.App {
|
.App {
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.VerseValidator {
|
.VerseValidator {
|
||||||
padding-block: 1px 10px;
|
padding-block: 1px 10px;
|
||||||
border-top: 1px solid black;
|
border-top: 1px solid black;
|
||||||
max-width: 400px;
|
max-width: 400px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title-box {
|
|
||||||
/*padding: 5px;*/
|
|
||||||
height: 5vh;
|
|
||||||
display: block;
|
|
||||||
width: 99%;
|
|
||||||
border: 1px solid grey;
|
|
||||||
border-radius: 5px;
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.chapter-title-box {
|
.chapter-title-box {
|
||||||
/*padding: 5px;*/
|
min-width:400px;
|
||||||
height: 5vh;
|
height: 5vh;
|
||||||
display: block;
|
display: block;
|
||||||
width: 99%;
|
width: 99%;
|
||||||
|
@ -27,9 +19,19 @@
|
||||||
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 {
|
||||||
/*padding: 5px;*/
|
/*padding: 5px;*/
|
||||||
|
min-width:400px;
|
||||||
height: 10vh;
|
height: 10vh;
|
||||||
display: block;
|
display: block;
|
||||||
width: 99%;
|
width: 99%;
|
||||||
|
@ -38,3 +40,19 @@
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.verse-box {
|
||||||
|
/*padding: 5px;*/
|
||||||
|
min-width:400px;
|
||||||
|
height: 10vh;
|
||||||
|
display: block;
|
||||||
|
width: 99%;
|
||||||
|
border: 1px solid grey;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.correct {
|
||||||
|
background-color: #e6ffe6; /* Change the background color as needed */
|
||||||
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,8 @@
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import "./VerseValidator.css"
|
import "./VerseValidator.css"
|
||||||
|
|
||||||
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 } }) => { // useful use of destructuring here
|
||||||
const [inputVerse, setVerse] = useState('')
|
const [inputVerse, setVerse] = useState('')
|
||||||
const [verseBool, setVerseBool] = useState(false)
|
const [verseBool, setVerseBool] = useState(false)
|
||||||
const [inputTitle, setTitle] = useState('')
|
const [inputTitle, setTitle] = useState('')
|
||||||
|
@ -10,6 +11,7 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
|
||||||
const [chapterTitleBool, setChapterTitleBool] = useState(false)
|
const [chapterTitleBool, setChapterTitleBool] = useState(false)
|
||||||
const[hintBool, setHintBool] = useState(false)
|
const[hintBool, setHintBool] = useState(false)
|
||||||
|
|
||||||
|
{/* 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;
|
||||||
|
@ -29,6 +31,7 @@ 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;
|
||||||
|
@ -48,6 +51,8 @@ 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;
|
||||||
|
@ -68,68 +73,53 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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">
|
||||||
<h2>{pack} - {reference}</h2>
|
<h2>{pack} - {reference}</h2>
|
||||||
|
|
||||||
{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"
|
className={`chapter-title-box${chapterTitleBool ? ' correct' : ''}`}
|
||||||
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"
|
className={`title-box${titleBool ? ' correct' : ''}`}
|
||||||
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"
|
className={`verse-box${verseBool ? ' correct' : ''}`}
|
||||||
type="text"
|
type="text"
|
||||||
id="verseBox"
|
id="verseBox"
|
||||||
name="verseBox"
|
name="verseBox"
|
||||||
onChange={verseChange}
|
onChange={verseChange}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<ul>{result}</ul>
|
{/* button to toggle show answer*/}
|
||||||
|
|
||||||
<button onClick={() => setHintBool(!hintBool)}>Show Answer:</button>
|
<button onClick={() => setHintBool(!hintBool)}>Show Answer:</button>
|
||||||
|
|
||||||
|
{/* This shows the answers*/}
|
||||||
{hintBool && (
|
{hintBool && (
|
||||||
<>
|
<>
|
||||||
<h3>{chapterTitle}</h3>
|
<h3>{chapterTitle}</h3>
|
||||||
|
|
|
@ -4,4 +4,7 @@ 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