Pour ce travail, mon objectif est de réaliser un self-test accompagné d'éléments de didacticiel sur la navigation.
La partie didacticiel est composée de:
- fenêtres reliées à des sites d'enseignement de la navigation (Vendée-globe Junior / Céméa),
- fenêtres de définition de vocabulaire marin (tirées d'un livre sur la navigation),
La partie self-test :
- questionnaire utilisable dans un module d'enseignement à distance (construit à partir d'informations trouvées dans les sites et des livres).
Pourquoi la navigation ?
En premier lieu parce que j'aime naviguer, mais aussi parce que nous construisons un module avec WebCT pour staf 17 sur le code maritime. Choisir ce sujet est une manière de m'y préparer.
Mon but est que l'utilisateur trouve dans ce document de quoi tester ses connaissances de plusieurs manières :
- s'il connaît déjà la navigation maritime : il répond aux questions du test sans rechercher d'informations dans les différentes fenêtres...
- s'il ne connaît pas ce domaine : il a de quoi trouver des informations ainsi que vérifier ses réponses...
- s'il cherche à apprendre le code maritime : il peut reprendre ce questionnaire jusqu'à ce qu'il le réussisse sans erreur et sans aide.
Dans le but de tester différentes commandes en JAVASCRIPT, j'ai décidé de créer des :
1- Boutons de choix de couleur d'arrière-plan ('switch')
2- Fenêtres s'ouvrant sur des animations trouvées sur un site de navigation ('window open' dans STAF14)
3- Fenêtres donnant des définitions à certins termes marins('window open' dans STAF14)
4- Questions à choix multiple, dont la réponse est directement vérifiable par un bouton 'Réponse'('window open' dans STAF14)
5- Vérification du score (fenêtre alert, feed-back succint).
J'ai démarré mes premiers essais avec la même feuille de style que pour les exercices précédents de STAF14, puis j'ai modifé les couleurs des arrières-plans de mes titres, en couleurs plus 'marines'.
Plus tard j'ai eu envie d'insérer une ou deux photos... et finalement j'ai choisi une image tirée du site du Vendée-Globe que j'ai utilisée comme arrière-plan en la modifiant dans PaintShopPro et en lui ajoutant des textes-titres : manière de changer quelques peu ma mise en page sans y perdre trop de temps.
Inconvénient : images parfois longues à charger...
Vu les difficultés que j'avais rencontrées pour PHP, j'ai décidé de me mettre assez tôt à ce travail.
J'ai d'abord utilisé :
- la brochure de 'CompétenceMicro : HTML niveau 2' pour essayer différents types de commandes : certaines marchaient très bien, d'autres pas (ex: les fenêtres).
- les pages d'exemple de Staf 14.
Après de heures de tâtonnement j'ai enfin réussi à faire s'ouvrir quelques fenêtres :
- de sites de navigation 'Vendée Globe Junior' et 'Céméa',
- de définition de termes marins.
....avec Netscape 6 à l'UNI !
Contente de cette première base, je me suis investie dans le gros projet staf 13 que nous devions réaliser et lorsque j'ai repris mon travail, je fus extrêmement déçue de constater chez moi qu'avec Netscape 4.0 aucune fenêtre d' animation ne s'ouvrait et une fenêtre de définition sur deux. Parcontre avec Internet Explorer c'était le contraire...
Même de simples fenêtres de 'définition' ou de 'réponse' construites en copié-collé ne s'ouvrent pas selon le navigateur utilisé. Par contre la fenêtre du site 'Céméa' s'ouvre dans n'importe quelle situation !!!
Il m'a donc fallu travailler esentiellement à l'UNI... où trouver les informations nécessaires pour modifier le code, afin que les fenêtres s'ouvrent dans les différents navigateurs ???
Autre difficulté : 'l'hyper-sensibilité' de Javascript. Exemple si l'on écrit des " dans le texte d'une fenêtre... elle ne s'ouvre plus !
Dans Explorer, Javascript ne supporte aucune ponctuation, aucun espace dans la définition de la fonction 'fenêtre' :
win = window.open("", "BabordAmure", "width=650,height=250,status=1,resizable=1"); ou Question1...
Dans les textes des fenêtres : ne pas aller à la ligne si on a mis un BR !
Quelques heures de recherche pour déterminer ces points!
Essai d'insérer des images (schémas capturés avec PSP), mais ça bloque l'ouverture des fenêtres avec Explorer et Nescape6.
Comme premier essai, j'ai copié du code d'ouverture de fenêtres. Quand il a fonctionné, j'ai multiplié ce code. Résultat des kilomètres de code !.
Vyvian m'a indiqué la manière de créer 2 seules fonctions :
- une pour les fenêtres ouvrant des pages de sites WEB
- une autre pour toutes les autres fenêtres, qui pourraient soit être des pages HTML (j'en ai exprès laissé 3 exemples dans les définitions), soit du texte écrit dans le BODY.
J'ai entièrement retravaillé ma page de code en tenant compte de mettre un \ devant chaque ' (apostrophe).
Le calcul des scores m'a posé quelques problèmes : comment initialiser les variables de départ en tenant compte que chaque question comporte une réponse juste valant un point, mais qu'une question (la 14) comporte 10 réponses 'radio' valant 0,1 point chacune.
J'étais partie pour créer 20 questions, mais j'ai laissé tombé les 5 dernières car ce questionnaire devenait trop long et je ne faisais que répéter les mêmes problèmes techniques.
Dans un module d'apprentissage à distance les self-tests doivent être courts et fréquent, accessibles à chaque chapitre. Celui-ci serait un self-test récapitulatif de plusieurs chapitres abordés.