# Demo Test Walkthrough

## Step 1: Terminal Practice

<!-- hint:terminal -->

**Task:** Create a file called `demo.txt` with the text "Socrates demo" inside it.

**Question:** What command would you use to create a file with specific content from the terminal? Can you think of more than one way?

**Checkpoint:** The user should demonstrate using echo with redirection or a heredoc. Accept any valid approach (echo, printf, cat, etc.).

---

## Step 2: Mermaid Diagram

<!-- hint:diagram mermaid-type="flowchart" topic="Three tiers of Socrates: Full, Canvas, Terminal" -->

**Task:** Look at the diagram showing Socrates's three tiers.

**Question:** Why do you think the system is designed with three tiers instead of just one? What happens if the canvas is unavailable?

**Checkpoint:** The user should understand progressive enhancement — terminal always works, canvas adds visuals, extension adds context awareness.

---

## Step 3: Smart Buttons

<!-- hint:buttons type="single" options="Terminal,Canvas,Full" -->

**Task:** Choose which tier you think is the most important for a teaching platform.

**Question:** If you could only keep one tier, which would it be and why?

**Checkpoint:** Any answer is valid as long as the user reasons about trade-offs. Terminal is the baseline; canvas adds engagement; full adds context.

---

## Step 4: Info Card

<!-- hint:card type="concept" title="Socratic Method" -->

**Task:** Read the concept card about the Socratic method.

**Question:** How is asking questions different from giving direct answers when it comes to learning? Can you think of a time when a question helped you understand something better than an explanation would have?

**Checkpoint:** The user should articulate that questions force active thinking and deeper understanding compared to passive reading.

---

## Step 5: Code Snippet

<!-- hint:code language="javascript" highlight="2,3" -->

**Task:** Look at this code snippet and identify what the highlighted lines do.

**Question:** What pattern does this code follow? Why might the highlighted lines be important?

**Checkpoint:** The user should be able to read highlighted code and explain its purpose.

---

## Step 6: Smart List

<!-- hint:list style="cards" -->

**Task:** Review the list of Socrates element types.

**Question:** Which element type do you think is most effective for learning — quizzes, games, terminals, or diagrams? Why?

**Checkpoint:** The user should reason about different learning styles and how each element serves a different purpose.

---

## Step 7: Step Tracker

<!-- hint:steps -->
<!-- hint:progress -->

**Task:** Check your progress through this walkthrough.

**Question:** You're past the halfway point. What have you learned so far about how Socrates structures a lesson?

**Checkpoint:** The user should recognize the pattern: each step introduces a concept, asks a question, and validates understanding.

---

## Step 8: Web Embed

<!-- hint:embed url="https://example.com" -->

**Embed:** https://example.com

**Task:** Observe how external content can be embedded directly in a lesson.

**Question:** When would embedding an external resource be more useful than describing it in text? What are the trade-offs?

**Checkpoint:** The user should mention interactivity, visual learning, and the risk of external content becoming unavailable.

---

## Step 9: Inline Quiz

<!-- hint:quiz inline -->

**Task:** Answer a quick inline quiz question.

**Question:** What does XP stand for in Socrates's gamification system?

**Checkpoint:** Experience Points. The user should understand XP drives belt progression.

---

## Step 10: Celebration

<!-- hint:celebrate -->

**Task:** You've completed the full walkthrough! Every element type has been exercised.

**Question:** Looking back at all 10 steps, which teaching element felt most engaging to you? Which would you want more of in a real module?

**Checkpoint:** Any thoughtful reflection is valid. This step tests the celebration/completion visual.
