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

Compare commits

base: richard:3a1f76d9da5057520e36713599f2dead2fe1432d
Branches Tags
richard:main
..
compare: richard:6b95c2fb75a44eab0199632e5e65606ff3d6a589
Branches Tags
richard:main

10 Commits
3a1f76d9da ... 6b95c2fb75

Author SHA1 Message Date
Richard Wong 6b95c2fb75
style: changed color for box background and icons depending on light or 
dark mode
 2024-03-17 00:07:01 +09:00
Richard Wong 55078b5e18
Revert "Fix: flip direction of diff to show wrong as red and correct as green" 
This reverts commit 5273160a0f.
 2024-03-16 23:41:14 +09:00
Richard Wong 5273160a0f
Fix: flip direction of diff to show wrong as red and correct as green 2024-03-16 23:34:45 +09:00
Richard Wong 82b8a87b17
Feat: added diff hint 2024-03-16 23:15:18 +09:00
Richard Wong 9109554f45
Feat: introduce hide reference feature 2024-03-16 16:33:49 +09:00
Richard Wong f79a92cf95
Feat: changed correctness to be at per-element level using color 2024-03-16 15:03:20 +09:00
Richard Wong 511dd6f859
Fix: DEP 5 - Hebrews 12:15 2023-11-10 17:45:50 +09:00
Richard Wong db3af43042
Feat: added placeholder for number, increased default test count to 15 2023-11-10 09:38:34 +09:00
Richard Wong 4ad8d16a39
Feat: updated aesthetics, changed site descriptor and icon 2023-11-10 09:18:07 +09:00
Richard Wong 1e56ec014a
Feat: make child boxes slightly smaller to fit in VerseValidator box 2023-11-10 08:18:36 +09:00
11 changed files with 260 additions and 64 deletions
Show Stats Expand all files Collapse all files

4
index.html
View File

@ -2,13 +2,13 @@
<html lang="en"> <html lang="en">
<head> <head>
<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="/droplet.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link <link
rel="stylesheet" rel="stylesheet"
href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
/> />
<title>Vite + React</title> <title>Scripture Memory Tester</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

1
package.json
View File

@ -14,6 +14,7 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-checkbox-tree": "^1.8.0", "react-checkbox-tree": "^1.8.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-string-diff": "^0.2.0",
"underscore": "^1.13.6" "underscore": "^1.13.6"
}, },
"devDependencies": { "devDependencies": {

22
pnpm-lock.yaml
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
@ -13,6 +17,9 @@ dependencies:
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)
react-string-diff:
specifier: ^0.2.0
version: 0.2.0(react@18.2.0)
underscore: underscore:
specifier: ^1.13.6 specifier: ^1.13.6
version: 1.13.6 version: 1.13.6
@ -838,6 +845,11 @@ packages:
object-keys: 1.1.1 object-keys: 1.1.1
dev: true dev: true
/diff@4.0.2:
resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
engines: {node: '>=0.3.1'}
dev: false
/doctrine@2.1.0: /doctrine@2.1.0:
resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==} resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
engines: {node: '>=0.10.0'} engines: {node: '>=0.10.0'}
@ -1729,6 +1741,16 @@ packages:
engines: {node: '>=0.10.0'} engines: {node: '>=0.10.0'}
dev: true dev: true
/react-string-diff@0.2.0(react@18.2.0):
resolution: {integrity: sha512-wB8Dr2T8CD/nuRMSEs9PHQ08e+o4a65SmkMZYrZRIEFzrbFpyrb9GuDmBwE7dxqcw06CqrLWXEuibUDJQX60LQ==}
engines: {node: '>=10'}
peerDependencies:
react: '>=16'
dependencies:
diff: 4.0.2
react: 18.2.0
dev: false
/react@18.2.0: /react@18.2.0:
resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
engines: {node: '>=0.10.0'} engines: {node: '>=0.10.0'}

4
public/droplet.svg Normal file
View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19 13.8C19 17.7764 15.866 21 12 21C8.13401 21 5 17.7764 5 13.8C5 12.8452 5.18069 11.9338 5.50883 11.1C6.54726 8.46135 12 3 12 3C12 3 17.4527 8.46135 18.4912 11.1C18.8193 11.9338 19 12.8452 19 13.8Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 522 B

1
public/vite.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.5 KiB

14
src/VerseSampler.css
View File

@ -15,4 +15,16 @@
.test-count-box-label { .test-count-box-label {
padding: 5px padding: 5px
} }
@media (prefers-color-scheme: dark) {
.rct-icon {
color: white;
}
}
@media (prefers-color-scheme: light) {
.rct-icon {
color: black;
}
}

49
src/VerseSampler.jsx
View File

