Xxe/Css/publiquiz.css
author Patrick PIERRE
ven., 01 févr. 2013 19:21:20 +0100
changeset 160 e9d1bb4692b5
parent 158 4421865b3f33
child 161 1f9fa4e74cd0
permissions -rw-r--r--
Ajout des exercices avec sons et images
patrick@87
     1
@charset "UTF-8";
patrick@87
     2
patrick@87
     3
/* $Id$ */
patrick@87
     4
patrick@87
     5
@import url(publidoc.css);
patrick@87
     6
patrick@87
     7
patrick@87
     8
publiquiz {
patrick@87
     9
  display: block;
patrick@87
    10
  font-family: sans-serif;
patrick@87
    11
  padding: 0;
patrick@87
    12
}
patrick@87
    13
patrick@87
    14
patrick@87
    15
/* Component level ========================================================= */
patrick@87
    16
patrick@87
    17
quiz:before  {
patrick@87
    18
  display: block;
patrick@87
    19
  color: #7f7f7f;
patrick@87
    20
  background-color: #ddddcc;
patrick@87
    21
  border: 1px solid #aeaea0;
patrick@87
    22
  font-weight: bold;
patrick@87
    23
  padding: .5em 5px .5em 5px;
patrick@87
    24
  content: collapser() " " insert-before-button() insert-after-button()
patrick@87
    25
           " " add-attribute-button() " Quiz";
patrick@87
    26
}
patrick@87
    27
Patrick@158
    28
quiz[id]:before {
Patrick@158
    29
  content: collapser() " " insert-before-button() insert-after-button()
Patrick@158
    30
           " " add-attribute-button() " Quiz"
Patrick@158
    31
           " – ID = " text-field(attribute, "id", columns, 15, color, black);
Patrick@158
    32
}
Patrick@158
    33
quiz[type]:before {
Patrick@158
    34
  content: collapser() " " insert-before-button() insert-after-button()
Patrick@158
    35
           " " add-attribute-button() " Quiz"
Patrick@158
    36
           " – Type = " text-field(attribute, type, columns, 10, color, black);
Patrick@158
    37
}
Patrick@158
    38
quiz[id][type]:before {
Patrick@158
    39
  content: collapser() " " insert-before-button() insert-after-button()
Patrick@158
    40
           " Quiz"
Patrick@158
    41
           " – ID = " text-field(attribute, "id", columns, 15, color, black)
Patrick@158
    42
           " – Type = " text-field(attribute, type, columns, 10, color, black);
patrick@87
    43
}
patrick@87
    44
patrick@87
    45
quiz {
patrick@87
    46
  display: block;
patrick@87
    47
  border: 1px solid #aeaea0;
patrick@87
    48
  margin-bottom: .5em;
patrick@87
    49
  padding: 5px;
patrick@87
    50
  collapsible: yes;
patrick@87
    51
}
patrick@87
    52
quiz:last-child {
patrick@87
    53
  margin-bottom: 0;
patrick@87
    54
}
patrick@87
    55
patrick@87
    56
quiz > head {
patrick@87
    57
  background-color: #ffffee;
patrick@87
    58
  padding: .3em .5em .3em .5em;
patrick@87
    59
  border-radius: 0.5em;
patrick@87
    60
}
patrick@87
    61
patrick@87
    62
patrick@87
    63
/* Top level =============================================================== */
patrick@87
    64
patrick@87
    65
publiquiz > *:before {
patrick@87
    66
  display: block;
patrick@87
    67
  color: #bbbbbb;
patrick@87
    68
  background: #993333 url('top.png') repeat-x top left;
patrick@87
    69
  font-weight: bold;
patrick@87
    70
  padding: 1.2em 5px 1em 5px;
patrick@87
    71
}
patrick@87
    72
publiquiz > document:before {
patrick@87
    73
  content: add-attribute-button() " Document"
patrick@117
    74
           " – ID = " text-field(attribute, "id", columns, 15, color, white);
patrick@87
    75
}
patrick@117
    76
