11 changed files with 1640 additions and 2166 deletions
--- a/package.json
+++ b/package.json
@ -11,13 +11,9 @@
  },
  "dependencies": {
    "@fontsource/montserrat": "^4.5.14",
-    "i18next": "^23.11.5",
-    "i18next-browser-languagedetector": "^8.0.0",
-    "i18next-http-backend": "^2.5.2",
    "react": "^18.2.0",
    "react-checkbox-tree": "^1.8.0",
    "react-dom": "^18.2.0",
-    "react-i18next": "^14.1.2",
    "react-string-diff": "^0.2.0",
    "underscore": "^1.13.6"
  },
@ -30,6 +26,5 @@
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "vite": "^4.3.2"
-  },
-  "packageManager": "pnpm@8.15.4+sha512.0bd3a9be9eb0e9a692676deec00a303ba218ba279d99241475616b398dbaeedd11146f92c2843458f557b1d127e09d4c171e105bdcd6b61002b39685a8016b9e"
+  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -8,15 +8,6 @@ dependencies:
  '@fontsource/montserrat':
    specifier: ^4.5.14
    version: 4.5.14
-  i18next:
-    specifier: ^23.11.5
-    version: 23.11.5
-  i18next-browser-languagedetector:
-    specifier: ^8.0.0
-    version: 8.0.0
-  i18next-http-backend:
-    specifier: ^2.5.2
-    version: 2.5.2
  react:
    specifier: ^18.2.0
    version: 18.2.0
@ -26,9 +17,6 @@ dependencies:
  react-dom:
    specifier: ^18.2.0
    version: 18.2.0(react@18.2.0)
-  react-i18next:
-    specifier: ^14.1.2
-    version: 14.1.2(i18next@23.11.5)(react-dom@18.2.0)(react@18.2.0)
  react-string-diff:
    specifier: ^0.2.0
    version: 0.2.0(react@18.2.0)
@ -256,13 +244,6 @@ packages:
      '@babel/helper-plugin-utils': 7.21.5
    dev: true

-  /@babel/runtime@7.24.7:
-    resolution: {integrity: sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      regenerator-runtime: 0.14.1
-    dev: false
-
  /@babel/template@7.20.7:
    resolution: {integrity: sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==}
    engines: {node: '>=6.9.0'}
@ -827,14 +808,6 @@ packages:
    resolution: {integrity: sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==}
    dev: true

-  /cross-fetch@4.0.0:
-    resolution: {integrity: sha512-e4a5N8lVvuLgAWgnCrLr2PP0YyDOTHa9H/Rj54dirp61qXnNq46m82bRhNqIA5VccJtWBvPTFRV3TtvHUKPB1g==}
-    dependencies:
-      node-fetch: 2.7.0
-    transitivePeerDependencies:
-      - encoding
-    dev: false
-
  /cross-spawn@7.0.3:
    resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
    engines: {node: '>= 8'}
@ -1333,32 +1306,6 @@ packages:
      function-bind: 1.1.1
    dev: true

-  /html-parse-stringify@3.0.1:
-    resolution: {integrity: sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==}
-    dependencies:
-      void-elements: 3.1.0
-    dev: false
-
-  /i18next-browser-languagedetector@8.0.0:
-    resolution: {integrity: sha512-zhXdJXTTCoG39QsrOCiOabnWj2jecouOqbchu3EfhtSHxIB5Uugnm9JaizenOy39h7ne3+fLikIjeW88+rgszw==}
-    dependencies:
-      '@babel/runtime': 7.24.7
-    dev: false
-
-  /i18next-http-backend@2.5.2:
-    resolution: {integrity: sha512-+K8HbDfrvc1/2X8jpb7RLhI9ZxBDpx3xogYkQwGKlWAUXLSEGXzgdt3EcUjLlBCdMwdQY+K+EUF6oh8oB6rwHw==}
-    dependencies:
-      cross-fetch: 4.0.0
-    transitivePeerDependencies:
-      - encoding
-    dev: false
-
-  /i18next@23.11.5:
-    resolution: {integrity: sha512-41pvpVbW9rhZPk5xjCX2TPJi2861LEig/YRhUkY+1FQ2IQPS0bKUDYnEqY8XPPbB48h1uIwLnP9iiEfuSl20CA==}
-    dependencies:
-      '@babel/runtime': 7.24.7
-    dev: false
-
  /ignore@5.2.4:
    resolution: {integrity: sha512-MAb38BcSbH0eHNBxn7ql2NH/kX33OkB3lZ1BNdh7ENeRChHTYsTvWrMubiIAMNS2llXEEgZ1MUOBtXChP3kaFQ==}
    engines: {node: '>= 4'}
@ -1611,18 +1558,6 @@ packages:
    resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
    dev: true

-  /node-fetch@2.7.0:
-    resolution: {integrity: sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A==}
-    engines: {node: 4.x || >=6.0.0}
-    peerDependencies:
-      encoding: ^0.1.0
-    peerDependenciesMeta:
-      encoding:
-        optional: true
-    dependencies:
-      whatwg-url: 5.0.0
-    dev: false
-
  /node-releases@2.0.10:
    resolution: {integrity: sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==}
    dev: true
@ -1798,26 +1733,6 @@ packages:
      scheduler: 0.23.0
    dev: false

-  /react-i18next@14.1.2(i18next@23.11.5)(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-FSIcJy6oauJbGEXfhUgVeLzvWBhIBIS+/9c6Lj4niwKZyGaGb4V4vUbATXSlsHJDXXB+ociNxqFNiFuV1gmoqg==}
-    peerDependencies:
-      i18next: '>= 23.2.3'
-      react: '>= 16.8.0'
-      react-dom: '*'
-      react-native: '*'
-    peerDependenciesMeta:
-      react-dom:
-        optional: true
-      react-native:
-        optional: true
-    dependencies:
-      '@babel/runtime': 7.24.7
-      html-parse-stringify: 3.0.1
-      i18next: 23.11.5
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-    dev: false
-
  /react-is@16.13.1:
    resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}

