Bonjour,
J'ai des difficultés avec mon code javascript. Pourriez-vous m'aider s'il vous plaît?
voici mon code:
$niveauChoisi = htmlspecialchars($_POST['niveau']);
echo "<p>Vous avez choisi de travailler des mots de niveau ". $niveauChoisi . "</p>";
$content = $response['content'];
error_reporting(0);
$nbrMotsTrouves = 0;
$noFormulaire = 0;
echo "<table>";
echo "<tr><th>Mot Allemand</th><th>Traduction - à compléter ! </th><th> Feedback </th></tr>";
foreach($content as $word){
if($word['level']['name']==$niveauChoisi){
echo "<div>";
echo "<p>".$word['value']."</p>";
echo "<p><input type='text' id='formulaire".$noFormulaire."' ></p>";
echo "<p><span id='reponse".$noFormulaire."' style='visibility:hidden'>";
echo $word['translations'][0]['value'];
}else{
echo "Ce mot n'a pas de traduction";
}
echo "</span></p>";
echo "</div>";
$nbrMotsTrouves=$nbrMotsTrouves+1;
$noFormulaire = $noFormulaire+1;
}
}
echo "<table>";
echo "<p>Parmi les ".$elementPerPage." mots disonibles, ".$nbrMotsTrouves." mots sont de niveau ". $niveauChoisi."</p>";
echo "<input type='submit' value='Vérifier mes réponses' onclick='verif()'>"
?>
<script>
var nbrMots = <?php echo $nbrMotsTrouves; ?>;
function verif(){
for(var i=0;i<nbrMots;i++){
var trad = document.querySelector("#reponse"+i).innerHTML;
var reponseUtilisateur = document.querySelector("#formulaire"+i).value;
if(trad==reponseUtilisateur){
document.querySelector("#reponse"+i).innerHTML = "Juste !";
document.querySelector("#reponse"+i).style.visibility = "visible";
}else{
document.querySelector("#reponse"+i).innerHTML = "Faux... ";
document.querySelector("#reponse"+i).style.visibility = "visible";
}
}
}
</script>
</body>
Pour le moment, la page affiche plusieurs mots du niveau choisi et un seul bouton vérifier pour tous les mots. J'aimerais pouvoir mettre un bouton vérifier à chaque mot peu importe le nombre de mot affiché. Par la même occasion, j'aimerais aussi empiler toutes les <div>, les cacher et les révéler au moment où on appuie sur le bouton verif.
Merci d'avoir lu mon problème.
