Lesson Preview

The "Lesson Preview" is a modal window that provides a dynamic view of the Lesson Teach Mode and Lesson Details Page, designed to offer users an accurate representation of how Lesson are presented to the end-users. This feature is particularly useful for ensuring that the Lessons are correctly formatted and culturally appropriate for the intended audience.

Figma

https://www.figma.com/file/hq6VjWO99WfQaSzXswgVIY/Authoring?type=design&node-id=2063%3A103700&mode=design&t=MFtQPzYj1LUJzvI2-1

Epic

Feature 189034: Lesson Builder | SEL Authoring Tool

User Story

As a RethinkEd content creator, I want to have a preview feature for Lessons I am working on, so that I can view how my activities will appear to the end-users upon publishing. 

Features and Functionalities

Opening the Preview:

  • The "Lesson Preview" modal can be opened by clicking on the "eye" icon located in the upper right corner of the Lesson Builder form. This action provides immediate access to the feature, allowing users to quickly review how the activity appears in Teach Mode, Lesson Details, Student Center pages.

Display of Active Versions:

  • Only active versions of the Lesson, ensuring that the preview accurately reflects what end-users will see.

Accessibility and Usability:

  • Designed with accessibility in mind, the "Lesson Preview" modal includes intuitive controls for navigating the preview and closing the modal.

  • Close “X” icon to close the full screen preview

  • Toggle Selection: Teaching View, Plan View, Student View

User Interaction Workflow

  1. Accessing the Preview:

    • Users access the "Lesson Preview" by clicking the "eye" icon in the upper right corner of the Lesson Builder.

  2. Reviewing Content:

    • This step allows users to ensure the content's accuracy, relevance, and overall quality across various language versions.

    • Teaching View toggle selected shows the Teaching Mode player and the module contents as the end-user will view it.

    • Plan View toggle selected shows the Lesson Details page as the end-user will view it.

      • Lesson Details layout is dependent on the Module Display Type: Normal, Hidden

    • Student View toggle selected shows the Student Center view of activity/resource as the end-user will view it.

    • The preview options tied to the preview modal are attached to the selected options in the audience picker dropdown menu.

    • Content should only be visible in the preview modals for the audience selection in the dropdown menu.

  3. Closing the Modal:

    • After completing the review, users can close the modal by clicking the “X” icon to return to the Lesson Builder interface.

Conclusion

The "Lesson Preview" modal serves as a critical tool for content creators and administrators, enabling a seamless and efficient way to inspect the presentation of Lessons. By allowing easy access through the "eye" icon on the Lesson Builder form and focusing on the display of active language versions, it ensures activities meet the platform's standards for quality and accessibility.