@ -1843,10 +1758,6 @@ packages:
      loose-envify: 1.4.0
    dev: false

-  /regenerator-runtime@0.14.1:
-    resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
-    dev: false
-
  /regexp.prototype.flags@1.5.0:
    resolution: {integrity: sha512-0SutC3pNudRKgquxGoRGIz946MZVHqbNfPjBdxeOhBrdgDKlRoXmYLQN9xRbrR09ZXWeGAdPuif7egofn6v5LA==}
    engines: {node: '>= 0.4'}
@ -2018,10 +1929,6 @@ packages:
    engines: {node: '>=4'}
    dev: true

-  /tr46@0.0.3:
-    resolution: {integrity: sha512-N3WMsuqV66lT30CrXNbEjx4GEwlow3v6rr4mCcv6prnfwhS01rkgyFdjPNBYd9br7LpXV1+Emh01fHnq2Gdgrw==}
-    dev: false
-
  /type-check@0.4.0:
    resolution: {integrity: sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==}
    engines: {node: '>= 0.8.0'}
@ -2104,22 +2011,6 @@ packages:
      fsevents: 2.3.2
    dev: true

-  /void-elements@3.1.0:
-    resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
-    engines: {node: '>=0.10.0'}
-    dev: false
-
-  /webidl-conversions@3.0.1:
-    resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
-    dev: false
-
-  /whatwg-url@5.0.0:
-    resolution: {integrity: sha512-saE57nupxk6v3HY35+jzBwYa0rKSy0XR8JSxZPwgLr7ys0IBzhGviA1/TUGJLmSVqs8pb9AnvICXEuOHLprYTw==}
-    dependencies:
-      tr46: 0.0.3
-      webidl-conversions: 3.0.1
-    dev: false
-
  /which-boxed-primitive@1.0.2:
    resolution: {integrity: sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==}
    dependencies:
