Rapport exercice 3 de STIC I

Document d’accompagnement du dispositif interactif

Auteur·rice

Job Stephane Nyemeck

Date de publication

25 janvier 2026

1 Liens

Le dispositif se compose des éléments suivants :

2 Objectifs

Ce dispositif interactif sur les fonctions affines s’adresse à des élèves en fin d’étude du cycle secondaire inférieur (environ 12 à 15 ans) étudiant l’analyse mathématiques. Il a pour objectif principal la découverte et l’identification des caractéristiques mathématiques de la fonction de type f(x) = ax + b. Il vise, d’une part, à aider les élèves à visualiser l’impact des paramètres (pente et ordonnée à l’origine) sur une droite, concepts souvent difficiles à appréhender de façon abstraite. D’autre part, il aide à la compréhension des relations de cause à effet entre la modification d’un coefficient numérique et sa représentation graphique par un affichage immédiat et dynamique des données structurées. Ce dispositif est donc également utile pour toute personne souhaitant réviser ou stabiliser ces concepts fondamentaux. 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 pour une introduction interactive à la notion de pente positive ou négative) ou pour un travail individuel à la maison (outil de révision et d’auto-évaluation via le quiz). Pour utiliser ce dispositif, l’utilisateur doit uniquement maîtriser l’arithmétique de base (nombres relatifs) et savoir lire un texte descriptif. Après l’utilisation, les utilisateurs sont censés être capables d’associer les variations des paramètres a et b à l’allure d’une droite dans un repère cartésien.

3 Design

Le dispositif se compose d’une série de douze écrans structurés par le framework Reveal.js, guidant l’élève de la théorie à la pratique. L’utilisateur est d’abord accueilli par des écrans introductifs et théoriques qui décrivent brièvement les concepts de pente et d’ordonnée à l’origine. Le design visuel repose sur le thème “Serif”, choisi pour sa clarté académique, complété par l’utilisation de KaTeX pour assurer une bonne présentation des formules mathématiques sur chaque diapositive. L’interaction est répartie sur deux types d’écrans interactifs distincts. Le premier est l’écran d’exploration graphique (Slide 7), où l’utilisateur trouve un panneau de contrôle composé de quatre boutons d’action (+ et - pour les paramètres a et b). Après chaque clic, les variables JavaScript sont modifiées et la fonction mettreAJourAffichage() est déclenchée. Cette action met à jour dynamiquement l’équation textuelle tout en rafraîchissant le conteneur canvas#canvas-fonction. Une structure de contrôle de type if/else a été rajoutée dans le code pour gérer le signe de l’équation, offrant un feedback visuel et textuel immédiat qui permet à l’élève de l’associer instantanément au mouvement de la droite sur la grille. Le second pôle d’interactivité se trouve sur l’écran du quiz (Slide 9), qui sert de point d’évaluation. Sur cet écran, l’utilisateur est confronté à une question à choix multiples. L’interaction est gérée par des gestionnaires d’événements liés à des boutons de réponse. Lorsqu’un utilisateur clique sur une proposition, la fonction verifierReponse() est déclenchée. Cette fonction utilise une structure conditionnelle pour analyser la réponse et intégrer un feedback instantané dans le conteneur div#feedback-quiz, affichant un message de succès en vert ou une aide pédagogique en rouge en cas d’erreur. Cette alternance entre écrans d’information, d’exploration et d’évaluation crée un environnement d’apprentissage complet et autonome.

4 Production

