🔮 The Mirror of Understanding

You’ve stumbled upon an ancient mirror in the Islands of Innovation—its surface shimmers with questions instead of reflections. Unlike ordinary glass, this mirror reveals not what you look like, but what you know.

Its magic works simply:

✨ Pose a question to the mirror (or let it pose one to you)
💡 Choose an answer—right or wrong, the mirror responds with wisdom
🔄 Reflect on the feedback to deepen your understanding

"The mirror never judges—only guides. Even ‘wrong’ answers illuminate hidden truths."

Your Reflective Mission

🪞 Task: Craft Interactive "Check Your Understanding" Mirrors

Summon the AI: Prompt generative AI to create a multiple-choice question + feedback (e.g., "Generate a MC question about [topic] with 3 options and detailed explanations for each answer")
Polish the glass: Format the output into HTML using the template below
Activate the magic: Embed the mirror in Canvas to let learners self-assess instantly
Multiply reflections: Save your prompt to generate more mirrors in seconds

💡

Pro Tip: Use metaphors in your AI prompt (e.g., "Explain why Option B is wrong as if teaching a curious 10-year-old") to humanise feedback.

Check Your Understanding

Specific Example: Imagine you are working in a healthcare setting and have just finished treating a patient with a contagious respiratory illness. What should you do to ensure that you do not spread the infection to others?

A. Wash your hands for at least 20 seconds with soap and water before leaving the room.

B. Quickly exit the room and move on to your next task without washing your hands, as you are wearing gloves.

C. Only wash your hands if you see visible dirt on them, otherwise, it's not necessary.

Correct! Washing your hands for at least 20 seconds with soap and water is the most effective way to reduce the spread of harmful germs and infections, even after wearing gloves.

Incorrect. Although wearing gloves is important, you should always wash your hands thoroughly after treating a patient to prevent cross-contamination and protect others.

Incorrect. Even if your hands are not visibly dirty, they can still carry harmful pathogens. Always wash your hands thoroughly after treating patients to prevent spreading infections.

</> HTML code for the feature above

<div style="margin: 50px 15%; background-color: #f4f4f4; padding: 30px; border-radius: 12px;">
<h4 style="text-align: center; color: #003d4f; padding-bottom: 10px; border-bottom: 2px solid #003d4f; font-size: 20px;"><strong>Check Your Understanding</strong></h4>
<div style="padding: 20px 0;">
<p><strong>Specific Example:</strong> Imagine you are working in a healthcare setting and have just finished treating a patient with a contagious respiratory illness. What should you do to ensure that you do not spread the infection to others?</p>
<div style="padding-left: 20px;">
<p><a id="option1" style="color: #003d4f; text-decoration: none;" href="#dialog1">A. Wash your hands for at least 20 seconds with soap and water before leaving the room.</a></p>
<p><a id="option2" style="color: #003d4f; text-decoration: none;" href="#dialog2">B. Quickly exit the room and move on to your next task without washing your hands, as you are wearing gloves.</a></p>
<p><a id="option3" style="color: #003d4f; text-decoration: none;" href="#dialog3">C. Only wash your hands if you see visible dirt on them, otherwise, it's not necessary.</a></p>
</div>
<div id="dialog1" class="enhanceable_content dialog" style="padding: 10px; background-color: #d4edda; border: 2px solid #28a745; border-radius: 8px; margin-top: 10px;">
<p><strong>Correct!</strong> Washing your hands for at least 20 seconds with soap and water is the most effective way to reduce the spread of harmful germs and infections, even after wearing gloves.</p>
</div>
<div id="dialog2" class="enhanceable_content dialog" style="padding: 10px; background-color: #f8d7da; border: 2px solid #dc3545; border-radius: 8px; margin-top: 10px;">
<p><strong>Incorrect.</strong> Although wearing gloves is important, you should always wash your hands thoroughly after treating a patient to prevent cross-contamination and protect others.</p>
</div>
<div id="dialog3" class="enhanceable_content dialog" style="padding: 10px; background-color: #f8d7da; border: 2px solid #dc3545; border-radius: 8px; margin-top: 10px;">
<p><strong>Incorrect.</strong> Even if your hands are not visibly dirty, they can still carry harmful pathogens. Always wash your hands thoroughly after treating patients to prevent spreading infections.</p>
</div>
</div>
</div>

