diff --git a/package.json b/package.json
index 0b23a30..398a765 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
"react": "^18.2.0",
"react-checkbox-tree": "^1.8.0",
"react-dom": "^18.2.0",
+ "react-string-diff": "^0.2.0",
"underscore": "^1.13.6"
},
"devDependencies": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 086bcb3..3c39e44 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -17,6 +17,9 @@ dependencies:
react-dom:
specifier: ^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:
specifier: ^1.13.6
version: 1.13.6
@@ -842,6 +845,11 @@ packages:
object-keys: 1.1.1
dev: true
+ /diff@4.0.2:
+ resolution: {integrity: sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==}
+ engines: {node: '>=0.3.1'}
+ dev: false
+
/doctrine@2.1.0:
resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
engines: {node: '>=0.10.0'}
@@ -1733,6 +1741,16 @@ packages:
engines: {node: '>=0.10.0'}
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:
resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==}
engines: {node: '>=0.10.0'}
diff --git a/src/VerseValidator.css b/src/VerseValidator.css
index 214375c..1488305 100644
--- a/src/VerseValidator.css
+++ b/src/VerseValidator.css
@@ -10,7 +10,7 @@
}
.reference-box {
- min-width:400px;
+ max-width:400px;
height: 5vh;
display: block;
width: 99%;
@@ -20,7 +20,7 @@
}
.chapter-title-box {
- min-width:400px;
+ max-width:400px;
height: 5vh;
display: block;
width: 99%;
@@ -40,8 +40,7 @@
}
.verse-box {
- /*padding: 5px;*/
- min-width:400px;
+ max-width:400px;
height: 10vh;
display: block;
width: 99%;
@@ -50,17 +49,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;
+.answer-button-box {
+ display: flex;
+ gap: 10px;
+ padding-top: 10px;
}
+.answer-box {
+ width: 80%;
+}
+
+.diff-box {
+ width: 80%;
+}
.correct {
background-color: #e6ffe6; /* Change the background color as needed */
diff --git a/src/VerseValidator.jsx b/src/VerseValidator.jsx
index cc8b52d..18f4dcd 100644
--- a/src/VerseValidator.jsx
+++ b/src/VerseValidator.jsx
@@ -1,5 +1,6 @@
import { useState } from "react";
import "./VerseValidator.css";
+import { StringDiff } from "react-string-diff";
// function to render and handle logic of each of the cells
@@ -14,6 +15,7 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
const [inputVerse, setVerse] = useState('')
const [verseBool, setVerseBool] = useState(false)
const[hintBool, setHintBool] = useState(false)
+ const[diffBool, setDiffBool] = useState(false)
// function to check correctness of verse input
@@ -96,39 +98,54 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
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 (