diff --git a/public/locales/en/translation.json b/public/locales/en/translation.json
index 774b2f4..14bb46b 100644
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@@ -5,6 +5,8 @@
"pick_num_verses": "Pick Number of Verses:",
"num_verses_tested": "Number of Verses Tested:",
"note_num_verses": "(It will only give you as many verses as there are in selected packs)",
+ "set_review": "Set Review Mode",
+ "note_set_review": "Choose between test mode (default) or review mode",
"set_shuffle": "Set Shuffle:",
"note_set_shuffle": "(Otherwise cards will appear in sequential order)",
"hide_reference": "Set Hide Reference:",
diff --git a/public/locales/kn/translation.json b/public/locales/kn/translation.json
index 06512ef..473d0cc 100644
--- a/public/locales/kn/translation.json
+++ b/public/locales/kn/translation.json
@@ -5,6 +5,8 @@
"pick_num_verses": "암송 구절 선택:",
"num_verses_tested": "구절 수 선택:",
"note_num_verses": "(It will only give you as many verses as there are in selected packs)",
+ "set_review": "Set Review Mode",
+ "note_set_review": "Choose between test mode (default) or review mode",
"set_shuffle": "무작위 설정:",
"note_set_shuffle": "(Otherwise cards will appear in sequential order)",
"hide_reference": "Set Hide Reference:",
diff --git a/src/VersePrinter.css b/src/VersePrinter.css
new file mode 100644
index 0000000..bfb0fc2
--- /dev/null
+++ b/src/VersePrinter.css
@@ -0,0 +1,119 @@
+.App {
+ max-width: 400px;
+}
+
+
+.VersePrinter {
+ padding-block: 1px 10px;
+ border-top: 1px solid black;
+ max-width: 400px;
+}
+
+.reference-box {
+ max-width:400px;
+ height: 5vh;
+ field-sizing: content; /* not yet implemented in firefox and safari */
+ display: block;
+ width: 99%;
+ border: 1px solid grey;
+ border-radius: 5px;
+ font-size: 15px;
+}
+
+.chapter-title-box {
+ max-width:400px;
+ height: 5vh;
+ field-sizing: content; /* not yet implemented in firefox and safari */
+ display: block;
+ width: 99%;
+ border: 1px solid grey;
+ border-radius: 5px;
+ font-size: 15px;
+}
+
+.title-box {
+ max-width: 400px;
+ height: 5vh;
+ field-sizing: content; /* not yet implemented in firefox and safari */
+ display: block;
+ width: 99%;
+ border: 1px solid grey;
+ border-radius: 5px;
+ font-size: 15px;
+}
+
+.reference-label .main-title-box-label .title-box-label .verse-box-label {
+ pointer-events: none;
+}
+
+
+.verse-box {
+ max-width:400px;
+ min-height: 12vh;
+ field-sizing: content; /* not yet implemented in firefox and safari */
+ display: block;
+ width: 99%;
+ border: 1px solid grey;
+ border-radius: 5px;
+ 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 */
+ }
+
+ .partial {
+ background-color: #dafcff; /* Change the background color as needed */
+ }
+
+ .incorrect {
+ background-color: transparent; /* Change the background color as needed */
+ }
+
+ :root {
+ --background-color-removed: #f1ebb3;
+ --background-color-added: #ffd7b6;
+ }
+}
+
+
+@media (prefers-color-scheme: dark) {
+ .correct {
+ background-color: #2e5e2e; /* Change the background color as needed */
+ }
+
+ .partial {
+ background-color: #004d5c; /* Change the background color as needed */
+ }
+
+ .incorrect {
+ background-color: transparent; /* Change the background color as needed */
+ }
+
+ :root {
+ --background-color-removed: #877e2a;
+ --background-color-added: #7b4418;
+ }
+
+ .VersePrinter {
+ border-top: 1px solid white; /* override for dark mode */
+ }
+}
+
diff --git a/src/VersePrinter.jsx b/src/VersePrinter.jsx
new file mode 100644
index 0000000..18b6968
--- /dev/null
+++ b/src/VersePrinter.jsx
@@ -0,0 +1,58 @@
+import { useState } from "react";
+import "./VersePrinter.css";
+import { StringDiff } from "react-string-diff";
+import { containsKorean, jamoSubstringMatch } from './utils';
+
+const STATE = {
+ INCORRECT: 0,
+ PARTIAL: 1,
+ CORRECT: 2,
+};
+
+
+
+// function to render and handle logic of each of the cells
+const VersePrinter = ({ element: { pack, title, chapterTitle, reference, verse } , t, index}) => { // useful use of destructuring here
+
+
+ return (
+
+
+
Verse {index}
+
+
+ {/* This shows the difference between given and input answers*/}
+
+
+
+
+
Reference:
+
{reference}
+
+
+
+ {chapterTitle && (
+
+
Chapter Title:
+
{chapterTitle}
+
+ )}
+
+
+
+
Title:
+
{title}
+
+
+
+
+
Verse:
+
{verse}
+
+
+
+ );
+
+}
+
+export default VersePrinter
\ No newline at end of file
diff --git a/src/VerseSampler.jsx b/src/VerseSampler.jsx
index 7fe8679..b1d3ae3 100644
--- a/src/VerseSampler.jsx
+++ b/src/VerseSampler.jsx
@@ -10,6 +10,7 @@ import 'react-checkbox-tree/lib/react-checkbox-tree.css';
import _ from 'underscore';
import './VerseSampler.css'
import VerseValidator from "./VerseValidator";
+import VersePrinter from "./VersePrinter";
import { useTranslation } from 'react-i18next';
import logo from './assets/droplet.svg';
import { Suspense } from "react";
@@ -44,6 +45,36 @@ const ArrayTester = ({ array, toHideReference, translate}) => {
return list
}
+const GenerateReviewList = ({ VerseData, packs, testCount, toShuffle, translate}) => {
+ let testList = packs.reduce(
+ // grab all elements included checked in "packs"
+ (accumulator, currentValue) => accumulator.concat(VerseData[currentValue]),
+ new Array()
+ );
+ testList = toShuffle ? _.sample(testList, testCount) : _.first(testList, testCount);
+ return (
+
+ )
+}
+
+const ArrayPrinter = ({ array, translate}) => {
+ const list = array.map((element, index) => (
+ // key needs to be unique; chose 3 elements that will separate all elements
+
+ ))
+ return list
+}
+
+
+
const CheckboxWidget = ({nodes, checked, expanded, setChecked, setExpanded}) => {
return (
@@ -136,18 +167,36 @@ function Page() {
const [toShuffle, setShuffle] = useState(false);
// Function to handle checkbox change
const handleShuffleCheckboxChange = () => {
- // Toggle the state when the checkbox is changed
- setShuffle(!toShuffle);
// additional state change to disable HideReference when shuffling
if (!toShuffle) {
setHideReference(false);
}
+ // Toggle the state when the checkbox is changed
+ // modify state at the end
+ setShuffle(!toShuffle);
};
+ // state for toReview
+ const [toReview, setReview] = useState(false);
+ // Function to handle checkbox change
+ const handleReviewCheckboxChange = () => {
+ // additional state change to disable HideReference when reviewing
+ if (!toReview) {
+ setHideReference(false);
+ }
+ // Toggle the state when the checkbox is changed
+ // modify state at the end
+ setReview(!toReview);
+ };
+
+
// state for toHideReference
const [toHideReference, setHideReference] = useState(false);
// Function to handle checkbox change
const handleHideReferenceCheckboxChange = () => {
+ if (!toHideReference) {
+ setHideReference(false);
+ }
// Toggle the state when the checkbox is changed
setHideReference(!toHideReference);
};
@@ -176,6 +225,17 @@ function Page() {