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

Ajout fonctionnalité dragdrop pour Player

parent de92efcd
// VARIABLES DISPONIBLES
// var cartes -> liste des cartes disponibles ; mis à jour à chaque modification de rep
// const rep -> div d'écriture
// https://www.youtube.com/watch?v=jfYWwQrtzzY&t=102s
rep.addEventListener('dragover', e => {
e.preventDefault()
const afterElement = getDragAfterElement(e.clientX)
const carte = document.querySelector('.dragging')
if (afterElement == null) {
rep.append(carte)
} else {
rep.insertBefore(carte, afterElement)
}
})
function getDragAfterElement(x) {
const draggableElements = [...rep.querySelectorAll('.carte:not(.dragging)')]
return draggableElements.reduce((closest, child) => {
const box = child.getBoundingClientRect()
const offset = x - box.left - box.width / 2
if (offset < 0 && offset > closest.offset) {
return { offset: offset, element: child }
} else {
return closest
}
}, { offset: Number.NEGATIVE_INFINITY }).element
}
\ No newline at end of file
selectLang("fr"); selectLang("fr");
function selectLang(lang, p="default", f="default"){ function selectLang(lang, p="default", f="default"){
console.log('SelectLang()',lang); console.log('SelectLang()',lang)
var phonolist = document.getElementById('selectPanneau'); var phonolist = document.getElementById('selectPanneau')
phonolist.innerHTML = ''; phonolist.innerHTML = ''
if (lang=="fr"){ if (lang=="fr"){
var phonoFrDo = document.createElement('option'); var phonoFrDo = document.createElement('option')
phonoFrDo.value = "phonoFrDo"; phonoFrDo.value = "phonoFrDo"
phonoFrDo.innerHTML = "Panneaux Fr A. Do"; phonoFrDo.innerHTML = "Panneaux Fr A. Do"
phonolist.appendChild(phonoFrDo); phonolist.appendChild(phonoFrDo)
interface("fr"); interface("fr")
} else if (lang=="en"){ } else if (lang=="en"){
var phonoEnAlem = document.createElement('option'); var phonoEnAlem = document.createElement('option')
phonoEnAlem.value = "phonoEnAlem"; phonoEnAlem.value = "phonoEnAlem"
phonoEnAlem.innerHTML = "ALeM British"; phonoEnAlem.innerHTML = "ALeM British"
phonolist.appendChild(phonoEnAlem); phonolist.appendChild(phonoEnAlem)
// var phonoEnPronSciBr = document.createElement('option'); // var phonoEnPronSciBr = document.createElement('option')
// phonoEnPronSciBr.value = "phonoEnPronSciBr"; // phonoEnPronSciBr.value = "phonoEnPronSciBr"
// phonoEnPronSciBr.innerHTML = "PronSci British"; // phonoEnPronSciBr.innerHTML = "PronSci British"
// phonolist.appendChild(phonoEnPronSciBr); // phonolist.appendChild(phonoEnPronSciBr)
interface("en"); interface("en")
} }
selectPanneau(p); selectPanneau(p)
} }
interface("fr"); interface("fr");
function interface(lang) { function interface(lang) {
console.log("Langue d'interface:",lang); console.log("Langue d'interface:",lang)
thisPageLang = lang; thisPageLang = lang
var langspanList = document.getElementsByClassName("langspan"); var langspanList = document.getElementsByClassName("langspan")
if (lang == "en") { if (lang == "en") {
for (i=0; i<langspanList.length; i++) { for (i=0; i<langspanList.length; i++) {
span = langspanList[i]; span = langspanList[i]
span.innerHTML = langJson[span.id]["en"]; span.innerHTML = langJson[span.id]["en"]
} }
} else { // "fr" par défaut } else { // "fr" par défaut
for (i=0; i<langspanList.length; i++) { for (i=0; i<langspanList.length; i++) {
span = langspanList[i]; span = langspanList[i]
span.innerHTML = langJson[span.id]["fr"]; span.innerHTML = langJson[span.id]["fr"]
} }
} }
...@@ -50,11 +50,11 @@ function interface(lang) { ...@@ -50,11 +50,11 @@ function interface(lang) {
function selectPanneau(p){ function selectPanneau(p){
console.log("selectPanneau",p,thisPageLang); console.log("selectPanneau",p,thisPageLang)
if (p=="default" && thisPageLang=="fr") { if (p=="default" && thisPageLang=="fr") {
p = "phonoFrDo"; p = "phonoFrDo"
} else if (p=="default" && thisPageLang=="en") { } else if (p=="default" && thisPageLang=="en") {
p = "phonoEnAlem"; p = "phonoEnAlem"
} }
var svgEnPronSciBr = document.getElementById('svgEnPronSciBr'); // Panneau EN PronSci var svgEnPronSciBr = document.getElementById('svgEnPronSciBr'); // Panneau EN PronSci
...@@ -65,43 +65,60 @@ function selectPanneau(p){ ...@@ -65,43 +65,60 @@ function selectPanneau(p){
var doCalques = document.getElementById('doCalques'); // boutons calques var doCalques = document.getElementById('doCalques'); // boutons calques
if (p == 'phonoFrDo') { if (p == 'phonoFrDo') {
svgEnAlem.style.display = 'none'; svgEnAlem.style.display = 'none'
pngCalqEnAlemLignes.style.display = 'none'; pngCalqEnAlemLignes.style.display = 'none'
pngPochoirEnAlem.style.display = 'none'; pngPochoirEnAlem.style.display = 'none'
svgClickEnAlem.style.display = 'none'; svgClickEnAlem.style.display = 'none'
doCalques.style.display = 'block'; doCalques.style.display = 'block'
} else if (p == 'phonoEnAlem') { } else if (p == 'phonoEnAlem') {
svgEnAlem.style.display = 'block'; svgEnAlem.style.display = 'block'
pngCalqEnAlemLignes.style.display = 'block'; pngCalqEnAlemLignes.style.display = 'block'
pngPochoirEnAlem.style.display = 'block'; pngPochoirEnAlem.style.display = 'block'
svgClickEnAlem.style.display = 'block'; svgClickEnAlem.style.display = 'block'
doCalques.style.display = 'none'; doCalques.style.display = 'none'
} }
} }
/// ACTIONS LORS DU CLIC SUR PHONEME /// ACTIONS LORS DU CLIC SUR PHONEME
function recupPhon(identifiant) { var cartes = [] // initialisation de la liste des cartes disponible (0 au début)
var rectId = identifiant;
var boucheId = rectId.replace("rect","bouche");
var repDiv = document.getElementById('rep'); function recupPhon(identifiant) {
var rectId = identifiant
var boucheId = rectId.replace("rect","bouche")
var repDiv = document.getElementById('rep')
var newCarte = document.createElement('div'); 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 newCarte.classList = "carte " + rectId;// on garde rectId, pour connaître le phonème mais sans appeler les styles de phonochromie-alem.css
newCarte.style.backgroundImage = "url('/static/bouches/"+ boucheId + ".jpg')"; newCarte.draggable = true
newCarte.style.backgroundImage = "url('/static/bouches/"+ boucheId + ".jpg')"
newCarte.addEventListener("click", function(e) { newCarte.addEventListener("click", function(e) {
var tgt = e.target; var tgt = e.target
playEffect("delete"); playEffect("delete")
tgt.remove(); tgt.remove()
saveTrace('del phon '+rectId); saveTrace('del phon '+rectId)
}); })
repDiv.appendChild(newCarte);
playEffect("select"); newCarte.addEventListener('dragstart', () => {
saveTrace('add phon '+rectId); newCarte.classList.add('dragging')
console.log('DRAGGING ', rectId)
})
newCarte.addEventListener('dragend', () => {
newCarte.classList.remove('dragging')
console.log('STOP DRAGGING ', rectId)
})
repDiv.appendChild(newCarte)
playEffect("select")
saveTrace('add phon '+rectId)
// Mise à jour de la table
cartes = document.querySelectorAll('.carte') // mise à jour de la liste des cartes sur la table
} }
...@@ -109,138 +126,134 @@ function recupPhon(identifiant) { ...@@ -109,138 +126,134 @@ function recupPhon(identifiant) {
////////////////////////////////////////////// //////////////////////////////////////////////
var nbmots; var nbmots;
var cptitem = 0; var cptitem = 0;
var currentAudio = ""; var currentAudio = ""
var rep = document.getElementById('rep');
var btnValider = document.getElementById("btnValider");
const rep = document.getElementById('rep')
var btnValider = document.getElementById("btnValider")
// LANCEMENT DE L'ACTIVITÉ PAR DEFAUT (TRANSMISE AVEC LE TEMPLATE cf. views.py) // LANCEMENT DE L'ACTIVITÉ PAR DEFAUT (TRANSMISE AVEC LE TEMPLATE cf. views.py)
nbmots = mots.length; nbmots = mots.length
document.getElementById('nbMots').innerHTML = nbmots; document.getElementById('nbMots').innerHTML = nbmots;
document.getElementById('fenetreDeLancement').style.display = "block"; document.getElementById('fenetreDeLancement').style.display = "block"
// Démarrage de la série // Démarrage de la série
function demarrer() { function demarrer() {
document.getElementById('fenetreDeLancement').style.display = "none"; document.getElementById('fenetreDeLancement').style.display = "none"
document.getElementById('divConsigne').style.display = "block"; document.getElementById('divConsigne').style.display = "block"
document.getElementById('divReponse').style.display = ""; document.getElementById('divReponse').style.display = ""
cptitem = 0; cptitem = 0
saveTrace('Démarrage série '+serieName); saveTrace('Démarrage série '+serieName)
loadNext() loadNext()
} }
// charge le mot suivant // charge le mot suivant
function loadNext() { function loadNext() {
document.getElementById("bravo").style.display = "none"; document.getElementById("bravo").style.display = "none"
if (cptitem < nbmots) { if (cptitem < nbmots) {
rep.innerHTML = ""; rep.innerHTML = ""
currentAudio = mots[cptitem]["audio"]; currentAudio = mots[cptitem]["audio"]
playAudio(); playAudio()
cptitem = cptitem+1; cptitem = cptitem+1
document.getElementById('cptitem').innerHTML = cptitem; document.getElementById('cptitem').innerHTML = cptitem
saveTrace("next '"+mots[cptitem-1]["motGenerique"]+"'"); saveTrace("next '"+mots[cptitem-1]["motGenerique"]+"'")
} else { } else {
getFelicitations(); getFelicitations()
playEffect("success"); playEffect("success")
saveTrace('fin série '+serieName); saveTrace('fin série '+serieName)
} }
} }
// vérifie la réponse // vérifie la réponse
function checkAnswer() { function checkAnswer() {
var mot = mots[cptitem-1]; var mot = mots[cptitem-1]
var phono = mot["phono"]; // cptitem-1 parce qu'on a déjà incrémenté cptitem lors de loadNext() var phono = mot["phono"] // cptitem-1 parce qu'on a déjà incrémenté cptitem lors de loadNext()
var erreur = false; var erreur = false
for (i=0; i<rep.children.length; i++) { for (i=0; i<rep.children.length; i++) {
var repphon = rep.children[i].classList[1].replace("rect","phon"); var repphon = rep.children[i].classList[1].replace("rect","phon")
if (repphon != phono[i]) { if (repphon != phono[i]) {
erreur = true; erreur = true
console.log("ERREUR",repphon,phono[i]); console.log("ERREUR",repphon,phono[i])
playEffect('wrong'); playEffect('wrong')
rep.children[i].classList.add("wrongPhon"); rep.children[i].classList.add("wrongPhon")
saveTrace('erreur '+repphon,phono[i]); saveTrace('erreur '+repphon,phono[i])
} }
} }
if (rep.children.length != phono.length) { if (rep.children.length != phono.length) {
erreur = true; erreur = true
console.log("ERREUR nb phonèmes"); console.log("ERREUR nb phonèmes")
playEffect('wrong'); playEffect('wrong')
saveTrace('erreur nb phon ', rep.children.length, phono.length); saveTrace('erreur nb phon ', rep.children.length, phono.length)
} }
if (!erreur) { if (!erreur) {
playEffect("correct"); playEffect("correct")
getBravo(mot); getBravo(mot)
saveTrace('correct'); saveTrace('correct')
} }
} }
// AFFICHAGE BRAVO // AFFICHAGE BRAVO
function getBravo(mot) { function getBravo(mot) {
var bravoDiv = document.getElementById("bravo"); var bravoDiv = document.getElementById("bravo")
document.getElementById("bravo_text").innerHTML = ""; document.getElementById("bravo_text").innerHTML = ""
if (images=='1'){ if (images=='1'){
// document.getElementById("bravo_img").src = "/static/im/series/" + mot["image"]["src"]; // document.getElementById("bravo_img").src = "/static/im/series/" + mot["image"]["src"]
document.getElementById("bravo_img").src = "../../media/image-uploads/" + mot["image"]["src"]; document.getElementById("bravo_img").src = "../../media/image-uploads/" + mot["image"]["src"]
} else { } else {
document.getElementById("bravo_img").src = "/static/im/series/bravo.png"; document.getElementById("bravo_img").src = "/static/im/series/bravo.png"
} }
if (phono=='1'){ if (phono=='1'){
var phonographie = mot["phonographies"][0]; var phonographie = mot["phonographies"][0]
for (i=0; i<phonographie.length; i++){ for (i=0; i<phonographie.length; i++){
document.getElementById("bravo_text").innerHTML += "<span class='graphContours "+ phonographie[i][0] +"'>"+ phonographie[i][1] +"</span>"; document.getElementById("bravo_text").innerHTML += "<span class='graphContours "+ phonographie[i][0] +"'>"+ phonographie[i][1] +"</span>"
} }
} else { } else {
document.getElementById("bravo_text").innerHTML = "Bravo !" document.getElementById("bravo_text").innerHTML = "Bravo !"
} }
bravoDiv.style.display = "block"
bravoDiv.style.display = "block";
} }
// AFFICHAGE FÉLICITATIONS (fin) // AFFICHAGE FÉLICITATIONS (fin)
function getFelicitations() { function getFelicitations() {
var bravoDiv = document.getElementById("bravo"); var bravoDiv = document.getElementById("bravo")
document.getElementById("bravo_text").innerHTML = ""; document.getElementById("bravo_text").innerHTML = ""
document.getElementById("bravo_img").src = "/static/im/series/felicitations.png"; document.getElementById("bravo_img").src = "/static/im/series/felicitations.png"
document.getElementById("bravo_text").innerHTML = "Félicitations !" document.getElementById("bravo_text").innerHTML = "Félicitations !"
document.getElementById("bravo_next").style.display = "none"; document.getElementById("bravo_next").style.display = "none"
document.getElementById("bravo_quit").style.display = "block"; document.getElementById("bravo_quit").style.display = "block"
bravoDiv.style.display = "block"; bravoDiv.style.display = "block"
} }
// SOUNDS // SOUNDS
function playAudio() { function playAudio() {
var audio = new Audio("../../media/audio-uploads/"+currentAudio); var audio = new Audio("../../media/audio-uploads/"+currentAudio)
audio.play(); audio.play()
} }
function playEffect(effect) { function playEffect(effect) {
var audio; var audio
if (effect == "select") audio = new Audio("/static/audio/effets/select.mp3"); if (effect == "select") audio = new Audio("/static/audio/effets/select.mp3")
else if (effect == "delete") audio = new Audio("/static/audio/effets/del.mp3"); else if (effect == "delete") audio = new Audio("/static/audio/effets/del.mp3")
else if (effect == "success") audio = new Audio("/static/audio/effets/success.mp3"); else if (effect == "success") audio = new Audio("/static/audio/effets/success.mp3")
else if (effect == "correct") audio = new Audio("/static/audio/effets/correctAnswer.mp3"); else if (effect == "correct") audio = new Audio("/static/audio/effets/correctAnswer.mp3")
else if (effect == "wrong") audio = new Audio("/static/audio/effets/wrongAnswer.mp3"); else if (effect == "wrong") audio = new Audio("/static/audio/effets/wrongAnswer.mp3")
audio.play(); audio.play()
} }
// ENREGISTREMENT TRACES // ENREGISTREMENT TRACES
async function saveTrace(action) { async function saveTrace(action) {
if (userName) { if (userName) {
console.log("ENREGISTREMENT ", action); console.log("ENREGISTREMENT ", action)
// ON EMBALLE TOUT ÇA // ON EMBALLE TOUT ÇA
var colis = { var colis = {
appli: "phonoplayer", appli: "phonoplayer",
...@@ -253,10 +266,10 @@ async function saveTrace(action) { ...@@ -253,10 +266,10 @@ async function saveTrace(action) {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
body: JSON.stringify(colis) body: JSON.stringify(colis)
}; }
// ENVOI // ENVOI
const response = await fetch('/_saveTrace/', options); //'http://127.0.0.1:9000/getPhonoOf/', options); // const response = await fetch('/_saveTrace/', options); //'http://127.0.0.1:9000/getPhonoOf/', options); //
// const data = await response.json(); // const data = await response.json()
// console.log(data); // console.log(data)
} }
} }
\ No newline at end of file
...@@ -153,6 +153,11 @@ ...@@ -153,6 +153,11 @@
margin: 2px; margin: 2px;
} }
.dragging {
opacity: .3;
/* border: gray dashed 5px; */
}
.wrongPhon { .wrongPhon {
border: solid 4px red; border: solid 4px red;
} }
......
...@@ -125,4 +125,5 @@ ...@@ -125,4 +125,5 @@
<script type="text/javascript" src="{% static 'js/clavierCalques.js' %}"></script> <script type="text/javascript" src="{% static 'js/clavierCalques.js' %}"></script>
<script type="text/javascript" src="{% static 'js/popupAide.js' %}"></script> <script type="text/javascript" src="{% static 'js/popupAide.js' %}"></script>
<script type="text/javascript" src="{% static 'js/playerPhono.js' %}"></script> <script type="text/javascript" src="{% static 'js/playerPhono.js' %}"></script>
<script type="text/javascript" src="{% static 'js/dragdrop.js' %}"></script>
{% endblock javascript %} {% endblock javascript %}
\ No newline at end of file
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