J'essaie d'apprendre le JavaScript, le CSS et l'HTML, j'ai donc tenté de programmer un quiz en suivant une vidéo pour ne pas partir de rien... Malgré tout il semblerait qu'il y ait un problème puisque la page HTML reste bloqué sur la première question et dans l'incapacité de cliquer sur un bouton réponse ._. J'ai relu mes trois programmes plusieurs fois pour éliminer les problèmes types oublis de virgules/points virgules, parenthèses ou accolades mal fermées, je suppose donc que le problème n'est pas de ce côté là. Pourtant il est sous mon nez et je ne le vois pas... Si quelqu'un pouvait relire au moins la partie JavaScript puisque je suppose que le problème vient de là je lui en serai reconnaissant ;-;
Merci d'avance à ceux qui prendront le temps.
Voici un lien WeTransfer si la totalité des fichiers vous intéresse : https://we.tl/t-V72vc7u6GJ
La partie JavaScript :
Code : Tout sélectionner
const questions = [
{
question : "Genshin Impact est un...",
answers : [
{ text : "MMORPG", correct : false},
{ text : "RPG free-to-play", correct : true},
{ text : "Platformer", correct : false},
{ text : "jeu de combat", correct : false}
]
},
{
question : "Quelle est la première région de Teyvat à être explorée ?",
answers : [
{ text : "Inazuma", correct : false},
{ text : "Sumeru", correct : false},
{ text : "Liyue", correct : false},
{ text : "Mondstadt", correct : true}
]
},
{
question : "Quel est l'élément de l'oeil divin du voyageur (le jumeau que l'on incarne) ?",
answers : [
{ text : "L'élément de l'oeil divin est aléatoire", correct : false},
{ text : "Nous n'avons pas d'oeil divin et donc pas de pouvoir élémentaire", correct : false},
{ text : "L'élément de l'oeil divin change selon les régions", correct : false},
{ text : "Nous avons un pouvoir élémentaire aléaoire (sauf Pyro et Cryo) mais pas d'oeil divin", correct : true}
]
},
{
question : "De quelle région réelle est inspiré Mondstadt ? ",
answers : [
{ text : "La France", correct : false},
{ text : "La Russie", correct : false},
{ text : "L'Allemagne", correct : true},
{ text : "Le Mexique", correct : false}
]
},
{
question : "Avec quel type d'arme se bat Amber ? ",
answers : [
{ text : "Un catalyseur", correct : false},
{ text : "Un arc", correct : true},
{ text : "Une arme d'Hast", correct : false},
{ text : "Une épée à une main", correct : false}
]
},
{
question : "Dans quelle(s) région(s) peut-on rencontrer Catherine de la Guilde des Aventuriers ? ",
answers : [
{ text : "Uniquement Mondstadt", correct : false},
{ text : "Mondstadt, Liyue et Fontaine", correct : false},
{ text : "Toutes les régions sauf Inazuma", correct : false},
{ text : "TOUTES elle se téléporte", correct : true}
]
},
{
question : "Où peut-on trouver des baies à crochet ? ",
answers : [
{ text : "Sur le territoire des loups", correct : true},
{ text : "Sur le Mont Aozang", correct : false},
{ text : "Sur l'île de Seira", correct : false},
{ text : "Dans le bois des murmures", correct : false}
]
},
{
question : "Qu'est ce que Paimon aime le plus ? ",
answers : [
{ text : "L'argent", correct : false},
{ text : "Le voyageur", correct : false},
{ text : "La nourriture", correct : true},
{ text : "Dormir", correct : false}
]
},
{
question : "Quel est le métier de Lisa ? ",
answers : [
{ text : "Grande maîtresse intérimaire de l'Ordre de Favonius", correct : false},
{ text : "Bibliothécaire de l'ordre de Favonius", correct : true},
{ text : "Gérante du Domaine de l'Aube", correct : false},
{ text : "Diaconesse de l'église de Favonius", correct : false}
]
},
{
question : "Quel élément comprend le plus de personnages jouables ?",
answers : [
{ text : "Pyro", correct : false},
{ text : "Anémo", correct : false},
{ text : "Hydro", correct : false},
{ text : "Cryo", correct : true}
]
}
];
const questionElement = document.getElementById("question");
const answerButtons = document.getElementById("answer-buttons");
const nextButton = document.getElementById("next-btn");
let currentQuestionIndex = 0;
let score = 0;
function startQuiz(){
currentQuestionIndex = 0;
score = 0;
nextButton.innerHTML = "Question suivante";
showQuestion();
}
function showQuestion(){
resetState();
let currentQuestion = questions[currentQuestionIndex];
let questionNo = currentQuestionIndex + 1;
questionElement.innerHTML = questionNo + ". " + currentQuestion.question;
currentQuestion.answers.forEach(answer => {
const button = document.createElement("button");
button.innerHTML = answer.text;
button.classList.add("btn");
answerButtons.appendChild(button);
if(answer.correct){
button.dataset.correct = answer.correct;
}
button.addEventListener("click", selectAnswer);
});
}
function resetState(){
nextButton.style.display = "none";
while(answerButtons.firstChild){
answerButtons.removeChild(answerButtons.firstChild);
}
}
function selectAnswer(e){
const selectedBtn = e.target;
const isCorrect = selectedBtn.datset.correct === "true";
if(isCorrect){
selectedBtn.classList.add("correct");
score++;
}else{
selectedBtn.classList.add("incorrect");
}
Array.from(answerButtons.children).forEach(button => {
if(button.datset.correct === "true"){
button.classList.add("correct");
}
button.disabled = true;
});
nextButton.style.display = "block";
}
function showScore(){
resetState();
questionElement.innerHTML = "Ton score est de ${score} sur ${questions.length} !";
nextButton.innerHTML = "Rejouer";
nextButton.style.display = "block";
}
function handleNextButton(){
currentQuestionIndex++;
if(currentQuestionIndex < question.length){
showQuestion();
}else{
showScore();
}
}
nextButton.addEventListener("click", ()=>{
if(currentQuestionIndex < questions.length){
handleNextButton();
}else{
startQuiz();
}
});
startQuiz();