Question: Why might a researcher choose a Mann-Whitney U test over an independent samples t-test when comparing two groups?

A researcher might choose a Mann-Whitney U test over an independent samples t-test for several reasons:
Non-normal distribution:
If the data is not normally distributed, the Mann-Whitney U test is more appropriate as it doesn't assume normality.
Ordinal data:
For data that is ordinal rather than interval or ratio, the Mann-Whitney U test is a better choice.
Small sample sizes:
When sample sizes are small, the Mann-Whitney U test can be more reliable.
Outliers:
This test is less sensitive to outliers compared to the t-test.
Different shapes of distribution:
If the two groups have differently shaped distributions, the Mann-Whitney U test is more suitable.
Robustness:
The Mann-Whitney U test is generally more robust against violations of assumptions compared to the t-test.

Question: The Earth is the fourth planet from the Sun. (True/False)

False. The Earth is the third planet from the Sun.

Question: The capital of France is __________.

Answer: Paris.

</> HTML code for the feature above

<p style="text-align: center;"><a class="btn btn-large btn-info" href="#mannwhitney"><strong>Question</strong>: Why might a researcher choose a Mann-Whitney U test over an independent samples t-test when comparing two groups?</a></p>
<div id="mannwhitney" class="enhanceable_content dialog">A researcher might choose a Mann-Whitney U test over an independent samples t-test for several reasons: <br /><strong>Non-normal distribution: </strong><br />If the data is not normally distributed, the Mann-Whitney U test is more appropriate as it doesn't assume normality. <br /><strong>Ordinal data: </strong><br />For data that is ordinal rather than interval or ratio, the Mann-Whitney U test is a better choice. <br /><strong>Small sample sizes: </strong><br />When sample sizes are small, the Mann-Whitney U test can be more reliable. <br /><strong>Outliers: </strong><br />This test is less sensitive to outliers compared to the t-test. <br /><strong>Different shapes of distribution: </strong><br />If the two groups have differently shaped distributions, the Mann-Whitney U test is more suitable. <br /><strong>Robustness: </strong><br />The Mann-Whitney U test is generally more robust against violations of assumptions compared to the t-test.</div>

Examples and Inspirations for the content above

Original Idea From: https://community.canvaslms.com/t5/Archived-Questions/How-to-Embedded-Check-your-understanding-boxes/m-p/209395

Example CIDILABS: https://cidilabs.instructure.com/courses/102/pages/add-quick-check

Related: Buttons in canvas https://www.howtocanvas.com/create-amazing-pages-in-canvas/buttons

Buttons with pop-ups: https://canvas.instructure.com/courses/2560052/pages/buttons-with-pop-up-boxes

Buttons in Canvas: https://www.howtocanvas.com/create-amazing-pages-in-canvas/buttons

Match the Lord of the Rings Characters to Their Titles

Aragorn
Gandalf
Frodo
Galadriel
Gollum

Drag these titles to the correct boxes:

Ring-bearer

The White Wizard

King of Gondor

Lady of Lothlórien

The Precious

</> HTML code for the activity above

