Diana Matthews

Self-Check Questions in Canvas Pages

Discussion created by Diana Matthews on Feb 28, 2019
Latest reply on Mar 17, 2019 by Layne Heiny

We have figured out a way to include simple self-check questions in Canvas pages by adding some code. If you are comfortable switching from the regular view to the HTML view in pages (or any of the rich text areas), you can add it as well.

 

This has a button that when clicked will pop up an overlay with the answer. We went with that format for better accessibility since it should be able to be toggled on and off via keyboard. There may be some cleaner code out there, but this works and is valid! 

 

To see it in action:

 

Simple code: 

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

 

You can have multiple questions on one page, but you need to change the link1 to link2 etc in three places:

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

 

Here's the full code for my example, with the styling around the question/answer as well:

<div style="border: 3px solid #003366; margin: 15px; padding: 15px; width: 70%;">
<p style="color: #003366; font-size: 1.5em;"><strong><img style="vertical-align: text-bottom;" src="https://courses.sfcollege.edu/courses/46793/files/30003166/download" alt="knowledge-1.jpg" data-api-endpoint="https://courses.sfcollege.edu/api/v1/courses/46793/files/30003166" data-api-returntype="File" />  Test Yourself!</strong></p>
<p>What is the <strong>top-level domain</strong> for http://www.sciencedaily.com/releases/2015/04/150423124818.htm?</p>
<div id="dialog_for_link1" class="enhanceable_content dialog">
<p>The top-level domain is <strong>.com</strong></p>
</div>
<p><a id="link1" class="Button" href="#dialog_for_link1">Click Here to See the Answer</a></p>
</div>

 

Hope this will be useful to others.

Outcomes