Aide QCM prog

Résolu

Elyca Messages postés 3 Date d'inscription Statut Membre Dernière intervention -
Elyca Messages postés 3 Date d'inscription Statut Membre Dernière intervention - 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.

A voir également:

Comment faire un qcm en html
Editeur html - Télécharger - HTML
Espace en html ✓ - Forum HTML
[**] Balise pour un espace vide en hml. Merci ✓ - Forum Webmastering
Html download - Télécharger - HTML
/Var/www/html/index.html ✓ - Forum Linux / Unix

2 réponses

Réponse 1 / 2

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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)

Réponse 2 / 2

Elyca Messages postés 3 Date d'inscription Statut Membre Dernière intervention

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...

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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 .. :-)

Elyca Messages postés 3 Date d'inscription Statut Membre Dernière intervention > jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention

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

Discussions similaires

Votre réponse

Discussions similaires