Video Assignment

Owned by Mary DelPiano
Last updated: Jul 19, 2024
2 min read

Overview

The Video player is accessible within the RethinkEd Student Center for assigned videos. The assignment modal will feature a centered video player with a control bar for an interactive learning experience. The accompanying sidebar provides navigational functionality.

User Story

As a student, I want to engage with video content that is easy to control and navigate, so that I can absorb information at my own pace, review important segments, and provide feedback upon completion.

Figma

https://www.figma.com/file/2P8kwFEVvVNOVzG4D2E5Sj/Student-UI?type=design&node-id=1%3A19618&mode=design&t=F23GTnmedOZYdSH5-1

Epic

Epic 193777: Student Center

UI Description

  1. Sidebar Layout:

    • The sidebar includes a back navigation link, a lesson title with a long title option, and a button to Collapse Sidebar.

    • A collapse functionality to minimize the sidebar and provide more space for the video player.

    • A back navigation button ("Back") to return to the assignments page.

  2. Video Experience

    • A responsive video player centered on the interface.

    • Player controls: play/pause button, volume control, mute toggle, closed caption, full screen

  3. Post Video 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 video 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

  • Video Playback:

    • Controls should be intuitive, with tooltip text on hover for clarity.

    • Video progress should be saved if the student navigates away or pauses.

  • Sidebar Functionality:

    • The "Back" button should have a confirmation prompt to prevent accidental navigation away from the video.

    • The collapse feature should allow for an immersive full-screen experience without page refresh.

  • Post-Video Engagement:

    • Upon video completion, 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 rewatch the video.

    • ‘Submit’ will submit 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.

      • Activity Complete screen should display for 3-4 seconds.

  • Validation:

    • Ensure player controls function across different browsers and devices.

    • Check that all user decisions and progress are accurately reported to the system for tracking and teacher notification.

Workflow Description

  1. Video Engagement:

    • The student accesses the video assignment from the Student Center and begins the video and navigational tools available.

  2. Interaction with Video Content:

    • If the student selects the "Back" button, they are prompted to confirm their decision to prevent accidental loss of progress.

  3. Post-Video Actions:

    • Upon completing the video, the student chooses to rewatch, which restarts the video without refresh or student selects Close which notifies their teacher and returns student to My Assignments To-Do tab of Student Center.

    • If rewatching the video, the student is transitioned to a screen with the video on one side and a discussion panel on the other.

  4. Continued Engagement or Completion:

    • If the student chooses to engage in discussion, their interaction is saved and made accessible to the teacher.

    • If the student exits after completion, their progress is saved and reported to the teacher for follow-up.