...
As a RethinkEd student, I need a way to easily navigate to and complete worksheets in the Student Center, so that I can engage with assigned material and submit my work directly within RethinkEd.
Figma
https://www.figma.com/file/2P8kwFEVvVNOVzG4D2E5Sj/Student-UI?type=design&node-id=73%3A2471&mode=design&t=ncVLRgkRBKC3uLgPF23GTnmedOZYdSH5-1
Epic
Feature 193777: Student Center
UI Description
Sidebar Layout:
The sidebar includes a back navigation link, a lesson title with a long title option, and action buttons.
On the left sidebar, action buttons are present for
Video: Opens the related instructional video that goes with the lesson or module plan worksheet.
Save: Saves student progress.
Reset: Clears the worksheet from all added work.
Submit: Submits the assignment to the teacher.
A collapse functionality to minimize the sidebar and provide more space for the video player.
Interactive Worksheet Area:
...
A toolbar is situated to the right of the worksheet, offering various tools:
Pointer: To select and move elements.
Color: To change the color of the text and drawings.
Brush: For freehand drawing within the worksheet.
Brush size: To adjust the width of the brush strokes.
Fill: To fill shapes with color.
Pick Color: A color picker to choose custom colors.
Erase: To remove elements added to the worksheet.
Text Box: To enter text onto the worksheet.
Undo/Redo: To revert or reapply actions.
Action Buttons:
On the left sidebar, action buttons are present for
Video: Opens the related instructional video that goes with the lesson or module plan worksheet.
Save: Saves student progress.
Reset: Clears the worksheet from all added work.
Submit: Submits the assignment to the teacher.
User Interaction and Validation Notes
...
Students can select any tool from the toolbar to interact with the worksheet.
Tools should provide immediate visual feedback—e.g., drawing a line or inputting text.
Each tool's effect (like color change or text entry) should be validated on the screen without delay.
Sidebar Functionality:
Users can collapse the sidebar to focus solely on the interactive worksheet content, with the ability to expand it back when needed.
Back navigation and content links display as icons and can be selected for navigation when the sidebar is collapsed.
Action Buttons Use (Video, Save, Reset, Submit):
Each action button must be responsive and provide a clear indication of an action being processed or completed.
Save Selected: Confirmation success message displays on the screen for a successful save.
Reset Selected: Warning message to confirm the Reset or return to the in-progress worksheet.
Submit Selected: Warning message to confirm if they are ready to send the assignment to their teacher or return to work on the worksheet.
...