Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Pédagogies Multimodales
PhonoDrop
Commits
0c9f175c
Commit
0c9f175c
authored
Apr 28, 2021
by
Sylvain Coulange
🌼
Browse files
ajout mandarin git add . yeeeehaaaa
parent
7e899aca
Changes
12
Hide whitespace changes
Inline
Side-by-side
public/index.html
View file @
0c9f175c
...
...
@@ -196,19 +196,32 @@
<img
id=
"pngCalqEnAlemLignes"
style=
"display: none;"
src=
"png/pochoir-en-lignes.png"
class=
"superpose"
>
<embed
id=
"svgClickEnAlem"
style=
"display: none;"
src=
"svg/alem-en_click.svg"
class=
"superpose"
>
<!-- ZH Clavier Lyssenko -->
<embed
id=
"svgZhLy"
style=
"display: none;"
src=
"svg/mandarin_Lyssenko_Aster.svg"
class=
"superposeBack"
>
<!-- ZH Clavier A. Mariscalchi -->
<embed
id=
"svgZhMa"
style=
"display: none;"
src=
"svg/mandarin_Aurelie.svg"
class=
"superposeBack"
>
<!-- ZH Clavier S. Jiao -->
<embed
id=
"svgZhJi"
style=
"display: none;"
src=
"svg/mandarin_modele9.3_Shuman.svg"
class=
"superposeBack"
>
<!-- BOUTONS + - -->
<div
class=
"control-clavier"
>
<img
src=
"png/moins.png"
onclick=
"rapetisserPanneau()"
class=
"langtitle"
id=
"ti_minClav"
/>
<img
src=
"png/plus.png"
onclick=
"agrandirPanneau()"
class=
"langtitle"
id=
"ti_maxClav"
/>
</div>
<div
class=
"choixPanneau"
>
<div
class=
"choixPanneau
mt-2
"
>
<select
id=
"selectPanneau"
onchange=
"selectPanneau(this.value)"
class=
"langtitle"
>
<option
value=
"phonoFrDo"
>
Panneaux Fr A. Do
</option>
<option
value=
"svgFrKinephones"
>
Panneau Fr Kinéphones
</option>
<option
value=
"svgFrGattegno"
>
Panneau Fr Gattegno
</option>
<option
value=
"phonoEnAlem"
>
Panneau En ALEM British
</option>
<option
value=
"phonoEnPronSciBr"
>
Panneau En PronSci British
</option>
<option
value=
"phonoZhLy"
>
Panneau Zh Lyssenko
</option>
<option
value=
"phonoZhMa"
>
Panneau Zh Mariscalchi
</option>
<option
value=
"phonoZhJi"
>
Panneau Zh Jiao
</option>
</select>
<div
id=
"doCalques"
class=
"doCalques mt-2"
>
<input
type=
"image"
class=
"btn-calq"
src=
"png/btn_rien.png"
title=
"Panneau vierge"
id=
"btn-rien"
/>
...
...
@@ -222,10 +235,11 @@
<div
id=
"graphies"
class=
"graphies"
>
<nav
class=
"navOptions"
>
<div
class=
"d-flex nav nav-tabs"
id=
"nav-tab"
role=
"tablist"
>
<button
class=
"nav-link"
id=
"nav-ponctuation-tab"
data-bs-toggle=
"tab"
data-bs-target=
"#nav-ponctuation"
type=
"button"
role=
"tab"
aria-controls=
"nav-ponctuation"
aria-selected=
"
tru
e"
>
Ponctuation
</button>
<button
class=
"nav-link"
id=
"nav-ponctuation-tab"
data-bs-toggle=
"tab"
data-bs-target=
"#nav-ponctuation"
type=
"button"
role=
"tab"
aria-controls=
"nav-ponctuation"
aria-selected=
"
fals
e"
>
Ponctuation
</button>
<button
class=
"nav-link"
id=
"nav-grammaire-tab"
data-bs-toggle=
"tab"
data-bs-target=
"#nav-grammaire"
type=
"button"
role=
"tab"
aria-controls=
"nav-grammaire"
aria-selected=
"false"
>
Réglettes
</button>
<button
class=
"nav-link"
id=
"nav-parametres-tab"
data-bs-toggle=
"tab"
data-bs-target=
"#nav-parametres"
type=
"button"
role=
"tab"
aria-controls=
"nav-parametres"
aria-selected=
"false"
>
Paramètres
</button>
<button
class=
"nav-link ms-auto active"
id=
"nav-aide-tab"
data-bs-toggle=
"tab"
data-bs-target=
"#nav-aide"
type=
"button"
role=
"tab"
aria-controls=
"nav-aide"
aria-selected=
"false"
>
Aide
</button>
<button
class=
"nav-link ms-auto"
style=
"display:none"
id=
"nav-zi-tab"
data-bs-toggle=
"tab"
data-bs-target=
"#nav-zi"
type=
"button"
role=
"tab"
aria-controls=
"nav-zi"
aria-selected=
"false"
><span
style=
"font-size: large"
>
▣
</span></button>
<button
class=
"nav-link ms-auto active"
id=
"nav-aide-tab"
data-bs-toggle=
"tab"
data-bs-target=
"#nav-aide"
type=
"button"
role=
"tab"
aria-controls=
"nav-aide"
aria-selected=
"true"
>
Aide
</button>
</div>
</nav>
<div
class=
"tab-content"
id=
"nav-tabContent"
>
...
...
@@ -279,6 +293,39 @@
</form>
</div>
<div
class=
"tab-pane fade"
id=
"nav-zi"
role=
"tabpanel"
aria-labelledby=
"nav-zi-tab"
>
<!-- SINO-SYLLABE -->
<table
style=
"margin:auto"
>
<tr>
<td>
<div
class=
"controls d-flex flex-column"
>
<div
id=
"syll1"
class=
"bouton mybtn"
onclick=
"rmPart(this,'initiale')"
></div>
<div
id=
"syll2"
class=
"bouton mybtn"
onclick=
"rmPart(this,'glide')"
></div>
<div
id=
"syll3"
class=
"bouton mybtn"
onclick=
"rmPart(this,'tonale')"
></div>
<div
id=
"syll4"
class=
"bouton mybtn"
onclick=
"rmPart(this,'finale')"
></div>
</div>
</td>
<td>
<div
class=
"syll syllLab"
onclick=
"recupPhon('syll_'+[currentSyll.initiale.phon, currentSyll.glide.phon, currentSyll.tonale.phon, currentSyll.finale.phon, currentSyll.tone].join('.'))"
>
<div
id=
"initiale"
class=
"part"
></div>
<div
id=
"glide"
class=
"part"
></div>
<div
id=
"tonale"
class=
"part"
></div>
<div
id=
"finale"
class=
"part"
></div>
<div
id=
"divTons"
class=
"divTons"
>
<div
id=
"ton1"
class=
"ton tonLab t1"
></div>
<div
id=
"ton2"
class=
"ton tonLab t2"
></div>
<div
id=
"ton3"
class=
"ton tonLab t3"
></div>
<div
id=
"ton4"
class=
"ton tonLab t4"
></div>
<div
id=
"ton5"
class=
"ton tonLab t5"
></div>
<div
id=
"ton6"
class=
"ton tonLab t6"
></div>
<div
id=
"ton7"
class=
"ton tonLab t7"
></div>
<div
id=
"ton8"
class=
"ton tonLab t8"
></div>
</div>
</div>
</td>
</tr>
</table>
</div>
<div
class=
"tab-pane fade show active"
id=
"nav-aide"
role=
"tabpanel"
aria-labelledby=
"nav-aide-tab"
>
<strong>
Bienvenue dans la nouvelle version du PhonoDrop !
</strong>
...
...
@@ -334,5 +381,6 @@
<script
type=
"text/javascript"
src=
"scripts/script.js"
></script>
<script
type=
"text/javascript"
src=
"scripts/phonodrop_v2.js"
></script>
<script
type=
"text/javascript"
src=
"scripts/syntheseVocale.js"
></script>
<script
type=
"text/javascript"
src=
"scripts/sinosyllabe.js"
></script>
</body>
</html>
\ No newline at end of file
public/scripts/phonodrop_v2.js
View file @
0c9f175c
...
...
@@ -190,6 +190,23 @@ function recupPhon(identifiant){
newDiv
.
style
.
height
=
rodHeight
+
"
px
"
newDiv
.
style
.
borderRadius
=
thisRod
.
style
.
borderRadius
// SINOSYLLABE
}
else
if
(
identifiant
.
match
(
/syll_.*/
))
{
console
.
log
(
"
Création de :
"
,
identifiant
)
let
newSyll
=
makeNewSyll
(
currentSyll
)
newDiv
.
appendChild
(
newSyll
)
rmPart
(
document
.
getElementById
(
'
syll1
'
),
'
initiale
'
)
rmPart
(
document
.
getElementById
(
'
syll2
'
),
'
glide
'
)
rmPart
(
document
.
getElementById
(
'
syll3
'
),
'
tonale
'
)
rmPart
(
document
.
getElementById
(
'
syll4
'
),
'
finale
'
)
toggleTone
(
5
)
newDivWidth
=
100
newDivHeight
=
100
newDiv
.
style
.
width
=
newDivWidth
+
"
px
"
newDiv
.
style
.
height
=
newDivHeight
+
"
px
"
newDiv
.
classList
.
add
(
'
borderTransparent
'
)
// on a déjà la bordure de syll
// PHON
}
else
if
(
famille
==
"
kinephones
"
)
{
// rect = w:84 h:26 ry:2.7
...
...
@@ -246,8 +263,6 @@ function recupPhon(identifiant){
newDiv
.
setAttribute
(
'
onclick
'
,
'
selectPhon(this)
'
)
newDiv
.
setAttribute
(
'
ondblclick
'
,
'
this.remove()
'
)
if
(
lastSelect
!=
""
&&
lastSelect
.
offsetTop
!=
0
)
{
newDiv
.
style
.
left
=
lastSelect
.
offsetLeft
+
lastSelect
.
offsetWidth
+
"
px
"
...
...
@@ -257,6 +272,9 @@ function recupPhon(identifiant){
newDiv
.
style
.
top
=
"
100px
"
}
// Z-index
let
highestZIndex
=
getHighestZIndex
()
newDiv
.
style
.
zIndex
=
highestZIndex
+
1
document
.
getElementById
(
'
multidraggable
'
).
appendChild
(
newDiv
)
newDiv
.
click
()
}
...
...
@@ -380,4 +398,24 @@ function setCouleurEcritoire(div, couleur){
}
else
{
document
.
documentElement
.
style
.
setProperty
(
'
--borders-anchor
'
,
"
black
"
);
}
}
function
getHighestZIndex
()
{
var
elems
=
document
.
getElementsByClassName
(
'
carte-v2
'
);
var
highest
=
Number
.
MIN_SAFE_INTEGER
||
-
(
Math
.
pow
(
2
,
53
)
-
1
);
for
(
var
i
=
0
;
i
<
elems
.
length
;
i
++
)
{
var
zindex
=
Number
.
parseInt
(
document
.
defaultView
.
getComputedStyle
(
elems
[
i
],
null
).
getPropertyValue
(
"
z-index
"
),
10
);
if
(
zindex
>
highest
)
{
highest
=
zindex
;
}
}
return
highest
;
}
\ No newline at end of file
public/scripts/script.js
View file @
0c9f175c
...
...
@@ -8,7 +8,7 @@ function logg(texte) {
}
}
var
version2
=
tru
e
var
version2
=
fals
e
function
switchv2
(){
version2
=
!
version2
if
(
version2
){
...
...
public/scripts/selectPanneau.js
View file @
0c9f175c
...
...
@@ -19,6 +19,9 @@ function selectPanneau(p){
var
svgFond
=
document
.
getElementById
(
'
svgFond
'
);
// svg fond couleurs pour Fr A Do
var
doCalques
=
document
.
getElementById
(
'
doCalques
'
);
// boutons calques
var
svgZhLy
=
document
.
getElementById
(
'
svgZhLy
'
);
// Panneau Mandarin Lyssenko
var
svgZhMa
=
document
.
getElementById
(
'
svgZhMa
'
);
// Panneau Mandarin Aurélie Mariscalchi
var
svgZhJi
=
document
.
getElementById
(
'
svgZhJi
'
);
// Panneau Mandarin Shuman Jiao
if
(
p
==
'
phonoFrDo
'
)
{
famille
=
"
do_bouches
"
...
...
@@ -41,10 +44,18 @@ function selectPanneau(p){
pngCalqEnAlemLignes
.
style
.
display
=
'
none
'
;
pngPochoirEnAlem
.
style
.
display
=
'
none
'
;
svgClickEnAlem
.
style
.
display
=
'
none
'
;
// EN PronSci British
svgEnPronSciBr
.
style
.
display
=
'
none
'
;
// ZH Lyssenko
svgZhLy
.
style
.
display
=
'
none
'
;
// ZH A. Mariscalchi
svgZhMa
.
style
.
display
=
'
none
'
;
// ZH S. Jiao
svgZhJi
.
style
.
display
=
'
none
'
;
document
.
getElementById
(
'
nav-zi-tab
'
).
style
.
display
=
'
none
'
document
.
getElementById
(
'
nav-aide-tab
'
).
click
()
}
else
if
(
p
==
'
svgFrKinephones
'
)
{
famille
=
"
kinephones
"
lang
=
"
fr
"
...
...
@@ -70,6 +81,15 @@ function selectPanneau(p){
// EN PronSci British
svgEnPronSciBr
.
style
.
display
=
'
none
'
;
// ZH Lyssenko
svgZhLy
.
style
.
display
=
'
none
'
;
// ZH A. Mariscalchi
svgZhMa
.
style
.
display
=
'
none
'
;
// ZH S. Jiao
svgZhJi
.
style
.
display
=
'
none
'
;
document
.
getElementById
(
'
nav-zi-tab
'
).
style
.
display
=
'
none
'
document
.
getElementById
(
'
nav-aide-tab
'
).
click
()
}
else
if
(
p
==
'
svgFrGattegno
'
)
{
famille
=
"
gattegno
"
lang
=
"
fr
"
...
...
@@ -95,6 +115,15 @@ function selectPanneau(p){
// EN PronSci British
svgEnPronSciBr
.
style
.
display
=
'
none
'
;
// ZH Lyssenko
svgZhLy
.
style
.
display
=
'
none
'
;
// ZH A. Mariscalchi
svgZhMa
.
style
.
display
=
'
none
'
;
// ZH S. Jiao
svgZhJi
.
style
.
display
=
'
none
'
;
document
.
getElementById
(
'
nav-zi-tab
'
).
style
.
display
=
'
none
'
document
.
getElementById
(
'
nav-aide-tab
'
).
click
()
}
else
if
(
p
==
'
phonoEnAlem
'
)
{
famille
=
"
do_formes
"
lang
=
"
enbr
"
...
...
@@ -119,10 +148,20 @@ function selectPanneau(p){
// EN PronSci British
svgEnPronSciBr
.
style
.
display
=
'
none
'
;
// ZH Lyssenko
svgZhLy
.
style
.
display
=
'
none
'
;
// ZH A. Mariscalchi
svgZhMa
.
style
.
display
=
'
none
'
;
// ZH S. Jiao
svgZhJi
.
style
.
display
=
'
none
'
;
document
.
getElementById
(
'
nav-zi-tab
'
).
style
.
display
=
'
none
'
document
.
getElementById
(
'
nav-aide-tab
'
).
click
()
}
else
if
(
p
==
'
phonoEnPronSciBr
'
)
{
famille
=
"
pronsci
"
lang
=
"
enbr
"
// EN PronSci British
svgEnPronSciBr
.
style
.
display
=
'
block
'
;
...
...
@@ -144,6 +183,125 @@ function selectPanneau(p){
// FR Gattegno
svgFrGattegno
.
style
.
display
=
'
none
'
;
// ZH Lyssenko
svgZhLy
.
style
.
display
=
'
none
'
;
// ZH A. Mariscalchi
svgZhMa
.
style
.
display
=
'
none
'
;
// ZH S. Jiao
svgZhJi
.
style
.
display
=
'
none
'
;
document
.
getElementById
(
'
nav-zi-tab
'
).
style
.
display
=
'
none
'
document
.
getElementById
(
'
nav-aide-tab
'
).
click
()
}
else
if
(
p
==
'
phonoZhLy
'
)
{
famille
=
"
zhly
"
lang
=
"
zh
"
document
.
getElementById
(
'
nav-zi-tab
'
).
style
.
display
=
'
block
'
document
.
getElementById
(
'
nav-zi-tab
'
).
click
()
// ZH Lyssenko
svgZhLy
.
style
.
display
=
'
block
'
;
// ZH A. Mariscalchi
svgZhMa
.
style
.
display
=
'
none
'
;
// ZH S. Jiao
svgZhJi
.
style
.
display
=
'
none
'
;
// EN PronSci British
svgEnPronSciBr
.
style
.
display
=
'
none
'
;
// EN ALEM
svgEnAlem
.
style
.
display
=
'
none
'
;
pngCalqEnAlemLignes
.
style
.
display
=
'
none
'
;
pngPochoirEnAlem
.
style
.
display
=
'
none
'
;
svgClickEnAlem
.
style
.
display
=
'
none
'
;
// FR DO
doCalques
.
style
.
display
=
'
none
'
;
pngCalq
.
style
.
display
=
'
none
'
;
svgClick
.
style
.
display
=
'
none
'
;
pngPochoir
.
style
.
display
=
'
none
'
;
svgFond
.
style
.
display
=
'
none
'
;
// FR Kinéphones
svgFrKinephones
.
style
.
display
=
'
none
'
;
// FR Gattegno
svgFrGattegno
.
style
.
display
=
'
none
'
;
}
else
if
(
p
==
'
phonoZhMa
'
)
{
famille
=
"
zhma
"
lang
=
"
zh
"
document
.
getElementById
(
'
nav-zi-tab
'
).
style
.
display
=
'
block
'
document
.
getElementById
(
'
nav-zi-tab
'
).
click
()
// ZH A. Mariscalchi
svgZhMa
.
style
.
display
=
'
block
'
;
// ZH Lyssenko
svgZhLy
.
style
.
display
=
'
none
'
;
// ZH S. Jiao
svgZhJi
.
style
.
display
=
'
none
'
;
// EN PronSci British
svgEnPronSciBr
.
style
.
display
=
'
none
'
;
// EN ALEM
svgEnAlem
.
style
.
display
=
'
none
'
;
pngCalqEnAlemLignes
.
style
.
display
=
'
none
'
;
pngPochoirEnAlem
.
style
.
display
=
'
none
'
;
svgClickEnAlem
.
style
.
display
=
'
none
'
;
// FR DO
doCalques
.
style
.
display
=
'
none
'
;
pngCalq
.
style
.
display
=
'
none
'
;
svgClick
.
style
.
display
=
'
none
'
;
pngPochoir
.
style
.
display
=
'
none
'
;
svgFond
.
style
.
display
=
'
none
'
;
// FR Kinéphones
svgFrKinephones
.
style
.
display
=
'
none
'
;
// FR Gattegno
svgFrGattegno
.
style
.
display
=
'
none
'
;
}
else
if
(
p
==
'
phonoZhJi
'
)
{
famille
=
"
zhji
"
lang
=
"
zh
"
document
.
getElementById
(
'
nav-zi-tab
'
).
style
.
display
=
'
block
'
document
.
getElementById
(
'
nav-zi-tab
'
).
click
()
// ZH S. Jiao
svgZhJi
.
style
.
display
=
'
block
'
;
// ZH A. Mariscalchi
svgZhMa
.
style
.
display
=
'
none
'
;
// ZH Lyssenko
svgZhLy
.
style
.
display
=
'
none
'
;
// EN PronSci British
svgEnPronSciBr
.
style
.
display
=
'
none
'
;
// EN ALEM
svgEnAlem
.
style
.
display
=
'
none
'
;
pngCalqEnAlemLignes
.
style
.
display
=
'
none
'
;
pngPochoirEnAlem
.
style
.
display
=
'
none
'
;
svgClickEnAlem
.
style
.
display
=
'
none
'
;
// FR DO
doCalques
.
style
.
display
=
'
none
'
;
pngCalq
.
style
.
display
=
'
none
'
;
svgClick
.
style
.
display
=
'
none
'
;
pngPochoir
.
style
.
display
=
'
none
'
;
svgFond
.
style
.
display
=
'
none
'
;
// FR Kinéphones
svgFrKinephones
.
style
.
display
=
'
none
'
;
// FR Gattegno
svgFrGattegno
.
style
.
display
=
'
none
'
;
}
}
...
...
public/scripts/sinosyllabe.js
0 → 100644
View file @
0c9f175c
let
currentSyll
=
{
"
initiale
"
:
{
"
rect
"
:
""
,
"
phon
"
:
""
},
"
glide
"
:
{
"
rect
"
:
""
,
"
phon
"
:
""
},
"
tonale
"
:
{
"
rect
"
:
""
,
"
phon
"
:
""
},
"
finale
"
:
{
"
rect
"
:
""
,
"
phon
"
:
""
},
"
tone
"
:
0
,
"
structure
"
:
0
// millier:initiale, centaine:glide, dizaine:tonale, unité:finale. Ex. 10 = tonale seule; 11 = tonale+finale; 1010 = initiale+tonale
}
// liste des phonèmes
function
makeSyll
(
code
)
{
if
(
code
==
10
)
[
initiale
,
glide
,
tonale
,
finale
]
=
[
0
,
0
,
1
,
0
]
if
(
code
==
11
)
[
initiale
,
glide
,
tonale
,
finale
]
=
[
0
,
0
,
2
,
2
]
if
(
code
==
111
)
[
initiale
,
glide
,
tonale
,
finale
]
=
[
0
,
3
,
3
,
3
]
if
(
code
==
1111
)
[
initiale
,
glide
,
tonale
,
finale
]
=
[
4
,
4
,
4
,
4
]
if
(
code
==
110
)
[
initiale
,
glide
,
tonale
,
finale
]
=
[
0
,
2
,
2
,
0
]
if
(
code
==
1010
)
[
initiale
,
glide
,
tonale
,
finale
]
=
[
2
,
0
,
2
,
0
]
if
(
code
==
1110
)
[
initiale
,
glide
,
tonale
,
finale
]
=
[
3
,
3
,
3
,
0
]
if
(
code
==
1011
)
[
initiale
,
glide
,
tonale
,
finale
]
=
[
3
,
0
,
3
,
3
]
// transitoires
if
(
code
==
1000
)
[
initiale
,
glide
,
tonale
,
finale
]
=
[
2
,
0
,
0
,
0
]
if
(
code
==
1100
)
[
initiale
,
glide
,
tonale
,
finale
]
=
[
3
,
3
,
0
,
0
]
if
(
code
==
1001
)
[
initiale
,
glide
,
tonale
,
finale
]
=
[
3
,
0
,
0
,
3
]
if
(
code
==
1101
)
[
initiale
,
glide
,
tonale
,
finale
]
=
[
4
,
4
,
0
,
4
]
if
(
code
==
1
)
[
initiale
,
glide
,
tonale
,
finale
]
=
[
0
,
0
,
0
,
2
]
if
(
code
==
0
)
[
initiale
,
glide
,
tonale
,
finale
]
=
[
0
,
0
,
0
,
0
]
if
(
code
==
100
)
[
initiale
,
glide
,
tonale
,
finale
]
=
[
0
,
2
,
0
,
0
]
if
(
code
==
101
)
[
initiale
,
glide
,
tonale
,
finale
]
=
[
0
,
3
,
0
,
3
]
console
.
log
(
code
,
initiale
,
glide
,
tonale
,
finale
)
document
.
getElementById
(
'
initiale
'
).
classList
.
remove
(
"
_1
"
,
"
_2
"
,
"
_3
"
,
"
_4
"
)
document
.
getElementById
(
'
glide
'
).
classList
.
remove
(
"
_1
"
,
"
_2
"
,
"
_3
"
,
"
_4
"
)
document
.
getElementById
(
'
tonale
'
).
classList
.
remove
(
"
_1
"
,
"
_2
"
,
"
_3
"
,
"
_4
"
)
document
.
getElementById
(
'
finale
'
).
classList
.
remove
(
"
_1
"
,
"
_2
"
,
"
_3
"
,
"
_4
"
)
document
.
getElementById
(
'
initiale
'
).
classList
.
add
(
"
_
"
+
initiale
)
document
.
getElementById
(
'
glide
'
).
classList
.
add
(
"
_
"
+
glide
)
document
.
getElementById
(
'
tonale
'
).
classList
.
add
(
"
_
"
+
tonale
)
document
.
getElementById
(
'
finale
'
).
classList
.
add
(
"
_
"
+
finale
)
document
.
querySelectorAll
(
'
.mybtn.actif
'
).
forEach
((
el
)
=>
{
el
.
classList
.
remove
(
'
actif
'
)})
if
(
initiale
>
0
)
document
.
getElementById
(
'
syll1
'
).
classList
.
add
(
'
actif
'
)
if
(
glide
>
0
)
document
.
getElementById
(
'
syll2
'
).
classList
.
add
(
'
actif
'
)
if
(
tonale
>
0
)
document
.
getElementById
(
'
syll3
'
).
classList
.
add
(
'
actif
'
)
if
(
finale
>
0
)
document
.
getElementById
(
'
syll4
'
).
classList
.
add
(
'
actif
'
)
currentSyll
.
structure
=
code
}
function
togglePart
(
part
)
{
if
(
part
==
1000
)
{
if
(
currentSyll
.
structure
<
1000
)
{
makeSyll
(
1000
+
currentSyll
.
structure
)
}
else
{
makeSyll
(
currentSyll
.
structure
-
1000
)
}
}
if
(
part
==
100
)
{
if
(
currentSyll
.
structure
<
100
||
(
currentSyll
.
structure
>=
1000
&&
currentSyll
.
structure
<
1100
))
{
makeSyll
(
currentSyll
.
structure
+
100
)
}
else
{
makeSyll
(
currentSyll
.
structure
-
100
)
}
}
if
(
part
==
10
)
{
if
([
0
,
1
,
100
,
101
,
1000
,
1001
,
1100
,
1101
].
includes
(
currentSyll
.
structure
)
)
{
makeSyll
(
currentSyll
.
structure
+
10
)
}
else
{
makeSyll
(
currentSyll
.
structure
-
10
)
}
}
if
(
part
==
1
)
{
if
(
currentSyll
.
structure
<
1
||
[
10
,
110
,
100
,
110
,
1000
,
1010
,
1100
,
1110
].
includes
(
currentSyll
.
structure
)
)
{
makeSyll
(
currentSyll
.
structure
+
1
)
}
else
{
makeSyll
(
currentSyll
.
structure
-
1
)
}
}
}
currentTone
=
0
function
toggleTone
(
nb
)
{
if
(
nb
==
currentTone
||
nb
==
5
)
{
console
.
log
(
"
Réinitialisation du ton
"
)
// réinitialisation si clique sur ton déjà actif
currentTone
=
0
document
.
getElementById
(
'
ton1
'
).
style
.
display
=
"
none
"
document
.
getElementById
(
'
ton2
'
).
style
.
display
=
"
none
"
document
.
getElementById
(
'
ton3
'
).
style
.
display
=
"
none
"
document
.
getElementById
(
'
ton4
'
).
style
.
display
=
"
none
"
document
.
getElementById
(
'
ton5
'
).
style
.
display
=
"
none
"
document
.
getElementById
(
'
ton6
'
).
style
.
display
=
"
none
"
document
.
getElementById
(
'
ton7
'
).
style
.
display
=
"
none
"
document
.
getElementById
(
'
ton8
'
).
style
.
display
=
"
none
"
currentSyll
.
tone
=
0
}
else
{
currentSyll
.
tone
=
nb
if
(
nb
==
1
)
{
currentTone
=
1
document
.
getElementById
(
'
ton1
'
).
style
.
display
=
"
block
"
document
.
getElementById
(
'
ton2
'
).
style
.
display
=
"
none
"
document
.
getElementById
(
'
ton3
'
).
style
.
display
=
"
none
"
document
.
getElementById
(
'
ton4
'
).
style
.
display
=
"
block
"
document
.
getElementById
(
'
ton5
'
).
style
.
display
=
"
none
"
document
.
getElementById
(
'
ton6
'
).
style
.
display
=
"
none
"
document
.
getElementById
(
'
ton7
'
).
style
.
display
=
"
none
"
document
.
getElementById
(
'
ton8
'
).
style
.
display
=
"
none
"
}
if
(
nb
==
2
)
{
currentTone
=
2
document
.
getElementById
(
'
ton1
'
).
style
.
display
=
"
none
"
document
.
getElementById
(
'
ton2
'
).
style
.
display
=
"
block
"
document
.
getElementById
(
'
ton3
'
).
style
.
display
=
"
none
"
document
.
getElementById
(
'
ton4
'
).
style
.
display
=
"
block
"
document
.
getElementById
(
'
ton5
'
).
style
.
display
=
"
none
"
document
.
getElementById
(
'
ton6
'
).
style
.
display
=
"
none
"
document
.
getElementById
(
'
ton7
'
).
style
.
display
=
"
none
"
document
.
getElementById
(
'
ton8
'
).
style
.
display
=
"
none
"
}
if
(
nb
==
3
)
{
currentTone
=
3
document
.
getElementById
(
'
ton1
'
).
style
.
display
=
"
none
"
document
.
getElementById
(
'
ton2
'
).
style
.
display
=
"
block
"
document
.
getElementById
(
'
ton3
'
).
style
.
display
=
"
none
"
document
.
getElementById
(
'
ton4
'
).
style
.
display
=
"
block
"
document
.
getElementById
(
'
ton5
'
).
style
.
display
=
"
none
"
document
.
getElementById
(
'
ton6
'
).
style
.
display
=
"
none
"
document
.
getElementById
(
'
ton7
'
).
style
.
display
=
"
none
"
document
.
getElementById
(
'
ton8
'
).
style
.
display
=
"
block
"
}
if
(
nb
==
4
)
{
currentTone
=
4
document
.
getElementById
(
'
ton1
'
).
style
.
display
=
"
block
"
document
.
getElementById
(
'
ton2
'
).
style
.
display
=
"
none
"
document
.
getElementById
(
'
ton3
'
).
style
.
display
=
"
none
"
document
.
getElementById
(
'
ton4
'
).
style
.
display
=
"
none
"
document
.
getElementById
(
'
ton5
'
).
style
.
display
=
"
none
"
document
.
getElementById
(
'
ton6
'
).
style
.
display
=
"
block
"
document
.
getElementById
(
'
ton7
'
).
style
.
display
=
"
none
"
document
.
getElementById
(
'
ton8
'
).
style
.
display
=
"
none
"
}
}
console
.
log
(
"
Ton:
"
,
currentTone
)
}
let
listinitiales
=
[
'
rect_p
'
,
'
rect_p_h
'
,
'
rect_m
'
,
'
rect_f
'
,
'
rect_t
'
,
'
rect_t_h
'
,
'
rect_n
'
,
'
rect_l
'
,
'
rect_s
'
,
'
rect_ts
'
,
'
rect_t_hs
'
,
'
rect_s_retr
'
,
'
rect_ts_retr
'
,
'
rect_t_hs_retr
'
,
'
rect_z_retr
'
,
'
rect_s_slash
'
,
'
rect_ts_slash
'
,
'
rect_t_hs_slash
'
,
'
rect_k
'
,
'
rect_x
'
,
'
rect_k_h
'
]
let
gradientToRight
=
[
'
phon_ts
'
,
'
phon_t_hs
'
,
'
phon_ts_retr
'
,
'
phon_t_hs_retr
'
,
'
phon_ts_slash
'
,
'
phon_t_hs_slash
'
]
let
listglides
=
[
'
rect_j
'
,
'
rect_h_maj
'
,
'
rect_w
'
]
let
listvoyelles
=
[
'
rect_i
'
,
'
rect_y
'
,
'
rect_1
'
,
'
rect_u
'
,
'
rect_7
'
,
'
rect_o
'
,
'
rect_a
'
,
'
rect_e
'
,
'
rect_e_maj
'
,
'
rect_wo
'
]
let
listtonales
=
[
'
rect_i-t
'
,
'
rect_y-t
'
,
'
rect_u-t
'
,
'
rect_e-t
'
,
'
rect_7-t
'
,
'
rect_o-t
'
,
'
rect_e_maj-t
'
,
'
rect_a-t
'
]
let
listfinales
=
[
'
rect_rho
'
,
'
rect_j-f
'
,
'
rect_w-f
'
,
'
rect_rho-f
'
,
'
rect_n-f
'
,
'
rect_n_maj-f
'
]