Learning Design
Communication Styles Quiz
A static PDF activity was transformed into an accessible, embeddable web quiz for the Create. Connect. Communicate. course. Built in collaboration with Media, the tool adds clear micro-interactions, printable results, and a streamlined single-choice flow that works standalone or inside Canvas.
Communication Styles Quiz
A static PDF activity was transformed into an accessible, embeddable web quiz for the Create. Connect. Communicate. course. Built in collaboration with Media, the tool adds clear micro-interactions, printable results, and a streamlined single-choice flow that works standalone or inside Canvas.
Objective
Convert the "Communication Styles" PDF worksheet into a lightweight, mobile-friendly interactive that guides learners through 23 quick selections (one per screen), provides immediate, visible feedback per choice, produces a printable summary (browser print → save as PDF), and embeds cleanly in Canvas and also runs standalone.
Collaboration summary
- Numbering conflict found in the PDF; confirmed with academics: Analytical = 2; Imaginative = 3.
- First live build verified; print-to-PDF flow confirmed.
- UX enhancements discussed; feasible quick wins implemented while preserving the simple one-per-screen model for Canvas embedding.
Quick wins implemented
- Copy: "Please select the option that best describes you", UK spelling "socialiser", fix "A schmoozer", progress label → "x/23 Selected."
- Interaction: Subtle click animation + brief delay so feedback is visible.
- Results: Reset/Redo control near "Show results."
- Repos: Moved to HMS interactives (not OUA).
Considered but not adopted (reasons)
- Drag-and-drop (major logic overhaul, low ROI)
- Batch pages (navigation logic & clutter when embedded)
- Live running tally (risk of biasing choices)
- Keyboard shortcuts (potential conflicts inside Canvas—parked)
Constraints
- Must embed reliably in Canvas LMS (predictable layout, minimal maintenance)
- Single bundle, print snapshot of results
- Tight turnaround (½–1 day for polish)
Final deliverable
- 23 one-tap screens with animated confirmation
- Clear progress display ("x/23 Selected")
- Results view with Print + Redo
- Copy refined for clarity and consistency
- Hosted under HMS interactives; Canvas-friendly
Outcome & impact
Replaced a multi-page PDF with a focused interactive that's quicker to complete, easier to embed, and produces a clean PDF record. Creates a repeatable pattern for future PDF → interactive conversions with Media.
Embedded Quiz (interactive)
Gallery
PDF version of quiz (pg1 – Rating communication style)
PDF version of quiz (pg2 – Scoring interpretation)
Interactive version
Example of completed quiz
Credits
- Media engineering & interaction: Hui Mu
- UX/content & liaison: Rich Bartlett
- Academics: CCIP teaching team (HMS)
Want to turn static content into engaging interactives?
Happy to walk through the collaboration process between Learning Design and Media teams.
Contact me