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' lockfileVersion: '6.0'
settings:
autoInstallPeers: true
excludeLinksFromLockfile: false
dependencies: dependencies:
'@fontsource/montserrat': '@fontsource/montserrat':
specifier: ^4.5.14 specifier: ^4.5.14

View File

@ -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>
); );
} }

View File

@ -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 */
}

View File

@ -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>

View File

@ -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()),
},
}) })