Sujet Précédent Sujet Suivant

Aide QCM prog

Résolu/Fermé
Elyca Messages postés 3 Date d'inscription vendredi 14 mai 2021 Statut Membre Dernière intervention 14 mai 2021 - Modifié le 14 mai 2021 à 16:33
Elyca Messages postés 3 Date d'inscription vendredi 14 mai 2021 Statut Membre Dernière intervention 14 mai 2021 - 14 mai 2021 à 16:25
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

Réponse 1 / 2
jordane45 Messages postés 38392 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 23 janvier 2025 4 731
14 mai 2021 à 15:08
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)



0
Réponse 2 / 2
Elyca Messages postés 3 Date d'inscription vendredi 14 mai 2021 Statut Membre Dernière intervention 14 mai 2021
14 mai 2021 à 16:15
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...
0
jordane45 Messages postés 38392 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 23 janvier 2025 4 731
14 mai 2021 à 16:19
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 .. :-)
0
Elyca Messages postés 3 Date d'inscription vendredi 14 mai 2021 Statut Membre Dernière intervention 14 mai 2021 > jordane45 Messages postés 38392 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 23 janvier 2025
14 mai 2021 à 16:25
Merci beaucoup, je me sens toute bête. Passez une bonne journée ^-^.
0

Discussions similaires

la balise <br> ou <br />
faamugol -
rwaness -

8 réponses
<br> ou <br /> ou </br>
corentin.93 -
jessy006 -

11 réponses
Espace en HTML
baissaoui -
baissaoui -

0 réponse
Saut de lignes sans <br/>
Rapi-shiny -
Rapi-shiny -

13 réponses
Balise </br>
erf -
erf -

3 réponses