Backgrounds/Banners

Any item can have a background color added to it that stretches across the full width of the content. This can be useful to create a background color for a section to make it stand out or feel separate from the rest of the content. These can be useful for footers or headers. There are plenty of creative ways that this can be combined with other elements. For example, an image that fades to the same color as the background can seem to “grow” for different screens. If you have text against a color, ensure that there is enough contrast. You can use this tool to check the contrast. You can use this tool to find a different shade if needed.

Example

Code Snippet

<div style="background-color: #BBE5EE;">

[content within banner]

</div>

Supporting Research

Using background colors or banners to visually separate content can help organize information and guide learner attention (Malamed, 2015). This aligns with the multimedia learning principle of segmenting, which suggests that complex information should be broken down into smaller, more manageable chunks (Mayer, 2009). However, it’s important to ensure sufficient contrast between text and background colors to maintain readability and accessibility (W3C, 2018). The tools provided for checking contrast and generating shades can help instructors adhere to these guidelines.

Accordions

Accordions are “drop downs” that can be clicked on to show temporarily hidden content.

Example

Code Snippet

<details>

<summary>[title]</summary>

[content]

</details>

Supporting Research

Accordions allow for the progressive disclosure of information, which can reduce cognitive load and help learners focus on the most relevant content (Clark & Mayer, 2016). By hiding less essential information until needed, accordions align with the multimedia learning principle of coherence, which suggests that extraneous material should be minimized (Mayer, 2009). The interactive nature of accordions also promotes active learning and learner engagement (Kosslyn, 2007). However, it’s important to use clear and descriptive titles for each accordion to ensure that learners can easily find the information they need (Nielsen, 2011).

Audio Widget

The <audio> tag allows you to upload audio files into the “files” folder in Canvas, and then make that audio playable in a Canvas page. The best file type for the web is .mp3. Embedded audio offers several advantages over embedded video when creating e-learning content. Audio files are generally easier and faster to produce compared to video, as they require less technical setup and editing. Additionally, audio content tends to age more gracefully than video, as it is less dependent on visual aesthetics and production quality that can become outdated over time. Embedded audio is also much more accessible for learners with low internet bandwidth, as audio files are typically smaller and require less data to stream than video. However, it’s important to note that embedded audio works best as supplemental content rather than essential or core information, as it may not fully engage all learning styles and preferences. When used strategically, embedded audio can enhance the e-learning experience without overwhelming learners or compromising accessibility.

Example

Example Explanation

When you place any kind of file in your “FILES’ folder in Canvas, it is assigned a file number. There are a couple of ways to find out that number. The easiest is to right-click the file and “copy URL”. Somewhere in the URL you will see the file number or ID. In addition to providing your own audio clips, the only other thing you will need to edit are the green text items in the code to reflect the file ID numbers of your sound files in your own courses. After you change those, you can copy and paste the code into your Canvas page.

• My course ID is # 134 (each course you have will have its own ID. You can get the ID by looking in the URL)
• My File ID # 17584 (this is the number of this particular sound file in my Canvas course. Your files will have their own numbers as well)

Code Snippet

<div class="description user_content student-version">

<p>Press the play button to hear from co-teachers in the field.</p>

<audio src="/courses/134/files/17584/download" controls="controls"> Your browser does not support the audio file.</audio>

</div>

Supporting Research

Embedded audio can be an effective tool for enhancing learning, particularly when used as supplementary material. According to the modality principle in multimedia learning, presenting information in both visual and auditory formats can improve learning outcomes (Mayer, 2009). However, it’s important to consider cognitive load and avoid overwhelming learners with too much simultaneous information (Sweller, 1994). By using audio strategically and ensuring that it complements rather than duplicates visual content, instructors can create a more engaging and effective learning experience (Clark & Mayer, 2016). Additionally, providing audio alternatives can improve accessibility for learners with different needs and preferences (CAST, 2018).

In-Page Scenario

Embedding scenario-based e-learning within Canvas transforms traditional courses into immersive, interactive experiences that engage students by simulating real-life challenges. This approach allows learners to apply theoretical knowledge in practical, scenario-driven activities directly integrated into the Canvas learning management system. By designing courses that incorporate these realistic scenarios, instructors can significantly enhance the learning experience, ensuring content is deeply relevant and engaging. Mastering the integration of scenario-based e-learning into Canvas requires some effort, but the investment pays off by preparing students effectively for real-world applications, making your Canvas courses highly impactful and engaging. Feel free to adjust the template below as needed; the extra constraints are simply to show the general form of scenario-based e-learning.

Example

Code Snippet

<h2>Try This Scenario: "<em>[Scenario Title]</em>"</h2> 

<p><em>[Character Name], a [role/position], has been [current situation/approach] for [time period]. After [inciting event/realization], [he/she/they] realize(s) that [current situation/approach] may not be [desired outcome]. [He/She/They] know(s) that [necessary change/transition] will require [steps/considerations].</em></p>

<p><em>Feeling [emotion], [Character Name] [action]. If you were [Character Name], what would you do? Click on the three options below to see the likely outcome of each:</em></p>

<p><a class="btn btn-group btn-info" href="#option1">[Option 1: Best Practice/Ideal Approach]</a></p>

<div id="option1" class="enhanceable_content dialog">[Character Name] [action based on best practice/ideal approach]. [He/She/They] [positive steps/actions]. By [best practice strategies], [Character Name] is able to [positive outcomes].</div>

<p><a class="btn btn-group btn-info" href="#option2">[Option 2: Hasty/Flawed Approach]</a></p>

<div id="option2" class="enhanceable_content dialog">[Character Name] [action based on hasty/flawed approach]. However, [he/she/they] soon realize(s) [challenges/obstacles]. [Stakeholders] express [concerns]. [Character Name] recognizes that [he/she/they] should have [necessary steps]. [He/She/They] resolve(s) to [corrective actions].</div>