publiquiz > document[id][xml|lang]:before {
patrick@87
    77
  content: "Document"
patrick@117
    78
           " – ID = " text-field(attribute, "id", columns, 15, color, white)
patrick@87
    79
           " – Langue principale  = " combo-box(attribute, "xml:lang", font-size, 75%,
patrick@125
    80
             values, "en\A fr\A es", color, white);
patrick@87
    81
}
patrick@117
    82
publiquiz > quiz[id]:before {
patrick@87
    83
  content: add-attribute-button() " Quiz"
patrick@117
    84
           " – ID = " text-field(attribute, "id", columns, 15, color, white);
patrick@87
    85
}
Patrick@158
    86
publiquiz > quiz[id][type]:before {
Patrick@158
    87
  content: add-attribute-button() " Quiz"
Patrick@158
    88
           " – ID = " text-field(attribute, "id", columns, 15, color, white)
Patrick@158
    89
           " – Type = " text-field(attribute, type, columns, 10, color, white);
Patrick@158
    90
}
patrick@117
    91
publiquiz > quiz[id][xml|lang]:before {
Patrick@158
    92
  content: add-attribute-button() " Quiz"
Patrick@158
    93
           " – ID = " text-field(attribute, "id", columns, 15, color, white)
Patrick@158
    94
           " – Langue principale = " combo-box(attribute, "xml:lang", font-size, 75%,
Patrick@158
    95
             values, "en\A fr\A es", color, white);
Patrick@158
    96
}
Patrick@158
    97
publiquiz > quiz[id][type][xml|lang]:before {
patrick@87
    98
  content: "Quiz"
patrick@117
    99
           " – ID = " text-field(attribute, "id", columns, 15, color, white)
Patrick@158
   100
           " – Type = " text-field(attribute, type, columns, 10, color, white)
Patrick@158
   101
           " – Langue principale = " combo-box(attribute, "xml:lang", font-size, 75%,
patrick@125
   102
             values, "en\A fr\A es", color, white);
patrick@87
   103
}
patrick@87
   104
patrick@87
   105
publiquiz > * {
patrick@87
   106
  display: block;
patrick@87
   107
  margin: 5px;
patrick@87
   108
  padding: 0;
patrick@87
   109
  border: 0;
patrick@87
   110
}
patrick@87
   111
patrick@87
   112
publiquiz > * > head {
patrick@87
   113
  background-color: #ffffee;
patrick@87
   114
  padding: .3em .5em .3em .5em;
patrick@87
   115
  border-radius: 0.5em;
patrick@87
   116
}
patrick@87
   117
patrick@87
   118
publiquiz > * > head > title {
patrick@87
   119
  font-size: 140%;
patrick@87
   120
}
patrick@87
   121
patrick@87
   122
patrick@87
   123
/* Section level =========================================================== */
patrick@87
   124
patrick@87
   125
quiz > *:before, quiz > composite > *:before {
patrick@87
   126
  display: block;
patrick@87
   127
  color: #7f7f7f;
patrick@87
   128
  text-align: left;
patrick@87
   129
  font-style: normal;
patrick@87
   130
  font-size: 75%;
patrick@87
   131
  padding-bottom: 3px;
patrick@87
   132
}
patrick@87
   133
patrick@87
   134
quiz > *, quiz > composite > * {
patrick@87
   135
  display: block;
patrick@87
   136
}
patrick@87
   137
patrick@87
   138
quiz > *:after, quiz > composite > *:after {
patrick@87
   139
  color: #7f7f7f;
patrick@87
   140
  content: insert-after-button();
patrick@87
   141
}
patrick@87
   142
patrick@87
   143
quiz > head:after {
patrick@87
   144
  display: none;
patrick@87
   145
}
patrick@87
   146
patrick@87
   147
/* instructions ~~~~~~~~~~~~~~~~~~~~~ */
patrick@87
   148
patrick@87
   149
instructions:before {
patrick@87
   150
  background-color: #e8f0f7;
patrick@87
   151
  content: insert-before-button() " Consigne";
patrick@87
   152
}
patrick@87
   153
patrick@87
   154
instructions {
patrick@87
   155
  display: block;
patrick@87
   156
  background-color: #e8f0f7;
patrick@87
   157
}
patrick@87
   158
