suite random english

a626ec81 · Sylvain Coulange · 57bdb5c2 · a626ec81 · a626ec81 · a626ec81
Commit a626ec81 authored Jan 22, 2023 by Sylvain Coulange 🌼
--- a/static/js/playerPhono.js
+++ b/static/js/playerPhono.js
@@ -45,7 +45,7 @@ function selectLang(lang, p="default", f="default"){
    var phonolist = document.getElementById('selectPanneau')
    phonolist.innerHTML = ''
    document.getElementById('stressParam').style.display = 'none !important'
-    document.getElementById('paramSerieAuto').style.display = 'none !important'
+    document.querySelectorAll('.paramSerieAuto').forEach((el)=> { el.style.display = 'none !important' })

    if (lang=="fr"){
        var phonoFrDo = document.createElement('option')
@@ -69,9 +69,9 @@ function selectLang(lang, p="default", f="default"){

        famille = "formes"
        document.getElementById('stressParam').style.display = ''
-        document.getElementById('paramSerieAuto').style.display = ''
        interface("en")
    }
+    if (random) document.querySelectorAll('.paramSerieAuto').forEach((el)=> { el.style.display = '' })
    selectPanneau(p)
 }

@@ -210,9 +210,10 @@ var currentVideo = ""
 const rep = document.getElementById('rep')
 var btnValider = document.getElementById("btnValider")

-if (videoMode) document.getElementById('btnVideo').style.display = 'block'
-if (audioMode) document.getElementById('btnAudio').style.display = 'block'
-if (syntheseVocale) document.getElementById('divSynthVoc').style.display = 'block'
+if (videoMode) document.getElementById('btnVideo').style.display = 'block';
+if (audioMode) document.getElementById('btnAudio').style.display = 'block';
+if (random) document.getElementById('btnText').style.display = 'block';
+if (syntheseVocale) document.getElementById('divSynthVoc').style.display = 'block';

 // LANCEMENT DE L'ACTIVITÉ PAR DEFAUT (TRANSMISE AVEC LE TEMPLATE cf. views.py)
 nbmots = mots.length
@@ -289,6 +290,23 @@ function checkAnswer() {
    })
    console.log("myrep:",myrep)

+    ////////////////////////////////////
+    // REFORMATAGE phono POUR ks kv el en... etc.
+    phono.forEach((el)=>{
+        if (el.includes("phon_ks")){
+            var newEl = []
+            for (i=0; i<el.length; i++) {
+                if (el[i]=="phon_ks"){
+                    newEl.push("phon_k")
+                    newEl.push("phon_s")
+                } else {
+                    newEl.push(el[i])
+                }
+            }
+            phono.push(newEl);
+        }
+    })
+    ////////////////////////////////////
    
    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"] ]
@@ -516,6 +534,12 @@ function playAudio() {
    saveTrace("playAudio")
 }

