# C3-A04 — Dessine des polygones au stylo

import { ActivityHero } from "../../../src/components/ActivityHero";
import { ActivitySolution } from "../../../src/components/ActivitySolution";
import { BlockImage } from "../../../src/components/BlockImage";
import { BonusChallenge } from "../../../src/components/BonusChallenge";
import { CompletionCheck } from "../../../src/components/CompletionCheck";
import { Hint } from "../../../src/components/Hint";
import { PrintableVersion } from "../../../src/components/PrintableVersion";
import { StarterProject } from "../../../src/components/StarterProject";
import { StudentStep } from "../../../src/components/StudentStep";
import { TeacherAccess } from "../../../src/components/TeacherAccess";
import { TryIt } from "../../../src/components/TryIt";

<ActivityHero
  id="C3-A04"
  title="Trace des figures géométriques et des rosaces avec le stylo"
  cycle="3"
  level="CM1, CM2, 6e"
  duration="50 min"
  tool="Scratch (Extension Stylo)"
  difficulty="Défi"
  needsAdult={false}
  mission="Transforme ton lutin en crayon magique ! Utilise la formule d'angle (360 divisé par le nombre de côtés) pour tracer un carré, un triangle équilatéral, un hexagone et une splendide rosace."
/>

<PrintableVersion
  pdfColorUrl="/downloads/c3-a04-dessine-un-polygone.pdf"
  pdfColorName="Fiche géométrie & tracés au stylo Scratch (A4)"
/>

<StarterProject
  title="Projet Scratch de départ"
  type="scratch"
  downloadUrl="/projects/c3-a04-polygone-depart.sb3"
  filename="c3-a04-polygone-depart.sb3"
  size="0.5 KB"
  preparedItems={[
    "Lutin Crayon 'Pencil' avec pointe centrée",
    "Extension Stylo déjà activée dans la palette",
    "Arrière-plan blanc quadrillé",
  ]}
/>

---

## 📐 La formule magique des polygones

<div style={{ textAlign: "center", margin: "1.5rem 0" }}>
  <img
    src="/images/c3-polygones-angles.svg"
    alt="Formule de rotation des polygones réguliers au stylo"
    style={{ maxWidth: "100%", height: "auto", borderRadius: "8px", border: "1px solid #e2e8f0" }}
  />
</div>

Pour tracer une figure fermée à N côtés égaux, le lutin doit faire un tour complet (360°).  
À chaque sommet, il tourne de l'angle :

**Angle de rotation = 360° / N**

- **Carré (4 côtés) :** 360 / 4 = 90°
- **Triangle équilatéral (3 côtés) :** 360 / 3 = 120°
- **Hexagone (6 côtés) :** 360 / 6 = 60°
- **Octogone (8 côtés) :** 360 / 8 = 45°

---

## 🪜 Les étapes de ton tracé

<StudentStep
  number={1}
  title="Nettoie la feuille et pose la pointe du stylo"
  check="L'ancien dessin s'efface et le crayon se place au centre."
>
  Sous le drapeau vert, écris toujours l'initialisation :

```text
effacer tout
aller à x: (0) y: (0)
s'orienter à 90
mettre la taille du stylo à (3)
stylo en position d'écriture
```

</StudentStep>

<StudentStep
  number={2}
  title="Trace un carré de 100 pas"
  check="Le crayon trace un carré parfait et revient à son point de départ."
>

```text
répéter (4) fois
avancer de (100) pas
tourner droite de (90) degrés
attendre (0.2) secondes
```

</StudentStep>

<StudentStep
  number={3}
  title="Transforme le carré en hexagone (6 côtés)"
  check="Le crayon trace un polygone à 6 côtés."
>
  Change 2 nombres dans ta boucle : - Répéter **6** fois (au lieu de 4) - Tourner de **60** degrés
  (au lieu de 90)
</StudentStep>

---

## 🧪 Teste ton dessin

<TryIt expected="Le crayon trace nettement les 6 côtés de l'hexagone sans déborder et referme parfaitement la figure géométrique.">
  Change la couleur du stylo avant chaque côté pour obtenir un hexagone arc-en-ciel !
</TryIt>

---

## 💡 Indices progressifs

<Hint
  hints={[
    {
      level: 1,
      title: "Indice 1 — Pourquoi le triangle est à 120 degrés ?",
      content: (
        <p>
          Attention : 360 divisé par 3 = 120 degrés. Pour un triangle équilatéral, il faut tourner
          de 120° (angle extérieur) et non de 60° !
        </p>
      ),
    },
    {
      level: 2,
      title: "Indice 2 — Changer la couleur automatiquement",
      content: (
        <p>
          Ajoute le bloc <code>ajouter (10) à la couleur du stylo</code> à l'intérieur de ta boucle
          de tracé.
        </p>
      ),
    },
    {
      level: 3,
      title: "Indice 3 — Créer une rosace",
      content: (
        <p>
          Englobe la boucle de ton carré dans une 2e boucle :{" "}
          <code>répéter 12 fois [ tracer un carré, tourner de 30 degrés ]</code>.
        </p>
      ),
    },
  ]}
/>

---

## 🔍 Solution et explications

<ActivitySolution
  title="Voir le programme complet du tracé d'hexagone et de la rosace"
  downloadUrl="/projects/c3-a04-polygone-corrige.sb3"
  filename="c3-a04-polygone-corrige.sb3"
  size="0.5 KB"
>

```text
// 1. Initialisation
[quand le drapeau vert est cliqué]
effacer tout
relever le stylo
aller à x: (0) y: (0)
s'orienter à 90
mettre la couleur du stylo à [#4C97FF]
mettre la taille du stylo à (3)
stylo en position d'écriture

// 2. Rosace de carrés (12 carrés tournés de 30°)
répéter (12) fois
    répéter (4) fois
        avancer de (80) pas
        tourner droite de (90) degrés
    tourner droite de (30) degrés
    ajouter (15) à la couleur du stylo

relever le stylo
```

</ActivitySolution>

---

## 🌟 Défi bonus

<BonusChallenge title="Défi bonus : Trace un cercle presque parfait !">
  Répète 36 fois : avancer de 10 pas, tourner de 10 degrés (36 x 10 = 360°). Tu obtiendras un cercle
  parfait !
</BonusChallenge>

---

<CompletionCheck
  activityId="C3-A04"
  nextActivityUrl="/activites/cycle-3/c3-a05-cree-un-quiz"
  nextActivityTitle="C3-A05 — Crée un quiz avec score"
  cycleUrl="/activites/cycle-3"
/>

<TeacherAccess
  lessonId="C3-S10"
  lessonTitle="Géométrie avec le stylo"
  lessonUrl="/cycle-3/c3-s10-geometrie-avec-le-stylo"
/>