feat(mcq): support note for option (#76)

ikkz · Jan 30, 2025 · fd7d731 · fd7d731
1 parent 4c6e613
commit fd7d731
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 37 deletions.
diff --git a/.changeset/gold-news-leave.md b/.changeset/gold-news-leave.md
@@ -0,0 +1,5 @@
+---
+'anki-templates': minor
+---
+
+feat(mcq): support note for option (支持选项笔记)
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -23,6 +23,15 @@ jobs:
       - run: pnpm install
       - run: pnpm typecheck
       - run: pnpm test
+      - name: Build templates
+        run: pnpm run build
+
+      - name: Install uv
+        uses: astral-sh/setup-uv@v3
+        with:
+          version: '0.4.27'
+      - name: Gen APKG
+        run: pnpm run package
 
       - name: Create Release Pull Request or Tag
         id: changesets
@@ -34,19 +43,6 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Build templates
-        if: steps.changesets.outputs.published == 'true'
-        run: pnpm run build
-
-      - name: Install uv
-        if: steps.changesets.outputs.published == 'true'
-        uses: astral-sh/setup-uv@v3
-        with:
-          version: '0.4.27'
-      - name: Gen APKG
-        if: steps.changesets.outputs.published == 'true'
-        run: pnpm run package
-
       - name: Release
         if: steps.changesets.outputs.published == 'true'
         uses: ncipollo/[email protected]

diff --git a/README.md b/README.md
@@ -4,6 +4,8 @@ For the directly usable version, please download it from the [release](https://g
 
 > [!TIP]
 > Each template has multiple variants available for download, with the filename format being `{template}.{locale}.{field}.apkg`
+> 
+> Be sure to read the specific instructions and tips for each template below before use
 
 ```
 template:
@@ -52,6 +54,7 @@ Note: When all options are empty, the template will behave as a basic Q&A templa
 | optionA...F | This is the content of the question options. Options that are not filled in will not be displayed, and various formats are also supported.                                                                                    |
 | answer      | This is the answer to the question. For multiple-choice questions, please write the uppercase letter of the correct answer, for example, A. For multiple-choice questions, write all the correct answer letters, such as ABC. |
 | note        | You can fill in detailed explanations, notes, etc., here.                                                                                                                                                                     |
+| noteA...F   | You can fill in detailed explanations, notes for every option                                                                                                                                                                 |
 
 ### Match
 

diff --git a/build/entries.ts b/build/entries.ts
@@ -30,6 +30,12 @@ const mcq = defineEntry({
     'optionF',
     'answer',
     'note',
+    'noteA',
+    'noteB',
+    'noteC',
+    'noteD',
+    'noteE',
+    'noteF',
     'Tags',
   ],
   notes: [
@@ -45,6 +51,8 @@ const mcq = defineEntry({
         optionC: 'And various formats are also supported.',
         answer: 'AC',
         note: 'Above is the answer to the question. For multiple-choice questions, please write the uppercase letter of the correct answer, for example, A. For multiple-choice questions, write all the correct answer letters, such as ABC.',
+        noteA: 'Note for optionA',
+        noteC: 'Note for optionC',
       },
     },
     {
@@ -58,6 +66,8 @@ const mcq = defineEntry({
         optionC: 'And various formats are also supported.',
         answer: 'AC',
         note: 'Above is the answer to the question. For multiple-choice questions, please write the uppercase letter of the correct answer, for example, A. For multiple-choice questions, write all the correct answer letters, such as ABC.',
+        noteA: 'Note for optionA',
+        noteC: 'Note for optionC',
       },
     },
   ],
@@ -78,6 +88,16 @@ const mcq_10 = defineEntry({
     'optionJ',
     'answer',
     'note',
+    'noteA',
+    'noteB',
+    'noteC',
+    'noteD',
+    'noteE',
+    'noteF',
+    'noteG',
+    'noteH',
+    'noteI',
+    'noteJ',
     'Tags',
   ],
   notes: mcq.notes,

diff --git a/src/entries/mcq.tsx b/src/entries/mcq.tsx
@@ -43,12 +43,15 @@ export default () => {
     () => (getFieldText('answer') || '').split('').map((c) => `option${c}`),
     [],
   );
-  const [originOptions, shuffledOptions] = useCreation(() => {
+  const [originOptions, shuffledOptions, notedOptions] = useCreation(() => {
     const options = fields.filter(
       (name) => name.startsWith('option') && !isFieldEmpty(FIELD_ID(name)),
     );
+    const notedOptions = options.filter(
+      (name) => !isFieldEmpty(FIELD_ID(`note${name.slice('option'.length)}`)),
+    );
 
-    return [options, shuffle(options)] as const;
+    return [options, shuffle(options), notedOptions] as const;
   }, []);
   const [options, setOptions] = useCrossState(
     'options-array',
@@ -128,7 +131,10 @@ export default () => {
       questionExtra={
         options.length ? (
           <div
-            className={clsx('mt-5', prefBiggerText ? 'prose-xl' : '')}
+            className={clsx(
+              'mt-5 space-y-3 lg:space-y-6',
+              prefBiggerText ? 'prose-xl' : '',
+            )}
             ref={parent}
             onClick={() => setBlurred(false)}
           >
@@ -139,10 +145,10 @@ export default () => {
                   key={name}
                   onClick={() => onClick(name)}
                   className={clsx(
-                    'select-type-hint relative mb-3 cursor-pointer transition-transform before:select-none after:select-none last:mb-0 lg:mb-6',
+                    'select-type-hint relative cursor-pointer transition-transform before:select-none after:select-none',
                     {
                       'active:scale-95': !back,
-                      'after:absolute after:left-px after:top-0 after:block after:-translate-x-full after:rounded-l after:px-0.5 after:py-1 after:text-xs after:text-white':
+                      'after:absolute after:left-0 after:top-[-2px] after:block after:-translate-x-full after:rounded-l after:px-0.5 after:py-1 after:text-xs after:text-white':
                         selectResult !== 'none',
                       'after:origin-top-right after:scale-75':
                         selectResult !== 'none' &&
@@ -163,7 +169,7 @@ export default () => {
                       [clsx(
                         `before:absolute before:content-['${fieldToAlpha(
                           name,
-                        )}'] before:-top-4 before:right-1 before:text-4xl before:font-extrabold before:italic before:opacity-20`,
+                        )}'] before:-top-5 before:right-1 before:text-4xl before:font-extrabold before:italic before:opacity-20`,
                         'dark:before:opacity-50',
                       )]: back,
                       'before:text-indigo-500 after:hidden':
