J'essaie de créer des exercices simples pour la formation musicale de musiciens débutants.
J'ai un problème lorsque j'essaie de comparer deux chaînes de caractères (dans la deuxième partie, lorsque l'élève rate et que toutes les classes "entreevisible" deviennent "entreeCachee" et inversement.
HTML
<!doctype HTML />
<html lang="fr">
<head>
<title>Cours et exercices interactifs pour la formation musicale</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="../../styles/exo.css" />
<link rel="stylesheet" type="text/css" href="../../styles/main.css" />
<body>
<div class="bandeGauche"></div>
<div class="bandeDroite"></div>
<header class="header">
<p class="boutonDesactive precedent">← <span>Exercice précédent</span></p>
<h1>C1N1 - Exercice 1</h1>
<a href="../home.html" class="bouton suivant facile">
<span class="message2"></span>
<span class="message1">Exercice suivant</span> →
</a>
</header>
<main class="page">
<aside class="intro">
<div class="images">
<img src="images/pyramide_notes.png">
<img src="images/pyramide_silences.png">
</div>
</aside>
<section class="contenu" id="q1">
<h2>Question 1</h2>
<p>L'exercice consiste à donner en toutes lettres le nom des figures de note. Le trait d'union n'est pas accapté : utilisez l'espace.</p>
<form method="post">
<div class="formulaire">
<p>
<label class="question">Donner le nom de cette figure de note : <img src="" /><br /></label>
<input class="entreeVisible q" type="text" name="q1" />
<select class="entreeCache qbis" name="q1bis">
<option value="doublecroche">Double croche</option>
<option value="croche">Croche</option>
<option value="noire">Noire</option>
<option value="blanche">Blanche</option>
<option value="ronde">Ronde</option>
</select>
</p>
</div>
<div class="formulaire">
<p>
<label class="question">Donner le nom de cette figure de note : <img src="" /><br /></label>
<input class="entreeVisible q" type="text" name="q2" />
<select class="entreeCache qbis" name="q2bis">
<option value="doublecroche">Double croche</option>
<option value="croche">Croche</option>
<option value="noire">Noire</option>
<option value="blanche">Blanche</option>
<option value="ronde">Ronde</option>
</select>
</p>
</div>
<div class="formulaire">
<p>
<label class="question">Donner le nom de cette figure de note : <img src="" /><br /></label>
<input class="entreeVisible q" type="text" name="q3" />
<select class="entreeCache qbis" name="q3bis">
<option value="doublecroche">Double croche</option>
<option value="croche">Croche</option>
<option value="noire">Noire</option>
<option value="blanche">Blanche</option>
<option value="ronde">Ronde</option>
</select>
</p>
</div>
<div class="formulaire">
<p>
<label class="question">Donner le nom de cette figure de note : <img src="" /><br /></label>
<input class="entreeVisible q" type="text" name="q4" />
<select class="entreeCache qbis" name="q4bis">
<option value="doublecroche">Double croche</option>
<option value="croche">Croche</option>
<option value="noire">Noire</option>
<option value="blanche">Blanche</option>
<option value="ronde">Ronde</option>
</select>
</p>
</div>
<div class="formulaire">
<p>
<label class="question">Donner le nom de cette figure de note : <img src="" /><br /></label>
<input class="entreeVisible q" type="text" name="q5" />
<select class="entreeCache qbis" name="q5bis">
<option value="doublecroche">Double croche</option>
<option value="croche">Croche</option>
<option value="noire">Noire</option>
<option value="blanche">Blanche</option>
<option value="ronde">Ronde</option>
</select>
</p>
</div>
<button id="bouton1" onclick="return false;"></button>
</form>
</section>
</main>
<aside class="correctionCache" id="correction">
<section class="correctionContenu faux" id="resultat">
<h2></h2>
<article>
<p id="indications1"></p>
<img id="imageIndications" />
<p id="indications2"></p>
</article>
<button id="ok"></button>
</section>
</aside>
<footer class="footer">
<a href="http://harmonie-malansac.wifeo.com/" class="logo" target="blank"><img src="../../logo.png" alt="HFM" /></a>
</footer>
<script src="exo1.js"></script>
<script src="../../exo.js"></script>
<script src="../../radio.js"></script>
</body>
</html>
Javascript
var resultat = document.getElementById("resultat");
/*préparations questions 1 et 2*/
var reponsesPossibles12 = [ ["double croche", "croche", "noire", "blanche", "ronde"],
["quart de soupir", "demi soupir", "soupir", "demi pause", "pause"] ];
var reponsesPossibles12bis = [ ["doublecroche", "croche", "noire", "blanche", "ronde"],
["quartdesoupir", "demisoupir", "soupir", "demipause", "pause"] ];
var bonnesReponses12 = [ [0, 1, 2, 3, 4], [0, 1, 2, 3, 4] ];
var images12 = new Array;
images12[0] = document.getElementById("q1").getElementsByTagName("img");
images12[1] = document.getElementById("q2").getElementsByTagName("img");
var images12src = [ ["images/double_croche.png", "images/croche.png", "images/noire.png", "images/blanche.png", "images/ronde.png"],
["images/quart_de_soupir.png", "images/demi_soupir.png", "images/soupir.png", "images/demi_pause.png", "images/pause.png"] ];
var indications1 = document.getElementById("indications1");
var indications2 = document.getElementById("indications2");
var q1 = document.getElementById("q1").getElementsByClassName("q");
var q1bis = document.getElementById("q1").getElementsByClassName("qbis");
var q2 = document.getElementById("q2").getElementsByClassName("q");
var q2bis = document.getElementById("q2").getElementsByClassName("qbis");
for(var i = 0; i < 2; i++) {
for(var j = 0; j < 5; j ++) {
var alea = Math.floor(Math.random() * (j + 1));
var temp = bonnesReponses12[i][j];
bonnesReponses12[i][j] = bonnesReponses12[i][alea];
bonnesReponses12[i][alea] = temp;
}
for(var j = 0; j < 5; j++) {
images12[i][j].setAttribute("src", images12src[i][bonnesReponses12[i][j]] );
}
}
alert(bonnesReponses12[0]);
/*traitement des réponses quesions 1*/
document.getElementById("bouton1").addEventListener("click", function() {
var nbBonnesReponses1 = 0;
var simplifie = 0;
for(var i = 0; i < 5; i++) {
alert(q1bis[i].value.toLowerCase());
alert(reponsesPossibles12bis[0][bonnesReponses12[0][i]]);
alert(q1bis[i].value.toLowerCase == reponsesPossibles12bis[0][bonnesReponses12[0][i]]);
if (q1[i].classList[0] == "entreeVisible") {
if (q1[i].value.toLowerCase() == reponsesPossibles12[0][bonnesReponses12[0][i]]) {
nbBonnesReponses1++;
}
else {
simplifie = 1;
}
} else {
if (q1bis[i].value.toLowerCase == reponsesPossibles12bis[0][bonnesReponses12[0][i]]) {
nbBonnesReponses1++;
}
}
}
if (simplifie == 1) {
for(var j = 0; j < 5; j++) {
q1[j].classList.replace("entreeVisible", "entreeCache");
q1bis[j].classList.replace("entreeCache", "entreeVisible");
}
}
alert(nbBonnesReponses1);
/*affichage de la correction question 1*/
if (nbBonnesReponses1 == 5) {
resultat.classList.replace("faux", "bon");
indications1.textContent = "Vous avez toutes les bonnes réponses !";
indications2.textContent = "Félicitations !";
} else {
resultat.classList.replace("bon", "faux");
indications1.textContent = "Vous avez " + (5 - nbBonnesReponses1) + " mauvaises réponses."
if (simplifie == 1) {
indications2.textContent = "La question va être simplifiée.";
} else {
indications2.textContent = "Essayez à nouveau.";
}
}
});
/*affichage de la correction*/
var boutons = document.getElementsByTagName("button");
var correctionFenetre = document.getElementById("correction");
var lenBoutons = boutons.length - 1;
for (var i = 0; i < lenBoutons; i++) {
boutons[i].addEventListener("click", function() {
correctionFenetre.className = "correctionVisible";
});
}
document.getElementById("ok").addEventListener("click", function() {
correctionFenetre.className = "correctionCache";
});
Le pire c'est que ça marche dans le premier cas.
J'utilise les alert pour voir mes valeurs en temps réel (je sais qu'il y a console.log).
q1bis[i].value.toLowerCase() et reponsesPossibles12bis[0][bonnesReponses12[0][i]] ont beau être égales (parce que je fais en sorte de sélectionner la bonne valeur), j'ai toujours q1bis[i].value.toLowerCase() == reponsesPossibles12bis[0][bonnesReponses12[0][i]] qui me donne false...
Du coup je ne comprends pas ...
Je sais que les gens répondent souvent sur ce forum donc je vous remercie d'avance
Alexandre.
- Edité par Jandri 18 octobre 2018 à 19:11:38
Chaînes de caractère égales (==)
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.