Update quiz set and quiz edit form UI #3153
Conversation
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. |
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the ✨ Finishing Touches🧪 Generate Unit Tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @Puppychan, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
This pull request significantly enhances the user experience for managing quiz sets by introducing a comprehensive, multi-section form UI. It transitions the creation and editing workflows to dedicated pages, allowing for more detailed configuration of quiz parameters such as timing, attempt limits, and instructional content. The changes are fully internationalized and supported by corresponding backend API updates.
Highlights
- Comprehensive UI for Quiz Sets: Introduced a new, detailed user interface for creating and editing quiz sets, featuring multiple sections for basic information, timing and limits, scheduling, and various settings. This includes fields for attempt limits, time limits, availability dates, due dates, explanation modes, and result visibility options.
- Dedicated Create/Edit Pages: The creation and editing of quiz sets have been transitioned from modal forms to dedicated full-page experiences, improving the user flow for managing complex quiz set configurations. This involved creating new
create/page.tsxandedit/page.tsxroutes. - Rich Text Editor for Instructions: Integrated a rich text editor for quiz set instructions, allowing authors to provide detailed and formatted guidance to participants. A new
instruction-editor.tsxcomponent handles this functionality, including client-side saving to local storage. - Internationalization Support: Added extensive new localization keys in both English (
en.json) and Vietnamese (vi.json) to support all the new UI elements and form fields introduced for quiz set management. - Backend API Updates: The backend API for quiz sets (
route.ts) has been updated to accommodate the new configuration fields, ensuring proper data persistence and retrieval. The logic for generating unique quiz set names has also been refined.
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Code Review
This pull request introduces a new UI for creating and editing quiz sets. The new form is well-structured with many new options for configuring quizzes.
Review focused on:
- Internationalization (i18n): Inconsistencies and potential copy-paste errors in the translation files.
- Component Implementation: Opportunities to improve UI components for correctness, accessibility, and to remove redundant code.
- Navigation: Redirection logic after form submission takes the user out of the current course context.
Addressing these points will improve the quality and maintainability of the new features.
| router.push(`/${wsId}/quiz-sets/${newSet.setId}`); | ||
| } else { | ||
| router.push(`/${wsId}/quiz-sets/${values.id}`); | ||
| } |
There was a problem hiding this comment.
After form submission, the user is redirected to /${wsId}/quiz-sets/${setId}, outside the current course and module context. Redirect back to a page within that context, such as the module's quiz set list: /${wsId}/courses/${courseId}/modules/${moduleId}/quiz-sets.
| <FormItem className="flex flex-col space-y-3 rounded-lg border border-dynamic-purple/20 bg-dynamic-light-purple/5 p-4"> | ||
| <label> | ||
| <div className="flex items-center space-x-3"> | ||
| <FormControl> | ||
| <Checkbox | ||
| checked={field.value} | ||
| onCheckedChange={field.onChange} | ||
| className="border-dynamic-purple data-[state=checked]:border-dynamic-purple data-[state=checked]:bg-dynamic-purple" | ||
| /> | ||
| </FormControl> | ||
| <Eye className="h-4 w-4 text-dynamic-purple" /> | ||
| </div> | ||
| <div> | ||
| <FormLabel className="font-semibold text-dynamic-purple"> | ||
| {t( | ||
| 'ws-quiz-sets.form-fields.allow_view_results.title' | ||
| )} | ||
| </FormLabel> | ||
| <FormDescription className="text-sm text-muted-foreground"> | ||
| {t( | ||
| 'ws-quiz-sets.form-fields.allow_view_results.description' | ||
| )} | ||
| </FormDescription> | ||
| </div> | ||
| </label> | ||
| </FormItem> |
There was a problem hiding this comment.
This form field's structure is invalid: it nests <label> tags, causing accessibility issues. Remove the outer <label> tag and restructure the component to correctly associate the label text with the checkbox. Apply a similar fix to the other checkbox fields (resultsReleased and allowViewOldAttempts).
<FormItem className="flex flex-col space-y-3 rounded-lg border border-dynamic-purple/20 bg-dynamic-light-purple/5 p-4">
<div className="flex items-center space-x-3">
<FormControl>
<Checkbox
checked={field.value}
onCheckedChange={field.onChange}
className="border-dynamic-purple data-[state=checked]:border-dynamic-purple data-[state=checked]:bg-dynamic-purple"
/>
</FormControl>
<Eye className="h-4 w-4 text-dynamic-purple" />
</div>
<div>
<FormLabel className="font-semibold text-dynamic-purple">
{t(
'ws-quiz-sets.form-fields.allow_view_results.title'
)}
</FormLabel>
<FormDescription className="text-sm text-muted-foreground">
{t(
'ws-quiz-sets.form-fields.allow_view_results.description'
)}
</FormDescription>
</div>
</FormItem>| export default function InstructionEditor({ quizSetId, instruction, setInstruction }: InstructionEditorProps) { | ||
| const t = useTranslations() | ||
| const [saving, setSaving] = useState(false) | ||
|
|
||
| const INSTRUCTION_EDITOR_KEY = `instruction-quiz-set-${quizSetId}` | ||
|
|
||
| const handleSave = async () => { | ||
| setSaving(true) | ||
| if (instruction) { | ||
| localStorage.setItem(INSTRUCTION_EDITOR_KEY, JSON.stringify(instruction)) | ||
| } | ||
| setSaving(false) | ||
| } | ||
|
|
||
| return ( | ||
| <div className="w-full"> | ||
| <div className="rounded-lg overflow-hidden bg-dynamic-purple/10"> | ||
| <RichTextEditor content={instruction} onChange={setInstruction} /> | ||
| </div> | ||
|
|
||
| <div className="mt-4"> | ||
| <Button | ||
| onClick={handleSave} | ||
| disabled={saving} | ||
| className="bg-dynamic-purple/30 border border-dynamic-purple text-secondary-foreground hover:bg-dynamic-purple/50" | ||
| size="sm" | ||
| > | ||
| {saving ? t("ws-quiz-sets.form-fields.instruction.saving") || "Saving..." : t("ws-quiz-sets.form-fields.instruction.save")} | ||
| </Button> | ||
| </div> | ||
| </div> | ||
| ) | ||
| } |
There was a problem hiding this comment.
The handleSave function and "Save Instruction" button are misleading, as the function saves content to localStorage which is never read back or used. The main form submission persists the instructions. Remove the handleSave function, the saving state, and the button to simplify the component. The onChange prop already updates the form state correctly. Also, handleSave is marked as async but contains no await calls, making the async keyword unnecessary.
export default function InstructionEditor({ quizSetId, instruction, setInstruction }: InstructionEditorProps) {
const INSTRUCTION_EDITOR_KEY = `instruction-quiz-set-${quizSetId}`
return (
<div className="w-full">
<div className="rounded-lg overflow-hidden bg-dynamic-purple/10">
<RichTextEditor content={instruction} onChange={setInstruction} />
</div>
</div>
)
}| "timing-limit": { | ||
| "title": "Basic Information", | ||
| "subtitle": "Set up the fundamental details of your quiz" |
There was a problem hiding this comment.
The timing-limit section's title and subtitle are the same as the basic section. Consider a more descriptive title and subtitle specific to timing and attempt limits.
"timing-limit": {
"title": "Timing & Limits",
"subtitle": "Set attempt and time limits for the quiz"
},
| "timing-limit": { | ||
| "title": "Thông tin cơ bản", | ||
| "subtitle": "Thiết lập các chi tiết cơ bản cho bài kiểm tra của bạn" |
There was a problem hiding this comment.
The timing-limit section's title and subtitle are the same as the basic section. Update these to be more descriptive for Vietnamese-speaking users.
"timing-limit": {
"title": "Thời gian & Giới hạn",
"subtitle": "Thiết lập giới hạn về số lần làm bài và thời gian cho bài kiểm tra của bạn"
},
| "instruction": { | ||
| "title": "Hướng dẫn", | ||
| "description": "Cung cấp hướng dẫn chi tiết cho học sinh bằng trình soạn thảo văn bản đa dạng thức, hiển thị trước khi bắt đầu bài kiểm tra." | ||
| }, |
There was a problem hiding this comment.
The instruction object is missing the save and saving keys, which are present in the en.json file. Add these translations for consistency.
"instruction": {
"title": "Hướng dẫn",
"description": "Cung cấp hướng dẫn chi tiết cho học sinh bằng trình soạn thảo văn bản đa dạng thức, hiển thị trước khi bắt đầu bài kiểm tra.",
"save": "Lưu Hướng dẫn",
"saving": "Đang lưu..."
},
| : null, | ||
| instruction: instruction, // No need to JSON.parse since it's already JSONContent | ||
| }; | ||
| // console.log('Payload', payload, values.timeLimitMinutes != null && values.timeLimitMinutes <=0, "hello"); |
There was a problem hiding this comment.
Remove this console.log statement before merging.
vhpx
changed the title
… multiple quizzes option form
…om posting quiz options one by one to post manny quiz options
…feat/upskii/quiz-set-form
No description provided.