Récupérer les bonnes réponses d'un QCM

**dmoluc** · 26/05/2018, 18h10

Bonjour à tous,
il y a encore 2 jours je ne connaissais rien au développement web et c'est toujours pas terrible. J'ai réussi à créer une page avec un qcm et pour pouvoir savoir si les réponse sont justes ou fausses j'ai pensé pouvoir incrémenté la valeur "value" avec 0 si faut et 1 si juste en espérant que comme avec du VB je pourrais passé tout ce petit monde en revue et affiché le score, mais là je plante. J'ai essayé tout un tas de code et de tuto sans rien y comprendre et je désespère un peu. Si quelqu'un pouvait m'expliquer la base de la procédure procédure j'arriverai peu être à franchir cette première étape sans laquelle je ne peu continuer.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!doctype html> 
<html lang="fr">>
   <head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
   <title>Questionnaire chef d'équipe</title>
  <center> 
 
 
 
 <body background="logo.jpg">
 
 
 
 </script>
<form name="forme" onsubmit ="forme();"> 
<table bgcolor="#585858"  table cellpadding="25"><tr><td>
 
<br><font size="5" color="0080FF">1 km est égale à ?</font>
<br>
<font size="4" color="0080FF">
<br><input type="radio" name="Q1" id="Qu1a" value="0"> 10000 m
<br><input type="radio" name="Q1" id="Qu1b" value="1"> 100000 cm
<br><input type="radio" name="Q1" id="Qu1c" value="0"> 10 dam
<br><input type="radio" name="Q1" id="Qu1d" value="0"> je ne sais pas</font>
 
<td><br><font size="5" color="0080FF">10 m sont égales à ?</font>
<br>
<font size="4" color="0080FF">
<br><input type="radio" name="Q2" id="QU2a" value="0"> 0,1 km
<br><input type="radio" name="Q2" id="Qu2b" value="1"> 0,01 km
<br><input type="radio" name="Q2" id="Qu2c" value="0"> 10 hectomètres
<br><input type="radio" name="Q2" id="Qu2d" value="0"> je ne sais pas</font>
 
<td><br><font size="5" color="0080FF">1 m² est égale à ?</font>
<br>
<font size="4" color="0080FF">
<br><input type="radio" name="Q3" id="Qu3a" value="0"> 100 cm²
<br><input type="radio" name="Q3" id="Qu3b" value="1"> 10000 cm²
<br><input type="radio" name="Q3" id="Qu3c" value="0"> 1000000 cm²
<br><input type="radio" name="Q3" id="Qu3d" value="0"> je ne sais pas</font>
 
<td><br><font size="5" color="0080FF">10 000 m² sont égales à ?</font>
<br>
<font size="4" color="0080FF">
<br><input type="radio" name="Q4" id="Qu4a" value="1"> 1 hectare
<br><input type="radio" name="Q4" id="Qu4b" value="0"> 1000 are
<br><input type="radio" name="Q4" id="Qu4c" value="0"> 1 km²
<br><input type="radio" name="Q4" id="Qu1d" value="0"> je ne sais pas</font><tr>
<br>
<br>
 
<td><br><font size="5" color="0080FF">1 M³ est égale à ?</font>
<br>
<font size="4" color="0080FF">
<br><input type="radio" name="Q5" id="Qu5a" value="0"> 100 litres
<br><input type="radio" name="Q5" id="Qu5b" value="1"> 1000 dm³
<br><input type="radio" name="Q5" id="Qu5c" value="0"> 1000 cm³
<br><input type="radio" name="Q5" id="Qu5d" value="0"> je ne sais pas</font>
 
<td><br><font size="5" color="0080FF">100 litres sont égales à ?</font>
<br>
<font size="4" color="0080FF">
<br><input type="radio" name="Q6" id="QU6a" value="0"> 1 m³
<br><input type="radio" name="Q6" id="Qu6b" value="0"> 10 m³
<br><input type="radio" name="Q6" id="Qu6c" value="1"> 0,1 m³
<br><input type="radio" name="Q6" id="Qu6d" value="0"> je ne sais pas</font>
 
<td><br><font size="5" color="0080FF">1 tonne est égale à ?</font>
<br>
<font size="4" color="0080FF">
<br><input type="radio" name="Q7" id="Qu7a" value="1"> 1000 kg
<br><input type="radio" name="Q7" id="Qu7b" value="0"> 100 kg
<br><input type="radio" name="Q7" id="Qu7c" value="0"> 10000 kg
<br><input type="radio" name="Q7" id="Qu7d" value="0"> je ne sais pas</font>
 
