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 -->
<core-loading [hideUntil]="ddQuestion.loaded"></core-loading>
@ -15,10 +15,13 @@
[contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"
(afterRender)="textRendered()">
</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"
[text]="ddQuestion.ddArea" [filter]="false" (afterRender)="ddAreaRendered()">
</core-format-text>
</ion-label>
</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.
:host {
.addon-qtype-ddimageortext-container {
min-height: 80px; // To display the loading.
}
--ddimageortext-border-drop: var(--gray-darker);
--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 {
margin-bottom: 0.5em;
display: block;
}
div.droparea img {
border: 1px solid var(--gray-darker);
border: 1px solid var(--core-dd-question-border);
max-width: 100%;
}
@ -27,9 +38,9 @@
}
div.draghome {
border: 1px solid var(--gray-darker);
border: 1px solid var(--core-dd-question-border);
cursor: pointer;
background-color: #B0C4DE;
background-color: var(--ddimageortext-draghome-background);
display: inline-block;
height: auto;
width: auto;
@ -39,37 +50,40 @@
@for $i from 0 to length($core-dd-question-colors) {
.group#{$i + 1} {
background: nth($core-dd-question-colors, $i + 1);
color: get_contrast_color(nth($core-dd-question-colors, $i + 1));
}
}
.group2 {
border-radius: 10px 0 0 0;
border-radius: var(--core-dd-question-radius) 0 0 0;
}
.group3 {
border-radius: 0 10px 0 0;
border-radius: 0 var(--core-dd-question-radius) 0 0;
}
.group4 {
border-radius: 0 0 10px 0;
border-radius: 0 0 var(--core-dd-question-radius) 0;
}
.group5 {
border-radius: 0 0 0 10px;
border-radius: 0 0 0 var(--core-dd-question-radius);
}
.group6 {
border-radius: 0 10px 10px 0;
border-radius: 0 var(--core-dd-question-radius) var(--core-dd-question-radius) 0;
}
.group7 {
border-radius: 10px 0 0 10px;
border-radius: var(--core-dd-question-radius) 0 0 var(--core-dd-question-radius);
}
.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 {
border: 1px solid var(--gray-darker);
color: var(--ion-text-color);
border: 1px solid var(--core-dd-question-border);
cursor: pointer;
z-index: 2;
}
.drag.placed {
border: 1px solid var(--ddimageortext-border-drop);
}
.dragitems.readonly .drag {
cursor: auto;
}
@ -85,16 +99,11 @@
.drag img {
display: block;
}
div.ddarea {
text-align : center;
position: relative;
}
.dropbackground {
margin:0 auto;
}
.dropzone {
border: 1px solid var(--gray-darker);
border: 1px solid var(--ddimageortext-border-drop);
position: absolute;
z-index: 1;
cursor: pointer;
@ -104,7 +113,7 @@
}
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 {
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 -->
<core-loading [hideUntil]="ddQuestion.loaded"></core-loading>
@ -14,9 +14,13 @@
[contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId"
(afterRender)="textRendered()">
</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"
[text]="ddQuestion.ddArea" [filter]="false" (afterRender)="ddAreaRendered()">
</core-format-text>
</ion-label>
</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.
:host {
.addon-qtype-ddmarker-container {
min-height: 80px; // To display the loading.
.addon-qtype-ddmarker-container {
min-height: 80px; // To display the loading.
}
core-format-text ::ng-deep {
.ddarea, .ddform {
user-select: none;
}
core-format-text ::ng-deep {
.ddarea, .ddform {
user-select: none;
}
.qtext {
margin-bottom: 0.5em;
display: block;
}
.qtext {
margin-bottom: 0.5em;
display: block;
}
.droparea {
display: inline-block;
}
.droparea {
display: inline-block;
}
div.droparea img {
border: 1px solid var(--core-dd-question-border);
max-width: 100%;
}
div.droparea img {
border: 1px solid var(--gray-darker);
max-width: 100%;
}
.dropzones svg {
z-index: 3;
}
.dropzones svg {
z-index: 3;
}
.dragitem.beingdragged .markertext {
z-index: 5;
box-shadow: var(--core-dd-question-selected-shadow);
}
.dragitem.beingdragged .markertext {
z-index: 5;
box-shadow: var(--core-dd-question-selected-shadow);
}
.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 {
.dragitems, // Previous to 3.9.
.draghomes {
&.readonly {
.dragitem,
.marker {
cursor: pointer;
position: absolute;
vertical-align: top;
z-index: 2;
cursor: auto;
}
}
div.ddarea {
text-align: center;
.dragitem, // Previous to 3.9.
.draghome,
.marker {
vertical-align: top;
cursor: pointer;
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(--white);
border: 2px solid var(--gray-darker);
padding: 5px;
margin: 10px;
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;
}
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;
}
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;
&.dragplaceholder {
display: none;
visibility: hidden;
&.active {
display: inline-block;
}
}
&.unplaced {
position: relative;
}
&.placed {
position: absolute;
opacity: 0.6;
}
}
}
.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 -->
<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-card *ngIf="!ddQuestion.readOnly" class="core-info-card">
<ion-item>
@ -14,10 +14,12 @@
[contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" #questiontext
(afterRender)="textRendered()">
</core-format-text>
<core-format-text *ngIf="ddQuestion.answers" [component]="component" [componentId]="componentId"
[text]="ddQuestion.answers" [filter]="false" (afterRender)="answersRendered()">
</core-format-text>
<div class="drags"></div>
</ion-label>
</ion-item>
</ion-list>
</div>

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

@ -1,126 +1,120 @@
@import "~core/features/question/question";
// Style ddwtos content a bit. Almost all these styles are copied from Moodle.
:host {
.addon-qtype-ddwtos-container {
min-height: 80px; // To display the loading.
.addon-qtype-ddwtos-container {
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 {
.qtext {
margin-bottom: 0.5em;
display: block;
}
.draghome {
margin-bottom: 1em;
max-width: calc(100%);
}
.draghome {
margin-bottom: 1em;
max-width: calc(100%);
}
.answertext {
margin-bottom: 0.5em;
}
.answertext {
margin-bottom: 0.5em;
}
.drop {
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 {
display: inline-block;
text-align: center;
border: 1px solid var(--gray-darker);
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(--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);
}
&.notreadonly .drag,
&.notreadonly .draghome,
&.notreadonly .drop,
&.notreadonly .answercontainer {
cursor: pointer;
border-radius: 5px;
}
.drop.selected {
border-color: var(--yellow-light);
box-shadow: 0 0 5px 5px var(--yellow-light);
}
&.readonly .drag,
&.readonly .draghome,
&.readonly .drop,
&.readonly .answercontainer {
cursor: default;
}
&.notreadonly .drag,
&.notreadonly .draghome,
&.notreadonly .drop,
&.notreadonly .answercontainer {
cursor: pointer;
border-radius: 5px;
}
span.incorrect {
background-color: var(--core-question-incorrect-color-bg);
}
span.correct {
background-color: var(--core-question-correct-color-bg);
}
&.readonly .drag,
&.readonly .draghome,
&.readonly .drop,
&.readonly .answercontainer {
cursor: default;
@for $i from 0 to length($core-dd-question-colors) {
.group#{$i + 1} {
background: nth($core-dd-question-colors, $i + 1);
color: get_contrast_color(nth($core-dd-question-colors, $i + 1));
}
}
span.incorrect {
background-color: var(--core-question-incorrect-color-bg);
}
span.correct {
background-color: var(--core-question-correct-color-bg);
}
.group2 {
border-radius: var(--core-dd-question-radius) 0 0 0;
}
.group3 {
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) {
.group#{$i + 1} {
background: nth($core-dd-question-colors, $i + 1);
color: var(--ion-text-color);
}
}
.group2 {
border-radius: 10px 0 0 0;
}
.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;
}
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-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

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

@ -117,6 +117,7 @@
--core-question-feedback-background-color: var(--yellow-dark);
--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-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-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) {
--core-more-icon: #{$core-more-icon};