Commit 702b7e38 authored by Samantha Monty's avatar Samantha Monty

clean quiz css js

parent d0fafd81
......@@ -292,19 +292,21 @@ $border-radius: 6px;
margin-top: 0.5em;
padding: 0.5em;
font-size: var(--font-size-small);
display: none;
border-radius: $border-radius;
border-radius: 6px;
visibility: hidden;
display: block;
min-height: 1.3em;
&.solved {
display: block;
background-color: $solution;
visibility: visible;
.tooltip {
background-color: $solution;
padding-left: 0.5em;
}
}
}
&.plain {
.tooltip-div {
display: block;
visibility: hidden;
&.solved {
visibility: visible;
width: 91%;
}
}
......@@ -574,6 +576,49 @@ $border-radius: 6px;
}
}
@media not all and (min-resolution:.001dpcm) {
/* Safari adjustments */
@supports (-webkit-appearance:none) {
.qmi,
.quiz-mi,
.quiz-match-items {
&.plain {
.options {
right: 0.5vw;
}
}
}
}
/* Edge adjustments */
@supports (-ms-ime-align: auto) {
.qmi,
.quiz-mi,
.quiz-match-items {
&.plain {
.options {
right: 0.5vw;
}
.matchQuestion {
margin: 1em 0;
}
.matchQuestion:first-of-type {
margin-top: 0;
}
}
}
}
}
/* Microsoft Edge Browser 12-18 (All versions before Chromium) */
_:-ms-lang(x),
.qmi,
.quiz-mi,
.quiz-match-items {
&.plain .options {
right: 0.5vw;
}
}
// Adjust for printed quizzes
@media print {
.reveal .slides {
......@@ -585,11 +630,11 @@ $border-radius: 6px;
.qmc,
.qmi,
[class*="quiz-"] {
button,
.solutionDiv {
display: none;
}
&.plain {
button,
.solutionDiv {
display: none;
}
input,
select {
color: #fff;
......@@ -617,13 +662,16 @@ $border-radius: 6px;
.qmi,
[class*="quiz-"] {
max-height: initial;
&.plain {
width: 100%;
.matchQuestion {
font-size: var(--font-size-small) !important;
.optList p {
color: #f1f1f1;
font-size: var(--font-size-small) !important;
.optList,
.optList p,
.optList p::before,
.optList p::after {
color: #fff !important;
}
}
.matchItems {
......
......@@ -474,7 +474,7 @@
.reveal .qft.plain button,
.reveal .qmc.plain button,
.reveal .qmi.plain button,
.reveal [class*="quiz-"].plain button {
.reveal .plain[class*="quiz-"] button {
border: none;
margin: 0;
padding: 5px 10px;
......@@ -486,7 +486,7 @@
.reveal .qft.plain button:hover,
.reveal .qmc.plain button:hover,
.reveal .qmi.plain button:hover,
.reveal [class*="quiz-"].plain button:hover {
.reveal .plain[class*="quiz-"] button:hover {
background-color: #808080;
color: #fff;
}
......@@ -495,7 +495,7 @@
.reveal .qft.plain input,
.reveal .qmc.plain input,
.reveal .qmi.plain input,
.reveal [class*="quiz-"].plain input {
.reveal .plain[class*="quiz-"] input {
display: block;
padding: 5px 10px;
width: 90%;
......@@ -510,7 +510,7 @@
.reveal .qft.plain input.show-right,
.reveal .qmc.plain input.show-right,
.reveal .qmi.plain input.show-right,
.reveal [class*="quiz-"].plain input.show-right {
.reveal .plain[class*="quiz-"] input.show-right {
background-color: #aaffaa;
}
......@@ -518,7 +518,7 @@
.reveal .qft.plain input.show-wrong,
.reveal .qmc.plain input.show-wrong,
.reveal .qmi.plain input.show-wrong,
.reveal [class*="quiz-"].plain input.show-wrong {
.reveal .plain[class*="quiz-"] input.show-wrong {
background-color: #ffaaaa;
}
......@@ -526,7 +526,7 @@
.reveal .qft.plain li.show-right::before,
.reveal .qmc.plain li.show-right::before,
.reveal .qmi.plain li.show-right::before,
.reveal [class*="quiz-"].plain li.show-right::before {
.reveal .plain[class*="quiz-"] li.show-right::before {
content: "\f058";
font-family: "Font Awesome 5 Free";
font-weight: 400;
......@@ -538,7 +538,7 @@
.reveal .qft.plain li.show-wrong::before,
.reveal .qmc.plain li.show-wrong::before,
.reveal .qmi.plain li.show-wrong::before,
.reveal [class*="quiz-"].plain li.show-wrong::before {
.reveal .plain[class*="quiz-"] li.show-wrong::before {
content: "\f057";
font-family: "Font Awesome 5 Free";
font-weight: 400;
......@@ -739,24 +739,24 @@
}
.reveal .qft.plain .solutionList,
.reveal [class*="quiz-f"].plain .solutionList {
.reveal .plain[class*="quiz-f"] .solutionList {
width: 88%;
margin: 0 0 var(--margin-bottom-ul) 0;
}
.reveal .qft.plain .solutionList li,
.reveal [class*="quiz-f"].plain .solutionList li {
.reveal .plain[class*="quiz-f"] .solutionList li {
margin: 0;
border-radius: 6px;
}
.reveal .qft.plain .solutionList li .tooltip,
.reveal [class*="quiz-f"].plain .solutionList li .tooltip {
.reveal .plain[class*="quiz-f"] .solutionList li .tooltip {
padding: 0 0 0.2em 1em;
}
.reveal .qft.plain .solutionButton,
.reveal [class*="quiz-f"].plain .solutionButton {
.reveal .plain[class*="quiz-f"] .solutionButton {
margin-right: 0.5em;
}
......@@ -776,30 +776,30 @@
margin-top: 0.5em;
padding: 0.5em;
font-size: var(--font-size-small);
display: none;
border-radius: 6px;
visibility: hidden;
display: block;
min-height: 1.3em;
}
.reveal .qic .tooltip-div.solved,
.reveal [class*="quiz-i"] .tooltip-div.solved {
display: block;
background-color: #eee;
visibility: visible;
}
.reveal .qic.plain .tooltip-div,
.reveal [class*="quiz-i"].plain .tooltip-div {
display: block;
visibility: hidden;
.reveal .qic .tooltip-div.solved .tooltip,
.reveal [class*="quiz-i"] .tooltip-div.solved .tooltip {
background-color: #eee;
padding-left: 0.5em;
}
.reveal .qic.plain .tooltip-div.solved,
.reveal [class*="quiz-i"].plain .tooltip-div.solved {
visibility: visible;
.reveal .plain[class*="quiz-i"] .tooltip-div.solved {
width: 91%;
}
.reveal .qic.plain select,
.reveal [class*="quiz-i"].plain select {
.reveal .plain[class*="quiz-i"] select {
outline: none;
}
......@@ -928,9 +928,8 @@
.reveal .quiz-mi.plain,
.reveal .quiz-match-items.plain {
text-align: var(--align-global);
height: 550px;
display: flex;
flex-direction: column;
height: inherit;
overflow: inherit;
}
.reveal .qmi.plain .matchDiv,
......@@ -939,11 +938,8 @@
padding: 0.5em;
margin: 0.5em 0;
border-radius: 7px;
width: 100%;
border: 1px solid #eee;
justify-content: space-between;
flex-grow: 9;
overflow-y: scroll;
}
.reveal .qmi.plain .matchDiv,
......@@ -1217,6 +1213,43 @@
width: max-content;
}
@media not all and (min-resolution: 0.001dpcm) {
/* Safari adjustments */
@supports (-webkit-appearance: none) {
.qmi.plain .options,
.quiz-mi.plain .options,
.quiz-match-items.plain .options {
right: 0.5vw;
}
}
/* Edge adjustments */
@supports (-ms-ime-align: auto) {
.qmi.plain .options,
.quiz-mi.plain .options,
.quiz-match-items.plain .options {
right: 0.5vw;
}
.qmi.plain .matchQuestion,
.quiz-mi.plain .matchQuestion,
.quiz-match-items.plain .matchQuestion {
margin: 1em 0;
}
.qmi.plain .matchQuestion:first-of-type,
.quiz-mi.plain .matchQuestion:first-of-type,
.quiz-match-items.plain .matchQuestion:first-of-type {
margin-top: 0;
}
}
}
/* Microsoft Edge Browser 12-18 (All versions before Chromium) */
_.plain:-ms-lang(x) .options,
.qmi.plain .options,
.quiz-mi.plain .options,
.quiz-match-items.plain .options {
right: 0.5vw;
}
@media print {
.reveal .slides {
transform: none !important;
......@@ -1224,16 +1257,16 @@
.reveal .slides section {
break-after: always !important;
}
.reveal .slides section .qic.plain button,
.reveal .slides section .qic.plain .solutionDiv,
.reveal .slides section .qft.plain button,
.reveal .slides section .qft.plain .solutionDiv,
.reveal .slides section .qmc.plain button,
.reveal .slides section .qmc.plain .solutionDiv,
.reveal .slides section .qmi.plain button,
.reveal .slides section .qmi.plain .solutionDiv,
.reveal .slides section [class*="quiz-"].plain button,
.reveal .slides section [class*="quiz-"].plain .solutionDiv {
.reveal .slides section .qic button,
.reveal .slides section .qic .solutionDiv,
.reveal .slides section .qft button,
.reveal .slides section .qft .solutionDiv,
.reveal .slides section .qmc button,
.reveal .slides section .qmc .solutionDiv,
.reveal .slides section .qmi button,
.reveal .slides section .qmi .solutionDiv,
.reveal .slides section [class*="quiz-"] button,
.reveal .slides section [class*="quiz-"] .solutionDiv {
display: none;
}
.reveal .slides section .qic.plain input,
......@@ -1244,8 +1277,8 @@
.reveal .slides section .qmc.plain select,
.reveal .slides section .qmi.plain input,
.reveal .slides section .qmi.plain select,
.reveal .slides section [class*="quiz-"].plain input,
.reveal .slides section [class*="quiz-"].plain select {
.reveal .slides section .plain[class*="quiz-"] input,
.reveal .slides section .plain[class*="quiz-"] select {
color: #fff;
background-color: #fff;
border: none;
......@@ -1256,7 +1289,7 @@
.reveal .slides section .qft.plain input,
.reveal .slides section .qmc.plain input,
.reveal .slides section .qmi.plain input,
.reveal .slides section [class*="quiz-"].plain input {
.reveal .slides section .plain[class*="quiz-"] input {
margin-bottom: 0.5em;
min-width: 35%;
}
......@@ -1264,32 +1297,41 @@
.reveal .slides section .qft.plain input::placeholder,
.reveal .slides section .qmc.plain input::placeholder,
.reveal .slides section .qmi.plain input::placeholder,
.reveal .slides section [class*="quiz-"].plain input::placeholder {
.reveal .slides section .plain[class*="quiz-"] input::placeholder {
color: #fff;
}
.reveal .slides section .qic select,
.reveal .slides section [class*="quiz-i"] select {
min-width: 35%;
}
.reveal .slides section .qmi,
.reveal .slides section [class*="quiz-"] {
max-height: initial;
}
.reveal .slides section .qmi.plain,
.reveal .slides section [class*="quiz-"].plain {
.reveal .slides section .plain[class*="quiz-"] {
width: 100%;
}
.reveal .slides section .qmi.plain .matchQuestion,
.reveal .slides section [class*="quiz-"].plain .matchQuestion {
.reveal .slides section .plain[class*="quiz-"] .matchQuestion {
font-size: var(--font-size-small) !important;
}
.reveal .slides section .qmi.plain .matchQuestion .optList p,
.reveal .slides section [class*="quiz-"].plain .matchQuestion .optList p {
color: #f1f1f1;
font-size: var(--font-size-small) !important;
.reveal .slides section .qmi.plain .matchQuestion .optList,
.reveal .slides section .qmi.plain .matchQuestion .optList p,
.reveal .slides section .qmi.plain .matchQuestion .optList p::before,
.reveal .slides section .qmi.plain .matchQuestion .optList p::after,
.reveal .slides section .plain[class*="quiz-"] .matchQuestion .optList,
.reveal .slides section .plain[class*="quiz-"] .matchQuestion .optList p,
.reveal .slides section .plain[class*="quiz-"] .matchQuestion .optList p::before,
.reveal .slides section .plain[class*="quiz-"] .matchQuestion .optList p::after {
color: #fff !important;
}
.reveal .slides section .qmi.plain .matchItems,
.reveal .slides section [class*="quiz-"].plain .matchItems {
.reveal .slides section .plain[class*="quiz-"] .matchItems {
margin-bottom: 0;
}
.reveal .slides section .qmi.plain .buckets .matchItem,
.reveal .slides section [class*="quiz-"].plain .buckets .matchItem {
.reveal .slides section .plain[class*="quiz-"] .buckets .matchItem {
font-size: var(--font-size-small) !important;
}
}
......
@charset "UTF-8";
@import url("../vendor/css/light.min.css");
@import url("../vendor/fontawesome/css/all.css");
div.column {
......@@ -264,3 +265,153 @@ header > *:last-child {
body {
-webkit-print-color-adjust: exact;
}
.slide .slide-wrapper {
clear: both;
display: inline-block;
width: 100%;
}
.slide .slide-wrapper .qic div.tooltip,
.slide .slide-wrapper .qic button.solutionButton,
.slide .slide-wrapper .qic button.resetButton,
.slide .slide-wrapper .qft div.tooltip,
.slide .slide-wrapper .qft button.solutionButton,
.slide .slide-wrapper .qft button.resetButton,
.slide .slide-wrapper .qmc div.tooltip,
.slide .slide-wrapper .qmc button.solutionButton,
.slide .slide-wrapper .qmc button.resetButton,
.slide .slide-wrapper .qmi div.tooltip,
.slide .slide-wrapper .qmi button.solutionButton,
.slide .slide-wrapper .qmi button.resetButton,
.slide .slide-wrapper [class*="quiz-"] div.tooltip,
.slide .slide-wrapper [class*="quiz-"] button.solutionButton,
.slide .slide-wrapper [class*="quiz-"] button.resetButton {
display: none;
}
.slide .slide-wrapper .qic ul.choices,
.slide .slide-wrapper .qic ul.solutionList,
.slide .slide-wrapper .qft ul.choices,
.slide .slide-wrapper .qft ul.solutionList,
.slide .slide-wrapper .qmc ul.choices,
.slide .slide-wrapper .qmc ul.solutionList,
.slide .slide-wrapper .qmi ul.choices,
.slide .slide-wrapper .qmi ul.solutionList,
.slide .slide-wrapper [class*="quiz-"] ul.choices,
.slide .slide-wrapper [class*="quiz-"] ul.solutionList {
list-style-type: none;
}
.slide .slide-wrapper .qic ul.choices li::before,
.slide .slide-wrapper .qic ul.solutionList li::before,
.slide .slide-wrapper .qft ul.choices li::before,
.slide .slide-wrapper .qft ul.solutionList li::before,
.slide .slide-wrapper .qmc ul.choices li::before,
.slide .slide-wrapper .qmc ul.solutionList li::before,
.slide .slide-wrapper .qmi ul.choices li::before,
.slide .slide-wrapper .qmi ul.solutionList li::before,
.slide .slide-wrapper [class*="quiz-"] ul.choices li::before,
.slide .slide-wrapper [class*="quiz-"] ul.solutionList li::before {
content: "○ ";
}
.slide .slide-wrapper .qmc.inline li,
.slide .slide-wrapper .quiz-mc.inline li,
.slide .slide-wrapper .quiz-multiple-choice.inline li {
padding: 0.1em 0.7em 0.1em 0;
display: inline;
}
.slide .slide-wrapper .qft ul.solutionList,
.slide .slide-wrapper [class*="quiz-f"] ul.solutionList {
display: none;
}
.slide .slide-wrapper .qft input::placeholder,
.slide .slide-wrapper [class*="quiz-f"] input::placeholder {
color: #161f27;
}
.slide .slide-wrapper .qic select,
.slide .slide-wrapper [class*="quiz-i"] select {
display: none;
}
.slide .slide-wrapper .qmi .matchDiv,
.slide .slide-wrapper .quiz-mi .matchDiv,
.slide .slide-wrapper .quiz-match-items .matchDiv {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
.slide .slide-wrapper .qmi .matchItems,
.slide .slide-wrapper .quiz-mi .matchItems,
.slide .slide-wrapper .quiz-match-items .matchItems {
float: right;
}
.slide .slide-wrapper .qmi.plain .matchDiv,
.slide .slide-wrapper .quiz-mi.plain .matchDiv,
.slide .slide-wrapper .quiz-match-items.plain .matchDiv {
flex-direction: row;
justify-content: initial;
}
.slide .slide-wrapper .qmi.plain .matchItems,
.slide .slide-wrapper .qmi.plain .matchQuestion,
.slide .slide-wrapper .quiz-mi.plain .matchItems,
.slide .slide-wrapper .quiz-mi.plain .matchQuestion,
.slide .slide-wrapper .quiz-match-items.plain .matchItems,
.slide .slide-wrapper .quiz-match-items.plain .matchQuestion {
display: flex;
}
.slide .slide-wrapper .qmi.plain .matchDiv,
.slide .slide-wrapper .qmi.plain .matchQuestion,
.slide .slide-wrapper .quiz-mi.plain .matchDiv,
.slide .slide-wrapper .quiz-mi.plain .matchQuestion,
.slide .slide-wrapper .quiz-match-items.plain .matchDiv,
.slide .slide-wrapper .quiz-match-items.plain .matchQuestion {
justify-content: space-between;
}
.slide .slide-wrapper .qmi.plain .matchQuestion,
.slide .slide-wrapper .quiz-mi.plain .matchQuestion,
.slide .slide-wrapper .quiz-match-items.plain .matchQuestion {
margin-bottom: 0.5em;
}
.slide .slide-wrapper .qmi.plain .matchItems,
.slide .slide-wrapper .quiz-mi.plain .matchItems,
.slide .slide-wrapper .quiz-match-items.plain .matchItems {
flex-direction: column;
flex-wrap: nowrap;
margin-right: 5em;
max-width: 65%;
}
.slide .slide-wrapper .qmi.plain .optList,
.slide .slide-wrapper .qmi.plain .options,
.slide .slide-wrapper .quiz-mi.plain .optList,
.slide .slide-wrapper .quiz-mi.plain .options,
.slide .slide-wrapper .quiz-match-items.plain .optList,
.slide .slide-wrapper .quiz-match-items.plain .options {
display: none;
}
.slide .slide-wrapper .qmi.plain .matchItem,
.slide .slide-wrapper .qmi.plain .bucket,
.slide .slide-wrapper .quiz-mi.plain .matchItem,
.slide .slide-wrapper .quiz-mi.plain .bucket,
.slide .slide-wrapper .quiz-match-items.plain .matchItem,
.slide .slide-wrapper .quiz-match-items.plain .bucket {
padding-bottom: 0.5em;
}
.slide .slide-wrapper .qmi.plain .matchItem img,
.slide .slide-wrapper .quiz-mi.plain .matchItem img,
.slide .slide-wrapper .quiz-match-items.plain .matchItem img {
max-width: 50%;
}
@charset "UTF-8";
@import url("../vendor/css/light.min.css");
@import url("../vendor/fontawesome/css/all.css");
......@@ -82,3 +83,102 @@ header > *:last-child {
body {
-webkit-print-color-adjust: exact;
}
.slide .slide-wrapper {
clear: both;
display: inline-block;
width: 100%;
.qic,
.qft,
.qmc,
.qmi,
[class*="quiz-"] {
div.tooltip,
button.solutionButton,
button.resetButton {
display: none;
}
ul.choices,
ul.solutionList {
list-style-type: none;
li::before {
content: "○ "
}
}
}
.qmc,
.quiz-mc,
.quiz-multiple-choice {
&.inline li {
padding: 0.1em 0.7em 0.1em 0;
display: inline;
}
}
.qft,
[class*="quiz-f"] {
ul.solutionList {
display: none;
}
input::placeholder {
color: #161f27;
}
}
.qic,
[class*="quiz-i"] {
select {
display: none;
}
}
.qmi,
.quiz-mi,
.quiz-match-items {
.matchDiv {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}
.matchItems {
float: right;
}
&.plain {
.matchDiv {