From fb223a717a6ee1e6ed9ad02b7422916b50c227c4 Mon Sep 17 00:00:00 2001
From: ikkz <ylei.mk@gmail.com>
Date: Tue, 31 Dec 2024 18:05:23 +0800
Subject: [PATCH] feat(mcq): add switch for answer in back (#53)

---
 .changeset/tricky-queens-return.md |  5 +++
 src/entries/mcq.tsx                | 63 ++++++++++++++++--------------
 src/pages/settings.tsx             |  7 ++++
 src/store/settings.ts              |  4 ++
 translations/en.json               |  1 +
 translations/zh.json               |  1 +
 6 files changed, 52 insertions(+), 29 deletions(-)
 create mode 100644 .changeset/tricky-queens-return.md

diff --git a/.changeset/tricky-queens-return.md b/.changeset/tricky-queens-return.md
new file mode 100644
index 0000000..9272cf0
--- /dev/null
+++ b/.changeset/tricky-queens-return.md
@@ -0,0 +1,5 @@
+---
+'anki-templates': patch
+---
+
+feat(mcq): add switch for answer in back (添加背面答案开关)
diff --git a/src/entries/mcq.tsx b/src/entries/mcq.tsx
index 2d9fc7b..485060f 100644
--- a/src/entries/mcq.tsx
+++ b/src/entries/mcq.tsx
@@ -6,6 +6,7 @@ import { useField } from '../hooks/use-field';
 import {
   biggerTextAtom,
   blurOptionsAtom,
+  hideMcqAnswerAtom,
   hideQuestionTypeAtom,
   randomOptionsAtom,
 } from '@/store/settings';
@@ -113,6 +114,8 @@ export default () => {
     useAtomValue(blurOptionsAtom),
   );
 
+  const hideMcqAnswer = useAtomValue(hideMcqAnswerAtom);
+
   return (
     <CardShell
       title={
@@ -197,35 +200,37 @@ export default () => {
       answer={
         <>
           {options.length ? (
-            <div className="text-center text-3xl font-bold italic text-opacity-50">
-              <span className="align-super">
-                {selected.length ? (
-                  originOptions.map((name) => {
-                    const selectResult = getSelectResult(name);
-                    if (!['wrong', 'correct'].includes(selectResult)) {
-                      return null;
-                    }
-                    return (
-                      <span
-                        key={name}
-                        className={clsx({
-                          'text-red-400': selectResult === 'wrong',
-                          'text-green-400': selectResult === 'correct',
-                        })}
-                      >
-                        {fieldToAlpha(name)}
-                      </span>
-                    );
-                  })
-                ) : (
-                  <span className="text-amber-400">-</span>
-                )}
-              </span>
-              <span className="text-5xl text-gray-200">/</span>
-              <span className="align-sub text-green-400">
-                {answers.map((name) => fieldToAlpha(name))}
-              </span>
-            </div>
+            hideMcqAnswer ? null : (
+              <div className="text-center text-3xl font-bold italic text-opacity-50">
+                <span className="align-super">
+                  {selected.length ? (
+                    originOptions.map((name) => {
+                      const selectResult = getSelectResult(name);
+                      if (!['wrong', 'correct'].includes(selectResult)) {
+                        return null;
+                      }
+                      return (
+                        <span
+                          key={name}
+                          className={clsx({
+                            'text-red-400': selectResult === 'wrong',
+                            'text-green-400': selectResult === 'correct',
+                          })}
+                        >
+                          {fieldToAlpha(name)}
+                        </span>
+                      );
+                    })
+                  ) : (
+                    <span className="text-amber-400">-</span>
+                  )}
+                </span>
+                <span className="text-5xl text-gray-200">/</span>
+                <span className="align-sub text-green-400">
+                  {answers.map((name) => fieldToAlpha(name))}
+                </span>
+              </div>
+            )
           ) : (
             <>
               <AnkiField name="answer" />
diff --git a/src/pages/settings.tsx b/src/pages/settings.tsx
index c8f00de..0113ed8 100644
--- a/src/pages/settings.tsx
+++ b/src/pages/settings.tsx
@@ -7,6 +7,7 @@ import {
   biggerTextAtom,
   blurOptionsAtom,
   hideAboutAtom,
+  hideMcqAnswerAtom,
   hideQuestionTypeAtom,
   hideTimerAtom,
   noScorllAtom,
@@ -73,6 +74,7 @@ if (id === 'mcq') {
     const [hideQuestionType, setHideQuestionType] =
       useAtom(hideQuestionTypeAtom);
     const [blurOptions, setBlurOptions] = useAtom(blurOptionsAtom);
+    const [hideMcqAnswer, setHideMcqAnswer] = useAtom(hideMcqAnswerAtom);
 
     return (
       <>
@@ -94,6 +96,11 @@ if (id === 'mcq') {
           checked={blurOptions}
           onChange={setBlurOptions}
         />
+        <Checkbox
+          title={t.hideMcqAnswer}
+          checked={hideMcqAnswer}
+          onChange={setHideMcqAnswer}
+        />
         <CommonOptions />
       </>
     );
diff --git a/src/store/settings.ts b/src/store/settings.ts
index 2377eb1..334f1ec 100644
--- a/src/store/settings.ts
+++ b/src/store/settings.ts
@@ -23,3 +23,7 @@ export const blurOptionsAtom = atomWithScopedStorage<boolean>(
   'blurOptions',
   false,
 );
+export const hideMcqAnswerAtom = atomWithScopedStorage<boolean>(
+  'hideMcqAnswer',
+  false,
+);
diff --git a/translations/en.json b/translations/en.json
index 4cc6ab2..abe6bed 100644
--- a/translations/en.json
+++ b/translations/en.json
@@ -34,6 +34,7 @@
   "noScroll": "Don't auto scroll when flipping",
   "blurOptions": "Blur options",
   "blurOptionsDetail": "When enabled, options will be blurred and will become clear after clicking on the option area.",
+  "hideMcqAnswer": "Hide the answers(AC/ABC) on the back",
   "yourWrongAnswer": "Your wrong answer",
   "help": "Help",
   "tool": "Tool",
diff --git a/translations/zh.json b/translations/zh.json
index 0e7177a..e03aaa0 100644
--- a/translations/zh.json
+++ b/translations/zh.json
@@ -34,6 +34,7 @@
   "noScroll": "翻转时不要自动滚动",
   "blurOptions": "选项模糊",
   "blurOptionsDetail": "开启后选项会被模糊，点击选项区域后恢复",
+  "hideMcqAnswer": "隐藏背面答案（AC/ABC）显示",
   "yourWrongAnswer": "你的错误答案",
   "help": "帮助",
   "tool": "工具",