Quiz

A LAN-based video, music and images riddle web app with buzzers

Screenshots

Main screen

Scoreboard and buzz queue (media is blurred when paused)

Admin

Scores management, answers (and quick jump), control board

Smartphone Buzzers

Team selection, on-screen buzzers – for use instead of proper buzzer devices

Installation

Requirements

• Node.js
• The device used as player has to be LAN accessible for multiple devices usage

Install

cd /path/to/project/
npm install

Setup

Quiz data

All the data of one game session is in the data folder: riddles, teams and scores.
Nb: the data-sample folder is automatically copied to data upon installation. You can use it later to create a fresh data for a new game.

• Riddles are in data/quiz.json.
  Edit it directly or use this spreadsheet to paste in all JSON data.

  • type: video / audio / image
  • filename: riddle file (without the path, just the filename)
  • filename_answer: file to use as an answer – like a movie poster with and without the name, or a part of a music and another more famous (optional - filename and filename_answer must be the same type)
  • answer and answer_subtitle: displayed in the admin panel You can use only the scoreboard & buzzers by emptying data/quiz.json (or by putting an empty array []).

• Teams can be edited directly in the Admin screen.
  You can also edit them in data/teams.json.

  • name: displayed team name
  • color: team color (hexa: #000000)
  • keycode: triggered keyboard key for this team. Each team has to have its own keycode, and it must not be an app shortcut. (Keycode.info might be useful here.)
  • keycode_name is here as a comment to remember the assigned key (not used in the app)

• Scores are in data/scores.json and it doesn’t need to be edited (scores are managed in the admin panel).

You can change the data folder name by passing the name you want at startup: npm start -- data_dir=data-game_session_836 (or juste rename the data folder to data-<whatever> after the game if you want to store your game sessions).

Media files

All your media files go in media/: media/videos, media/audios and media/images.
Use MP4 videos, MP3 audio files and MP2 JPEG images to ensure your browser can read them (these filetypes are supported by all major browser at this time).

A poster image can be displayed before the first riddle, by adding an image (PNG / JPEG) named intro-poster.png (or .jpg) in your data folder.
Enter to hide it and load the first riddle.

You can change the media directory path by passing the name you want at startup: npm start -- data_dir=data-game_session_836 media_dir=media-game_session_836

If some of your media files are specific to a single game session and you do want them in the media folder, add a _ to the beginning of their filename, and place them in a temp_media folder in you data folder.
Every filename beggining with a _ will be searched in this folder: a.jpg must be in media/images/a.jpg, and _a.jpg must be in data/temp_media/images/_a.jpg (or the name of your data folder).

Buzzers

If you want to use physical buzzers, you may map these to the teams keycodes.

For the Xbox Big Buttons, under Linux (using the /receiver URL, and as a VM if needed):

• Install https://github.com/micolous/xbox360bb to enable receiver, and activate it with sudo modprobe -v xbox360bb
• Install https://github.com/AntiMicro/antimicro and set it up to map these controllers to your teams keys

Alternatively, you can use the virtual buzzers: display the QR code so that players can access it on their phone.
If the players' phone are not on the same local network, you can use a tunnelling service (like Serveo.net) and display the external URL in the QR code (instead of local IP) by passing it at startup: npm start -- buzzer_domain=abc123.serveo.net.

Usage

Screens

Launch the project with

npm start

It displays URLs of all the different screens.
You can change the port with npm start -- port=8888 (default is 8080).

• Player – /player
  Displayed in front of the players, and receives keyboard events so need to be focused on.

• Admin – /admin
  Displayed on a separate device – triggers player shortcuts & teams keycode to /player.
  You can change this route by passing the path you want at startup: npm start -- admin_route=admin123.

• Buzzers signal reception – /receiver
  Receives buzzers signal on a different device – triggers buzzers keycode to /player.

• Virtual buzzer buttons – /buzzers (/ redirect there)
  To be used on any device as replacement of hardware buzzers.
  Leads to /buzzers/<team_id> (<team_id> is the team object position in teams.json).

Player keyboard shortcuts

Enabled in player and admin pages.

Space	Play / pause / remove current buzzer from queue
Enter	Go to next riddle with normal transition
← / →	Go to previous / next riddle immediatly and play
Esc	Remove all buzzers from queue
A	Reveal answer (if available)
S	Toggle scoreboard (scoreboard is displayed immediatly when you change scores from the admin panel)
Q	Toggle display of the virtual buzzers QR Code and URL
B	Toggle buzzers activation

Todo

• Mobile admin: horizontal slide for teams and riddles?