Bonjour,

J'utilise dans mon projet un objet HTML dont j'insère un formulaire pour la réalisation d'un QCM. Le code HTML intègre le formulaire, les styles CSS pour l'affichage et du code JavaScript pour la vérification des réponses. Un bouton est présent ( <button type="button" onclick="verifierReponses()">Vérifier les réponses</button> ).

Css :
<style>
.question {
border: 2px solid black;
border-radius: 10px;
padding: 10px;
margin: 10px 0;
background: linear-gradient(to bottom, violet, white);
text-align: left;
}
.correct {
color: green;
}
.incorrect {
color: red;
}

Formulaire :
<form id="qcm-form">
<div class="question">
<p>1. Quel est le métier de Rosalie ? </p>
<label><input type="radio" name="q1" value="0"> Marchande de fruits</label><br>
<label><input type="radio" name="q1" value="1"> Infirmière</label><br>
<label><input type="radio" name="q1" value="2"> Serveuse</label>
</div>
<button type="button" onclick="verifierReponses()">Vérifier les réponses</button>
</form>

javascript : 
function verifierReponses() {
var correctAnswers = [0];
var questions = document.querySelectorAll('.question');

questions.forEach((question, index) => {
var selectedAnswer = question.querySelector('input[type="radio"]:checked');
if (selectedAnswer) {
var labels = question.querySelectorAll('label');
labels.forEach(label => label.classList.remove('correct', 'incorrect'));
if (parseInt(selectedAnswer.value) === correctAnswers[index]) {
labels[selectedAnswer.value].classList.add('correct');
} else {
labels[selectedAnswer.value].classList.add('incorrect');
labels[correctAnswers[index]].classList.add('correct');
}
}
});
}

Le script fonctionne correctement en dehors du projet web, mais le bouton ne fonctionne pas lorsqu'il est intégré à l'objet HTML dans mo projet Website.

Pourriez-vous m'aider à résoudre ce problème ?

Je vous remercie d'avance.