Créer un
Questionnaire à Choix Multiple
en HTML basique

6

Cannevas

Ci-après, à l'intention spécialement des novices en la matière, le cannevas d'un exercice comportant 15 questions (on pourra augmenter ou réduire leur nombre à loisir). Pour l'utiliser, copier le code de la première à la dernière ligne, sans plus:

le coller dans un éditeur de texte tel que le bloc-notes (NOTEPAD), procéder aux modifications et éventuellement aux adaptations nécessaires (éléments en couleurs et en gras), sauvegarder le tout sous un nom approprié avec l'extension htm (nomdufichier.htm - pas d'accent ni d'apostrophe dans le nom) et tester avec un navigateur (Fichier / Ouvrir...).

Imprimer éventuellement cette page avec une imprimante couleur pour s'y retrouver plus facilement.

Les données de l'exercice (questions) sont en caractères gras bleus.
Les éléments de programmation sont en caractères gras verts.
Les élements d'information sur la page sont en caractères gras rouges.

Remarques

La taille des cellules est 30% et 70%.
La taille du champ d'affichage du message a été fixée à 68 caractères.
Les balises de retrait à droite <blockquote> et </blockquote> ont été supprimées. Pour assurer tout de même un certain retrait, la distance entre les bords des cellules et le texte a été fixée à la valeur 10: cellpadding="10

On trouvera en fin de page les codes correspondant aux caractères nationaux.

Apparence approximative

 

Script

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

<html>

<head>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

<title>Mon exercice</title>

<meta name="author" content="Mon nom - script: Burkhardt / Bernhard Jacobs / Jean-Paul Cronimus">

<meta name="description" content="Exercice: QCM sur...">

<meta name="classification" content="Education">

<meta name="keywords" content="motcle1,motcle2,etc">

</head>

<body bgcolor="#EBE9E9" text="black" link="blue" vlink="purple" alink="red">

<p align="center"><b><font size="5" color="#230168">Titre</font></b></p>

<p align="center"><b><font size="4" color="#025C5C">Questionnaire &agrave; choix multiple</font></b></p>

<p align="center"><font size="1">&nbsp;</font></p>

<p><b>a) Enonce1</b><form method="post">

<table border="0" width="100%" cellpadding="10">

 <tr>

   <td width="30%">

     <p>a.<input type="radio" name="mc" value="Correction1"

       onclick="this.form.feedback.value= this.value">Proposition1<br>

     b.<input type="radio" name="mc" value="Correction2"

       onclick="this.form.feedback.value= this.value">Proposition2<br>

     c.<input type="radio" name="mc" value="Correction3"

       onclick="this.form.feedback.value= this.value">Proposition3<br>

     d.<input type="radio" name="mc" value="Correction4"

       onclick="this.form.feedback.value= this.value">Proposition4</td>

   <td width="70%"><p><input type="text" name="feedback" size="68"></td>

 </tr>

</table>

</form>

<p><b>a) Enonce2</b><form method="post">

<table border="0" width="100%" cellpadding="10">

 <tr>

   <td width="30%">

     <p>a.<input type="radio" name="mc" value="Correction1"

       onclick="this.form.feedback.value= this.value">Proposition1<br>

     b.<input type="radio" name="mc" value="Correction2"

       onclick="this.form.feedback.value= this.value">Proposition2<br>

     c.<input type="radio" name="mc" value="Correction3"

       onclick="this.form.feedback.value= this.value">Proposition3<br>

     d.<input type="radio" name="mc" value="Correction4"

       onclick="this.form.feedback.value= this.value">Proposition4</td>

   <td width="70%"><p><input type="text" name="feedback" size="68"></td>

 </tr>

</table>

</form>

<p><b>a) Enonce3</b><form method="post">

<table border="0" width="100%" cellpadding="10">

 <tr>

   <td width="30%">

     <p>a.<input type="radio" name="mc" value="Correction1"

       onclick="this.form.feedback.value= this.value">Proposition1<br>

     b.<input type="radio" name="mc" value="Correction2"

       onclick="this.form.feedback.value= this.value">Proposition2<br>

     c.<input type="radio" name="mc" value="Correction3"

       onclick="this.form.feedback.value= this.value">Proposition3<br>

     d.<input type="radio" name="mc" value="Correction4"

       onclick="this.form.feedback.value= this.value">Proposition4</td>

   <td width="70%"><p><input type="text" name="feedback" size="68"></td>

 </tr>

</table>

</form>

<p><b>a) Enonce4</b><form method="post">

<table border="0" width="100%" cellpadding="10">

 <tr>

   <td width="30%">

     <p>a.<input type="radio" name="mc" value="Correction1"

       onclick="this.form.feedback.value= this.value">Proposition1<br>

     b.<input type="radio" name="mc" value="Correction2"

       onclick="this.form.feedback.value= this.value">Proposition2<br>

     c.<input type="radio" name="mc" value="Correction3"

       onclick="this.form.feedback.value= this.value">Proposition3<br>

     d.<input type="radio" name="mc" value="Correction4"

       onclick="this.form.feedback.value= this.value">Proposition4</td>

   <td width="70%"><p><input type="text" name="feedback" size="68"></td>

 </tr>

