forked from fabrixxm/restaurant
-
Notifications
You must be signed in to change notification settings - Fork 0
/
levels_fr.js
380 lines (368 loc) · 20 KB
/
levels_fr.js
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
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
// Hash the array and compare the arrays!
// Key
// a = small apple .small
// A = apple
// o = small orange, .small
// O = orange
// p = small pickle, .small
// P = pickle
// () = plate open / close
// {} = fancy plate open / close
// [] = bento open close tags
strings['fr'] = {
'table': 'table',
'apple': 'pomme',
'orange': 'orange',
'pickle': 'cornichon',
'plate': 'assiette',
'bento': 'bento',
'fancy': 'chic',
'small': 'petit',
/* ui */
"Level {0} of {1}": 'Niveau {0} sur {1}',
'str1': "Pas d'inquiétude, vous pouvez le faire !",
'str2': "Vous allez découvrir les sélecteurs CSS !\nLes sélecteurs servent à sélectionner les éléments auxquels on veut appliquer un style.",
'str3': "Exemple 1 - Une Règle CSS",
'str4': 'Ici, le "p" est le sélecteur (sélectionne tous les éléments HTML <p>) et applique le style "margin-bottom".',
'str5': "Pour jouer, écrivez un sélecteur CSS dans l'éditeur ci-dessous pour sélectionner les bons objets sur la table. Si votre sélection est correcte, vous avancerez au niveau suivant.",
'str6': "Passez la souris sur les objets sur la table pour voir leurs codes HTML.",
'str7': "Une aide sur les sélecteurs vous est fournie sur la droite ! →",
'str8': "J'ai compris !",
'str9': "À l'aide je suis coincé !",
'str10': "Éditeur CSS <div class='file-name'>style.css</div>",
'str11': "Entrez un sélecteur CSS",
'str12': "entrée",
'str13': "{<br/>/* Les styles seraient ici */<br/>}",
'str14': '<br/>/* <br/>Entrez un nombre pour sauter directement à un niveau suivant.<br/>Ex → "5" pour le niveau 5 <br/>*/',
'str15': "<div class='file-name'>table.html</div> Lecteur HTML",
'str16': "À Propos",
'str17': "Ceci est un jeu pour vous aider à apprendre les sélecteurs CSS. Entrez le bon sélecteur pour terminer chaque niveau. Une aide vous est fournie sur la droite.",
'str18': 'Restaurant CSS',
'str19': 'Restaurant CSS - On se délecte des sélecteurs CSS !',
'win': '<strong>Félicitations !</strong><br>Vous êtes maintenant un pro des sélecteurs CSS !'
}
levels['fr'] = [
{
helpTitle: "Sélectionner les éléments selon leur type",
selectorName: "Sélecteur de type",
doThis: "Sélectionnez les assiettes",
selector: "plate",
syntax: "A",
help: "Sélectionne tous les éléments de type <strong>A</strong>. Le type désigne le type de balise, par exemple <tag>div</tag>, <tag>p</tag>, <tag>ul</tag>, etc.",
examples: [
'<strong>div</strong> sélectionne tous les éléments <tag>div</tag>.',
'<strong>p</strong> sélectionne tous les éléments <tag>p</tag>.',
],
board: "()()"
},
{
doThis: "Sélectionnez les bentos",
selector: "bento",
syntax: "A",
helpTitle: "Sélectionner les éléments selon leur type",
selectorName: "Sélecteur de type",
help: "Sélectionne tous les éléments de type <strong>A</strong>. Le type désigne le type de balise, par exemple <tag>div</tag>, <tag>p</tag>, <tag>ul</tag>, etc.",
examples: [
'<strong>div</strong> sélectionne tous les éléments <tag>div</tag>.',
'<strong>p</strong> sélectionne tous les éléments <tag>p</tag>.',
],
board: "[]()[]"
},
{
doThis: "Sélectionnez l'assiette chic",
selector: "#fancy",
selectorName: "Sélecteur d'identifiant",
helpTitle: "Sélectionner les éléments selon leur identifiant (ID)",
syntax: "#ID",
help: 'Sélectionne l\'élément ayant l\'attribut <strong>id</strong> valant <strong>ID</strong>. Il est possible de combiner un sélecteur d\'identifiant et un sélecteur de type.',
examples: [
'<strong>#cool</strong> sélectionne tout élément ayant <strong>id="cool"</strong>',
'<strong>ul#long</strong> sélectionne les éléments <strong><ul id="long"></strong>'
],
board: "{}()[]"
},
{
helpTitle: "Sélectionner un élément contenu dans un autre élément",
selectorName: "Sélecteur de descendant",
doThis: "Sélectionnez la pomme dans l'assiette",
selector: "plate apple",
syntax: "A B",
help: "Sélectionne tous les <strong>B</strong> à l'intérieur d'éléments <strong>A</strong>. Ici, <strong>B</strong> est le descendant de A, c'est-à-dire un élément à l'intérieur de A.",
examples: [
'<strong>p strong</strong> sélectionne tout élément <strong><strong></strong> qui est descendant d\'un élément<strong><p></strong>',
'<strong>#fancy span</strong> sélectionne tout élément <strong><span></strong> qui est descendant d\'un élément ayant l\'attribut <strong>id="fancy"</strong>',
],
board: "[](A)A"
},
{
doThis: "Sélectionnez le cornichon sur l'assiette chic",
selector: "#fancy pickle",
helpTitle: "Combiner les sélecteurs d'identifiant et de descendant",
syntax: "#ID A",
help: 'Le sélecteur de descendant peut être combiner avec les autres sélecteurs.',
examples: [
'<strong>#cool span</strong> sélectionne tous les éléments <strong><span></strong> qui sont à l\'intérieur d\' éléments avec <strong>id="cool"</strong>'
],
board: "[O]{P}(P)"
},
{
doThis: "Sélectionnez les petites pommes",
selector: ".small",
selectorName: "Sélecteur de classe",
helpTitle: "Sélectionner les éléments en fonction de leur classe",
syntax: ".nomdeclasse",
help: 'Le sélecteur de classe sélectionne tous les éléments ayant en attribut la classe donnée. Les éléments peuvent avoir un seul identifiant mais plusieurs classes.',
examples: [
'<strong>.genial</strong> sélectionne tous les éléments avec <strong>class="genial"</strong>'
],
board: "Aa(a)()"
},
{
doThis: "Sélectionnez les petites oranges",
selector: "orange.small",
helpTitle: "Combiner les sélecteurs de type et de classe",
syntax: "A.nomdeclasse",
help: 'On peut combiner le sélecteur de classe avec les autres sélecteurs, comme le sélecteur de type.',
examples: [
'<strong>ul.important</strong> sélectionne tous les éléments <strong><ul></strong> qui ont <strong>class="important"</strong>',
'<strong>#grand.large</strong> sélectionne tous les éléments avec <strong>id="grand"</strong> qui ont aussi <strong>class="large"</strong>'
],
board: "Aa[o](O)(o)"
},
{
doThis: "Sélectionnez les petites oranges qui sont dans des bentos",
selector: "bento orange.small",
syntax: "Donnez tout ce que vous avez !",
helpTitle: "Vous pouvez le faire...",
help: 'Combinez tout ce que vous avez appris jusque là pour résoudre ce niveau !',
board: "A(o)[o][a][o]"
},
{
doThis: "Sélectionnez toutes les assiettes et bentos",
selector: "plate,bento",
selectorName: "L'opérateur de combinaison",
helpTitle: "Combiner, des sélecteurs, avec.. des virgules !",
syntax: "A, B",
help: "Grâce à la technologie Shatner, on peut sélectionner tous les éléments <strong>A</strong> et <strong>B</strong>. Il est possible de combiner n'importe quel nombre de sélecteurs avec plusieurs virgules.",
examples: [
'<strong>p, .amusant</strong> sélectionne tous les éléments <tag>p</tag> ainsi que tous les éléments qui ont <strong>class="amusant"</strong>',
'<strong>a, p, div</strong> sélectionne tous les éléments <tag>a</tag>, <tag>p</tag> et <tag>div</tag>'
],
board: "pP(P)[P](P)Pp"
},
{
doThis: "Sélectionnez tout !",
selector: "*",
selectorName: "Le Sélecteur Universel",
helpTitle: "Tout sélectionner !",
syntax: "*",
help: 'Vous pouvez sélectionner tous les éléments avec le sélecteur universel ! ',
examples: [
"<strong>p *</strong> sélectionne tous les éléments à l'intérieur des éléments <tag>p</tag>."
],
board: "A(o)[][O]{)"
},
{
doThis: "Sélectionnez tout ce qui se trouve sur une assiette",
selector: "plate *",
syntax: "A *",
helpTitle: "Combiner avec le sélecteur universel",
help: "Sélectionner tous les éléments à l'intérieur d'éléments <strong>A</strong>.",
examples: [
"<strong>p *</strong> sélectionne tous les éléments à l'intérieur des éléments strong><p></strong>.",
"<strong>ul.chic *</strong> sélectionne tous les éléments à l'intérieur des éléments <strong><ul class=\"chic\"></strong>."
],
board: "{o}(P)a(A)"
},
{
doThis: "Sélectionnez toutes les pommes qui sont à côté d'une assiette",
selector: "plate + apple",
helpTitle: "Sélectionner un élément qui suit directement un autre élément",
selectorName: "Sélecteur de frère adjacent",
syntax: "A + B",
help: "Sélectionne tous les éléments qui suivent directement des éléments <strong>A</strong>. Des éléments qui se suivent sont appelés des frères. Ils sont sur le même niveau, ou profondeur. <br/><br/>Dans le code HTML de ce niveau, les éléments ayant le même niveau d'indentation (les espaces en début de ligne) sont des frères.",
examples: [
'<strong>p + .intro</strong> sélectionne tous les éléments avec <strong>class="intro"</strong> qui suivent directement un élément <tag>p</tag>.',
'<strong>div + a</strong> sélectionne tous les éléments <tag>a</tag> qui suivent directement un élément <tag>div</tag>.'
],
board: "[a]()a()Aaa"
},
{
selectorName: "Sélecteur des frères successeurs",
helpTitle: "Sélectionner tous les éléments qui suivent un autre élément",
syntax: "A ~ B",
doThis: "Sélectionnez tous les cornichons à droite du bento",
selector: "bento ~ pickle",
help: "Sélectionne tous les frères d'un élément qui le suivent. Il s'agit d'un sélecteur similaire au sélecteur de frère adjacent (A + B) sauf qu'on sélectionne tous les frères qui le suivent au lieu du premier.",
examples: [
'<strong>A ~ B</strong> sélectionne tous les éléments <strong>B</strong> qui suivent un élément <strong>A</strong>.'
],
board: "P[o]pP(P)(p)"
},
{
selectorName: "Sélecteur d'enfant",
syntax: "A > B ",
doThis: "Sélectionnez la pomme qui est directement sur une assiette",
selector: "plate > apple",
helpTitle: "Sélectionner les enfants d'un élément",
help: "Sélectionne tous les éléments qui sont des enfants d'autres éléments. Un enfant est un élément qui apparaît directement à l'intérieur d'un autre.",
examples: [
"<strong>A > B</strong> sélectionne tous les éléments <strong>B</strong> qui sont descendants directs d'un élément <strong>A</strong>."
],
board: "([A])(A)()Aa"
},
{
selectorName: "Pseudo-sélecteur du premier enfant",
helpTitle: "Sélectionner le premier élément enfant d'un autre",
doThis: "Selectionnez l'orange au dessus de la pile",
selector: "plate :first-child",
syntax: ":first-child",
help: "Sélectionne les éléments qui sont le premier enfant de leur parent. Il est possible de combiner ce pseudo-sélecteur avec d'autres sélecteurs.",
examples: [
'<strong>:first-child</strong> sélectionne tous les éléments qui sont premiers enfants de leur parent.',
"<strong>p:first-child</strong> sélectionne tous les premiers enfants de type <tag>p</tag>.",
"<strong>div p:first-child</strong> sélectionne tous les premiers enfants de type <tag>p</tag> qui sont descendants d'un élément <tag>div</tag>."
],
board: "[]()(OOO)p"
},
{
selectorName: "Pseudo-sélecteur d'enfant unique",
helpTitle: "Sélectionner un élément qui est l'unique enfant d'un autre élément.",
doThis: "Sélectionnez les aliments qui sont seuls sur une assiette",
selector: "plate :only-child",
syntax: ":only-child",
help: "Sélectionne les éléments qui sont les seuls enfants de leurs parents.",
examples: [
'<strong>span:only-child</strong> sélectionne les éléments <tag>span</tag> qui sont enfants uniques.',
"<strong>ul li:only-child</strong> sélectionne les éléments <tag>li</tag> qui sont enfants uniques à l'intérieur d'un élément <tag>ul</tag>."
],
board: "(A)(p)[]P(oO)p"
},
{
selectorName: "Pseudo-sélecteur de dernier enfant",
helpTitle: "Sélectionner le dernier enfant d'un autre élément",
doThis: "Sélectionnez la petite pomme et le cornichon",
selector: ".small:last-child",
syntax: ":last-child",
help: "Sélectionne le dernier enfant d'un élément. <br><br>Conseil de pro → si un élément est enfant unique, il compte à la fois comme premier et dernier enfant !",
examples: [
'<strong>:last-child</strong> sélectionne tous les éléments qui sont derniers enfants de leur parent.',
"<strong>span:last-child</strong> sélectionne tous les derniers enfants de type <tag>span</tag>.",
"<strong>ul li:last-child</strong> sélectionne tous les derniers enfants <tag>li</tag> qui sont descendants d'éléments <tag>ul</tag>."
],
board: "{a)()(oO)p"
},
{
selectorName: "Pseudo-sélecteur du n-ième enfant",
helpTitle: "Sélectionner un élément selon son placement dans un autre élément",
doThis: "Sélectionnez la 3e assiette",
selector: ":nth-child(3)",
syntax: ":nth-child(A)",
help: "Sélectionne le n-ième (1e, 3e, 12e, etc.) élément enfant d'un autre élément.",
examples: [
"<strong>:nth-child(8)</strong> sélectionne tous les éléments qui sont 8e enfant d'un autre élément.",
'<strong>div p:nth-child(2)</strong> sélectionne tous les deuxièmes enfants <tag>p</tag> dans des <tag>div</tag>.',
],
board: "()()(){}"
},
{
selectorName: "Pseudo-sélecteur du n-ième dernier enfant",
helpTitle: "Sélectionner un élément selon son placement dans un autre élément, en comptant depuis le dernier enfant",
doThis: "Sélectionnez le premier bento",
selector: "bento:nth-last-child(4)",
syntax: ":nth-last-child(A)",
help: "Sélectionne les n-ième enfants en comptant depuis le dernier enfant.",
examples: [
'<strong>:nth-last-child(2)</strong> sélectionne tous les éléments qui sont avant-dernier enfants de leurs parents.'
],
board: "()[]a(OOO)[]"
},
{
selectorName: "Pseudo-sélecteur du premier enfant d'un type",
helpTitle: "Sélectionner le premier enfant d'un type donné",
doThis: "Sélectionnez la première pomme",
selector: "apple:first-of-type",
syntax: ":first-of-type",
help: "Sélectionne le premier enfant d'un type donné d'un élément.",
examples: [
"<strong>span:first-of-type</strong> sélectionne le premier élément <tag>span</tag> à l'intérieur de n'importe quel élément."
],
board: "Aaaa(oO)"
},
{
selectorName: "Pseudo-sélecteur du n-ième enfant d'un type",
helpTitle: "Sélectionner le n-ième enfant d'un type donné",
doThis: "Sélectionnez les assiettes paires",
selector: "plate:nth-of-type(even)",
syntax: ":nth-of-type(A)",
help: "Sélectionne un élément en fonction de son placement parmi des enfants du type donné - ou les éléments paires ou impaires de ce type.",
examples: [
"<strong>div:nth-of-type(2)</strong> sélectionne les deuxièmes éléments <tag>div</tag> parmi les enfants de n'importe quel élément.",
'<strong>.exemple:nth-of-type(odd)</strong> sélectionne tous les éléments impairs qui ont <strong>class="exemple"</strong>.'
],
board: "()()()(){}()"
},
{
selectorName: "Pseudo-sélecteur du n-ième enfant d'un type avec formule",
helpTitle: "Sélectionner les enfants d'un type donné avec formule",
doThis: "Sélectionnez une assiette sur deux, en commençant de la troisième assiette.",
selector: "plate:nth-of-type(2n+3)",
syntax: ":nth-of-type(An+B)",
help: "Sélectionne un élément tous les n éléments, en commençant à partir d'un élément d'un certain rang.",
examples: [
'<strong>span:nth-of-type(6n+2)</strong> sélectionne un élément <tag>span</tag> tous les 6, en commençant à partir du deuxième élément <tag>span</tag>.'
],
board: "()(p)(a)()(A)()"
},
{
selectorName: "Sélecteur du seul élément d'un type",
helpTitle: "Sélectionner les éléments qui n'ont pas de frères du même type",
selector: "apple:only-of-type",
syntax: ":only-of-type",
doThis: "Sélectionnez la pomme sur l'assiette du milieu.",
help: "Sélectionne le seul élément d'un type à l'intérieur d'un autre élément.",
examples: [
"<strong>p span:only-of-type</strong> sélectionne un élément <tag>span</tag> à l'intérieur d'un élément <tag>p</tag> à condition que celui-ci soit le seul élément <tag>span</tag> dans l'élément <tag>p</tag>."
],
board: "(aA)(a)(p)"
},
{
selectorName: "Sélecteur du dernier enfant d'un type",
helpTitle: "Sélectionner le dernier enfant d'un type donné",
doThis: "Sélectionnez la deuxième pomme et la deuxième orange",
selector: ".small:last-of-type",
syntax: ":last-of-type",
help: "Sélectionne les éléments qui sont les derniers de ce type à l'intérieur d'un autre élément. Rappel : le type d'un élément désigne le nom de sa balise (<tag>p</tag>, <tag>span</tag>, etc.). <br><br> Je me demande si c'est comme ça que le dernier dinosaure a été sélectionné avant leurs extinction.",
examples: [
"<strong>div:last-of-type</strong> sélectionne le dernier élément <tag>div</tag> dans n'importe quel autre élément.",
'<strong>p span:last-of-type</strong> sélectionne le dernier élément <tag>span</tag> dans chaque élément <tag>p</tag>.'
],
board: "ooPPaa"
},
{
selectorName: "Sélecteur d'élément creux",
helpTitle: "Sélectionner les éléments qui n'ont pas d'enfant",
doThis: "Sélectionnez les bentos vides",
selector: "bento:empty",
syntax: ":empty",
help: "Sélectionne les éléments qui n'ont pas d'enfant.",
examples: [
'<strong>div:empty</strong> sélectionne tous les éléments <tag>div</tag> sans enfant.'
],
board: "[][p][][]"
},
{
selectorName: "Pseudo-classe de négation",
helpTitle: "Sélectionner tous les éléments qui ne sont pas sélectionnés par un sélecteur",
doThis: "Sélectionnez les grosses pommes",
selector: "apple:not(.small)",
syntax: ":not(X)",
help: 'Sélectionne les éléments qui ne sont pas sélectionnés par le sélecteur <strong>"X"</strong>.',
examples: [
"<strong>:not(#chic)</strong> sélectionne tous les éléments qui n'ont pas <strong>id=\"chic\"</strong>.",
'<strong>div:not(:first-child)</strong> sélectionne tous les éléments <tag>div</tag> qui ne sont pas premier enfant.',
"<strong>:not(.gros, .moyen)</strong> sélectionne tous les éléments qui n'ont pas <strong>class=\"gros\"</strong> ou <strong>class=\"moyen\"</strong>"
],
board: "{a}(A)A(o)p"
}
];