feat: Support hiding options to avoid potential answer hints

.changeset/thirty-glasses-applaud.md

@@ -0,0 +1,5 @@
+---
+'anki-templates': minor
+---
+
+Support hiding options to avoid potential answer hints (支持隐藏选项以避免可能的答案提示)

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}

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

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."
 }

src/locales/zh.json

@@ -31,5 +31,7 @@
   "wrongAnswer": "错选",
   "hideQuestionType": "隐藏题目类型（单选/多选）",
   "hideQuestionTypeDetail": "你需要自己判断当前卡片有几个正确选项",
-  "noScroll": "翻转时不要自动滚动"
+  "noScroll": "翻转时不要自动滚动",
+  "blurOptions": "选项模糊",
+  "blurOptionsDetail": "开启后选项会被模糊，点击选项区域后恢复"
 }