ارزیابی
quizکامپوننتارزیابی چندگزینهای با گزینههای الف تا د، سؤال چندپاسخی، بازخورد فوری با توضیح یا حالت امتحان، و صفحهی نتیجه با درصد، مرور پاسخها و تلاش دوباره.
آزمونک درس ۳سؤال ۱ از ۳
سینوس زاویهی ۹۰ درجه چند است؟
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add quizنصب دستی
محتوای تب «کد» را در
components/ui/quiz.tsxبگذارید. پیشنیاز: button، progress.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { Quiz } from "@/components/ui/quiz"23<Quiz4 title="آزمونک فصل ۲"5 passPercent={60}6 onComplete={(r) => saveScore(r.percent)}7 questions={[8 {9 id: "q1",10 prompt: "خودرویی ۱۲۰ کیلومتر را در ۲ ساعت طی میکند. سرعت متوسط آن چقدر است؟",11 options: [12 { id: "a", label: "۲۴۰ کیلومتر بر ساعت" },13 { id: "b", label: "۶۰ کیلومتر بر ساعت" },14 { id: "c", label: "۱۲۰ کیلومتر بر ساعت" },15 ],16 answer: "b",17 explanation: "سرعت متوسط = جابهجایی ÷ زمان = ۱۲۰ ÷ ۲.",18 },19 {20 id: "q2",21 prompt: "کدام کمیتها برداریاند؟",22 options: [{ id: "a", label: "جابهجایی" }, { id: "b", label: "مسافت" }, { id: "c", label: "سرعت" }],23 answer: ["a", "c"],24 },25 ]}26/>پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| questions | { id; prompt; options; answer; explanation? }[] | - | answer یک id یا آرایهای از idها (سؤال چندپاسخی) است. |
| feedback | "instant" | "end" | "instant" | instant: بررسی هر سؤال با توضیح. end: حالت امتحان، نتیجه در پایان. |
| passPercent | number | 70 | درصد قبولی. |
| onComplete | (result) => void | - | { correct, total, percent, passed, answers } بعد از پایان. |
| title | ReactNode | - | عنوان بالای نوار پیشرفت. |
نکتههای راستچین
- گزینهها input واقعی radio/checkbox هستن (sr-only)، پس کیبورد و صفحهخوان بدون کد اضافه کار میکنن.
- حروف گزینهها «الف، ب، ج، د» است نه A/B/C؛ ثابت OPTION_LETTERS export شده.
- دکمهی «سؤال بعدی» آیکون ArrowLeft دارد چون در RTL جلو یعنی چپ.