Dans le cadre d’un projet lié à mon taff et d’une curiosité personnel, j’ai décidé d’essayer de coder un petit quiz en ligne pour s’entraîner au WSET 3. Comme je trouvais l’exercice marrant, j’ai décidé de documenter l’intégralité du processus.

Quiz WSET 3 : comment je l’ai créé

Pour commencer, il faut trouver des questions: première étape, pas trop compliqué. En tapant « questions d’entraînement WSET 3 » sur le web, on en trouve facilement. De là, on se construit une base de données: un grand mot pour dire un fichier Excel avec les questions, les différentes réponses possibles et la bonne réponse.

Une fois qu’on a ça, se pose la question : comment transformer ça en quiz en ligne ? Après quelques recherches et un peu d’aide de Claude, on comprend ce qu’il faut faire et c’est plus simple qu’il n’y parait même si ça reste un peu magique.

La base

Phase 1 : créer une page HTML, rien de très compliqué. C’est juste un fichier qui contient toute l’application du quiz. En gros, dès qu’on arrive sur la page, le navigateur ouvre le fichier et affiche le quiz, couplé à un CSS (un autre fichier) qui va bien pour la mise en forme et les couleurs. Des premières étapes basiques.

Mais le truc, c’est que ce fichier n’a pas les questions. Il sait faire tourner le quiz, mais il ne connaît pas son contenu. Un peu comme un lecteur DVD, mais sans DVD.

Phase 2: Le JSON: Le DVD, lui, c’est un fichier JSON. Rien de visuel là-dedans : juste la banque de questions, les choix, les bonnes réponses et les explications. Pas de code, une sorte d’Excel version texte, en quelque sorte qui ressemble à ça:

Comment ça interagit, concrètement

1. Le navigateur charge la page HTML et affiche la coquille.
2. Le JavaScript, à l’intérieur de cette page, va chercher le fichier JSON, une opération qu’on appelle fetch.
3. Le JSON revient sous forme de texte, et le JavaScript le transforme en données utilisables.
4. Le JavaScript construit alors l’affichage à partir de ces données et des règles du CSS : il insère le texte de la question, crée un bouton par choix, et affiche les réponses possibles.
5. L’utilisateur clique, le JavaScript compare son choix au champ « bonne réponse » du JSON, affiche vrai ou faux ainsi que l’explication, met à jour le score, et passe à la question suivante.

Bon, ça c’est la théorie. on a créé les fichiers maintenant on fait quoi ?

La mise en ligne

Reste plus qu’à les mettre en ligne sur le site. Pour ça, rien de plus simple : j’accède au serveur OVH qui héberge mon site pour y créer un dossier « quiz », dans lequel je dépose les 3 fichiers.

Comment ? En utilisant un outil comme Cyberduck, qui permet de se connecter au serveur via FTP. On y colle les fichiers et, comme par magie, en allant sur la page du quiz, tout apparaît ! Et voilà comment j’ai créé un questionnaire WSET 3 avec l’IA

Simple, efficace et rapide. Vous voulez le tester ? Rendez-vous sur la page Quiz ici