</table>

</form>

<p><b>a) Enonce5</b><form method="post">

<table border="0" width="100%" cellpadding="10">

 <tr>

   <td width="30%">

     <p>a.<input type="radio" name="mc" value="Correction1"

       onclick="this.form.feedback.value= this.value">Proposition1<br>

     b.<input type="radio" name="mc" value="Correction2"

       onclick="this.form.feedback.value= this.value">Proposition2<br>

     c.<input type="radio" name="mc" value="Correction3"

       onclick="this.form.feedback.value= this.value">Proposition3<br>

     d.<input type="radio" name="mc" value="Correction4"

       onclick="this.form.feedback.value= this.value">Proposition4</td>

   <td width="70%"><p><input type="text" name="feedback" size="68"></td>

 </tr>

</table>

</form>

<p><b>a) Enonce6</b><form method="post">

<table border="0" width="100%" cellpadding="10">

 <tr>

   <td width="30%">

     <p>a.<input type="radio" name="mc" value="Correction1"

       onclick="this.form.feedback.value= this.value">Proposition1<br>

     b.<input type="radio" name="mc" value="Correction2"

       onclick="this.form.feedback.value= this.value">Proposition2<br>

     c.<input type="radio" name="mc" value="Correction3"

       onclick="this.form.feedback.value= this.value">Proposition3<br>

     d.<input type="radio" name="mc" value="Correction4"

       onclick="this.form.feedback.value= this.value">Proposition4</td>

   <td width="70%"><p><input type="text" name="feedback" size="68"></td>

 </tr>

</table>

</form>

<p><b>a) Enonce7</b><form method="post">

<table border="0" width="100%" cellpadding="10">

 <tr>

   <td width="30%">

     <p>a.<input type="radio" name="mc" value="Correction1"

       onclick="this.form.feedback.value= this.value">Proposition1<br>

     b.<input type="radio" name="mc" value="Correction2"

       onclick="this.form.feedback.value= this.value">Proposition2<br>

     c.<input type="radio" name="mc" value="Correction3"

       onclick="this.form.feedback.value= this.value">Proposition3<br>

     d.<input type="radio" name="mc" value="Correction4"

       onclick="this.form.feedback.value= this.value">Proposition4</td>

   <td width="70%"><p><input type="text" name="feedback" size="68"></td>

 </tr>

</table>

</form>

<p><b>a) Enonce8</b><form method="post">

<table border="0" width="100%" cellpadding="10">

 <tr>

   <td width="30%">

     <p>a.<input type="radio" name="mc" value="Correction1"

       onclick="this.form.feedback.value= this.value">Proposition1<br>

     b.<input type="radio" name="mc" value="Correction2"

       onclick="this.form.feedback.value= this.value">Proposition2<br>

     c.<input type="radio" name="mc" value="Correction3"

       onclick="this.form.feedback.value= this.value">Proposition3<br>

     d.<input type="radio" name="mc" value="Correction4"

       onclick="this.form.feedback.value= this.value">Proposition4</td>

   <td width="70%"><p><input type="text" name="feedback" size="68"></td>

 </tr>

</table>

</form>

<p><b>a) Enonce9</b><form method="post">

<table border="0" width="100%" cellpadding="10">

 <tr>

   <td width="30%">

     <p>a.<input type="radio" name="mc" value="Correction1"

       onclick="this.form.feedback.value= this.value">Proposition1<br>

     b.<input type="radio" name="mc" value="Correction2"

       onclick="this.form.feedback.value= this.value">Proposition2<br>

     c.<input type="radio" name="mc" value="Correction3"

       onclick="this.form.feedback.value= this.value">Proposition3<br>

     d.<input type="radio" name="mc" value="Correction4"

       onclick="this.form.feedback.value= this.value">Proposition4</td>

   <td width="70%"><p><input type="text" name="feedback" size="68"></td>

 </tr>

</table>

</form>

<p><b>a) Enonce10</b><form method="post">

<table border="0" width="100%" cellpadding="10">

 <tr>

   <td width="30%">

     <p>a.<input type="radio" name="mc" value="Correction1"

       onclick="this.form.feedback.value= this.value">Proposition1<br>

     b.<input type="radio" name="mc" value="Correction2"

       onclick="this.form.feedback.value= this.value">Proposition2<br>

     c.<input type="radio" name="mc" value="Correction3"

       onclick="this.form.feedback.value= this.value">Proposition3<br>

     d.<input type="radio" name="mc" value="Correction4"

       onclick="this.form.feedback.value= this.value">Proposition4</td>

   <td width="70%"><p><input type="text" name="feedback" size="68"></td>

 </tr>

</table>

</form>

<p><b>a) Enonce11</b><form method="post">

<table border="0" width="100%" cellpadding="10">

 <tr>

   <td width="30%">

     <p>a.<input type="radio" name="mc" value="Correction1"

       onclick="this.form.feedback.value= this.value">Proposition1<br>

     b.<input type="radio" name="mc" value="Correction2"

       onclick="this.form.feedback.value= this.value">Proposition2<br>

     c.<input type="radio" name="mc" value="Correction3"

       onclick="this.form.feedback.value= this.value">Proposition3<br>

     d.<input type="radio" name="mc" value="Correction4"

       onclick="this.form.feedback.value= this.value">Proposition4</td>

   <td width="70%"><p><input type="text" name="feedback" size="68"></td>

 </tr>

