adjective quiz option to toggle romaji hint

src/components/quizes/Adjectives.tsx

@@ -1,15 +1,48 @@
 import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
+import styled from '@emotion/styled';
+import useCookie from 'react-use-cookie';
 import VocabularyQuiz from '../VocabularyQuiz';
 import QuizIntro from '../QuizIntro';
 import adjectives from '../../lib/adjectives.json';
 
+interface SettingObject {
+  showRomaji?: boolean;
+}
+
+const OptionsForm = styled.form`
+  margin-bottom: 1em;
+`;
+
+const OptionCheck = styled.input`
+  margin-right: 1em;
+  margin-bottom: 1em;
+`;
+
+const getInitialSettings = (): string => {
+  return JSON.stringify({
+    showRomaji: true,
+  });
+};
+
 const Adjectives = () => {
   const [startQuiz, setStartQuiz] = useState(false);
+  const [settings, setSettings] = useCookie('vocabularyQuiz', getInitialSettings());
+  const settingsObj = JSON.parse(settings);
+
   const randomizedAdjectives = adjectives.vocabulary.sort(
     () => 0.5 - Math.random()
   );
 
+  const setSettingsOption = (setting: SettingObject) => {
+    setSettings(
+      JSON.stringify({
+        ...settingsObj,
+        ...setting,
+      })
+    );
+  };
+
   return (
     <>
       <Helmet>
@@ -20,7 +53,7 @@ const Adjectives = () => {
           words={randomizedAdjectives}
           placeholder="Enter english translation"
           question="hiragana"
-          hint="romaji"
+          hint={settingsObj.showRomaji ? "romaji" : ""}
         />
       ) : (
         <QuizIntro
@@ -33,7 +66,26 @@ const Adjectives = () => {
             </span>
           }
           onStart={() => setStartQuiz(true)}
-        />
+        >
+
+          <OptionsForm>
+            <div>
+              <label>
+                <OptionCheck
+                  name="showRomaji"
+                  type="checkbox"
+                  checked={settingsObj.showRomaji}
+                  onChange={() =>
+                    setSettingsOption({
+                      showRomaji: !settingsObj.showRomaji,
+                    })
+                  }
+                />
+                <strong>Show Romaji</strong>
+              </label>
+            </div>
+          </OptionsForm>
+        </QuizIntro>
       )}
     </>
   );