Un projet (compte pour 3 exercices).
Ce projet doit contenir un minimum d'action script et correspond à un objectif que vous définissez.
Dans le cadre de mes études à TECFA, cours STIC III, 22 mai 2009
Lien vers le résultat dans une page html:
L'architecture de cette page html citée ci-dessus peut être décrite de cette façon:
- l'activité pédagogique à réaliser par un élève:(Fig.1)
Fig.1: fichier swf inclus:venn_inc.swf
- son inclusion par souci d'ergonomie (homogénéité-cohérence) dans un cadre de navigation propre à un site existant (en l'occurrence ici: educlasse Fig.2)
Fig.2: fichier swf avec le cadre de navigation d'educlasse:venn00.swf
Lien vers les fichiers de l'activité (sans le cadre de navigation educlasse):
---> Dossier compressé:venn_inc.zip
Lien vers les fichiers de l'activité sur le serveur TECFA:
---> Dossier compressé: venn_tecfa.zip
Objectifs
La réalisation d'un module d'exerciseur de notions mathématiques me tient à coeur depuis plusieurs années.L'exploitation des caractéristiques des nouvelles technologies à des fins pédagogiques me semble indiquée dans ce cas.
Dès la 5ème année de la scolarité obligatoire, les critères de divisibilité et les ensembles de multiples sont abordés. Dans le but de donner une meilleure compréhension et une aisance aux élèves pour travailler avec l'ensemble des nombres naturels, il est important de fournir quelques exercices de consolidation qui permettent à un étudiant de prendre confiance et de porter un regard plus vif sur les relations qui peuvent exister entre les entiers. La maîtrise de l'opération mathématique telle que la division euclidienne qui s'acquiert progressivement dans ces degrés s'en trouve facilitée si l'élève a exercé sa sagacité à reconnaître des multiples ou des diviseurs d'un nombre.
Bien que le diagramme de Venn ne soit plus utilisé de manière systématique dans les cours, il est intéressant d'utiliser un aspect graphique des relations de divisibilité entre les nombres et peut constituer une autre représentation cognitive complémentaire utilisant le canal sensoriel visuel. L'élève, qui doit organiser spatialement des plages de multiples pour parvenir à un diagramme, interagit avec l'interface graphique pour la rendre cohérente avec les propriétés des nombres. Par exemple, pour disposer les multiples de 3 et de 6 de façon correcte, il s'agit de dimensionner les plages et de les placer sur la scène de façon que l'ensemble des multiples de 6 soit inclus dans celui des multiples de 3. L'utilisation des drag&drop m'a semblé judicieuse car ils constituent souvent un aspect ludique par rapport à l'utilisation du papier qui est fastidieuse et démotivante pour l'élève.
L'étudiant dispose de 2 outils (agrandissement et rétrécissement:boutons + et -) pour chaque plage, il peut ainsi les redimensionner puis les déplacer en les superposant ou les incluant, et enfin, il suffit ensuite de glisser&déposer les nombres de gauche (qui sont générés aléatoirement) dans la bonne plage pour obtenir un diagramme sans erreurs. La possibilité d'obtenir un résultat correct par hasard en procédant par essais-erreurs est limitée par le fait que les erreurs sont comptabilisées dans le feedback final et par un message d'erreur qui renvoie l'élève à étudier la matière plus à fond. Autrement dit, lorsque l'on atteint -20 points, on interrompt l'activité.
Certaines caractéristiques des TIC sont exploitées ici de manière à donner un feedback à l'étudiant qui lui permet un apprentissage autonome: Le student tracking mis en place grâce à l'AS3 relié à une base de données MySQL via le php permet de suivre le cheminement de l'élève automatiquement et de donner des informations en cours (Fig.3) et en fin d'activité (Fig.4) et permet une auto évaluation.
Fig.3: Feedback en cours de partie
Fig.4: Feedback final
Pour assurer le suivi de l'élève, il a fallu mettre en place une interface de connexion. On peut atteindre celle-ci en cliquant sur "connexion" en haut au centre de la page ou aussi en cliquant sur le bouton fermer en haut à droite (Fig.5):
Fig.5: Bouton permettant de quitter et d'enregistrer
On obtient ensuite les interfaces qui permettent à l'étudiant de s'identifier au début, en cours ou en fin d'activité afin de pouvoir enregistrer ses résultats et d'ainsi avoir un rendu de ses progrès (Fig.6):
Fig.6: Interfaces de connexion et d'enregistrement
Comme cette activité est axée sur le visuel, j'ai pensé que, pour l'enregistrement, une image serait utile: ainsi, plutôt que de rappeler à l'élève ses résultats précédents uniquement sous forme de points obtenus ou de pourcentage de réussite, le programme lui fournit en plus une capture d'écran de ce qu'il a accompli simplement en cliquant sur la ligne correspondate de la grille (Fig.7).
Fig.7: Grille de suivi de l'élève: grid00.html
Bref résumé de la démarche
Après avoir exploré les possibilités techniques de réaliser un même type d'activité pédagogique dans différents exercices des cours STIC:soient (l' exercice 15 (javascript) du cours STIC-II et l' exercice 4 (CS3/AS3) du cours STIC-3 ) , ainsi qu'expérimenté les frustrations dues au javascript (différences par rapport aux navigateurs, malgré les librairies très efficaces comme Scriptaculous) , j'ai porté mon choix sur l' ActionScript3 car les possibilités de ce langage correspondaient mieux à la réalisation de mes objectifs par le fait qu'il permet un dialogue avec des fichiers php.
Je me suis imposé dès le début d'utiliser le plus possible le code et de ne faire appel à l'IDE de flash le moins possible Cela m'a parfois paru fastidieux, mais après cet effort initial, les avantages se sont imposés, l'utilisation de librairies telles que TweenLite permet en 2 lignes de code sur un objet d'obtenir des effets très utiles en s'affranchissant des contraintes du développement.
Techniquement, la possibilité de faire "dialoguer" le fichier swf avec une base de données via le php m'est apparue comme un avantage décisif. L'AS3 permet cette opération sans recharger la page grâce à l'envoi et la réception de données avec la méthode GET (voir le tutoriel page 4 et 5).Explications avec les exemples a et b:
Pour l' envoi des variables à une URL il faut utiliser la classe URLVariables() qui sert à la fois à contenir des variables à charger ou à envoyer. Pour lire l'ensemble des variables reçues lors d'un chargement il suffit ensuite utiliser la propriété data.
a) Exemple de code permettant l'envoi des variables "login" et "passw" d'un fichier flash au fichier "receivefromflash.php" et son utilisation dans le cadre de mon travail:
Fichier flash "sendToPhp":
Code AS3:
//Instancier la classe URLVariables()
var varToSendURL:URLVariables= new URLVariables;
//définir les variables à envoyer:
varToSend.login="log";
varToSend.passw="pw";
//Injecter les variables dans l'instance de URLRequest() grâce à la propriété data:
var urlToSend:URLRequest= new URLRequest("http://...../receivefromflash.php");
urlToSend.data=varToSendURL;
//afficher le résultat dans le php:
navigateToURL(urlToSend,"_blank");
Code php:
<?php
//récupérer les 2 variables:
$login=$_GET['login'];
$passw=$_GET['passw'];
echo"Variables venant du fichier flash:"
echo"<br />";
echo $login;
echo"<br />";
echo $passw;
//le contenu de $login est "log", celui de $password est "pw"
?>
J'ai utilisé ce principe d'envoi de données pour transmettre les résultats en temps réel de l'activité en
cours:
Dans le fichier classes/quietless/core/ApplicationMain.as, à chaque mouvement d'un nombre ou d'une plage de multiples sur la scène, le script AS3 teste les erreurs restantes
et transmet ce diagnostic au script php : "venn.php" (le dernier résultat écrase le précédent en variable de session). Lorsque l'élève décide d'enregistrer
son résultat, le fichier flash appelle le script "uploads/upload.php" qui effectue une
requête INSERT SQL dans la base de données des derniers résultats en utilisant les variables de
session et enregistre une capture d'écran du diagramme réalisé.
b) Exemple de code permettant à un fichier flash la réception des variables "login" et "passw" du fichier "sendtoflash.php" et son utilisation dans le cadre de mon travail:
Les variables transmises depuis le fichier php (voir plus bas) grâce à la méthode GET sont sous la forme de paires nameVar/valueVar (exemple: login=log&passw=pw). Pour pouvoir lire la valeur de chaque variable dans le fichier flash, il faut placer le chargement (contenu dans l'instance de la classe URLLoader) dans une instance de la classe URLVariables:
Fichier "sendtoflash.php":Code php:
<?php
//transmettre les 2 variables au fichier flash sous la forme de paires nameVar/valueVar:
$name1="login";
$value1="log";
$name2="passw";
$value2="pw";
//envoyer les variables grâce à la commande "echo"
echo $name1 . "=" . rawurlencode($value1) . "&" . $name2 . "=" . rawurlencode($value2);
//le contenu de $login est "log", celui de $passw est "pw" , ces variables et leur contenu sont transmises au fichier flash
//grâce à la commande de sortie "echo" .
?>
Fichier flash "receiveFromPhp":
Code AS3:
//Instancier la classe URLLoader qui va contenir les données que nous allons charger
var loaderDatas:URLLoader= new URLLoader;
//Instancier la classe URLRequest() en donnant entre parenthèses l'adresse du fichier à charger
var urlFrom:URLRequest=new URLRequest("http://......./sendtoflash.php);
//Charger les données contenues dans le fichier grâce à la propriété load
loaderDatas.load(urlFrom);
//Mettre un écouteur pour vérifier le chargement complet des variables
loaderDatas.addEventListener(Event.COMPLETE, retrieveVars);
var retrievedVars:URLVariables;
// la fonction qui permet de récupérer les variables et qui ne s'exécute que lorsque le chargement est complet:
function retrieveVars(event:Event):void{
//pour pouvoir lire le contenu de chaque variable placer le chargement (contenu dans loaderDatas)
//dans une instance de URLVariables:
retrievedVars= new URLVariables(loaderDatas.data);
//on peut maintenant récupérer le contenu de nos 2 variables séparément:
retrievedVars.login;
retrievedVars.passw;
//trace(retrievedVars.login);
//trace(retrievedVars.passw);
}
Dossier compressé des codes ci-dessus: trans_vars.zip
J'ai utilisé le principe de réception de données pour l'interface de connexion, pour le recueil des points et encore
pour la transmission des données à la grille de suivi (fig.6).
En effet, lorsque la page est chargée la première fois, il s'agit de contrôler si l'élève est déjà
connecté puis récupérer l'état initial qui permet de renseigner le mode d'évaluation
de l'activité puisque celle-ci est différente à chaque
chargement (génération des nombres aléatoirement et par conséquent du nombre de
points maximal).
Il faut toutefois prendre garde au fait que la quantité de variables transmises par la
méthode GET est limitée, c'est pour cette raison que la grille de suivi
par exemple est conçue pour n'afficher que 10 lignes par page. Lorsqu'on affiche
la page suivante, un nouveau paquet de données est transmis.
Ces remarques m'amènent à la structure même du fonctionnement du script AS3 de l'interface de connexion d'autant plus que les 2
opérations y sont imbriquées et même associées:
Quelques explications concernant le principe de l'interface de connexion qui combine
la réception et l'envoi de données via le php:
Lorsqu'on commence l'activité, le script doit d'abord
recueillir 2 informations la première transmise par le script php:
-voir si l'élève est déjà connecté;
-récupérer le nombre de points maximal et le nombre d'erreurs qu'il reste
à éliminer dans l'état initial de l'activité.
Ces informations sont recueillies grâce à un écouteur d'événement
sur l'événement ENTER_FRAME. Pour ne faire cette opération qu'une seule fois, il ne faut pas oublier
d'enlever cet écouteur une fois l'événement ENTER_FRAME complet:
addEventListener(Event.ENTER_FRAME, RecupSession);
function RecupSession(evt:Event){
function onComplete(event:Event):void{
//contenu de la fonction
}
}
//enlever l'écouteur sinon boucle infinie
removeEventListener(Event.ENTER_FRAME, RecupSession);
Puis, lorsque l'activité est en cours, l'élève doit pouvoir enregistrer
ses résultats (il ne peut le faire qu'une fois connecté).
L'événement ENTER_FRAME exposé ci-dessus nous donne l'information:
-si l'élève est connecté, alors le script lui donne la possibilité d'enregistrer son travail;
-si il n'est pas connecté, alors il faut afficher l'interface de connexion
qui lui permet d'introduire ses identifiants eux-mêmes contrôlés alors via le php
qui effectue une requête SQL.
On arrive ici à l'exploitation de l'envoi et de la réception de données via php
de façon transparente, sans recharger la page (Fig.7).
Fig.7.:Fonctionnement de l'interface de connexion.
On peut remarquer sur ce schéma la présence de variables de session dans le PHP. Comme le script AS3 de l'activité utilise 3 fichiers php pour recevoir et envoyer des données et qu'il faut les récupérer lors de l'enregistrement, les variables de session trouvent ainsi leur utilité. Le fait que la durée d'une session soit limitée dans le temps ne pose pas de problème ici puisqu'à chaque mouvement des plages de multiples ou des nombres sur la scène, le fichier flash écrase les variables précédentes (si elle sont nulles, il leur assigne de nouvelles valeurs).
La programmation orientée objet (POO) posède une structure fractale dans le sens où les notions d'héritage permettent de définir à la base des objets simples, puis ensuite des objets plus complexes basés sur ces objets "simples". Conjointe à ceci, la structure séqentielle du langage AS3 permet de rendre opérables des boucles et des conditions sur ces objets. L'avantage principal se manifeste par la production encore trop peu nombreuses de librairies AS3, mais celles déjà disponibles permettent d'augmenter la qualité des interfaces sans grand effort.
Le suivi pour l'élève de ses propres activités est atteignable dès la connexion effectuée et une activité réalisée : lorsque l'étudiant a enregistré son travail un message lui propose d'aller consulter les archives (Fig.8):
Fig.8: Accès au suivi.
Difficultés
N'ayant que très peu pratiqué l'AS3, j'ai consacré 40 jours à
l'apprentissage des bases de ce langage.
La programmation séquentielle m'était assez familière,
mais l' orientation objet (POO)
me paraissait ésotérique
voire même obscure.
Le mélange des 2 genres utilisés dans l'AS3 a compliqué les choses au début,
j'ai vite compris qu'il nécessitait
encore davantage de rigueur. La logique rationnelle de ce language est apparue peu à peu
à force de messages d'erreurs moins précis que dans la programmation
séquentielle ce qui force à chercher parfois longtemps.
Les paradigmes de programmation (POO et séquentielle)
du langage sont difficiles à concilier
pour parvenir à un ensemble fonctionnel. Il faut notamment veiller à créer
les objets avant de mettre en place une séquence d'instructions qui les traite. L'affichage
de certains objets (addChild
) suivant certaines conditions ou valeur de variables est aisé, par
contre l'utilisation de
removeChild (pour enlever un objet de la scène) pose parfois des problèmes
dans le déroulement séquentiel du script. J'ai résolu cette difficulté
en utilisant la librairie
TweenLite
qui m'a permis de diminuer la taille de l'objet au point qu'il disparaisse et de
le faire réapparaître au moment voulu.
La gestion de la profondeur des plans et des masques (setChildIndex) est aussi parfois complexe
dans ce cadre et la superposition d'objet suivant des conditions permet d'éviter
les désagréments de l'emploi de removeChild.
Ainsi,par exemple, lorsqu'un même bouton doit commander
2 objets différents il est plus simple de créer 2 boutons qui possèdent
chacun leurs propres écouteurs d'événement puis de changer leur index
sur la scène en fonction de l'affichage de l'objet que de mettre des conditions
sur les écouteurs dans un seul bouton.
L'utilisation des fonctions m'a permis de comprendre la différence
entre la portée globale ou locale des variables: effectivement, une variable définie dans une
fonction a une portée locale (utilisable uniquement dans la fonction). Si une fonction change l'affectation d'une
variable utilisée à un autre endroit dans le script, il est indispensable de la définir
avant l'appel de la fonction.
Auto-évaluation du résultat
Compte tenu de mes connaissances quasi inexistantes en AS3, je suis assez satisfait du résultat. Cependant, des améliorations peuvent être apportées notamment au feedback en cours d'activité qui laisse parfois à désirer puisque des messages erronés surviennent parfois. En effet, les nombreux tests sur l' emplacement des nombres et des plages, le tout en temps réel et couplé à des enregistrements dans la base de données, provoquent parfois des conflits.
Remarques
Pour des raisons de sécurité et de disponibilité sur le serveur TECFA, j'ai remplacé la requête à la base de données par des test effectués dans le fichier php. De plus, les variables de session ne semblant pas fonctionner sur le serveur, j'ai adapté le script en utilisant le login "eleve" et un mot de passe "maltt" pour que l'activité fonctionne, pour cette raison le suivi de l'élève est présenté sous la forme d'une grille moins complète que celle du site educlasse. L'utilisation d'un fichier texte est analogue à l'appel à une base de données, que l'on interroge une base de données ou que l'on exécute une simple commande echo, le résultat est le même, cela simule le résultat de l'interrogation d'une base. L'activité (encore en développement) est visible sur le site:
sur lequel on peut se connecter moyennant un login et un mot de passe.
Temps consacré: 150h
Ressources
Le cours STIC III de D.Schneider
ActionScript 3, Programmation séquentielle et orientée objet ,David Tardiveau, éditions Eyrolles, mars 2008.
Pratique d'ActionScript 3, forum de discussion
|
|
|