@@ -172,26 +178,27 @@ export default () => {
                     {
                       [`pointer-events-none blur`]: blurred,
                     },
+                    'rounded-xl border-2 border-transparent bg-indigo-50 px-4 py-2 transition-colors',
+                    {
+                      '!border-indigo-500 !bg-indigo-50':
+                        !back && isSelected(name),
+                      '!border-red-500 !bg-red-50': selectResult === 'wrong',
+                      '!border-green-500 !bg-green-50':
+                        selectResult === 'correct',
+                      '!border-amber-500 !bg-amber-50':
+                        selectResult === 'missed',
+                      '!rounded-tl-none': selectResult !== 'none',
+                    },
+                    'dark:!bg-opacity-10',
                   )}
                 >
-                  <AnkiField
-                    name={name}
-                    className={clsx(
-                      'rounded-xl border-2 border-transparent bg-indigo-50 px-4 py-2 transition-colors',
-                      {
-                        '!border-indigo-500 !bg-indigo-50 !text-indigo-500':
-                          !back && isSelected(name),
-                        '!border-red-500 !bg-red-50 !text-red-500':
-                          selectResult === 'wrong',
-                        '!border-green-500 !bg-green-50 !text-green-500':
-                          selectResult === 'correct',
-                        '!border-amber-500 !bg-amber-50 !text-amber-500':
-                          selectResult === 'missed',
-                        '!rounded-tl-none': selectResult !== 'none',
-                      },
-                      'dark:!bg-opacity-10',
-                    )}
-                  />
+                  <AnkiField name={name} />
+                  {back && notedOptions.includes(name) ? (
+                    <AnkiField
+                      name={`note${name.slice('option'.length)}`}
+                      className="prose-sm border-t mt-2"
+                    />
+                  ) : null}
                 </div>
               );
             })}