This commit is contained in:
Ross
2021-08-19 13:28:01 +01:00
parent bd45731dda
commit 8b402b7464
2 changed files with 191 additions and 163 deletions
+187 -160
View File
@@ -3,7 +3,8 @@ body {
background-color: black; background-color: black;
} }
a, a:link { a,
a:link {
color: #3282b8; color: #3282b8;
} }
@@ -14,12 +15,15 @@ a, a:link {
.answer-list { .answer-list {
font-size: 25px; font-size: 25px;
user-select: none; user-select: none;
-webkit-user-select: none; /* Chrome/Safari */ -webkit-user-select: none;
-moz-user-select: none; /* Firefox */ /* Chrome/Safari */
-ms-user-select: none; /* IE10+ */ -moz-user-select: none;
/* Firefox */
-ms-user-select: none;
/* IE10+ */
} }
.answer-list .answer:hover{ .answer-list .answer:hover {
z-index: 99999; z-index: 99999;
position: relative; position: relative;
background: black; background: black;
@@ -30,11 +34,12 @@ a, a:link {
color: lightblue; color: lightblue;
} }
.answer-list .correct::after{ .answer-list .correct::after {
content: " [Score = 2]"; content: " [Score = 2]";
font-size: small; font-size: small;
} }
.answer-list.rapid .correct::after{
.answer-list.rapid .correct::after {
content: " [Score = 1]"; content: " [Score = 1]";
} }
@@ -42,11 +47,12 @@ a, a:link {
color: yellow; color: yellow;
} }
.answer-list .half-correct::after{ .answer-list .half-correct::after {
content: " [Score = 1]"; content: " [Score = 1]";
font-size: small; font-size: small;
} }
.answer-list.rapid .half-correct::after{
.answer-list.rapid .half-correct::after {
content: " [Score = 0.5]"; content: " [Score = 0.5]";
} }
@@ -54,7 +60,7 @@ a, a:link {
color: red; color: red;
} }
.answer-list .incorrect::after{ .answer-list .incorrect::after {
content: " [Score = 0]"; content: " [Score = 0]";
font-size: small; font-size: small;
} }
@@ -94,29 +100,28 @@ a, a:link {
color: red; color: red;
} }
.not-flagged { .not-flagged {}
}
button { button {
text-decoration: none; text-decoration: none;
display:inline-block; display: inline-block;
padding:0.35em 1.2em; padding: 0.35em 1.2em;
border:0.1em solid #52057b; border: 0.1em solid #52057b;
margin:0 0.3em 0.3em 0; margin: 0 0.3em 0.3em 0;
border-radius:0.12em; border-radius: 0.12em;
box-sizing: border-box; box-sizing: border-box;
text-decoration:none; text-decoration: none;
font-family:'Roboto',sans-serif; font-family: 'Roboto', sans-serif;
font-weight:300; font-weight: 300;
color:#a600ff; color: #a600ff;
text-align:center; text-align: center;
transition: all 0.2s; transition: all 0.2s;
background-color: transparent; background-color: transparent;
} }
button:hover{ button:hover {
color:white; color: white;
background-color:#52057b; background-color: #52057b;
} }
button a { button a {
@@ -191,28 +196,28 @@ button a {
height: 100%; height: 100%;
} }
.marking { .marking {}
}
#question-mark-list { #question-mark-list {
padding: 20px padding: 20px
} }
#full-question-list { #full-question-list {
counter-reset: question-list; /* Set a counter named 'section', and its initial value is 0. */ counter-reset: question-list;
/* Set a counter named 'section', and its initial value is 0. */
} }
#full-question-list li{ #full-question-list li {
padding-bottom: 20px; padding-bottom: 20px;
} }
#full-question-list li::before{ #full-question-list li::before {
counter-increment: question-list; counter-increment: question-list;
content: counter(question-list) " "; content: counter(question-list) " ";
padding-right: 0.5em; padding-right: 0.5em;
} }
#full-question-list img{ #full-question-list img {
float: left; float: left;
padding-right: 20px; padding-right: 20px;
padding-left: 10px; padding-left: 10px;
@@ -233,18 +238,18 @@ button a {
} }
#save-annotations { #save-annotations {
position: absolute; position: absolute;
left: 0; left: 0;
} }
.drop-target { .drop-target {
width: 100%; width: 100%;
width: 100vw; width: 100vw;
height: 100px; height: 100px;
text-align: center; text-align: center;
font-size: larger; font-size: larger;
position: sticky; position: sticky;
bottom: 0; bottom: 0;
left: 0%; left: 0%;
right: 50%; right: 50%;
margin-left: -50vw; margin-left: -50vw;
@@ -252,62 +257,63 @@ button a {
} }
#drop-container { #drop-container {
border: 1px dashed white; border: 1px dashed white;
} }
.submit-button { .submit-button {
position: sticky; position: sticky;
bottom: 0; bottom: 0;
} }
#feedback-drop-target { #feedback-drop-target {
float: right; float: right;
height: 100%; height: 100%;
width: 30%; width: 30%;
} }
.drop-target-active { .drop-target-active {
background-color: #427aa1; background-color: #427aa1;
} }
#drop-filenames span { #drop-filenames span {
font-size: xx-small; font-size: xx-small;
color: gray; color: gray;
padding-right: 1em; padding-right: 1em;
} }
.image-formset { .image-formset {
border: 1px solid white; border: 1px solid white;
} }
select, input { select,
background-color: #05668d; input {
color: white; background-color: #05668d;
border: none; color: white;
border: none;
} }
table.table { table.table {
color: white; color: white;
} }
#view-filter-options { #view-filter-options {
float: right; float: right;
} }
.rapid-img { .rapid-img {
width: 300px; width: 300px;
height: 300px; height: 300px;
} }
.feedback-img { .feedback-img {
border: 1px solid #05668d; border: 1px solid #05668d;
} }
img.uploading { img.uploading {
margin-top: -20px; margin-top: -20px;
height: 75%; height: 75%;
float: right; float: right;
} }
/* img.uploading:hover { /* img.uploading:hover {
@@ -319,31 +325,31 @@ img.uploading {
} */ } */
.image-ident-warning { .image-ident-warning {
border: 2px solid red; border: 2px solid red;
} }
.image-ident-loading { .image-ident-loading {
background: rgba(142, 68, 173, 1); background: rgba(142, 68, 173, 1);
box-shadow: 0 0 0 0 rgba(142, 68, 173, 1); box-shadow: 0 0 0 0 rgba(142, 68, 173, 1);
animation: pulse-purple 2s infinite; animation: pulse-purple 2s infinite;
} }
@keyframes pulse-purple { @keyframes pulse-purple {
0% { 0% {
transform: scale(0.95); transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(142, 68, 173, 0.7); box-shadow: 0 0 0 0 rgba(142, 68, 173, 0.7);
} }
70% { 70% {
transform: scale(1); transform: scale(1);
box-shadow: 0 0 0 10px rgba(142, 68, 173, 0); box-shadow: 0 0 0 10px rgba(142, 68, 173, 0);
} }
100% { 100% {
transform: scale(0.95); transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(142, 68, 173, 0); box-shadow: 0 0 0 0 rgba(142, 68, 173, 0);
} }
} }
#annotation-json-content { #annotation-json-content {
@@ -459,132 +465,153 @@ td.user-answer-score-1.rapid-ans::after {
} }
.selector { .selector {
border-color: #05668d; border-color: #05668d;
} }
.selector input { .selector input {
color: gray; color: gray;
background-color: white; background-color: white;
font-size: small; font-size: small;
} }
.selector .selector-available h2, .selector .selector-chosen h2 { .selector .selector-available h2,
margin-bottom: 0px; .selector .selector-chosen h2 {
border: none; margin-bottom: 0px;
/* border-color: #05668d; */ border: none;
background-color: #ebf2fa; /* border-color: #05668d; */
color: rgb(28, 184, 65); background-color: #ebf2fa;
color: rgb(28, 184, 65);
} }
.selector .selector-available select, .selector .selector-chosen select { .selector .selector-available select,
border-color: #05668d; .selector .selector-chosen select {
border-color: #05668d;
} }
#id_laterality { #id_laterality {
margin-top: 30px; margin-top: 30px;
} }
#id_laterality li{
display: inline-block; #id_laterality li {
border-radius: 4px; display: inline-block;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); border-radius: 4px;
background: rgb(28, 184, 65); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
padding-right: 10px; background: rgb(28, 184, 65);
color: white; padding-right: 10px;
color: white;
} }
.add-popup { .add-popup {
display: block; display: block;
} }
.multi-image-block, .series-block { .multi-image-block,
display: inline-flex; .series-block {
} display: inline-flex;
}
.sortable-placeholder { .sortable-placeholder {
border: 4px solid purple; border: 4px solid purple;
} }
.temp-thumb { .temp-thumb {
float:right; float: right;
} }
.long-answer pre { .long-answer pre {
white-space: pre-wrap; white-space: pre-wrap;
font: inherit; font: inherit;
color: inherit; color: inherit;
} }
.long-answer .answer-heading { .long-answer .answer-heading {
font-style: italic; font-style: italic;
font-weight: bold; font-weight: bold;
} }
.proposed-answer { .proposed-answer {
color: darkblue color: darkblue
} }
.notes .complete { .notes .complete {
color: darkslategray; color: darkslategray;
} }
table.longs .user-answer-score-4, table.longs .user-answer-score-4\.5 { table.longs .user-answer-score-4,
table.longs .user-answer-score-4\.5 {
color: red color: red
} }
table.longs .user-answer-score-5\.0, table.longs .user-answer-score-5\.5 { table.longs .user-answer-score-5\.0,
table.longs .user-answer-score-5\.5 {
color: yellow color: yellow
} }
table.longs .user-answer-score-6\.0, table.longs .user-answer-score-6\.5 { table.longs .user-answer-score-6\.0,
table.longs .user-answer-score-6\.5 {
color: yellowgreen color: yellowgreen
} }
table.longs .user-answer-score-7\.0, table.longs .user-answer-score-7\.5 { table.longs .user-answer-score-7\.0,
table.longs .user-answer-score-7\.5 {
color: green color: green
} }
.published-icon { .published-icon {
border: 1px dotted gray; border: 1px dotted gray;
opacity: 20%; opacity: 20%;
border-radius: 4px; border-radius: 4px;
display: none; display: none;
} }
.published-icon:hover { .published-icon:hover {
opacity: 100%; opacity: 100%;
} }
.published-icon.published { .published-icon.published {
border: 1px solid purple; border: 1px solid purple;
color: purple; color: purple;
opacity: 100%; opacity: 100%;
display: inline-block; display: inline-block;
} }
textarea, input { textarea,
border-radius: 2px; input {
background-color: #343a40; border-radius: 2px;
color: lightgray; background-color: #343a40;
} color: lightgray;
}
.exam-list li, #full-question-list li { .exam-list li,
display: flex; #full-question-list li {
} display: flex;
}
.flex-col { .flex-col {
flex: 1; flex: 1;
} }
.flex-col-2 { .flex-col-2 {
flex: 2; flex: 2;
} }
.flex-col-3 { .flex-col-3 {
flex: 3; flex: 3;
} }
.flex-col-4 { .flex-col-4 {
flex: 4; flex: 4;
} }
.score-answer-list {
width: 55%;
}
.question-display-block {
position: fixed;
right: 0px;
top: 30px;
width: 40%;
}
@@ -11,13 +11,13 @@
<h2>Exam: {{ exam.name }}</h2> <h2>Exam: {{ exam.name }}</h2>
<h3>Candidate: {{ cid }}</h3> <h3>Candidate: {{ cid }}</h3>
Answers: Answers:
<ul>{% for ans, score, correct_answer in answers_and_marks %} <ul class="score-answer-list">{% for ans, score, correct_answer in answers_and_marks %}
<li class="user-answer-li">Question {{forloop.counter}} - Correct answer: <span <li class="user-answer-li">Question {{forloop.counter}} - Correct answer: <span
class="correct-answer">{{ correct_answer }}</span></li> class="correct-answer">{{ correct_answer }}</span></li>
<span class="user-answer-score user-answer-score-{{score}} rapid-ans"> <span class="user-answer-score user-answer-score-{{score}} rapid-ans">
<pre>{{ans}}</pre> ({{score}}) <pre>{{ans}}</pre> ({{score}})
</span> </span>
<span class="view-question-link" data-qn="{{forloop.counter0}}">View</span> <span class="view-question-link" data-qn={{forloop.counter0}}>View</span>
{% endfor %} {% endfor %}
</ul> </ul>
<br /> Total mark: {{ total_score }} / {{max_score}} <br /> Total mark: {{ total_score }} / {{max_score}}
@@ -52,7 +52,8 @@
window.dispatchEvent(event); window.dispatchEvent(event);
$(".question-display-block .answers").empty().append(data.answers.toString()); $(".question-display-block .answers").empty().append(data.answers.toString());
$(".question-display-block .question-number").empty().append(question_number+1); n = question_number + 1
$(".question-display-block .question-number").empty().append(n);
// show some message according to the response. // show some message according to the response.
// For eg. A message box showing that the status has been changed // For eg. A message box showing that the status has been changed
}) })