<td><br><font size="5" color="0080FF">10000 grammes sont égales à ?</font>
<br>
<font size="4" color="0080FF">
<br><input type="radio" name="Q8" id="Qu8a"value="0"> 1 kg
<br><input type="radio" name="Q8" id="Qu8b"value="1"> 10 kg
<br><input type="radio" name="Q8" id="Qu8c"value="0"> 0,1 kg
<br><input type="radio" name="Q8" id="Qu8d"value="0"> je ne sais pas</tr></font>
<br>
<br>
<td><br><font size="5" color="0080FF">100 grades sont équivalents à ?</font>
<br>
<font size="4" color="0080FF">
<br><input type="radio" name="Q9" id="Qu9a"value="1"> 90 degrés
<br><input type="radio" name="Q9" id="Qu9b"value="0"> 180 degrés
<br><input type="radio" name="Q9" id="Qu9c"value="0"> 45 degrés
<br><input type="radio" name="Q9" id="Qu9d"value="0"> je ne sais pas</font>
 
<td><br><font size="5" color="0080FF">180 degrés sont équivalents à ?</font>
<br>
<font size="4" color="0080FF">
<br><input type="radio" name="Q10" id="QU10a"value="0"> 90 grades
<br><input type="radio" name="Q10" id="Qu10b"value="1"> 200 grades
<br><input type="radio" name="Q10" id="Qu10c"value="0"> 300 grades
<br><input type="radio" name="Q10" id="Qu10d"value="0"> je ne sais pas</font>
 
<td><br><font size="5" color="0080FF">transformer 2h24min54sec en heures ?</font>
<br>
<font size="4" color="0080FF">
<br><input type="radio" name="Q11" id="Qu11a"value="1" > 2,415 h
<br><input type="radio" name="Q11" id="Qu11b"value="0"> 2,26 h
<br><input type="radio" name="Q11" id="Qu11c"value="0"> 2,249 h
<br><input type="radio" name="Q11" id="Qu11d"value="0"> je ne sais pas</font>
 
<td><br><font size="5" color="0080FF">transformer 2h24min54sec en min ?</font>
<br>
<font size="4" color="0080FF">
<br><input type="radio" name="Q12" id="Qu12a"value="0"> 145 min
<br><input type="radio" name="Q12" id="Qu12b"value="1" > 144,9 min
<br><input type="radio" name="Q12" id="Qu12c"value="0"> 144 min
<br><input type="radio" name="Q12" id="Qu12d"value="0"> je ne sais pas</tr></font>
 
<br />
 
</tr>
 
</table>
 
 
</form>

merci pour vos réponses

**Watilin** · 26/05/2018, 21h42

Bonsoir,

je te propose une solution qui consiste à parcourir tous les boutons cochés, et examiner leur valeur. Il faut commencer par récupérer la liste des boutons cochés. Pour ça on utilise le sélecteur CSS :checked.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.querySelectorAll("input:checked")

La doc de querySelectorAll : https://developer.mozilla.org/fr/doc...erySelectorAll.

Tu peux rajouter des trucs dans le sélecteur pour cibler plus précisément tes boutons, par exemple "input[type='radio']:checked", "table input:checked", etc. Ça peut être utile s’il y a d’autres boutons dans ta page que tu ne veux pas sélectionner.

Ensuite il faut parcourir la liste. Aujourd’hui on a la boucle for..of qui est bien pratique :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
for (let radio of document.querySelectorAll("input:checked")) {
  console.log(radio);
}

(Appuie sur F12 pour ouvrir la console et voir les messages envoyés par console.log.)

La doc de for..of : https://developer.mozilla.org/fr/doc...tions/for...of

La doc de let : https://developer.mozilla.org/fr/doc...structions/let

La doc de la console : https://developer.mozilla.org/fr/docs/Web/API/Console

Ensuite, il faut une variable pour « accumuler » les valeurs des inputs. Le détail important ici, c’est que les attributs value sont toujours de type string, il faut donc les convertir en nombre avant d’additionner.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
var score = 0;
for (let radio of document.querySelectorAll("input:checked")) {
  console.log(radio);
 
  let num = Number(radio.value);
  score += num;
}
 
console.log(score);

