Knowledge Checks (non-graded)

The code snippets here will use the <details></details> tag (just like our accordion styles) to allow students to expand answer context to check their understanding. Our example is in the form of a multiple choice question but could be adjusted to fit the need for toggled hidden elements.

Example

Code

<div style="background: #f9f9f9; border-radius: 15px; padding: 15px; margin-bottom: 30px; border-left: 5px solid #173c72; color: #173c72;">
    <h3 style="margin: 15px 0px 15px 0px; padding: 10px 0px 10px 0px; color: #173c72;"><strong>Knowledge Check 10.2</strong></h3>
    <p style="font-size: 14pt;">[question context]</p>
    <details style="margin: 0px; color: #173c72;">
        <summary style="list-style: none; border-radius: 5px 5px 0px 0px; background-color: #f9f9f9; padding: 10px;"><span style="text-decoration: underline; cursor: pointer;">A: [insert answer]</span></summary>
        <div style="background-color: #fddde1; margin: 0px; padding: 10px;">
            <p>Try Again! [insert incorrect answer explanation]<br /><br />Read the question prompt again before checking your next answer!</p>
        </div>
    </details>
    <details style="margin: 0px; color: #173c72;">
        <summary style="list-style: none; border-radius: 5px 5px 0px 0px; background-color: #f9f9f9; padding: 10px;"><span style="text-decoration: underline; cursor: pointer;">B: [insert answer]</span></summary>
        <div style="background-color: #b9f9d9; margin: 0px; padding: 10px;">
            <p>Correct! [insert correct answer explanation]<br /><br />Make sure to double check the other responses to see why they aren't correct before moving on.&nbsp;</p>
        </div>
    </details>
</div>

Note: Repeat the incorrect or correct answer explanations as many times as you need for the number of correct questions and/or distractors. The only difference between the formatting for those two questions is the color of the background.