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++;
}