...
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.
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
...
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.
Worksheet Review and SubmissionPost-Interactive Engagement:
After Upon 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' buttoninteractive, 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, a an ‘Activity Complete’ confirmation message is displayed, and the completed worksheet is logged for teacher review or grading.