Week 10: The Showcase
week-overview.md Week 10: The Showcase
Unit 2: Teaching Through Story Interaction Question: Can you explain what you built and why?
Overview
This is presentation week. No new content. No new assignments. Students present their scrollytelling sites — "The Long Way Down" — in 5–7 minute presentations.
Presentation Format
Time: 5–7 minutes per student
Structure:
Live Demo (2–3 minutes)
- Scroll through the site live (projector or screen share)
- Let the work speak first — don't over-explain during the scroll
The Metaphor (1 minute)
- What's your metaphor and why did you choose it?
- How did it evolve from your Week 5 pitch?
Code Walkthrough (1–2 minutes)
- Open ONE section's code (HTML + JS)
- Explain: what does this code do? How does the ScrollTrigger work?
- Show the timeline or pin config — explain the values
Reflection (1 minute)
- What surprised you about this process?
- What would you do differently with more time?
The Desk Critique Test
The instructor may point to any line of code and ask: "What does this do?" If you can't explain it, it's a red flag — but this is a learning moment, not a punishment.
Day Schedule
Option A: Full Class Presentations
Duration: Full class period
| Time | Activity | Description |
|---|---|---|
| 0:00 | Setup | Students load their sites, test projector/screen share |
| 0:10 | Presentations | 5–7 min each, 1 min transition between |
| — | Q&A | Brief instructor/peer questions after each |
| Last 10 | Closing | Final thoughts, course reflection, what comes next |
Option B: Split Across 2 Days
If the class is large, split presentations across Day 1 and Day 2.
Final Deliverables
Due at time of presentation:
| Deliverable | Where |
|---|---|
| Deployed scrollytelling site | GitHub Pages URL |
| Site linked from portfolio | Navigation or projects page |
| Repository public | GitHub |
| README updated | Project description, metaphor, tech used |
Evaluation
The final rubric from the project brief applies:
| Criteria | Weight | What We're Looking For |
|---|---|---|
| Story & Metaphor | 25% | Does the metaphor work? Clear, personal, engaging? Would a non-coder follow? |
| Interaction & Motion | 30% | Scroll pacing, animation intention, showpiece moment, easing personality |
| Technical Execution | 25% | GSAP + ScrollTrigger correct, tokens consistent, deployed, no bugs |
| Accessibility | 20% | Reduced motion, keyboard, contrast, semantic HTML |
Presentation quality does not add or subtract from the project grade — but inability to explain code may indicate an integrity concern per the desk critique test.
Instructor Notes
- Keep presentations moving. 7 minutes max. Use a timer visible to students.
- Ask at least one code question per student. Make it supportive, not adversarial.
- Celebrate range — a "Kitchen" metaphor and a "Mixtape" metaphor solving the same problem shows the strength of the approach.
- Note common themes for future course iterations: what patterns worked? What tripped everyone up?
- If a student's site isn't deployed, they can present from localhost but should deploy by end of day.
- Take screenshots of student work for course documentation (with permission).
After Presentations
- All final grades submitted via Canvas rubric
- Optional: share a "class gallery" page linking to all student sites
- Optional: course feedback survey
- Students should keep their GitHub repos public — this is portfolio work