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

proto switchstress en cours + panneau phono mandarin Aurélie

parent a137a990
......@@ -8,6 +8,7 @@ import tempfile
### Chargement de la base de données
dbFile = '../db/db_phonographe.json'
dbActivitiesFile = '../db/db_activites_phonographe.json'
dbActivitiesSwitchStressFile = '../db/db_activites_switchstress.json'
dbPhonographe = {}
dbActivities = {}
......@@ -17,7 +18,11 @@ print('La base de données contient',len(dbPhonographe),'entrées.')
with open(dbActivitiesFile, "r") as f:
dbActivities = json.load(f)
print('Il y a',len(dbPhonographe),'activités enregistrées.')
print('Il y a',len(dbActivities),'activités de pointage phonologique enregistrées.')
with open(dbActivitiesSwitchStressFile, "r") as f:
dbActivitiesSwitchStress = json.load(f)
print('Il y a',len(dbActivitiesSwitchStress),'activités SwitchStress enregistrées.')
with open('static/json/fidel_do.json') as json_data:
fidelDo = json.load(json_data)
......@@ -109,4 +114,12 @@ def openPlayerPhono(request):
def getActivity(request):
activity = dbActivities["serie0"]
return JsonResponse(activity)
def openSwitchStress(request):
updateTimeStr = updateTime()
return render(request, 'playerSwitchStress.html', {'updateTime': updateTimeStr})
def getActivitySwitchStress(request):
activity = dbActivitiesSwitchStress["serie0"]
return JsonResponse(activity)
\ No newline at end of file
......@@ -15,7 +15,7 @@ Including another URLconf
"""
from django.contrib import admin
from django.urls import path
from clavier.views import newPage, save2db, loadPage, getPageContent, openPlayerPhono, getActivity
from clavier.views import newPage, save2db, loadPage, getPageContent, openPlayerPhono, getActivity, openSwitchStress, getActivitySwitchStress
from django.views.decorators.csrf import csrf_exempt
urlpatterns = [
......@@ -28,5 +28,7 @@ urlpatterns = [
path('<str:pageLang>/id-<str:pageId>/', loadPage),
path('export/', csrf_exempt(save2db)),
path('player/', openPlayerPhono),
path('getActivity/', csrf_exempt(getActivity))
path('getActivity/', csrf_exempt(getActivity)),
path('switchstress/', openSwitchStress),
path('getActivitySwitchStress/', csrf_exempt(getActivitySwitchStress))
]
......@@ -148,6 +148,7 @@ function demarrer() {
document.getElementById('fenetreDeLancement').style.display = "none";
document.getElementById('divConsigne').style.display = "block";
document.getElementById('divReponse').style.display = "block";
cptitem = 0;
loadNext()
}
......
interface("en");
function interface(lang) {
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"];
}
} else { // "fr" par défaut
for (i=0; i<langspanList.length; i++) {
span = langspanList[i];
span.innerHTML = langJson[span.id]["fr"];
}
}
}
////////// CHARGEMENT DE L'ACTIVITÉ /////////////
//////////////////////////////////////////////
var nbmots;
var cptitem = 0;
var mots;
var currentAudio = "";
var rep = document.getElementById('rep');
var btnValider = document.getElementById("btnValider");
getActivity();
async function getActivity() {
// PRÉPARATION DU COLIS
var colis = {};
//console.log(colis);
// Paramètres d'envoi
const options = {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(colis)
};
// REQUÊTAGE SERVEUR
const response = await fetch('/getActivitySwitchStress/', options)
const data = await response.json();
console.log(data);
// LANCEMENT DE L'ACTIVITÉ
nbmots = data["mots"].length;
mots = data["mots"];
document.getElementById('nomSerie').innerHTML = data["nom"];
document.getElementById('nbMots').innerHTML = nbmots;
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 = "block";
cptitem = 0;
loadNext()
}
// charge le mot suivant
function loadNext() {
document.getElementById("bravo").style.display = "none";
if (cptitem < nbmots) {
var w = "";
for (i=0; i<mots[cptitem]["phonoPossibles"][0].length; i++) {
var id = "id"+i;
var phon = mots[cptitem]["phonoPossibles"][0][i][0].match(/.*(phon_\w+).*/)[1];
w = w + "<span id='"+id+"' onclick='switchstress(this.id)' class='switchable " + phon +"'>" + mots[cptitem]["phonoPossibles"][0][i][1] + "</span>";
}
console.log("Mot à afficher:",w);
rep.innerHTML = w;
currentAudio = '/static/audio/switchstress/s0/'+mots[cptitem]["audio"];
playAudio();
cptitem = cptitem+1;
document.getElementById('cptitem').innerHTML = cptitem;
} else {
rep.innerHTML = "<h1>Félicitations !</h1>";
playEffect("success");
}
}
// vérifie la réponse
function checkAnswer() {
var phono = mots[cptitem-1]["phonoPossibles"][0]; // cptitem-1 parce qu'on a déjà incrémenté cptitem lors de loadNext()
var erreur = false;
console.log("PHONO:",phono);
if (erreur) {
playEffect("wrong");
} else {
playEffect("correct");
document.getElementById("bravo").style.display = "block";
}
}
// SOUNDS
function playAudio() {
var audio = new Audio(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();
}
////////
function switchstress(identifiant) {;
if (document.getElementById(identifiant).classList.contains('stress1')) { // passe à stress2
document.getElementById(identifiant).classList.remove('stress1');
document.getElementById(identifiant).classList.add('stress2');
} else if (document.getElementById(identifiant).classList.contains('stress2')) { // passe à normal (pas de stress)
document.getElementById(identifiant).classList.remove('stress2');
} else {
document.getElementById(identifiant).classList.add('stress1'); // passe à stress1
}
}
\ No newline at end of file
......@@ -448,6 +448,12 @@ footer {
min-width: 500px;
border: solid 0px gray;
border-radius: 5px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.carte {
......@@ -501,4 +507,14 @@ footer {
#bravo button {
margin-top:20px;
border-radius: 5px;
}
/* .switchable {
border: 1px transparent solid;
border-radius: 3px;
} */
.switchable:hover {
border: 1px lightgrey solid;
border-radius: 3px;
}
\ No newline at end of file
This diff is collapsed.
......@@ -60,11 +60,11 @@
<center>
<div class="playerClavierPhono">
<div class="playerClavier" id="clavier">
<!-- BOUTONS + - -->
<!-- BOUTONS + - INACTIFS DANS LE PLAYER
<div class="control-clavier">
<img src="../static/png/moins.png" id="btn-min" title="réduire le clavier"/>
<img src="../static/png/plus.png" id="btn-max" title="agrandir le clavier"/>
</div>
</div> -->
<!-- FR Claviers A. DO -->
<embed id="svgFond" src="../static/svg/00.svg" class="superposeBack">
......
{% load static %}
<!DOCTYPE html>
<html lang="fr">
<head>
<title>PhonoGraphe</title>
<link rel="shortcut icon" type="image/png" href="{% static 'phonographe.ico' %}"/>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="{% static 'styles/phonochromie_alem_v3.css'%}">
<link rel="stylesheet" type="text/css" href="{% static 'styles/clavier.css'%}">
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
</head>
<body>
<div class="preprod" style="display: none;">PREPROD</div>
<div class="playerHeader">
<img src="{% static 'im/logo_phonographe3.png' %}">
<div>
Prototype activity for stress identification
</div>
</div>
<div class="fenetre divPlayerConsigneReponse">
<div class="headerConsigne">
<div><span id="nomSerie"></span></div>
<div><span id="cptitem">0</span>/<span id="nbMots"></span></div>
</div>
<div id="fenetreDeLancement" style="display: none;">
<button type="button" class="btn btn-default btn-lg" onclick="demarrer()">Start!</button>
</div>
<div id="divConsigne" style="display: none;">
<p>Indicate primary and secondary stress by clicking on vowels.</p>
<button onclick="playAudio()" id="btnAudio" type="button" class="btn btn-default btn-lg">
<span class="glyphicon glyphicon-volume-up" aria-hidden="true"></span>
</button>
</div>
<div id="divReponse" style="display: none;">
<div class="fenetre textSide textZone">
<div id="rep" style="text-align: center;"></div>
</div>
<button onclick="checkAnswer()" id="btnValider">Validate</button>
</div>
</div>
<center>
<div id="bravo" style="display: none;">
<p>Well done!</p>
<button onclick="loadNext()" type="button" class="btn btn-default btn-md">Continue</button>
</div>
</center>
{% include 'footer.html' %}
<script type="text/javascript" src="{% static 'languages/languages.js' %}"></script>
<script type="text/javascript" src="{% static 'js/id2class.js' %}"></script>
<script type="text/javascript" src="{% static 'js/playerSwitchStress.js' %}"></script>
</html>
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