Staf14 ex3 questionnaire JavaScript (rapport)

Introduction

Cet exercice a été réalisé pour le diplôme Staf, dans le cadre du cours Staf 14. Contrairement à la période précédente, où je m'étais engagé à respecter un formulaire trouvé sur internet pour l'intégrer dans le projet staf15, je me suis proposé ici d'adopter une démarche quelque peu différente: je voulais que ce travail ait du sens pour moi et puisse également servir, soit à des novices en javascript, soit à moi par la suite, lorsque mes connaissances se seront affaiblies.

La démarche était par ailleurs plus portée sur la conception d'un "objet" pédagogique (questionnaire, page internet, programme, etc.) que sur l'apprentissage d'un langage de programmation. Concevoir un "produit fini", pertinent et directement utilisable dans un contexte pédagogique me semblait un pari perdu d'avance. D'un autre côté, je ne pense pas travailler beaucoup avec ce langage, sauf en ce qui concerne les formulaires, car javascript me semble très adapté pour effectuer des tâches (vérification, etc.) avant d'envoyer des informations sur un serveur. C'est pour cette raison que je me suis lancé à nouveau dans un projet de type "questionnaire".

Il me fallait donc un thème pour donner du sens au questionnaire. J'ai décidé de permettre à l'utilisateur de creuser quelque peu une notion commune, presque banale de nos jours : les "symboles religieux". Ce genre de thème n'apparaît pas souvent dans des questionnaires de ce type et c'est peut-être cela qui m'a poussé à faire porter la discussion sur ce thème. En effet, que l'on soit croyant ou non, nous vivons dans un univers fortement imprégné des valeurs judéo-chrétiennes. Il suffit de penser aux fêtes qui ponctuent l'année, aux diverses étapes de la vie (baptême, mariage, enterrement, etc.), ou tout simplement aux croix que nous portons autour du cou. Ces quelques questions permettront soit de découvrir le sens d'actions quotidiennes ou de certaines phrases employées à tout bout de champ, soit de parfaire notre connaissance en la matière.

Le deuxième objectif visé dans cette démarche est double. Tout d'abord, faire découvrir au visiteur ce qu'il est possible de faire avec le langage Javascript. C'est pour cette raison que j'ai décidé de tester différentes manières de traiter chaque question et de livrer un feed-back. Il est par conséquent normal que ce questionnaire n'ait pas une forme homogène. Par la suite, lors de projet sérieux, il sera bon de ne pas trop proposer de codes javascript différent (ergonomie des pages ou du projet). Enfin, cette page me permettra facilement par la suite de retrouver de nombreux exemples de codes réutilisables dans d'autres contextes. C'est ainsi que chaque code javascript de ma page est expliqué et commenté lorsque le visiteur clique sur cette image, que j'ai réalisée moi-même grâce au logiciel d'animation de Paint Shop Pro 7:

Notons que dans un projet pédagogique, l'utilisation de javascript me semble plus adaptée pour illustrer et implémenter certaines parties du dispositif, que pour constituer le tout. Le questionnaire que j'ai construit serait donc plutôt utile soit au début du processus pédagogique (dans les phases de pré test ou de test sur les pré requis) ou alors à la fin d'une session pédagogique (post tests). Cet exercice montre bien la philosophie Tecfa: utiliser une technologie au service d'un projet pédagogique.

Rapports

Ce rapport consistera donc en la somme des différents mini-rapports que contient la page javascript. Ces rapports s'ouvrent dans une nouvelle fenêtre