<div style="width: 70%; margin: 0 auto; font-family: Arial, sans-serif;">
<h2 style="text-align: center; color: #2c3e50; border-bottom: 2px solid #3498db; padding-bottom: 10px;">Match the Lord of the Rings Characters to Their Titles</h2>
<table style="width: 100%; border-collapse: collapse; margin: 20px 0;">
<tbody>
<tr>
<td style="padding: 12px; background-color: #f8f9fa; border: 1px solid #ddd; width: 40%;"><strong>Aragorn</strong></td>
<td class="enhanceable_content droppable" style="padding: 12px; background-color: #e8f4fc; border: 1px dashed #3498db; min-height: 20px;"> </td>
</tr>
<tr>
<td style="padding: 12px; background-color: #f8f9fa; border: 1px solid #ddd;"><strong>Gandalf</strong></td>
<td class="enhanceable_content droppable" style="padding: 12px; background-color: #e8f4fc; border: 1px dashed #3498db;"> </td>
</tr>
<tr>
<td style="padding: 12px; background-color: #f8f9fa; border: 1px solid #ddd;"><strong>Frodo</strong></td>
<td class="enhanceable_content droppable" style="padding: 12px; background-color: #e8f4fc; border: 1px dashed #3498db;"> </td>
</tr>
<tr>
<td style="padding: 12px; background-color: #f8f9fa; border: 1px solid #ddd;"><strong>Galadriel</strong></td>
<td class="enhanceable_content droppable" style="padding: 12px; background-color: #e8f4fc; border: 1px dashed #3498db;"> </td>
</tr>
<tr>
<td style="padding: 12px; background-color: #f8f9fa; border: 1px solid #ddd;"><strong>Gollum</strong></td>
<td class="enhanceable_content droppable" style="padding: 12px; background-color: #e8f4fc; border: 1px dashed #3498db;"> </td>
</tr>
</tbody>
</table>
<div style="background-color: #f1f8fe; border-radius: 8px; padding: 15px; margin-top: 20px; border: 1px solid #d0e3fa;">
<p style="margin-top: 0; color: #2c3e50;"><strong>Drag these titles to the correct boxes:</strong></p>
<div class="enhanceable_content draggable" style="display: inline-block; padding: 10px 15px; margin: 5px; background-color: #ffecb3; border-radius: 4px; border: 1px solid #ffd54f;">Ring-bearer</div>
<div class="enhanceable_content draggable" style="display: inline-block; padding: 10px 15px; margin: 5px; background-color: #c8e6c9; border-radius: 4px; border: 1px solid #81c784;">The White Wizard</div>
<div class="enhanceable_content draggable" style="display: inline-block; padding: 10px 15px; margin: 5px; background-color: #bbdefb; border-radius: 4px; border: 1px solid #64b5f6;">King of Gondor</div>
<div class="enhanceable_content draggable" style="display: inline-block; padding: 10px 15px; margin: 5px; background-color: #d1c4e9; border-radius: 4px; border: 1px solid #9575cd;">Lady of Lothlórien</div>
<div class="enhanceable_content draggable" style="display: inline-block; padding: 10px 15px; margin: 5px; background-color: #ffccbc; border-radius: 4px; border: 1px solid #ff8a65;">The Precious</div>
</div>
</div>

Arrange These WWII Events in Chronological Order

Drag events into the correct historical sequence (earliest to latest)

</> HTML code for the activity above

<p> </p>
<div style="width: 75%; margin: 20px auto; font-family: Arial, sans-serif;">
<h2 style="text-align: center; color: #2c3e50; border-bottom: 2px solid #8e44ad; padding-bottom: 8px;">Arrange These WWII Events in Chronological Order</h2>
<div class="enhanceable_content sortable" style="display: none;">

<div style="background: #f5f5f5; margin: 10px 0; padding: 12px 15px; border-left: 5px solid #8e44ad; display: flex; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
<div style="background-color: #8e44ad; color: white; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0;">1</div>
<p style="margin: 0; line-height: 1.4;">Germany invades Poland, starting WWII in Europe</p>
</div>

<div style="background: #f5f5f5; margin: 10px 0; padding: 12px 15px; border-left: 5px solid #3498db; display: flex; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
<div style="background-color: #3498db; color: white; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0;">2</div>
<p style="margin: 0; line-height: 1.4;">Japan attacks Pearl Harbor, bringing the U.S. into the war</p>
</div>

<div style="background: #f5f5f5; margin: 10px 0; padding: 12px 15px; border-left: 5px solid #e74c3c; display: flex; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
<div style="background-color: #e74c3c; color: white; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0;">3</div>
<p style="margin: 0; line-height: 1.4;">D-Day: Allied forces land in Normandy</p>
</div>

<div style="background: #f5f5f5; margin: 10px 0; padding: 12px 15px; border-left: 5px solid #f39c12; display: flex; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
<div style="background-color: #f39c12; color: white; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0;">4</div>
<p style="margin: 0; line-height: 1.4;">Battle of Stalingrad ends with Soviet victory</p>
</div>

<div style="background: #f5f5f5; margin: 10px 0; padding: 12px 15px; border-left: 5px solid #2ecc71; display: flex; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
<div style="background-color: #2ecc71; color: white; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0;">5</div>
<p style="margin: 0; line-height: 1.4;">Atomic bombs dropped on Hiroshima and Nagasaki</p>
</div>

