Password-Protected Content Example

Password-Protected Content Extension Demo

This document demonstrates the password-protected content extension.

Example 1: Simple Solution

Exercise: Write a Python function that adds two numbers.

Try to solve this yourself first!

đź”’ Solution Locked

Example 2: Complex Solution with Multiple Blocks

Exercise: Create a sklearn pipeline for data processing.

đź”’ Solution Locked

Example 3: Short Solution

Exercise: What is the capital of France?

đź”’ Solution Locked

How to Use

Creating Password-Protected Content

Wrap your solution in a div with the content-password class and a unique name attribute:

:::{.content-password name="my-solution"}
Your solution content here...
:::

The name attribute: - Determines the password (same name = same password) - Keeps password stable even if content changes - Should be unique and descriptive (e.g., “exercise-1”, “sklearn-pipeline”) - If omitted, defaults to “solution-1”, “solution-2”, etc.

For Students (include-solutions: false)

  1. Try to solve the exercise yourself
  2. When instructor shares the password, enter it in the password field
  3. Click “Unlock” or press Enter
  4. Solution will be revealed and remain visible during your session

For Instructors (include-solutions: true)

  1. Render with include-solutions: true in YAML
  2. Collapsible blue boxes will show passwords for each solution (click to reveal)
  3. The solution name is displayed in the header
  4. Share passwords with students progressively during class
  5. Students can unlock solutions at their own pace

Security

Password Protection: Passwords are NOT stored in the HTML source code. Only a one-way hash is included, making it impossible to extract the password by viewing the page source. The content is encrypted with the password, and can only be decrypted by entering the correct password.

Testing

To test this example:

Student view:

quarto render example.qmd

Instructor view:

quarto render example.qmd -M include-solutions:true

Or change the YAML front matter include-solutions: false to include-solutions: true.