@ -11,7 +11,7 @@ import _ from 'underscore';
import './VerseSampler.css' import './VerseSampler.css'
import VerseValidator from "./VerseValidator"; import VerseValidator from "./VerseValidator";
const GenerateTestList = ({ packs, testCount, toShuffle}) => { const GenerateTestList = ({ packs, testCount, toShuffle, toHideReference}) => {
let testList = packs.reduce( let testList = packs.reduce(
// grab all elements included checked in "packs" // grab all elements included checked in "packs"
(accumulator, currentValue) => accumulator.concat(VerseData[currentValue]), (accumulator, currentValue) => accumulator.concat(VerseData[currentValue]),
@ -19,13 +19,15 @@ const GenerateTestList = ({ packs, testCount, toShuffle}) => {
); );
testList = toShuffle ? _.sample(testList, testCount) : _.first(testList, testCount); testList = toShuffle ? _.sample(testList, testCount) : _.first(testList, testCount);
return ( return (
<ArrayTester array={testList} /> <ArrayTester array={testList} toHideReference={toHideReference} />
) )
} }
const ArrayTester = ({ array }) => { const ArrayTester = ({ array, toHideReference }) => {
const list = array.map((element) => ( const list = array.map((element) => (
<VerseValidator key={element.pack + element.title + element.reference} element={element} /> // key needs to be unique; chose 3 elements that will separate all elements
<VerseValidator key={element.pack + element.title + element.reference}
element={element} toHideReference={toHideReference} />
)) ))
return list return list
} }
@ -129,7 +131,7 @@ function App() {
// initialize state variable testCount // initialize state variable testCount
// purpose: to set number of verses to test // purpose: to set number of verses to test
const [testCount, setTestCount] = useState(5) const [testCount, setTestCount] = useState(15)
const testCountChange = (e) => { const testCountChange = (e) => {
const value = e.target.value const value = e.target.value
setTestCount(value) setTestCount(value)
@ -147,8 +149,21 @@ function App() {
const handleShuffleCheckboxChange = () => { const handleShuffleCheckboxChange = () => {
// Toggle the state when the checkbox is changed // Toggle the state when the checkbox is changed
setShuffle(!toShuffle); setShuffle(!toShuffle);
// additional state change to disable HideReference when shuffling
if (!toShuffle) {
setHideReference(false);
}
}; };
// state for toHideReference
const [toHideReference, setHideReference] = useState(false);
// Function to handle checkbox change
const handleHideReferenceCheckboxChange = () => {
// Toggle the state when the checkbox is changed
setHideReference(!toHideReference);
};
// refresh button for refresh // refresh button for refresh
const RefreshButton = ({ onClick }) => { const RefreshButton = ({ onClick }) => {
@ -173,9 +188,12 @@ function App() {
type="text" type="text"
id="testCountBox" id="testCountBox"
name="testCountBox" name="testCountBox"
placeholder={testCount}
onChange={testCountChange} onChange={testCountChange}
/> />
<p>(It will only give you as many verses as there are in selected packs)</p>
<h2> <h2>
Set Shuffle: Set Shuffle:
<input <input
@ -186,6 +204,23 @@ function App() {
</h2> </h2>
<p>(Otherwise cards will appear in sequential order)</p> <p>(Otherwise cards will appear in sequential order)</p>
<div>
{!toShuffle ?
<>
<h2>
Set Hide Reference:
<input
type="checkbox"
checked={toHideReference}
onChange={handleHideReferenceCheckboxChange}
/>
</h2>
<p>(If you also want to test the verse reference)</p>
</>:
<p></p>}
</div>
<h2>Pick Your Packs:</h2> <h2>Pick Your Packs:</h2>
<CheckboxWidget <CheckboxWidget
checked={checked} checked={checked}
@ -208,12 +243,12 @@ function App() {
packs={checked} packs={checked}
testCount={testCount} testCount={testCount}
toShuffle={toShuffle} toShuffle={toShuffle}
toHideReference={toHideReference}
/> />
<hr /> <hr />
<p><x-small>last updated: November 9, 2023</x-small></p> <p><x-small> Built on: {VITE_BUILD_DATE} </x-small></p>
</div> </div>
); );
} }

74
src/VerseValidator.css
View File

@ -1,38 +1,78 @@
.VerseValidator { .App {
padding: 5px; max-width: 400px;
border: 1px;
border-style: solid;
max-width: 618px;
} }
.title-box {
/*padding: 5px;*/ .VerseValidator {
height: 3vh; padding-block: 1px 10px;
border-top: 1px solid black;
max-width: 400px;
}
.reference-box {
max-width:400px;
height: 5vh;
display: block; display: block;
width: 100%; width: 99%;
border: 0; border: 1px solid grey;
border-radius: 5px; border-radius: 5px;
font-size: 15px; font-size: 15px;
} }
.chapter-title-box { .chapter-title-box {
/*padding: 5px;*/ max-width:400px;
height: 3vh; height: 5vh;
display: block; display: block;
width: 100%; width: 99%;
border: 0; border: 1px solid grey;
border-radius: 5px; border-radius: 5px;
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;*/ max-width:400px;
height: 10vh; height: 10vh;
display: block; display: block;
width: 100%; width: 99%;
border: 0; border: 1px solid grey;
border-radius: 5px; border-radius: 5px;
font-size: 15px; font-size: 15px;
} }
.answer-button-box {
display: flex;
gap: 10px;
padding-top: 10px;
}
.answer-box {
width: 80%;
}
.diff-box {
width: 80%;
}
@media (prefers-color-scheme: light) {
.correct {
background-color: #e6ffe6; /* Change the background color as needed */
}
}
@media (prefers-color-scheme: dark) {
.correct {
background-color: #495749; /* Change the background color as needed */
}
}

150
src/VerseValidator.jsx
View File

@ -1,15 +1,43 @@
import { useState } from "react"; import { useState } from "react";
import "./VerseValidator.css" import "./VerseValidator.css";
import { StringDiff } from "react-string-diff";
const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse } }) => {
const [inputVerse, setVerse] = useState('') // function to render and handle logic of each of the cells
const [verseBool, setVerseBool] = useState(false) const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse } , toHideReference}) => { // useful use of destructuring here
const [inputTitle, setTitle] = useState('')
const [titleBool, setTitleBool] = useState(false) const [inputReference, setReference] = useState('')
const [referenceBool, setReferenceBool] = useState(false)
const [inputChapterTitle, setChapterTitle] = useState('') const [inputChapterTitle, setChapterTitle] = useState('')
const [chapterTitleBool, setChapterTitleBool] = useState(false) const [chapterTitleBool, setChapterTitleBool] = useState(false)
const [inputTitle, setTitle] = useState('')
const [titleBool, setTitleBool] = useState(false)
const [inputVerse, setVerse] = useState('')
const [verseBool, setVerseBool] = useState(false)
const[hintBool, setHintBool] = useState(false) const[hintBool, setHintBool] = useState(false)
const[diffBool, setDiffBool] = useState(false)
// function to check correctness of verse input
// so far only perform checking on full spelling of reference names
const referenceChange = (e) => {
const value = e.target.value;
const string1 = String(value)
.replace(/\s+/g, "")
.toLowerCase();
const string2 = String(reference)
.replace(/\s+/g, "")
.toLowerCase();
const bool = (string1 === string2);
setReference(value);
setReferenceBool(bool);
};
{/* 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 +57,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 +77,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;
@ -67,75 +98,124 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
setChapterTitleBool(bool); setChapterTitleBool(bool);
}; };
const DiffViewer = ({oldValue, newValue}) => {
const string1 = String(oldValue)
.replace(/[^\w\s]/g, "")
.toLowerCase();
const string2 = String(newValue)
.replace(/[^\w\s]/g, "")
.toLowerCase();
return (<StringDiff oldValue={string1} newValue={string2} diffMethod="diffWords" />)
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> {/* toggle hiding reference */}
{toHideReference ? (
<div>
<label className="reference-label" htmlFor="referenceBox">
Input Verse Reference:
</label>
<textarea
className={`reference-box${referenceBool ? " correct" : ""}`}
type="text"
id="referenceBox"
name="referenceBox"
onChange={referenceChange}
/>
</div>
) : (
<h2>
{pack} - {reference}
</h2>
)}
{/* toggle chapterTitle */}
{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*/}
<div className="answer-button-box">
<button onClick={() => setHintBool(!hintBool)}>Show Answer:</button> <button onClick={() => setHintBool(!hintBool)}>Show Answer:</button>
<button onClick={() => setDiffBool(!diffBool)}>Show Diff:</button>
</div>
{/* This shows the answers*/}
{hintBool && ( {hintBool && (
<> <div className="answer-box">
<h3>{chapterTitle}</h3> <h3>Answers</h3>
<h4>{title}</h4> <p>Reference:<br />{reference}</p>
<p>{verse}</p> {chapterTitle && (
</> <>
<p>ChapterTitle<br />{chapterTitle}</p>
</>
)}
<p>Title:<br />{title}</p>
<p>Verse:<br />{verse}</p>
</div>
)}
{/* This shows the difference between given and input answers*/}
{diffBool && (
<div className="diff-box">
<h3>Differences</h3>
{chapterTitle && (
<div>
ChapterTitle:
<DiffViewer
oldValue={chapterTitle}
newValue={inputChapterTitle}
/>
</div>
)}
<p></p>
<div>
Title: <DiffViewer oldValue={title} newValue={inputTitle} />
</div>
<p></p>
<div>
Verse: <DiffViewer oldValue={verse} newValue={inputVerse} />
</div>
</div>
)} )}
</div> </div>
); );

2
src/assets/verse.json
View File

@ -1454,7 +1454,7 @@
}, },
{ {
"pack": "DEP 5", "pack": "DEP 5",
"title": "Let no bitter root grow", "title": "Let no bitter root grow up",
"chapterTitle": "Attitude of fellowship", "chapterTitle": "Attitude of fellowship",
"reference": "Hebrews 12:15", "reference": "Hebrews 12:15",
"verse": "See to it that no one misses the grace of God and that no bitter root grows up to cause trouble and defile many." "verse": "See to it that no one misses the grace of God and that no bitter root grows up to cause trouble and defile many."

3
vite.config.js
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()),
},
}) })