</table>

</form>

<p><b>a) Enonce12</b><form method="post">

<table border="0" width="100%" cellpadding="10">

 <tr>

   <td width="30%">

     <p>a.<input type="radio" name="mc" value="Correction1"

       onclick="this.form.feedback.value= this.value">Proposition1<br>

     b.<input type="radio" name="mc" value="Correction2"

       onclick="this.form.feedback.value= this.value">Proposition2<br>

     c.<input type="radio" name="mc" value="Correction3"

       onclick="this.form.feedback.value= this.value">Proposition3<br>

     d.<input type="radio" name="mc" value="Correction4"

       onclick="this.form.feedback.value= this.value">Proposition4</td>

   <td width="70%"><p><input type="text" name="feedback" size="68"></td>

 </tr>

</table>

</form>

<p><b>a) Enonce13</b><form method="post">

<table border="0" width="100%" cellpadding="10">

 <tr>

   <td width="30%">

     <p>a.<input type="radio" name="mc" value="Correction1"

       onclick="this.form.feedback.value= this.value">Proposition1<br>

     b.<input type="radio" name="mc" value="Correction2"

       onclick="this.form.feedback.value= this.value">Proposition2<br>

     c.<input type="radio" name="mc" value="Correction3"

       onclick="this.form.feedback.value= this.value">Proposition3<br>

     d.<input type="radio" name="mc" value="Correction4"

       onclick="this.form.feedback.value= this.value">Proposition4</td>

   <td width="70%"><p><input type="text" name="feedback" size="68"></td>

 </tr>

</table>

</form>

<p><b>a) Enonce14</b><form method="post">

<table border="0" width="100%" cellpadding="10">

 <tr>

   <td width="30%">

     <p>a.<input type="radio" name="mc" value="Correction1"

       onclick="this.form.feedback.value= this.value">Proposition1<br>

     b.<input type="radio" name="mc" value="Correction2"

       onclick="this.form.feedback.value= this.value">Proposition2<br>

     c.<input type="radio" name="mc" value="Correction3"

       onclick="this.form.feedback.value= this.value">Proposition3<br>

     d.<input type="radio" name="mc" value="Correction4"

       onclick="this.form.feedback.value= this.value">Proposition4</td>

   <td width="70%"><p><input type="text" name="feedback" size="68"></td>

 </tr>

</table>

</form>

<p><b>a) Enonce15</b><form method="post">

<table border="0" width="100%" cellpadding="10">

 <tr>

   <td width="30%">

     <p>a.<input type="radio" name="mc" value="Correction1"

       onclick="this.form.feedback.value= this.value">Proposition1<br>

     b.<input type="radio" name="mc" value="Correction2"

       onclick="this.form.feedback.value= this.value">Proposition2<br>

     c.<input type="radio" name="mc" value="Correction3"

       onclick="this.form.feedback.value= this.value">Proposition3<br>

     d.<input type="radio" name="mc" value="Correction4"

       onclick="this.form.feedback.value= this.value">Proposition4</td>

   <td width="70%"><p><input type="text" name="feedback" size="68"></td>

 </tr>

</table>

</form>

<p>&nbsp;</p>

</body>

</html>

 

Codes HTML des principaux caractères nationaux

à

&agrave;

î

&icirc;

Ü

&Uuml;

ä

&auml;

ï

&iuml;

ç

&ccedil;

Ä

&Auml;

ö

&ouml;

Ç

&Ccedil;

é

&eacute;

Ö

&Ouml;

ß

&szlig;

ê

&ecirc;

ù

&ugrave;

¿

&iquest;

ë

&euml;

û

&ucirc;

ñ

&ntilde;

è

&egrave;

ü

&uuml;

Ñ

&Ntilde;

Pour ce qui est du oe ligaturé (le "e dans l'o"), il n'est apparemment pas reconnu par tous les navigateurs, en tout cas pas les plus anciens, et risque donc d'être mal interprété. En voici néanmoins le code:

&oelig; pour la minuscule et &OElig pour la majuscule.

 

Modifier les couleurs du fond de page ou du texte

 

Aller à la page des Codes standard

1. Fond de page: intervenir sur la ligne ci-après et remplacer le code souligné par le code de la couleur choisie:

<body bgcolor="#EBE9E9" text="black" link="blue" vlink="purple"...

 

2. Couleur du texte: remplacer dans les lignes appropriées le code souligné suivant <font color=...> par le code de la couleur choisie.

<p>&lt;title&gt;<b><font color="#A5042C">Mon exercice</font></b>...

Ne pas oublier le dièse # lorsque la couleur est définie par un code en hexadécimal.

 

QCM par boutons radio 1 | 2 | 3 | 4 | 5 | 7 | 8

Informatique | Eléments de programmation en HTML

Accueil | Contact

10.2.2002 - 15.2.2002