<div style="background: #f5f5f5; margin: 10px 0; padding: 12px 15px; border-left: 5px solid #1abc9c; display: flex; align-items: center; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
<div style="background-color: #1abc9c; color: white; border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; margin-right: 15px; flex-shrink: 0;">6</div>
<p style="margin: 0; line-height: 1.4;">Germany surrenders (V-E Day)</p>
</div>
</div>
<div style="text-align: center; margin: 25px 0 10px; font-style: italic; color: #7f8c8d; background-color: #f8f9fa; padding: 8px; border-radius: 4px;">Drag events into the correct historical sequence (earliest to latest)</div>
</div>

Match Middle-earth Characters to Their Iconic Items

A Gandalf the Grey	Drag here
B Legolas	Drag here
C Gimli	Drag here
D Frodo Baggins	Drag here
E Galadriel	Drag here
F Aragorn	Drag here

DRAG THESE ITEMS TO THE CORRECT BOXES:

Sting

Andúril

Battle Axe

The One Ring

Nenya (Elven Ring)

Bow & Arrows

? Show Answer Key

Correct Matches:

A Nenya (Elven Ring)
B Bow & Arrows
C Battle Axe
D The One Ring
E Phial of Galadriel
F Andúril

</> HTML code for the activity above

<p> </p>
<div style="width: 70%; margin: 0 auto; font-family: Arial, sans-serif; background-color: #f9f9f9; padding: 20px; border-radius: 10px;">
<h2 style="text-align: center; color: #2c3e50; border-bottom: 2px solid #c27ba0; padding-bottom: 10px; margin-bottom: 25px;">Match Middle-earth Characters to Their Iconic Items</h2>
<table style="width: 100%; border-collapse: separate; border-spacing: 0 12px;">
<tbody>
<tr>
<td style="padding: 14px; background-color: #f4e6f7; border-radius: 8px 0 0 8px; border-right: none; width: 40%; vertical-align: middle;"><span style="background-color: #8e7cc3; color: white; border-radius: 50%; padding: 6px 12px; margin-right: 12px;">A</span> <strong>Gandalf the Grey</strong></td>
<td class="enhanceable_content droppable" style="padding: 14px; background-color: #eaf2f8; border-radius: 0 8px 8px 0; border-left: 2px dashed #3d85c6; text-align: center; vertical-align: middle;">Drag here</td>
</tr>
<tr>
<td style="padding: 14px; background-color: #e6f2f9; border-radius: 8px 0 0 8px; border-right: none; vertical-align: middle;"><span style="background-color: #3d85c6; color: white; border-radius: 50%; padding: 6px 12px; margin-right: 12px;">B</span> <strong>Legolas</strong></td>
<td class="enhanceable_content droppable" style="padding: 14px; background-color: #f0f7e6; border-radius: 0 8px 8px 0; border-left: 2px dashed #6aa84f; text-align: center;">Drag here</td>
</tr>
<tr>
<td style="padding: 14px; background-color: #fff2cc; border-radius: 8px 0 0 8px; border-right: none; vertical-align: middle;"><span style="background-color: #f1c232; color: white; border-radius: 50%; padding: 6px 12px; margin-right: 12px;">C</span> <strong>Gimli</strong></td>
<td class="enhanceable_content droppable" style="padding: 14px; background-color: #fce5cd; border-radius: 0 8px 8px 0; border-left: 2px dashed #e69138; text-align: center;">Drag here</td>
</tr>
<tr>
<td style="padding: 14px; background-color: #f4cccc; border-radius: 8px 0 0 8px; border-right: none; vertical-align: middle;"><span style="background-color: #cc0000; color: white; border-radius: 50%; padding: 6px 12px; margin-right: 12px;">D</span> <strong>Frodo Baggins</strong></td>
<td class="enhanceable_content droppable" style="padding: 14px; background-color: #d9ead3; border-radius: 0 8px 8px 0; border-left: 2px dashed #6aa84f; text-align: center;">Drag here</td>
</tr>
<tr>
<td style="padding: 14px; background-color: #d9d2e9; border-radius: 8px 0 0 8px; border-right: none; vertical-align: middle;"><span style="background-color: #674ea7; color: white; border-radius: 50%; padding: 6px 12px; margin-right: 12px;">E</span> <strong>Galadriel</strong></td>
<td class="enhanceable_content droppable" style="padding: 14px; background-color: #ead1dc; border-radius: 0 8px 8px 0; border-left: 2px dashed #a64d79; text-align: center;">Drag here</td>
</tr>
<tr>
<td style="padding: 14px; background-color: #d0e0e3; border-radius: 8px 0 0 8px; border-right: none; vertical-align: middle;"><span style="background-color: #45818e; color: white; border-radius: 50%; padding: 6px 12px; margin-right: 12px;">F</span> <strong>Aragorn</strong></td>
<td class="enhanceable_content droppable" style="padding: 14px; background-color: #cfe2f3; border-radius: 0 8px 8px 0; border-left: 2px dashed #3d85c6; text-align: center;">Drag here</td>
</tr>
</tbody>
</table>
<div style="background-color: #f0f0f0; border-radius: 8px; padding: 15px; margin-top: 25px; border: 2px dashed #999;">
<p style="margin-top: 0; color: #5b5b5b; text-align: center;">DRAG THESE ITEMS TO THE CORRECT BOXES:</p>
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px;">
<div class="enhanceable_content draggable" style="background-color: #d9ead3; padding: 12px; text-align: center; border-radius: 6px; border: 2px solid #6aa84f;">Sting</div>
<div class="enhanceable_content draggable" style="background-color: #cfe2f3; padding: 12px; text-align: center; border-radius: 6px; border: 2px solid #3d85c6;">Andúril</div>
<div class="enhanceable_content draggable" style="background-color: #fce5cd; padding: 12px; text-align: center; border-radius: 6px; border: 2px solid #e69138;">Battle Axe</div>
<div class="enhanceable_content draggable" style="background-color: #f4cccc; padding: 12px; text-align: center; border-radius: 6px; border: 2px solid #cc0000;">The One Ring</div>
<div class="enhanceable_content draggable" style="background-color: #d9d2e9; padding: 12px; text-align: center; border-radius: 6px; border: 2px solid #8e7cc3;">Nenya (Elven Ring)</div>
<div class="enhanceable_content draggable" style="background-color: #fff2cc; padding: 12px; text-align: center; border-radius: 6px; border: 2px solid #f1c232;">Bow & Arrows</div>
</div>
</div>
<details style="margin-top: 30px; border: 1px solid #d1d1d1; border-radius: 8px; overflow: hidden;">
<summary style="cursor: pointer; padding: 14px 20px; background: linear-gradient(to right, #8e44ad, #9b59b6); color: white; font-size: 16px; list-style: none; display: flex; align-items: center; gap: 10px;"><span style="display: inline-block; width: 24px; height: 24px; background-color: white; color: #8e44ad; border-radius: 50%; text-align: center; line-height: 24px;">?</span> Show Answer Key</summary>
<div style="padding: 20px; background-color: #f8f5fb; border-top: 1px solid #e0d0eb;">
<h4 style="margin-top: 0; color: #7d3c98;">Correct Matches:</h4>
<ul style="column-gap: 30px; margin: 10px 0 5px; padding-left: 20px;">
<li style="margin-bottom: 8px;"><span style="display: inline-block; width: 24px; height: 24px; background-color: #8e7cc3; color: white; border-radius: 50%; text-align: center; line-height: 24px; margin-right: 8px;">A</span> Nenya (Elven Ring)</li>
<li style="margin-bottom: 8px;"><span style="display: inline-block; width: 24px; height: 24px; background-color: #3d85c6; color: white; border-radius: 50%; text-align: center; line-height: 24px; margin-right: 8px;">B</span> Bow & Arrows</li>
<li style="margin-bottom: 8px;"><span style="display: inline-block; width: 24px; height: 24px; background-color: #f1c232; color: white; border-radius: 50%; text-align: center; line-height: 24px; margin-right: 8px;">C</span> Battle Axe</li>
<li style="margin-bottom: 8px;"><span style="display: inline-block; width: 24px; height: 24px; background-color: #cc0000; color: white; border-radius: 50%; text-align: center; line-height: 24px; margin-right: 8px;">D</span> The One Ring</li>
<li style="margin-bottom: 8px;"><span style="display: inline-block; width: 24px; height: 24px; background-color: #674ea7; color: white; border-radius: 50%; text-align: center; line-height: 24px; margin-right: 8px;">E</span> Phial of Galadriel</li>
<li style="margin-bottom: 8px;"><span style="display: inline-block; width: 24px; height: 24px; background-color: #45818e; color: white; border-radius: 50%; text-align: center; line-height: 24px; margin-right: 8px;">F</span> Andúril</li>
</ul>
</div>
</details>
</div>
<p> </p>

📖 Move on to the NEXT CHAPTER of this adventure