Atelier Images
|
Images et JavaScript
|
De quoi s'agit-il ?
|
Pour JavaScript les images sont des objets du document qui possèdent
une propriété SRC qui indique le nom du fichier associé. Il
suffit donc de modifier cette propriété pour changer l'image
affichée.
L'idée est de proposer une série d'exercices dont les énoncés
sont formés par des images. L'
exemple proposé la met en oeuvre sur des exercices de calcul
mental.
|
Comment faire ?
|
1. Il faut commencer par préparer les images qui permettront
de former les énoncés. Ces images peuvent contenir des mots qui
assemblés dans un tableau formeront une phrase. Il est préférable
de les créer avec un fond transparent.
2. Il faut ensuite créer le document HTML en donnant un
nom à chacune des images qui compose l'énoncé. Ce nom permettra
de faire référence à l'image avec JavaScript. L'objet document gère
en effet un tableau images qui permet de travailler sur une
image à partir de son numéro d'ordre ou à partir de son nom. Le nom
est en général plus parlant, donc plus simple à utiliser. Un formulaire
permettra de recueillir une réponse dans une ligne d'édition et
de lancer une vérification avec un bouton. On pourra aussi prévoir
une ligne d'édition pour afficher un score.
3. Il reste à écrire le script JavaScript qui donnera vie
à l'ensemble.
Des variables devront contenir les données caractérisant
la question posée pour permettre de choisir les images à afficher.
Une fonction nouveau() sera chargée de fixer les valeurs
attribuées à ces variables (on peut utiliser la fonction Math.random()
pour introduire du hasard) puis de former le contenu de la propriété SRC de
chacune des images formant l'énoncé. Si une gestion du score est
prévue, la fonction nouveau() gèrera aussi son affichage.
Une fonction verif() sera chargée de vérifier les réponses
données puis de construire un nouvel énoncé en appelant la fonction
nouveau.
4. Consultez le
fichier source de l'exemple du calcul mental pour voir de façon plus
précise comment ces idées sont mises en oeuvre.
|
Votre mission
|
Votre mission, si vous l'acceptez, consiste à réaliser un document
html sur le modèle du
calcul mental. Il proposera une série d'exercices dont les énoncés
seront contenus dans des images.
|
Retour
|
|