Créer des exercices interactifs sans programmer

Il existe des logiciels gratuits pour programmer des exercices interactifs :
1- le plus connu et le plus complet est hot patatoes, il permet de faire des QCM, des textes à trous, des phrases mélangées à remettre en ordre, des mots croisés :
le site francophone avec tutoriaux et téléchargment : http://membres.lycos.fr/toilefle/home.php
le site officiel : http://web.uvic.ca/hrd/halfbaked/index.htm#downloads

2- Pour créer des schémas ou des exercices de classement interactifs (en "drag and drop") voici une page web qui ne nécessite aucune installation.
a) Regardez ce qu'elle permet de faire : exemple de schéma, exemple de classement,
b)
accèdez à la page de création d'exercices (attention : page réservée à Internet Explorer : elle fait planter Netscape !) mais le code généré fontionnera avec Netscape 4, 6 et 7, Mozilla, Internet Explorer, Opera.
c) Vous pouvez Télécharger la page et les images nécessaires zippées.

3- des outils pour les sciences économiques et sociales :
a- une applet java pour représenter graphiquement des données statistiques
b- un lexique économique et sociale à intégrer dans vos pages web


Créer des exercices interactifs en programmant

Le javascript

Exemples : un QCM, réponses avec des calques, des révisions plus longues, déplacer des images, jeu sur les calques
I. le html
II. Insérer du code javascript
III. Les différents cadres pour que l'élève réponde
cas particulier : déplacer des images.
cas particulier : jeu sur les calques : l'exemple, le code
IV. Des fenêtres pour que des réponses apparaissent
V. Compter les points - Ecrire une fonction
VI. Quelques lignes utiles
VII. Pour un cours de programmation en javascript classique :
http://fabien.medina.free.fr/javascript/index.html
http://assos.ece.fr:8001/ile/old/new/formjs/cours1.htm


 
  Ce javascript fonctionne avec Internet Explorer 5 et plus, Netscape 4.X et plus, Mozilla


B-A-BA

1- le html

Une page web est un petit programme écrit dans le langage html. Pour le voir, faites dans Netscape : Affichage / source de la page, ou dans Internet Explorer : Affichage / source.
Le html a l'inconvénient de ne pas être dynamique, le javascript le permet, bien que de manière limitée. Son avantage est d'être simple par rapport aux langages plus complexes : java, CGI, SSI ...

Pour le html, vous avez simplement besoin de savoir que toute page commence par :
<html>
et finit par :
</html>

Elle se compose de deux parties :
- la tête qui commence par <head> et finit par </head>
- le corps qui commence par <body> et finit par </body>

Pour écrire une page en html, le mieux est d'utiliser les programmes simples et gratuits tels que Netscape Composer (dans Netscape : cliquer sur Communicator / composer) ou Frontpage express (en général, il est sur les CD d'Internet Explorer mais nécessite parfois de cocher la case "installer frontpage express" pour qu'il soit installé). Vous pouvez bien sûr utiliser des logiciels plus complexes comme Dreamweaver. En utlisant ces programmes vous évitez d'avoir à apprendre le html qui n'a aucun intérêt.

Vous pouvez tester ce petit programme :
dans le bloc note de windows écrivez sur une page blanche :
<html>
<head>

</head>

<body>

Ceci est ma première page web.

Quelle est la nationalité d'Elis Peters ?

</body>

</html>
Enregistrez cette page sous le nom : test.html, puis ouvrez-là dans votre navigateur habituel (Fichier / ouvrir dans Internet Explorer; ou fichier / consulter une page dans Netscape).
Vous voyez écrit : Ceci est ma première page web ? alors vous êtes prêt pour programmer en javascript !


2- Insérer du javascript

Préparez votre page dans Netscape Composer ou dans Frontpage express, enregistrez-la.
Ouvrez-la ensuite dans le bloc-note.
Frontpage express le permet directement dans Affichage / HTML;

Dreamweaver a une fenêtre pour cela (menu "Affichage" , "Code");

Netscape n'a rien prévu et vous devez ouvrir dans le bloc-note votre fichier.

Sélectionnez et copiez le code désiré, puis collez-le dans le bloc-note. Enregistrez. Visualisez votre nouvelle page.

Exemple : dans votre page précédente (dans le bloc-note), copiez après "Peters", ce qui suit :
 
<br><input type="radio" name="b1" value="1">anglaise 
 <br><input type="radio" name="b1" value="2">am&eacute;ricaine 

 <br><input type="radio" name="b1" value="3">su&eacute;doise 
Enregistrez. Dans Internet Explorer faites "Actualiser", dans Netscape "Recharger".

Vous devez voir apparaître, une page avec :
 

anglaise

américaine

suédoise

En cliquant sur une des réponses possibles, un point noir apparaît dans le cercle et (sur cette page, pas encore sur la vôtre) une fenêtre apparaît pour vous dire si vous avez juste ou faux.

vers la suite
 



  Réalisé par Isabelle Gautier, la diffusion de cet article est protégée par la licence LLDL-v1, Licence de Libre Diffusion des Documents, http://pauillac.inria.fr/~lang/licence/v1/lldd.html . Vous pouvez librement utiliser, modifier et diffuser ce document mais uniquement à titre gratuit.

retour vers l'accueil du site de SES à Nice