+function playAudioId(i) {
+    var audio = new Audio(urls[i][1])
+    audio.play()
+    saveTrace("playAudio " + urls[i][0])
+}
+
 function playAudio_R() {
    if (audioFin==1 && currentAudioFin.length>0) {
        var audio = new Audio("../../media/audio-uploads/"+currentAudioFin)

--- a/static/js/playerPhonoAuto.js
+++ b/static/js/playerPhonoAuto.js
@@ -98,7 +98,20 @@ function loadNextAuto() {
    
    saveTrace(`next ${mots[cptitem]["motGenerique"]}`)
    rep.innerHTML = ""
-     
+
+    document.querySelectorAll('.altAudio').forEach((el)=> document.getElementById('btnAudio').removeChild(el))
+    
+    document.getElementById('btnAudio').innerHTML = ""
+    for (i=0;i<urls.length;i++) {
+       document.getElementById('btnAudio').innerHTML += `<button onclick="playAudioId(${i})" type="button" class="btn btn-outline-primary btn-lg btnAudio" style="position:relative">
+        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" style="background-color:transparent" class="bi bi-volume-up-fill my-1" viewBox="0 0 16 16">
+            <path d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z"/>
+            <path d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z"/>
+            <path d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06z"/>
+          </svg>
+          <div style="position:absolute; bottom:0px; right:0px">${urls[i][0]}</div>
+    </button>`
+    }
    
    var ukOK = false;
    for (url of urls) {
@@ -121,5 +134,20 @@ function randomWord() {
    rep.innerHTML = ""
    var rw = lexiqueEn[Math.floor(Math.random() * lexiqueEn.length)];
    console.log(rw);
+    document.getElementById('divTextMot').children[0].innerText = rw;
    loadWord(rw);
+}
+
+var showText = false;
+function toggleText() {
+    showText = !showText;
+    if (showText) {
+        document.getElementById('divTextMot').style.display = ''
+        document.getElementById('eyeX').style.display = ''
+        document.getElementById('eyeO').style.display = 'none'
+    } else {
+        document.getElementById('divTextMot').style.display = 'none'
+        document.getElementById('eyeX').style.display = 'none'
+        document.getElementById('eyeO').style.display = ''
+    }
 }
\ No newline at end of file
--- a/templates/playerPhono.html
+++ b/templates/playerPhono.html
@@ -38,6 +38,9 @@
                <div><span id="divConsigne" class="consigne" style="display: none;">Pointez le mot que vous entendez</span></div>
                <div><span id="cptitem">0</span>/<span id="nbMots"></span></div>
            </div>
+            <div id="divTextMot" style="display: none;">
+                <span style="font-size: 1.5em;"></span>
+            </div>

            <div id="fenetreDeLancement" style="display: none;">
                <button type="button" class="btn btn-outline-success btn-lg" onclick="demarrer()">Démarrer !</button>
@@ -45,18 +48,31 @@

            <div class="divReponse" id="divReponse" style="display: none;">
                <div class="divReponseGauche d-flex align-items-center">
-                    <button onclick="playAudio()" id="btnAudio" style="display:none" type="button" class="btn btn-outline-primary btn-lg btnAudio mx-auto">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" style="background-color:transparent" class="bi bi-volume-up-fill" viewBox="0 0 16 16">
-                            <path d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z"/>
-                            <path d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z"/>
-                            <path d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06z"/>
-                          </svg>
-                    </button>
+                    <div id="btnAudio" class="mx-auto" style="display:none">
+                        <button onclick="playAudio()" type="button" class="btn btn-outline-primary btn-lg btnAudio">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" style="background-color:transparent" class="bi bi-volume-up-fill my-1" viewBox="0 0 16 16">
+                                <path d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z"/>
+                                <path d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z"/>
+                                <path d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06z"/>
+                              </svg>
+                        </button>
+                    </div>
                    <button onclick="playVideo()" id="btnVideo" style="display:none" type="button" class="btn btn-outline-primary btn-lg btnAudio mx-auto">
-                        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-film" viewBox="0 0 16 16">
+                        <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-film my-1" viewBox="0 0 16 16">
                            <path d="M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm4 0v6h8V1H4zm8 8H4v6h8V9zM1 1v2h2V1H1zm2 3H1v2h2V4zM1 7v2h2V7H1zm2 3H1v2h2v-2zm-2 3v2h2v-2H1zM15 1h-2v2h2V1zm-2 3v2h2V4h-2zm2 3h-2v2h2V7zm-2 3v2h2v-2h-2zm2 3h-2v2h2v-2z"/>
                          </svg>
                    </button>
+                    <button onclick="toggleText()" id="btnText" style="display:none" type="button" class="btn btn-outline-primary btn-lg btnAudio mx-auto">
+                        <svg id="eyeO" xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-eye my-1" viewBox="0 0 16 16">
+                            <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
+                            <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
+                          </svg>
+                        <svg id="eyeX" style="display:none" xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-eye-slash my-1" viewBox="0 0 16 16">
+                            <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
+                            <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
+                            <path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/>
+                          </svg>
+                    </button>
                </div>
                <div class="divReponseMilieu d-flex align-items-center flex-grow-1" onclick="changeLigne(this)">
                    <div id="rep" class="d-flex align-items-center flex-wrap rep"></div>
@@ -148,6 +164,7 @@
        <div id="stressParam" class="d-flex justify-content-center gap-5" style="display:none !important">
            <button type="button" class="btn-stress" id="stress1" style="background-color: #FF9500;" onclick="setStress(1)">Stress 1</button>
            <button type="button" class="btn-stress" id="stress2" style="background-color: #FFBD5F;" onclick="setStress(2)">Stress 2</button>
+            <button class="paramSerieAuto btn btn-primary m-2" type="button" onclick="randomWord()">Next word</button>
        </div>
        
        <center>
@@ -189,7 +206,7 @@
        </div>
        </center>

-        <div id="paramSerieAuto" class="d-flex justify-content-center align-items-center" style="display:none !important">
+        <div class="paramSerieAuto d-flex justify-content-center align-items-center" style="display:none !important">
            <label for="tryAWord">Write a word to point: </label>
            <div class="input-group m-3" style="width:300px">
                <input id="tryAWord" name="tryAWord" class="form-control" type="text" value="" aria-describedby="tryAWordOK">