LXD Style Guide

iPD’s Guide for Course Design & Development

Instructions for Interactives & Discussions

Standard

The standard with which Michigan Virtual courses need to comply. 

All instructional content, including Brightspace HTML templates and embedded H5P activities, must strictly adhere to provided directions and guidelines to ensure consistency and compliance. When directions are not explicitly provided, use inclusive language to ensure accessibility for all users.

 

Requirements 

What exactly do course developers need to include in order to comply with this standard?

Brightspace BS24 Templates

For interactives built using BrightSpace HTML master templates, follow the directions provided within the templates. No modifications to these directions are necessary.

Embed H5P Activities

When embedding H5P activities, follow the instructions detailed in the “Implementation” section. These directions are specifically designed to meet the relevant standards.

Discussions

Please see the Style Guide: Discussions standard.

 

Implementation 

How can course developers implement this standard? What is the process for doing so?

BrightSpace BS24 Templates

Please read through the directions provided in the BS24 Templates as they pertain to each interactive. If appropriate, provide a brief topic of the interactive within the directions.

Ex. Select each tab below to read about [insert topic].

Embed H5P Activities

Use the table below to review the directions for each type of approved interactive. Be sure to copy and paste these directions above the embedded H5P activity.

Activity Instructions
Accordion BS: Select each dropdown below to read [topic].

For accessibility purposes, make sure headings of panel align with heading structure of course (if accordion follows H3, then each accordion heading should be H4)

Audio BS: Select the “Play” arrow button to hear audio.

For accessibility purposes, a transcript would need to be added outside of this content. File upload only.

Branching Scenario BS: Select the “Start [if custom]” button to proceed to the first part of the scenario. To navigate through the scenario(s)…” 

These instructions will need to be consistent with directions of what content is embedded within the branching scenario. Be sure that the button titles match the instructions provided.

For accessibility purposes, avoid course presentation mode within content.

Chart BS: Review the [graph type] about [topic] below.

Bar or pie graph static. Ensure colors are changed as they default to the same color.

Collage BS: Review the images below. If unable to review the images, be sure to access the image description(s). [Only for those images that provide learning content to the course.]

Place images in a layout (example – 2 images x2 images). Spacing, frame, and height toggles available. 

Dialog Cards BS: Select “Turn” to learn more. To navigate to the next card in the series, use the right blue arrow below the card.
Documentation Tool BS: Fill out each form with the required information before selecting the blue arrow in the bottom right corner of the document. For any buttons on the screen, select “[Add goal]” to add additional text or ideas. On the final screen, select the “Create document” button to create a document. To navigate from one section to the next, use the left menu.
Drag and Drop BS: Match each [topic] below by dragging each label to the correct category. Select “Check” to check your understanding and receive feedback.

For accessibility purposes, the activity must have visible labels for drop zones. Labels can be text only.

Drag the Words BS: Match each [topic] below by dragging each label to the correct category. Select “Check” to check your understanding and receive feedback.

Limited rich text formatting.

Guess the Answer BS: Review the image provided and record your answer to the question provided; select “Check” to check your understanding and receive feedback.

The activity could be difficult for visually impaired learners.

Image Choice BS: Select each image that [topic such as answers the question correctly]. To ensure understanding, select “Check” to receive a score and feedback.
Image Hotspots BS: Select each “+” below to learn more about [topic]. 

The activity could be difficult for visually impaired learners.

Image Slider
(Juxtaposition)
BS: Select the sliding bar arrows and move from left to right to compare the two images.
Interactive Book BS: Review the content below to learn more about [topic]. 

These instructions will need to be consistent with directions of what content is embedded within the interactive book. Be sure that the button titles match the instructions provided.

If removing the left nav side, be sure to include text at the bottom of each page that states, “Proceed by selecting the arrow pointing to the right in the upper or lower corners of this activity.”

Interactive Video BS: Interact with the video that follows by completing the instructions on the screen. 
Memory Game BS: Match each [topic] below with the [topic].

The activity could be difficult for visually impaired learners.

Multiple Choice BS: After choosing your answer, select “Check” to receive feedback and determine if your answer is correct.
Quiz (Question Set) BS: After answering the question, select “Check” to receive feedback and determine if your answer is correct. To navigate to the next question, select the right blue arrow in the bottom right corner.

These instructions will need to be consistent with directions of what content is embedded within the interactive book. Be sure that the button titles match the instructions provided.

Single Choice Set BS: Select the appropriate answer below. After selecting the answer, the next question will automatically appear.
True/False BS: After choosing your answer, select “Check” to receive feedback and determine if your answer is correct.
Virtual Tour (360) BS: Navigate through this activity using the sequentially numbered hotspots to select the next item. Explore all hotspots for additional questions and information.

All hotspots should be numbered for learners to easily navigate through the tour.

The activity could be difficult for visually impaired learners.

 

Resources

What resources would help a developer implement this standard appropriately?

Submit vs Finish Button on Ungraded H5Ps

BrightSpace 24 Master Templates

A Short Guide to Using Accessible and Inclusive Language in eLearning from Artha

Style Guide: Language Usage

H5P Recommendations Guide from Michigan Virtual

H5P Recommendations Guide from H5P

Style Guide: Interactive Video Transcripts

Style Guide: Discussions