Rapport – Exercice 5

STIC-1 • MALTT • Université de Genève

🪐 Mission Planètes

Dispositif pédagogique interactif sur le système solaire

Auteur Mohammad
Exercice N°5 – STIC-1
Date 15 décembre 2025
Cours MALTT – TECFA

🔗 Liens

🪐 Mission Planètes – Jeu de classement
Page principale avec l'activité drag & drop pour classer les planètes rocheuses et gazeuses
🌙 Mission Lune – Observation des phases
Page secondaire avec les modèles 3D NASA et l'observation des phases lunaires
Version alternative avec drag natif HTML5
Version utilisant l'API Drag and Drop native du navigateur

Objectifs

À quoi sert ce dispositif ?

« Mission Planètes » est un jeu éducatif interactif permettant aux élèves de découvrir et classer les planètes du système solaire. L'activité principale consiste à glisser-déposer les 8 planètes dans deux catégories : les planètes rocheuses (telluriques) et les géantes gazeuses.

Public cible

Ce dispositif s'adresse aux élèves du cycle 2 (5P-6P) dans le système scolaire genevois, soit des enfants de 8 à 10 ans environ. Il peut être utilisé en classe ou à la maison comme support d'apprentissage.

Cadre d'utilisation

Lien avec le PER (Plan d'Études Romand)

Ce dispositif est aligné avec le MSN 26 du PER : « Explorer l'unité et la diversité du vivant… » – thème « Planète Terre – système solaire ». Les élèves apprennent à observer, décrire et classer les éléments du système solaire.

Connaissances préalables

Aucune connaissance préalable n'est requise. Le dispositif inclut des aides et rappels pour guider l'élève dans sa démarche de classement.

Objectifs d'apprentissage

Après utilisation, l'élève sera capable de :

Design

Design pédagogique

Le dispositif s'appuie sur une approche constructiviste : l'élève construit ses connaissances en manipulant activement les éléments. Le drag & drop permet un apprentissage par l'action et les feedbacks immédiats renforcent la compréhension.

La démarche scientifique du MSN 26 est intégrée :

Design de l'interface

L'interface adopte un thème cosmique immersif avec un fond étoilé animé, des couleurs violettes/roses évoquant l'espace, et des effets visuels (particules, ondes d'impact) pour rendre l'expérience engageante.

Choix d'ergonomie :

Sobriété numérique

Les modèles 3D sont chargés depuis les serveurs NASA (CDN optimisé). Les animations CSS sont légères et le canvas d'étoiles utilise peu de ressources. Le site fonctionne sans base de données ni traitement serveur.

⚙️ Production

Technologies utilisées

HTML5 CSS3 JavaScript jQuery UI Model Viewer (Google) NASA 3D Models

Étapes de développement

  1. Conception pédagogique : définition des objectifs alignés au MSN 26
  2. Maquettage : structure HTML sémantique et layout CSS Grid/Flexbox
  3. Style cosmique : création du thème visuel avec animations CSS
  4. Drag & Drop : implémentation avec jQuery UI (draggable/droppable)
  5. Modèles 3D : intégration de model-viewer avec les GLB NASA
  6. Feedback pédagogique : messages contextuels liés au PER
  7. Tests et ajustements : responsive design et accessibilité

Difficultés rencontrées et solutions

Problème : Les iframes NASA Eyes contenaient trop de texte et d'UI intégrée.
Solution : Remplacement par des modèles GLB 3D via model-viewer, offrant une visualisation propre et contrôlable.

Problème : Le drag & drop natif HTML5 était complexe à gérer pour les zones de dépôt.
Solution : Utilisation de jQuery UI qui simplifie grandement l'implémentation avec ses méthodes draggable() et droppable().

Auto-évaluation

Points forts

  • Interface immersive et engageante
  • Alignement pédagogique avec le PER
  • Feedbacks détaillés et constructifs
  • Modèles 3D NASA de qualité
  • Responsive et accessible

Limites

  • Pas de sauvegarde des progrès
  • Activité unique (classement)
  • Nécessite JavaScript activé
  • Modèles 3D lourds à charger

Améliorations possibles

  • Ajouter un quiz sur les caractéristiques
  • Intégrer un système de score/badges
  • Créer plus de missions MSN 26
  • Ajouter des sons et narration audio

Ressenti personnel

Cet exercice m'a permis d'approfondir l'utilisation de jQuery UI pour le drag & drop, une compétence transférable à de nombreux projets interactifs. L'intégration des modèles 3D NASA via model-viewer était particulièrement intéressante et ouvre des possibilités pour d'autres dispositifs pédagogiques.

Bibliographie

Ressources

Modèles 3D

Images

Polices

Bibliothèques

Icônes et émojis