Enfin, il faut rattacher ce comportement à une action de l’utilisatrice ou de l’utilisateur. Pour ça tu peux utiliser l’attribut onsubmit de ton <form>, tu avais l’air bien parti pour ça.

Pour éviter que le formulaire soit envoyé, ce qui provoquerait un rechargement de la page, on va passer la variable event en paramètre, c’est une variable qui est automatiquement crée quand on utilise un attribut d’évènement onmachin ou ontruc, et dans la fonction, on annule cet évènement en appelant sa méthode preventDefault().

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<form name="forme" onsubmit="forme(event);">

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
function forme(event) {
  event.preventDefault();
 
  var score = 0;
  for (let radio of document.querySelectorAll("input:checked")) {
    console.log(radio);
 
    let num = Number(radio.value);
    score += num;
  }
 
  alert("Votre score est de " + score + ".");
}

Bien sûr alert est une façon plutôt pauvre de s’adresser à l’utilisatrice ou l’utilisateur, aussi je fais confiance à ta créativité pour faire passer le message de façon plus sympathique

**eleydet** · 26/05/2018, 21h58

Bonsoir,

La solution ci-après, plus basique que celle que propose Watilin, est peut-être plus adaptée à un débutant en développement web.
- Tout d'abord, les balises <center> et <font ...> sont obsolètes, d'où l'ajout d'une feuille de style.
- Ensuite, après la balise <td>, il faut mettre la balise </td>.
- L'utilisateur clique sur un bouton pour appeler une fonction en JS qui vérifie les résultats.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html>
 
