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