<p><a class="btn btn-group btn-info" href="#option3">[Option 3: Collaborative/Strategic Approach]</a></p>

<div id="option3" class="enhanceable_content dialog">[Character Name] [action based on collaboration/strategy]. Together, they [collaborative/strategic actions]. They also plan to [engage stakeholders]. By collaborating with [relevant parties] and [approach to implementation], [Character Name] is able to [positive outcomes].</div>

Supporting Research

Scenario-based e-learning is a highly effective instructional strategy that promotes active learning, problem-solving, and knowledge application (Clark & Mayer, 2016). By immersing learners in realistic situations and allowing them to make decisions and see the consequences of their choices, scenario-based learning enhances engagement, motivation, and transfer of learning (Schank, Berman, & Macpherson, 1999). This approach aligns with the principles of situated learning theory, which emphasizes the importance of authentic context and social interaction in the learning process (Lave & Wenger, 1991). Additionally, providing multiple decision points and feedback within scenarios supports the development of critical thinking and self-reflection skills (Kolb, 1984).

Click-Through Case Study

A click-through case study is an interactive story that guides learners through a character’s experience or problem-solving process. The narrative is divided into five scenes, each presented in a separate tab. Learners click through the tabs to progress through the story at their own pace. This format allows for an engaging and immersive learning experience without overwhelming the learner with too much content at once.

Example

Code Snippet

<h2>Case Study: "<em>[Case Study/Narrative Title]</em>"</h2> <p><em>Advance through the scenes below to read the full story.</em></p>
<div class="enhanceable_content tabs">
    <ul>
        <li><strong><span style="color: #ffffff; font-size: 12pt; background-color: #708d00;"><a style="color: #ffffff; background-color: #708d00;" href="#tab-1">Scene 1</a></span></strong></li>
        <li><strong><span style="color: #ffffff; font-size: 12pt; background-color: #708d00;"><a style="color: #ffffff; background-color: #708d00;" href="#tab-2">Scene 2</a></span></strong></li>
        <li><strong><span style="color: #ffffff; font-size: 12pt; background-color: #708d00;"><a style="color: #ffffff; background-color: #708d00;" href="#tab-3">Scene 3</a></span></strong></li>
        <li><strong><span style="color: #ffffff; font-size: 12pt; background-color: #708d00;"><a style="color: #ffffff; background-color: #708d00;" href="#tab-4">Scene 4</a></span></strong></li>
        <li><strong><span style="color: #ffffff; font-size: 12pt; background-color: #708d00;"><a style="color: #ffffff; background-color: #708d00;" href="#tab-5">Scene 5</a></span></strong></li>
    </ul>
    <div id="tab-1">
        <p>[Narrative scene 1: typically the prologue where characters and setting are set up/protasis]</p>
    </div>
    <div id="tab-2">
        <p>[Narrative scene 2: typically where the conflict begins]</p>
    </div>
    <div id="tab-3">
        <p>[Narrative scene 3: the rising action]</p>
    </div>
    <div id="tab-4">
        <p>[Narrative scene 4: the climax and falling action]</p>
    </div>
    <div id="tab-5">
        <p>[Narrative scene 5: denouement along with moral]</p>
    </div>
</div>

Supporting Research

Click-through case studies leverage the power of storytelling to engage learners and promote deeper understanding. Narratives can help learners connect new information to existing knowledge, foster empathy, and encourage reflection (Abrahamson, 1998). By presenting the story in a series of scenes, click-through narratives align with the segmenting principle of multimedia learning, which suggests that complex information should be broken down into smaller, more manageable chunks (Mayer, 2009). The interactive nature of clicking through the scenes also promotes active learning and learner control, which can enhance motivation and engagement (Clark & Mayer, 2016). Additionally, the realistic portrayal of characters making mistakes and learning from them can help learners develop problem-solving skills and build resilience (Jonassen, 1999).

Bootstrap Grid

I generally discourage individuals from using tables wider than two columns in Canvas. Tables do not display well on smaller mobile devices accessing Canvas. Additionally, it is easy for course instructors to accidentally resize tables. Instead of tables, individuals building choice boards or menus of Buttons can use Bootstrap Grids. Bootstrap grids allow for all page content to scale dynamically and work well on any device. Bootstrap grids can have a bit of a learning curve, but they offer the most customization for how content displays on a page in Canvas. If you need to build a world-class course, take the time to learn these. You can learn the basics of how bootstrap grids work in Canvas in the video below. The example and snippet below are sized for buttons or choice grids. Consider pairing bootstrap grids with background colors/banners and other elements to make more rich content.

Example

Code Snippet

<div class="grid-row">

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">[content]</div>

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">[content]</div>

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">[content]</div>

<div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">[content]</div>

[can repeat line above as needed; adjust sizing as desired]

</div>

Supporting Research

The use of responsive grid systems, such as Bootstrap, is a well-established best practice in web design and e-learning development. Responsive grids ensure that content is displayed optimally across a wide range of devices and screen sizes, enhancing usability and accessibility (Marcotte, 2011). This aligns with the principle of universal design for learning (UDL), which emphasizes the importance of providing multiple means of representation, action, and engagement to accommodate diverse learner needs (CAST, 2018). By using Bootstrap grids instead of fixed-width tables, instructors can create more flexible and inclusive learning experiences that adapt to individual learner preferences and contexts (Meyer, Rose, & Gordon, 2014). Additionally, the modular nature of grid systems supports the chunking of information into manageable pieces, which can help reduce cognitive load and improve learning outcomes (Clark & Mayer, 2016).