Using the Creator+ Features in Brightspace

The Insert Elements and Practices features are found in the HTML editor Ribbon. To find and use these features follow these instructions:

Use the Layouts tool to create panels that add structure and help organize your course content. Layouts can be used with any element.

To add a Layout to and HTML Content page

1. Within any tool that uses the Brightspace Editor, place your text cursor in the editor in the position you would like to place your playout.
2. Select other Insert Options > Layouts.
3. In the Format Options section, select one of the following layout options:
   1. Two Panels
   2. Two Thirds / One Third Panels
   3. One Third / Two Thirds Panels
   4. Three Panels
   

You can now begin creating content in your layout. Select a panel to begin adding content using tools from Brightspace Editor.

Tabs are useful for providing information that belongs in a series. For example, laying out the information from a scientific study that has a hypothesis, a method, and findings.

Please note that the demo video does not have audio. Text instructions follow below.

To insert Tabs:

1. Click on the Other Insert Option icon in the HTML Editor Ribbon.
2. Select Insert Element.
3. Select the Element you want to add to your page. In this example we will be inserting the Tabs element.
4. Tabs have the option to be created vertically or horizontally. Select which option you prefer. Then edit the Learner Instructions as desired.
5. To edit the content of the tabs, fill out the Tab 1 Title and Tab 1 Content, then continue on to tab 2. If you need to add more tabs, click on the Add Tab Item at the bottom.
6. Once you’re finished click on Preview. If you are satisfied, click insert. If you wish to continue editing, click on Back.
7. To view the element in action. Click Save and Close. You will then be able to try out the Practices and Elements and see what it will look like to students.

Accordions are useful when you have a list of items with additional information to learn about each item. Using an accordion allows the learner to focus on learning the list first, then expanding their understanding by opening each accordion. Scaffolding content in this way supports the cognitive organization of this information.

Please note that the demo video does not have audio. Text instructions follow below.

To Insert Accordions:

1. Click on the Other Insert Option icon in the HTML Editor Ribbon.
2. Select Insert Element.
3. Select the Element you want to add to your page. In this example we will be inserting the Accordion element.
4. Accordions can be numbered or unnumbered. Select the appropriate option. For this example we are selecting unnumbered.
5. Type in the first accordion tab title and it’s contents. Then continue with the second, then third by clicking on Add Accordion Item, and so on until you have entered in all the relevant information. Then click Preview.
6. Test out the element. If you are satisfied, click Insert. If not, click Back to continue editing. Once you have clicked insert, click Save and Close to view the completed page.

Click and Reveals are a useful tool when you want to present a learner with a question, statement, or fact to reflect on before they select a button to reveal the key learning related to the original statement. You can also use a Click and Reveal to provide additional optional learning materials.

Please note that the demo video does not have audio. Text instructions follow below.

To insert Click and Reveal:

1. Click on the Other Insert Option icon in the HTML Editor Ribbon.
2. Select Insert Element.
3. Select the Element you want to add to your page. In this example we will be inserting the Click and Reveal element.
4. The Click and Reveal has the option to include a Question icon or not. Select the desired option.
5. Add in the Introductory Content and Learner Instructions. You can also edit the button Label.
6. In the Revealed content box, type in the information you want students to see once they click on the button.
7. Click Preview. Test out the element. If you are satisfied, click Insert. If not, click Back to continue editing. Once you have clicked insert, click Save and Close to view the completed page.

A callout is a bordered rectangle. It separates the content within the rectangle from the rest of the content. Callouts are useful for drawing attention to a key detail or an aside to the primary content, like a case study, definition, or anecdote.

Please note that the demo video does not have audio. Text instructions follow below.

To insert a Callout:

1. Click on the Other Insert Option icon in the HTML Editor Ribbon.
2. Select Insert Element.
3. Select the Element you want to add to your page. In this example we will be inserting the Callout element.
4. In Callouts, you have 3 icon options: Question, Attention, and Jumbo. Select you desired option.
5. Add in information in the Title and Callout Content boxes.
6. Click Preview. Test out the element. If you are satisfied, click Insert. If not, click Back to continue editing. Once you have clicked insert, click Save and Close to view the completed page.

A timeline is useful for laying out events over a period of time, the steps in a process, or items in a series. A timeline can also be useful for demonstrating two sides of a conversation.

Please note that the demo video does not have audio. Text instructions follow below.

To insert a Timeline:

1. Click on the Other Insert Option icon in the HTML Editor Ribbon.
2. Select Insert Element.
3. Select the Element you want to add to your page. In this example we will be inserting the Timeline element.
4. The timeline has two format options. You can select from either Left-aligned timeline, or alternating timeline which will have content alternation left and right of the timeline. Select your desired Format Option.
5. Add in the panel titles and Text as required. You can add additional Panels by clicking add Item at the bottom.
6. Click Preview. Test out the element. If you are satisfied, click Insert. If not, click Back to continue editing. Once you have clicked insert, click Save and Close to view the completed page.

