Aide QCM prog [Résolu]

Signaler
Messages postés
3
Date d'inscription
vendredi 14 mai 2021
Statut
Membre
Dernière intervention
14 mai 2021
-
Messages postés
3
Date d'inscription
vendredi 14 mai 2021
Statut
Membre
Dernière intervention
14 mai 2021
-
Bonjour,
Je dois faire en cours d'anglais un QCM. J'ai choisi de le coder en html, css et js. Le but est, quand on clique sur le bouton une fois le quiz terminé, que le résultat apparaisse sur une autre page avec un petit mot, dans la même mise en page que la page du QCM. Avant, après avoir cliqué sur le bouton, ca m'affichait le résultat sans mise en page. Cependant, quand j'ai essayé de faire en sorte que la mise en page reste, le résultat ne s'affiche plus. Quelqu'un aurait-il une solution ? Voici les bouts de code pertinents :
HTML :
<!DOCTYPE html>
<html>
<head>
 <title>MCQ-An Environmental Campaign</title>
 <link rel="stylesheet" type="text/css" href="mcq.css">
 <script type="text/javascript" src="mcq.js"></script>
</head>
<body>
<form name="mcq" id="mcq">
 <div>
  <p><u>1. What is the meaning of "ecological" ? Choose one of the following definitions :</u></p>
  <p><input type="radio" name="question1" value="a1">A. Requiring fewer resources or costing less money. </p>
  <p><input type="radio" name="question1" value="b1">B. Readily or easily liked; pleasing.</p>
  <p><input type="radio" name="question1" value="c1">C. Tending to benefit or cause minimal damage to the environment.</p>
  <p><input type="radio" name="question1" value="d1">D. Having a just or proper claim.</p>
 </div>
<input type="button" name="" value="I am done !" id="button" onclick="check()">
 </form>
<p id="resulat"></p>
</body>
</html>



CSS :
body {
 background-color: lightcyan;
 color: black;
 font-size: 30px;
 font-family: monospace; 
 margin-left: 3rem;
 margin-top: 5%;
}

#button {
 color: black;
 font-size: 25px;
 font-family: monospace; 
 padding: 5px;
}


JS :
function  check(){
 var c=0;
 var q1=document.mcq.question1.value;
 var result=document.getElementById('result');
 var mcq=document.getElementById("mcq");
 if (q1=="c1") {c++}
 mcq.style.display="none";
 
  if (c<=9) {
 result.textContent=`Your result is ${c} out of ten. You may try again, or click here to see the answers.`
 }else{
 result.textContent=`Your result is ${c} out of ten. It is perfect ! You may try again, or click here to see the answers.`
 }
}


Au cas où ce serait pas flagrant, je suis novice en la matière.
Merci d'avance et bonne journée.

2 réponses

Messages postés
33033
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 juin 2021
3 582
Bonjour,

Déjà, quand tu postes du code sur le forum, tu dois y préciser le langage.
Explications ( à lire entièrement ! ) disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Ensuite,
Tu dis que plus rien ne s'affiche.
Commence donc par regarder dans la console javascript de ton navigateur si il n'y aurait pas un message d'erreur.

Pense aussi à bien vider le cache de ton navigateur ( premier truc à faire dès qu'on touche le css ou le js d'une page)



Messages postés
3
Date d'inscription
vendredi 14 mai 2021
Statut
Membre
Dernière intervention
14 mai 2021

Bonjour,
Merci beaucoup, je garde cela en tête. Je viens de vider le cache. La console affiche "mcq.js:28 Uncaught TypeError: Cannot set property 'textContent' of null
at check (mcq.js:28)
at HTMLInputElement.onclick (mcq.html:91)"
J'imagine que cela signifie que ma variable est nulle, sauf que je ne comprends pas pourquoi...
Messages postés
33033
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 juin 2021
3 582
humm... sûrement à cause d'une faute de frappe ....
Tu as dans ton html
<p id="resulat"></p>

et toi tu pointes, dans ton js sur :
var result=document.getElementById('result');


result .. n'est pas resulat .. :-)
Messages postés
3
Date d'inscription
vendredi 14 mai 2021
Statut
Membre
Dernière intervention
14 mai 2021
>
Messages postés
33033
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 juin 2021

Merci beaucoup, je me sens toute bête. Passez une bonne journée ^-^.