Bonjour explorateur numérique ! 🌍
Aujourd’hui, nous allons utiliser votre clavier et votre souris pour créer un mini quiz amusant et interactif. Notre objectif est à la fois d’apprendre et de s’amuser. Avec des questions Vrai/Faux ou à choix multiple, nous plongerons dans le monde du HTML et explorerons la combinaison magique de <form> et <input>.
Préparez-vous… les cartes sont distribuées ! 🎴
1. Structure de Base de la Page Quiz – Commencer avec HTML
HTML est le squelette du quiz. Sans formulaire, il n’y a pas d’interaction utilisateur !
Voici une structure de base :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Mini Quiz Jeu</title>
<style>
body { font-family: Arial, sans-serif; background: #fdf6e3; padding: 20px; }
h1 { text-align: center; color: #1e90ff; }
form h2 { background: #f0f8ff; padding: 10px; border-radius: 10px; box-shadow: 2px 2px 5px gray; }
button { background-color: #1e90ff; color: white; padding: 10px 20px; border-radius: 5px; cursor: pointer; margin-top: 10px; }
button:hover { background-color: #3742fa; }
.result { margin-top: 20px; font-size: 1.2em; font-weight: bold; }
</style>
</head>
<body>
<h1>Quiz Carte de Connaissances 🎲</h1>
<form id="quizForm">
<h2>Question 1 : HTML est-il un langage de programmation ?</h2>
<input type="radio" id="q1-true" name="q1" value="true">
<label for="q1-true">Vrai</label><br>
<input type="radio" id="q1-false" name="q1" value="false">
<label for="q1-false">Faux</label><br><br>
<h2>Question 2 : Lequel de ces éléments n’est PAS une balise HTML ?</h2>
<input type="radio" id="q2-div" name="q2" value="div">
<label for="q2-div">&lt;div&gt;</label><br>
<input type="radio" id="q2-span" name="q2" value="span">
<label for="q2-span">&lt;span&gt;</label><br>
<input type="radio" id="q2-bold" name="q2" value="bold">
<label for="q2-bold">&lt;bold&gt;</label><br><br>
<button type="submit">Envoyer les réponses 🎯</button>
</form>
<div id="result" class="result"></div>
</body>
</html>
🔹 Astuces :
<form>est le cœur du quiz : il collecte les réponses et les envoie pour traitement.<input type="radio">permet à l’utilisateur de choisir une seule option par question.<label>augmente la zone cliquable et améliore l’accessibilité.
2. Interaction Utilisateur : Donner Vie au Formulaire
Soumettre le formulaire ne suffit pas avec HTML seul ; nous le rendons interactif avec JavaScript :
<script>
const form = document.getElementById('quizForm');
const resultDiv = document.getElementById('result');
form.addEventListener('submit', function(e) {
e.preventDefault(); // Empêche le rechargement de la page
let score = 0;
// Récupérer les réponses de l’utilisateur
const q1 = form.q1.value;
const q2 = form.q2.value;
// Vérifier les réponses correctes
if(q1 === 'false') score++; // HTML n’est pas un langage de programmation
if(q2 === 'bold') score++; // <bold> n’est pas une balise HTML
// Afficher le résultat
resultDiv.innerHTML = `<h2>Votre score : ${score}/2 🎉</h2>`;
// Feedback amusant
if(score === 2){
resultDiv.innerHTML += "<p>Super ! Vous êtes un magicien des cartes HTML ! 🧙♂️</p>";
} else if(score === 1){
resultDiv.innerHTML += "<p>Bien joué ! Avec un peu plus de pratique, vous serez un expert. 😉</p>";
} else {
resultDiv.innerHTML += "<p>Hmm… Vous devez vous entraîner davantage ! 💡</p>";
}
});
</script>
🔹 Astuces :
e.preventDefault()empêche le rechargement de la page et garde l’expérience fluide.- Afficher le score et un message amusant rend le quiz interactif et engageant.
3. Questions à Choix Multiple et Vrai/Faux en Cartes
Pour rendre le quiz plus amusant, nous pouvons styliser les questions comme des cartes :
<h2>Question 3 : Quelle balise regroupe les sections de contenu ?</h2>
<input type="radio" id="q3-div" name="q3" value="div">
<label for="q3-div">&lt;div&gt;</label><br>
<input type="radio" id="q3-section" name="q3" value="section">
<label for="q3-section">&lt;section&gt;</label><br>
<input type="radio" id="q3-article" name="q3" value="article">
<label for="q3-article">&lt;article&gt;</label><br>
Astuce cartes :
- Utilisez CSS
box-shadow,border-radiusetpaddingpour que chaque question ressemble à une carte. - Ajoutez des animations hover pour que la carte “s’anime” quand l’utilisateur s’approche.
4. Fun Visuel avec CSS
form h2 {
background: linear-gradient(135deg, #fdfbfb, #ebedee);
padding: 15px;
border-radius: 12px;
margin-bottom: 10px;
box-shadow: 2px 2px 10px rgba(0,0,0,0.2);
transition: transform 0.2s;
}
form h2:hover {
transform: scale(1.02);
box-shadow: 4px 4px 15px rgba(0,0,0,0.3);
}
- L’effet hover fait “vivre” la carte quand l’utilisateur passe dessus.
- Le dégradé coloré rend la page visuellement attrayante.
- Le box-shadow ajoute de la profondeur aux cartes.
5. Bonus : Mini Challenge avec un Timer ⏱️
<p id="timer">Temps restant : 30 secondes</p>
<script>
let timeLeft = 30;
const timer = document.getElementById('timer');
const countdown = setInterval(() => {
if(timeLeft <= 0) {
clearInterval(countdown);
timer.innerHTML = "Temps écoulé ! ⏳";
} else {
timer.innerHTML = `Temps restant : ${timeLeft} secondes`;
}
timeLeft -= 1;
}, 1000);
</script>
🎯 Les utilisateurs essaieront de répondre rapidement, ajoutant de l’excitation !
6. Conseils Pédagogiques et Idées Créatives
- Collectez les données avec
<form>et fournissez un retour immédiat avec JS. - Animez les cartes avec des effets hover.
- Ajoutez émoticônes et humour pour divertir les utilisateurs.
- Utilisez
<details>et<summary>pour des indices cachés. - Stylisez chaque carte avec des couleurs et formes différentes en CSS.
- Motivez les utilisateurs avec des messages animés après le score.
7. Résumé
- HTML : squelette du quiz (
<form>,<input>,<label>). - CSS : styliser les cartes, ajouter hover et ombres pour le fun.
- JavaScript : gérer l’interaction utilisateur, le scoring et le feedback.
- Astuces pratiques : animations hover, cartes colorées, indices cachés, feedback interactif.
- Idées bonus : timer, emojis, sensation de mini-jeu.
🎉 Résultat : Ce mini quiz est éducatif, interactif et amusant. Les utilisateurs apprennent tout en s’amusant !
