Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Pédagogies Multimodales
PhonoDrop
Commits
7e899aca
Commit
7e899aca
authored
Mar 31, 2021
by
Sylvain Coulange
Browse files
Ajout réglettes
parent
77d1cbfc
Changes
3
Hide whitespace changes
Inline
Side-by-side
public/index.html
View file @
7e899aca
...
...
@@ -223,7 +223,7 @@
<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=
"true"
>
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"
>
Grammaire
</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>
</div>
...
...
@@ -239,7 +239,11 @@
<div
id=
"trait-point"
></div>
</div>
<div
class=
"tab-pane fade"
id=
"nav-grammaire"
role=
"tabpanel"
aria-labelledby=
"nav-grammaire-tab"
>
Bientôt !
<div
class=
"d-flex justify-content-around"
>
<div
id=
"ronds"
></div>
<div
id=
"rectangles"
></div>
<div
id=
"reglettes"
></div>
</div>
</div>
<div
class=
"tab-pane fade"
id=
"nav-parametres"
role=
"tabpanel"
aria-labelledby=
"nav-parametres-tab"
>
<!-- BORDURES -->
...
...
public/scripts/phonodrop_v2.js
View file @
7e899aca
...
...
@@ -28,6 +28,59 @@ for (i in tps) {
newDiv
.
style
.
backgroundImage
=
'
url("trait-point/
'
+
tps
[
i
]
+
'
"
'
document
.
getElementById
(
'
trait-point
'
).
appendChild
(
newDiv
)
}
// Réglettes
let
rodColors
=
[
"
#f3e3ca
"
,
"
#ea1b39
"
,
"
#a8d147
"
,
"
#952a8a
"
,
"
#fdf001
"
,
"
#00834d
"
,
"
#1d1d27
"
,
"
#9a3724
"
,
"
#046cb3
"
,
"
#f27322
"
]
let
rodHeight
=
25
for
(
i
=
1
;
i
<=
10
;
i
++
)
{
// Création carte & récup infos
var
newRod
=
document
.
createElement
(
'
div
'
)
var
newRect
=
document
.
createElement
(
'
div
'
)
var
newCircle
=
document
.
createElement
(
'
div
'
)
// Formatage de la réglette
newRod
.
id
=
`rod
${
i
}
`
newRod
.
className
=
"
rod
"
newRod
.
addEventListener
(
'
click
'
,
function
(){
recupPhon
(
this
.
id
)})
newRod
.
style
.
backgroundColor
=
rodColors
[
i
-
1
]
newRod
.
style
.
width
=
`
${
i
*
rodHeight
}
px`
newRod
.
style
.
margin
=
"
5px
"
// Formatage du rectangle
newRect
.
id
=
`rect
${
i
}
`
newRect
.
className
=
"
rod
"
newRect
.
addEventListener
(
'
click
'
,
function
(){
recupPhon
(
this
.
id
)})
newRect
.
style
.
backgroundColor
=
rodColors
[
i
-
1
]
newRect
.
style
.
width
=
`
${
2
*
rodHeight
}
px`
newRect
.
style
.
margin
=
"
5px
"
// Formatage du cercle
newCircle
.
id
=
`circle
${
i
}
`
newCircle
.
className
=
"
rod
"
newCircle
.
addEventListener
(
'
click
'
,
function
(){
recupPhon
(
this
.
id
)})
newCircle
.
style
.
backgroundColor
=
rodColors
[
i
-
1
]
newCircle
.
style
.
width
=
`
${
rodHeight
}
px`
newCircle
.
style
.
borderRadius
=
"
50%
"
newCircle
.
style
.
margin
=
"
5px
"
document
.
getElementById
(
'
reglettes
'
).
appendChild
(
newRod
)
document
.
getElementById
(
'
rectangles
'
).
appendChild
(
newRect
)
document
.
getElementById
(
'
ronds
'
).
appendChild
(
newCircle
)
}
///////////////////////////////////////////////////
...
...
@@ -128,6 +181,15 @@ function recupPhon(identifiant){
newDiv
.
style
.
width
=
newDivWidth
+
"
px
"
newDiv
.
style
.
height
=
newDivHeight
+
"
px
"
// REGLETTES
}
else
if
(
identifiant
.
match
(
/rod
\d
+/
)
||
identifiant
.
match
(
/rect
\d
+/
)
||
identifiant
.
match
(
/circle
\d
+/
))
{
let
thisRod
=
document
.
getElementById
(
identifiant
)
newDiv
.
style
.
backgroundColor
=
thisRod
.
style
.
backgroundColor
newDiv
.
style
.
width
=
thisRod
.
style
.
width
newDivHeight
=
rodHeight
newDiv
.
style
.
height
=
rodHeight
+
"
px
"
newDiv
.
style
.
borderRadius
=
thisRod
.
style
.
borderRadius
// PHON
}
else
if
(
famille
==
"
kinephones
"
)
{
// rect = w:84 h:26 ry:2.7
...
...
public/styles/styles.css
View file @
7e899aca
...
...
@@ -289,6 +289,13 @@ footer {
background-size
:
100%
100%
;
}
.rod
{
border
:
solid
black
1px
;
border-radius
:
5px
;
cursor
:
pointer
;
height
:
25px
;
}
.selectedPhon
{
border-right
:
black
solid
4px
;
border-right-color
:
var
(
--borders-anchor
);
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment