D2L Brightspace Tips: Content Templates

Using content templates on your HTML pages in D2L is a great way to keep a consistent design while creating visually-pleasing content as well as adding interactivity. The templates provided by D2L, which use the Bootstrap framework, allow you to create content pages without typing any code. These templates can also be customized to add your institution's colors and logo.

I have updated these templates to include more accessibility and interactivity, including flip cards and simple knowledge checks. They can be found at the d2l-content-templates repository.

Using Templates in D2L

Here are a few other things to keep in mind while using templates:

Content templates can only be applied to HTML pages within Content. They cannot be added to Announcements, custom widgets on a homepage, or the description areas of modules or items. However, you can copy and paste the entire HTML code from a template page into the source code editor of a custom widget.
They are not templates in the sense that updating an HTML file in one place will automatically update another HTML file. Applying a template in D2L is more like making a copy of the original template file.
The templates use Bootstrap 4 and Font Awesome 5, which means you can copy and paste from the Bootstrap and Font Awesome sites to easily change layouts and add more components.
Even though Bootstrap has some accessibility built in, it is always a good idea to check your pages with the axe DevTools extension for any accessibility issues that need to be addressed before making them available to students. For example, the colors included in Bootstrap are NOT accessible.
D2L does not have version control, so it may be better to update/change code on your computer, track changes with Git, and then upload to D2L to ensure that changes are not lost.

Edit Images in D2L

Using the Attributes menu, which is found under the + sign in the D2L toolbar when editing HTML pages, you can add some Bootstrap classes to images to change their appearance. These changes do not edit the original image file, and can be undone by deleting the classes from Attributes. In the Class box, paste in rounded-lg for rounded corners, rounded-circle to make a square image a circle (or a rectangle image an oval), and img-thumbnail to add a gray border with some padding around the image. If you'd like to use more than one class on an element, separate them by a space.

Responsive Videos and Microsoft Embeds

The video lecture page that is included with the templates contains some code that will make videos reponsive on the page, meaning they will expand to fill 100% of the containing element they are within. You can use this same code to make Microsoft embeds responsive, such as PowerPoint, Excel, or Word embeds using the Web version of these apps. Simply surround the iframe element with a div that includes the responsive classes, similar to the following code:

<div class="embed-responsive embed-responsive-16by9"> <iframe> </iframe> </div>

Note: If you use my updated content templates, JavaScript will automatically make every video and Microsoft embed responsive so that you do not need to add this code manually.

Change Accordion Behavior

You can also add extra code to change the behavior of accordions. In the current templates, all accordion panels are closed on page load and each accordion panel can be opened regardless of how many others have also been opened. It is possible that one panel is automatically open on page load and only one panel can be opened at a time (i.e. as soon as a new panel is opened, the previously opened panel will automatically close). Nested panels are also possible.

One Panel Open by Default

Add the class show to the div tag that has the class collapse for the panel that you want to be open on page load. The code should look like the following:

<div class="collapse show">

Then add the following line of JQuery code to the end of the scripts.min.js file so that the correct arrow icon will show:

$("div.collapse.show").prev().find("button").attr("aria-expanded", "true");

One Panel Open at a Time

Add data-parent="#accordion_" plus the number of the accordion to every div tag that has the class of collapse. For example, every div for the first accordion on the page would look like the following, while the second accordion on the page would use the number 2, and so on:

<div class="collapse" data-parent="#accordion_1">

Note: Some HTML code is generated by JavaScript when the page is rendered in the browser, so the code that you see in D2L's source editor and the code when inspecting the page in the browser are often different. This is the case with accordions and tabs.

Nested Panels

The nested panel code (everything contained with a div of class card) should be entered after the contents inside of the div with the class of card-body, which will be the outer panel. The nested panel should have the following extra classes added to two of its div tags:

<div class="card-header header-nested">

and

<div class="collapse collapse-nested">

Then add the following JQuery code to the scripts.min.js file, making sure to add it before the final closing })); of the function that begins with $.each($(".accordion > .card") in the Accordions section.

$(value).find(".header-nested").attr("id", "heading_nested_" + num); 
$(value).find(".header-nested > .card-title > button").attr({"data-target": 
"#collapse_nested_" + num, "aria-controls": "collapse_nested_" + num}); 
$(value).find(".collapse-nested").attr({id: "collapse_nested_" + num,
"aria-labelledby": "heading_nested_" + num});

Interactive Knowledge Checks

I have created some interactive knowledge checks that can be pasted into HTML pages using the content templates. These exercises are not tracked or graded, but provide students a chance to quickly check their progress as they advance through the course content.

Currently, these new additions include both hover and click flip cards, multiple choice/select (or true/false) and short answer questions, and matching and ordering exercises. Hover cards can be edited completely within D2L's editor like other elements in the templates, whereas the click cards require use of the source code editor. The traditional question types need to have code generated as they are heavily dependent on JavaScript, which can be pasted onto pages using Insert Stuff and Enter Embed Code.

View examples of these knowledge checks and download the code from GitHub. I presented on these interactive additions to the content templates, as well as other accessibility additions, at D2L Fusion in July 2022. All of my updated content template files can be found at the d2l-content-templates repository.