# C2-S07 — Première interaction

import { AssessmentGrid } from "../../src/components/AssessmentGrid";
import { Correction } from "../../src/components/Correction";
import { ExerciseCard } from "../../src/components/ExerciseCard";
import { LearningObjectives } from "../../src/components/LearningObjectives";
import { LessonHeader } from "../../src/components/LessonHeader";
import { LessonNavigation } from "../../src/components/LessonNavigation";
import { TeacherTip } from "../../src/components/TeacherTip";

<LessonHeader
  id="C2-S07"
  title="Première interaction : Réagir aux actions de l'utilisateur"
  cycle="2"
  levels="CE1, CE2"
  duration="45 minutes"
  tool="Scratch / ScratchJr"
  grouping="Binômes"
  expressPrep={{
    objective: "Programmer le pilotage aux 4 flèches du clavier et la collision avec les murs.",
    material: "Projet de labyrinthe avec murs noirs.",
    trap: "Inverser l'axe horizontal (X) et l'axe vertical (Y).",
    timing: "10' Déplacement 4 touches • 25' Collision mur • 10' Test joueur",
  }}
  studentUrl="/activites/cycle-2/c2-a04-aide-le-chat-a-sortir"
  studentId="C2-A04"
/>

<LearningObjectives
  objectives={[
    "Associer des touches du clavier (Flèches, Espace) au contrôle direct d'un lutin.",
    "Distinguer une animation passive (film) d'un programme interactif (jeu/simulation).",
    "Créer une mini-interaction de collecte où le joueur guide son personnage vers un objet.",
  ]}
/>

---

## 🎒 Matériel & Préparation

- Ordinateurs avec clavier ou tablettes.
- Fiche de repérage des 4 touches fléchées du clavier (Haut, Bas, Gauche, Droite).

---

## ⏱️ Déroulé de la séance

### 1. Du spectateur au joueur (5 min)

Discussion : Quelle est la différence entre regarder un dessin animé et jouer à un jeu vidéo ? L'interaction !

### 2. Pilotage au clavier (25 min)

<ExerciseCard title="Mission : Piloter la voiture de course" difficulty="Moyen">
  - Créer 4 petits scripts pour déplacer le lutin dans les 4 directions avec les flèches du clavier.
  - Quand la touche **Flèche droite** est pressée → S'orienter à droite et avancer de 15 pas. - Idem
  pour **Flèche gauche**, **Flèche haut** et **Flèche bas**.
</ExerciseCard>

<Correction title="Architecture des 4 scripts de déplacement">

```text
[Quand la touche Flèche droite est pressée]
[S'orienter à 90]
[Avancer de 15 pas]

[Quand la touche Flèche gauche est pressée]
[S'orienter à -90]
[Avancer de 15 pas]

[Quand la touche Flèche haut est pressée]
[S'orienter à 0]
[Avancer de 15 pas]

[Quand la touche Flèche bas est pressée]
[S'orienter à 180]
[Avancer de 15 pas]
```

</Correction>

### 3. Défi collecte (15 min)

Ajouter une étoile sur la scène. Dès que la voiture touche l'étoile, l'étoile dit _« Bravo ! »_ et disparaît.

<TeacherTip title="Sens de rotation">
  Dans Scratch, vérifiez que le style de rotation du lutin est réglé sur « Gauche-Droite uniquement
  » pour éviter que le personnage se retrouve la tête à l'envers lorsqu'il va vers la gauche.
</TeacherTip>

---

## 📊 Grille d'évaluation

<AssessmentGrid
  criteria={[
    {
      label: "Associe correctement touche du clavier et mouvement",
      withHelp: "Confond flèche haut et flèche bas",
      autonomous: "Programme les 4 directions sans hésitation",
      transfer: "Ajoute une touche d'accélération (ex: Espace pour booster)",
    },
    {
      label: "Comprend la simultanéité des scripts d'interaction",
      withHelp: "Pense qu'un seul script peut fonctionner à la fois",
      autonomous: "Gère les 4 scripts parallèles sur le même lutin",
      transfer: "Explique le rôle de chaque bloc événement",
    },
  ]}
/>


<LessonNavigation
  prevUrl="/cycle-2/c2-s06-messages-et-synchronisation"
  prevId="C2-S06"
  prevTitle="Messages et synchronisation"
  nextUrl="/cycle-2/c2-s08-debogage-guide"
  nextId="C2-S08"
  nextTitle="Débogage guidé"
  cycleUrl="/cycle-2"
  cycleTitle="Vue d'ensemble du Cycle 2"
/>