A stylized quote uses large, stylized quotation marks and colour to set it apart from primary content.

Please note that the demo video does not have audio. Text instructions follow below.

To insert a stylized quote:

1. Click on the Other Insert Option icon in the HTML Editor Ribbon.
2. Select Insert Element.
3. Select the Element you want to add to your page. In this example we will be inserting the Stylized Quote element.
4. There are 2 format options for stylized quotes: standard and large focus. Select the desired format option.
5. Insert the quote text under Quotation. Including an attribution is optional, but this is where you would insert the name of the person or group that you are quoting.
6. Click Preview. Test out the element. If you are satisfied, click Insert. If not, click Back to continue editing. Once you have clicked insert, click Save and Close to view the completed page.

   Top Image is the Standard format while bottom image is the Large Focus format.

Flip cards are an excellent choice for displaying a collection of items, that don’t necessarily have a strict structure in their relationship to one another. This of flip cards like items that belong in the same group that can be laid out at random without impacting meaning. Flip cards are an especially engaging choice when you can incorporate images.

Please note that the demo video does not have audio. Text instructions follow below.

To insert Flip Cards:

1. Click on the Other Insert Option icon in the HTML Editor Ribbon.
2. Select Insert Element.
3. Select the Element you want to add to your page. In this example we will be inserting the Flip Cards element.
4. Update the learner instructions as necessary.
5. Start by filling out the information for Flip Card 1. Add in a title and Content to the Front, then click on Back to add a title and content to the back of the card.
6. With flip cards you can add additional cards either horizontally (one next to the other) by clicking Add Item on the right on the page, or vertically (one on top of the other) by clicking on Add Row.
7. Click Preview. Test out the element. If you are satisfied, click Insert. If not, click Back to continue editing. Once you have clicked insert, click Save and Close to view the completed page.

Top Image displays the front of the cards. The bottom image displays the back of the cards.

Hotspots provide a multilayer learning experience enriched with multimedia and interactive components that promote exploration, analysis, and evaluation. Learners can select and open active icons to learn more about the parts of an image. An invisible grid overlay allows the image to be fully accessible with the integration of micro alt tags.

Please note that the demo video does not have audio. Text instructions follow below.

To add hotspot markers to images:

1. In Brightspace Editor, select Other Insert Options > Insert Element.
2. In the Insert Element dialogue, click Hotspot.
3. Choose to keep the default Learner Instructions or add custom Learner Instructions.
4. Click Add Image and select an image from your personal device. Enter alt text in the Alternative Text field.
5. Click Save.
6. Click anywhere on the image to place a hotspot marker. The interface to build content associated with the hotspot appears to the right of the image.
7. In the right panel, select a hotspot to edit or add content. Each hotspot is labeled in the order in which you placed the marker.
8. You can rename the hotspot, Hotspot names are used for editing and for screen reader users.
9. In the Hotspot field, use the full HTML editor ro add a description or more information, additional images, videos, and links to additional resources.
10. Click Hotspot Marker to change the icon and colour of a hotspot marker.
11. Select Hotspots to return to the hotspot selection option. Repeat steps 6-10 for all hotspots.
Note: you can insert up to nine hotspot markers for an image.
12. After adding all your hotspot markers, below Learner Instructions, click Accessibility.
13. Under the Accessibility heading, select one of the following:
    1. Accessible hotspots only: Let’s you add a micro alt tag for each hotspot to describe the part of the image associated with the hotspot. This is an ideal option when the position of the hotspot within the image or the contextual details of the image are not relevant to the learning.
    2. Fully accessible image: Lets you split the image into a gride, allowing you to add a micro alt tag for each cell of the grid to describe all parts of the image. This is an ideal option when the position of the hotspot within the image or the contextual details of the image will inform the learning.
14. Add micro alt tags as required based on your accessibility section.
15. Click Save and Insert to add the Hotspot into the Content page.
16. Click Save and Close.

You have created a Hotspot Element.

A Carousel is like a mini slide show that can be embedded right into your course page. Each Carousel slide can display an image and text. Learners have the option of progressing to the next slide in the Carousel or going back to view a previous slide.

Please note that the demo video does not have audio. Text instructions follow below.

To insert a Carousel:

1. Click on the Other Insert Option icon in the HTML Editor Ribbon.
2. Select Insert Element.
3. Select the Element you want to add to your page. In this example we will be inserting the Carousel element.
4. Update the learner instructions as necessary.
5. Edit each Carousel Slide by uploading an image, adding title, and/or adding text.
6. Two slides will populate by default. Click on Add Slide at the bottom of the page to add additional slides.
7. Click on Preview to view to preview your slides. If happy, click on Insert. If you wish to make changes, click back and proceed with editing.
8. Once inserted, click on Save and Close (or Save) to save your HTML page.

Please note that the demo video does not have audio. Text instructions follow below.

