Tutoriel EToys
Questionnaire interactif
par Gilles G. Jobin, janvier 2007
Le but de ce tutoriel (réalisé avec l'image 3.8) est de vous enseigner comment créer un questionnaire interactif.
Préalable
Ce tutoriel est pour les débutants qui connaissent les rudiments de Squeak : tirer des objets des tiroirs, utiliser les halos, invoquer des scripts.
Ce que vous apprendrez
- Comment faire une page d'un livre;
- Comment montrer et cacher des objets;
- Differents items des menus (surtout au niveau des couleurs);
- Utiliser un script dans un script.
- Manipuler l'objet TEXTE.
Introduction
Vous réaliserez un questionnaire à cinq choix de réponse. En cliquant un choix, un message de bravo ou une explication apparaîtra.
Comment utiliser ce tutoriel
Ouvrez Squeak tout en gardant ce tutoriel ouvert dans une fenêtre de votre système d'exploitation.
Sans vous attarder à essayer de tout comprendre, lisez le tutoriel en entier avant de commencer. Cela vous permettra de vous donner une idée générale du projet.
Les videos sont réalisées en Flash (merci vnc!). Ils illustrent la réalisation de l'étape. En cliquant sur le lien, un nouvelle fenêtre de votre navigateur surgira. Au besoin, visionnez plusieurs fois la vidéo. Vous pouvez aussi la mettre sur pause pour vous donner le temps d'exécuter les actions dans Squeak.
Le questionnaire
Nous offrirons cinq réponses à la question suivante : Quelle est la capitale du Canada ?
A - Toronto
B - Québec
C - Ontario
D - Ottawa
E - Aucune de ces réponses.
À chacune de ces réponses, un message particulier sera envoyé à l'utilisateur :
A : Non, Toronto est la capitale de la province de l'Ontario
B : Désolé, la ville de Québec est la capitale de la province de Québec
C : Mais non ! L'Ontario est une province du Canada.
D : Bravo !
E : Il y a bel et bien une bonne réponse. Essayez de nouveau !
Étape 1 : L'objet livre
- Du tiroir Accessoire, tirez un objet LIVRE vers le monde.
- Agrandissez-le suffisamment pour lui permettre d'accueillir votre question et les réponses.
- Vous pouvez modifier les caractéristiques de la page pour rendre le livre plus attrayant.
Vidéo Flash
Étape 2 : Rédaction de la question, des réponses et des messages
- Du tiroir accessoire, sortez un objet texte et écrivez-y la question.
- Puis, toujours du tiroir accessoire, tirez un autre objet texte et écrivez-y la première réponse : Toronto.
- En dupliquant ce dernier objet, écrivez les quatre autres réponses.
Vidéo Flash
Étape 3 : On associe des boutons aux choix de réponse
- Du tiroir accessoire, tirez un objet bouton.
- Selon vos goûts, modifiez les propriétés de ce bouton (couleur de fond, bordure)
- Modifiez aussi l'étiquette de ce bouton. Pour ce faire, faites apparaître le visualiseur et choisissez la catégorie BOUTON.
- Par réplication de ce bouton, créez-en quatre autre pour les autres choix de réponses. Pour chacun, modifiez selon le besoin son étiquette.
- Prenez le temps de renommer vos boutons. Par exemple, BoutonA, BoutonB, etc.
Vidéo Flash
Étape 4 : Un objet texte par message
- Du tiroir accessoire, tirez un objet texte et écrivez-y le message envoyé à l'utilisateur au cas où il choisirait la réponse A.
- Par réplication, écrivez les quatre autres messages.
- Prenez le temps de renommer ces textes. Par exemple, messageA, messageB, etc.
Vidéo Flash
Étape 5 : Script qui cache les messages et positionnement
- Il faut maintenant écrire un script qui cache ces messages à l'utilisateur.
- Ouvrez le visualiseur du messageA.
- De la catégorie script, déposez un script vide dans le monde. Renommez-le cacher.
- Dans le visualiseur du messageA existe la catégorie DIVERS. Amenez la tuile cache dans le script cacher.
- Pour chacun des messages, amenez-y la tuile cacher dans le script cacher.
- Ensuite, pour bien vous assurer que le script fonctionne, exécutez-le une fois (point d'exclamation à gauche). Si le script fonctionne bien, vous devrez faire réapparaître le texte. Pour ce faire, vous pouvez utiliser le menu auteur dans le menu monde (bouton gauche sur le monde).
- Déplacez ensuite chaque message dans le livre à un endroit que vous jugez approprié. Les messages seront l'un par dessus l'autre.
Vidéo Flash
Étape 6 : Scripts associés aux boutons
- Pour chaque bouton, il faut maintenant faire un script qui :
- Fera disparaître tous les messages
- Fera apparaître le message lié au bouton.
- Commençons par le boutonA. Faites apparaître son halo.
- Cliquez ensuite sur l'icône au bas du halo (le gros bouton). Une tuile associé au bouton surgira.
- Vous devez y déposer deux tuiles. D'abord, du visualiseur du messageA, prenez le scrit cacher. Puis de ce même visualiseur choisissez de la catégorie DIVERS la tuile montre. Testez ce script.
- Pour les quatre autres boutons, faites de même : choisissez le script du messageA, puis des objects messages correspondants, la tuile montre de la catégorie DIVERS.
Vidéo Flash
Voilà ! Le projet est terminé.