patrick@87
   159
instructions section:before, instructions section, instructions section:after {
patrick@87
   160
  margin-left: 1em;
patrick@87
   161
}
patrick@87
   162
patrick@87
   163
/* choices ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@87
   164
patrick@87
   165
choices-radio:before {
patrick@128
   166
  color: #7f7f7f;
patrick@87
   167
  content: insert-before-button()
patrick@87
   168
           command-button(command, "putAttribute", parameter, "shuffle true", icon, icon(plus-box))
patrick@87
   169
           " QCM – radio";
patrick@87
   170
}
patrick@87
   171
choices-radio[shuffle]:before {
patrick@87
   172
  content: insert-before-button()
patrick@87
   173
           " QCM – radio"
patrick@87
   174
           " – shuffle = " label(attribute, shuffle, color, black)
patrick@87
   175
           set-attribute-button(attribute, shuffle, unset-attribute, yes);
patrick@87
   176
}
patrick@87
   177
patrick@87
   178
choices-check:before {
patrick@128
   179
  color: #7f7f7f;
patrick@87
   180
  content: insert-before-button()
patrick@87
   181
           command-button(command, "putAttribute", parameter, "shuffle true", icon, icon(plus-box))
patrick@87
   182
           " QCM – check";
patrick@87
   183
}
patrick@87
   184
choices-check[shuffle]:before {
patrick@87
   185
  content: insert-before-button()
patrick@87
   186
           " QCM – check"
patrick@87
   187
           " – shuffle = " label(attribute, shuffle, color, black)
patrick@87
   188
           set-attribute-button(attribute, shuffle, unset-attribute, yes);
patrick@87
   189
}
patrick@87
   190
patrick@87
   191
/* blanks ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@87
   192
patrick@87
   193
blanks-fill:before {
patrick@87
   194
  content: insert-before-button()
patrick@87
   195
           command-button(command, "putAttribute", parameter, "strict true", icon, icon(plus-box))
patrick@87
   196
           " Exercice à trous – saisie libre";
patrick@87
   197
}
patrick@87
   198
blanks-fill[strict]:before {
patrick@87
   199
  content: insert-before-button()
patrick@87
   200
           " Exercice à trous – saisie libre"
patrick@87
   201
           " – strict = " label(attribute, strict, color, black)
patrick@87
   202
           set-attribute-button(attribute, strict, unset-attribute, yes);
patrick@87
   203
}
patrick@87
   204
patrick@87
   205
blanks-select:before {
patrick@87
   206
  content: insert-before-button()
patrick@87
   207
           command-button(command, "putAttribute", parameter, "multiple true", icon, icon(plus-box))
patrick@87
   208
           " Exercice à trous – liste fermée";
patrick@87
   209
}
patrick@87
   210
blanks-select[multiple]:before {
patrick@87
   211
  content: insert-before-button()
patrick@87
   212
           " Exercice à trous – liste fermée"
patrick@87
   213
           " – multiple = " label(attribute, multiple, color, black)
patrick@87
   214
           set-attribute-button(attribute, multiple, unset-attribute, yes);
patrick@87
   215
}
patrick@87
   216
patrick@87
   217
/* point ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@87
   218
patrick@87
   219
point:before {
patrick@87
   220
  content: insert-before-button() " "
patrick@87
   221
           command-button(command, "putAttribute", parameter, "type radio", icon, icon(plus-box))
patrick@87
   222
           " Pointage";
patrick@87
   223
}
patrick@87
   224
point[type]:before {
patrick@87
   225
  content: insert-before-button()
patrick@87
   226
           " Pointage – type = " label(attribute, type, color, black)
patrick@87
   227
           set-attribute-button(attribute, type, unset-attribute, yes);
patrick@87
   228
}
patrick@87
   229
patrick@87
   230
/* matching ~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@87
   231
patrick@87
   232
matching:before {
patrick@87
   233
  content: insert-before-button() " Appariement";
patrick@87
   234
}
patrick@87
   235
patrick@87
   236
/* sort ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@87
   237
patrick@87
   238
sort:before {
patrick@87
   239
  content: insert-before-button() 
patrick@87
   240
           command-button(command, "putAttribute", parameter, "shuffle true", icon, icon(plus-box))
patrick@87
   241
           " Tri";
patrick@87
   242
}
patrick@87
   243
sort[shuffle]:before {
patrick@87
   244
  content: insert-before-button()
patrick@87
   245
           " Tri – shuffle = " label(attribute, shuffle, color, black)
patrick@87
   246
           set-attribute-button(attribute, shuffle, unset-attribute, yes);
patrick@87
   247
}
patrick@87
   248
patrick@125
   249
/* categories ~~~~~~~~~~~~~~~~~~~~~~ */
patrick@125
   250
