Modifier un quizz JavaScript

**molochlebanni** · 18/04/2013, 11h51

Bonjour,

Je débute en javascript, je connais les basiques, et je bloque sur un problème.
J'ai une borne sur mon lieu de stage où turne un quizz en javascript, et on me demande de le modifier car il donne la correction à la fin mais on voudrai que les questions soient corrigés à la validation.

Si quelqu'un peut m'aider ce serait bien sympa car je sais pas ce que je peux toucher et qui fait quoi dans ce quizz ...

En vous remerciant,
je vous passe le code par MP ?

Cordialement

**Kaamo** · 18/04/2013, 12h21

où turne un quizz en javascript, et on me demande de le modifier

Je débute en javascript

Je pense que le problème vient de celui qui te demande de le modifier

**hackoofr** · 18/04/2013, 12h33

Envoyé par molochlebanni

je vous passe le code par MP ?

et à quoi va nous servir cette discussion alors

**molochlebanni** · 18/04/2013, 13h13

C'est juste que je n'osais pas balancer le code complet sur le forum, vu qu'il est assez important, mais remarque si on peut me faire un petit cours au passage...

Voici le code alors :

Code javascript :

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
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
var Quizz = {
    QUESTION_TEMPLATE:
            '<div id="question-container">'+
                '<h2>Question n°<span id="question-number">${QUIZZ_QUESTION_NUMBER}</span></h2>'+
                '<p id="question-text">${QUIZZ_QUESTION_TEXT}</p>'+
                '<div class="answers">'+
                    '<div class="choice">'+
                        '<div id="answer-a" class="checkbox unchecked" data-quizz-value="a">'+
                            '<label for="answer-a">${QUIZZ_ANSWERS_1}</label>'+
                        '</div>'+
                        '<input type="radio" name="answer" value="a" />'+
                        '<div class="clear"></div>'+
                    '</div>'+
                    '<div class="choice">'+
                        '<div id="answer-b" class="checkbox unchecked" data-quizz-value="b">'+
                            '<label for="answer-b">${QUIZZ_ANSWERS_2}</label>'+
                        '</div>'+
                        '<input type="radio" name="answer" value="b" />'+
                        '<div class="clear"></div>'+
                    '</div>'+
                    '<div class="choice">'+
                        '<div id="answer-c" class="checkbox unchecked" data-quizz-value="c">'+
                            '<label for="answer-c">${QUIZZ_ANSWERS_3}</label>'+
                        '</div>'+
                        '<input type="radio" name="answer" value="c" />'+
                        '<div class="clear"></div>'+
                    '</div>'+
                '</div>'+
                '<input type="hidden" id="game-value" value=" " />'+
            '</div>'+
            '<div id="correction">'+
                '<p>${QUIZZ_CORRECTION}</p>'+
            '</div>',
 
        QUESTION_SCORE:
            '<div id="score"><h2>Votre score est de :</h2><br /><div class="score"><span class="score">${QUIZZ_SCORE}</span>/20</div></div>'+
            '<div id="start-correction">Correction ></div>',
 
        NB_QUESTION: 20,
 
        game: {
            "0": {
                "question-number": "1",
                "question-text": "En France, combien produit-on de déchets radioactifs, par an et par habitant",
                "correction": "Pour chaque habitant, 2 kilos de déchets radioactifs sont produits chaque année.",
                "answers":["2 kilos","12 kilos","22 kilos"],
                "answer": "a"
            },
            "1": {
                "question-number": "2",
                "question-text": "Où reçoit-on le plus de radioactivité naturelle ?",
                "correction": "En Bretagne (jusqu'à 4 fois plus, à cause du granite, une roche naturellement radioactive)",
                "answers":["en Bretagne","à Paris","sur la Côte d’Azur"],
                "answer": "a"
            },
            "2": {
                "question-number": "3",
                "question-text": "Combien existe-t-il de producteurs de déchets radioactifs en France ?",
                "correction": "1 000 (industries, hôpitaux, armée, centres de recherche, centrales nucléaires...)",
                "answers":["10","1 000","10 000"],
                "answer": "b"
            },
            "3": {
                "question-number": "4",
                "question-text": "Dans les centres de stockage, qui veut-on protéger des dangers des déchets radioactifs ?",
                "correction": "Les deux (les personnes et la nature).",
                "answers":["les personnes","la nature","les deux"],
                "answer": "c"
            },
            "4": {
                "question-number": "5",
                "question-text": "Lequel de ces matériaux n’est pas utilisé pour emballer les déchets radioactifs ?",
                "correction": "Le bois (il n’est pas étanche et s’abîme trop vite)",
                "answers":["l’acier","le bois","le béton"],
                "answer": "b"
            },
            "5": {
                "question-number": "6",
                "question-text": "Vrai ou faux ? La majorité des déchets radioactifs ressemblent à des déchets classiques ?",
                "correction": "Vrai (outils, vêtements, plastiques...Après avoir été en contact avec de la radioactivité, ils sont eux-mêmes radioactifs)",
                "answers":["Vrai","Faux"],
                "answer": "a"
            },
            "6": {
                "question-number": "7",
                "question-text": "En combien d’années un déchet radioactif dit à « vie courte » perd-il sa radioactivité ?",
                "correction": "300 ans (environ)",
                "answers":["30 ans","300 ans","300 000 ans"],
                "answer": "b"
            },
            "7": {
                "question-number": "8",
                "question-text": "Vrai ou faux ? La radioactivité est utilisée dans les hôpitaux pour stériliser les outils des chirurgiens.",
                "correction": "Vrai",
                "answers":["Vrai","Faux"],
                "answer": "a"
            },
            "8": {
                "question-number": "9",
                "question-text": "Quelle roche naturelle a été choisie en France pour le stockage des déchets radioactifs ?",
                "correction": "L’argile (elle est très imperméable).",
                "answers":["l’argile","le grès","le schiste"],
                "answer": "a"
            },
            "9": {
                "question-number": "10",
                "question-text": "Vrai ou faux ? Notre corps est naturellement radioactif.",
                "correction": "Vrai.",
                "answers":["Vrai","Faux"],
                "answer": "a"
            },
            "10": {
                "question-number": "11",
                "question-text": "Quel pourcentage des déchets radioactifs produits en France est déjà stocké dans des centres spéciaux ?",
                "correction": "90 % (les 10 % restants sont conservés dans des bâtiments spéciaux, en attendant la construction de centres adaptés).",
                "answers":["10 %","55 %","90 %"],
                "answer": "c"
            },
            "11": {
                "question-number": "12",
                "question-text": "Quel pourcentage des déchets radioactifs proviennent de l’industrie nucléaire ?",
                "correction": "62%",
                "answers":["22 %","42 %","62 %"],
                "answer": "c"
            },
            "12": {
                "question-number": "13",
                "question-text": "Vrai ou faux ? Le stockage de déchets étrangers en France ou l’envoi de déchets français à l’étranger est autorisé.",
                "correction": "Faux (c’est interdit par la loi)",
                "answers":["Vrai","Faux"],
                "answer": "b"
            },
            "13": {
                "question-number": "14",
                "question-text": "Depuis combien d’années le stockage de déchets radioactifs existe-t-il en France ?",
                "correction": "40 ans.",
                "answers":["10 ans","20 ans","40 ans"],
                "answer": "c"
            },
            "14": {
                "question-number": "15",
                "question-text": "Que fait-on des déchets radioactifs en France ?",
                "correction": "Aujourd’hui, on les stocke dans des centres spécialisés (il en existe déjà 3 en France).",
                "answers":["on les stocke","on les envoie dans l’espace","on les met dans la mer"],
                "answer": "a"
            },
            "15": {
                "question-number": "16",
                "question-text": "En France, en combien de catégories classe-t-on les déchets radioactifs ?",
                "correction": "5 (selon le niveau et la durée de leur radioactivité).",
                "answers":["1","3","5"],
                "answer": "c"
            },
            "16": {
                "question-number": "17",
                "question-text": "Comment évolue la radioactivité d’un déchet radioactif au fil du temps ?",
                "correction": "Elle diminue (en quelques jours ou en plusieurs milliers d’années, selon le type de déchet).",
                "answers":["elle augmente","elle stagne","elle diminue"],
                "answer": "c"
            },
            "17": {
                "question-number": "18",
                "question-text": "Combien existe-t-il de centres de stockage pour les déchets radioactifs aujourd’hui en France ?",
                "correction": "3 (pour les déchets les moins radioactifs. Un 4e pourrait ouvrir en 2025, 500 mètres sous terre, pour les plus radioactifs).",
                "answers":["1","3","5"],
                "answer": "b"
            },
            "18": {
                "question-number": "19",
                "question-text": "Vrai ou faux ? La radioactivité a permis de découvrir l’âge de notre planète.",
                "correction": "Vrai (en mesurant la radioactivité des roches qui la composent).",
                "answers":["Vrai","Faux"],
                "answer": "a"
            },
            "19": {
                "question-number": "20",
                "question-text": "Vrai ou faux ? On ne peut pas mesurer la radioactivité.",
                "correction": "Faux (on peut mesurer même de très petites doses de radioactivité)",
                "answers":["Vrai","Faux"],
                "answer": "b"
            },
 
        },
 
        answers: [],
 
        currentQuestion: 0,
 
        correctionMode: false,
 
        loadQuestion:function(nbQuestion){
            var currentQuestion = Quizz.game[nbQuestion];
 
            var templateValues = {
                "QUIZZ_QUESTION_NUMBER":currentQuestion["question-number"],
                "QUIZZ_QUESTION_TEXT":currentQuestion["question-text"],
                "QUIZZ_ANSWERS_1":currentQuestion["answers"][0],
                "QUIZZ_ANSWERS_2":currentQuestion["answers"][1],
                "QUIZZ_ANSWERS_3":currentQuestion["answers"][2],
                "QUIZZ_CORRECTION":currentQuestion["correction"]
            };
 
 
 
            $('#main').html($.tmpl( Quizz.QUESTION_TEMPLATE, templateValues ));
            if(Quizz.game[Quizz.currentQuestion]["answers"].length == 2) { $('#answer-c').hide(); }
 
            if (Quizz.correctionMode) {
                $('#correction').show();
                $('.checkbox').addClass("unchecked");
                $('.checkbox').removeClass("checked");
                $('#answer-'+currentQuestion.answer).addClass("checked");
                if (Quizz.currentQuestion == Quizz.NB_QUESTION - 1) {
                    $('#next').html('Recommencer >')
                }
                $('#next').show();
 
 
                if ( Quizz.answers[Quizz.currentQuestion] == Quizz.game[Quizz.currentQuestion]["answer"] ){
 
                }
                else {
                    $('#answer-'+Quizz.answers[Quizz.currentQuestion]).addClass("user-answer");
                }
            } else {
                $('#next').hide();
                $('#next').html('Suite >')
            }
 
            Quizz.bindEvents();
        },
 
        loadScore:function(){
            var score = 0;
 
            for(var i=0; i<Quizz.answers.length; i++){
                if( Quizz.answers[i] == Quizz.game[i]["answer"] ) {
                    score++;
                }
            }
 
            var templateValues = {
                "QUIZZ_SCORE":score
            };
 
            $('#main').html($.tmpl( Quizz.QUESTION_SCORE, templateValues ));
            $("#next").hide();
            $("#start-correction").show();
 
            $("#start-correction").click(Quizz.toCorrectionMode);
 
        },
 
 
        bindEvents: function() {
            $('.checkbox').click(function(evt) {
                evt.stopPropagation();
                $('#next').show();
                $('.checkbox').addClass("unchecked");
                $('.checkbox').removeClass("checked");
                $(evt.currentTarget).addClass("checked");
                var value = $(evt.currentTarget).attr('data-quizz-value');
                $('#game-value').attr('value',value);
            });
        },
 
        next:function(){
            Quizz.answers[Quizz.currentQuestion] = $('#game-value').attr('value'); 
            Quizz.currentQuestion++;
            if ( Quizz.currentQuestion ==  Quizz.NB_QUESTION){
                if( Quizz.correctionMode == false ) {
                    Quizz.loadScore();
                }
                else {
                    Quizz.reinitialize();
                }
 
            }
            else {
                Quizz.loadQuestion(Quizz.currentQuestion);
            }
 
        },
 
        toCorrectionMode: function() {
            Quizz.correctionMode = true;
            Quizz.currentQuestion = 0;
            Quizz.loadQuestion(Quizz.currentQuestion);
        },
 
        reinitialize: function() {
            Quizz.correctionMode = false;
            Quizz.currentQuestion = 0;
            Quizz.loadQuestion(Quizz.currentQuestion);
        }
 
 
}
 
