Quizlight: a live trivia game for game nights, on a big screen and phones

Quizlight: a live trivia game for game nights, on a big screen and phones

00 Markdown

Hosts build quizzes and run them on a big screen. Players join from their phones with a code, race the countdown, and see their points and rank after every question.

Run it yourself

Get the finished app on your own machine, ready to change however you like.

VS Code Command Palette⇧⌘P
quizlight -scaffold=elementscode/demo-quizlight

Press 'Enter' to confirm your input or 'Escape' to cancel

Press ⇧⌘P in VS Code and choose Elements: New App. Then paste this line and press Enter.

New to Elements? Install Elements first.

The code

How it's built

Quizlight needed a big screen and a room full of phones that move through each question together, a fair countdown, scoring and accounts for hosts. Each of those is a part of Elements, so the agent spent its 21 minutes on the game itself.

What Elements gave the app

  • One game state for every screen. A channel carries a snapshot of the game, and every join, answer and host action sends a fresh one, so the big screen and each phone redraw together. The answer and new scores join it when the question closes.
  • Players join from their phones. A player types the six-digit code from the big screen and a nickname and gets their own game page. Nicknames are unique and a game holds up to 50 players.
  • Scoring timed on the server. Each answer is timed in SQL from when the question opened, so points fall from 1,000 for an instant answer to 500 at the buzzer, with a short grace for the network. The question closes the moment the last player answers.
  • A countdown in step. Each screen turns the server's remaining time into a local deadline once per question, so the phones and the big screen count down together.
  • Server calls as function calls. The host's controls and the quiz editor call server functions straight from the page with @rpc.
  • Data and sessions from SQL. Migrations define the game and seed a host login with three quizzes of ten questions each. Hosts sign in with a session, and each game's controls stay with the host who started it.

What the project server gave the agent

The project server runs alongside the agent and answers as soon as a file is saved: it type-checks the templates, TypeScript and SQL, applies migrations and reruns the tests, so every question came back right away and the agent kept building.

What shipped

The app type-checks with zero errors and all 31 tests pass. Every page works on desktop and phone.

Comments· 0

Join the community

Get a weekly digest of new posts.

Sign up