Cr�ation d'un QCM en JavaScript

**AI_user02000** · 19/11/2019, 12h03

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

Quelqu'un pourrait il svp m'aider � am�liorer le code et me dire ce qui ne va pas! Merci.

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
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 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
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>

Invit� · 19/11/2019, 12h48

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,.....

**AI_user02000** · 19/11/2019, 13h04

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

**javatwister** · 19/11/2019, 18h08

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 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
<!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>

Invit� · 19/11/2019, 18h45

Code HTML :

S�lectionner tout - Visualiser dans une fen�tre � part

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

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

Cr�ation d'un QCM en JavaScript

JavaScript

Discussions similaires

Partager

Partager