Quiz Platform Guide

Brampton Flight Centre — Interactive Classroom Quizzes

How It Works
The Instructor creates a quiz session by choosing a category and question count. A unique session code is generated.
Students join by entering the session code (or scanning the QR code from the projected Dashboard).
The instructor advances through questions one at a time. Students select their answers in real time.
After each question, the instructor can show statistics (locks answers, shows vote distribution) and then reveal the correct answer.
At the end, a leaderboard ranks all students by score. Each student also sees a personal results breakdown.
Instructor Flow
1

Select Instructor role

Pick Instructor on the role selection screen.

2

Choose a quiz category & question count

Select from PPL modules, ROC-A, or “All Questions (Random Mix)”. Set the number of questions (1–50).

3

Start the quiz

A unique session code is generated (e.g. A3K2X). Share it with students or open the Dashboard to project a QR code.

4

Advance questions

Click Next Question to broadcast each question. The student sidebar shows who has answered in real time.

5

Show Statistics

Locks student answers and displays how many picked each option. Useful for class discussion before revealing the answer.

6

Reveal Answer

Shows the correct option highlighted in green with an explanation (if available). Students see their result colour-coded.

7

Leaderboard

After the last question, a ranked leaderboard appears with scores and percentages.

Student Flow
1

Select Student role

Pick Student on the role screen — or scan the QR code from the Dashboard to join directly.

2

Enter your name & session code

Type the code the instructor gave you and tap Connect.

3

Answer questions

Tap an option to submit. Your choice turns blue. Once the instructor locks answers, you cannot change your selection.

4

See results

After reveal, correct answers are green and incorrect are red. At the end, you get a full score breakdown with explanations.

Dashboard (Projector View)

The Dashboard is a full-screen, display-only view designed to be projected in the classroom. It opens automatically when the instructor clicks Open Dashboard.

Shows
QR code & join URL for students
Current question & answer options
Live vote counts per option
Correct answer highlighted in green
Final leaderboard with rankings
Tips
Opens in a new window — drag it to the projector display
Press F11 for true full-screen
No interaction needed — it updates automatically
Available Quiz Categories

Over 180 questions across aviation ground school topics. Select a specific module or mix them all.

All Questions (Random Mix)
PPL #1 – Intro & Safety
PPL #2 – Principles of Flight
PPL #3 – Flight Instruments
PPL #4 – CARs & Flight Ops
PPL #5 – Engines & Systems
PPL #6 – Flight Ops & Airmanship
PPL #7 – Air Law & PSTAR
PPL #8–16 – Meteorology & more
ROC-A – Radio Operator Certificate
Scoring

Each correct answer is worth 1 point. At the end of the quiz, students receive a percentage score and grade.

90%+ Excellent
70–89% Good Work
50–69% Keep Practicing
<50% Needs More Study
Tip: The quiz runs entirely in real time via SignalR. Everyone stays in sync — no page refreshes needed. If a student loses connection, they can rejoin using the same session code.
Design & Responsive Approach

The Quiz Platform is built on a design system following Tailwind CSS methodology. Rather than writing bespoke stylesheets from scratch, the UI is composed from a consistent set of design tokens — spacing, colour, typography, and shadow scales — that map directly to Tailwind's utility-first conventions.

Mobile-first responsive layout

Every screen is designed mobile-first: the base styles target phones, and breakpoints progressively enhance the layout for tablets and desktops. Grids collapse from multi-column to single-column automatically, touch targets are sized for fingers, and font scales stay readable across all viewports — no separate “mobile version” required.

Mobile
Single column, full-width cards, stacked controls
Tablet
Two-column grids, side-by-side panels
Desktop
App shell with sidebar, multi-column layouts

Key techniques

CSS Grid & Flexbox — layouts reflow naturally without JavaScript; grid columns adapt via auto-fit / minmax()
Design tokens as CSS variables — colours, radii, shadows, and spacing defined once in :root and reused everywhere, making theme changes a single-line edit
Dynamic viewport units100dvh ensures full-height layouts account for mobile browser toolbars (Safari address bar, etc.)
Touch-friendly targets — buttons and interactive elements meet the 44px minimum tap target recommended by Apple and Google
Fluid typography — font sizes use rem units so they scale with user preferences and stay proportional across devices