Design Notes

One of the goals for this module was to emphasize transparent design. As instructional designers we wanted to provide a way for instructors to replicate interactive elements within the module.

HTML Snippets

Throughout this module we used a couple of different HTML elements to increase the interactive nature of the content. To do this, we used Canvas' HTML editor to create pop-up dialog boxes. If you are unfamiliar with the HTML editor review the Canvas guide on accessing the HTML editor Links to an external site. and our quick intro to HTML and CSS.

To increase the interactive nature of the content, we created knowledge checks and self reflections using pop-up dialog boxes. We could have done this in a variety of ways, but in this case we leaned on Canvas' HTML editor.

To start, we had to have a question or prompt on our page. The next step was to go into our HTML editor within Canvas and to create the dialog boxes. This can be done simply by using pre-made classes. These classes preformatted by Canvas for uses like this.

The dialog box is created with the following code: 

<div 
id="dialog_answer_A" 
class="enhanceable_content dialog" 
style="background: #e1ffd4; padding: 20px;" 
title="Correct!"><span style="font-size: 14pt;"
>
Insert your correct answer explanation here.
</span>
</div>

We write an id that we will reference in our clickable button later. Here we named it after the answer it corresponds to. We use two class types to generate the dialog box with minimal formatting. We used the "ehanceable_content" class, as well as the "dialog" class. To help with signifying the correct answer, we found the hex code for a light green and used it for the background. To find the hex codes for specific colors you can use an online color picker Links to an external site..

Next, we link this dialog box to a button corresponding to a specific answer for our chosen prompt. 

<p>
<a 
id="answer_A" 
class="Button Button--primary" 
title="Click to check your answer" 
href="#dialog_answer_A"
>
Insert correct answer here.
</a>
</p>

Unlike previously, where we used a <div> tag to separate our dialog box from the rest of our content, we will use an <a> tag to hold our button. This is telling Canvas that whatever we are creating is going to link to something, which will be our dialog box we created earlier. The id here won't be referenced by anything but it is making our button easier to find in our code. The classes we are using are "Button" and "Button--primary" which stack to create a clickable button with the primary stylings. You can read more about the different HTML and CSS stylings like using Buttons through Canvas' HTML and CSS style guide. Next, and arguably the most important part, we are using an href attribute to show what our anchor (<a> tag) is referencing. This is where we use the id attribute from the dialog box to link it in. Lastly we insert the answer to a prompt in our button.

Then since this is a knowledge check, we should another option, this time, incorrect. It should be noted that we can create as many separate dialog boxes for correct or incorrect answers answers as we want, as long as we are using a new id for each. Our main difference with this dialog box is we adjust the id, change the title to"Try Again" and choose a new background color. 

<div 
id="dialog_answer_B" 
class="enhanceable_content dialog" 
style="background: #ffd5b5; padding: 20px;" 
title="Try Again">
<span style="font-size: 14pt;"
>
Insert your incorrect answer explanation here.
</span>
</div>

Also don't forget to create its corresponding button!

<p>
<a 
id="answer_B" 
class="Button Button--primary" 
title="Click to check your answer" 
href="#dialog_answer_B"
>
Insert incorrect answer here.
</a>
</p>

With all of these code snippets edited and copied into your HTML editor in Canvas, you should end up with buttons that work like the example below:

Now you may be asking yourself "how did you make that box to hold your knowledge check?". To do that we used the following code:

<div 
style="
margin: 50px 0px 50px 0px;
padding: 10px;
background: insert a color; 
border-right: 5px solid insert a color; 
border-bottom: 5px solid insert a color; 
border-left: 5px solid insert a color; 
border-top: 5px solid insert a color
">
Insert a content tag (for example <p></p>,<img></img>,<a></a>,<div></div>) to contain what will be in this box. Then close it with the final closing </div> tag.
</div>

For this example, the <div> tag is put around whatever content we want to live within the box. Insert a hex code for the colors you want for both the background and borders, and presto! You have a box! You can change the size of the margins so that the box has more space around it, and adjust the padding so that the content inside the box is closer to or farther away from the edges. The sky is the limit!

H5P

Another element we used was a tool called H5P. If you recall, we used an accordion layout to display content in a more engaging and condensed way. We did that by embedding an element from H5P. If you would like to use H5P for an element in your course, feel free to reach out to the Instructional Design team so we can assist. You can see examples of elements from H5P Links to an external site. to get you started.

In this example, I created a demo and was able to create an iframe snippet that I can copy into the HTML editor. All of the following was built in H5P using their editor and generated code.

<iframe 
src="https://ccselearning.h5p.com/content/1291468879772798968/embed" 
width="1088" 
height="195" 
frameborder="0" 
allowfullscreen="allowfullscreen" 
allow="autoplay *; geolocation *; microphone *; camera *; midi *; encrypted-media *" 
title="Example">
</iframe>
<script 
src="https://ccselearning.h5p.com/js/h5p-resizer.js" charset="UTF-8">
</script>

What it looks like after embedding:

The great thing about H5P is that it is a quick clean way to make interactive elements. All you need to do is be able to copy the embed link. All the building also happens in H5P and allows the element to update automatically. So once you embed, any edits you make in H5P automatically are brought over to where it is embedded in Canvas. 

Powtoon

During our scenario we used a video media tool called Powtoon Links to an external site. to create more engaging and interactive videos. We chose Powtoon due to previous experience and recommendation and it had a free account available. However, what follows is a story of woe and deceit.

Our first step was to write a script and record the audio using technology in our Faculty Innovation Studio. The Mp4 audio files for each part of the scenario imported into separate Powtoon videos. 

The initial experience of building was easy enough, but it definitely took some finessing to achieve the end result we wanted. A lot of the time was spent on finding the right visual representations and adjusting the timing of elements coming on screen and off. Since the free version comes with a trial of the paid features for three days you have plenty of time to create a video with all the premium objects. However they don't communicate that once the three days of the free trial are up, a watermark is put over every individual image in the Powtoon, not just the video, but EVERY SINGLE ELEMENT. It ended up ruining our initial video and we had to do a couple of things to work around the watermarks. Normally, to unlock them again you need to pay a substantial amount yearly to keep it going. There also was additional issues of the video editor freezing or crashing, elements not loading properly, elements appearing when they shouldn't and then being unable to remove them, the timing of elements in the editor versus the live version being delayed, and consistently misplaced elements after saving. All in all we would not recommend the platform for continuous use. There is potential for smaller projects or one-off creations, but in the end we think time might be better spent trying to create something using more stable tools like Powerpoint or the Adobe Suite.