Item d'un tableau en couleur dans HTML

Version imprimable

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:

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:

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.

:salut:

Pour surligner des mots dans le texte d'une page web, j'utilise depuis longtemps la fonction findAndReplaceDOMText : https://github.com/padolsey/findAndReplaceDOMText

Malheureusement elle ne fonctionne pas pour le texte dans un élément TEXTAREA !

Je vous propose la solution suivante (elle fonctionne correctement dans mon test) :

Code:

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
<script src="https://cdnjs.cloudflare.com/ajax/libs/findAndReplaceDOMText/0.4.6/findAndReplaceDOMText.min.js"></script>
<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">
        <h3>Proposition</h3>
        <p>
            <span id="copie2b"></span>
        </p>
        <h3>Réponse</h3>
        <p>
            <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>

Code:

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
 
    const
        elemQuestion2b = document.getElementById('question2b'),
        elemCopie2b = document.getElementById('copie2b'),
        elemReponse2b = document.getElementById("reponse2b"),
        elemFaux2b = document.getElementById("faux2b"),
        elemCorrige2b = document.getElementById("corrige2b");
 
    elemReponse2b.style.display = "none";
    elemFaux2b.style.display = "block";
 
    function question2B() {
        let
            keywords = ['virgen', 'sentada', 'regazo', 'plancha', 'lavar',
                'cubeta', 'mano', 'abierta', 'prenda', 'ropa', 'mojada', 'otra',
                'barra', 'jabón', 'bebé', 'izquierda'
            ],
            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] + '.',
            reponse = elemQuestion2b.value.toLowerCase();
 
        if (elemQuestion2b.value.toLowerCase() == "") {
            elemReponse2b.style.display = "none";
            elemFaux2b.style.display = "block";
        } else {
            elemFaux2b.style.display = "none";
            elemReponse2b.style.color = "black";
            elemCopie2b.textContent = reponse;
            elemCorrige2b.innerHTML = corrige;
 
            for (const mot of keywords) {
                findAndReplaceDOMText(elemCopie2b, {
                    find: mot,
                    wrap: 'mark'
                });
            }
 
            elemReponse2b.style.display = "block";
        }
    }

Bonjour,

si on se contente de mettre en vert les mots contenus dans l'array keywords, on peut faire simple avec .replace() :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
  // array des mots à trouver
  var keywords = ['virgen', 'sentada', 'regazo', 'plancha', 'lavar', 'cubeta', 'mano', 'abierta', 'prenda', 'ropa', 'mojada', 'otra', 'barra', 'jabón', 'bebé', 'izquierda'];
 
  // on récupère la réponse 
  var reponse = document.getElementById("question2b").value.toLowerCase();
 
  // pour chaque keyword trouvé, on le remplace avec le mot en vert 
  keywords.forEach(function(word) {
    reponse = reponse.replace(word,'<mark>'+word+'</mark>');
  });
 
  // on ré-affiche le texte, avec les mots en vert 
  document.getElementById("reponse2b").innerHTML = reponse;

(dans le CSS, j'ai ajouté un surlignage jaune) :

Code:

1
2
3
4
5
.reponse mark {
  display: inline-block;
  background-color: yellow; 
  color:green;
}

N.B. ici :

on ne tient pas compte de l'ordre ni de la position des mots.
ça ne comptabilise pas non plus le nombre de mots corrects.

remarque : on peut mettre le corrigé dans une seule chaine (inutile de faire un code compliqué) :

Code:

1
2
3
4
5
6
7
8
  var corrige = 'La virgen está sentada y sobre su regazo tiene una plancha de lavar ropa en forma de cubeta. Con una mano abierta sostiene una prenda de ropa, que parece mojada, y con la otra una barra de jabón. La virgen mira al bebé que está a su izquierda.';
 
  // (FACULTATIF) on met les mots en gras dans le corrigé
  // pour chaque keyword trouvé, on le remplace avec le mot en vert 
  keywords.forEach(function(word) {
    corrige = corrige.replace(word,'<b>'+word+'</b>');
  });
  document.getElementById("corrige2b").innerHTML = corrige;

01/06/2018, 16h50
Guitan02

Super, merci beaucoup pour votre aide ! :D
01/06/2018, 16h53
Invité

Quelle solution as-tu choisie ?