Feat: added diff hint
This commit is contained in:
parent
9109554f45
commit
82b8a87b17
GPG Key ID:
5BD36BA2E9EE33D0
|
|
@ -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": {
|
||||
|
|
|
|||
|
|
@ -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'}
|
||||
|
|
|
|||
|
|
@ -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 */
|
||||
|
|
|
|||
|
|
@ -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}</p>
|
||||
<p>{title}</p>
|
||||
<p>{verse}</p>
|
||||
<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>
|
||||
);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue