QuestionCard
question-cardDisplays textbook questions with type, stem, options, subquestions, media, source, and review status.
Usage
Multiple choice questions
The question stem and the scores in the options are in MathText real format; the source and knowledge points are in the footer.
As shown in the picture, figures ① and ② are made up of exactly the same small squares. If the side length of graph ① is 4, then the area of graph ② is expressed as a fraction ( ).
- A.19
- B.59
- C.169
- D.809
<QuestionCard
number="3"
kind="choice"
kindLabel="Multiple choice"
difficulty="A group"
stem="As shown in the picture, figures ① and 2 are made up of exactly the same small squares. If the side length of figure ① is 4, then the area of figure ② is expressed as a fraction ( )."
options={[
{ label: "A", text: "\\frac{1}{9}" },
{ label: "B", text: "\\frac{5}{9}" },
{ label: "C", text: "\\frac{16}{9}" },
{ label: "D", text: "\\frac{80}{9}" },
]}
chapter="Chapter 1 Rational Numbers · 1.1.1 Natural Numbers, Fractions and Decimals"
topics={["rational numbers", "fraction"]}
source="Academic Ability Assessment Part 7 · Page 3 · Question 3"
/>Fill in the blanks + quiz
Fill-in-the-blank slots are write-in spaces; questions are listed one by one.
Profit is stipulated to be positive. A company lost 30,000 yuan last year, which can be recorded as million yuan.
- (1) The number b represented by the point B on the number axis is .
- (2) The number represented by point P is .
<QuestionCard
number="11"
kind="fill"
kindLabel="Fill in the blanks"
stem="The profit requirement is positive. A company lost 30,000 yuan last year, which can be recorded as ____ million yuan."
parts={["(1) The number b represented by point B on the number axis is ____.", "(2) The number represented by point P is ____."]}
/>Pending review
The items that cannot be determined automatically will have a warning bar on the left and will never be mixed into the normal questions.
Among the following formulas, the correct one is ( ).
- A.-|-16|>0
<QuestionCard
number="7"
kind="choice"
kindLabel="Multiple choice"
stem="Among the following formulas, the correct one is ( )."
issues={[{ label: "Less than 4 options" }, { label: "Question numbers are not consecutive" }]}
When
actions={<Button size="sm" variant="ghost">Go to proofreading</Button>}
/>When to use
Use QuestionCard anywhere one complete exercise must be reviewed: question banks, paper previews, error books, or grading history. It keeps nine kinds of context together and renders mathematical notation correctly.
Use Choicebox for selectable card options, or MathText for standalone mathematical copy.
Import
import { QuestionCard } from "@hulianui/ui"Usage
<QuestionCard
number="3"
kind="choice"
difficulty="Group A"
stem="As shown, figures 1 and 2 use identical squares. If figure 1 has side length 4, what is the area of figure 2?"
options={[
{ label: "A", text: "\\frac{1}{9}" },
{ label: "B", text: "\\frac{5}{9}" },
{ label: "C", text: "\\frac{16}{9}" },
{ label: "D", text: "\\frac{80}{9}" },
]}
figure={{ src: "/figures/q3.png" }}
chapter="Chapter 1 · Rational numbers"
topics={["Rational numbers", "Fractions"]}
source="Skills Assessment · Grade 7 · Page 3 · Question 3"
/>An uncertain automatically extracted item:
<QuestionCard
stem="Which of the following expressions is correct?"
issues={[{ label: "Fewer than four choices" }, { label: "Non-consecutive question number" }]}
actions={<Button size="sm" variant="ghost">Review</Button>}
/>Props
| Name | Type | Default | Description |
|---|---|---|---|
stem | string | — | Prompt using MathText notation. |
number | ReactNode | — | Original book question number. |
kind | "choice" | "fill" | "solution" | "judge" | — | Question type controlling built-in label and tone. |
kindLabel | ReactNode | — | Overrides the built-in Chinese type label. |
difficulty | ReactNode | — | Level label, such as Group A, Foundation, or Advanced. |
options | { label, text }[] | — | Choices whose text supports MathText notation. |
parts | string[] | — | Subquestions such as (1), (2), and (3). |
figure | { src, alt? } | — | Supporting image. |
chapter / source | ReactNode | — | Chapter and provenance shown in the footer. |
topics | string[] | — | Topic names rendered as chips. |
issues | { label, tone? }[] | — | Quality flags; non-empty values activate the warning edge. |
actions | ReactNode | — | Upper-right actions. |
compact | boolean | false | Hides subparts and footer for long lists. |
Built-in kind labels are "\u9009\u62e9\u9898" (“Multiple choice”), "\u586b\u7a7a\u9898" (“Fill in the blank”), "\u89e3\u7b54\u9898" (“Written solution”), and "\u5224\u65ad\u9898" (“True or false”). The figure alt falls back to "\u9898\u76ee\u9644\u56fe" (“Question figure”).
Pitfalls
stemandoptions[].textmust remain MathText notation. Use"\\frac{3}{8}", not plain"3/8", for a typeset fraction.issuescommunicates uncertain machine extraction and is not decoration. Always pass known issues so untrusted items remain visibly distinct.- The warning uses a left edge instead of tinting the whole card, preserving prompt contrast.
compactnever truncates the prompt or choices; it only hides subparts and footer context.
Related
Playground
Convert 38 into a decimal ( ).
<QuestionCard number="3" kind="choice" kindLabel="Multiple choice questions" stem={"Convert \\frac{3}{8} into a decimal ( )."} />