patrick@125
   251
categories:before {
patrick@125
   252
  content: insert-before-button() " Catégories";
patrick@125
   253
}
patrick@125
   254
patrick@87
   255
/* production ~~~~~~~~~~~~~~~~~~~~~~ */
patrick@87
   256
patrick@87
   257
production:before {
patrick@87
   258
  content: insert-before-button() " Production";
patrick@87
   259
}
patrick@87
   260
patrick@87
   261
/* composite ~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@87
   262
patrick@87
   263
composite:before {
patrick@87
   264
  content: insert-before-button() " Composite";
patrick@87
   265
}
patrick@87
   266
patrick@87
   267
subquiz {
patrick@87
   268
  display: block;
patrick@87
   269
  border-style: none;
patrick@87
   270
  margin: 0 0 .6em 1em;
patrick@87
   271
  padding: 0;
patrick@87
   272
}
patrick@87
   273
patrick@87
   274
subquiz > *, subquiz > *:before  {
patrick@87
   275
  display: block;
patrick@87
   276
}
patrick@87
   277
patrick@87
   278
subquiz > head {
patrick@87
   279
  background-color: #ffffee;
patrick@87
   280
  padding: .3em .5em .3em .5em;
patrick@87
   281
  border-radius: 0.5em;
patrick@87
   282
}
patrick@87
   283
patrick@87
   284
subquiz > instructions:before {
patrick@87
   285
  content: "Consigne";
patrick@87
   286
}
patrick@87
   287
patrick@87
   288
/* help ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@87
   289
patrick@87
   290
help:before {
patrick@87
   291
  margin-top: .5em;
patrick@87
   292
  background-color: #ffffdd;
patrick@125
   293
  content: insert-before-button() insert-button() " Aide ";
patrick@87
   294
}
patrick@87
   295
patrick@87
   296
help, help > *:before, help > * {
patrick@87
   297
  background-color: #ffffdd;
patrick@87
   298
}
patrick@87
   299
patrick@87
   300
/* answer ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@87
   301
patrick@87
   302
answer:before {
patrick@87
   303
  margin-top: .5em;
patrick@87
   304
  background-color: #eaffe9;
patrick@87
   305
  content: insert-before-button() insert-button() " Réponse";
patrick@87
   306
}
patrick@87
   307
patrick@87
   308
answer, answer > *:before, answer > * {
patrick@87
   309
  background-color: #eaffe9;
patrick@87
   310
}
patrick@87
   311
patrick@87
   312
answer:after {
patrick@87
   313
  display: none;   
patrick@87
   314
}
patrick@87
   315
patrick@87
   316
patrick@87
   317
/* Block level ============================================================= */
patrick@87
   318
patrick@87
   319
/* choices.right, choices.wrong ~~~~ */
patrick@87
   320
patrick@87
   321
choices-radio right:before, choices-radio wrong:before,
patrick@87
   322
