correction feedback player selon rmq Alexandre

static/js/playerPhono.js

@@ -244,8 +244,17 @@ function checkAnswer() {
     var erreur = true;
     
     myrep = [];
-    rep.childNodes.forEach((el) => { myrep.push(el.classList[1].replace("rect","phon")) })
+    // Réinitialisation des feedbacks (décoloration cartes + suppr carte "?")
+    rep.childNodes.forEach((el) => {
+        el.classList.remove("subPhon");
+        el.classList.remove("insPhon");
+        if (el.classList.contains("delPhon")) rep.removeChild(el);
+    })
+    rep.childNodes.forEach((el) => { 
+        myrep.push(el.classList[1].replace("rect","phon"));
+    })
     console.log("myrep:",myrep)
+
     
     if (!Array.isArray(phono[0])) {
         // Si premier élément n'est pas isArray, c'est qu'il y a qu'une phono enregistrée (ancienne série), dans ce cas on reformatte en liste de phono [ ["a","b"] ]
@@ -268,11 +277,19 @@ function checkAnswer() {
 
     comps.forEach( comp => { if (comp.correct) erreur=false })
 
+    var listPhonExistants = []
+    for (let phono of mots[cptitem-1].phono) {
+        for (let phon of phono) listPhonExistants.push(phon);
+    }
+
     // COLORATION DES CARTES
     for (i=0; i<comps[0].comp.length; i++) {
-        if (comps[0].comp[i].type == "SUB") rep.childNodes[i].classList.add("subPhon")
-        else if (comps[0].comp[i].type == "INS") {
-            rep.childNodes[i].classList.add("insPhon")
+        if (comps[0].comp[i].type == "SUB" || comps[0].comp[i].type == "INS") {
+            // si le phon existe dans le mot : orange
+            // si le phon n'existe pas dans le mot : rouge
+            if (listPhonExistants.includes(rep.childNodes[i].classList[1].replace("rect","phon"))) rep.childNodes[i].classList.add("subPhon");
+            else rep.childNodes[i].classList.add("insPhon");
+
         } else if (comps[0].comp[i].type == "DEL") {
             var newCarte = document.createElement('div')
             newCarte.classList = "carte phon_inconnu delPhon noTextClip";// on garde rectId, pour connaître le phonème mais sans appeler les styles de phonochromie-alem.css
@@ -303,7 +320,7 @@ function checkAnswer() {
             if (i<=rep.childNodes.length) rep.insertBefore(newCarte, rep.childNodes[i])
             else rep.appendChild(newCarte);
         }
-        //else if (comps[0].comp[i].type == "OK") rep.childNodes[i].classList.add("correctPhon")
+        else if (comps[0].comp[i].type == "OK") rep.childNodes[i].classList.add("correctPhon")
     }
 
     if (!erreur) {
@@ -316,6 +333,11 @@ function checkAnswer() {
     }
 }
 
+function initAnswer() {
+    rep.innerHTML = "";
+    document.querySelectorAll('.divReponseMilieu')[0].appendChild(rep)
+}
+
 function compareRepRef(myrep, ref) {
     // inspiré du script python pour calculer le WER https://github.com/imalic3/python-word-error-rate/blob/master/word_error_rate.py
 

static/styles/player.css

@@ -121,7 +121,7 @@
     vertical-align: middle;
 }
 .divReponseGauche {
-    width: 20%;
+    width: 15%;
     min-width: 60px;
     /* background-color: rebeccapurple; */
     padding: 10px 0px;
@@ -133,7 +133,7 @@
     /* background-color: orangered; */
 }
 .divReponseDroit {
-    width: 20%;
+    width: 25%;
     min-width: 155px;
     /* background-color: orange; */
     padding: 10px 0;
@@ -220,16 +220,16 @@
 }
 
 .wrongPhon {
-    border: solid 4px red;
+    border: solid 6px red;
 }
 .correctPhon {
-    border: solid 4px green;
+    border: solid 6px rgb(0, 199, 0);
 }
 .subPhon {
-    border: solid 4px orange;
+    border: solid 6px orange;
 }
 .insPhon {
-    border: solid 4px red;
+    border: solid 6px red;
 }
 .delPhon {
     border: dotted white;

templates/playerPhono.html

@@ -14,36 +14,6 @@
         var sc = JSON.parse("{{ serieJson|escapejs }}");
         var mots = JSON.parse("{{ serie.mots|escapejs }}");
 
-        // var serieId = sc.id;
-        // var serieName = sc.nom;
-        
-        // var images = sc.imageFin;
-        // var phono = sc.phonoFin;
-        // var audio_R = sc.audioFin;
-        // audio_R = 0;
-        // var video = sc.videoDeb;
-        // var synthvoc = sc.syntheseVocale;
-        // var panneauPartiel = sc.panneauPartiel;
-        // var phonActifs = JSON.parse(sc.phonVisibles);
-        // panneauPartiel = (panneauPartiel==1) ? true : false
-        // synthvoc = (synthvoc==1) ? true : false
-        // let videoMode = false
-        // let audioMode = false
-        // if (video==1) {
-        //     videoMode = true
-        // } else {
-        //     audioMode = true
-        // }
-        // console.log("Mots:",mots);
-        // console.log("ImageFin:",images);
-        // console.log("PhonoFin:",phono);
-        // console.log("AudioFin:(blocked)",audio_R);
-        // console.log("AudioDeb:",audioMode);
-        // console.log("VideoDeb:",videoMode);
-        // console.log("PanneauPartiel:",panneauPartiel);
-        // console.log("Phonèmes actifs:", phonActifs)
-        // console.log("Synthèse vocale:", synthvoc)
-
         var userName = "{{ user.username }}";
         if (userName) {
             console.log('Logged as', userName);
@@ -108,7 +78,10 @@
                         <input type="number" value="80" id="debitParole" title="Débit de parole" min="0" max="150" step="10">
                     </div>
                     
-                    <button type="button" class="btn btn-success btn-lg mx-auto" onclick="checkAnswer()" id="btnValider">Valider</button>
+                    <button type="button" class="btn btn-success btn-lg m-1" onclick="checkAnswer()" id="btnValider">Valider</button>
+                    <button type="button" class="btn btn-outline-secondary m-1" onclick="initAnswer()" id="btnInit" title="Effacer tous les sons"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
+                        <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
+                      </svg></button>
                 </div>          
             </div>
             <div id="divVideALaisserPourInsertNewLineBefore"></div>