Feat: changed correctness to be at per-element level using color

This commit is contained in:
Richard Wong 2024-03-16 15:03:20 +09:00
parent 511dd6f859
commit f79a92cf95
Signed by: richard
GPG Key ID: 5BD36BA2E9EE33D0
5 changed files with 63 additions and 48 deletions

View File

@ -1,5 +1,9 @@
lockfileVersion: '6.0'
settings:
autoInstallPeers: true
excludeLinksFromLockfile: false
dependencies:
'@fontsource/montserrat':
specifier: ^4.5.14

View File

@ -25,6 +25,7 @@ const GenerateTestList = ({ packs, testCount, toShuffle}) => {
const ArrayTester = ({ array }) => {
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} />
))
return list
@ -215,8 +216,7 @@ function App() {
<hr />
<p><x-small>last updated: November 10, 2023</x-small></p>
<p><x-small> Built on: {VITE_BUILD_DATE} </x-small></p>
</div>
);
}

View File

@ -1,24 +1,16 @@
.App {
max-width: 400px;
}
.VerseValidator {
padding-block: 1px 10px;
border-top: 1px solid black;
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 {
/*padding: 5px;*/
min-width:400px;
height: 5vh;
display: block;
width: 99%;
@ -27,9 +19,19 @@
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 {
/*padding: 5px;*/
min-width:400px;
height: 10vh;
display: block;
width: 99%;
@ -38,3 +40,19 @@
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 */
}

View File

@ -1,7 +1,8 @@
import { useState } from "react";
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 [verseBool, setVerseBool] = useState(false)
const [inputTitle, setTitle] = useState('')
@ -10,6 +11,7 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
const [chapterTitleBool, setChapterTitleBool] = useState(false)
const[hintBool, setHintBool] = useState(false)
{/* function to check correctness of verse input */}
const verseChange = (e) => {
const value = e.target.value;
let string1 = value;
@ -29,6 +31,7 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
setVerseBool(bool);
};
{/* function to check correctness of title input */}
const titleChange = (e) => {
const value = e.target.value;
let string1 = value;
@ -48,6 +51,8 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
setTitleBool(bool);
};
{/* function to check correctness of chapter title input */}
const chapterTitleChange = (e) => {
const value = e.target.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 (
<div className="VerseValidator">
<h2>{pack} - {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}
/>
</>
<div>
<label className="main-title-box-label" htmlFor="chapterTitleBox">
Input Chapter Title:
</label>
<textarea
className={`chapter-title-box${chapterTitleBool ? ' correct' : ''}`}
type="text"
id="chapterTitleBox"
name="chapterTitleBox"
onChange={chapterTitleChange}
/>
</div>
)}
{/* input box for title */}
<label className="title-box-label" htmlFor="titleBox">
Input Title:
</label>
<textarea
className="title-box"
className={`title-box${titleBool ? ' correct' : ''}`}
type="text"
id="titleBox"
name="titleBox"
onChange={titleChange}
/>
{/* input box for verse */}
<label className="verse-box-label" htmlFor="verseBox">
Input Verse:
</label>
<textarea
className="verse-box"
className={`verse-box${verseBool ? ' correct' : ''}`}
type="text"
id="verseBox"
name="verseBox"
onChange={verseChange}
/>
<ul>{result}</ul>
{/* button to toggle show answer*/}
<button onClick={() => setHintBool(!hintBool)}>Show Answer:</button>
{/* This shows the answers*/}
{hintBool && (
<>
<h3>{chapterTitle}</h3>

View File

@ -4,4 +4,7 @@ import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
define: {
VITE_BUILD_DATE: JSON.stringify(new Date().toLocaleString()),
},
})