Create a Button and Dialog Box in Canvas Pages with this HTML Trick

Have you ever wanted to include a simple knowledge check or self-check question in Canvas pages that would give you an easy way to build-in immediate feedback to the learner? One quick way to do this on your Canvas pages, with just a bit of HTML code, is to insert a button with a “popup” dialog box. This post will show you how (and give you the HTML code snippets to try it yourself!).

When Might a Knowledge Check be Useful?

When arranging learning content on a static page (like in Canvas), it’s helpful to look for opportunities to shift the learner, even in a very small and quick way, from a passive into an active role. One way to do this is with a brief knowledge check in which you simply ask them: Well, what do you think? or What do you know at this point? A knowledge check should be an entirely informal form of assessment, and is usually not graded or tracked in any way.

The next step from a learning design perspective is to decide how to build your activity in a way that encourages the learner to pause and think about the question or the problem before they proceed. When they do proceed, the knowledge check should offer immediate feedback on the concept, to help the learner confirm their own understanding of the material.

There are lots of different ways to design your learning materials in this way. One approach is to create a button with a dialog box the “pops up” as an overlay, providing the learner with the built-in feedback. One great thing about this strategy is how quick and immediate it is, because students can check what they know without leaving the page (e.g., to enter a separate Quiz activity) and as they move between different “chunks” of content.

Adding Simple Dialog Boxes

To put one of these very simple dialog boxes into any Canvas page, use the Rick Content Editor:

1) Click Edit at the top of the page, then click the HTML button in the lower right corner.

2) Copy and paste the code (in the grey box below) into the Pretty HTML Editor.

<div id="dialog_for_link1" class="enhanceable_content dialog">
<p><a id="link1" class="Button" href="#dialog_for_link1">BUTTON TEXT</a></p>

3) Click the HTML button in the lower right again and you’ll see a static version of your dialog box. Click Save to give it a try!

4) Test out the page. In this case, it looks like this:

When you click the button, you get this popup dialog box:

Some Additional Tricks

Multiple Buttons/Dialog Boxes on a Page

If you want to have more than one button and dialog box, you need to repeat the code used above and define each of those by labelling them distinctly in three places, like this:

<div id="dialog_for_link1" class="enhanceable_content dialog">
<p>ANSWER 1</p>
<p><a id="link1" class="Button" href="#dialog_for_link1">Click Here to See the Answer 1</a></p>

<div id="dialog_for_link2" class="enhanceable_content dialog">
<p>ANSWER 2</p>
<p><a id="link2" class="Button" href="#dialog_for_link2">Click Here to See the Answer 2</a></p>

Put Some Styling Around It

If you want to style the knowledge check within a visually-distinct pullout box, you can add additional detail to the HTML code, like this:

<div style="border: 3px solid #168a45; margin: 15px; padding: 15px; width: 75%;">
<p style="color: #168a45; font-size: 1.5em;"><strong>Test Yourself!</strong></p>
<p>Insert your question here.</p>
<div id="dialog_for_link1" class="enhanceable_content dialog">
<p>Insert your answer here.</p>
<p><a id="link1" class="Button" href="#dialog_for_link1">Click Here to See the Answer</a></p>

Thanks To…

Thank to Diana Matthews in the Canvas Community for sharing this information and her code snippets, which have been adapted here. To see more from her original post, visit: Self-Check Questions in Canvas Pages


Photo by Olya Kobruseva from Pexels.