To insert the Dropdown fill in the blank Practice:

1. Click on the Other Insert Option icon in the HTML Editor Ribbon.
2. Select Insert Practice.
3. Select the Practice you want to add to your page. In this example we will be inserting the Dropdown fill in the blank.
4. Add in a title. Description and instructions are optional but recommended.
5. Add in question text. To create a blank spot, type in [[blank1]]. To add a second blank type [[blank2]], etc. Click on Update Blanks once you’ve added all your blank spots.
6. This will create blank fields below where you can type in the correct answer, as well as incorrect answers to add options to choose from in the drop down menu.
7. Select how the practice will be scored.
8. If you would like to add in feedback for the student, click on Options at the top of the page and select Add Feedback. This will create two new boxes at the bottom of the page where you can type in your feedback.
9. Click Preview to test out the question or Insert to add the practice onto your page.
   

Please note that the demo video does not have audio. Text instructions follow below.

To insert the Fill in the blank Practice:

1. Click on the Other Insert Option icon in the HTML Editor Ribbon.
2. Select Insert Practice.
3. Select the Practice you want to add to your page. In this example we will be inserting the Fill in the blank.
4. Add in a title, short Description, and Instructions as desired.
5. Add in question text. To create a blank spot, type in [[blank1]]. To add a second blank type [[blank2]], etc. Click on Update Blanks once you’ve added all your blank spots.
6. This will create blank fields below where you can type in the correct answer. You will also have the option to add in alternative answers, turn on the case sensitive option, and create regular expressions.
7. Select how the practice will be scored.
8. If you would like to add in feedback for the student, click on Options at the top of the page and select Add Feedback. This will create two new boxes at the bottom of the page where you can type in your feedback.
9. Click Preview to test out the question or Insert to add the practice onto your page.
   

Please note that the demo video does not have audio. Text instructions follow below.

To insert the Multi-Select Practice:

1. Click on the Other Insert Option icon in the HTML Editor Ribbon.
2. Select Insert Practice.
3. Select the Practice you want to add to your page. In this example we will be inserting the Multi-Select.
4. Add in a title and short description as desired.
5. Type in the Question in the Question text box, then type in the answers below. To add more answer options, click on Add Answer. You also have the option to add in images. Finally, make sure to select the correct answers.
6. Then check off Randomize answer order if you wish to do so and select how the practice will be scored from the drop-down.
7. If you would like to add in feedback, hints, or enumeration, click on Options at the top of the page and select the appropriate choice.
8. Click Preview to test out the question or Insert to add the practice onto your page.

Please note that the demo video does not have audio. Text instructions follow below.

To insert the Multiple Choice Practice:

1. Click on the Other Insert Option icon in the HTML Editor Ribbon.
2. Select Insert Practice.
3. Select the Practice you want to add to your page. In this example we will be inserting the Multiple Choice.
4. Add in a title and short description as desired.
5. Type in the Question in the Question text box, then type in the answers below. To add more answer options, click on Add Answer. You also have the option to add in images. Finally, make sure to select the correct answer.
6. Then check off Randomize answer order if you wish to do so and select how the practice will be scored from the drop-down.
7. If you would like to add in feedback, hints, or enumeration, click on Options at the top of the page and select the appropriate choice.
8. Click Preview to test out the question or Insert to add the practice onto your page.

Please note that the demo video does not have audio. Text instructions follow below.

To insert the Sequencing Practice:

1. Click on the Other Insert Option icon in the HTML Editor Ribbon.
2. Select Insert Practice.
3. Select the Practice you want to add to your page. In this example we will be inserting the Sequencing.
4. Add in a title, short description, and Instructions as desired.
5. Type in the sequence steps and Items. The Items will automatically shuffle in the practice. If you need more steps, click on Add Sequence Step.
6. Click Preview to test out the question or Insert to add the practice onto your page.

Please note that the demo video does not have audio. Text instructions follow below.

To insert the Sorting Practice:

1. Click on the Other Insert Option icon in the HTML Editor Ribbon.
2. Select Insert Practice
3. Select the Practice you want to add to your page. In this example we will be inserting the Sorting.
4. Add in a title, short description, and Instructions as desired.
5. Fill out the category information. Click add category to add more
6. Click in a category and set up the associated sortable item. You can more than 1 sortable item to a category, if necessary, by clicking on Add Sortable Item.
7. Click Preview to test out the question or Insert to add the practice onto your page.

Please note that the demo video does not have audio. Text instructions follow below.

To insert the Sorting Practice:

1. Click on the Other Insert Option icon in the HTML Editor Ribbon.
2. Select Insert Practice
3. Select the Practice you want to add to your page. In this example we will be inserting the True or False.
4. Add in a title, short description, and Instructions as desired.
5. Type in the Question Text and select the correct answer.
6. Click on Options at the top of the page to add in Feedback, Hints, and/or Enumeration.
7. Click Preview to test out the question or Insert to add the practice onto your page.