Création d'un QCM en JavaScript

Bonjour, je suis actuellemnt en train de réaliser une interface pour QCM avec JS. Et n'ayant commencé que depuis hier, je dois avouer que je suis perdu et je pense avoir fait pas mal de bêtises dans mon code :roll: Quelqu'un pourrait il svp m'aider à améliorer le code et me dire ce qui ne va pas! Merci.

Code:

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
var i=0;
 
 
function reponse1(form1) {
if((form1.choix1.checked) ==false  && (form1.choix2.checked) ==false && (form1.choix3.checked) ==true && (form1.choix4.checked) ==false)
 
      {alert("Bonne réponse"); i +=2;}
  else
  	alert("Mauvaise réponse");
 
  }  
 
 
function reponse2(form2) {
if ( (form2.choix2.checked) == true && (form2.choix1.checked) == false && (form2.choix2.checked) == false && (form2.choix4.checked) == false)
{  alert("Bonne réponse"); i +=2; }
 
 
 
function reponse3(form3) {
if ( (form3.choix3.checked) == true && (form3.choix1.checked) == true && (form3.choix2.checked) == false )
 {alert("Bonne réponse"); i +=2;}
 
 
function reponse4(form4) {
if ( (form4.choix3.checked) == false && (form4.choix1.checked) == false && (form4.choix2.checked) == true && (form4.choix4.checked) == false)
{   alert("Bonne réponse"); i +=2;}
 
 
 
function reponse5(form5) {
if ( (form5.choix3.checked) == true && (form5.choix1.checked) == false && (form5.choix2.checked) == false && (form5.choix4.checked) == false)
{ alert("Bonne réponse"); i +=2;}
 
 
 
function reponse6(form6) {
if ( (form6.choix3.checked) == true && (form6.choix1.checked) == false && (form6.choix2.checked) == false && (form6.choix4.checked) == false)
{  alert("Bonne réponse"); i +=2;}
 
 
 
function reponse7(form7) {
if ( (form7.choix1.checked) == true && (form7.choix2.checked) == true && (form7.choix3.checked) == false)
{  alert("Bonne réponse"); i +=2;}
 
 
 
function reponse8(form8) {
if ( (form8.choix1.checked) == false && (form8.choix2.checked) == true && (form8.choix3.checked) == false && (form8.choix4.checked) == false)
{   alert("Bonne réponse"); i +=2;}
 
 
 
function reponse9(form9) {
if ( (form9.choix1.checked) == false && (form9.choix2.checked) == true && (form9.choix3.checked) == false && (form9.choix4.checked) == false)
{   alert("Bonne réponse"); i +=2;}
 
 
function reponse_10(form10) {
if ( (form10.choix1.checked) == false && (form10.choix2.checked) == true && (form10.choix3.checked) == false && (form10.choix4.checked) == false)
{  alert("Bonne réponse"); i +=2;}
 
 
 
function validQCM()
{
	reponse1(form1);
    reponse2(form2);
    reponse3(form3);
	reponse4(form4);
	reponse5(form5);
	reponse6(form6);
	reponse7(form7);
	reponse8(form8);
	reponse9(form9);
 
	alert("Votre score est de " + i + "/20");
}

Code:

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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<html>
<head>
	<title>QCM</title>
 
</head>
<body>
 
	<p><center><font size=18><b><u>QCM JavaScript</u></b></font></center></p>
 
	<br/>
<form name="form1">
<p>
<label>1.Dans quel balise HTML plaçons-nous le code JavaScript?</label><br/><br/>
<input type="checkbox" name="choix1" value="1">La balise js <br/>
<input type="checkbox" name="choix2" value="2">La balise javascript <br/>
<input type="checkbox" name="choix3" value="3">La balise script <br/>
<input type="checkbox" name="choix4" value="4">La balise head <br/><br/>
 
</p>
</form>
 
    <form name="form2">
<p>
<label>2.Quelle est la syntaxe correcte?</label><br/><br/>
 
<input type="checkbox" name="choix1" value="1">getElementById(document.["MonId"]); <br/>
<input type="checkbox" name="choix2" value="2">document.getElementById("MonId");<br/>
<input type="checkbox" name="choix3" value="3">window.getElementById("MonId"); <br/>
<input type="checkbox" name="choix4" value="4">getElementById.(window.["MonId"]);<br/><br/>
 
 
</p>
</form>
 
<form name="form3">
 
<p>
<label>3.Le mot clé "var" permet de déclarer des variables</label><br/><br/>
 
<input type="checkbox" name="choix1" value="1">globales <br/>
<input type="checkbox" name="choix2" value="2">n'existe pas en JavaScript<br/>
<input type="checkbox" name="choix3" value="3">locales  <br/><br/>
 
 
 
</p>
</form>
 
 
<form name="form4">
<p>
<label>4.Comment passer à l'itération suivante dans une boucle for()?</label><br/><br/>
 
<input type="checkbox" name="choix1" value="1">return <br/>
<input type="checkbox" name="choix2" value="2">continue <br/>
<input type="checkbox" name="choix3" value="3">break<br/>
<input type="checkbox" name="choix4" value="4">next <br/><br/>
 
 
</p>
</form>
 
<form name="form5">
 
 
<p>
<label>5.Dans quel balise HTML plaçons-nous le code JavaScript?</label><br/><br/>
<input type="checkbox" name="choix1" value="1">La balise js <br/>
<input type="checkbox" name="choix2" value="2">La balise javascript <br/>
<input type="checkbox" name="choix3" value="3">La balise script <br/>
<input type="checkbox" name="choix4" value="4">La balise head <br/>
</p>
</form>
 
 
<form name="form6">
 
 
<p>
<label>6.Dans quel balise HTML plaçons-nous le code JavaScript</label><br/><br/>
<input type="checkbox" name="choix1" value="1">La balise js <br/>
<input type="checkbox" name="choix2" value="2">La balise javascript <br/>
<input type="checkbox" name="choix3" value="3">La balise script <br/>
<input type="checkbox" name="choix4" value="4">La balise head <br/>
</p>
 
 
</form>
 
 
 
<form name="form7">
 
 
<p>
<label>7.Quel est le bon endroit pour insérer un code javascript?</label><br/><br/>
<input type="checkbox" name="choix1" value="1">La section &lthead&gt <br/>
<input type="checkbox" name="choix2" value="2">La section &ltbody&gt<br/>
<input type="checkbox" name="choix3" value="3">Aucune de ces réponses n'est vraie<br/><br/>
</p>
 
 
</form>
 
<form name="form8">
 
 
<p>
<label>8.Que retourne typeof(1>2)?</label><br/><br/>
<input type="checkbox" name="choix1" value="1">false <br/>
<input type="checkbox" name="choix2" value="2">boolean <br/>
<input type="checkbox" name="choix3" value="3">true <br/>
<input type="checkbox" name="choix4" value="4">Il y a une erreur <br/>
</p>
 
 
</form>
 
<form name="form9">
 
 
<p>
<label>9.Quelle langage se prête le mieux à l'exécution d'une requête MySQL?</label><br/><br/>
 
<input type="checkbox" name="choix1" value="1">HTML <br/>
<input type="checkbox" name="choix2" value="2">PHP<br/>
<input type="checkbox" name="choix3" value="3">JavaScript<br/>
<input type="checkbox" name="choix4" value="4">CSS <br/>
</p>
 
 
</form>
 
<form name="form_10">
 
 
<p>
<label>10.Cochez la/les affirmation(s) exacte(s)</label><br/><br/>
<input type="checkbox" name="choix1" value="1">Le JavaScript a été inventé en 1998 par Brendan Eich.<br/>
<input type="checkbox" name="choix2" value="2">Le langage Javacript est typagedynamique. <br/>
<input type="checkbox" name="choix3" value="3">JavaScript est un langage orienté objet. <br/>
<input type="checkbox" name="choix4" value="4">Il n'existe que quelques navigateurs disposant d'un moteur JavaScript. <br/>
</p>
 
 
</form>
<br/><br/><br/>
 
<form>
	<center><input type="submit" name="Ok"
value="Valider" onclick="validQCM()"></center>
</form>
<br/><br/>
 
 
<script language="JavaScript" src="QCM.js"></script>
 
 
 
</body>
</html>

Bonjour,

à mon avis, je pense que tu sais déjà ce qui ne va pas.
Mais c'est justement en faisant des erreurs qu'on apprends.

1- JavaScript :

Tu as trop de fonctions similaires et "répétitives" : on peut certainement factoriser tout ça dans une seule fonction.
Les questions et les réponses peuvent être écrites dans des array JavaScript.

2- HTML (formulaires) :

Tes formulaires ne sont pas corrects, et on n'a besoin ici que d'un seul formulaire.
Si chaque question n'attends qu'UNE seule réponse, alors il faut des <input type="radio"> (pas checkbox -> cela dit, QCM signifie "Questionnaire à Choix Multiple" ! ;) ).
chaque "lot" de réponse doit avoir le même name.

3- Tu peux, dans un 1er temps, t'inspirer de ce (vieux*) tuto (trouvé sur le web) : http://i.gautier.free.fr/jsprof/scripts/qcm.htm
Regarde les codes JS et HTML et les explications.

* Les balises <font> sont obsolètes, beaucoup de lignes inutiles,.....

Merci beaucoup de votre aide! J'avoue que je me suis lancé dans ce programme sans pour autant acquérir certaines bases fondamentales du JS. Je vais réécrire le code en suivant à la lettre vos conseils! Merci:D

Salut,

Petit exemple de principe, à partir de ton code;

Entre nous, c'est juste une partie du problème parce que, comme dit jreaux62, tes données seraient mieux logées dans un Array...

Guette la réponse au-dessus du formulaire en fonction de tes choix.

Code:

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>QCM</title>
 
<script>
 
window.addEventListener("load",()=>{
        const tab=[3,2,3];
        document.getElementById("form1").addEventListener("submit",(e)=>{
                e.preventDefault();
                let tot=0;
                for(i=0;i<tab.length;i++){
                        if(e.target.elements["choix"+i].value==tab[i]){
                                tot+=2
                        }
                }
                document.getElementById("res").textContent="Vous avez obtenu " + tot + " sur 6."
        },false)
},false)
 
</script>
 
</head>
<body>
 
<div id="res"></div>
<hr />
<form id="form1">
<p>
<div>Combien y a-t-il de continents?</div>
<input type="radio" id="ch0_0" name="choix0" value="0"><label for="ch0_0">zéro</label><br/>
<input type="radio" id="ch0_1" name="choix0" value="1"><label for="ch0_1">douze</label><br/>
<input type="radio" id="ch0_2" name="choix0" value="2"><label for="ch0_2">vingt-deux</label><br/>
<input type="radio" id="ch0_3" name="choix0" value="3"><label for="ch0_3">cinq</label> 
</p>
<p>
<div>Combien de doigts dans une main?</div>
<input type="radio" id="ch1_0" name="choix1" value="0"><label for="ch1_0">un</label><br/>
<input type="radio" id="ch1_1" name="choix1" value="1"><label for="ch1_1">trois</label><br/>
<input type="radio" id="ch1_2" name="choix1" value="2"><label for="ch1_2">cinq</label><br/>
<input type="radio" id="ch1_3" name="choix1" value="3"><label for="ch1_3">sept</label>
</p>
<p>
<div>Qu'est-ce qui vous amène?</div>
<input type="radio" id="ch2_0" name="choix2" value="0"><label for="ch2_0">rien</label><br/>
<input type="radio" id="ch2_1" name="choix2" value="1"><label for="ch2_1">je ne sais pas</label><br/>
<input type="radio" id="ch2_2" name="choix2" value="2"><label for="ch2_2">le hasard</label><br/>
<input type="radio" id="ch2_3" name="choix2" value="3"><label for="ch2_3">l'envie</label>
</p>
<p>
<input type="submit" />
</p>
</form>
 
</body>
</html>

Code:

<div>Combien y a-t-il de continents?</div>

@javatwister
Tu comptes aussi le "continent de plastique" ou pas ?... :calim2: :piou: