Correction Ed HTML Javascript

Séance d’Exercices Dirigés
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 nommée « questionnaire »,
l'autre « réponse » qui soient ainsi disposées :
frame questionnaire : frame réponse :

40% de la fenêtre 60% de la fenêtre
où le questionnaire est le questionnaire précédent :

(3 boutons et 3 champs de saisie texte) avec un bouton valider
Fonctionnement :
L’appui sur un bouton (nom, adresse ou téléphone) doit permettre d'afficher dans une fenêtre
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 fenêtre de gauche.
© CNAM Paris UE IHM NSY110 ED HTML et Javascript page 1/11

Rappel : alert(chaine) ouvre une fenêtre pop-up contenant la chaîne et un bouton OK.
Donnez le code source des divers fichiers nécessaires.
Réponses à l’exercice 1
1)
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title>corrige exo1</title>
</head>
<body>
<p><form name=monformulaire>
<table BORDER WIDTH="300" HEIGHT="125" >
<tr>
<td><input type=button value= Nom ></td>
<td><input type=text name=nom size=20></td>
</tr>
<tr>
<td><input type=button value= Telephone ></td>
<td><input type=text name=tel size=20></td>
</tr>
<tr>
<td><input type=button value= Adresse ></td>
<td><input type=text name=adresse size=20></td>
</tr>
</table>
</form>
</BODY>
</HTML>
Soit :

2)
Il vous faut trois fichiers :
1- Le fichier comportant la description des frames (frameset)
frames.html
<html>
<head>
<title>corrige exo 1 - 2°</title>
</head>
<FRAMESET cols="40%,*">
<frame name=questionnaire src=quest.html>
<frame name=reponse src=rep.html>
</FRAMESET>
</HTML>
2- le fichier questionnaire (quest.html) qui comporte les boutons et qui a le fonctionnement indiqué :
quest.html
<html>
<head>
<title>corrige exo2 questionnaire</title>
</head>
<body>
<p><form name=monformulaire>
<table BORDER WIDTH="300" HEIGHT="125" >
<tr>
<td><input type=button value= Nom onclick="alert(document.monformulaire.nom.value);"></td>
<td><input type=text name=nom size=20 value=''></td>

</tr>
<tr>
<td><input type=button value=Telephone onclick="alert(document.monformulaire.tel.value);"></td>
<td><input type=text name=tel value='' ” size=20></td>
</tr>
<tr>
<td><input type=button value= Adresse onclick="alert(document.monformulaire.adresse.value);"></td>
<td><input type=text name=adresse value='' size=20></td>
</tr>
</table>
<center>
<input type=button value=valider
onClick="window.parent.reponse.document.write('nom =', document.monformulaire.nom.value);
window.parent.reponse.document.write('<P>adresse=', document.monformulaire.adresse.value);
window.parent.reponse.document.write('</P><P>telephone=',document.monformulaire.tel.value);
window.parent.reponse.document.write('</P>');">
</form>
</BODY> </HTML>
et
3- le fichier reponse rep.html qui est un fichier vide de contenu mais qui sera remplacé par le résultat
du questionnaire généré :

rep.html
<html>
<head>
<title>corrige exo2 reponse</title>
</head>
<body></BODY>
</HTML>
Soit :
EXERCICE 2
Le but de cet exercice est de réaliser un questionnaire de type QCM en HTML et JavaScript.
Vous devez réaliser un cédérom de type pédagogique. Il vous est demandé de laisser à l’utilisateur
le soin de pouvoir s’auto-évaluer.
Compte tenu des contraintes et des limites qui vous ont été décrites dans le cahier des charges, vous
avez décidé de développer ce test suivant trois axes :
un formulaire (ou questionnaire) sous forme de QCM et utilisant les objets du langage
JavaScript,
une procédure 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 - réponses.
Chaque question est suivie d’un certain nombre de réponses, dont une ou plusieurs peuvent être
correctes.

A ce niveau, une certaine interactivité (limitée) est proposée à l’utilisateur, elle se matérialise par
trois boutons disposés au bas du formulaire à cet effet et consiste à :
1. apporter une correction dynamique du formulaire en lançant la fonction
correspondante,
2. effacer l’ensemble des sélections,
3. visualiser le corrigé complet du test.
Il existe une différence entre les notions de correction dynamique et de corrigé :