<head>
<meta charset="utf-8">
<script>
function verifier()  {
  if (document.getElementById("Qu1b").checked) alert("Bonne réponse pour la première question.");
  ...
}
</script>
<style>
body { color : #0080FF; }
</style>
</head>
 
<body background="logo.jpg">
 
<table bgcolor="#585858" cellpadding="25"><tr>
 
<td>1 km est égale à ?
<br><input type="radio" name="Q1" id="Qu1a" value="0"> 10000 m
<br><input type="radio" name="Q1" id="Qu1b" value="1"> 100000 cm
<br><input type="radio" name="Q1" id="Qu1c" value="0"> 10 dam
<br><input type="radio" name="Q1" id="Qu1d" value="0"> je ne sais pas</td>
 
<td>10 m sont égales à ?
<br><input type="radio" name="Q2" id="QU2a" value="0"> 0,1 km
<br><input type="radio" name="Q2" id="Qu2b" value="1"> 0,01 km
<br><input type="radio" name="Q2" id="Qu2c" value="0"> 10 hectomètres
<br><input type="radio" name="Q2" id="Qu2d" value="0"> je ne sais pas</td>
 
<td>1 m² est égale à ?
<br><input type="radio" name="Q3" id="Qu3a" value="0"> 100 cm²
<br><input type="radio" name="Q3" id="Qu3b" value="1"> 10000 cm²
<br><input type="radio" name="Q3" id="Qu3c" value="0"> 1000000 cm²
<br><input type="radio" name="Q3" id="Qu3d" value="0"> je ne sais pas</td>
 
<td>10 000 m² sont égales à ?
<br><input type="radio" name="Q4" id="Qu4a" value="1"> 1 hectare
<br><input type="radio" name="Q4" id="Qu4b" value="0"> 1000 are
<br><input type="radio" name="Q4" id="Qu4c" value="0"> 1 km²
<br><input type="radio" name="Q4" id="Qu1d" value="0"> je ne sais pas</td>
 
</tr><tr>
 
<td>1 M³ est égale à ?
<br><input type="radio" name="Q5" id="Qu5a" value="0"> 100 litres
<br><input type="radio" name="Q5" id="Qu5b" value="1"> 1000 dm³
<br><input type="radio" name="Q5" id="Qu5c" value="0"> 1000 cm³
<br><input type="radio" name="Q5" id="Qu5d" value="0"> je ne sais pas</td>
 
<td>100 litres sont égales à ?
<br><input type="radio" name="Q6" id="QU6a" value="0"> 1 m³
<br><input type="radio" name="Q6" id="Qu6b" value="0"> 10 m³
<br><input type="radio" name="Q6" id="Qu6c" value="1"> 0,1 m³
<br><input type="radio" name="Q6" id="Qu6d" value="0"> je ne sais pas</td>
 
<td>1 tonne est égale à ?
<br><input type="radio" name="Q7" id="Qu7a" value="1"> 1000 kg
<br><input type="radio" name="Q7" id="Qu7b" value="0"> 100 kg
<br><input type="radio" name="Q7" id="Qu7c" value="0"> 10000 kg
<br><input type="radio" name="Q7" id="Qu7d" value="0"> je ne sais pas</td>
 
<td>10000 grammes sont égales à ?
<br><input type="radio" name="Q8" id="Qu8a" value="0"> 1 kg
<br><input type="radio" name="Q8" id="Qu8b" value="1"> 10 kg
<br><input type="radio" name="Q8" id="Qu8c" value="0"> 0,1 kg
<br><input type="radio" name="Q8" id="Qu8d" value="0"> je ne sais pas</td>
 
</tr><tr>
 
<td>100 grades sont équivalents à ?
<br><input type="radio" name="Q9" id="Qu9a" value="1"> 90 degrés
<br><input type="radio" name="Q9" id="Qu9b" value="0"> 180 degrés
<br><input type="radio" name="Q9" id="Qu9c" value="0"> 45 degrés
<br><input type="radio" name="Q9" id="Qu9d" value="0"> je ne sais pas</td>
 
<td>180 degrés sont équivalents à ?
<br><input type="radio" name="Q10" id="QU10a" value="0"> 90 grades
<br><input type="radio" name="Q10" id="Qu10b" value="1"> 200 grades
<br><input type="radio" name="Q10" id="Qu10c" value="0"> 300 grades
<br><input type="radio" name="Q10" id="Qu10d" value="0"> je ne sais pas</td>
 
<td>transformer 2h24min54sec en heures ?
<br><input type="radio" name="Q11" id="Qu11a" value="1" > 2,415 h
<br><input type="radio" name="Q11" id="Qu11b" value="0"> 2,26 h
<br><input type="radio" name="Q11" id="Qu11c" value="0"> 2,249 h
<br><input type="radio" name="Q11" id="Qu11d" value="0"> je ne sais pas</td>
 
<td>transformer 2h24min54sec en min ?
<br><input type="radio" name="Q12" id="Qu12a" value="0"> 145 min
<br><input type="radio" name="Q12" id="Qu12b" value="1" > 144,9 min
<br><input type="radio" name="Q12" id="Qu12c" value="0"> 144 min
<br><input type="radio" name="Q12" id="Qu12d" value="0"> je ne sais pas</td>
 
</tr></table>
<br> 
<input type="button" value="VERIFIER" onclick="verifier();">
 
</body>
 
</html>

**bonjourajax** · 27/05/2018, 01h12

Bonsoir,
Les <br> peuvent aussi être remplacés par du CSS ce qui te permettra de mieux personnaliser ton qcm.

**dmoluc** · 27/05/2018, 06h56

merci à tous j'ai de quoi m'occuper pour une partie de la journée en essayant de comprendre vos solutions. je ne ferme pas encore la discussion car j'aurai surement d'autre questions...

**bonjourajax** · 27/05/2018, 07h40

Pas de soucis; j'avais pas vu, une balise </script> toute seule ca sert a rien
et faut fermer </head> (apres tu peux choisir de mettre le js dedans)
exemple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
<!DOCTYPE html>
<html lang="fr">
<head>
<script>
</script>
</head>
<body>
</body>
</html>

**dmoluc** · 27/05/2018, 09h56

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<script>
function verifier()  {
  if (document.getElementById("Qu1b").checked) alert("Bonne réponse pour la première question.");
}
</script>

se code fonctionne trés bien mais je ne sais pas comment le compléter
par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
  function verifier()  {
  if (document.getElementById("Qu1b").checked) alert("Bonne réponse pour la première question.");
else (document.getElementById("Qu1a").checked) alert("mauvaise réponse pour la première question.");
}
</script>

je n'arrive pas à trouver la bonne syntaxe, le if ne fonctionne pas, pas plus que le elseif ou le else (comment faire ?)
merci pour votre aide

**ProgElecT** · 27/05/2018, 10h09

Salut

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script>
	function verifier()  {
		if (document.getElementById("Qu1b").checked) // Qu1b est le input radio correspondant à la bonne réponse
		{
			alert("Bonne réponse pour la première question.");
		}else{
			if (document.getElementById("Qu1d").checked) // je ne sais pas
			{
				alert("La réponse est 100000 cm");
			}else{
				alert("mauvaise réponse pour la première question.");
			}
		}
 
 
 
		if (document.getElementById("Qu2a").checked) // Qu2a est le input radio correspondant à la bonne réponse
		{
			alert("Bonne réponse pour la deuxième question.");
		}else{
			if (document.getElementById("Qu2d").checked) // je ne sais pas
			{
				alert("La réponse est 0,01 km");
			}else{
				alert("mauvaise réponse pour la deuxième question.");
			}
		}
		// à toi la suite
	}
</script>

Tu n'as pas besoin de vérifier les autres input type="radio" name="Q1", tu ne vérifies que celui correspondant à la bonne réponse et celui qui correspond à je ne sais pas.

**dmoluc** · 27/05/2018, 12h18

J'ai décidé de n'afficher qu'une question à la fois. Suis obliger de faire une page par question ou existe t'il une solution pour mettre tous le code sur une même feuille

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!doctype html> 
<html lang="fr">>
   <head>
   <meta charset="utf-8">
    <br>
   <br>
   <br>
   <br>
<center>   <form name="forme" onsubmit ="forme();"> 
<table bgcolor= "0080FF" table cellpadding="25"><tr>
   <td><font size="10" color="#585858"><b>Conversion Unitée de longueur</b></font></td></table><center>
   <br>
   <br>
   <br>
   <br>
   <br>
   <br>
 
<script>
function verifier()  {
                if (document.getElementById("Qu2b").checked) // Qu1b est le input radio correspondant à la bonne réponse
                {
                        alert("Bonne réponse");
                }else{
                        alert("la bonne réponse est 0.1 km");
                }
 
        }
</script>
 
   <title>Question1</title>
  <center> 
 
 <body background="logo.jpg">
 
<form name="forme" onsubmit ="forme();"> 
<table bgcolor="#585858"  table cellpadding="25"><tr>
 
<td><br><font size="8" color="0080FF">10 m sont égales à ?</font>
<br>
<font size="6" color="0080FF">
<br><input type="radio" name="Q2" id="QU2a" value="0"> 0,1 km
<br><input type="radio" name="Q2" id="Qu2b" value="1"> 0,01 km
<br><input type="radio" name="Q2" id="Qu2c" value="0"> 10 hectomètres
<br><input type="radio" name="Q2" id="Qu2d" value="0"> je ne sais pas</font>
<br>
<br>
<br>
<br>
<center><img src="bouton.gif"  onclick="verifier();"><center>
<br>
</td></table>
 
 
</tr>
 
</body>
 
 
<html>

c'est du bricolage mais le résultat me convient hélas si je fais 40 questions ça va faire beaucoup de pages
qu'en pensez-vous ?

**eleydet** · 27/05/2018, 12h30

Voulez-vous essayer Dyris?

http://dyris.free.fr

**dmoluc** · 27/05/2018, 13h18

Dyris à l'air pas mal mais peu on mettre en ligne le questionnaire ? J'ai déjà une licence Klaxoon il est très simple de réaliser des questionnaires de différentes sorte et de les utilisés en ligne mais pour ça il faut convenir d'un rendez-vous car une fois le questionnaire lancé on ne peu plus si connecté et il se clôture automatiquement lorsque tous les participants on terminés. J'avais pensé qu'un site internet pouvait palier à tous ces inconvénient étant accessible à tous moment avec un simple mot de passe.
je vais regarder un peu du côté de dreamweaver pour voir si le logiciel est capable de palier à mon manque de connaissance.
encore merci pour vos réponses

**ProgElecT** · 27/05/2018, 13h39

Re

@dmoluc, un moyen de voir les fautes de code, une fois ton code lancer dans ton navigateur (par exemple FireFox

) tu fais un Ctrl+U, cela ouvre un nouvel onglet qui affiche ton code, il est colorisé, toutes les fautes apparaissent en rouge , en te positionnant avec la souris quelque instant sur ces mots rouge, une boite d'information apparait, te décrivant le pourquoi le navigateur considère comme faute de codage.
A l'heure actuelle, tu as au moins 6 fautes basique de codage dans ton code

**Watilin** · 27/05/2018, 14h04

Envoyé par dmoluc

je vais regarder un peu du côté de dreamweaver pour voir si le logiciel est capable de palier à mon manque de connaissance.

Spoiler : non. C’est comme prendre le taxi en espérant apprendre à conduire. Et Dreamweaver est un taxi qui conduit très, très mal.

La vraie question est : est-ce que tu veux apprendre, ou est-ce que tu veux produire quelque chose rapidement. Dans le second cas, Dreamweaver convient. Mais si tu veux apprendre, voici quelques conseils.

Pour commencer, je te recommande de faire attention à la structure de ton code HTML, en particulier de fermer systématiquement toutes les balises même quand ce n’est pas obligatoire, et vérifier qu’il n’y a pas d’entremêlements. Le but de ceci est de supprimer toute ambiguïté de ton code source. Car si le code est ambigü, il peut être interprété de différentes manières par les différents navigateurs, et au moment où tu voudras le manipuler via script, ça peut mener à des erreurs difficiles à déceler et des situations difficiles à comprendre.

Un outil comme HTML Tidy te permet de corriger automatiquement ton code HTML. Tu peux également utiliser le validateur qui te donnera des informations complémentaires sur les erreurs dans ton code.

Tu constateras vite que la plupart des outils t’incitent à te débarasser des balises de présentation, et d’utiliser du CSS à la place. Voici un exemple de code reprenant à peu près ta mise en page, mais avec un balisage plus sémantique :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>Question1</title>
  <style>
 
  body {
    text-align: center;
  }
 
  h1 {
    color: #585858;
    background-color: #0080FF;
    font-size: 300%;
    padding: 25px;
    margin: 5rem auto;
    display: inline-block;
  }
 
  form {
    margin: 2em auto;
  }
 
  fieldset {
    color: #0080FF;
    background-color: #585858;
    display: inline-block;
    padding: 25px;
    border: none;
  }
 
  h2 {
    font-size: 300%;
    font-weight: normal;
    margin: 1ex 0;
  }
 
  label {
    font-size: 200%;
    display: block;
    text-align: left;
  }
  
  .button-container {
    margin-top: 4em;
  }
 
  </style>
</head>
<body>
 
<h1>Conversion unités de longueur</h1>
<form name="forme" onsubmit="forme();">
  <fieldset>
    <h2>10&#x202F;m sont égaux à&#x202F;?</h2>
 
    <p>
      <label>
        <input type="radio" name="Q2" id="QU2a" value="0" /> 0,1 km
      </label>
      <label>
        <input type="radio" name="Q2" id="Qu2b" value="1" /> 0,01 km
      </label>
      <label>
        <input type="radio" name="Q2" id="Qu2c" value="0" /> 10 hectomètres
      </label>
      <label>
        <input type="radio" name="Q2" id="Qu2d" value="0" /> je ne sais pas
      </label>
    </p>
    <p class="button-container">
      <!-- <img src="bouton.gif" onclick="verifier();" alt="** PLEASE DESCRIBE THIS IMAGE **" /> -->
      <input type="image" src="bouton.gif" alt="Vérifier"
             onclick="verifier(); return false;" />
    </p>
  </fieldset>
</form>
 
<script> "use strict";
 
function verifier() {
  // Qu1b est le input radio correspondant à la bonne réponse
  if (document.getElementById("Qu2b").checked) {
    alert("Bonne réponse");
  }
  else {
    alert("la bonne réponse est 0.1 km");
  }
}
 
</script>
</body>
</html>

**dmoluc** · 27/05/2018, 16h17

Vraiment merci à tous

en ce moment c'est la période creuse pour mon boulot et j'ai pas mal de temps devant moi, je vais donc essayer de le mettre à profit pour apprendre la création de site.
j'ai la syntaxe du VB en tête et ça me perturbe pas mal. pour utiliser celle des pages weeb ; c'est comme si on me demander d'écrire le contenu HTML en espagnol, de faire la mise en page CCS en anglais et de coder les actions java en chinois et je ne parle même pas du PHP dont je ne sais que faire. Je n'ai pas l’ambition de devenir développeur de site internet ; chacun son métier, mais j'espère quand même pouvoir bricoler quelque chose.
je clos le sujet car vous avez résolue mes première difficultés et je vous en remercie. Je vais fouiner dans les posts pour savoir comment m'y prendre pour enregistrer les réponses dans un formulaire que je pourrais récupérer une fois le questionnaire terminer, ce sera sans doute ma prochaine difficulté alors A+

**bonjourajax** · 27/05/2018, 18h30

Envoyé par dmoluc

J'ai décidé de n'afficher qu'une question à la fois. Suis obliger de faire une page par question ou existe t'il une solution pour mettre tous le code sur une même feuille

Bonjour a l'heure actuelle tu peux tout mettre sur la meme page

Récupérer les bonnes réponses d'un QCM

JavaScript

Discussions similaires

Partager

Partager