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
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
Supports
Markdown
0%
Try again
or
attach a new 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