Overview
The "Explore" area is designed to be an interface where students can engage with educational content across various subjects.
...
Search Bar
Search functionality will be by titles, phrases, keywords, and tags of the content.
Content displayed as user searches should be content in the student's grade level or grade band (3-5), (6-8), (9-12).
Subject Filters
Each subject that has content will display a subject selection filter below the search bar.
Subject selection filters will automatically be pre-selected when the user navigates to the Explore page
De-selected subject selection filter will hide the content for that given subject.
Subjects: Social and Emotional, Mental Health
Recently Viewed
The student selects a module from the topics/domains. The module content card displays in the Recently Viewed and also continues to display in the topic/domain section.
Recommended For You Section
The recommended for you section will change as the user selects and interacts with content.
Recommended For You Section will show the user content that is similar to the content they have previously selected and interacted with on the platform.
Content Sections
Each content section shall will have a header (subject Topic/Domain title) and a series of module content cards.
Content Cards
Content cards will display a thumbnail, the subject, and the title of the contentmodule.
Thumbnail: Thumbnail images must occupy 100% of the container width and align to the top of the container.
Browsing Functionality
The interface will include navigation arrows within each content section for content browsing.
Topic sections with 1-5 module content cards will display without navigation arrows
Topic sections with 6 or more content cards will display with navigation arrows.
User Interaction and Validation Notes
Subject Selection:
Each subject header will have a selection toggle to enable or disable the selection.
When a student deselects a subject, the corresponding content section should smoothly transition out of view.
The state of selected/deselected subjects will be saved for the user's next session.
Recently Viewed:
Student user selects a module content card in a Topic (Domain) 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 Recently Viewed section at the top of the page below the search bar.
Content Navigation:
Topic sections with 6 or more content cards will display with navigation arrows.
The content card on the right of the screen will display in partial view when there are 6 or more cards in view on the screen.
Clicking the arrow icons will shift the content cards within that section.
The card on the far right will transition to the far-left position, appearing as the first card.
The transition should be animated smoothly to convey the cycling of content.
Validation:
Ensure that deselected subjects remain hidden across sessions unless re-selected by the user.
Validate that the content cycling functionality correctly cycles the cards without skipping any content.
User selections and interactions should be responsive with no lag to promote a seamless user experience.
...