--- a/public/locales/en/translation.json
+++ b/public/locales/en/translation.json
@ -1,93 +0,0 @@
-{
-    "main": {
-        "title": "Scripture Memory Tester",
-        "pick_lang": "Pick Language",
-        "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_shuffle": "Set Shuffle:",
-        "note_set_shuffle": "(Otherwise cards will appear in sequential order)",
-        "hide_reference": "Set Hide Reference:",
-        "note_hide_reference": "(If you also want to test the verse reference)",
-        "pick_pack": "Pick Your Packs:",
-        "shuffle_card": "Shuffle Cards:",
-        "verses": "Verses:"
-    },
-    "verse_validator": {
-        "input_reference": "Input Verse Reference:",
-        "input_chapter_title": "Input Chapter Title:",
-        "input_title": "Input Title:",
-        "input_verse": "Input Verse:"
-    },
-    "nodes": [
-        {
-            "value": "loa",
-            "label": "Lessons on Assurance"
-        },
-        {
-            "value": "tms60",
-            "label": "TMS60",
-            "children": [
-                { "value": "tms-60-pack-a", "label": "Living the New Life" },
-                { "value": "tms-60-pack-b", "label": "Proclaiming Christ" },
-                { "value": "tms-60-pack-c", "label": "Reliance on God's Resources" },
-                { "value": "tms-60-pack-d", "label": "Being Christ's Disciple" },
-                { "value": "tms-60-pack-e", "label": "Growth in Christlikeness" }
-            ]
-        },
-        {
-            "value": "dep-1",
-            "label": "DEP 1"
-        },
-        {
-            "value": "dep-2",
-            "label": "DEP 2",
-            "children": [
-                { "value": "dep-2-part-a", "label": "Why do we have Quiet Time?" },
-                { "value": "dep-2-part-b", "label": "What is Quiet Time?" },
-                { "value": "dep-2-part-c", "label": "Examples of Quiet Time" }
-            ]
-        },
-        {
-            "value": "dep-3",
-            "label": "DEP 3",
-            "children": [
-                { "value": "dep-3-part-a", "label": "Authority of the Word" },
-                { "value": "dep-3-part-b", "label": "value of the Word" },
-                { "value": "dep-3-part-c", "label": "Attitude to the Word" },
-                { "value": "dep-3-part-d", "label": "How to take in the Word (Word Hand Illustration)" }
-            ]
-        },
-        {
-            "value": "dep-4",
-            "label": "DEP 4",
-            "children": [
-                { "value": "dep-4-part-a", "label": "Command of Prayer" },
-                { "value": "dep-4-part-b", "label": "Promises and Blessings of Prayer" },
-                { "value": "dep-4-part-c", "label": "Conditions for Answered Prayer" },
-                { "value": "dep-4-part-d", "label": "Examples of Prayer" },
-                { "value": "dep-4-part-e", "label": "Prayer Hand Illustration" }
-            ]
-        },
-        {
-            "value": "dep-5",
-            "label": "DEP 5",
-            "children": [
-                { "value": "dep-5-part-a", "label": "Foundation of Christian Fellowship" },
-                { "value": "dep-5-part-b", "label": "Importance of fellowship" },
-                { "value": "dep-5-part-c", "label": "Essentials of fellowship" },
-                { "value": "dep-5-part-d", "label": "Attitude of fellowship" },
-                { "value": "dep-5-part-e", "label": "Problem solving in fellowship" }
-            ]
-        },
-        {
-            "value":"dep-6",
-            "label":"DEP 6",
-            "children": [
-                { "value": "dep-6-part-a", "label": "Who is respondible for witnessing?" },
-                { "value": "dep-6-part-b", "label": "Why should we witness?" },
-                { "value": "dep-6-part-c", "label": "How do we witness?" }
-            ]
-        }
-    ]
-}
--- a/public/locales/kn/translation.json
+++ b/public/locales/kn/translation.json
@ -1,28 +0,0 @@
-{
-    "main": {
-        "title": "성경 암송 앱",
-        "pick_lang": "언어 선택",
-        "pick_num_verses": "암송 구절 선택:",
-        "num_verses_tested": "구절 수 선택:",
-        "note_num_verses": "(It will only give you as many verses as there are in selected packs)",
-        "set_shuffle": "무작위 설정:",
-        "note_set_shuffle": "(Otherwise cards will appear in sequential order)",
-        "hide_reference": "Set Hide Reference:",
-        "note_hide_reference": "(If you also want to test the verse reference)",
-        "pick_pack": "Pick Your Packs:",
-        "shuffle_card": "Shuffle Cards:",
-        "verses": "Verses:"
-    },
-    "verse_validator": {
-        "input_reference": "Input Verse Reference: (KR)",
-        "input_chapter_title": "Input Chapter Title: (KR)",
-        "input_title": "Input Title: (KR)",
-        "input_verse": "Input Verse: (KR)"
-    },
-    "nodes": [
-        {
-            "value": "loa",
-            "label": "Lessons on Assurance"
-        }
-    ]
-}
--- a/src/VerseSampler.jsx
+++ b/src/VerseSampler.jsx
@ -3,18 +3,15 @@ Implemented features:
 - read keys from json
 - create checklist from keys
 */
