Content Card Selected | Explore Tab

Overview

Students can engage with educational content across various subjects in the Explore tab of the Student Center. Students can view more details and interact with specific module content they are interested in by selecting a module content card to view the available content that they can complete within a module.

User Story

As a student, I want to be able to select a specific module content card, so that I can focus on content that is most relevant and interesting to me.

Figma

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

Epic

Epic 193777: Student Center

UI Description

1. Navigation

   • The back arrow located in the top left of the module content title container will navigate the user back to the Explore tab on the section they were viewing previously.

2. Title

   • The module content card title that the user selected will display in the top container on the page.

   • Title text will wrap to multiple lines in the container when needed and the container will expand to fit the text.

3. Content Cards

   • Resource and Activity Content cards will display a thumbnail and the title of the resource or activity content.

   • The content displayed will be the resources and activities included in the module that was selected.

     • SEL Quizzes will not display in the modules in the Student Center Explore tab.

     • Mental Health content will be hidden from the Student Center Explore tab.

   • Thumbnail: Thumbnail images must occupy 100% of the container width and align to the top of the container.

User Interaction and Validation Notes

• Content Selection:

  • Student will select the activity or resource content card that they would like to interact with which will open the assignment in the video player, or interactive worksheet player.

    • Quizzes are excluded from the Explore tab contents.

• Content Navigation:

  • Clicking the arrow in the title container will navigate the user back to the Explore tab on the section they were previously viewing.

• My Viewed Items:

  • Student user selects a module content card in a Topic section to view or interact with module content.

  • Upon returning to Explore screen, the module content card displays as the first module content card in the 'My Viewed Items' section at the top of the page below the search bar.

• Validation:

  • User selections and interactions should be responsive with no lag to promote a seamless user experience.

Workflow Description

1. Initial Load:

   • When a student enters the "Explore" area, they are presented with a dashboard populated with subject sections based on the default or previously saved preferences.

2. Content Selection:

   • The student selects a module content card from one of the Topic sections to view the materials.

   • Selecting a module content card opens a page that shows the resources and activities within the titled module.

   • Student user can select a specific resource or activity to interact with or complete.

     • Student selects the activity or resource content card that they would like to interact with which will open the assignment in the video player, or interactive worksheet player.

3. Navigating Content:

   • Within a module content view, the student clicks the navigation arrow to return to the Explore tab in the Student Center on the section they were previously viewing.

4. Session End:

   • When the student leaves the "Explore" area, their subject selections and the position of the content cards within each section are saved.

   • Upon return, the student finds the "Explore" dashboard as they left it, allowing them to pick up where they left off.