$(function(){
    Quizz.loadQuestion(0);
    $('#logo').click(function(){
            if(confirm("Etes vous surs ?")){
                Quizz.reinitialize();
            }
        }  
    );
    $('#next').click(Quizz.next);
 
});

En vous remerciant.

**Kaamo** · 18/04/2013, 13h55

car je sais pas ce que je peux toucher et qui fait quoi dans ce quizz ...

T'as un délai pour réaliser ça ? C'est un mini sujet de stage de la part de ton tuteur ?
Je pense qu'il faut que tu commences par le commencement : décortiquer, lire des tutoriels, consulter la FAQ quand tu auras une question, et mettre en oeuvre ce que tu dois réaliser.

Car répondre à ta question, et donc faire cet exercice à ta place ne serait pas t'aider, je pense.

**molochlebanni** · 18/04/2013, 14h25

C'est même pas un sujet en fait ...

C'est une des personnes du service qui trouve que ce n'est pas pratique, et qui souhaiterais que la réponse se trouve à chaque fin de questions, mais j'ai pas d'objectifs, si je trouve tant mieux, sinon tant pis...

J'aurais en fait besoin de savoir qu'est ce qui correspond à quoi, et comment je peux solutionner la chose, c'est pour ma curiosité, après si j'arrive à le faire tant mieux, mais je n'ai pas d'objectifs là dessus, mais je n'ai fait qu'un survol du javascript et du coup je suis complètement paumé, si vous avez des aides ou tutos à me passer ou un cours en direct avec ce code, je suis preneur ^^

**Kaamo** · 18/04/2013, 14h59

Ce que je ferais pour voir comment cela fonctionne :
- Utilises un navigateur et lance la console web (Ctrl+Shift+K sous Firefox, F12 sous Chrome)
- Insère des console.log dans chaque fonction. Par exemple, à la fin de loadQuestion mets un console.log('loadQuestion();')- Exécute le quiz en ayant un oeil sur la console, tu verras apparaitre les messages et ainsi constater quelle fonction est appelée quand tu fais telle ou telle action.

Au fur et à mesure, tu peux enrichir ce que tu mets dans console.log pour suivre les valeurs des variables.
Ce n'est pas un code facile à comprendre pour une première approche avec javascript, mais il a le mérite d'être plutôt bien structuré, donc une bonne chose pour apprendre.

- Une introduction à Javascript
- Il utilise jQuery, donc à lire Une introduction à jQuery

ps : il y a déjà un mode de correction (voir la variable correctionMode) (comme tu l'as dit, déclenché à la fin du test). Mais tu verras vite que ce n'est pas très compliqué de changer quelques lignes pour l'avoir à chaque question, si tu as quelques notions d'algo en stock.

Modifier un quizz JavaScript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager