theme/boost/scss/moodle/question.scss

   1 /* Question */
   2 .questionbank h2 {
   3     margin-top: 0;
   4 }
   5
   6 .questioncategories h3 {
   7     margin-top: 0;
   8 }
   9
  10 #chooseqtypebox {
  11     margin-top: 1em;
  12 }
  13
  14 #chooseqtype h3 {
  15     margin: 0 0 0.3em;
  16 }
  17
  18 #chooseqtype .instruction {
  19     display: none;
  20 }
  21
  22 #chooseqtype .fakeqtypes {
  23     border-top: 1px solid silver;
  24 }
  25
  26 #chooseqtype .qtypeoption {
  27     margin-bottom: 0.5em;
  28 }
  29
  30 #chooseqtype label {
  31     display: block;
  32 }
  33
  34 #chooseqtype .qtypename img {
  35     padding: 0 0.3em;
  36 }
  37
  38 #chooseqtype .qtypename {
  39     display: inline-table;
  40     width: 16em;
  41 }
  42
  43 #chooseqtype .qtypesummary {
  44     display: block;
  45     margin: 0 2em;
  46 }
  47
  48 #chooseqtype .submitbuttons {
  49     margin: 0.7em 0;
  50     text-align: center;
  51 }
  52
  53 #qtypechoicecontainer {
  54     display: none;
  55 }
  56
  57 #qtypechoicecontainer_c.yui-panel-container.shadow .underlay {
  58     background: none;
  59 }
  60
  61 #qtypechoicecontainer.yui-panel .hd {
  62     color: #333;
  63     letter-spacing: 1px;
  64     text-shadow: 1px 1px 1px #fff;
  65
  66     @include border-top-radius(10px);
  67     border: 1px solid #ccc;
  68     border-bottom: 1px solid #bbb;
  69
  70     @include gradient-y(#fff, #ccc);
  71 }
  72
  73 #qtypechoicecontainer {
  74     font-size: 12px;
  75     color: #333;
  76     background: #f2f2f2;
  77
  78     @include border-radius(10px);
  79     border: 1px solid #ccc;
  80     border-top: 0 none;
  81
  82     @include box-shadow(5px 5px 20px 0 #666);
  83 }
  84
  85 #qtypechoicecontainer #chooseqtype {
  86     width: 40em;
  87 }
  88
  89 #chooseqtypehead h3 {
  90     margin: 0;
  91     font-weight: normal;
  92 }
  93
  94 #chooseqtype .qtypes {
  95     position: relative;
  96     border-bottom: 1px solid #bbb;
  97     padding: 0.24em 0;
  98 }
  99
 100 #chooseqtype .alloptions {
 101     overflow-x: hidden;
 102     overflow-y: auto;
 103     max-height: calc(100vh - 15em);
 104     width: 60%;
 105 }
 106
 107 #chooseqtype .qtypeoption {
 108     margin-bottom: 0;
 109     padding: 0.3em 0.3em 0.3em 1.6em;
 110 }
 111
 112 #chooseqtype .qtypeoption img {
 113     vertical-align: text-bottom;
 114     padding-left: 1em;
 115     padding-right: 0.5em;
 116 }
 117
 118 #chooseqtype .selected {
 119     background-color: #fff;
 120
 121     @include box-shadow(0 0 10px 0 #ccc);
 122 }
 123
 124 #chooseqtype .instruction,
 125 #chooseqtype .qtypesummary {
 126     display: none;
 127     position: absolute;
 128     top: 0;
 129     right: 0;
 130     bottom: 0;
 131     left: 60%;
 132     margin: 0;
 133     overflow-x: hidden;
 134     overflow-y: auto;
 135     padding: 1.5em 1.6em;
 136     background-color: #fff;
 137 }
 138
 139 #chooseqtype .instruction,
 140 #chooseqtype .selected .qtypesummary {
 141     display: block;
 142 }
 143
 144 #categoryquestions {
 145     margin: 0;
 146
 147     td,
 148     th {
 149         padding: 0 0.2em;
 150     }
 151
 152     th {
 153         text-align: left;
 154         font-weight: normal;
 155     }
 156
 157     .checkbox {
 158         padding-left: 5px;
 159     }
 160
 161     .checkbox input[type="checkbox"] {
 162         margin-left: 0;
 163         float: none;
 164     }
 165
 166     .iconcol {
 167         padding: 3px;
 168         box-sizing: content-box;
 169
 170         .icon {
 171             margin: 0;
 172             width: 12px;
 173             height: 12px;
 174         }
 175     }
 176
 177     label {
 178         margin: 0;
 179         display: block;
 180     }
 181
 182     .header {
 183         text-align: left;
 184     }
 185 }
 186
 187 #page-mod-quiz-edit {
 188     div.questionbankwindow div.header {
 189         margin: 0;
 190     }
 191
 192     div.questionbankwindow.block {
 193         padding: 0;
 194     }
 195 }
 196
 197 .questionbank .singleselect {
 198     margin: 0;
 199 }
 200 /* Question editing form */
 201 #combinedfeedbackhdr div.fhtmleditor {
 202     padding: 0;
 203 }
 204
 205 #combinedfeedbackhdr div.fcheckbox {
 206     margin-bottom: 1em;
 207 }
 208
 209 #multitriesheader div.fitem_feditor {
 210     margin-top: 1em;
 211 }
 212
 213 #multitriesheader div.fitem_fgroup {
 214     margin-bottom: 1em;
 215 }
 216
 217 #multitriesheader div.fitem_fgroup fieldset.felement label {
 218     margin-left: 0.3em;
 219     margin-right: 0.3em;
 220 }
 221
 222 body.path-question-type {
 223     /* Hacks to display the labels within a form group. */
 224     .form-group .sr-only:not(legend) {
 225         position: static;
 226         width: auto;
 227         height: auto;
 228         padding: 0;
 229         margin: 0 0.5rem 0 0;
 230         overflow: visible;
 231         clip: auto;
 232         clip-path: none;
 233         border: 0;
 234     }
 235 }
 236
 237 .que {
 238     clear: left;
 239     text-align: left;
 240     margin: 0 auto 1.8em auto;
 241 }
 242
 243 .que .info {
 244     float: left;
 245     width: 7em;
 246     padding: 0.5em;
 247     margin-bottom: 1.8em;
 248     background-color: $gray-100;
 249     border: 1px solid darken($gray-300, 7%);
 250
 251     @include border-radius(2px);
 252 }
 253
 254 .que h3.no {
 255     margin: 0;
 256     font-size: 0.8em;
 257     line-height: 1;
 258 }
 259
 260 .que span.qno {
 261     font-size: 1.5em;
 262     font-weight: bold;
 263 }
 264
 265 .que .info > div {
 266     font-size: 0.8em;
 267     margin-top: 0.7em;
 268 }
 269
 270 .que .info .questionflag.editable {
 271     cursor: pointer;
 272 }
 273
 274 .que .info .editquestion img,
 275 .que .info .questionflag img,
 276 .que .info .questionflag input {
 277     vertical-align: bottom;
 278 }
 279
 280 .que .content {
 281     margin: 0 0 0 8.5em;
 282 }
 283
 284 .que .formulation,
 285 .que .outcome,
 286 .que .comment {
 287     position: relative;
 288     padding: $alert-padding-y $alert-padding-x;
 289     margin-bottom: $alert-margin-bottom;
 290     border: $alert-border-width solid transparent;
 291     @include border-radius($alert-border-radius);
 292 }
 293 .que .outcome,
 294 .que .comment {
 295     @include alert-variant(theme-color-level('warning', $alert-bg-level), theme-color-level('warning', $alert-border-level), theme-color-level('warning', $alert-color-level - 0.9)); /* stylelint-disable-line max-line-length */
 296     // Darken link colour inside comments for better colour contrast against regular text.
 297     a {
 298         color: darken($link-color, 30%);
 299     }
 300 }
 301
 302 .que .formulation {
 303     @include alert-variant(theme-color-level('info', $alert-bg-level - 1.30), theme-color-level('info', $alert-border-level), theme-color-level('info', $alert-color-level + 4)); /* stylelint-disable-line max-line-length */
 304 }
 305
 306 .que.multichoice .answer div.r0 .icon.fa-check,
 307 .que.multichoice .answer div.r1 .icon.fa-check,
 308 .que.multichoice .answer div.r0 .icon.fa-remove,
 309 .que.multichoice .answer div.r1 .icon.fa-remove {
 310     text-indent: 0;
 311 }
 312
 313 .formulation input[type="text"],
 314 .formulation select {
 315     width: auto;
 316     vertical-align: baseline;
 317 }
 318
 319 .que.multianswer .formulation .yui3-widget-positioned {
 320     box-sizing: content-box;
 321     .feedbackspan {
 322         width: inherit;
 323         max-width: inherit;
 324     }
 325 }
 326
 327 .path-mod-quiz input[size] {
 328     width: auto;
 329     max-width: 100%;
 330 }
 331
 332 .que .comment {
 333     @include alert-variant(theme-color-level('success', $alert-bg-level), theme-color-level('success', $alert-border-level), theme-color-level('success', $alert-color-level)); /* stylelint-disable-line max-line-length */
 334 }
 335
 336 .que .ablock {
 337     margin: 0.7em 0 0.3em 0;
 338 }
 339
 340 .que .im-controls {
 341     margin-top: 0.5em;
 342     text-align: left;
 343 }
 344
 345 .que .specificfeedback,
 346 .que .generalfeedback,
 347 .que .numpartscorrect
 348 .que .rightanswer,
 349 .que .im-feedback,
 350 .que .feedback,
 351 .que p {
 352     margin: 0 0 0.5em;
 353 }
 354
 355 .que .correctness {
 356     &.correct {
 357         @include badge-variant($success);
 358     }
 359     &.partiallycorrect {
 360         @include badge-variant($warning);
 361     }
 362     &.notanswered,
 363     &.incorrect {
 364         @include badge-variant($danger);
 365     }
 366 }
 367
 368 .que .qtext {
 369     margin-bottom: 1.5em;
 370 }
 371
 372 .que .validationerror {
 373     color: map-get($theme-colors, 'danger');
 374 }
 375 // copied from .formFieldState in mixin.less
 376 // and made more specific
 377
 378 .que .grading,
 379 .que .comment,
 380 .que .commentlink,
 381 .que .history {
 382     margin-top: 0.5em;
 383 }
 384
 385 .que .history h3 {
 386     margin: 0 0 0.2em;
 387     font-size: 1em;
 388 }
 389
 390 .que .history table {
 391     width: 100%;
 392     margin: 0;
 393 }
 394
 395 .que .history .current {
 396     font-weight: bold;
 397 }
 398
 399 .que .questioncorrectnessicon {
 400     vertical-align: text-bottom;
 401 }
 402
 403 body.jsenabled .questionflag input[type=checkbox] {
 404     display: none;
 405 }
 406
 407 .que .questionflagimage {
 408     padding-right: 3px;
 409     height: 16px;
 410     width: 16px;
 411 }
 412
 413 .importerror {
 414     margin-top: 10px;
 415     border-bottom: 1px solid #555;
 416 }
 417
 418 .mform .que.comment .fitemtitle {
 419     width: 20%;
 420 }
 421
 422 #page-question-preview #techinfo {
 423     margin: 1em 0;
 424 }
 425
 426 #page-question-preview .collapsibleregion {
 427     .collapsibleregioncaption,
 428     .collapsibleregionextracontent {
 429         display: inline-block;
 430     }
 431 }
 432
 433 // imported from quiz.css
 434
 435 #page-mod-quiz-edit ul.slots .activityinstance {
 436     > a {
 437         display: flex;
 438         max-width: 100%;
 439         align-items: center;
 440         text-indent: 0;
 441         padding-left: 0;
 442     }
 443     img.activityicon {
 444         margin-left: 0;
 445         width: 16px;
 446         height: 16px;
 447         padding-right: 4px;
 448     }
 449 }
 450
 451 #page-mod-quiz-edit .activity {
 452     img.activityicon {
 453         vertical-align: text-top;
 454     }
 455 }
 456
 457 #page-mod-quiz-edit .box.generalbox.questionbank {
 458     padding: 0.5em;
 459 }
 460
 461 #page-mod-quiz-edit .questionbank .categorypagingbarcontainer,
 462 #page-mod-quiz-edit .questionbank .categoryquestionscontainer,
 463 #page-mod-quiz-edit .questionbank .choosecategory {
 464     padding: 0;
 465 }
 466
 467 #page-mod-quiz-edit .questionbank .choosecategory select {
 468     width: 100%;
 469 }
 470
 471 #page-mod-quiz-edit div.questionbank .categoryquestionscontainer {
 472     background: transparent;
 473 }
 474
 475 #page-mod-quiz-edit #categoryquestions > thead {
 476     background: #fff;
 477 }
 478
 479 #page-mod-quiz-edit #categoryquestions > tbody > tr:nth-of-type(even) {
 480     background: #e4e4e4;
 481 }
 482
 483 #page-mod-quiz-edit .questionbankwindow div.header {
 484     color: #444;
 485     text-shadow: none;
 486
 487     @include border-top-radius(4px);
 488     margin: 0 -10px 0 -10px;
 489     padding: 2px 10px 2px 10px;
 490     background: transparent; /* Old browsers */
 491 }
 492
 493 #page-mod-quiz-edit .questionbankwindow div.header a:link,
 494 #page-mod-quiz-edit .questionbankwindow div.header a:visited {
 495     color: $link-color;
 496 }
 497
 498 #page-mod-quiz-edit .questionbankwindow div.header a:hover {
 499     color: $link-hover-color;
 500 }
 501
 502 #page-mod-quiz-edit .createnewquestion {
 503     padding: 0.3em 0;
 504
 505     div,
 506     input {
 507         margin: 0;
 508     }
 509 }
 510
 511 #page-mod-quiz-edit .questionbankwindow div.header .title {
 512     color: $body-color;
 513 }
 514
 515 #page-mod-quiz-edit div.container div.generalbox {
 516     background-color: transparent;
 517     padding: 1.5em;
 518 }
 519
 520 #page-mod-quiz-edit .categoryinfo {
 521     background-color: transparent;
 522     border-bottom: none;
 523 }
 524
 525 #page-mod-quiz-edit .createnewquestion .singlebutton input {
 526     margin-bottom: 0;
 527 }
 528
 529 #page-mod-quiz-edit div.questionbank .categorysortopotionscontainer,
 530 #page-mod-quiz-edit div.questionbank .categoryselectallcontainer {
 531     padding: 0 0 1.5em 0;
 532 }
 533
 534 #page-mod-quiz-edit div.questionbank .categorypagingbarcontainer {
 535     background-color: transparent;
 536     margin: 0;
 537     border-top: 0;
 538     border-bottom: 0;
 539
 540     .paging {
 541         padding: 0 0.3em;
 542     }
 543 }
 544
 545 #page-mod-quiz-edit div.question div.content div.questioncontrols {
 546     background-color: $body-bg;
 547 }
 548
 549 #page-mod-quiz-edit div.question div.content div.points {
 550     margin-top: -0.5em;
 551     padding-bottom: 0;
 552     border: none;
 553     background-color: $body-bg;
 554     position: static;
 555     width: 12.1em;
 556     float: right;
 557     margin-right: 60px;
 558 }
 559
 560 #page-mod-quiz-edit div.question div.content div.points br {
 561     display: none;
 562 }
 563
 564 #page-mod-quiz-edit div.question div.content div.points label {
 565     display: inline-block;
 566 }
 567
 568 #page-mod-quiz-edit div.quizpage .pagecontent .pagestatus {
 569     background-color: $body-bg;
 570 }
 571
 572 #page-mod-quiz-edit .quizpagedelete,
 573 #page-mod-quiz-edit .quizpagedelete img {
 574     background-color: transparent;
 575 }
 576
 577 #page-mod-quiz-edit div.quizpage .pagecontent {
 578     border: 1px solid #ddd;
 579
 580     @include border-radius(2px);
 581     overflow: hidden;
 582 }
 583
 584 #page-mod-quiz-edit div.questionbank .categoryinfo {
 585     padding: 0.3em 0;
 586 }
 587
 588 #page-mod-quiz-edit div.questionbank .modulespecificbuttonscontainer {
 589     padding: 0;
 590
 591     strong {
 592         display: block;
 593     }
 594
 595     hr,
 596     br {
 597         display: none;
 598     }
 599
 600     strong {
 601         margin-left: -0.3em;
 602     }
 603
 604     strong label {
 605         margin-left: 0.3em;
 606     }
 607
 608     input {
 609         margin-left: 0;
 610     }
 611
 612     input + input {
 613         margin-left: 5px;
 614     }
 615 }
 616
 617 .questionbankwindow .module {
 618     width: auto;
 619 }
 620
 621 .questionbankwindow .form-autocomplete-selection {
 622     margin-left: 0;
 623 }
 624
 625 #page-mod-quiz-edit div.editq div.question div.content {
 626     background-color: $body-bg;
 627     border: 1px solid #ddd;
 628
 629     @include border-radius(2px);
 630     overflow: hidden;
 631 }
 632
 633 #page-mod-quiz-edit ul.slots .activityinstance img.activityicon {
 634     margin-top: 0;
 635     padding-right: 4px;
 636 }
 637
 638 .path-mod-quiz .statedetails {
 639     display: block;
 640     font-size: 0.9em;
 641 }
 642
 643 a#hidebankcmd {
 644     color: $link-color;
 645 }
 646
 647 // override question plugins
 648
 649 // qtype_shortanswer
 650
 651 .que.shortanswer .answer {
 652     padding: 0;
 653 }
 654
 655 .que label {
 656     display: inline;
 657 }
 658
 659 body.path-question-type .mform fieldset.hidden {
 660     padding: 0;
 661     margin: 0.7em 0 0;
 662 }
 663
 664 // Fix for accurate positioning of ddwtos drag and drop question types.
 665 .que.ddwtos,
 666 .que.ddwtos .drop {
 667     box-sizing: content-box;
 668 }
 669
 670 .tag-condition-container {
 671     position: relative;
 672 }
 673
 674 @include media-breakpoint-down(sm) {
 675     .que .info {
 676         float: none;
 677         width: auto;
 678     }
 679     .que .content {
 680         margin: 0;
 681     }
 682 }