Récupération du cours SVG
This commit is contained in:
BIN
exercices/horloge/horloge.png
Executable file
BIN
exercices/horloge/horloge.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
32
exercices/horloge/index.md
Executable file
32
exercices/horloge/index.md
Executable file
@@ -0,0 +1,32 @@
|
||||
---
|
||||
layout: layouts/page.njk
|
||||
title: Horloge
|
||||
---
|
||||
|
||||
Vous devez réaliser un outil d'apprentissage de l'heure
|
||||
|
||||
{ width: 500px; }
|
||||
|
||||
## Dessiner une horloge
|
||||
|
||||
Dans un canvas de 220px de largeur et 240px de hauteur
|
||||
|
||||
Définir un trait de longueur 17px et 3.8px d'épaisseur pour les heures.
|
||||
|
||||
Définir un trait de longueur 5px et un de 1.2px pour les minutes
|
||||
|
||||
Définir un groupe représentant 5 minutes composé d'un trait d'heure et de 4 traits de minutes.
|
||||
|
||||
Répéter ce bloc autant de fois que nécessaire pour faire un cercle complet
|
||||
|
||||
Ajouter 2 aiguilles une pour les heures et une pour les minutes.
|
||||
|
||||
*Facultatif* :
|
||||
|
||||
Marquer les heures et les minutes avec du texte
|
||||
|
||||
## Ajouter 2 slider
|
||||
|
||||
Un pour les heures de 0 à 12 et l'autre pour les minutes
|
||||
|
||||
Lorsque l'on bouge les sliders faire bouger les aiguilles.
|
||||
103
exercices/horloge/reponse.md
Executable file
103
exercices/horloge/reponse.md
Executable file
@@ -0,0 +1,103 @@
|
||||
---
|
||||
layout: layouts/page.njk
|
||||
title: Horloge
|
||||
---
|
||||
|
||||
Les heures
|
||||
|
||||
```svg
|
||||
<line x1="0" y1="95" x2="0" y2="78" stroke-width="3.8" stroke="#111" id="heure"/>
|
||||
```
|
||||
|
||||
Les minutes
|
||||
|
||||
```svg
|
||||
<line x1="0" y1="95" x2="0" y2="90" stroke-width="1.2" stroke="#333" id="minute"/>
|
||||
```
|
||||
|
||||
Le bloc, chaque minute représente 6° (360 / 60)
|
||||
|
||||
```svg
|
||||
<g id="bloc" viewbox="-100 -100 200 200">
|
||||
<use href="#heure"/>
|
||||
<use href="#minute" transform="rotate( 6)"/>
|
||||
<use href="#minute" transform="rotate(12)"/>
|
||||
<use href="#minute" transform="rotate(18)"/>
|
||||
<use href="#minute" transform="rotate(24)"/>
|
||||
</g>
|
||||
```
|
||||
|
||||
Le viewBox permet de centrer sur le centre de l'horloge ou sur le bloc de 5 minutes
|
||||
Attention si on utilise un symbole tous les éléments dans les coordonnées négatives ne sont pas affichés.
|
||||
|
||||
|
||||
Chaque bloc de 5 minutes représente 30° (360 / 12)
|
||||
|
||||
```svg
|
||||
<use href="#bloc" transform="rotate( 0)"/>
|
||||
<use href="#bloc" transform="rotate( 30)"/>
|
||||
<use href="#bloc" transform="rotate( 60)"/>
|
||||
...
|
||||
<use href="#bloc" transform="rotate(300)"/>
|
||||
<use href="#bloc" transform="rotate(330)"/>
|
||||
```
|
||||
|
||||
### Les aiguilles
|
||||
|
||||
```svg
|
||||
<line x1="0" y1="-80" x2="0" y2="0" stroke-width="2.8" stroke="#F07882" id="aiguillem" transform="rotate(192)"/>
|
||||
<line x1="0" y1="-50" x2="0" y2="0" stroke-width="5" stroke="#0092d4" id="aiguilleh" transform="rotate(76)"/>
|
||||
```
|
||||
|
||||
### Le texte
|
||||
|
||||
Il convient de redresser le texte après la rotation pour l'amener à sa position sur le cercle.
|
||||
|
||||
```svg
|
||||
<g transform="rotate(240)">
|
||||
<text y="70" transform="rotate(-240 0 65)">2</text>
|
||||
</g>
|
||||
<g transform="rotate(210)">
|
||||
<text y="115" transform="rotate(-210 0 110)">5</text>
|
||||
</g>
|
||||
```
|
||||
|
||||
### Les sliders
|
||||
|
||||
```html
|
||||
Heures : <input type="range" min="0" max="12" value="2" class="slider heure" /><br/>
|
||||
Minutes : <input type="range" min="0" max="60" value="32" class="slider minute" />
|
||||
```
|
||||
|
||||
Télécharger le fichier <a href="../solution.svg" download>svg</a>
|
||||
|
||||
### Le code javascript
|
||||
|
||||
Récupérer les éléments
|
||||
|
||||
```javascript
|
||||
const inputh = document.querySelector("input.heure");
|
||||
const inputm = document.querySelector("input.minute");
|
||||
const aiguilleh = document.getElementById("aiguilleh");
|
||||
const aigiullem = document.getElementById("aiguillem");
|
||||
```
|
||||
|
||||
La fonction pour afficher les aiguilles dans la bonne position
|
||||
|
||||
```javascript
|
||||
function Show() {
|
||||
aiguilleh.style.transform = `rotate(${360.0 / 12.0 * inputh.value + 30 / 60 * inputm.value}deg)`;
|
||||
aiguillem.style.transform = `rotate(${360.0 / 60.0 * inputm.value}deg)`;
|
||||
}
|
||||
```
|
||||
|
||||
Attacher la fonctions aux événements `input` des sliders.
|
||||
|
||||
```javascript
|
||||
inputm.oninput = Show;
|
||||
inputh.oninput = Show;
|
||||
```
|
||||
|
||||
Télécharger le fichier <a href="../solution/index.html" download>html</a>
|
||||
|
||||
|
||||
141
exercices/horloge/solution.html
Executable file
141
exercices/horloge/solution.html
Executable file
@@ -0,0 +1,141 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="440" height="480"
|
||||
viewBox="-110 -120 220 240">
|
||||
<defs>
|
||||
<line x1="0" y1="95" x2="0" y2="90" stroke-width="1.2" stroke="#333" id="minute"/>
|
||||
<line x1="0" y1="95" x2="0" y2="78" stroke-width="3.8" stroke="#111" id="heure"/>
|
||||
<g id="bloc" viewbox="-100 -100 200 200">
|
||||
<use href="#heure"/>
|
||||
<use href="#minute" transform="rotate( 6)"/>
|
||||
<use href="#minute" transform="rotate(12)"/>
|
||||
<use href="#minute" transform="rotate(18)"/>
|
||||
<use href="#minute" transform="rotate(24)"/>
|
||||
</g>
|
||||
</defs>
|
||||
<!--<rect fill="yellow" x="-130" y="-150" width="450" height="310"/>-->
|
||||
<use href="#bloc" transform="rotate( 0)"/>
|
||||
<use href="#bloc" transform="rotate( 30)"/>
|
||||
<use href="#bloc" transform="rotate( 60)"/>
|
||||
<use href="#bloc" transform="rotate( 90)"/>
|
||||
<use href="#bloc" transform="rotate(120)"/>
|
||||
<use href="#bloc" transform="rotate(150)"/>
|
||||
<use href="#bloc" transform="rotate(180)"/>
|
||||
<use href="#bloc" transform="rotate(210)"/>
|
||||
<use href="#bloc" transform="rotate(240)"/>
|
||||
<use href="#bloc" transform="rotate(270)"/>
|
||||
<use href="#bloc" transform="rotate(300)"/>
|
||||
<use href="#bloc" transform="rotate(330)"/>
|
||||
|
||||
<line x1="0" y1="-80" x2="0" y2="0" stroke-width="2.8" stroke="#F07882" id="aiguillem" transform="rotate(192)"/>
|
||||
<line x1="0" y1="-50" x2="0" y2="0" stroke-width="5" stroke="#0092d4" id="aiguilleh" transform="rotate(76)"/>
|
||||
|
||||
<circle cx="0" cy="0" r="6" fill="black"/>
|
||||
|
||||
<g text-anchor="middle">
|
||||
<g transform="rotate(210)">
|
||||
<text y="70" transform="rotate(-210 0 65)">1</text>
|
||||
</g>
|
||||
<g transform="rotate(240)">
|
||||
<text y="70" transform="rotate(-240 0 65)">2</text>
|
||||
</g>
|
||||
<g transform="rotate(270)">
|
||||
<text y="70" transform="rotate(-270 0 65)">3</text>
|
||||
</g>
|
||||
<g transform="rotate(300)">
|
||||
<text y="70" transform="rotate(-300 0 65)">4</text>
|
||||
</g>
|
||||
<g transform="rotate(330)">
|
||||
<text y="70" transform="rotate(-330 0 65)">5</text>
|
||||
</g>
|
||||
<g transform="rotate(0)">
|
||||
<text y="70" transform="rotate(-0 0 65)">6</text>
|
||||
</g>
|
||||
<g transform="rotate(30)">
|
||||
<text y="70" transform="rotate(-30 0 65)">7</text>
|
||||
</g>
|
||||
<g transform="rotate(60)">
|
||||
<text y="70" transform="rotate(-60 0 65)">8</text>
|
||||
</g>
|
||||
<g transform="rotate(90)">
|
||||
<text y="70" transform="rotate(-90 0 65)">9</text>
|
||||
</g>
|
||||
<g transform="rotate(120)">
|
||||
<text y="70" transform="rotate(-120 0 65)">10</text>
|
||||
</g>
|
||||
<g transform="rotate(150)">
|
||||
<text y="70" transform="rotate(-150 0 65)">11</text>
|
||||
</g>
|
||||
<g transform="rotate(180)">
|
||||
<text y="70" transform="rotate(-180 0 65)">12</text>
|
||||
</g>
|
||||
</g>
|
||||
<g text-anchor="middle" font-size="12">
|
||||
<g transform="rotate(210)">
|
||||
<text y="115" transform="rotate(-210 0 110)">5</text>
|
||||
</g>
|
||||
<g transform="rotate(240)">
|
||||
<text y="115" transform="rotate(-240 0 110)">10</text>
|
||||
</g>
|
||||
<g transform="rotate(270)">
|
||||
<text y="115" transform="rotate(-270 0 110)">15</text>
|
||||
</g>
|
||||
<g transform="rotate(300)">
|
||||
<text y="115" transform="rotate(-300 0 110)">20</text>
|
||||
</g>
|
||||
<g transform="rotate(330)">
|
||||
<text y="115" transform="rotate(-330 0 110)">25</text>
|
||||
</g>
|
||||
<g transform="rotate( 0)">
|
||||
<text y="115" >30</text>
|
||||
</g>
|
||||
<g transform="rotate( 30)">
|
||||
<text y="115" transform="rotate(-30 0 110)">35</text>
|
||||
</g>
|
||||
<g transform="rotate( 60)">
|
||||
<text y="115" transform="rotate(-60 0 110)">40</text>
|
||||
</g>
|
||||
<g transform="rotate( 90)">
|
||||
<text y="115" transform="rotate(-90 0 110)">45</text>
|
||||
</g>
|
||||
<g transform="rotate(120)">
|
||||
<text y="115" transform="rotate(-120 0 110)">50</text>
|
||||
</g>
|
||||
<g transform="rotate(150)">
|
||||
<text y="115" transform="rotate(-150 0 110)">55</text>
|
||||
</g>
|
||||
<g transform="rotate(180)">
|
||||
<text y="115" transform="rotate(-180 0 110)">00</text>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
<p>
|
||||
Heures : <input type="range" min="0" max="12" value="2" class="slider heure" /><br/>
|
||||
Minutes : <input type="range" min="0" max="60" value="32" class="slider minute" />
|
||||
</p>
|
||||
<script>
|
||||
|
||||
const inputh = document.querySelector("input.heure");
|
||||
const inputm = document.querySelector("input.minute");
|
||||
const aiguilleh = document.getElementById("aiguilleh");
|
||||
const aigiullem = document.getElementById("aiguillem");
|
||||
|
||||
function Show() {
|
||||
aiguilleh.style.transform = `rotate(${360.0 / 12.0 * inputh.value + 30 / 60 * inputm.value}deg)`;
|
||||
aiguillem.style.transform = `rotate(${360.0 / 60.0 * inputm.value}deg)`;
|
||||
}
|
||||
|
||||
inputm.oninput = Show;
|
||||
inputh.oninput = Show;
|
||||
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
117
exercices/horloge/solution.svg
Executable file
117
exercices/horloge/solution.svg
Executable file
@@ -0,0 +1,117 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="-110 -150 450 320">
|
||||
<defs>
|
||||
<line x1="0" y1="95" x2="0" y2="90" stroke-width="1.2" stroke="#333" id="minute"/>
|
||||
<line x1="0" y1="95" x2="0" y2="78" stroke-width="3.8" stroke="#111" id="heure"/>
|
||||
<g id="bloc" viewbox="-100 -100 200 200">
|
||||
<use href="#heure"/>
|
||||
<use href="#minute" transform="rotate( 6)"/>
|
||||
<use href="#minute" transform="rotate(12)"/>
|
||||
<use href="#minute" transform="rotate(18)"/>
|
||||
<use href="#minute" transform="rotate(24)"/>
|
||||
</g>
|
||||
</defs>
|
||||
<!--<rect fill="yellow" x="-130" y="-150" width="450" height="310"/>-->
|
||||
<use href="#bloc" transform="rotate( 0)"/>
|
||||
<use href="#bloc" transform="rotate( 30)"/>
|
||||
<use href="#bloc" transform="rotate( 60)"/>
|
||||
<use href="#bloc" transform="rotate( 90)"/>
|
||||
<use href="#bloc" transform="rotate(120)"/>
|
||||
<use href="#bloc" transform="rotate(150)"/>
|
||||
<use href="#bloc" transform="rotate(180)"/>
|
||||
<use href="#bloc" transform="rotate(210)"/>
|
||||
<use href="#bloc" transform="rotate(240)"/>
|
||||
<use href="#bloc" transform="rotate(270)"/>
|
||||
<use href="#bloc" transform="rotate(300)"/>
|
||||
<use href="#bloc" transform="rotate(330)"/>
|
||||
|
||||
<line x1="0" y1="-80" x2="0" y2="0" stroke-width="2.8" stroke="#F07882" transform="rotate(192)"/>
|
||||
<line x1="0" y1="-50" x2="0" y2="0" stroke-width="5" stroke="#0092d4" transform="rotate(76)"/>
|
||||
|
||||
<circle cx="0" cy="0" r="6" fill="black"/>
|
||||
<g text-anchor="middle">
|
||||
<g transform="rotate(210)">
|
||||
<text y="70" transform="rotate(-210 0 65)">1</text>
|
||||
</g>
|
||||
<g transform="rotate(240)">
|
||||
<text y="70" transform="rotate(-240 0 65)">2</text>
|
||||
</g>
|
||||
<g transform="rotate(270)">
|
||||
<text y="70" transform="rotate(-270 0 65)">3</text>
|
||||
</g>
|
||||
<g transform="rotate(300)">
|
||||
<text y="70" transform="rotate(-300 0 65)">4</text>
|
||||
</g>
|
||||
<g transform="rotate(330)">
|
||||
<text y="70" transform="rotate(-330 0 65)">5</text>
|
||||
</g>
|
||||
<g transform="rotate(0)">
|
||||
<text y="70" transform="rotate(-0 0 65)">6</text>
|
||||
</g>
|
||||
<g transform="rotate(30)">
|
||||
<text y="70" transform="rotate(-30 0 65)">7</text>
|
||||
</g>
|
||||
<g transform="rotate(60)">
|
||||
<text y="70" transform="rotate(-60 0 65)">8</text>
|
||||
</g>
|
||||
<g transform="rotate(90)">
|
||||
<text y="70" transform="rotate(-90 0 65)">9</text>
|
||||
</g>
|
||||
<g transform="rotate(120)">
|
||||
<text y="70" transform="rotate(-120 0 65)">10</text>
|
||||
</g>
|
||||
<g transform="rotate(150)">
|
||||
<text y="70" transform="rotate(-150 0 65)">11</text>
|
||||
</g>
|
||||
<g transform="rotate(180)">
|
||||
<text y="70" transform="rotate(-180 0 65)">12</text>
|
||||
</g>
|
||||
</g>
|
||||
<g text-anchor="middle" font-size="12">
|
||||
<g transform="rotate(210)">
|
||||
<text y="115" transform="rotate(-210 0 110)">5</text>
|
||||
</g>
|
||||
<g transform="rotate(240)">
|
||||
<text y="115" transform="rotate(-240 0 110)">10</text>
|
||||
</g>
|
||||
<g transform="rotate(270)">
|
||||
<text y="115" transform="rotate(-270 0 110)">15</text>
|
||||
</g>
|
||||
<g transform="rotate(300)">
|
||||
<text y="115" transform="rotate(-300 0 110)">20</text>
|
||||
</g>
|
||||
<g transform="rotate(330)">
|
||||
<text y="115" transform="rotate(-330 0 110)">25</text>
|
||||
</g>
|
||||
<g transform="rotate( 0)">
|
||||
<text y="115" >30</text>
|
||||
</g>
|
||||
<g transform="rotate( 30)">
|
||||
<text y="115" transform="rotate(-30 0 110)">35</text>
|
||||
</g>
|
||||
<g transform="rotate( 60)">
|
||||
<text y="115" transform="rotate(-60 0 110)">40</text>
|
||||
</g>
|
||||
<g transform="rotate( 90)">
|
||||
<text y="115" transform="rotate(-90 0 110)">45</text>
|
||||
</g>
|
||||
<g transform="rotate(120)">
|
||||
<text y="115" transform="rotate(-120 0 110)">50</text>
|
||||
</g>
|
||||
<g transform="rotate(150)">
|
||||
<text y="115" transform="rotate(-150 0 110)">55</text>
|
||||
</g>
|
||||
<g transform="rotate(180)">
|
||||
<text y="115" transform="rotate(-180 0 110)">00</text>
|
||||
</g>
|
||||
</g>
|
||||
<g font-family="HelveticaNeueLTStd,Arial,sans-serif">
|
||||
<text x="340" y="-120" font-size="26" text-anchor="end">
|
||||
Apprendre à lire l'heure
|
||||
</text>
|
||||
<text x="340" y="10" font-size="32" text-anchor="end">Il est
|
||||
<tspan fill="#0092d4">2</tspan> h <tspan fill="#F07882">34</tspan></text>
|
||||
<text x="60" y="135">La petite aiguille indique l'heure</text>
|
||||
<text x="60" y="155">La grande aiguille indique les minutes</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4.4 KiB |
Reference in New Issue
Block a user