Self-Check Activities

Code Snippet Library

The following self-check examples use our vetted box code, headings, and show/hide buttons to create some designs for formative evaluations.

Practice Quiz

Lesson 1 Practice Quiz

Question 1: How many Penn State campuses are there in Pennsylvania?

Answer

d. 20

Question 2: What is the official mascot for Penn State University?

Mule
Lion
Hawk
Bear

Answer

b. Lion - specifically a Nittany Lion.

Practice Quiz Code to Copy

<div style="margin: 1rem 2rem; padding: 0.8rem 1rem; border: 2px solid #6A3028; background: #fffaf2; font-size: 1rem; overflow: auto;">
    <h3 style="color: #314d64; line-height: 2; padding: 5px 2px 0 2px; border-bottom: 1px solid #E98300;">Practice Quiz&nbsp;</h3>
    <h4><strong>Question 1</strong>: Question text here.</h4>
    <ol style="list-style-type: lower-alpha;">
        <li>answer 1</li>
        <li>answer 2</li>
        <li>answer 3</li>
        <li>answer 4</li>
    </ol>
    <details style="margin-bottom: 2.5rem;">
        <summary style="display: inline-block; background: #f9eddc; border: 2px solid #E98300; border-radius: 20px; padding: 0.5rem 0.75rem; cursor: pointer;">&nbsp;<strong>Answer</strong>&nbsp;</summary>
        <br />
        <p style="margin: 1rem 2.5rem;">Answer text here.</p>
    </details>
    <h4><strong>Question 2</strong>:Question text here.</h4>
    <ol style="list-style-type: lower-alpha;">
        <li>answer 1</li>
        <li>answer 2</li>
        <li>answer 3</li>
        <li>answer 4</li>
    </ol>
    <details style="margin-bottom: 2.5rem;">
        <summary style="display: inline-block; background: #f9eddc; border: 2px solid #E98300; border-radius: 20px; padding: 0.5rem 0.75rem; cursor: pointer;">&nbsp;<strong>Answer</strong>&nbsp;</summary>
        <p style="margin: 1rem 2.5rem;">Answer text here.</p>
    </details>
</div>

Practice Questions

Question 1

What is the meaning of life?

Answer

The meaning of life is a question that has intrigued humans for centuries, and there are many perspectives on it. Some people find meaning through relationships, love, and family. Others find it in their work, passions, or contributions to society. Philosophers, scientists, and spiritual leaders have all offered different interpretations. (from Microsoft Copilot)

Question 2

What does it mean to have a growth mindset?

Answer

A growth mindset, is the belief that abilities and intelligence can be developed over time through effort, learning, and perseverance. This concept was popularized by psychologist Carol Dweck.

Practice Questions Code to Copy

<div style="margin: 1rem 2rem; padding: 0.8rem 1rem; border: 2px solid #3EA39E; background: #edf8f7; font-size: 1rem; overflow: auto;">
    <h3 style="color: #1e407c; line-height: 2; padding: 5px 2px 0 2px; border-bottom: 2px solid #3EA39E; display: flex;">Practice Questions</h3>
    <h4><strong>Question 1</strong></h4>
    <p>Question text</p>
    <p>&nbsp;</p>
    <details style="margin-bottom: 2.5rem;">
        <summary style="display: inline-block; background: #cfeceb; border: 2px solid #3EA39E; border-radius: 20px; padding: 0.5rem 0.75rem; cursor: pointer;">&nbsp;<strong>Answer</strong>&nbsp;</summary>
        <br />
        <p style="margin: 1rem 2.5rem;"><span>Answer text.</p>
    </details>
    <h4><strong>Question 2</strong></h4>
    <p>Question text.</p>
    <p>&nbsp;</p>
    <details style="margin-bottom: 2.5rem;">
        <summary style="display: inline-block; background: #cfeceb; border: 2px solid #3EA39E; border-radius: 20px; padding: 0.5rem 0.75rem; cursor: pointer;">&nbsp;<strong>Answer</strong>&nbsp;</summary>
        <br />
        <p style="margin: 1rem 2.5rem;">Answer text.</p>
    </details>
</div>

Question Block

Check Your Learning

Use the drop-down arrows to see recommended answers.

How do the changes to the final make learning more engaging and lasting for students?

For the students, instead of taking a comprehensive, multiple-choice exam, completing a final project on a topic that interests them in a medium that appeals to them reduces test anxiety and fosters lasting learning. As opposed to memorizing facts, terms, and formulae that are likely to be forgotten after the test, students deepen their knowledge of course concepts in the final project through research and applying those concepts to new situations.
How could these changes to the final make assessment more engaging for the instructor?

In grading a final project, the instructor has more information to gauge the depth of students' learning and the impact that the course has had on students' lives. Additionally, students' audio, visual, and graphic representations of what they've learned will be highly engaging, often revealing more about students' talents than the classroom or a test-results spreadsheet can.
How can Professor De La Vega ensure that different projects are assessed fairly?

Professor De La Vega can fairly assess the students' knowledge of course concepts with a single rubric that focuses on the learning objectives for the course.
How is this approach an improvement over a multiple-choice exam?

Multiple-choice exams often fail to accurately measure what students have learned. Poorly designed multiple-choice exams can result in students either guessing the right answer or being misled to choose the wrong answer, so the results may not indicate what students actually know. Projects require application, analysis, and synthesis, which are more reliable indicators of deep learning.

Question Block Code to Copy

<div style="margin: 2.5rem 0; padding: 1rem 1.5rem; background: #E9F0F6; border-left: 0.5rem solid #84a9cc; border-right: 0.5rem solid #84a9cc; overflow: auto;">
<h3>Descriptive Heading</h3>
<p>Lead-in text.</p>
<ul style="list-style-type: none; margin: 0 0 1.5rem 1.5rem;">
<li><details>
<summary style="cursor: pointer;">Question text?</summary>
<div style="margin: 1rem;">
<p>Answer text.</p>
</div>
</details></li>
<li><details>
<summary style="cursor: pointer;">Question text?</summary>
<div style="margin: 1rem;">
<p>Answer text.</p>
</div>
</details></li>
<li><details>
<summary style="cursor: pointer;">Question text?</summary>
<div style="margin: 1rem;">
<p>Answer text.</p>
</div>
</details></li>
<li><details>
<summary style="cursor: pointer;">Question text?</summary>
<div style="margin: 1rem;">
<p>Answer text.</p>
</div>
</details></li>
</ul>
</div>

Guidelines and Modifications

Use the heading levels appropriate to your context. These examples start with an h3 heading.
To make the box narrower, adjust the margins so that (margin: 1rem 2rem;) 2rem is a bigger number.
Modify all the colors to suit your tastes. The colors used here are from the Penn State brand colors (see the Color Codes and Information page in the Guidelines section of this resource).
If you don't want the button style, just remove the style from the <summary> tag so that this: <summary style="display: inline-block; background: #cfeceb; border: 2px solid #3EA39E; border-radius: 20px; padding: 0.5rem 0.75rem; cursor: pointer;"> becomes this <summary>.
While these examples here use a lower-alpha style list, you can use whatever list style is appropriate for your content.

Use with caution and note that hidden content will not show when the page is printed.