STIC:STIC II - exercice 14 (Nestor-Pixel)

Cette page fait partie des cours STIC I et STIC II

Enoncé de l'exercice 14

Cet exercice du cours STIC II vous permet de vous familiariser

• avec le language JavaScript
• avec le DOM (Document Object Model), et notamment avec l'interface pour traiter les formulaires

Tâche

Créez une petite application Formulaire (X)HTML/JavaScript de votre choix. L'utilisateur doit pouvoir rentrer des données et l'application écrite avec JavaScript en fait quelque chose. La solution la plus simple consiste à programmer un petit quiz avec des questions radio à choix multiple. Alternativement, vous pouvez aussi programmer un outil interactif, par exemple exemple une visualisation de fonctions mathématiques .

• Emplacement du rapport

/etu-maltt/nestor/<login>/stic/ex14/

Outils

• Un éditeur HTML/JavaScript

Contraintes

1. Le choix du thème n'a pas beaucoup d'importance, enfin il faut un sujet pédagogique cohérent.
2. L'utilisation doit être ergonomique
3. dispositif: HTML/XHTML ou XForms en input (formulaires)
4. Les utilisateurs doivent recevoir un feed-back intéressant (en fonction du thème choisi). Lorsque, par exemple, il s'agit d'un test pédagogique il faut donner un bon feedback (négatif ou positif).
5. Le feedback peut se faire avec une fenêtre popup, une nouvelle page ou encore via une modification du contenu de la page (c.a.d vous pouvez utiliser DHTML ou SVG dynamique).

Le rapport:

• Titre, auteur et date
• Liens vers le résulat (fichier HTML et le code JavaScript)
• Objectifs du module: Il sert à quoi / quelle population ?
• La production: bref résumé de la démarche
• Difficultés, auto-évaluation, remarques
• Ressources utilisées, bibliographie.

Evaluation

1. le script marche
2. validité de (X)HTML (et SVG ou autres formats utilisés)
3. créativité
4. utilité
5. ergonomie de la page
6. respect de principes de design (par ex. "instructional design pour des QCM)
7. points bonus: tester si l'utilisateur a bien rempli le formulaire, utilisation de nouvelles fenêtres html pour le feedback, etc.

Activités en classe

• Quiz simple
• DHTML simple
• SVG dynamique simple

Liens

Slides

• http://tecfa.unige.ch/guides/tie/html/html-forms/html-forms.html (rappel)
• http://tecfa.unige.ch/guides/tie/html/js-intro/js-intro.html
• http://tecfa.unige.ch/guides/tie/html/xml-dyn/xml-dyn.html (à option)
• http://tecfa.unige.ch/guides/tie/html/js-dom/js-dom.html

DOM - Introductions ailleurs

• Level 0 DOM et sa traduction française par Peter-Paul Koch
• W3C DOM-Introduction par Peter-Paul Koch
• HTML DOM Tutorial (W3Schools)

JavaScript - Introductions ailleurs

• C.f. en:JavaScript