Interactive Worksheet Activity
- Mary DelPiano
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
Save: Saves student progress.
Reset: Clears the worksheet from all added work.
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.
Post Interactive Engagement
Ready to Submit modal:
Heading: ‘Ready to Submit?’
Message: ‘Click the Submit button to let your teacher know you completed the activity.’
Back button: Returns user to the Interactive player screen.
Submit button: Submits the activity to the teacher and the ‘Activity Complete’ animation plays that automatically transitions to the video open in the player with the discussion panel.
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.
Post Interactive Engagement
Ready to Submit modal:
Heading: ‘Ready to Submit?’
Message: ‘Click the Submit button to let your teacher know you completed the activity.’
Back button: Returns user to the interactive player screen.
Submit button: Submits the activity to the teacher and the ‘Activity Complete’ animation plays that automatically transitions to the interactive open in the player with the discussion panel.
Activity Complete screen should display for 3-4 seconds.
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.
Post-Interactive Engagement:
Upon completing the interactive, clear ‘Ready to Submit?' model should appear that prompts for "Back" or “Submit” actions.
‘Back’ should return the user to the video so that they can continue with the interactive.
‘Submit’ will submit the activity to the teacher and the ‘Activity Complete’ animation plays that automatically transitions to the interactive open in the player with the discussion panel.
Finalization:
Upon submission, an ‘Activity Complete’ confirmation message is displayed, and the completed worksheet is logged for teacher review or grading.