la correction est dynamique car elle teste la véracité des cases cochées par l’intermédiaire d’un
petit algorithme,
le corrigé affiche directement la réponse globale sans corriger le test.
2° La correction dynamique
La correction dynamique est réalisée par la fonction "testqcm(form)". Cette fonction est appelée
par une action sur le bouton "Correction", qui lit et teste les valeurs des réponses du formulaire
(passé en paramètre).
Le résultat des tests est affiché dans une fenêtre externe (illustré par l'image ci-dessous), et ne
donne à l'utilisateur que deux indices par question :
soit la réponse à la question est correcte,
soit la réponse à la question est incorrecte.
Pour des raisons essentiellement pédagogiques, les résultats affichés sont volontairement vagues.
En effet, l’objectif n’est pas de donner rapidement les bonnes réponses quels que soient les choix de
l’usager, mais au contraire, de forcer l’utilisateur à rechercher par lui-même le résultat global
parfait, en une ou plusieurs itérations du questionnaire.
3° Le corrigé du questionnaire
Dans le cas où l’utilisateur 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 n’est autre qu’une simple page HTML contenant du texte et qui
s’affiche dans une fenêtre externe comme le montre l’image ci-dessous.
Chaque fenêtre externe contient un bouton qui permet à l’utilisateur de pouvoir fermer
correctement le dite fenêtre.

TRAVAIL A FAIRE :
1) Ecrire le programme HTML du formulaire « QCM » représenté par l’image ci-dessous.

2) Ecrire le code HTML de la fenêtre d’affichage du corrigé représentée par l’image ci-
dessous.

3) Ecrire le code Javascript de la fonction "testqcm(form)" incluse dans le ficher HTML du
formulaire « QCM », et qui affiche les résultats de la correction dynamique représentés par
l’image ci-dessous.
Réponses à l’exercice 2
Il faut créer deux fichiers HTML contenant l’un le formulaire et l’autre le corrigé.
Programme source du fichier test_raid.htm contenant le questionnaire et la fonction: "testqcm(form)" :


<HTML>
<HEAD>
<TITLE>L'utilisation des procédés RAID1 et RAID5 - test</TITLE>
<META NAME="Description" CONTENT="L'utilisation des procédés RAID1 et RAID5 - test">
<META NAME="Keywords" CONTENT="Administration avec Windows NT">
<META NAME="Author" CONTENT="">
<META NAME="Generator" CONTENT="WebExpert3">
<META NAME="Organisme" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</HEAD>
<BODY BGCOLOR="#FFFFFF"
TEXT="#000000"
LINK="#000080"
VLINK="#800080"
ALINK="#FF0000"
SCROLL=AUTO LEFTMARGIN=20 RIGHTMARGIN=0 TOPMARGIN=0>
<FONT FACE="Times New Roman">
<TABLE WIDTH="100%" ALIGN="CENTER" CELLPADDING="0" CELLSPACING="0" BORDER="0">
<COL SPAN="3">
<TR>
<TD> </TD>
<TD>
<CENTER><H3><FONT COLOR="#800000">L'utilisation des procédés RAID1 et RAID5<BR>Test
d'auto-évaluation</FONT></H3>
<HR></CENTER>

<FONT SIZE=2>
<P><I><B><FONT COLOR="#008000">Qestionnaire sous forme de QCM. Les questions peuvent
comporter une ou plusieurs bonnes réponses.</FONT></B></I>
<FORM NAME="QCM" METHOD="get">
<P><B>Question 1 :</B>
<BR>Quel est le type de disque système qui réalise une copie exacte de toutes les données
d'une partition disque dans une autre partition ?
<I>
<LI><INPUT TYPE="checkbox" NAME="question1" VALUE="A"> RAID.<BR>

<LI><INPUT TYPE="checkbox" NAME="question1" VALUE="B"> Sauvegarde disque.<BR>
<LI><INPUT TYPE="checkbox" NAME="question1" VALUE="C"> Mise en miroir.<BR>
<LI><INPUT TYPE="checkbox" NAME="question1" VALUE="D"> Dépannage à chaud.<BR></I>
<BR>Quel est le type de disque système qui utilise de 3 a 32 disques physiques et est
aussi connu sous le nom de RAID5 ?
<I>
<LI><INPUT TYPE="checkbox" NAME="question2" VALUE="A"> Agrégats par bandes avec parité.<BR>
<LI><INPUT TYPE="checkbox" NAME="question2" VALUE="B"> Agrégats par bandes sans parité.<BR>
<LI><INPUT TYPE="checkbox" NAME="question2" VALUE="C"> Disques en miroir.<BR>
<LI><INPUT TYPE="checkbox" NAME="question2" VALUE="D"> Agrégats par bandes avec données
répétitives.<BR></I>
<BR>Quel sont les types de disques qui assurent la tolérance de pannes ?
<I>
<LI><INPUT TYPE="checkbox" NAME="question3" VALUE="A"> Les agrégats de partition.<BR>
<LI><INPUT TYPE="checkbox" NAME="question3" VALUE="B"> Les agrégats par bandes avec
parité.<BR>
<LI><INPUT TYPE="checkbox" NAME="question3" VALUE="C"> Les agrégats par bandes sans
parité.<BR>
<LI><INPUT TYPE="checkbox" NAME="question3" VALUE="D"> Les disques en miroir.<BR>
<LI><INPUT TYPE="checkbox" NAME="question3" VALUE="E"> RAID de niveau 0.<BR></I>
<P><CENTER>
<INPUT TYPE="button" VALUE="Correction" onClick="testqcm(this.form)">
<INPUT TYPE="reset" VALUE="Effacer">
<INPUT TYPE="button" VALUE="Corrigé" onClick="corrige()">
</FORM></center>
</FONT></TD>
<TD> </TD>
</TR>
</TABLE>
</FONT>
</BODY>
</HTML>
Programme source du fichier rep_raid.htm contenant le corrigé du test :


