Feat: added diff hint

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": {

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'}

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;*/
+  max-width:400px;
-  min-width:400px;
   height: 10vh;
   display: block;
   width: 99%;
@@ -50,17 +49,19 @@
   font-size: 15px;
 }
 
-.verse-box {
+.answer-button-box {
-  /*padding: 5px;*/
+  display: flex;
-  min-width:400px;
+  gap: 10px;
-  height: 10vh;
+  padding-top: 10px;
-  display: block;
-  width: 99%;
-  border: 1px solid grey;
-  border-radius: 5px;
-  font-size: 15px;
 }
 
+.answer-box {
+  width: 80%;
+}
+
+.diff-box {
+  width: 80%;
+}
 
 .correct {
   background-color: #e6ffe6; /* Change the background color as needed */

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,34 +98,49 @@ 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 (<StringDiff oldValue={string1} newValue={string2} diffMethod="diffWords" />)
+  }
+
 
   return (
     <div className="VerseValidator">
+      {/* toggle hiding reference */}
       {toHideReference ? (
         <div>
           <label className="reference-label" htmlFor="referenceBox">
             Input Verse Reference:
           </label>
           <textarea
-          className={`reference-box${referenceBool ? ' correct' : ''}`}
+            className={`reference-box${referenceBool ? " correct" : ""}`}
             type="text"
             id="referenceBox"
             name="referenceBox"
             onChange={referenceChange}
           />
         </div>
-
       ) : (
-        <h2>{pack} - {reference}</h2>
+        <h2>
+          {pack} - {reference}
+        </h2>
       )}
 
+      {/* toggle chapterTitle */}
       {chapterTitle && (
         <div>
           <label className="main-title-box-label" htmlFor="chapterTitleBox">
             Input Chapter Title:
           </label>
           <textarea
-          className={`chapter-title-box${chapterTitleBool ? ' correct' : ''}`}
+            className={`chapter-title-box${chapterTitleBool ? " correct" : ""}`}
             type="text"
             id="chapterTitleBox"
             name="chapterTitleBox"
@@ -137,7 +154,7 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
         Input Title:
       </label>
       <textarea
-        className={`title-box${titleBool ? ' correct' : ''}`}
+        className={`title-box${titleBool ? " correct" : ""}`}
         type="text"
         id="titleBox"
         name="titleBox"
@@ -149,7 +166,7 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
         Input Verse:
       </label>
       <textarea
-        className={`verse-box${verseBool ? ' correct' : ''}`}
+        className={`verse-box${verseBool ? " correct" : ""}`}
         type="text"
         id="verseBox"
         name="verseBox"
@@ -157,17 +174,49 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
       />
 
       {/* button to toggle show answer*/}
+      <div className="answer-button-box">
         <button onClick={() => setHintBool(!hintBool)}>Show Answer:</button>
+        <button onClick={() => setDiffBool(!diffBool)}>Show Diff:</button>
+      </div>
 
       {/* This shows the answers*/}
       {hintBool && (
+        <div className="answer-box">
+          <h3>Answers</h3>
+          <p>Reference:<br />{reference}</p>
+          {chapterTitle && (
             <>
-          <p>{reference}</p>
+              <p>ChapterTitle<br />{chapterTitle}</p>
-          <p>{chapterTitle}</p>
-          <p>{title}</p>
-          <p>{verse}</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>
   );