Pour la création de ce dispositif, je me suis avant tout inspiré de ma propre expérience en tant que professeur de mathématiques. En effet, j’ai constaté sur le terrain que la principale difficulté des élèves en analyse mathématiques résidait dans la représentation mentale des fonctions (affines) et le manque de compréhension intuitive de l’impact des coefficients sur la droite. Techniquement, ce projet s’appuie sur le template Reveal.js mis à la disposition des étudiants MALTT dans le cadre du cours. J’ai utilisé cette base structurelle pour organiser mon contenu pédagogique, tout en l’adaptant pour y intégrer des éléments interactifs dans les exemples de base. Cette modification a nécessité l’intégration d’un élément canvas pour générer des graphiques en temps réel. Concrètement, l’interactivité sur JavaScript s’est faite en trois étapes : premièrement, la récupération et l’initialisation des variables de contrôle pour la pente et l’ordonnée à l’origine ; deuxièmement, la mise en place de l’interactivité avec la définition des fonctions mettreAJourAffichage() et mettreAJourGraphique(), ainsi que l’attachement des gestionnaires d’événements (addEventListener) aux boutons de commande ; enfin, la gestion de la stabilité visuelle, garantissant que le graphique reste affiché et cohérent après chaque manipulation. L’une des difficultés techniques majeures est survenue lors de l’intégration du graphique dans la structure de la diapositive. En effet, l’ajout du canvas a initialement perturbé la mise en page, provoquant un décalage vertical qui rendait les boutons de contrôle pour a et b invisibles car ils se retrouvaient poussés en bas de l’écran, hors de la zone d’affichage. Pour résoudre ce problème, j’ai dû intervenir sur le fichier CSS personnel (avec l’aide de gemini car les slides ont été conçues de manière à centrer le contenu) afin de structurer la zone interactive avec une disposition en colonnes, permettant au graphique et au panneau de contrôle de coexister harmonieusement sur la même ligne. En outre, la cohérence des noms entre le code HTML, le CSS et le script JavaScript a nécessité une vigilance particulière, notamment pour assurer que l’équation dynamique s’affiche sans erreurs de signes (le code HTML avait un + en dure dans la balise d’affichage de la fonction ce qui faisait qu’on avait des deux signes dans l’équations). La solution a été une révision de tous les sélecteurs et l’utilisation d’une structure de contrôle if/else. Enfin, lors du déploiement sur Cyberduck, des erreurs 404 sont apparues en raison d’une mauvaise gestion des chemins d’accès vers les bibliothèques. La solution fut de basculer vers des chemins strictement relatifs, assurant ainsi un fonctionnement fiable sur le serveur tecfaetu.

5 Auto-évaluation

Bien que fonctionnel, le dispositif actuel peut encore être amélioré. Le principal succès de ce projet réside dans la synchronisation entre les manipulations algébriques (les boutons) et la réponse géométrique instantanée (le graphique). En tant que professeur de mathématiques, je suis convaincu que ce type de feedback immédiat est essentiel pour lever les blocages conceptuels liés à l’abstraction des fonctions affines. L’intégration réussie de structures de contrôle pour gérer la syntaxe mathématique de l’équation (+ b ou - b) est également un point de satisfaction personnelle, car elle garantit la rigueur scientifique de l’outil.Toutefois, une version ultérieure du dispositif pourrait accroitre la portée pédagogique en intégrant des fonctionnalités plus avancées. Il serait intéressant de permettre l’ajout d’une fonctionnalité permettant de superposer une seconde fonction g(x) sur le même graphique. Cela permettrait d’aborder la notion de point d’intersection et de résolution graphique d’équations. Enfin, ce projet m’a permis de réaliser l’importance de la gestion des ressources lors d’un déploiement réel. La résolution des problèmes de mise en page (le décalage du graphique et des boutons) et la correction des liens vers les bibliothèques du template Reveal.js ont été des étapes formatrices. Je suis particulièrement satisfait du résultat obtenu, qui allie ma passion pour l’enseignement des mathématiques et les compétences techniques acquises dans ce cours. Cette expérience me motive d’autant plus à poursuivre le développement de ressources numériques interactives pour mes futurs élèves.

6 Bibliographie

7 Ressources

  • Template Reveal.js MALTT : Base structurelle de la présentation fournie dans le cadre du cours STIC I, incluant la hiérarchie des dossiers (css, js, plugin)
  • API HTML5 Canvas : Utilisée pour le moteur de rendu graphique permettant le tracé dynamique de la droite f(x) = ax + b.
  • Icônes et Logos : Logo officiel de la licence Creative Commons BY-NC-SA 4.0 récupéré sur le site creativecommons.org pour la slide finale de crédits.