• au tout début, un prompt permet au visiteur de noter son nom et un deuxième prompt reprend ce nom pour introduire sommairement le visiteur sur la page. Ainsi, il se sent personnellement interpellé et sait en gros à quoi il doit s'attendre
• l'introduction au questionnaire
• première question: contient 4 sous questions et le visiteur doit avoir répondu à toutes les questions pour recevoir un feed-back. Je teste ici les fenêtres alert.
• deuxième question: propose à l'utilisateur une ou plusieures aides (en l'occurence 2). Ces aides peuvent l'aider à trouver la réponse, qui de toute façon sera transmise dans une fenêtre alert dès la validation. Il est intéressant de mentionner encore que ces aides (qui me permettent de tester l'ouverture de fenêtres normales...) peuvent contenir des liens renvoyant sur d'autres pages internet. L'aide devient donc facilement une porte d'accès sur l'espace web. On pourrait par exemple imaginer que dans la fenêtre soit présent un moteur de recherche.
• troisième question: m'a permis d'illustrer la possibilité de recevoir directement un feed-back, sans devoir passer par une seconde action: 1) cocher un bouton radio et 2) cliquer sur "vérifier"... Cette manière de faire est propice pour un public faiblement scolarisé, dans le sens que javascript permet de raccourcir le nombre d'actions et donc de rendre l'interaction plus abordable. Ici, le feed-back s'ouvre dans de nouvelles fenêtres.
• quatrième question: cette question essaie d'utiliser javascript pour réduire la charge cognitive de l'apprenant. En effet, les résultats sont rendus visibles, sans que la page contenant les questions ne disparaissent, ou ne soit cachée par l'apparition d'une nouvelle fenêtre. L'apprenant a ainsi tout sous les yeux...

Il faut encore noter une fonctionnalité que j'ai ajouté dans cet exercice mais qui serait beaucoup plus utile dans le cas de formulaire plus long: la possibilité de signaler que la question a été traitée. Ici, cela se fait en "cochant" un petit rond vert, qui du coup devient rouge. Mais on pourrait imaginer d'autres scénarios. Par exemple, cela pourrait se faire de manière automatique, dès que l'utilisateur entre une donnée dans un champ.

Difficultés rencontrées

Je n'ai pas rencontré de difficultés particulières pour comprendre les différents codes, les retravailler et les adapter ou les compléter. Il faut dire que depuis février 1998, je me suis habitué à voir ces codes dans les codes sources de pages internet et que j'en ai beaucoup copié/collé pour les insérer dans mes pages en transformant certains paramètres pour qu'ils fonctionnent.

Avant de commencer, je suis allé voir les pages des travaux de l'année passée pour d'une part tenter de lire les codes et les comprendre (c'est ainsi que j'apprends) et d'autre part voir ce qu'il est possible de réaliser avec ce langage. J'ai eu de la peine pour certains codes mais sinon je trouve qu'ils sont aisément compréhensibles et reproduisibles. Il est évident que pour cette première confrontation avec javascript, je ne voulais pas me lancer dans une entreprise trop vaste et pas efficiente au niveau du temps.

Par contre j'ai vite constaté mon incapacité à créer de toutes pièces un code personnel. Il m'aurait pour cela fallu y passer beaucoup plus de temps et apprendre vraiment ce langage. Je me suis donc cantonné à apprendre les bases du langage et à être capable de le lire. Je me suis inspiré de certains codes pour "re"créer les miens. Disons plus précisément qu'ils ont été adaptés à mon contexte.

En ce qui concerne les multiples erreurs ou inexactitudes commises en cours d'élaboration, je dois dire que le débogueur javascript (javascript: dans le browser) m'a été d'une grande utilité! J'ai ainsi pu corriger rapidement mes erreurs en sachant avec précision ce qui ne jouait pas.

Conclusion

Ce langage qui ne me fascinait pas du tout au début, depuis que je connais PHP, m'a semblé très puissant pour certaines choses, comme par exemple la vérification de formulaire avant l'envoi. Couplé avec du PHP, le mélange doit être redoutable. En tout cas, il permet de rendre les pages html un peu plus dynamiques et intéressantes.

Je pense avoir atteint mes objectifs et j'ai constaté qu'en cherchant à expliquer les codes utilisés, j'ai en fait énormément appris. Je me sens maintenant capable de lire ce code et d'en comprendre les caractéristiques principales.

Ressources

• les pages des étudiants de l'année précédente
• un cours en ligne, proposé par l'éditeur javascript.
• Javascript 1.2 Reference Guide.
• Javascript 1.2 Guide.