From 29e93815f51036247908ed2acbfb3cc2106a4f30 Mon Sep 17 00:00:00 2001
From: ikkz <ylei.mk@gmail.com>
Date: Fri, 22 Nov 2024 19:59:26 +0800
Subject: [PATCH] feat: Support hiding options to avoid potential answer hints

---
 .changeset/thirty-glasses-applaud.md |  5 +++++
 src/components/settings.tsx          | 11 +++++++++++
 src/entries/mcq.tsx                  | 15 ++++++++++++++-
 src/locales/en.json                  |  4 +++-
 src/locales/zh.json                  |  4 +++-
 5 files changed, 36 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/thirty-glasses-applaud.md

diff --git a/.changeset/thirty-glasses-applaud.md b/.changeset/thirty-glasses-applaud.md
new file mode 100644
index 0000000..c856ede
--- /dev/null
+++ b/.changeset/thirty-glasses-applaud.md
@@ -0,0 +1,5 @@
+---
+'anki-templates': minor
+---
+
+Support hiding options to avoid potential answer hints (支持隐藏选项以避免可能的答案提示)
diff --git a/src/components/settings.tsx b/src/components/settings.tsx
index b0a3ae3..ba93015 100644
--- a/src/components/settings.tsx
+++ b/src/components/settings.tsx
@@ -27,6 +27,10 @@ export const hideQuestionTypeAtom = atomWithLocalStorage<boolean>(
   false,
 );
 export const noScorllAtom = atomWithLocalStorage<boolean>('noScorll', true);
+export const blurOptionsAtom = atomWithLocalStorage<boolean>(
+  'blurOptions',
+  false,
+);
 
 let OptionList: FC;
 
@@ -41,6 +45,7 @@ if (id === 'mcq') {
     const [hideQuestionType, setHideQuestionType] =
       useAtom(hideQuestionTypeAtom);
     const [noScorll, setNoScorll] = useAtom(noScorllAtom);
+    const [blurOptions, setBlurOptions] = useAtom(blurOptionsAtom);
 
     return (
       <>
@@ -72,6 +77,12 @@ if (id === 'mcq') {
           checked={selectionMenu}
           onChange={setSelectionMenu}
         />
+        <Checkbox
+          title={t('blurOptions')}
+          subtitle={t('blurOptionsDetail')}
+          checked={blurOptions}
+          onChange={setBlurOptions}
+        />
         <Checkbox
           title={t('hideTimer')}
           checked={hideTimer}
diff --git a/src/entries/mcq.tsx b/src/entries/mcq.tsx
index e45eb68..14ae22d 100644
--- a/src/entries/mcq.tsx
+++ b/src/entries/mcq.tsx
@@ -1,6 +1,10 @@
 import { ErrorList } from '../components/error-list';
 import { AnkiField } from '../components/field';
-import { biggerTextAtom, hideQuestionTypeAtom } from '../components/settings';
+import {
+  biggerTextAtom,
+  blurOptionsAtom,
+  hideQuestionTypeAtom,
+} from '../components/settings';
 import { useBack } from '../hooks/use-back';
 import { useField } from '../hooks/use-field';
 import { useStorage } from '../hooks/use-storage';
@@ -94,6 +98,11 @@ export default () => {
   const note = useField('note');
   const isMultipleChoice = answers.length > 1;
 
+  const [blurred, setBlurred] = useStorage(
+    'blurred',
+    useAtomValue(blurOptionsAtom),
+  );
+
   return (
     <CardShell
       header={
@@ -115,6 +124,7 @@ export default () => {
         <div
           className={clsx('mt-5', prefBiggerText ? 'prose-xl' : '')}
           ref={parent}
+          onClick={() => setBlurred(false)}
         >
           {options.map((name) => {
             const selectResult = getSelectResult(name);
@@ -150,6 +160,9 @@ export default () => {
                     'before:text-indigo-500 after:hidden':
                       selectResult === 'none',
                   },
+                  {
+                    [`pointer-events-none blur`]: blurred,
+                  },
                 )}
               >
                 <AnkiField
diff --git a/src/locales/en.json b/src/locales/en.json
index 53c5684..527fd4b 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -31,5 +31,7 @@
   "wrongAnswer": "Wrong",
   "hideQuestionType": "Hide the number of answer at the top",
   "hideQuestionTypeDetail": "You need to judge by yourself how many correct options the current card has",
-  "noScroll": "Don't auto scroll when flipping"
+  "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."
 }
diff --git a/src/locales/zh.json b/src/locales/zh.json
index b0093bd..1a1288b 100644
--- a/src/locales/zh.json
+++ b/src/locales/zh.json
@@ -31,5 +31,7 @@
   "wrongAnswer": "错选",
   "hideQuestionType": "隐藏题目类型（单选/多选）",
   "hideQuestionTypeDetail": "你需要自己判断当前卡片有几个正确选项",
-  "noScroll": "翻转时不要自动滚动"
+  "noScroll": "翻转时不要自动滚动",
+  "blurOptions": "选项模糊",
+  "blurOptionsDetail": "开启后选项会被模糊，点击选项区域后恢复"
 }