-import fullVerseData from "./assets/verse.json" // the actual verse json data file
+import VerseData from "./assets/verse.json"
 import { useState } from "react";
 import CheckboxTree from 'react-checkbox-tree';
 import 'react-checkbox-tree/lib/react-checkbox-tree.css';
 import _ from 'underscore';
 import './VerseSampler.css'
 import VerseValidator from "./VerseValidator";
-import { useTranslation } from 'react-i18next';
-import logo from './assets/droplet.svg';
-import { Suspense } from "react";

-const GenerateTestList = ({ VerseData, packs, testCount, toShuffle, toHideReference, translate}) => {
+const GenerateTestList = ({ packs, testCount, toShuffle, toHideReference}) => {
  let testList = packs.reduce(
                          // grab all elements included checked in "packs"
                          (accumulator, currentValue) => accumulator.concat(VerseData[currentValue]),
@ -22,28 +19,84 @@ const GenerateTestList = ({ VerseData, packs, testCount, toShuffle, toHideRefere
                        );
  testList = toShuffle ? _.sample(testList, testCount) : _.first(testList, testCount);
  return (
-    <ArrayTester 
-      array={testList} 
-      toHideReference={toHideReference} 
-      translate={translate}
-    />
+    <ArrayTester array={testList} toHideReference={toHideReference} />
  )
 }

-const ArrayTester = ({ array, toHideReference, translate}) => {
+const ArrayTester = ({ array, toHideReference }) => {
  const list = array.map((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} 
-      t={translate} // this passes the t i18 object to the function
-    />
+    <VerseValidator key={element.pack + element.title + element.reference}
+    element={element} toHideReference={toHideReference} />
  ))
  return list
 }

-const CheckboxWidget = ({nodes, checked, expanded, setChecked, setExpanded}) => {
+
+const nodes = [
+  {
+    value: "loa",
+    label: "Lessons on Assurance",
+  },
+  {
+    value: "tms60",
+    label: "TMS60",
+    children: [
+      { value: "tms-60-pack-a", label: "Living the New Life" },
+      { value: "tms-60-pack-b", label: "Proclaiming Christ" },
+      { value: "tms-60-pack-c", label: "Reliance on God's Resources" },
+      { value: "tms-60-pack-d", label: "Being Christ's Disciple" },
+      { value: "tms-60-pack-e", label: "Growth in Christlikeness" }
+    ],
+  },
+  {
+    value: "dep-1",
+    label: "DEP 1",
+  },
+  {
+    value: "dep-2",
+    label: "DEP 2",
+    children: [
+      { value: "dep-2-part-a", label: "Why do we have Quiet Time?" },
+      { value: "dep-2-part-b", label: "What is Quiet Time?" },
+      { value: "dep-2-part-c", label: "Examples of Quiet Time" }
+    ],
+  },
+  {
+    value: "dep-3",
+    label: "DEP 3",
+    children: [
+      { value: "dep-3-part-a", label: "Authority of the Word" },
+      { value: "dep-3-part-b", label: "Value of the Word" },
+      { value: "dep-3-part-c", label: "Attitude to the Word" },
+      { value: "dep-3-part-d", label: "How to take in the Word (Word Hand Illustration)" }
+    ],
+  },
+  {
+    value: "dep-4",
+    label: "DEP 4",
+    children: [
+      { value: "dep-4-part-a", label: "Command of Prayer" },
+      { value: "dep-4-part-b", label: "Promises and Blessings of Prayer" },
+      { value: "dep-4-part-c", label: "Conditions for Answered Prayer" },
+      { value: "dep-4-part-d", label: "Examples of Prayer" },
+      { value: "dep-4-part-e", label: "Prayer Hand Illustration" }
+    ],
+  },
+  {
+    value: "dep-5",
+    label: "DEP 5",
+    children: [
+      { value: "dep-5-part-a", label: "Foundation of Christian Fellowship" },
+      { value: "dep-5-part-b", label: "Importance of fellowship" },
+      { value: "dep-5-part-c", label: "Essentials of fellowship" },
+      { value: "dep-5-part-d", label: "Attitude of fellowship" },
+      { value: "dep-5-part-e", label: "Problem solving in fellowship" }
+    ],
+  },
+];
+
+const CheckboxWidget = ({checked, expanded, setChecked, setExpanded}) => {
  return (
    <div className="CheckboxTree">
      <CheckboxTree
@ -57,41 +110,10 @@ const CheckboxWidget = ({nodes, checked, expanded, setChecked, setExpanded}) =>
  );
 }

-// loadCustomData
-const loadCustomData = (language) => {
-  let data;
-  // console.log(language)
-  switch (language) {
-    case 'kn':
-      data = fullVerseData.kn;
-      break;
-    case 'en':
-    default:
-      data = fullVerseData.en;
-      break;
-  }
-  return data;
-};
-
-
-
-
-function Page() {
-  // setup i18 for function
-  const { t, i18n } = useTranslation();
-
-  // load VerseData json data file
-  const [VerseData, setVerseData] = useState(loadCustomData(i18n.language));
-  
-  // function hook to change language
-  // updates both i18n language and also the VerseData state variable
-  const changeLanguage = (lng) => {
-    i18n.changeLanguage(lng);
-    setVerseData(loadCustomData(i18n.language));
-  };



+function App() {
  // create checklist array for pack selection
  const packList = Object.keys(VerseData);
  // return a list of packObj's
@ -156,13 +178,10 @@ function Page() {
  
  return (
    <div className="App">
-      <h1>{t('main.title')}</h1>
-      <h2>{t('main.pick_lang')}</h2>
-      <button type="button" onClick={() => changeLanguage('en')}>English</button>
-      <button type="button" onClick={() => changeLanguage('kn')}>Korean</button>
-      <h2>{t('main.pick_num_verses')}</h2>
+      <h1>Scripture Memory Tester</h1>
+      <h2>Pick Number of Verses:</h2>
      <label className="test-count-box-label" htmlFor="testCountBox">
-        {t('main.num_verses_tested')}
+        Number of Verses Tested:
      </label>
      <input
        className="test-count-box"
@ -173,38 +192,37 @@ function Page() {
        onChange={testCountChange}
      />

-      <p>{t('main.note_num_verses')}</p>
+      <p>(It will only give you as many verses as there are in selected packs)</p>

      <h2>
-        {t('main.set_shuffle')} 
+        Set Shuffle:
        <input
          type="checkbox"
          checked={toShuffle}
          onChange={handleShuffleCheckboxChange}
        />
      </h2>
-      <p>{t('main.note_set_shuffle')}</p>
+      <p>(Otherwise cards will appear in sequential order)</p>

      <div>
        {!toShuffle ? 
        <>
          <h2>
-            {t('main.hide_reference')} 
+            Set Hide Reference:
            <input
              type="checkbox"
              checked={toHideReference}
              onChange={handleHideReferenceCheckboxChange}
            />
          </h2>
-          <p>{t('main.note_hide_reference')}</p> 
+          <p>(If you also want to test the verse reference)</p> 
        </>:
        <p></p>}
      </div>


-      <h2>{t('main.pick_pack')}</h2>
+      <h2>Pick Your Packs:</h2>
      <CheckboxWidget
-        nodes={t('nodes', { returnObjects: true })}
        checked={checked}
        expanded={expanded}
        setChecked={setChecked}
@ -214,20 +232,18 @@ function Page() {
      <div key={refreshKey}>
        {toShuffle ? 
        <>
-          <h2>{t('main.shuffle_card')}</h2>
+          <h2>Shuffle Cards:</h2>
          <RefreshButton onClick={handleRefresh} />
        </>: 
        <p></p>}
      </div>

-      <h1>{t('main.verses')}</h1>
+      <h1>Verses:</h1>
      <GenerateTestList
-        VerseData={VerseData}
        packs={checked}
        testCount={testCount}
        toShuffle={toShuffle}
        toHideReference={toHideReference}
-        translate={t}
      />

    <hr />
@ -237,18 +253,4 @@ function Page() {
  );
 }  

-// loading component for suspense fallback
-const Loader = () => (
-  <div className="App">
-    <img src={logo} className="App-logo" alt="logo" />
-    <div>loading...</div>
-  </div>
-);
-
-export default function App() {
-  return (
-    <Suspense fallback={<Loader />}>
-      <Page />
-    </Suspense>
-  );
-}
+export default App
--- a/src/VerseValidator.css
+++ b/src/VerseValidator.css
@ -39,11 +39,6 @@
  font-size: 15px;
 }

-.reference-label .main-title-box-label .title-box-label .verse-box-label {
-  pointer-events: none;
-}
-
-
 .verse-box {
  max-width:400px;
  height: 10vh;
--- a/src/VerseValidator.jsx
+++ b/src/VerseValidator.jsx
@ -4,7 +4,7 @@ import { StringDiff } from "react-string-diff";


 // function to render and handle logic of each of the cells
-const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse } , toHideReference, t}) => {  // useful use of destructuring here
+const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse } , toHideReference}) => {  // useful use of destructuring here

  const [inputReference, setReference] = useState('')
  const [referenceBool, setReferenceBool] = useState(false)
@ -21,15 +21,16 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
  // 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()
-      .normalize("NFC");
+      .toLowerCase();
    const string2 = String(reference)
      .replace(/\s+/g, "")
-      .toLowerCase()
-      .normalize("NFC");
+      .toLowerCase();
+
    const bool = (string1 === string2);

    setReference(value);
@ -42,15 +43,13 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
    let string1 = value;
    let string2 = verse;
    string1 = String(string1)
-      .replace(/[\p{P}\p{S}]/gu, "")
+      .replace(/[^\w\s]/g, "")
      .replace(/\s+/g, "")
-      .toLowerCase()
-      .normalize("NFC");
+      .toLowerCase();
    string2 = String(string2)
-      .replace(/[\p{P}\p{S}]/gu, "")
+      .replace(/[^\w\s]/g, "")
      .replace(/\s+/g, "")
-      .toLowerCase()
-      .normalize("NFC");
+      .toLowerCase();

    const bool = string1 === string2;

@ -64,16 +63,13 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
    let string1 = value;
    let string2 = title;
    string1 = String(string1)
-      .replace(/[\p{P}\p{S}]/gu, "") // Removes punctuation and symbols
-      .replace(/\s+/g, "")            // Removes all whitespace
-      .toLowerCase()
-      .normalize("NFC");              // Normalizes to NFC form
-
-    string2 = String(string2)
-      .replace(/[\p{P}\p{S}]/gu, "")
+      .replace(/[^\w\s]/g, "")
      .replace(/\s+/g, "")
-      .toLowerCase()
-      .normalize("NFC");
+      .toLowerCase();
+    string2 = String(string2)
+      .replace(/[^\w\s]/g, "")
+      .replace(/\s+/g, "")
+      .toLowerCase();

    const bool = string1 === string2;

@ -84,22 +80,17 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse

  {/* function to check correctness of chapter title input */}
  const chapterTitleChange = (e) => {
-
-
    const value = e.target.value;
    let string1 = value;
    let string2 = chapterTitle;
    string1 = String(string1)
-      .replace(/[\p{P}\p{S}]/gu, "")
+      .replace(/[^\w\s]/g, "")
      .replace(/\s+/g, "")
-      .toLowerCase()
-      .normalize("NFC");
-
+      .toLowerCase();
    string2 = String(string2)
-      .replace(/[\p{P}\p{S}]/gu, "")
+      .replace(/[^\w\s]/g, "")
      .replace(/\s+/g, "")
-      .toLowerCase()
-      .normalize("NFC");
+      .toLowerCase();

    const bool = string1 === string2;

@ -109,27 +100,12 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse

  const DiffViewer = ({oldValue, newValue}) => {
    const string1 = String(oldValue)
-      .replace(/[\p{P}\p{S}]/gu, "")
-      .toLowerCase()
-      .normalize("NFC");
-
+          .replace(/[^\w\s]/g, "")
+          .toLowerCase();

    const string2 = String(newValue)
-      .replace(/[\p{P}\p{S}]/gu, "")
-      .toLowerCase()
-      .normalize("NFC");
-
-    return (<StringDiff oldValue={string1} newValue={string2} diffMethod="diffWords" />)
-  }
-
-  const DiffViewerStrict = ({oldValue, newValue}) => {
-    const string1 = String(oldValue)
-      .toLowerCase()
-      .normalize("NFC");
-
-    const string2 = String(newValue)
-      .toLowerCase()
-      .normalize("NFC");
+              .replace(/[^\w\s]/g, "")
+              .toLowerCase();

    return (<StringDiff oldValue={string1} newValue={string2} diffMethod="diffWords" />)
  }
@ -140,8 +116,8 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
      {/* toggle hiding reference */}
      {toHideReference ? (
        <div>
-          <label className="reference-label">
-            {t('verse_validator.input_reference')} 
+          <label className="reference-label" htmlFor="referenceBox">
+            Input Verse Reference:
          </label>
          <textarea
            className={`reference-box${referenceBool ? " correct" : ""}`}
@ -160,8 +136,8 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
      {/* toggle chapterTitle */}
      {chapterTitle && (
        <div>
-          <label className="main-title-box-label">
-            {t('verse_validator.input_chapter_title')} 
+          <label className="main-title-box-label" htmlFor="chapterTitleBox">
+            Input Chapter Title:
          </label>
          <textarea
            className={`chapter-title-box${chapterTitleBool ? " correct" : ""}`}
@ -174,8 +150,8 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
      )}

      {/* input box for title */}
-      <label className="title-box-label">
-        {t('verse_validator.input_title')} 
+      <label className="title-box-label" htmlFor="titleBox">
+        Input Title:
      </label>
      <textarea
        className={`title-box${titleBool ? " correct" : ""}`}
@ -186,8 +162,8 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
      />

      {/* input box for verse */}
-      <label className="verse-box-label">
-        {t('verse_validator.input_verse')} 
+      <label className="verse-box-label" htmlFor="verseBox">
+        Input Verse:
      </label>
      <textarea
        className={`verse-box${verseBool ? " correct" : ""}`}
@ -199,25 +175,29 @@ 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 Answer:</button>
+        <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>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>
-
-          <p></p>
-          <div>
-            Reference: 
-            <DiffViewerStrict 
-              oldValue={reference} 
-              newValue={inputReference} 
-            />
-          </div>
-
-          <p></p>
          {chapterTitle && (
            <div>
              ChapterTitle:
@ -227,25 +207,15 @@ const VerseValidator = ({ element: { pack, title, chapterTitle, reference, verse
              />
            </div>
          )}
-
          <p></p>
          <div>
-            Title: 
-            <DiffViewer 
-              oldValue={title} 
-              newValue={inputTitle} 
-            />
+            Title: <DiffViewer oldValue={title} newValue={inputTitle} />
          </div>
-
          <p></p>
          <div>
-            Verse: 
-            <DiffViewer 
-              oldValue={verse} 
-              newValue={inputVerse} 
-            />
-            </div>
+            Verse: <DiffViewer oldValue={verse} newValue={inputVerse} />
          </div>
+        </div>
      )}
    </div>
  );
--- a/src/assets/droplet.svg
+++ b/src/assets/droplet.svg
@ -1,4 +0,0 @@
-<?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>
--- a/src/assets/verse.json
+++ b/src/assets/verse.json
--- a/src/i18n.js
+++ b/src/i18n.js
@ -1,27 +0,0 @@
-import i18n from 'i18next';
-import Backend from 'i18next-http-backend';
-import LanguageDetector from 'i18next-browser-languagedetector';
-import { initReactI18next } from 'react-i18next';
-
-i18n
-  // load translation using http -> see /public/locales
-  // learn more: https://github.com/i18next/i18next-http-backend
-  .use(Backend)
-  // detect user language
-  // learn more: https://github.com/i18next/i18next-browser-languageDetector
-  // note: I disabled detector to force en as default
-  .use(LanguageDetector)
-  // pass the i18n instance to react-i18next.
-  .use(initReactI18next) // default ./locales/en/translation.json
-  // init i18next
-  // for all options read: https://www.i18next.com/overview/configuration-options
-  .init({
-    fallbackLng: 'en',
-    detection: { // adds some caching
-      order: ['querystring', 'cookie', 'localStorage', 'navigator', 'htmlTag', 'path', 'subdomain'],
-      caches: ['localStorage', 'cookie'],
-    },
-    debug: true,
-  });
-
-export default i18n;
--- a/src/main.jsx
+++ b/src/main.jsx
@ -4,9 +4,6 @@ import ReactDOM from 'react-dom/client'
 import App from './VerseSampler.jsx'
 // import App from './MultiCheckbox.jsx'
 // import Widget from './ReactCheckboxTree.jsx'
-// import i18n (needs to be bundled ;))
-import './i18n';
-
 import './index.css'
 import "@fontsource/montserrat"