Bonjour à tous,

Je travaille actuellement sur la mise en place d'un exercice interactif via navigateur pour une enseignante.

L'exercice se compose de la façon suivante : Une question, une réponse dans un <textarea>, un bouton de validation et l'affichage du corrigé en fonction de la réponse.

L'enseignante voudrait que les mots renseignés par l'étudiant dans sa réponse soient représentés de couleur verte dans le corrigé si il y a similitude.

Voici mon texte html :
Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
 
<div class="accordion-inner">
   <div class="describe">¿ Cuál es la posición de su cuerpo ? ¿ Qué está haciendo ? ¿A quién mira ? <br/><br/></div>
   <textarea rows="7" cols="60" id="question2b" placeholder="Ma réponse..."></textarea>
   <button class="button-verif" onclick="question2B()">Valider</button>
   <div class="reponse" id="reponse2b">
      <p>Réponse : <span id="corrige2b"></span></p>
   </div>
   <div class="faux" id="faux2b">
      <p>Vous devez remplir le champ pour voir la réponse !</p>
   </div>
</div>

Et voici mon code javascript :
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
 
function question2B() {
 
   var keywords = ['virgen', 'sentada', 'regazo', 'plancha', 'lavar', 'cubeta', 'mano', 'abierta', 'prenda', 'ropa', 'mojada', 'otra', 'barra', 'jabón', 'bebé', 'izquierda'];
    var reponse = document.getElementById("question2b").value.toLowerCase(),
         reponseArray = reponse.split(' ');
    var corrige = 'La ' + keywords[0] + ' está ' + keywords[1] + ' y sobre su ' + keywords[2] + ' tiene una ' + keywords[3] + ' de ' + keywords[4] + ' ' + keywords[9] + ' en forma de ' + keywords[5] + 
    '. Con una mano ' + keywords[7] + ' sostiene una ' + keywords[8] + ' de ' + keywords[9] + ', que parece ' + keywords[10] + ', y con la ' + keywords[11] + ' una ' + keywords[12] + ' de ' + keywords[13] +'. La ' + keywords[0] + 
    ' mira al ' + keywords[14] + ' que está a su ' + keywords[15] + '.';
 
    if (question2b.value.toLowerCase() =="") {
    	document.getElementById("reponse2b").style.display = "none";
    	document.getElementById("faux2b").style.display = "block";
    } else {
    	document.getElementById("faux2b").style.display = "none";
        document.getElementById("reponse2b").style.color = "black";
    	//for(var i = 0, c = keywords.length; i < c; i++) {
 
            document.getElementById("corrige2b").innerHTML = corrige;
 
            //AFFICHER LE MOT-CLE EN VERT
            for (var i = 0, c = reponseArray.length; i < c; i++) {
                for (var e = 0, f = keywords.length; e < f; e++) {
                    if (reponseArray[i] == keywords[e]) {
                        //CODE POUR INSERER ITEM EN VERT DANS HTML
                    }
                }
            }
    	document.getElementById("reponse2b").style.display = "block";
    }
}
Ma question est donc la suivante : Comment faire en sorte que l'item de keywords s'affiche en vert lorsque la function rencontre une similitude entre la réponse et le corrigé ?

Merci d'avance pour votre aide.

Cordialement.