The "Module Preview" is a modal window that provides a dynamic view of the Module Teach Mode and Module Details Page, designed to offer users an accurate representation of how Module are presented to the end-users. This feature is particularly useful for ensuring that the modules are correctly formatted and culturally appropriate for the intended audience.
Figma
Epic
Feature 193967: Module Builder | SEL Authoring
User Story
As a RethinkEd content creator, I want to have a preview feature for modules 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 "Module Preview" modal can be opened by clicking on the "eye" icon located in the upper right corner of the Module Builder form. This action provides immediate access to the feature, allowing users to quickly review how the activity appears in Teach Mode and Module Details pages.
Display of Active Versions:
Only active versions of the activity for the chosen language are displayed, ensuring that the preview accurately reflects what end-users will see.
Accessibility and Usability:
Designed with accessibility in mind, the "Module 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
User Interaction Workflow
Accessing the Preview:
Users access the "Module Preview" by clicking the "eye" icon in the upper right corner of the Module Builder.
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 Module Details page as the end-user will view it.
Closing the Modal:
After completing the review, users can close the modal by clicking the “X” icon to return to the Module Builder interface.
Conclusion
The "Module Preview" modal serves as a critical tool for content creators and administrators, enabling a seamless and efficient way to inspect the presentation of modules. By allowing easy access through the "eye" icon on the Module Builder form and focusing on the display of active language versions, it ensures activities meet the platform's standards for quality and accessibility.