diff --git a/README.md b/README.md
index 2152fdd..a7ea0f3 100644
--- a/README.md
+++ b/README.md
@@ -23,6 +23,8 @@ All of the templates have the following common features:
#### Fields
+Note: When all options are empty, the template will behave as a basic Q&A template
+
| Field name | Description |
| ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| question | This is the stem of the question. It supports various content formats in Anki, including bold, formulas, etc. |
diff --git a/src/entries/mcq.tsx b/src/entries/mcq.tsx
index 7017268..7699fe9 100644
--- a/src/entries/mcq.tsx
+++ b/src/entries/mcq.tsx
@@ -1,5 +1,4 @@
import { CardShell } from '../components/card-shell';
-import { ErrorList } from '../components/error-list';
import { AnkiField } from '../components/field';
import {
biggerTextAtom,
@@ -107,120 +106,121 @@ export default () => {
return (
- }
title={
- prefHideQuestionType ? (
+ prefHideQuestionType || !options.length ? (
t('question')
) : (
<>{isMultipleChoice ? t('multipleAnswer') : t('singleAnswer')}>
)
}
questionExtra={
-
setBlurred(false)}
- >
- {options.map((name) => {
- const selectResult = getSelectResult(name);
- return (
-
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',
- {
- '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':
- selectResult !== 'none',
- 'after:origin-top-right after:scale-75':
- selectResult !== 'none' && locale === 'en',
- 'before:text-red-500 after:bg-red-500':
- selectResult === 'wrong',
- 'before:text-green-500 after:bg-green-500':
- selectResult === 'correct',
- 'before:text-amber-500 after:bg-amber-500':
- selectResult === 'missed',
- [`after:content-['${t(
- `${
- selectResult as Exclude
- }Answer`,
- )}']`]: selectResult !== 'none',
- [clsx(
- `before:absolute before:content-['${fieldToAlpha(
- name,
- )}'] before:-top-4 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':
- selectResult === 'none',
- },
- {
- [`pointer-events-none blur`]: blurred,
- },
- )}
- >
- setBlurred(false)}
+ >
+ {options.map((name) => {
+ const selectResult = getSelectResult(name);
+ return (
+ onClick(name)}
className={clsx(
- 'rounded-xl border-2 border-transparent bg-indigo-50 px-4 py-2 transition-colors',
+ 'select-type-hint relative mb-3 cursor-pointer transition-transform before:select-none after:select-none last:mb-0 lg:mb-6',
{
- '!border-indigo-500 !bg-indigo-50 !text-indigo-500':
- !back && isSelected(name),
- '!border-red-500 !bg-red-50 !text-red-500':
+ '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':
+ selectResult !== 'none',
+ 'after:origin-top-right after:scale-75':
+ selectResult !== 'none' && locale === 'en',
+ 'before:text-red-500 after:bg-red-500':
selectResult === 'wrong',
- '!border-green-500 !bg-green-50 !text-green-500':
+ 'before:text-green-500 after:bg-green-500':
selectResult === 'correct',
- '!border-amber-500 !bg-amber-50 !text-amber-500':
+ 'before:text-amber-500 after:bg-amber-500':
selectResult === 'missed',
- '!rounded-tl-none': selectResult !== 'none',
+ [`after:content-['${t(
+ `${
+ selectResult as Exclude
+ }Answer`,
+ )}']`]: selectResult !== 'none',
+ [clsx(
+ `before:absolute before:content-['${fieldToAlpha(
+ name,
+ )}'] before:-top-4 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':
+ selectResult === 'none',
+ },
+ {
+ [`pointer-events-none blur`]: blurred,
},
- 'dark:!bg-opacity-10',
)}
- />
-
- );
- })}
-
+ >
+
+
+ );
+ })}
+
+ ) : null
}
answer={
<>
-
-
- {selected.length ? (
- originOptions.map((name) => {
- const selectResult = getSelectResult(name);
- if (!['wrong', 'correct'].includes(selectResult)) {
- return null;
- }
- return (
-
- {fieldToAlpha(name)}
-
- );
- })
- ) : (
- -
- )}
-
- /
-
- {answers.map((name) => fieldToAlpha(name))}
-
-
+ {options.length ? (
+
+
+ {selected.length ? (
+ originOptions.map((name) => {
+ const selectResult = getSelectResult(name);
+ if (!['wrong', 'correct'].includes(selectResult)) {
+ return null;
+ }
+ return (
+
+ {fieldToAlpha(name)}
+
+ );
+ })
+ ) : (
+ -
+ )}
+
+ /
+
+ {answers.map((name) => fieldToAlpha(name))}
+
+
+ ) : (
+ <>
+
+
+ >
+ )}
{note ? (