choices-check right:before, choices-check wrong:before {
patrick@87
   323
  display: marker;
patrick@87
   324
  content: insert-before-button(color, #7f7f7f, icon, icon(left-half-disc))
patrick@87
   325
           insert-after-button(color, #7f7f7f, icon, icon(right-half-disc));
patrick@87
   326
}
patrick@87
   327
patrick@87
   328
choices-radio right, choices-radio wrong,
patrick@87
   329
choices-check right, choices-check wrong {
patrick@87
   330
  display: block;
patrick@87
   331
  margin-left: 24px;
patrick@87
   332
  font-size: 115%;
patrick@87
   333
  font-family: serif;
patrick@87
   334
}
patrick@87
   335
patrick@87
   336
choices-radio > right:before {
patrick@87
   337
  color: #7f7f7f;
patrick@87
   338
  content: insert-before-button(icon, icon(left-half-disc))
patrick@87
   339
           insert-after-button(icon, icon(right-half-disc))
patrick@87
   340
           "  " icon(radio-on) " ";
patrick@87
   341
    
patrick@87
   342
}
patrick@87
   343
choices-radio > wrong:before {
patrick@87
   344
  color: #7f7f7f;
patrick@87
   345
  content: insert-before-button( icon, icon(left-half-disc))
patrick@87
   346
           insert-after-button(icon, icon(right-half-disc))
patrick@87
   347
           "  " icon(radio-off) " ";
patrick@87
   348
    
patrick@87
   349
}
patrick@87
   350
choices-check > right:before {
patrick@87
   351
  color: #7f7f7f;
patrick@87
   352
  content: insert-before-button(icon, icon(left-half-disc))
patrick@87
   353
           insert-after-button(icon, icon(right-half-disc))
patrick@87
   354
           command-button(command, "convert", parameter, "wrong", icon, icon(convert))
patrick@87
   355
           "  " icon(check-on) " ";
patrick@87
   356
}
patrick@87
   357
choices-check > wrong:before {
patrick@87
   358
  color: #7f7f7f;
patrick@87
   359
  content: insert-before-button(icon, icon(left-half-disc))
patrick@87
   360
           insert-after-button(icon, icon(right-half-disc))
patrick@87
   361
           command-button(command, "convert", parameter, "right", icon, icon(convert))
patrick@87
   362
           "  " icon(check-off) " ";
patrick@87
   363
}
patrick@87
   364
patrick@87
   365
choices-radio > right, choices-radio > wrong {
patrick@87
   366
  margin-left: 52px;
patrick@87
   367
}
patrick@87
   368
choices-check > right, choices-check > wrong {
patrick@108
   369
  margin-left: 60px;
patrick@87
   370
}
patrick@87
   371
patrick@87
   372
/* blanks.wrongs ~~~~~~~~~~~~~~~~~~~ */
patrick@87
   373
patrick@87
   374
blanks-select > wrongs:before {
patrick@87
   375
  color: #7f7f7f;
patrick@87
   376
  content: "Intrus : ";
patrick@87
   377
}
patrick@87
   378
patrick@87
   379
blanks-select > wrongs {
patrick@87
   380
  display: block;
patrick@87
   381
  margin: .5em 0 .5em 0;
patrick@87
   382
}
patrick@87
   383
patrick@87
   384
wrongs > wrong {
patrick@87
   385
  display: inline;
patrick@87
   386
  background-color: #c7e0f8;
patrick@87
   387
}
patrick@87
   388
patrick@87
   389
wrongs > wrong:after {
patrick@87
   390
  color: #7f7f7f;
patrick@87
   391
  content: "  –  ";
patrick@87
   392
  background-color: transparent;
patrick@87
   393
}
patrick@87
   394
wrongs > wrong:after:last-child {
patrick@87
   395
  content: insert-same-after-button(color, #7f7f7f, icon, icon(right-half-disc));
patrick@87
   396
}
patrick@87
   397
patrick@87
   398
/* match ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@87
   399
patrick@87
   400
match:before {
patrick@87
   401
  display: marker;
patrick@87
   402
  color: #7f7f7f;
patrick@87
   403
  content: insert-same-before-button(icon, icon(left-half-disc))
patrick@87
   404
           insert-same-after-button(icon, icon(right-half-disc));
patrick@87
   405
}
patrick@87
   406
patrick@87
   407
match {
patrick@87
   408
  display: block;
patrick@87
   409
  margin-left: 24px;
patrick@87
   410
}
patrick@87
   411
patrick@87
   412
match > section:before, match > p:before {
patrick@87
   413
  display: none;
patrick@87
   414
}
patrick@87
   415
patrick@87
   416
match section, match p {
patrick@87
   417
  display: inline;
patrick@87
   418
}
patrick@87
   419
patrick@87
   420
match > section:first-child:after, match > p:first-child:after {
patrick@87
   421
  color: #7f7f7f;
patrick@87
   422
  content: " —>  ";
patrick@87
   423
}
patrick@87
   424
match > section:last-child:after, match > p:last-child:after {
patrick@87
   425
  display: none;
patrick@87
   426
}
patrick@87
   427
patrick@87
   428
/* sort > comparison ~~~~~~~~~~~~~~~ */
patrick@87
   429
patrick@87
   430
comparison:before {
patrick@87
   431
  color: #7f7f7f;
patrick@87
   432
  content: "Logique de comparaison : "
patrick@87
   433
}
patrick@87
   434
patrick@87
   435
comparison {
patrick@87
   436
  display: block;
patrick@87
   437
  margin: .2em 0 .5em 0;
patrick@87
   438
}
patrick@87
   439
patrick@87
   440
/* sort > item ~~~~~~~~~~~~~~~~~~~~~ */
patrick@87
   441
patrick@87
   442
sort > item:before {
patrick@87
   443
  color: #7f7f7f;
patrick@87
   444
  content: insert-before-button(icon, icon(left-half-disc))
patrick@87
   445
           text-field(attribute, "shuffle", columns, 1, font-size, 75%, color, black)
patrick@87
   446
           " ";
patrick@87
   447
}
patrick@87
   448
patrick@87
   449
sort > item {
patrick@87
   450
  display: inline;
patrick@87
   451
}
patrick@87
   452
patrick@87
   453
sort > item:after {
patrick@87
   454
  color: #7f7f7f;
patrick@87
   455
  content: insert-same-after-button(icon, icon(right-half-disc))
patrick@87
   456
           " " xpath("../comparison") " ";
patrick@87
   457
}
patrick@87
   458
sort > item:last-child:after {
patrick@87
   459
  content: insert-same-after-button(icon, icon(right-half-disc)) "\A";
patrick@87
   460
}
patrick@87
   461
patrick@125
   462
/* category ~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@125
   463
patrick@125
   464
category {
patrick@125
   465
  display: block;
patrick@125
   466
  margin-bottom: .3em;
patrick@125
   467
}
patrick@125
   468
patrick@125
   469
category > head {
patrick@125
   470
  display: block;
patrick@125
   471
}
patrick@125
   472
patrick@125
   473
category > item {
patrick@125
   474
  margin-left: 1em;
patrick@125
   475
}
patrick@125
   476
patrick@125
   477
category:after {
patrick@125
   478
  color: #7f7f7f;
patrick@125
   479
  content: "  " insert-same-after-button();
patrick@125
   480
}
patrick@125
   481
patrick@87
   482
patrick@87
   483
/* Inline level ============================================================ */
patrick@87
   484
patrick@87
   485
/* blank ~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
patrick@87
   486
patrick@87
   487
blank {
patrick@87
   488
  background-color: #c0ffc0;
patrick@87
   489
}
patrick@87
   490
patrick@87
   491
s:after {
patrick@87
   492
  color:  #7f7f7f;
patrick@87
   493
  background-color: transparent;
patrick@87
   494
  content: insert-same-after-button(icon, icon(right-half-disc));
patrick@87
   495
}
patrick@87
   496
patrick@87
   497
/* point.right & point.wrong ~~~~~~~ */
patrick@87
   498
patrick@87
   499
point right:before, point wrong:before {
patrick@87
   500
  background: transparent;
patrick@87
   501
  color: #7f7f7f;
patrick@87
   502
}
patrick@87
   503
point right:before {
patrick@87
   504
  content: command-button(command, "convert", parameter, "wrong", icon, icon(convert));
patrick@87
   505
}
patrick@87
   506
point wrong:before {
patrick@87
   507
  content: command-button(command, "convert", parameter, "right", icon, icon(convert));
patrick@87
   508
}
patrick@87
   509
patrick@87
   510
point right {
patrick@87
   511
  background-color: #c0ffc0;
patrick@87
   512
}
patrick@87
   513
patrick@87
   514
point wrong {
patrick@87
   515
  background-color: #c7e0f8;
patrick@87
   516
}