EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3320 quiz: Improve drag and drop question styles

main
Pau Ferrer Ocaña 2021-05-28 14:15:42 +02:00
parent f55d59c1c2
commit 0e70d9e353
9 changed files with 289 additions and 274 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/addons/qtype/ddimageortext/component/addon-qtype-ddimageortext.html
View File

@ -1,4 +1,4 @@
<ion-list *ngIf="ddQuestion && (ddQuestion.text || ddQuestion.text === '')" class="addon-qtype-ddimageortext-container"> <div *ngIf="ddQuestion && (ddQuestion.text || ddQuestion.text === '')" class="addon-qtype-ddimageortext-container">
<!-- Content is outside the core-loading to let the script calculate drag items position --> <!-- Content is outside the core-loading to let the script calculate drag items position -->
<core-loading [hideUntil]="ddQuestion.loaded"></core-loading> <core-loading [hideUntil]="ddQuestion.loaded"></core-loading>
@ -15,10 +15,13 @@
[contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"
(afterRender)="textRendered()"> (afterRender)="textRendered()">
</core-format-text> </core-format-text>
</ion-label>
</ion-item>
<ion-item class="ion-text-wrap" [hidden]="!ddQuestion.loaded">
<ion-label>
<core-format-text *ngIf="ddQuestion.ddArea" [adaptImg]="false" [component]="component" [componentId]="componentId" <core-format-text *ngIf="ddQuestion.ddArea" [adaptImg]="false" [component]="component" [componentId]="componentId"
[text]="ddQuestion.ddArea" [filter]="false" (afterRender)="ddAreaRendered()"> [text]="ddQuestion.ddArea" [filter]="false" (afterRender)="ddAreaRendered()">
</core-format-text> </core-format-text>
</ion-label> </ion-label>
</ion-item> </ion-item>
</ion-list> </div>

55
src/addons/qtype/ddimageortext/component/ddimageortext.scss
View File

@ -2,18 +2,29 @@
// Style ddimageortext content a bit. Almost all these styles are copied from Moodle. // Style ddimageortext content a bit. Almost all these styles are copied from Moodle.
:host { :host {
.addon-qtype-ddimageortext-container { --ddimageortext-border-drop: var(--gray-darker);
min-height: 80px; // To display the loading. --ddimageortext-draghome-background: nth($core-dd-question-colors, 2);
} }
.addon-qtype-ddimageortext-container {
min-height: 80px; // To display the loading.
}
core-format-text ::ng-deep {
div.ddarea {
text-align: center;
position: relative;
margin-top: 10px;
user-select: none;
core-format-text ::ng-deep {
.qtext { .qtext {
margin-bottom: 0.5em; margin-bottom: 0.5em;
display: block; display: block;
} }
div.droparea img { div.droparea img {
border: 1px solid var(--gray-darker); border: 1px solid var(--core-dd-question-border);
max-width: 100%; max-width: 100%;
} }
@ -27,9 +38,9 @@
} }
div.draghome { div.draghome {
border: 1px solid var(--gray-darker); border: 1px solid var(--core-dd-question-border);
cursor: pointer; cursor: pointer;
background-color: #B0C4DE; background-color: var(--ddimageortext-draghome-background);
display: inline-block; display: inline-block;
height: auto; height: auto;
width: auto; width: auto;
@ -39,37 +50,40 @@
@for $i from 0 to length($core-dd-question-colors) { @for $i from 0 to length($core-dd-question-colors) {
.group#{$i + 1} { .group#{$i + 1} {
background: nth($core-dd-question-colors, $i + 1); background: nth($core-dd-question-colors, $i + 1);
color: get_contrast_color(nth($core-dd-question-colors, $i + 1));
} }
} }
.group2 { .group2 {
border-radius: 10px 0 0 0; border-radius: var(--core-dd-question-radius) 0 0 0;
} }
.group3 { .group3 {
border-radius: 0 10px 0 0; border-radius: 0 var(--core-dd-question-radius) 0 0;
} }
.group4 { .group4 {
border-radius: 0 0 10px 0; border-radius: 0 0 var(--core-dd-question-radius) 0;
} }
.group5 { .group5 {
border-radius: 0 0 0 10px; border-radius: 0 0 0 var(--core-dd-question-radius);
} }
.group6 { .group6 {
border-radius: 0 10px 10px 0; border-radius: 0 var(--core-dd-question-radius) var(--core-dd-question-radius) 0;
} }
.group7 { .group7 {
border-radius: 10px 0 0 10px; border-radius: var(--core-dd-question-radius) 0 0 var(--core-dd-question-radius);
} }
.group8 { .group8 {
border-radius: 10px 10px 10px 10px; border-radius: var(--core-dd-question-radius) var(--core-dd-question-radius) var(--core-dd-question-radius) var(--core-dd-question-radius);
} }
.drag { .drag {
border: 1px solid var(--gray-darker); border: 1px solid var(--core-dd-question-border);
color: var(--ion-text-color);
cursor: pointer; cursor: pointer;
z-index: 2; z-index: 2;
} }
.drag.placed {
border: 1px solid var(--ddimageortext-border-drop);
}
.dragitems.readonly .drag { .dragitems.readonly .drag {
cursor: auto; cursor: auto;
} }
@ -85,16 +99,11 @@
.drag img { .drag img {
display: block; display: block;
} }
div.ddarea {
text-align : center;
position: relative;
}
.dropbackground { .dropbackground {
margin:0 auto; margin:0 auto;
} }
.dropzone { .dropzone {
border: 1px solid var(--gray-darker); border: 1px solid var(--ddimageortext-border-drop);
position: absolute; position: absolute;
z-index: 1; z-index: 1;
cursor: pointer; cursor: pointer;
@ -104,7 +113,7 @@
} }
div.dragitems div.draghome, div.dragitems div.drag { div.dragitems div.draghome, div.dragitems div.drag {
font:13px/1.231 arial,helvetica,clean,sans-serif; font: 13px/1.231 arial, helvetica, clean, sans-serif;
} }
.drag.beingdragged { .drag.beingdragged {
z-index: 3; z-index: 3;

8
src/addons/qtype/ddmarker/component/addon-qtype-ddmarker.html
View File

@ -1,4 +1,4 @@
<ion-list *ngIf="ddQuestion && (ddQuestion.text || ddQuestion.text === '')" class="addon-qtype-ddmarker-container"> <div *ngIf="ddQuestion && (ddQuestion.text || ddQuestion.text === '')" class="addon-qtype-ddmarker-container">
<!-- Content is outside the core-loading to let the script calculate drag items position --> <!-- Content is outside the core-loading to let the script calculate drag items position -->
<core-loading [hideUntil]="ddQuestion.loaded"></core-loading> <core-loading [hideUntil]="ddQuestion.loaded"></core-loading>
@ -14,9 +14,13 @@
[contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"
(afterRender)="textRendered()"> (afterRender)="textRendered()">
</core-format-text> </core-format-text>
</ion-label>
</ion-item>
<ion-item class="ion-text-wrap" [hidden]="!ddQuestion.loaded">
<ion-label>
<core-format-text *ngIf="ddQuestion.ddArea" [adaptImg]="false" [component]="component" [componentId]="componentId" <core-format-text *ngIf="ddQuestion.ddArea" [adaptImg]="false" [component]="component" [componentId]="componentId"
[text]="ddQuestion.ddArea" [filter]="false" (afterRender)="ddAreaRendered()"> [text]="ddQuestion.ddArea" [filter]="false" (afterRender)="ddAreaRendered()">
</core-format-text> </core-format-text>
</ion-label> </ion-label>
</ion-item> </ion-item>
</ion-list> </div>

264
src/addons/qtype/ddmarker/component/ddmarker.scss
View File

@ -1,150 +1,150 @@
// Style ddmarker content a bit. Almost all these styles are copied from Moodle. // Style ddmarker content a bit. Almost all these styles are copied from Moodle.
:host { .addon-qtype-ddmarker-container {
.addon-qtype-ddmarker-container { min-height: 80px; // To display the loading.
min-height: 80px; // To display the loading. }
core-format-text ::ng-deep {
.ddarea, .ddform {
user-select: none;
} }
core-format-text ::ng-deep { .qtext {
.ddarea, .ddform { margin-bottom: 0.5em;
user-select: none; display: block;
} }
.qtext { .droparea {
margin-bottom: 0.5em; display: inline-block;
display: block; }
}
.droparea { div.droparea img {
display: inline-block; border: 1px solid var(--core-dd-question-border);
} max-width: 100%;
}
div.droparea img { .dropzones svg {
border: 1px solid var(--gray-darker); z-index: 3;
max-width: 100%; }
}
.dropzones svg { .dragitem.beingdragged .markertext {
z-index: 3; z-index: 5;
} box-shadow: var(--core-dd-question-selected-shadow);
}
.dragitem.beingdragged .markertext { .dragitems, // Previous to 3.9.
z-index: 5; .draghomes {
box-shadow: var(--core-dd-question-selected-shadow); &.readonly {
}
.dragitems, // Previous to 3.9.
.draghomes {
&.readonly {
.dragitem,
.marker {
cursor: auto;
}
}
.dragitem, // Previous to 3.9.
.draghome,
.marker {
vertical-align: top;
cursor: pointer;
position: relative;
margin: 10px;
display: inline-block;
&.dragplaceholder {
display: none;
visibility: hidden;
&.active {
display: inline-block;
}
}
&.unplaced {
position: relative;
}
&.placed {
position: absolute;
opacity: 0.6;
}
}
}
.droparea {
.dragitem, .dragitem,
.marker { .marker {
cursor: pointer; cursor: auto;
position: absolute;
vertical-align: top;
z-index: 2;
} }
} }
div.ddarea { .dragitem, // Previous to 3.9.
text-align: center; .draghome,
.marker {
vertical-align: top;
cursor: pointer;
position: relative; position: relative;
} margin: 10px;
div.ddarea .dropzones,
div.ddarea .markertexts {
top: 0;
left: 0;
min-height: 80px;
position: absolute;
text-align: start;
}
.dropbackground {
margin: 0 auto;
}
div.dragitems div.draghome,
div.dragitems div.dragitem,
div.draghome,
div.drag,
div.draghomes div.marker,
div.marker,
div.drag {
font: 13px/1.231 arial,helvetica,clean,sans-serif;
}
div.dragitems span.markertext,
div.draghomes span.markertext,
div.markertexts span.markertext {
margin: 0 5px;
z-index: 2;
background-color: var(--white);
border: 2px solid var(--gray-darker);
padding: 5px;
display: inline-block; display: inline-block;
zoom: 1; &.dragplaceholder {
border-radius: 10px; display: none;
color: var(--ion-text-color); visibility: hidden;
}
div.markertexts span.markertext { &.active {
z-index: 3; display: inline-block;
background-color: var(--yellow-light); }
border-style: solid; }
border-width: 2px;
border-color: var(--yellow); &.unplaced {
position: absolute; position: relative;
} }
span.wrongpart { &.placed {
background-color: var(--yellow-light); position: absolute;
border-style: solid; opacity: 0.6;
border-width: 2px; }
border-color: var(--yellow);
padding: 5px;
border-radius: 10px;
opacity: 0.6;
margin: 5px;
display: inline-block;
}
div.dragitems img.target,
div.draghomes img.target {
position: absolute;
left: -7px; /* This must be half the size of the target image, minus 0.5. */
top: -7px; /* In other words, this works for a 15x15 cross-hair. */
}
div.dragitems div.draghome img.target,
div.draghomes div.marker img.target {
display: none;
} }
} }
.droparea {
.dragitem,
.marker {
cursor: pointer;
position: absolute;
vertical-align: top;
z-index: 2;
}
}
div.ddarea {
text-align: center;
position: relative;
}
div.ddarea .dropzones,
div.ddarea .markertexts {
top: 0;
left: 0;
min-height: 80px;
position: absolute;
text-align: start;
}
.dropbackground {
margin: 0 auto;
}
div.dragitems div.draghome,
div.dragitems div.dragitem,
div.draghome,
div.drag,
div.draghomes div.marker,
div.marker,
div.drag {
font: 13px/1.231 arial, helvetica, clean, sans-serif;
}
div.dragitems span.markertext,
div.draghomes span.markertext,
div.markertexts span.markertext {
margin: 0 5px;
z-index: 2;
background-color: var(--ion-item-background);
border: 2px solid var(--core-dd-question-border);
padding: 5px;
display: inline-block;
zoom: 1;
border-radius: 10px;
color: var(--ion-text-color);
}
div.markertexts span.markertext {
z-index: 3;
background-color: var(--yellow-light);
border-style: solid;
border-width: 2px;
border-color: var(--yellow);
position: absolute;
color: var(--black);
}
span.wrongpart {
background-color: var(--yellow-light);
border-style: solid;
border-width: 2px;
border-color: var(--yellow);
padding: 5px;
border-radius: 10px;
opacity: 0.6;
margin: 5px;
display: inline-block;
color: var(--black);
}
div.dragitems img.target,
div.draghomes img.target {
position: absolute;
left: -7px; /* This must be half the size of the target image, minus 0.5. */
top: -7px; /* In other words, this works for a 15x15 cross-hair. */
}
div.dragitems div.draghome img.target,
div.draghomes div.marker img.target {
display: none;
}
} }

8
src/addons/qtype/ddwtos/component/addon-qtype-ddwtos.html
View File

@ -1,8 +1,8 @@
<ion-list *ngIf="ddQuestion && (ddQuestion.text || ddQuestion.text === '')" class="addon-qtype-ddwtos-container"> <div *ngIf="ddQuestion && (ddQuestion.text || ddQuestion.text === '')" class="addon-qtype-ddwtos-container">
<!-- Content is outside the core-loading to let the script calculate drag items position --> <!-- Content is outside the core-loading to let the script calculate drag items position -->
<core-loading [hideUntil]="ddQuestion.loaded"></core-loading> <core-loading [hideUntil]="ddQuestion.loaded"></core-loading>
<ion-item class="ion-text-wrap addon-qtype-ddwtos-container" [hidden]="!ddQuestion.loaded"> <ion-item class="ion-text-wrap" [hidden]="!ddQuestion.loaded">
<ion-label> <ion-label>
<ion-card *ngIf="!ddQuestion.readOnly" class="core-info-card"> <ion-card *ngIf="!ddQuestion.readOnly" class="core-info-card">
<ion-item> <ion-item>
@ -14,10 +14,12 @@
[contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" #questiontext [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" #questiontext
(afterRender)="textRendered()"> (afterRender)="textRendered()">
</core-format-text> </core-format-text>
<core-format-text *ngIf="ddQuestion.answers" [component]="component" [componentId]="componentId" <core-format-text *ngIf="ddQuestion.answers" [component]="component" [componentId]="componentId"
[text]="ddQuestion.answers" [filter]="false" (afterRender)="answersRendered()"> [text]="ddQuestion.answers" [filter]="false" (afterRender)="answersRendered()">
</core-format-text> </core-format-text>
<div class="drags"></div> <div class="drags"></div>
</ion-label> </ion-label>
</ion-item> </ion-item>
</ion-list> </div>

214
src/addons/qtype/ddwtos/component/ddwtos.scss
View File

@ -1,126 +1,120 @@
@import "~core/features/question/question"; @import "~core/features/question/question";
// Style ddwtos content a bit. Almost all these styles are copied from Moodle. // Style ddwtos content a bit. Almost all these styles are copied from Moodle.
:host { .addon-qtype-ddwtos-container {
.addon-qtype-ddwtos-container { min-height: 80px; // To display the loading.
min-height: 80px; // To display the loading. }
core-format-text ::ng-deep, .drags ::ng-deep {
.qtext {
margin-bottom: 0.5em;
display: block;
} }
core-format-text ::ng-deep, .drags ::ng-deep { .draghome {
.qtext { margin-bottom: 1em;
margin-bottom: 0.5em; max-width: calc(100%);
display: block; }
}
.draghome { .answertext {
margin-bottom: 1em; margin-bottom: 0.5em;
max-width: calc(100%); }
}
.answertext { .drop {
margin-bottom: 0.5em; display: inline-block;
} text-align: center;
border: 1px solid var(--core-dd-question-border);
margin-bottom: 2px;
border-radius: 5px;
cursor: pointer;
}
.draghome, .drag {
display: inline-block;
text-align: center;
background: transparent;
border: 0;
white-space: normal;
overflow: visible;
word-wrap: break-word;
}
.draghome, .drag.unplaced{
border: 1px solid var(--core-dd-question-border);
}
.draghome {
visibility: hidden;
}
.drag {
z-index: 2;
border-radius: 5px;
line-height: 25px;
cursor: pointer;
}
.drag.selected,
.drop.selected {
z-index: 3;
box-shadow: var(--core-dd-question-selected-shadow);
}
.drop { &.notreadonly .drag,
display: inline-block; &.notreadonly .draghome,
text-align: center; &.notreadonly .drop,
border: 1px solid var(--gray-darker); &.notreadonly .answercontainer {
margin-bottom: 2px; cursor: pointer;
border-radius: 5px; border-radius: 5px;
cursor: pointer; }
}
.draghome, .drag {
display: inline-block;
text-align: center;
background: transparent;
border: 0;
white-space: normal;
overflow: visible;
word-wrap: break-word;
}
.draghome, .drag.unplaced{
border: 1px solid var(--gray-darker);
}
.draghome {
visibility: hidden;
}
.drag {
z-index: 2;
border-radius: 5px;
line-height: 25px;
cursor: pointer;
}
.drag.selected {
z-index: 3;
box-shadow: var(--core-dd-question-selected-shadow);
}
.drop.selected { &.readonly .drag,
border-color: var(--yellow-light); &.readonly .draghome,
box-shadow: 0 0 5px 5px var(--yellow-light); &.readonly .drop,
} &.readonly .answercontainer {
cursor: default;
}
&.notreadonly .drag, span.incorrect {
&.notreadonly .draghome, background-color: var(--core-question-incorrect-color-bg);
&.notreadonly .drop, }
&.notreadonly .answercontainer { span.correct {
cursor: pointer; background-color: var(--core-question-correct-color-bg);
border-radius: 5px; }
}
&.readonly .drag, @for $i from 0 to length($core-dd-question-colors) {
&.readonly .draghome, .group#{$i + 1} {
&.readonly .drop, background: nth($core-dd-question-colors, $i + 1);
&.readonly .answercontainer { color: get_contrast_color(nth($core-dd-question-colors, $i + 1));
cursor: default;
} }
}
span.incorrect { .group2 {
background-color: var(--core-question-incorrect-color-bg); border-radius: var(--core-dd-question-radius) 0 0 0;
} }
span.correct { .group3 {
background-color: var(--core-question-correct-color-bg); border-radius: 0 var(--core-dd-question-radius) 0 0;
} }
.group4 {
border-radius: 0 0 var(--core-dd-question-radius) 0;
}
.group5 {
border-radius: 0 0 0 var(--core-dd-question-radius);
}
.group6 {
border-radius: 0 var(--core-dd-question-radius) var(--core-dd-question-radius) 0;
}
.group7 {
border-radius: var(--core-dd-question-radius) 0 0 var(--core-dd-question-radius);
}
.group8 {
border-radius: var(--core-dd-question-radius) var(--core-dd-question-radius) var(--core-dd-question-radius) var(--core-dd-question-radius);
}
@for $i from 0 to length($core-dd-question-colors) { sub, sup {
.group#{$i + 1} { font-size: 80%;
background: nth($core-dd-question-colors, $i + 1); position: relative;
color: var(--ion-text-color); vertical-align: baseline;
} }
} sup {
top: -0.4em;
.group2 { }
border-radius: 10px 0 0 0; sub {
} bottom: -0.2em;
.group3 {
border-radius: 0 10px 0 0;
}
.group4 {
border-radius: 0 0 10px 0;
}
.group5 {
border-radius: 0 0 0 10px;
}
.group6 {
border-radius: 0 10px 10px 0;
}
.group7 {
border-radius: 10px 0 0 10px;
}
.group8 {
border-radius: 10px 10px 10px 10px;
}
sub, sup {
font-size: 80%;
position: relative;
vertical-align: baseline;
}
sup {
top: -0.4em;
}
sub {
bottom: -0.2em;
}
} }
} }

2
src/theme/globals.variables.scss
View File

@ -237,7 +237,7 @@ $colors-dark: (
$core-course-image-background: #81ecec, #74b9ff, #a29bfe, #dfe6e9, #00b894, #0984e3, #b2bec3, #fdcb6e, #fd79a8, #6c5ce7 !default; $core-course-image-background: #81ecec, #74b9ff, #a29bfe, #dfe6e9, #00b894, #0984e3, #b2bec3, #fdcb6e, #fd79a8, #6c5ce7 !default;
$core-dd-question-colors: $white, $blue-light, #DCDCDC, #D8BFD8, #87CEFA, #DAA520, #FFD700, #F0E68C !default; $core-dd-question-colors: #FFFFFF, #B0C4DE, #DCDCDC, #D8BFD8, #87CEFA, #DAA520, #FFD700, #F0E68C !default;
/* /*
* Layout Breakpoints * Layout Breakpoints

1
src/theme/theme.dark.scss
View File

@ -117,6 +117,7 @@
--core-question-feedback-background-color: var(--yellow-dark); --core-question-feedback-background-color: var(--yellow-dark);
--core-dd-question-selected-shadow: 2px 2px 4px var(--gray-light); --core-dd-question-selected-shadow: 2px 2px 4px var(--gray-light);
--core-dd-question-border: var(--gray-light);
--addon-messages-message-bg: #{$addon-messages-message-bg-dark}; --addon-messages-message-bg: #{$addon-messages-message-bg-dark};
--addon-messages-message-activated-bg: #{$addon-messages-message-activated-bg-dark}; --addon-messages-message-activated-bg: #{$addon-messages-message-activated-bg-dark};

2
src/theme/theme.light.scss
View File

@ -275,6 +275,8 @@
--core-question-feedback-background-color: var(--yellow-light); --core-question-feedback-background-color: var(--yellow-light);
--core-dd-question-selected-shadow: 2px 2px 4px var(--gray-dark); --core-dd-question-selected-shadow: 2px 2px 4px var(--gray-dark);
--core-dd-question-radius: 10px;
--core-dd-question-border: var(--gray-darker);
@if ($core-more-icon) { @if ($core-more-icon) {
--core-more-icon: #{$core-more-icon}; --core-more-icon: #{$core-more-icon};