<HTML>
<HEAD>
<TITLE>L'utilisation des procédés RAID1 et RAID5 - réponse au test</TITLE>
<META NAME="Description" CONTENT="L'utilisation des procédés RAID1 et RAID5 - réponse au test">
<META NAME="Keywords" CONTENT="Administration avec Windows NT">
<META NAME="Author" CONTENT="">
<META NAME="Generator" CONTENT="WebExpert3">
<META NAME="Organisme" CONTENT=""></HEAD>
<BODY BGCOLOR="#FFFFFF"
TEXT="#000000"
LINK="#000080"
VLINK="#800080"
ALINK="#FF0000"
SCROLL=AUTO LEFTMARGIN=20 RIGHTMARGIN=0 TOPMARGIN=0>
<FONT FACE="Times New Roman">
<TABLE WIDTH="100%" ALIGN="CENTER" CELLPADDING="0" CELLSPACING="0" BORDER="0">
<COL SPAN="3">
<TR>
<TD> </TD>
<TD>
<CENTER><H3><FONT COLOR="#800000">L'utilisation des procédés RAID1 et RAID5<BR>Réponse
du test</FONT></H3>
<HR></CENTER>


<FONT SIZE=2>
<P><I><B><FONT COLOR="#008000">Les bonnes réponses aux questions apparaissent en couleur
rouge.</FONT></B></I>
<BR>Quel est le type de disque système qui réalise une copie exacte de toutes les données
d'une partition disque dans une autre partition ?
<I>
<LI> RAID.<BR>
<LI> Sauvegarde disque.<BR>
<LI><B><FONT COLOR="#FF0000"> Mise en miroir.</FONT></B><BR>
<LI> Dépannage à chaud.<BR></I>
<BR>Quel est le type de disque système qui utilise de 3 a 32 disques physiques et est
aussi connu sous le nom de RAID5 ?
<I>
<LI><B><FONT COLOR="#FF0000"> Agrégats par bandes avec parité.</FONT></B><BR>
<LI> Agrégats par bandes sans parité.<BR>
<LI> Disques en miroir.<BR>
<LI> Agrégats par bandes avec données répétitives.<BR></I>
<BR>Quel sont les types de disques qui assurent la tolérance de pannes ?
<I>
<LI> Les agrégats de partition.<BR>
<LI><B><FONT COLOR="#FF0000"> Les agrégats par bandes avec parité.</FONT></B><BR>
<LI> Les agrégats par bandes sans parité.<BR>
<LI><B><FONT COLOR="#FF0000"> Les disques en miroir.</FONT></B><BR>
<LI> RAID de niveau 0.<BR></I>
<CENTER><FORM>
<INPUT TYPE="button" VALUE="Fermer la fenêtre" Onclick="self.close()">
</FORM></CENTER>
</TD>
<TD> </TD>
</TR>
</TABLE>
</FONT>
</BODY>
</HTML>

Correction Ed HTML Javascript

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Correction Ed HTML Javascript

Hochgeladen von

Copyright:

Verfügbare Formate

Séance d’Exercices Dirigés

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

frame questionnaire : frame réponse :

où le questionnaire est le questionnaire précédent :

© CNAM Paris UE IHM NSY110 ED HTML et Javascript page 1/11

© CNAM Paris UE IHM NSY110 ED HTML et Javascript page 2/11

1- Le fichier comportant la description des frames (frameset)

<td><input type=text name=nom size=20 value=''></td>

© CNAM Paris UE IHM NSY110 ED HTML et Javascript page 3/11

1° Le formulaire type QCM

© CNAM Paris UE IHM NSY110 ED HTML et Javascript page 4/11

Il existe une différence entre les notions de correction dynamique et de corrigé :

© CNAM Paris UE IHM NSY110 ED HTML et Javascript page 5/11

1) Ecrire le programme HTML du formulaire « QCM » représenté par l’image ci-dessous.

© CNAM Paris UE IHM NSY110 ED HTML et Javascript page 6/11

© CNAM Paris UE IHM NSY110 ED HTML et Javascript page 7/11

Programme source du fichier test_raid.htm contenant le questionnaire et la fonction: "testqcm(form)" :

// ** fonction qui affiche le corrigé du test dans une fenêtre externe **

// ** fonction qui lit et teste les valeurs des réponses **

© CNAM Paris UE IHM NSY110 ED HTML et Javascript page 8/11

© CNAM Paris UE IHM NSY110 ED HTML et Javascript page 9/11

Programme source du fichier rep_raid.htm contenant le corrigé du test :

© CNAM Paris UE IHM NSY110 ED HTML et Javascript page 10/11

© CNAM Paris UE IHM NSY110 ED HTML et Javascript page 11/11

Das könnte Ihnen auch gefallen

// fonction qui affiche le corrigé du test dans une fenêtre externe

// fonction qui lit et teste les valeurs des réponses