🔍 Bug Détective : une ligne a été sabotée !
Ton enquête chronométrée au cœur du code HTML.
Salut, inspecteur ou inspectrice du code !
Un saboteur s’est introduit dans nos pages web. Sa spécialité ? Glisser une seule erreur dans un extrait de code HTML, l’air de rien, au milieu de lignes parfaitement innocentes. Le navigateur, lui, ne dit rien : il affiche la page de travers et laisse les développeurs se gratter la tête pendant des heures.
Ta mission : retrouver la ligne sabotée et la réparer, en moins de 60 secondes. Rendez-vous sur Bug Détective !
🕵️ Le déroulement d’une enquête
- Ouvre le lien donné par ton professeur et connecte-toi avec ton compte GoProf si on te le demande.
- Lis bien les instructions : une seule ligne du code contient une erreur.
- Quand tu es prêt, clique sur « C’est parti ! » : le code apparaît et le chrono démarre. Tu as 60 secondes.
- Recopie la ligne fautive, corrigée, dans le champ de réponse, puis clique sur « J’ai trouvé ! ». À 60 secondes, ta réponse part toute seule.
- Ton verdict s’affiche. Si tu t’es trompé, la bonne réponse t’est montrée : un bon détective apprend aussi de ses fausses pistes !
Chaque lien ne donne droit qu’à une seule enquête. Si tu recharges la page, tu reprends là où tu en étais : inutile d’essayer de relancer le chrono !
🗂️ Les suspects habituels
Le saboteur a ses petites habitudes. Voici son casier judiciaire :
| Le méfait | La ligne sabotée | La ligne réparée |
|---|---|---|
| Balise non fermée | <li>Empreinte digitale partielle | <li>Empreinte digitale partielle</li> |
| Balise mal orthographiée | <pargraph>Aucune trace…</pargraph> | <p>Aucune trace…</p> |
| Attribut erroné | <img scr="scene.jpg" alt="…"> | <img src="scene.jpg" alt="…"> |
| Guillemets oubliés | <img src="carte.jpg" alt=Vue aérienne> | <img src="carte.jpg" alt="Vue aérienne"> |
| Imbrication croisée | <b>totalement <i>innocent</b></i> | <b>totalement <i>innocent</i></b> |
Pour l’imbrication, pense à des poupées russes : la dernière balise ouverte est toujours la première à être fermée.
⏱️ Le barème du détective
Ici, la vitesse compte : plus tu réponds vite, meilleure est ta note.
| Temps de réponse | Note |
|---|---|
| Moins de 15 secondes | 10/10 |
| De 15 à 19 secondes | 9/10 |
| Ensuite, toutes les 5 secondes | 1 point de moins |
| Réponse fausse ou enquête non commencée | 0/10 |
Une réponse presque juste (une petite faute de frappe, par exemple) est mise « à vérifier » : c’est ton professeur qui tranche.
💡 Les astuces de l’inspecteur
- Balaye avant de lire : parcours le code du regard en cherchant ce qui « dépasse » (une balise orpheline, un mot bizarre, un guillemet solitaire) plutôt que de tout lire mot à mot.
- Compte les paires : chaque balise ouvrante a sa fermante (sauf les balises vides comme
<img>ou<br>). - Vérifie les attributs :
src,href,alt… bien orthographiés, et leur valeur entre guillemets. - Recopie toute la ligne : pas seulement le morceau corrigé, et sans rien changer d’autre.
- Garde ton sang-froid : 60 secondes, c’est plus long qu’on ne le croit. Un détective pressé rate les indices !
À toi de jouer : le saboteur n’a qu’à bien se tenir !