Overview
The interactive worksheet feature provides students with a digital platform to complete their assignments. This interactive worksheet is designed to be engaging and user-friendly, incorporating tools that allow for personalized text input and drawing to complete an assignment.
User Story
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
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:
Central to the UI is the interactive worksheet section where students can view the worksheet content.
The user should have the ability to zoom in and out of the worksheet.
The user should be able to click and drag while zoomed in to navigate the view port to a different section of the worksheet.
Toolbar:
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.
User Interaction and Validation Notes
Interaction with Tools:
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.
Workflow Description
Worksheet Access:
Student accesses the interactive worksheet through the student center.
Tool Selection and Usage:
The student selects tools from the toolbar to fill out the worksheet, such as the brush to draw or the text box to type.
Progress Saving:
As the student progresses, they have the option to save their work at any point using the 'Save' button.
Worksheet Reset:
If the student wishes to start over, the 'Reset' button clears all inputs on the worksheet.
Worksheet Review and Submission:
After completing the worksheet, the student reviews their work and submits it using the 'Submit' button.
Supporting Materials Access:
If the student needs guidance, they can watch the instructional video by clicking the 'Video' button.
Finalization:
Upon submission, a confirmation message is displayed, and the completed worksheet is logged for teacher review or grading.