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");
function selectLang(lang, p="default", f="default"){
console.log('SelectLang()',lang);
var phonolist = document.getElementById('selectPanneau');
phonolist.innerHTML = '';
console.log('SelectLang()',lang)
var phonolist = document.getElementById('selectPanneau')
phonolist.innerHTML = ''
if (lang=="fr"){
var phonoFrDo = document.createElement('option');
phonoFrDo.value = "phonoFrDo";
phonoFrDo.innerHTML = "Panneaux Fr A. Do";
phonolist.appendChild(phonoFrDo);
var phonoFrDo = document.createElement('option')
phonoFrDo.value = "phonoFrDo"
phonoFrDo.innerHTML = "Panneaux Fr A. Do"
phonolist.appendChild(phonoFrDo)
interface("fr");
interface("fr")
} else if (lang=="en"){
var phonoEnAlem = document.createElement('option');
phonoEnAlem.value = "phonoEnAlem";
phonoEnAlem.innerHTML = "ALeM British";
phonolist.appendChild(phonoEnAlem);
var phonoEnAlem = document.createElement('option')
phonoEnAlem.value = "phonoEnAlem"
phonoEnAlem.innerHTML = "ALeM British"
phonolist.appendChild(phonoEnAlem)
// var phonoEnPronSciBr = document.createElement('option');
// phonoEnPronSciBr.value = "phonoEnPronSciBr";
// phonoEnPronSciBr.innerHTML = "PronSci British";
// phonolist.appendChild(phonoEnPronSciBr);
// var phonoEnPronSciBr = document.createElement('option')
// phonoEnPronSciBr.value = "phonoEnPronSciBr"
// phonoEnPronSciBr.innerHTML = "PronSci British"
// phonolist.appendChild(phonoEnPronSciBr)
interface("en");
interface("en")
}
selectPanneau(p);
selectPanneau(p)
}
interface("fr");
function interface(lang) {
console.log("Langue d'interface:",lang);
thisPageLang = lang;
var langspanList = document.getElementsByClassName("langspan");
console.log("Langue d'interface:",lang)
thisPageLang = lang
var langspanList = document.getElementsByClassName("langspan")
if (lang == "en") {
for (i=0; i<langspanList.length; i++) {
span = langspanList[i];
span.innerHTML = langJson[span.id]["en"];
span = langspanList[i]
span.innerHTML = langJson[span.id]["en"]
}
} else { // "fr" par défaut
for (i=0; i<langspanList.length; i++) {
span = langspanList[i];
span.innerHTML = langJson[span.id]["fr"];
span = langspanList[i]
span.innerHTML = langJson[span.id]["fr"]
}
}
......@@ -50,11 +50,11 @@ function interface(lang) {
function selectPanneau(p){
console.log("selectPanneau",p,thisPageLang);
console.log("selectPanneau",p,thisPageLang)
if (p=="default" && thisPageLang=="fr") {
p = "phonoFrDo";
p = "phonoFrDo"
} else if (p=="default" && thisPageLang=="en") {
p = "phonoEnAlem";
p = "phonoEnAlem"
}
var svgEnPronSciBr = document.getElementById('svgEnPronSciBr'); // Panneau EN PronSci
......@@ -65,43 +65,60 @@ function selectPanneau(p){
var doCalques = document.getElementById('doCalques'); // boutons calques
if (p == 'phonoFrDo') {
svgEnAlem.style.display = 'none';
pngCalqEnAlemLignes.style.display = 'none';
pngPochoirEnAlem.style.display = 'none';
svgClickEnAlem.style.display = 'none';
svgEnAlem.style.display = 'none'
pngCalqEnAlemLignes.style.display = 'none'
pngPochoirEnAlem.style.display = 'none'
svgClickEnAlem.style.display = 'none'
doCalques.style.display = 'block';
doCalques.style.display = 'block'
} else if (p == 'phonoEnAlem') {
svgEnAlem.style.display = 'block';
pngCalqEnAlemLignes.style.display = 'block';
pngPochoirEnAlem.style.display = 'block';
svgClickEnAlem.style.display = 'block';
svgEnAlem.style.display = 'block'
pngCalqEnAlemLignes.style.display = 'block'
pngPochoirEnAlem.style.display = 'block'
svgClickEnAlem.style.display = 'block'
doCalques.style.display = 'none';
doCalques.style.display = 'none'
}
}
/// ACTIONS LORS DU CLIC SUR PHONEME
function recupPhon(identifiant) {
var rectId = identifiant;
var boucheId = rectId.replace("rect","bouche");
var cartes = [] // initialisation de la liste des cartes disponible (0 au début)
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.style.backgroundImage = "url('/static/bouches/"+ boucheId + ".jpg')";
newCarte.draggable = true
newCarte.style.backgroundImage = "url('/static/bouches/"+ boucheId + ".jpg')"
newCarte.addEventListener("click", function(e) {
var tgt = e.target;
playEffect("delete");
tgt.remove();
saveTrace('del phon '+rectId);
});
repDiv.appendChild(newCarte);
playEffect("select");
saveTrace('add phon '+rectId);
var tgt = e.target
playEffect("delete")
tgt.remove()
saveTrace('del phon '+rectId)
})
newCarte.addEventListener('dragstart', () => {
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) {
//////////////////////////////////////////////
var nbmots;
var cptitem = 0;
var currentAudio = "";
var rep = document.getElementById('rep');
var btnValider = document.getElementById("btnValider");
var currentAudio = ""
const rep = document.getElementById('rep')
var btnValider = document.getElementById("btnValider")
// 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('fenetreDeLancement').style.display = "block";
document.getElementById('fenetreDeLancement').style.display = "block"
// Démarrage de la série
function demarrer() {
document.getElementById('fenetreDeLancement').style.display = "none";
document.getElementById('divConsigne').style.display = "block";
document.getElementById('divReponse').style.display = "";
cptitem = 0;
saveTrace('Démarrage série '+serieName);
document.getElementById('fenetreDeLancement').style.display = "none"
document.getElementById('divConsigne').style.display = "block"
document.getElementById('divReponse').style.display = ""
cptitem = 0
saveTrace('Démarrage série '+serieName)
loadNext()
}
// charge le mot suivant
function loadNext() {
document.getElementById("bravo").style.display = "none";
document.getElementById("bravo").style.display = "none"
if (cptitem < nbmots) {
rep.innerHTML = "";
currentAudio = mots[cptitem]["audio"];
playAudio();
cptitem = cptitem+1;
document.getElementById('cptitem').innerHTML = cptitem;
saveTrace("next '"+mots[cptitem-1]["motGenerique"]+"'");
rep.innerHTML = ""
currentAudio = mots[cptitem]["audio"]
playAudio()
cptitem = cptitem+1
document.getElementById('cptitem').innerHTML = cptitem
saveTrace("next '"+mots[cptitem-1]["motGenerique"]+"'")
} else {
getFelicitations();
playEffect("success");
saveTrace('fin série '+serieName);
}
getFelicitations()
playEffect("success")
saveTrace('fin série '+serieName)
}
}
// vérifie la réponse
function checkAnswer() {
var mot = mots[cptitem-1];
var phono = mot["phono"]; // cptitem-1 parce qu'on a déjà incrémenté cptitem lors de loadNext()
var erreur = false;
var mot = mots[cptitem-1]
var phono = mot["phono"] // cptitem-1 parce qu'on a déjà incrémenté cptitem lors de loadNext()
var erreur = false
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]) {
erreur = true;
console.log("ERREUR",repphon,phono[i]);
playEffect('wrong');
rep.children[i].classList.add("wrongPhon");
saveTrace('erreur '+repphon,phono[i]);
erreur = true
console.log("ERREUR",repphon,phono[i])
playEffect('wrong')
rep.children[i].classList.add("wrongPhon")
saveTrace('erreur '+repphon,phono[i])
}
}
if (rep.children.length != phono.length) {
erreur = true;
console.log("ERREUR nb phonèmes");
playEffect('wrong');
saveTrace('erreur nb phon ', rep.children.length, phono.length);
erreur = true
console.log("ERREUR nb phonèmes")
playEffect('wrong')
saveTrace('erreur nb phon ', rep.children.length, phono.length)
}
if (!erreur) {
playEffect("correct");
getBravo(mot);
saveTrace('correct');
playEffect("correct")
getBravo(mot)
saveTrace('correct')
}
}
// AFFICHAGE BRAVO
function getBravo(mot) {
var bravoDiv = document.getElementById("bravo");
document.getElementById("bravo_text").innerHTML = "";
var bravoDiv = document.getElementById("bravo")
document.getElementById("bravo_text").innerHTML = ""
if (images=='1'){
// 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 = "/static/im/series/" + mot["image"]["src"]
document.getElementById("bravo_img").src = "../../media/image-uploads/" + mot["image"]["src"]
} else {
document.getElementById("bravo_img").src = "/static/im/series/bravo.png";
document.getElementById("bravo_img").src = "/static/im/series/bravo.png"
}
if (phono=='1'){
var phonographie = mot["phonographies"][0];
var phonographie = mot["phonographies"][0]
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 {
document.getElementById("bravo_text").innerHTML = "Bravo !"
}
bravoDiv.style.display = "block";
bravoDiv.style.display = "block"
}
// AFFICHAGE FÉLICITATIONS (fin)
function getFelicitations() {
var bravoDiv = document.getElementById("bravo");
document.getElementById("bravo_text").innerHTML = "";
var bravoDiv = document.getElementById("bravo")
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_next").style.display = "none";
document.getElementById("bravo_quit").style.display = "block";
document.getElementById("bravo_next").style.display = "none"
document.getElementById("bravo_quit").style.display = "block"
bravoDiv.style.display = "block";
bravoDiv.style.display = "block"
}
// SOUNDS
function playAudio() {
var audio = new Audio("../../media/audio-uploads/"+currentAudio);
audio.play();
var audio = new Audio("../../media/audio-uploads/"+currentAudio)
audio.play()
}
function playEffect(effect) {
var audio;
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 == "success") audio = new Audio("/static/audio/effets/success.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");
audio.play();
var audio
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 == "success") audio = new Audio("/static/audio/effets/success.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")
audio.play()
}
// ENREGISTREMENT TRACES
async function saveTrace(action) {
if (userName) {
console.log("ENREGISTREMENT ", action);
console.log("ENREGISTREMENT ", action)
// ON EMBALLE TOUT ÇA
var colis = {
appli: "phonoplayer",
......@@ -253,10 +266,10 @@ async function saveTrace(action) {
'Content-Type': 'application/json',
},
body: JSON.stringify(colis)
};
}
// ENVOI
const response = await fetch('/_saveTrace/', options); //'http://127.0.0.1:9000/getPhonoOf/', options); //
// const data = await response.json();
// console.log(data);
// const data = await response.json()
// console.log(data)
}
}
\ No newline at end of file
......@@ -153,6 +153,11 @@
margin: 2px;
}
.dragging {
opacity: .3;
/* border: gray dashed 5px; */
}
.wrongPhon {
border: solid 4px red;
}
......
......@@ -125,4 +125,5 @@
<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/playerPhono.js' %}"></script>
<script type="text/javascript" src="{% static 'js/dragdrop.js' %}"></script>
{% endblock javascript %}
\ No newline at end of file
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