forked from Open-CT/openct-tasks
661 lines
11 KiB
CSS
661 lines
11 KiB
CSS
/*
|
|
*
|
|
* LAYOUT
|
|
*
|
|
*/
|
|
|
|
#task {
|
|
position: relative;
|
|
overflow-x: hidden;
|
|
font-family: 'Titillium Web', Arial, Helvetica, sans-serif;
|
|
color: #333;
|
|
padding-top: 2em;
|
|
counter-reset: questions-counter;
|
|
}
|
|
#task * {
|
|
box-sizing: border-box;
|
|
}
|
|
#task .intro,
|
|
#displayHelperAnswering {
|
|
padding: 20px 60px;
|
|
}
|
|
#task .intro p.dropcap::first-letter {
|
|
color: #4a90e2;
|
|
font-size: 2.5em;
|
|
line-height: 1;
|
|
padding-right: 15px;
|
|
padding-top: 5px;
|
|
float: left;
|
|
}
|
|
#task .title {
|
|
font-size: 22px;
|
|
font-weight: 100;
|
|
color: #4a90e2;
|
|
margin: 1em 0 0.5em;
|
|
}
|
|
|
|
question {
|
|
display: block;
|
|
}
|
|
question > * {
|
|
padding: 0 60px;
|
|
}
|
|
/* Old alternating colors
|
|
question:nth-child(odd) {
|
|
background: rgba(74,144,226,0.2);
|
|
}
|
|
*/
|
|
|
|
question .error-message, .quiz-toolbar .error-message {
|
|
/*color: #ff001f;*/
|
|
background-color: #ffe5e8;
|
|
border-radius: 50px 0 0 50px;
|
|
padding: 7px 8px 7px 40px;
|
|
position: relative;
|
|
/*font-size: 14px;*/
|
|
margin: 10px 60px;
|
|
}
|
|
question .error-message .icon,
|
|
.quiz-toolbar .error-message .icon {
|
|
color: #fff;
|
|
background-color: #ff001f;
|
|
padding: 5px 6px;
|
|
border-radius: 50%;
|
|
font-size: 12px;
|
|
position: absolute;
|
|
left: 8px;
|
|
top: calc(50% - 0.5em - 5px);
|
|
}
|
|
|
|
question .success-message, .quiz-toolbar .success-message {
|
|
/*color: #00991f;*/
|
|
background-color: #e5ffe8;
|
|
border-radius: 50px 0 0 50px;
|
|
padding: 7px 8px 7px 40px;
|
|
position: relative;
|
|
/*font-size: 14px;*/
|
|
margin: 10px 60px;
|
|
}
|
|
question .success-message .icon,
|
|
.quiz-toolbar .success-message .icon {
|
|
color: #fff;
|
|
background-color: #00991f;
|
|
padding: 5px 6px;
|
|
border-radius: 50%;
|
|
font-size: 12px;
|
|
position: absolute;
|
|
left: 8px;
|
|
top: calc(50% - 0.5em - 5px);
|
|
}
|
|
|
|
answer .alert-message {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
question::after {
|
|
content: '';
|
|
position: relative;
|
|
display: block;
|
|
width: 90vw;
|
|
height: 1px;
|
|
left: 5vw;
|
|
background-color: #4a90e2;
|
|
margin: 24px 0px;
|
|
clear: both;
|
|
}
|
|
|
|
statement {
|
|
color: #4a90e2;
|
|
font-size: 22px;
|
|
margin-bottom: 20px;
|
|
font-weight: bold;
|
|
display: block;
|
|
}
|
|
statement p {
|
|
/* because we get <p> wraps here by taskeditor tinymce */
|
|
display: inline;
|
|
margin: 0;
|
|
font-weight: normal;
|
|
}
|
|
statement::before {
|
|
counter-increment: questions-counter;
|
|
content: counter(questions-counter);
|
|
color: #fff;
|
|
font-weight: normal;
|
|
font-size: 18px;
|
|
background-color: #4a90e2;
|
|
border-radius: 50%;
|
|
width: 30px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
display: inline-block;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
|
|
/*
|
|
*
|
|
* QUESTION DEFAULT LAYOUT: TYPE SINGLE ANSWERS
|
|
*
|
|
*/
|
|
|
|
answer {
|
|
display: block;
|
|
border-top: 1px solid;
|
|
border-color: #e1e1e1;
|
|
padding: 5px 0;
|
|
}
|
|
answer p {
|
|
margin: 0;
|
|
}
|
|
/*question:nth-child(odd) answer {
|
|
border-color: #d2d2d2;
|
|
}*/
|
|
answer:first-child {
|
|
border-top: none;
|
|
}
|
|
answer .answer-block {
|
|
display: flex;
|
|
margin-left: -15px;
|
|
padding-left: 15px;
|
|
border: 1px solid transparent;
|
|
border-radius: 20px;
|
|
transition: all linear 50ms;
|
|
justify-content: space-between;
|
|
}
|
|
answer.selected .answer-block {
|
|
color: #4a90e2;
|
|
border-color: #4a90e2;
|
|
}
|
|
answer .answer-label {
|
|
line-height: 1.5em;
|
|
transition: all linear 50ms;
|
|
}
|
|
answer.selected .answer-label {
|
|
font-weight: bold;
|
|
}
|
|
answer .answer-code {
|
|
border: 1px solid #4a90e2;
|
|
border-radius: 20px;
|
|
text-align: center;
|
|
position: relative;
|
|
color: #4a90e2;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
flex: 0 1 120px;
|
|
align-self: center;
|
|
transition: all linear 50ms;
|
|
}
|
|
answer.selected .answer-code {
|
|
color: #fff;
|
|
background-color: #4a90e2;
|
|
}
|
|
answer .answer-code::before {
|
|
font-family: "Font Awesome 5 Free";
|
|
font-weight: 900;
|
|
position: absolute;
|
|
left: 15px;
|
|
top: 7px;
|
|
top: calc(50% - 0.5em);
|
|
}
|
|
answer.selected .answer-code::before {
|
|
content: "\f00c";
|
|
}
|
|
/*
|
|
*
|
|
* QUESTION HORIZONTAL LAYOUT: TYPE SINGLE ANSWERS
|
|
*
|
|
*/
|
|
question.horizontal .answers {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin: 0 -20px;
|
|
}
|
|
question.horizontal answer {
|
|
border-top: none;
|
|
flex: 1 0 0;
|
|
padding: 0 20px;
|
|
border-left: 1px solid;
|
|
}
|
|
question.horizontal answer:first-child {
|
|
border-left: none;
|
|
}
|
|
question.horizontal answer .answer-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
margin-left: 0;
|
|
padding-left: 0;
|
|
}
|
|
question.horizontal answer .answer-label,
|
|
question.horizontal answer .answer-code {
|
|
}
|
|
question.horizontal answer .answer-label {
|
|
text-align: center;
|
|
padding: 1em 10px;
|
|
}
|
|
question.horizontal answer .answer-code {
|
|
flex: 0 0 0;
|
|
align-self: stretch;
|
|
margin: 0 -1px -1px;
|
|
padding: 2px 10px;
|
|
}
|
|
|
|
/*
|
|
*
|
|
* SWITCH CHECKBOX
|
|
*
|
|
*/
|
|
.answer-switch {
|
|
display: inline-block;
|
|
background: rgba(0,0,0,0.05);
|
|
border-radius: 20px;
|
|
box-shadow: inset 0 1px 0 0 rgba(0,0,0,0.05);
|
|
height: 26px;
|
|
width: 100px;
|
|
position: relative;
|
|
right: 0;
|
|
cursor: pointer;
|
|
align-self: center;
|
|
box-shadow: 0 1px 0 0 #727273 inset;
|
|
flex: 0 0 auto;
|
|
}
|
|
.answer-switch::before,
|
|
.answer-switch::after {
|
|
font-family: "Font Awesome 5 Free";
|
|
font-weight: 900;
|
|
position: absolute;
|
|
top: 7px;
|
|
top: calc(50% - 0.5em);
|
|
color: #9B9B9B;
|
|
}
|
|
.answer-switch::before {
|
|
content: "\f00d";
|
|
right: auto;
|
|
left: 20px;
|
|
}
|
|
.answer-switch::after {
|
|
content: "\f00c";
|
|
right: 20px;
|
|
left: auto;
|
|
}
|
|
.answer-switch .cursor {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
height: 26px;
|
|
width: 55px;
|
|
border-radius: 20px;
|
|
background-color: #9B9B9B;
|
|
transition: all 250ms;
|
|
z-index: 1;
|
|
}
|
|
answer.selected .answer-switch .cursor {
|
|
background-color: #4a90e2;
|
|
left: 45px;
|
|
}
|
|
.answer-switch .cursor::before {
|
|
content: "\f00d";
|
|
font-family: "Font Awesome 5 Free";
|
|
font-weight: 900;
|
|
position: absolute;
|
|
top: 7px;
|
|
top: calc(50% - 0.5em);
|
|
left: 20px;
|
|
color: #fff;
|
|
}
|
|
answer.selected .answer-switch .cursor::before {
|
|
content: "\f00c";
|
|
right: auto;
|
|
left: 20px;
|
|
}
|
|
|
|
question.horizontal .answer-switch {
|
|
align-self: center;
|
|
}
|
|
|
|
/*
|
|
*
|
|
* QUESTION DEFAULT LAYOUT: TYPE INPUT ANSWERS
|
|
*
|
|
*/
|
|
input[type=text] {
|
|
font-size: 12px;
|
|
background: #f8f8f8;
|
|
border: 1px solid #e1e1e1;
|
|
border-radius: 5px;
|
|
padding: 6px 12px;
|
|
width: 100%;
|
|
color: #555555;
|
|
font-size: 16px;
|
|
}
|
|
input[type=text]:focus {
|
|
box-shadow: 0 1px 3px #333 inset;
|
|
}
|
|
::placeholder,
|
|
:placeholder-shown {
|
|
font-style: italic;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
|
|
/*
|
|
*
|
|
* SOLUTION DISPLAY
|
|
*
|
|
*/
|
|
solution {
|
|
display: none;
|
|
border-top: 1px solid #e1e1e1;
|
|
margin-top: 30px;
|
|
}
|
|
#solution, .solution {
|
|
display: none;
|
|
}
|
|
.displaySolution solution, .displaySolution .solution, .displaySolution #solution {
|
|
display: block;
|
|
}
|
|
/*question:nth-child(odd) solution {
|
|
border-color: #d2d2d2;
|
|
}*/
|
|
.displayFeedback answer.correct:not(.selected) .answer-block {
|
|
border-color: transparent;
|
|
}
|
|
.displayFeedback answer.correct:not(.selected) .answer-code::before {
|
|
color: #4a90e2;
|
|
}
|
|
.displayFeedback answer.correct .answer-block {
|
|
font-weight: bold;
|
|
}
|
|
.displayFeedback answer.correct .answer-code::before {
|
|
content: "\f0a5";
|
|
}
|
|
.displayFeedback .horizontal answer.correct .answer-code::before {
|
|
content: "\f0a6";
|
|
}
|
|
.displayFeedback answer.mistake .answer-block {
|
|
color: #797979;
|
|
border-color: #ff001f;
|
|
}
|
|
.displayFeedback answer.mistake .answer-code {
|
|
background-color: #ff001f;
|
|
border-color: #ff001f;
|
|
}
|
|
.displayFeedback answer.mistake .answer-code::before {
|
|
content: "\f00d";
|
|
}
|
|
.displayFeedback answer.mistake input[type=text] {
|
|
border-color: #ff001f;
|
|
border-width: 2px;
|
|
}
|
|
|
|
.displayFeedback answer.correct input[type=text] {
|
|
border-color: #00aa1f;
|
|
border-width: 2px;
|
|
}
|
|
.displayFeedback answer.correct .answer-block {
|
|
color: #797979;
|
|
border-color: #00aa1f;
|
|
}
|
|
.displayFeedback answer.correct .answer-code {
|
|
background-color: #00aa1f;
|
|
border-color: #00aa1f;
|
|
}
|
|
|
|
/*
|
|
*
|
|
* SCORE
|
|
*
|
|
*/
|
|
#score {
|
|
border-top: 1px solid #e1e1e1;
|
|
border-bottom: 1px solid #e1e1e1;
|
|
margin-top: 2em;
|
|
font-size: 26px;
|
|
padding: 14px 0;
|
|
color: #4a90e2;
|
|
display: flex;
|
|
}
|
|
#score .scoreLabel {
|
|
flex-grow: 1;
|
|
}
|
|
#score .max-value {
|
|
color: #9b9b9b;
|
|
}
|
|
/*
|
|
*
|
|
* INTERFACE CONTROLS
|
|
*
|
|
*/
|
|
|
|
#displayHelper_saved {
|
|
border-top: 1px solid #e1e1e1;
|
|
border-bottom: 1px solid #e1e1e1;
|
|
padding: 10px 0;
|
|
font-size: 1rem;
|
|
}
|
|
#displayHelper_validate,
|
|
#displayHelper_cancel {
|
|
display: inline-block;
|
|
width: 50%;
|
|
}
|
|
#displayHelper_validate {
|
|
padding-right: 20px;
|
|
}
|
|
#displayHelper_cancel {
|
|
padding-left: 20px;
|
|
}
|
|
input[type=button],
|
|
button,
|
|
.btn {
|
|
border-radius: 50px;
|
|
color: #fff;
|
|
border: none;
|
|
text-transform: uppercase;
|
|
font-weight: bold;
|
|
font-size: 12px;
|
|
letter-spacing: 0.1em;
|
|
padding: 7px 20px;
|
|
}
|
|
#displayHelper_validate input[type=button],
|
|
#displayHelper_cancel input[type=button] {
|
|
margin: 0;
|
|
width: 100%;
|
|
}
|
|
#displayHelper_validate input[type=button] {
|
|
background-color: #4a90e2;
|
|
}
|
|
#displayHelper_cancel input[type=button],
|
|
#showSolutionButton .btn {
|
|
background-color: #9b9b9b;
|
|
}
|
|
.btn:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
|
|
#popupMessage.floatingMessage {
|
|
position: fixed;
|
|
z-index: 100;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: gray;
|
|
background: rgba(241, 242, 247, .9);
|
|
}
|
|
#popupMessage.floatingMessage .container {
|
|
min-height: 100px;
|
|
width: 94%;
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
padding: 20px;
|
|
color:#787878;
|
|
background: #fff;
|
|
border: none;
|
|
border-radius: 5px;
|
|
top: 50%;
|
|
transform: translate(0,-50%);
|
|
}
|
|
#popupMessage.floatingMessage .container img {
|
|
display: none;
|
|
}
|
|
#popupMessage .message {
|
|
font-size: 1em;
|
|
margin: 60px;
|
|
border: 0;
|
|
font-weight: normal;
|
|
padding: 0;
|
|
max-width: none;
|
|
}
|
|
#popupMessage p {
|
|
margin: .5em 0 0;
|
|
}
|
|
#popupMessage p:first-child {
|
|
margin-top: 0;
|
|
}
|
|
#popupMessage .buttonsWrapper {
|
|
margin: 2em auto 0;
|
|
text-align: center;
|
|
}
|
|
#popupMessage button {
|
|
margin: 0 auto;
|
|
background-color: #4a90e2;
|
|
}
|
|
#popupMessage button.buttonYes::before {
|
|
content: "\f00c";
|
|
font-family: "Font Awesome 5 Free";
|
|
font-weight: 900;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
|
|
.btn {
|
|
cursor: pointer;
|
|
background-color: #4a90e2;
|
|
}
|
|
|
|
|
|
.quiz-popup {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 10000;
|
|
}
|
|
|
|
.quiz-popup .opacity-overlay {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background: #000;
|
|
opacity: 0.3;
|
|
z-index: 1;
|
|
}
|
|
|
|
.quiz-popup .inner {
|
|
position: relative;
|
|
z-index: 2;
|
|
top: 50%;
|
|
text-align: center;
|
|
}
|
|
|
|
.quiz-popup .content {
|
|
background: #fff;
|
|
border-radius: 10px;
|
|
padding: 40px;
|
|
display: inline-block;
|
|
}
|
|
|
|
.quiz-popup .content .btn {
|
|
margin: 0 10px;
|
|
}
|
|
|
|
|
|
.quiz-toolbar {
|
|
margin: 40px auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.quiz-toolbar .btn {
|
|
margin: 0 10px;
|
|
}
|
|
|
|
|
|
.taskContent {
|
|
position: relative;
|
|
}
|
|
|
|
#task .freeze-overlay {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
background:transparent;
|
|
z-index: 1;
|
|
}
|
|
|
|
|
|
.fill-gaps-toolbar .word {
|
|
display: inline-block;
|
|
border: 1px solid #4a90e2;
|
|
border-radius: 5px;
|
|
background-color: white;
|
|
text-align: center;
|
|
cursor: move;
|
|
padding: 4px 20px;
|
|
margin-right: 10px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
|
|
.fill-gaps-text {
|
|
font-size: 20px;
|
|
}
|
|
|
|
.fill-gaps-text .word {
|
|
border: 1px solid #4a90e2;
|
|
border-radius: 5px;
|
|
background-color: white;
|
|
text-align: center;
|
|
cursor: move;
|
|
padding: 4px 20px;
|
|
}
|
|
|
|
.fill-gaps-text .placeholder {
|
|
display: inline-block;
|
|
border-radius: 5px;
|
|
background: #AAA;
|
|
min-width: 60px;
|
|
padding: 5px 0px;
|
|
color : #4a90e2;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.fill-gaps-text .placeholder-hover {
|
|
border: 1px solid #4a90e2;
|
|
background: #FFF;
|
|
padding: 4px 0px;
|
|
}
|
|
|
|
.fill-gaps-text .placeholder:empty:before {
|
|
content: "\00a0";
|
|
}
|
|
|
|
|
|
.fill-gaps-text .correct span {
|
|
color: #00aa1f;;
|
|
border-color: #00aa1f;;
|
|
}
|
|
|
|
.fill-gaps-text .mistake span {
|
|
color: #ff001f;
|
|
border-color: #ff001f;
|
|
}
|