question html quiz par LetsGoWarriors - page 1

Bonjour. Je souhaite faire un quiz en html mais je suis bloqué. Je ne sais pas comment faire pour mettre les bonnes réponses en vert et les mauvaises en rouge. Pouvez vous m'aider svp ?

Merci d'avance.

<html>


<head>
<link rel="stylesheet" href="style.css" />

<title>Quizz</title>

<script src="test5.js"></script>

   <h1> Quizz sur la Seconde Guerre Mondiale : </h1> 
 

<h2>  Testez vos connaissances sur l'une des plus grandes guerres de l'histoire, la Seconde Guerre  Mondiale ! </h2><br>



</head>

<body>

<form name="quiz">
<p class="question">  Q1. Quelle est la capitale du III° Reich ?  </p><br>
<input type="radio" name="q1" value="Tokyo">Tokyo<br>
<input type="radio" name="q1" value="Nuremberg">Nuremberg<br>
<input type="radio" name="q1" value="Berlin">Berlin<br>
<br>

<p class="question">  Q2. Comment était surnommé l'alliance entre le Japon, L'Allemagne et l'Italie ?  </p><br>
<input type="radio" name="q2" value="La Triple Entente">La Triple Entente<br>
<input type="radio" name="q2" value="L'Axe ">L'Axe <br>
<input type="radio" name="q2" value="L'Alliance">L'Alliance<br>
<br>

<p class="question">  Q3. Qui était le Premier Ministre britannique lors de la Seconde Guerre Mondiale ?  </p><br>
<input type="radio" name="q3" value="Charles De Gaulle">Charles De Gaulle<br>
<input type="radio" name="q3" value="Winston Churchill">Winston Churchill<br>
<input type="radio" name="q3" value="Neville Chamberlain">Neville Chamberlain<br>
<br>

<p class="question">  Q4. Comment était surnommée la technique de guerre allemande ?  </p><br>
<input type="radio" name="q4" value="La Blitzkrieg">La Blitzkrieg<br>
<input type="radio" name="q4" value="La guerre des tranchées">La guerre des tranchées<br>
<input type="radio" name="q4" value="La guerre de mouvement">La guerre de mouvement<br>
<br>

<p class="question"> Q5. Quel a été l'évènement déclencheur de la Seconde Guerre mondiale ?  </p><br>
<input type="radio" name="q5" value="L'annexion de la Pologne">L'annexion de la Pologne<br>
<input type="radio" name="q5" value="L'envahissement de la France">L'envahissement de la France<br>
<input type="radio" name="q5" value="L'assassinat de François Ferdinand, ">L'assassinat de François Ferdinand, <br>
<br>

<input type="button" value="Score" onClick="getScore(this.form)">
<input type="reset" value="NEW"><p>
Score = <input type=text size=15 name="percentage"><br>
Réponses correctes :<br>
<textarea name="solutions" wrap="virtual" rows="4" cols="40"></textarea>
</form>

</body>
</html>

*, ::before, ::after {
      box-sizzing: border-box;
	  margin: 0;
	  padding: 0;
}

body {
     font-family: Arial, Helvetica, sans-serif;
}

h1 {
	font-weight: bold;
	padding: 20px 0;
	font-size: 40px;
	text-decoration: underline;
}
h2 {
    font-family: Russo One, Arial;
	padding: 20px 0;
	font-size: 30px;
	color:blue; 
}



.question
{
	font-weight:bold;
}


    animation: echec 0.3s ease-in-out;
}


    0% {
	    transform: translateX(0px);
	}
    33% {
	    transform: translateX(10px);
	}
    66% {
	    transform: translateX(-10px);
	}
	100% {
	    transform: translateX(0px);
	}
}

var numQues = 5;
var numChoi = 3;

var answers = new Array(5);
answers[0] = "Berlin";
answers[1] = "L'Axe ";
answers[2] = "Winston Churchill";
answers[3] = "La Blitzkrieg";
answers[4] = "L'annexion de la Pologne";

function getScore(form) {
  var score = 0;
  var currElt;
  var currSelection;

  for (i=0; i<numQues; i++) {
    currElt = i*numChoi;
    for (j=0; j<numChoi; j++) {
      currSelection = form.elements[currElt + j];
      if (currSelection.checked) {
        if (currSelection.value == answers[i]) {
          score++;
} 
          break;
        }
      }
    }
  }

  score = Math.round(score/numQues*100);
  form.percentage.value = score + "%";

  var correctAnswers = "";
  for (i=1; i<=numQues; i++) {
    correctAnswers += i + ". " + answers[i-1] + "\r\n";
  }
  form.solutions.value = correctAnswers;

}

if (f.choix[0].checked) {
   modifierText("resultat", "Bonne réponse:bla bla bla");
   question.getElementById("resultat").style.color="green";
} else {
  modifierText("resultat", " Mauvaise réponse... ");
   question. getElementById("resultat").style.color="red"

-
Edité par LetsGoWarriors 15 mai 2021 à 13:49:13

LetsGoWarriors

15 mai 2021 à 13:46:46

17 mai 2021 à 9:45:22

Mon projet est à rendre le 23. Est-ce quil serait possible que quelqu'un me débloque avant cette date svp?

Cordialement

NadfriJS

17 mai 2021 à 14:43:00

Salut, je ne sais pas si ton programme marche, mais pour mettre en vert ou en rouge, il suffit d'ajouter des classes CSS aux éléments concernés.

Ex:

CSS

.rouge{
color: red;
}

.vert{
color: green;
}

if (currSelection.value == answers[i])
{
  currSelection.classList.add("vert");
//ou currSelection.style.color = "green";
}

else
{
   currSelection.classList.add("rouge");
//ou currSelection.style.color = "red";
}

La meilleure solution est toujours la plus simple. Ma chaîne Youtube [Tutos pour débutants]

17 mai 2021 à 19:39:46

D'accord. merci de votre réponse. Où dois-je insérer ces éléments ?

question html quiz

question html quiz

Supprimer

Modérer

Signaler le message aux modérateurs