🎉 Soirée Quiz — plateforme multi-quiz
Une plateforme de quiz multijoueur en temps réel, façon Kahoot. Le présentateur
affiche les questions sur la TV / le vidéoprojecteur, les invités jouent depuis leur
téléphone en scannant un QR code.
La plateforme héberge plusieurs quiz indépendants (chacun avec sa propre salle,
son code PIN et son QR) :
- Stéphane ♥ Marie ♥ Émilie — la soirée double anniversaire (19 questions)
- Blind Test 🎵 — variété française et internationale (15 titres)
- Blind Test 80 🕺 — les tubes des années 80 (12 titres)
- Blind Test Ciné 🎬 — deviner le film à sa musique (12 titres)
- Blind Test Disney 🧸 — chansons de dessins animés (12 titres)
- Culture générale 🧠 — 20 questions tous publics
- Clément ♥ Charlotte — le quiz du mariage (questions d'exemple à remplacer)
Pages
- 🏠 Accueil (
/) : présentation + choix du quiz.
- 🖥️ Présentateur (
/quiz/<id>/host) : QR code, code PIN, liste des joueurs,
questions, compte à rebours, classement et podium final avec confettis.
- 📱 Joueurs (
/quiz/<id>) : on saisit son prénom, on touche une des 4 tuiles
colorées, on voit la bonne réponse, son score et son classement.
(identifiants <id> : parents, blind, blind80, blindfilm, blinddisney, culture, clement)
- ⚡ Temps réel via Socket.IO, pensé pour 50+ joueurs simultanés par quiz.
- 🇫🇷 Interface entièrement en français.
🟣 Déploiement en 1 clic (Render)
Le dépôt contient un blueprint render.yaml : clique le bouton, connecte ton
compte Render, valide → tu obtiens une URL publique stable
https://quiz-julien.onrender.com (accueil sur /, puis choix du quiz).
🚀 Lancer en local
Prérequis : Node.js 18+.
npm install
npm start
Le serveur démarre sur le port 3000 (configurable via PORT). La console
affiche les adresses à utiliser, par exemple :
Accueil : http://192.168.1.42:3000/
• Stéphane & Marie → http://192.168.1.42:3000/quiz/parents/host (code ABC123)
• Clément & Charlotte → http://192.168.1.42:3000/quiz/clement/host (code XYZ789)
Ouvre / (accueil) pour choisir un quiz, ou va directement sur
/quiz/<id>/host pour l'écran de présentation. Les joueurs, eux, scannent
simplement le QR code affiché.
📶 Tester sur le même Wi-Fi (réseau local)
- Vérifie que l'ordinateur (serveur) et les téléphones sont sur le même Wi-Fi.
- Lance
npm start.
- Ouvre
http://<IP-DE-TON-PC>:3000/ (accueil) et choisis un quiz → écran
présentateur (l'IP est affichée dans la console au démarrage, ex. 192.168.1.42).
- Les invités scannent le QR code affiché → ils arrivent directement sur la
page joueur avec le code salle prérempli. (Sinon :
http://<IP>:3000 + saisir
le code PIN.)
💡 Pour trouver ton IP locale manuellement :
- macOS / Linux :
ipconfig getifaddr en0 ou hostname -I
- Windows :
ipconfig → « Adresse IPv4 »
Le QR code encode automatiquement l'URL de connexion. Le serveur détecte
host/port tout seul ; tu peux forcer l'URL avec la variable d'environnement
PUBLIC_URL (voir ci-dessous).
🌍 Obtenir un QR code public pour la soirée
Si les invités ne sont pas tous sur le même Wi-Fi (ou pour éviter les soucis
de réseau), expose l'appli sur Internet. Deux options :
Option A — Ponctuel : tunnel temporaire (sans compte)
Lance d'abord l'appli (npm start), puis dans un second terminal :
Avec Cloudflare Tunnel (cloudflared) — recommandé, gratuit, sans compte :
# Installation (macOS) : brew install cloudflared
# Installation (Linux) : voir https://developers.cloudflare.com/cloudflare-one/connections/connect-networks/downloads/
cloudflared tunnel --url http://localhost:3000
Cloudflared affiche une URL publique du type https://xxx-yyy-zzz.trycloudflare.com.
Relance alors le serveur en lui passant cette URL pour que le QR code pointe au
bon endroit :
PUBLIC_URL="https://xxx-yyy-zzz.trycloudflare.com" npm start
Avec ngrok (sans compte pour un usage rapide) :
# Installation : https://ngrok.com/download
ngrok http 3000
ngrok affiche une URL https://xxxx.ngrok-free.app. De même :
PUBLIC_URL="https://xxxx.ngrok-free.app" npm start
ℹ️ L'ordre conseillé : ouvrir le tunnel d'abord pour connaître l'URL, puis
relancer npm start avec PUBLIC_URL afin que le QR encode la bonne adresse
publique. Garde le terminal du tunnel ouvert pendant toute la soirée.
Option B — Durable : déployer gratuitement (Render ou Railway)
Idéal si tu veux une URL stable préparée à l'avance.
Render (https://render.com) :
- Pousse ce projet sur un dépôt GitHub.
- Sur Render : New + → Web Service, connecte le dépôt.
- Réglages :
- Environment :
Node
- Build Command :
npm install
- Start Command :
npm start
- Render fournit une URL
https://ton-quiz.onrender.com. Le serveur détecte
automatiquement l'URL publique (en-têtes du proxy), donc le QR code sera bon.
Au besoin, ajoute une variable d'environnement PUBLIC_URL avec cette URL.
- Ouvre
https://ton-quiz.onrender.com/ (accueil), puis choisis un quiz.
Railway (https://railway.app) :
- Pousse le projet sur GitHub.
- Sur Railway : New Project → Deploy from GitHub repo.
- Railway détecte Node automatiquement (
npm install / npm start).
- Dans Settings → Networking, clique Generate Domain pour obtenir une
URL publique
https://ton-quiz.up.railway.app.
- (Optionnel) Ajoute la variable
PUBLIC_URL = cette URL.
- Accueil :
https://ton-quiz.up.railway.app/ (puis choix du quiz).
⚠️ Sur l'offre gratuite de Render, le service peut se « mettre en veille »
après inactivité : ouvre la page quelques minutes avant la soirée pour le
réveiller.
✏️ Modifier les questions
Depuis le navigateur (le plus simple)
Dans le lobby, le bouton « ✏️ Questions » ouvre l'éditeur : énoncé, 2 à 4
réponses, bonne réponse cochée, durée (et artiste/titre pour un blind test).
Ajout, suppression, réordonnancement, puis « 💾 Enregistrer ».
- Les questions modifiées sont enregistrées sur l'ordinateur du présentateur et
envoyées au serveur. Le disque de Render étant effacé à chaque redémarrage, la page
présentateur les renvoie automatiquement à chaque connexion : présente donc
toujours depuis le même ordinateur, avec le même navigateur.
- Pour changer d'ordinateur : ⬇ Exporter puis ⬆ Importer le fichier JSON.
- ↺ Questions d'origine revient aux questions du dépôt.
- Une modification faite pendant une partie s'applique à la partie suivante.
- Le bouton affiche
✱ quand des questions personnalisées sont actives.
Dans le code
Chaque quiz a son propre fichier de questions, facile à éditer :
questions.js → quiz Stéphane & Marie (parents)questions-clement.js → quiz Clément & Charlotte (clement) (exemples à remplacer)
Chaque question a un énoncé, 4 options et l'index de la bonne réponse :
{
text: "Ma question ?",
options: ["Réponse A", "Réponse B", "Réponse C", "Réponse D"],
correct: 2, // 0 = A, 1 = B, 2 = C, 3 = D
time: 40, // durée en secondes (optionnel, 40 par défaut)
}
L'ordre des options détermine la couleur/forme de la tuile :
0 → 🔺 rouge, 1 → 🔷 bleu, 2 → 🟡 rond jaune, 3 → 🟩 carré vert.
🔀 L'ordre des questions est mélangé aléatoirement à chaque partie. En
revanche, l'ordre des réponses reste fixe (celui du fichier) : pratique pour
les réponses récurrentes (ex. « Stéphane » toujours à gauche, « Marie » à droite).
Tu peux mettre 2, 3 ou 4 options par question (une question à 2 options s'affiche
avec 2 tuiles, comme un vrai/faux).
🎵 Blind test
La playlist est dans questions-blind.js. Chaque entrée est une question normale,
plus un bloc music qui sert à retrouver l'extrait :
music: { artist: "Indochine", title: "L'Aventurier" }
Le serveur interroge le catalogue iTunes (gratuit, sans compte) et récupère un
extrait de 30 s, joué automatiquement sur l'écran présentateur uniquement (les
téléphones restent muets). La lecture vocale des questions est désactivée sur ce quiz.
Pour forcer un morceau précis, dépose un fichier dans public/audio/ et ajoute :
music: { artist: "…", title: "…", audio: "/audio/ma-chanson.mp3" }
Il existe quatre blind tests : questions-blind.js (variété), questions-blind80.js,
questions-blindfilm.js et questions-blinddisney.js.
✅ À faire avant la soirée : ouvre /api/blind-check pour vérifier que chaque
chanson trouve bien son extrait — la page teste tous les blind tests et liste les
morceaux introuvables (/api/blind-check?quiz=blind80 pour n'en tester qu'un). Si un
extrait manque, le présentateur affiche un avertissement et la question reste jouable.
Ajouter un nouveau quiz
Crée un fichier questions-monquiz.js, puis déclare-le dans server.js (objet
QUIZ_DEFS) avec un id, les deux prénoms et le fichier de questions. Il apparaîtra
automatiquement sur la page d'accueil.
🏆 Règles de score
- Bonne réponse :
500 points + jusqu'à 500 points de bonus selon la
rapidité (plus tu réponds vite, plus le bonus est élevé).
- Mauvaise réponse (ou pas de réponse) :
0 point.
🎛️ Contrôles présentateur
🔒 Code présentateur
L'écran présentateur demande un code, une seule fois par appareil. Sans lui,
impossible de piloter la partie — et le serveur vérifie que chaque commande
(démarrer, révéler, exclure…) vient bien du présentateur : un invité ne peut rien
déclencher depuis son téléphone. Après 8 codes faux en 10 minutes depuis une même
adresse, les essais sont bloqués 10 minutes ; le présentateur déjà connecté n'est
jamais concerné.
⚠️ Le dépôt GitHub est public : le code par défaut (mirabelle) y est visible.
Pour un vrai secret, définis la variable HOST_CODE dans Render
(service → Environment → Add Environment Variable).
Pendant la partie
- Démarrer le quiz depuis le lobby.
- Révéler la réponse (petit bouton en bas à droite) pour passer plus tôt.
Sinon la question tourne toujours jusqu'au bout du compte à rebours (40 s),
même si tout le monde a déjà répondu : personne n'est coupé.
- Question suivante après chaque révélation (bouton en haut et en bas de
l'écran de résultats — le bouton du haut reste visible même avec un long classement).
- 🔊 Voix (bouton en haut à droite) : lecture vocale automatique de chaque
question et de ses réponses en français, à l'affichage de la question (synthèse
vocale du navigateur). Activée par défaut, coupable d'un clic. La voix sort sur
l'écran présentateur — pense à monter le son du vidéoprojecteur / des enceintes.
- 🔔 Sons (en haut à droite) : ambiance sonore générée par le navigateur —
musique d'attente au lobby, tic-tac des 5 dernières secondes (pas en blind test),
jingle de révélation, fanfare au podium ; ding / buzz sur les téléphones. Un clic
coupe tout (choix mémorisé). Le son démarre au premier clic sur la page.
- Exclure tout le monde & nouveau code depuis le lobby (vide la salle et génère
un nouveau code PIN + QR — pratique après les tests).
- Recommencer une partie depuis le podium (remet tous les scores à zéro).
👥 Mode équipes
Bouton « 👥 Équipes » dans le lobby : 2 à 6 équipes de couleur, renommables.
Chaque invité choisit son équipe sur son téléphone (effectifs affichés en direct) ;
ceux qui n'ont pas choisi — et les retardataires — sont placés automatiquement dans
l'équipe la moins nombreuse. Le classement se fait à la moyenne de points par
joueur, pour qu'une grande table ne gagne pas d'office. Il apparaît à chaque
révélation, au podium, sur les téléphones et dans le PDF.
🏅 Trophées & mémoire des quiz
Au podium, les trophées de la partie s'affichent sous les marches, calculés
automatiquement d'après les réponses de chacun : 🏆 Numéro 1, 🎯 Sniper (meilleure
précision), ⚡ Gâchette (bonnes réponses les plus rapides), 🔥 Série en or, 🚀 Remontada,
🤔 Mûre réflexion, 💥 Tête brûlée, 👥 Équipe championne.
Le bouton « 📊 Analyse de la partie » (podium) ou « 📊 Mémoire » (lobby) ouvre
la mémoire des quiz :
- les 3 dernières parties sont gardées sur l'ordinateur du présentateur ; épingle ⭐
une partie pour la garder pour toujours (elle ne compte pas dans les 3) — pratique
pour qu'une partie d'essai n'efface pas la vraie soirée ;
- pour chaque partie : chiffres clés, trophées, la course au podium (place au
classement des 4 premiers après chaque question, avec le « film de la partie » :
changements de leader, moment clé, duel final), la réussite question par question
(la plus facile, la plus piégeuse, le piège, la question éclair, le casse-tête) et les
statistiques de chaque joueur (précision, temps moyen, meilleure série) ;
- chaque graphique a son tableau (bouton « Voir en tableau ») et se parcourt au survol
ou au clavier (flèches) ;
- 🏛️ Panthéon (dès 2 parties) : records de points et de précision, joueurs les plus
titrés et habitués, reconnus à leur prénom d'une partie à l'autre.
Les parties au-delà des 3 dernières non épinglées sont effacées à l'enregistrement de la
partie suivante (un avertissement prévient dans la mémoire). Une partie où personne n'a
répondu n'est pas gardée.
📄 Récapitulatif & export PDF
À la fin de la partie, l'écran podium propose « 📄 Résultats en PDF » : chiffres clés,
podium, équipes, trophées, film de la partie, faits marquants, classement complet (avec
bonnes réponses et précision) et le détail de chaque question (taux de réussite, temps
moyen, réponse piège). Le PDF de chaque partie en mémoire se retélécharge depuis la
mémoire (bouton « 📄 PDF »).
ℹ️ La mémoire est propre à ce navigateur et à cet ordinateur. Le serveur, lui, ne
garde rien de façon durable (offre gratuite Render) : pense donc à utiliser toujours
le même poste pour présenter, ou à télécharger le PDF après la partie.
Disponible aussi en API : /api/results?quiz=<id> (JSON) et /api/results.pdf?quiz=<id>.
🔁 Reconnexion (reprise de score)
Un joueur qui ferme le site par erreur peut rejoindre en cours de partie :
- Même téléphone : il rouvre le lien, re-clique « Entrer » → son score est repris
automatiquement (identité mémorisée).
- Autre appareil / mémoire effacée : il remet le lien + le code et le même
prénom → il récupère le score de sa session précédente. Un message
« Rebienvenue, ton score est conservé » le confirme.
🔌 Variables d'environnement
| Variable | Rôle | Défaut |
|---|
PORT | Port d'écoute du serveur | 3000 |
PUBLIC_URL | Force l'URL publique encodée dans le QR code | (auto) |
HOST_CODE | Code présentateur (insensible à la casse) | mirabelle |
🛠️ Stack technique
- Node.js + Express — serveur HTTP & fichiers statiques
- Socket.IO — communication temps réel présentateur ⇄ joueurs
- qrcode — génération du QR code de connexion
- HTML / CSS / JS pur côté client (aucune étape de build)
- Polices Unbounded (titres) & Inter (texte) via Google Fonts
Bonne soirée ! 🥂
