Rapport exercice 3 de STIC I

Document d’accompagnement du dispositif interactif

Auteur·rice

Job Stephane Nyemeck

Date de publication

24 novembre 2025

1 Liens

Le dispositif se compose des éléments suivants :

2 Objectifs

Ce dispositif interactif sur les solides de l’espace s’addresse à des élèves du cycle primaire supérieur ou du cycle secondaire inférieur (8 à 14 ans) étudiant la géométrie. il a pour objectif principal la découverte et l’identification des caractéristiques géométriques des solides de l’espace proposés. Il vise d’une part, à aider les élèves à visualiser des figures géométriques souvent difficiles à apprendre de façon abstraite et d’autre part, à aider à la mémorisation des caractéristiques de ces solides par affichage immédiat des données factuelles structurées. Ce dispositif est donc également utile pour toute personne souhaitant réviser ou mémoriser ces concepts. Le dispositif est conçu pour être utilisé en libre accès sur n’importe quel navigateur et sur n’importe quel support numérique (ordinateur, tablette ou smartphone). Il peut être utilisé comme support dans le cadre d’un cours en présentiel (par exemple introduction interactive aux propriétés fondamentales des solides: nom, nombre de faces, arretes et sommets) ou pour un travail individuel à la maison (outil de révision). Pour utiliser ce dispositif, l’utilisateur doit uniquement maîtriser (l’arithmétique de base: compter des nombres) et savoir lire un texte descriptif. Après l’utilisation, les utilisateurs sont censés être capables d’associer le nom d’un solide (cube, cylindre,cone, pyramide) à une représentation visuelle.

3 Design

Le dispositif se compose d’un seul écran dans lequel figurent tous les éléments interactifs. L’utilisateur est d’abord accueilli par un texte introductif dans le (

) qui décrit brievement le dispositif “Découvrir les solides de l’espace…Clique sur le bouton pour afficher un solide de l’espace aléatoire”. L’interaction principale est centré sur le bouton d’action unique () qui est le point de départ de l’activité. Après le clic initial, les actions suivantes sont déclenchées: tout d’abord l’ordinateur choisit un solide géométrique de façon aléatoire parmi les quatre disponibles dans la base de données JavaScript. Ensuite, le conteneur principal(div#solidContainer) initialement masqué par la classe CSS (.hidden), est rendu visible. Ce conteneur contient deux éléments : une image et les informations relatives affichées en dessous. Le modèle est rendu interactif à l’aide d’un gestionnaire d’évènement de type (click). L’utilisateur clique sur le bouton “Afficher un solide” La fonction afficherSolide() est déclenchée, le chemin de l’image est mis à jour (img.src), et le contenu HTML (solidInfo) est injecté avec les nouvelles données du solide. Le conteneur d’information entier (div#solidContener) apparaît instantanément et offre un feedback visuel immédiat sur le résultat de l’action. Je peux tout à fait vous aider à reformuler la section Design de votre rapport pour qu’elle corresponde à ce modèle descriptif, tout en l’adaptant à la réalité de votre projet (qui utilise des boutons et non des pop-up au survol). Le bouton “Réessayer” (resetBtn), également rendu visible, permet à l’utilisateur de masquer le contenu pour préparer un nouvel affichage aléatoire.

4 Production

Pour la création de ce dispositif, je me suis inspiré de ma propre expérience en tant que professeur de mathématiques. En effet, j’ai constaté que la principale difficulté des élèves en géométrie était liée à la représentation des figures géométriques et le manque de connaissance de leurs caractéristiques. Techniquement, ce code est une adaptation de l’exemple du cours sur la liste des motes aléatoires. Au lieu d’avoir une simple chaine de caractères, la liste de données (wordList) a été transformée en un tableau d’objets JavaScript (const solids), où chaque objet représente un solide de l’espace avec ses propriétés (faces, arêtes, sommets). En plus, cette modification a nécessité le changement de la source d’une image SVG (img.src) dans la fonction afficherSolide(), afin que le dispositif exploite la capacité de l’ordinateur à générer des éléments aléatoires. Concrètement, l’interactivité sur JavaScript s’est faite en trois étapes: premièrement la création du tableau (const solids) avec les objets représentant les figures géométriques; Deuxièment la mise en place de l’interactivité avec la définition des fonctions afficherSolide() et reset(), et attachement des gestionnaires d’événements (addEventListener) aux boutons showBtn et resetBtn; enfin, la gestion de la persistance du contenu: Contrairement à l’exemple du cours qui masquait le mot très rapidement, ce dispositif maintient le contenu affiché jusqu’à ce que l’utilisateur clique sur le bouton “Réessayer”. La plus grande difficulté a été de maintenir la cohérence des noms entre le HTML, le CSS et le JavaScript. Cela s’est manifesté par des erreurs de frappe (ex: contenant au lieu de container) et des noms de classes non standard(en langue française). La solution a été une révision de tous les sélecteurs. En outre, des erreurs 404 (fichiers non trouvés) sont apparues en raison d’un espace dans le nom de fichier d’une image SVG. La solution fut de renommer le fichier physique pour retirer l’espace (stephane pyramide avant.svg changé par pyramide.svg), assurant ainsi un chemin d’accès fiable.

5 Auto-évaluation

Bien que fonctionnel, le dispositif pour l’instant manque de feedback pédagogique avancé. Le dispositif fonctionne uniquement en mode découverte et affichage, mais ne sollicite pas l’utilisateur pour une vérification active de ses connaissances. Une version ultérieure du dispositif devrait permettre d’ajouter une interactivité (un quiz): après avoir affiché le solide, le système pourrait par exemple poser une question ciblée (“Combien d’arêtes possède cette figure ?”) et évaluer la réponse de l’utilisateur. Cela transformerait l’outil de découverte en rajoutant une modalité d’évaluation. Par ailleurs, le dispositif pourrait offrir plus de diversité visuelle en intégrant la possibilité d’afficher le solide sous différents angles pour une meilleur compréhension spatiale.

6 Bibliographie

7 Ressources

Toutes les images utilisées sont des fichiers SVG téléchargés depuis Open Clipart et sont du domaine public.