playerPhono.html 7.05 KB
Newer Older
Sylvain Coulange's avatar
Sylvain Coulange committed
1
{% extends "base.html" %}
2
{% load static %}
Sylvain Coulange's avatar
Sylvain Coulange committed
3
{% block content %}
4
5
6

    <!-- RÉCUPÉRATION DE LA SÉRIE À CHARGER -->
    <script type="text/javascript">
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
        var serieId = JSON.parse("{{ serieContent.id | escapejs }}");
        var serieName = "{{ serieContent.nom }}";
        var mots = JSON.parse("{{ serieContent.mots | escapejs }}");
        var images = JSON.parse("{{ serieContent.images | escapejs }}");
        var phono = JSON.parse("{{ serieContent.phono | escapejs }}");
        console.log("mots:",mots);
        console.log("images:",images);
        console.log("phono:",phono);

        var userName = "{{ user.username }}";
        if (userName) {
            console.log('Logged as ', userName);
        } else {
            console.log('Anonymous');
        }
22
23
24
    </script>
    <!---------------------------------------->

25
26
    <div class="preprod" style="display: none;">PREPROD</div> 

27
    <div class="mainContent">
28

29
        <div style="width:90%;text-align: left;">
30
            <a href="/player/"><button type="button" class="btn btn-outline-secondary">< Retour</button></a>
31
32
        </div>

33
34
        <div class="fenetre divPlayerConsigneReponse">
            <div class="headerConsigne">
Sylvain Coulange's avatar
Sylvain Coulange committed
35
                <div>Série : {{ serieContent.nom }}</div>
36
37
38
                <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>
39

40
            <div id="fenetreDeLancement" style="display: none;">
41
                <button type="button" class="btn btn-outline-success btn-lg" onclick="demarrer()">Démarrer !</button>
42
            </div>
43

44
45
            <div class="divReponse" id="divReponse" style="display: none;">
                <div class="divReponseGauche">
46
47
48
49
50
51
                    <button onclick="playAudio()" id="btnAudio" 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" 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>
52
53
54
55
56
57
                    </button>
                </div>
                <div class="divReponseMilieu">
                    <div id="rep"></div>
                </div>
                <div class="divReponseDroit">
58
                    <button type="button" class="btn btn-success btn-lg" onclick="checkAnswer()" id="btnValider">Valider</button>
59
60
                </div>          
            </div>
61
62
        </div>

63
64
        <center>
        <div id="bravo" style="display: none;">
65
66
            <img id="bravo_img" src="" width="80%">
            <div id="bravo_text"></div>
67
68
            <button id="bravo_next" onclick="loadNext()" type="button" class="btn btn-success btn-lg">Continuer</button>
            <a href="/player/"><button id="bravo_quit" style="display:none" type="button" class="btn btn-primary btn-lg">Quitter</button></a>
69
70
71
72
73
74
        </div>
        </center>
        
        <center>
        <div class="playerClavierPhono">
            <div class="playerClavier" id="clavier">
75
76
                <!-- BOUTONS + - INACTIFS DANS LE PLAYER -->
                <div class="control-clavier" style="display: none;">
Sylvain Coulange's avatar
Sylvain Coulange committed
77
78
                    <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"/>
79
                </div>
80

81
                <!-- FR Claviers A. DO  -->
Sylvain Coulange's avatar
Sylvain Coulange committed
82
                <embed id="svgFond" src="{% static 'svg/00.svg' %}" class="superposeBack">
83
84
                <img id="pngPochoir" class="superpose">
                <img id="pngCalq" class="superpose">
Sylvain Coulange's avatar
Sylvain Coulange committed
85
                <embed id="svgClick" src="{% static 'svg/00-click.svg' %}" class="superpose">
86
87
88
89
                <img src="" class="popUpProfile" id="popDiv"/>
                <div class="doAide" style="right:0px">
                    <span id="aidbtn" onclick="toggleAides()" class="glyphicon glyphicon-question-sign" aria-hidden="true" title="Afficher/masquer les popups d'aide"></span>
                </div>
90

91
                <!-- EN Clavier PronSci UK -->
Sylvain Coulange's avatar
Sylvain Coulange committed
92
                <embed id="svgEnPronSciBr" style="display: none;" src="{% static 'svg/en_pronsci-br.svg' %}" class="superpose">
93

94
                <!-- EN Clavier ALeM -->
Sylvain Coulange's avatar
Sylvain Coulange committed
95
96
97
98
                <embed id="svgEnAlem" style="display: none;" src="{% static 'svg/alem-en.svg' %}" class="superpose">
                <img id="pngPochoirEnAlem" style="display: none;" src="{% static 'png/pochoir-en.png' %}" class="superpose">
                <img id="pngCalqEnAlemLignes" style="display: none;" src="{% static 'png/pochoir-en-lignes.png' %}" class="superpose">
                <embed id="svgClickEnAlem" style="display: none;" src="{% static 'svg/alem-en_click.svg' %}" class="superpose">
99

100
101
                
            </div>
102
        </div>
103
        </center>
104

105
106
107
108
109
110
        <div class="zoneParam">
            <div class="left">
                <div class="fenetre param">
                    <select id="selectPanneau" onchange="selectPanneau(this.value)"></select>
                </div>
                <div id="doCalques" class="doCalques">
Sylvain Coulange's avatar
Sylvain Coulange committed
111
112
113
114
                    <input type="image" class="btn-calq" src="{% static 'png/btn_rien.png' %}" title="Panneau vierge" id="btn-rien" />
                    <input type="image" class="btn-calq" src="{% static 'png/btn_vsm.png' %}" title="Voisements et position langue" id="btn-vsm" />
                    <input type="image" class="btn-calq btnfocus" src="{% static 'png/btn_bch.png' %}" title="Formes de bouche" id="btn-bch" />
                    <input type="image" class="btn-calq" src="{% static 'png/btn_cpsg.png' %}" title="Coupes sagitales" id="btn-cpsg" />
115
                </div>
116
117
118
            </div>
        </div>
    </div>
119
{% endblock content %}
120

121
{% block javascript %}
122
123
124
    <script type="text/javascript" src="{% static 'js/id2class.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/interface_basic.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/interface.js' %}"></script>
125
126
127
    <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>
128
    <script type="text/javascript" src="{% static 'js/dragdrop.js' %}"></script>
129
{% endblock javascript %}