Skip to content

GitLab

Vous avez reçu un message "Your GitLab account has been locked ..." ? Pas d'inquiétude : lisez cet article https://docs.gricad-pages.univ-grenoble-alpes.fr/help/unlock/

Commit b179f9e6 authored by Sylvain Coulange's avatar Sylvain Coulange
Browse files

déploiement du player bac-a-sable

parent a2480828
Hide whitespace changes
Inline Side-by-side
Showing with 83 additions and 12 deletions
static/js/playerPhono.js
View file @ b179f9e6
......@@ -86,11 +86,22 @@ function selectPanneau(p){
/// ACTIONS LORS DU CLIC SUR PHONEME
var cartes = [] // initialisation de la liste des cartes disponible (0 au début)
var ligneCible = "rep"
changeLigne(document.getElementById(ligneCible).parentElement) // par défaut ligne active = rep
function changeLigne(el) {
let newRep = el.firstElementChild
console.log('Change ligne to '+ newRep.id)
ligneCible = newRep.id
document.querySelectorAll('.ligneCible').forEach((divRep) => { divRep.classList.remove('ligneCible')})
el.classList.add('ligneCible')
saveTrace(`passage ligne ${ligneCible}`)
}
function recupPhon(identifiant) {
var rectId = identifiant
var phonId = rectId.replace("rect","phon")
var repDiv = document.getElementById('rep')
var repDiv = document.getElementById(ligneCible)
var newCarte = document.createElement('div')
newCarte.classList = "carte " + rectId;// on garde rectId, pour connaître le phonème mais sans appeler les styles de phonochromie-alem.css
......@@ -341,3 +352,44 @@ svgClick.addEventListener("load",function(){
}, false);
// RESTRICTIONS EXPÉ ALEXANDRE -- temporaire
if (thisURL.match(/.*pA\/play/) || thisURL.match(/.*pAV\/play/) || thisURL.match(/.*serie-bac-a-sable\/play/)) {
console.log('Session pour expé Alexandre: restrictions.')
document.getElementById('retourHome').style.display = "none"
document.getElementById('bravo_quit').style.display = "none"
}
// RESTRICTIONS BAC À SABLE -- pas de série de mots
if (thisURL.match(/.*serie-bac-a-sable\/play/)) {
console.log('Session Bac À Sable')
document.getElementById('fenetreDeLancement').style.display = "none"
document.getElementById('divReponse').style.display = ""
// Suppression divReponseGauche
document.getElementsByClassName('divReponseGauche')[0].remove()
// Reformattage divReponseMilieu
document.getElementsByClassName('divReponseMilieu')[0].classList.add('bacAsable')
// Mise à jour des boutons
document.getElementById('btnEnter').style.display = "block"
document.getElementById('btnValider').style.display = "none"
saveTrace(`start serie ${serieName}`)
}
var cptline=1
function newLine(el){
console.log(el)
cptline+=1
var newLine = el.parentElement.parentElement.cloneNode(true)
newLine.id = "divReponse"+cptline
newLine.firstElementChild.firstElementChild.innerHTML = ""
newLine.firstElementChild.firstElementChild.id = "rep"+cptline
newLine.lastElementChild.firstElementChild.id = "btnEnter"+cptline
newLine.lastElementChild.children[1].firstElementChild.setAttribute('onclick', "playIpa("+cptline+")")
newLine.lastElementChild.children[1].lastElementChild.id = "debitParole"+cptline
el.parentElement.parentElement.parentElement.insertBefore(newLine, el.parentElement.parentElement.nextElementSibling)
changeLigne(newLine.firstElementChild)
}
\ No newline at end of file
static/js/syntheseVocale.js
View file @ b179f9e6
......@@ -3,7 +3,7 @@ var currentDebit = 80;
var voix = "f"
var lang = thisPageLang
async function playIpa() {
async function playIpa(line="") {
var synth = false
......@@ -34,7 +34,7 @@ async function playIpa() {
} else if (thisAppli == "phonoplayer"){
var rep = document.getElementById('rep')
var rep = document.getElementById('rep'+line.toString())
ipa = ""
for (i=0; i<rep.children.length; i++) {
var repphon = rep.children[i].classList[1].replace("rect","phon")
......@@ -66,19 +66,19 @@ async function playIpa() {
// ENVOI
const response = await fetch('/_playIpa/', options)
const data = await response.json();
readResponse(data["audio"]);
readResponse(data["audio"], line);
} else {
var sv_audio = document.getElementsByTagName("audio")[0];
sv_audio.playbackRate = document.getElementById('debitParole').value / 100;
sv_audio.playbackRate = document.getElementById('debitParole'+line.toString()).value / 100;
sv_audio.play();
}
saveTrace(`playIpa [${ipa}] ${voix} ${lang} ${document.getElementById('debitParole').value}`)
saveTrace(`playIpa [${ipa}] ${voix} ${lang} ${document.getElementById('debitParole'+line.toString()).value}`)
}
function readResponse(response) {
function readResponse(response, line) {
var source = '<source src="data:audio/mpeg;base64,' + response + '" type="audio/mpeg"></source>';
var sv_audio = '<audio autoplay="true" controls>' + source + '</audio>';
sv_audio.playbackRate = document.getElementById('debitParole').value / 100;
sv_audio.playbackRate = document.getElementById('debitParole'+line.toString()).value / 100;
document.getElementById('audio').innerHTML = sv_audio;
}
\ No newline at end of file
static/styles/player.css
View file @ b179f9e6
......@@ -269,4 +269,17 @@
.switchable:hover {
border: 1px lightgrey solid;
border-radius: 3px;
}
/* BAC A SABLE */
.bacAsable {
border: 1px solid rgba(128, 128, 128, 0.274);
border-radius: 5px;
margin: 0px 10px;
padding: 0px 5px;
}
.ligneCible {
border-color: rgba(0, 0, 0, 0.521);
}
\ No newline at end of file
templates/playerPhono.html
View file @ b179f9e6
......@@ -49,7 +49,7 @@
<div class="mainContent">
<div style="width:90%;text-align: left;">
<div id="retourHome" style="width:90%;text-align: left;">
<a href="/player/"><button type="button" class="btn btn-outline-secondary">< Retour</button></a>
</div>
......@@ -79,10 +79,15 @@
</svg>
</button>
</div>
<div class="divReponseMilieu d-flex align-items-center">
<div id="rep" class="d-flex align-items-center flex-wrap"></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>
</div>
<div class="divReponseDroit d-flex">
<div class="divReponseDroit d-flex align-items-center justify-content-around">
<button type="button" class="btn btn-outline-secondary" id="btnEnter" onclick="newLine(this)" style="display: none;" title="Aller à la ligne">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrow-return-left" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M14.5 1.5a.5.5 0 0 1 .5.5v4.8a2.5 2.5 0 0 1-2.5 2.5H2.707l3.347 3.346a.5.5 0 0 1-.708.708l-4.2-4.2a.5.5 0 0 1 0-.708l4-4a.5.5 0 1 1 .708.708L2.707 8.3H12.5A1.5 1.5 0 0 0 14 6.8V2a.5.5 0 0 1 .5-.5z"/>
</svg>
</button>
{% if serieContent.syntheseVocale == "1" %}
<div class="my-auto btn-lecture d-flex flex-column align-items-stretch pe-3">
<div onclick="playIpa();" style="cursor: pointer;" title="Prononcer !">
......@@ -97,6 +102,7 @@
<button type="button" class="btn btn-success btn-lg mx-auto" onclick="checkAnswer()" id="btnValider">Valider</button>
</div>
</div>
<div id="divVideALaisserPourInsertNewLineBefore"></div>
</div>
<div id="audio" style="display: none;">
......
Markdown is supported
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