Teaching Mode Player

Owned by Mary DelPiano
Last updated: Jul 29, 2024
3 min read

Overview

The Teaching Mode Player interface should allow for an immersive learning experience with easy navigation through different sections of the lesson.

Figma:

https://www.figma.com/file/O0FDJoUbCHKQGlk3Wqq9ND/Teacher-UI?type=design&node-id=285%3A41568&mode=design&t=woJJu7ywh08eGjbi-1

Epic:

Feature 193775: Lesson Library

Acceptance Criteria

  • Provide a user-friendly interface that integrates lesson and module content with supplementary lesson information and navigational elements.

  • Ensure seamless interaction for users with the ability to access various parts of the lesson from the sidebar.

UI Description

  1. Sidebar Layout:

    • The sidebar includes a back navigation link, a lesson title with a long title option, a brief lesson description with a "Read More" option, and a table of contents categorized into "Learn," "Practice," and "Dive Deeper" sections.

      • The Module Player will not have the “Learn”, “Practice”, and “Dive Deeper” sections and will display the content in the module as a list.

    • Icons accompanying sidebar items to represent different types of content such as resources (videos, images, PDFs) and activities.

    • Table of Contents: Ability to independently scroll table of contents list so that the view remains in the view port of the screen when there is a longer list of content.

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

  2. Teaching Mode Player Area:

    • A prominent central location for the content in the selected module or lesson to display.

    • Background Color: Display Rethink Blue (386DBD) as background color in the content player.

    • "Next" navigation button to proceed to the subsequent part of the lesson or module.

    • "Back" navigation button to proceed to the previous part of the lesson or module.

  3. Teaching Player PDF Pagination:

    • Display a top control bar aligned to the top of a PDF in the Teaching Player

    • Display left arrow and right arrow to navigate between PDF pages

      • On hover, display the hover state of the arrow

    • Display zoom controls and percentage right aligned on the top control bar.

  4. Responsive Design:

    • The layout should be responsive, allowing the sidebar to collapse or expand based on user interaction without disrupting the lesson player visibility.

User Interaction and Validation Notes

  1. Navigation:

    • Users can navigate back to the previous resource (Lesson Library, Lesson Details, Module Details) using the "Back" link.

    • The sidebar provides interactive elements to access different parts of the lesson, with visual feedback for the selected section.

  2. Teaching Player PDF Pagination:

    • Users can navigate between PDF pages by selecting the left arrow (previous pages) or the right arrow (next page) in the top control bar. A hover state of the arrow will display when a user hovers over the button.

    • Users can press the left keyboard arrow to navigate to the previous page or pages of the PDF in the player

    • Users can press the right keyboard arrow to navigate to the next page or pages of the PDF in the player

    • User can zoom in or zoom out by using the zoom controls: minus button and plus button and the zoom percentage will be reflected in the percentage number.

      • A hover state of the plus or minus icon will display when a user hovers over the button (grey circle background).

  3. Content Interaction:

    • Users can expand descriptions or lesson sections to view more information where applicable.

    • Each item in the table of contents should be clickable and lead to the corresponding lesson content or module content.

  4. Lesson Player Interaction:

    • Users should be able to play, pause, and interact with video content within the video player area.

    • User should be able to use the "Next" button to proceed to the next available content in the lesson or module list.

    • User should be able to use the "Back" button to return to the previous page of content in the lesson or module list.

    • PDFs will have clickable pages in the Teaching Mode Payer

  5. Sidebar Functionality:

    • Users can collapse the sidebar to focus solely on the video 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.

    • Table of Contents: Ability to independently scroll table of contents list so that the view remains in the view port of the screen when there is a longer list of content.

Workflow Description

  1. Lesson Access and Viewing:

    • Users access the Teach Lesson Player interface from the Lesson Details page or Module Details page and are presented with the sidebar and content player.

  2. Content Navigation:

    • Lesson: Within the sidebar, users click on the lesson content ("Learn," "Practice," "Dive Deeper") to navigate the lesson content.

    • Module: Within the sidebar, users click on the module content in the list to navigate the module content.

  3. Content Engagement:

    • Users interact with the lesson or module player to view content, with functionality to pause and play the video content.

  4. Advancing the Lesson:

    • Users proceed to the next part of the lesson using the "Next" button located below content view.

Conclusion

The Teaching Mode Player interface integrates a content player with a navigational sidebar. The platform will provide an engaging and intuitive educational experience for users, enhancing the overall usability of the lesson content and module content.