Vous êtes sur la page 1sur 6

Sance dED n 5 : HTML et JavaScript

EXERCICE 1
1) le but de cet exercice est de construire l'interface suivante en html:

2) Par la suite on veut un document compos de deux frames, l'une nomme questionnaire ,
l'autre rponse qui soient ainsi disposes :

frame questionnaire :
40% de la fentre

frame rponse :
60% de la fentre

o le questionnaire est le questionnaire prcdent :


(3 boutons et 3 champs de saisie texte) avec un bouton valider

fonctionnement :
L'appui sur un bouton (nom, adresse ou tlphone) doit permettre d'afficher dans une fentre
alerte la valeur du champ de saisie texte correspondant. L'appui sur le bouton valider affiche
dans la frame de droite les 3 champs de saisie de la fentre de gauche.
rappel : alert(chaine) ouvre une fentre pop-up contenant la chane et un bouton OK.
Donnez le source des divers fichiers ncessaires.

EXERCICE 2
Le but de cet exercice est de raliser un questionnaire de type QCM en HTML et JavaScript.
Vous devez raliser un cdrom de type pdagogique. Il vous est demand de laisser
lutilisateur le soin de pouvoir sauto-valuer.
Compte tenu des contraintes et des limites qui vous ont t dcrites dans le cahier des charges,
vous avez dcid de dvelopper ce test suivant trois axes :
un formulaire (ou questionnaire) sous forme de QCM et utilisant les objets du langage
JavaScript,
une procdure de correction dynamique du questionnaire (crit en JavaScript),
un corrig complet du test dans une page HTML.

1 Le formulaire type QCM


La plupart des questionnaires de type QCM utilisent le principe de questions - rponses.
Chaque question est suivie dun certain nombre de rponses, dont une ou plusieurs peuvent
tre correctes.
A ce niveau, une certaine interactivit (limite) est propose lutilisateur, elle se matrialise
par trois boutons disposs au bas du formulaire cet effet et consiste :
1. apporter une correction dynamique du formulaire en lanant la fonction
correspondante,
2. effacer lensemble des slections,
3. visualiser le corrig complet du test.
Il existe une diffrence entre les notions de correction dynamique et de corrig :

la correction est dite dynamique quand elle teste la vracit des cases coches par
lintermdiaire dun petit algorithme,

le corrig affiche directement la rponse globale sans corriger le test.


2 La correction dynamique
La correction dynamique est ralise par la fonction "testqcm(form)". Cette fonction est
appele par une action sur le bouton "Correction", qui lit et teste les valeurs des rponses du
formulaire (pass en paramtre).
Le rsultat des tests est affich dans une fentre externe (illustr par l'image ci-dessous), et ne
donne l'utilisateur que deux indices par question :

soit la rponse la question est correcte,


soit la rponse la question est incorrecte.
Pour des raisons essentiellement pdagogiques, les rsultats affichs sont volontairement
vagues. En effet, lobjectif nest pas de donner rapidement les bonnes rponses quels que
2

soient les choix de lusager, mais au contraire, de forcer lutilisateur rechercher par luimme le rsultat global parfait, en une ou plusieurs itrations du questionnaire.

3 Le corrig du questionnaire
Dans le cas o lutilisateur ne souhaite pas effectuer ce travail, il lui est toujours possible de
pouvoir consulter directement le corrig du questionnaire en cliquant sur le bouton
"Corrig".
Le corrig du questionnaire nest autre quune simple page HTML contenant du texte et qui
saffiche dans une fentre externe comme le montre limage ci-dessous.
Chaque fentre externe contient un bouton qui permet lutilisateur de pouvoir fermer
correctement la dite fentre.

TRAVAIL A FAIRE :
1) Ecrire le programme HTML du formulaire QCM reprsent par limage ci-dessous.

2) Ecrire le code HTML de la fentre daffichage du corrig reprsente par limage cidessous.

3) Ecrire le code Javascript de la fonction "testqcm(form)" incluse dans le ficher HTML du


formulaire QCM , et qui affiche les rsultats de la correction dynamique reprsents par
limage ci-dessous.