Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Overview

The Module Plan Settings tab allows users to upload thumbnails, select keywords, and tag related topics, academic skills, and materials for a module.

Figma

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

Epic

Feature 193967: Module Builder | SEL Authoring

UI Description

  1. Thumbnail Upload:

    • A designated area for uploading a module thumbnail with an option to click to upload or drag and drop files.

    • Required: No

    • Acceptable file formats: SVG, PNG, JPG, or GIF, with a maximum file size indicated (e.g., 3MB).

    • An automatic thumbnail generation if no custom thumbnail is uploaded.

  2. Keywords Section:

    • A field that displays selected keywords as chips that can be added or removed.

    • Required: No

  3. Related Topics:

    • Collapsible lists of related topics categorized under headings like "Awareness of Self & Others," "Self-Management," etc., each with checkboxes.

    • Required: No

    • Type of Input: Checkbox

  4. Tags Selection:

    • Options for tagging the module plan with attributes such as group size, academic skills, and activity type, each with checkboxes.

    • Type of Input: Checkbox

User Interaction and Validation Notes

  1. Thumbnail Management:

    • Users can upload a thumbnail by clicking the upload area or dragging a file into it.

    • The system should validate the file type and size and display an error message if the upload does not meet the specified criteria.

  2. Keyword Management:

    • Users can type to add new keywords and press enter or separate words by commas to create a keyword chip

    • Users can click an 'x' on a chip to remove a keyword from the text input field.

  3. Topic and Tag Selection:

    • Users can select or deselect checkboxes for related topics and tags for the module.

Workflow Description:

  1. Opening the Module Plan:

  • The educator opens the module plan settings from the Module Builder interface to add or edit information.

  1. Thumbnail Uploading:

  • The educator uploads a thumbnail for the module or relies on the system to generate one if none is provided.

  1. Keyword Tagging:

  • Keywords are added by typing and confirmed with an enter key press or words separated by commas to turn them into chips for easy viewing and management.

  1. Related Topics and Tagging:

  • The educator selects relevant topics and tags that correspond to the module's content for better categorization and discovery.

Conclusion

The Module Plan Settings tab organizes content, making it easily discoverable and accessible.