CODE EN HTML POUR UN QUIZZ CODE DE LA ROUTE
Vous pouvez simplement copié collé ce code , allez sur votre wordpress et ajouter un code html personnalisé
5/19/20253 min read
<h1 style="text-align:center; font-size:2em; color:#2c3e50;">Quizz Code de la Route</h1>
<form id="quizForm" style="max-width: 700px; margin: auto;"></form>
<div style="text-align: center;">
<button id="submitBtn" type="button" onclick="submitQuiz()" style="padding: 12px 30px; background-color: #2ecc71; color: white; border: none; border-radius: 8px; font-size: 18px; font-weight: bold; cursor: pointer;">Voir les réponses</button>
</div>
<div id="result" style="text-align: center; margin-top: 20px; font-size: 20px; font-weight: bold; color: #34495e;"></div>
<div id="corrections" style="margin-top: 30px; max-width: 700px; margin-left: auto; margin-right: auto; background: #f9f9f9; padding: 20px; border-radius: 10px;"></div>
<p style="margin-top: 30px; text-align: center;"><a href="https://roadson.fr" target="_blank" style="color: #2980b9; text-decoration: none; font-weight: bold;">Visitez roadson.fr</a></p>
<script>
const questions = [
{
question: "À quoi sert un panneau de forme triangulaire à fond blanc bordé de rouge ?",
options: ["Il donne une obligation", "Il indique une interdiction", "Il annonce un danger", "Il donne une information"],
answer: 2,
},
{
question: "Quelle est la vitesse maximale autorisée sur une route à double sens hors agglomération, sans signalisation particulière ?",
options: ["80 km/h", "90 km/h", "100 km/h", "110 km/h"],
answer: 0
},
{
question: "Quand faut-il allumer les feux de croisement ?",
options: ["Seulement de nuit", "Dès que la visibilité est insuffisante", "En cas de forte chaleur", "En ville uniquement"],
answer: 1
},
{
question: "Que signifie un feu orange fixe ?",
options: ["Je dois accélérer pour passer", "Je dois m'arrêter si je peux le faire en toute sécurité", "Je dois m’arrêter immédiatement", "Je peux passer sans ralentir"],
answer: 1,
},
{
question: "Quelle est la distance minimale de sécurité à 130 km/h sur autoroute ?",
options: ["52 mètres", "65 mètres", "78 mètres", "90 mètres"],
answer: 2
},
{
question: "Le taux d’alcoolémie maximal autorisé pour un jeune conducteur (permis probatoire) est de :",
options: ["0,2 g/l", "0,5 g/l", "0,8 g/l", "1 g/l"],
answer: 0
},
{
question: "Que signifie ce panneau ?",
options: ["Fin d’interdiction de dépasser", "Interdiction de dépasser", "Priorité à droite", "Route barrée"],
answer: 1,
image: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/28/B9b-fr.svg/1200px-B9b-fr.svg.png"
},
{
question: "Sur une route étroite de montagne, quel véhicule doit manœuvrer en cas de croisement difficile ?",
options: ["Le plus léger", "Le plus petit", "Le véhicule descendant", "Le véhicule montant"],
answer: 2
},
{
question: "En agglomération, si aucune signalisation ne l’indique, la priorité est :",
options: ["À gauche", "À droite", "Aux véhicules venant de face", "À moi"],
answer: 1
},
{
question: "Quels passagers doivent porter la ceinture de sécurité ?",
options: ["Seulement les passagers à l’avant", "Seulement les adultes", "Tous les passagers, à l’avant et à l’arrière", "Personne, en agglomération"],
answer: 2
}
];
const quizForm = document.getElementById('quizForm');
function renderQuestions() {
questions.forEach((q, i) => {
const qDiv = document.createElement('div');
qDiv.className = 'question';
qDiv.style.background = '#ffffff';
qDiv.style.padding = '20px';
qDiv.style.marginBottom = '20px';
qDiv.style.borderRadius = '12px';
qDiv.style.boxShadow = '0 4px 12px rgba(0,0,0,0.05)';
const title = document.createElement('h3');
title.textContent = `Question ${i + 1} : ${q.question}`;
title.style.color = '#34495e';
qDiv.appendChild(title);
if (q.image) {
const img = document.createElement('img');
img.src = q.image;
img.alt = `Illustration question ${i + 1}`;
img.style.maxWidth = '120px';
img.style.display = 'block';
img.style.margin = '10px 0';
qDiv.appendChild(img);
}
const answerDiv = document.createElement('div');
answerDiv.className = 'answers';
answerDiv.style.marginTop = '10px';
q.options.forEach((option, j) => {
const wrapper = document.createElement('div');
wrapper.style.marginBottom = '8px';
const input = document.createElement('input');
input.type = 'radio';
input.name = `q${i}`;
input.value = j;
input.id = `q${i}a${j}`;
input.style.marginRight = '8px';
const label = document.createElement('label');
label.htmlFor = input.id;
label.textContent = option;
label.style.cursor = 'pointer';
wrapper.appendChild(input);
wrapper.appendChild(label);
answerDiv.appendChild(wrapper);
});
qDiv.appendChild(answerDiv);
quizForm.appendChild(qDiv);
});
}
function submitQuiz() {
let score = 0;
const correctionsDiv = document.getElementById('corrections');
correctionsDiv.innerHTML = '<h2 style="color: #2c3e50;">Corrigé :</h2>';
questions.forEach((q, i) => {
const selected = document.querySelector(`input[name=q${i}]:checked`);
const isCorrect = selected && parseInt(selected.value) === q.answer;
if (isCorrect) score++;
const corr = document.createElement('div');
corr.style.marginBottom = '15px';
corr.style.padding = '10px';
corr.style.backgroundColor = isCorrect ? '#dff0d8' : '#f2dede';
corr.style.borderRadius = '6px';
corr.innerHTML = `<strong>Question ${i + 1} :</strong><br>${q.question}<br><span style="color: #27ae60;">Bonne réponse : <em>${q.options[q.answer]}</em></span>`;
correctionsDiv.appendChild(corr);
});
document.getElementById('result').textContent = `Votre score : ${score} / ${questions.length}`;
document.getElementById('submitBtn').disabled = true;
document.getElementById('submitBtn').style.opacity = 0.6;
}
renderQuestions();
</script>
ET VOICI SON RENDU, pour les images il faudra faire une modification en pointer vers vos images