Commit a626ec81 authored by Sylvain Coulange's avatar Sylvain Coulange 🌼
Browse files

suite random english

parent 57bdb5c2
......@@ -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)
......
......@@ -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
......@@ -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">
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment