feat(mcq): add switch for answer in back

ikkz · Dec 31, 2024 · 4a3f88d · 4a3f88d
1 parent 1ff3e4c
commit 4a3f88d
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 29 deletions.
diff --git a/.changeset/tricky-queens-return.md 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -34,6 +34,7 @@
   "noScroll": "翻转时不要自动滚动",
   "blurOptions": "选项模糊",
   "blurOptionsDetail": "开启后选项会被模糊，点击选项区域后恢复",
+  "hideMcqAnswer": "隐藏背面答案（AC/ABC）显示",
   "yourWrongAnswer": "你的错误答案",
   "help": "帮助",
   "tool": "工具",