Bonjour tout le monde et merci de me lire

Voil� mon soucis :
je dois cr�er un quiz avec "coloriage" de la bonne r�ponse en vert et les mauvaises en rouge en fin de "partie".
De plus je dois pouvoir revenir sur la question pr�c�dente si je veux changer d'avis.

J'ai d�j� commencer .
Mon quiz est cr�e mais je n'arrive pas "colorier" et "revenir a la question pr�c�dente".
Les buttons sont d�j� initialis�s mais je pense qu'il me manque pas grand chose..
Si quelqu'un aurait une id�e, je suis preneur.

fichier
Code HTML : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <!--<link rel="stylesheet" href="style.css" />
        --><title>Premiers Quizz informatique</title>
    </head>
 
    <body>
        <h1>Liste des quizz</h1>
        <!-- Liste des quizz utilisables-->
        <fieldset>
       <legend>Choix de votre quizz</legend> <!-- Titre du fieldset -->
 
       <p>
           Choissisez le quizz sur lequel vous voulez vous tester : </p>
        <p>   <a href="quizz_java.html"><img src="https://cdn.pixabay.com/photo/2017/05/19/21/12/java-2327538_640.png" id="bonjour_java" name="java" /></a>
           <a href="quizz_star_wars.html"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/6c/Star_Wars_Logo.svg/1280px-Star_Wars_Logo.svg.png" id="bonjour_star_wars" name="star_wars" /></a></p>
        <p>   <a href="quizz_c.html"><img src="https://cdn.pixabay.com/photo/2015/10/31/12/27/c-1015531_640.jpg" id="bonjour_c" name="ce" /></a>
           <a href="quiz_cpp.html"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/C_plus_plus.svg/2000px-C_plus_plus.svg.png" id="bonjour_cpp" name="cpp" /></a>
       </p>
   </fieldset>
    </body>
</html>

fichier quizz_java.html
Code HTML : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title> Quiz </title>
  <link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
  <div class ="grid">
    <div id = "quiz">
      <h1>Quiz </h1>
      <hr style ="margin-top: 20px">
      <p id="question"></p>
 
      <div class="buttons">
          <button id="btn0"><span id="choice0"></span></button>
          <button id="btn1"><span id="choice1"></span></button>
          <button id="btn2"><span id="choice2"></span></button>
          <button id="btn3"><span id="choice3"></span></button>
        </div>
 
        <hr style="margin-top: 50px">
        <footer>
          <p id="progress">Question x sur y. </p>
        </footer>
      </div>
    </div>
          <input type="button" value="Page principale" onclick="window.location.href='\index.html'"></button>
          <!--<input type="button" value="retour" onclick="www.google.com"></button>
          --> <p><a href="javascript:history.go(-1)">Retour</a></p>
          <input type="button" value ="HELP" onclick= "alert('Aucun retour aux questions précedente n\'est possible, en revanche vous pouvez voir vos résultats');" </button>
    <script src="quiz_controller.js"></script>
    <script src="question.js"></script>
    <script src="app.js"></script>
  </body>
  </html>

question .js
Code : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
7
8
9
10
11
function Question (text,choices,answer){
  this.text=text;
  this.choices = choices;
  this.answer = answer;
 
}
 
Question.prototype.correctAnswer = function(choice) {
  return choice === this.answer;
 
}
app.js
Code : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
  function populate(){
  if (quiz.isEnded()){
showScores();
//showAnswer();
  }
  else {
    var element = document.getElementById("question");
    element.innerHTML = quiz.getQuestionIndex().text;
    //show choices
    var choices = quiz.getQuestionIndex().choices;
    for(var i= 0; i<choices.length;i++){
      var element = document.getElementById("choice"+i);
      element.innerHTML = choices[i];
      guess("btn" +i,choices[i]);
 
    }
    showProgress();
  }
};
 
function guess(id, guess) {
  var button= document.getElementById(id);
  button.onclick = function(){
    quiz.guess(guess);
    populate();
  }
 
 
}
 
function showProgress(){
  var currentQuestionNumber = quiz.questionIndex +1;
  var element = document.getElementById("progress");
  element.innerHTML = "question " + currentQuestionNumber +" sur " +quiz.questions.length;
}
 
function showScores(){
    var gameOverHtml = "<h1>Resultat</h1>"
      gameOverHtml += "<h2 id='score'> Ton score est de : " +quiz.score +"/"+quiz.questions.length+"</h2>";
      var element = document.getElementById("quiz");
      element.innerHTML = gameOverHtml;
 
};
 
 
function showAnswer(){
var answer = "<h1>Resultat"+ quiz.text[0] +"</h1>"
//var element = document.getElementById("quiz");
  //element.innerHTML = answer;
  var element2= document.getElementById("question");
  element2.innerHTML = quiz.questions.correctAnswer().text;
}
 
 
 
var questions = [
  new Question("A l'heure actuelle,de qui Java est-elle la technologie?",["Microsoft","Sun Microsystems","Oracle","Google"],"Oracle"),
  new Question ("Par qui Sun Microsystems a été rachetée?",["Google","Oracle","JetBrains","Microsoft"],"Oracle"),
  new Question ("Java est aussi ?",["une île française","une île indonésienne","une île américaine","un pays"],"une île indonésienne")
];
 
var quiz = new Quiz(questions);
 
populate();


quizz_controller.js
Code : S�lectionner tout - Visualiser dans une fen�tre � part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function Quiz(questions) {
  this.score = 0;
  this.questions = questions;
  this.questionIndex = 0;
}
 
Quiz.prototype.getQuestionIndex = function() {
  return this.questions[this.questionIndex];
}
 
Quiz.prototype.isEnded = function() {
  return this.questions.length === this.questionIndex;
 
}
 
Quiz.prototype.guess = function(answer) {
 
  if (this.getQuestionIndex().correctAnswer(answer)){
  // TESTE   document.getElementById("choices").setAttribute("class", "red");
      this.score++;
 
  }
  this.questionIndex++;
}