@citolab/qti-components 7.0.2 → 7.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/cdn/index.global.js +1 -1
- package/cdn/index.js +3754 -138
- package/dist/custom-elements.json +382 -199
- package/dist/index.d.ts +10 -5
- package/dist/index.js +3832 -269
- package/dist/index.js.map +1 -1
- package/dist/item.css +34 -14
- package/dist/loader/index.d.ts +1 -1
- package/dist/qti-components-jsx.d.ts +4 -36
- package/dist/{qti-simple-choice-DG8ImdPz.d.ts → qti-simple-choice-UTrFa_RQ.d.ts} +9 -17
- package/dist/vscode.html-custom-data.json +3 -2
- package/package.json +6 -4
- package/readme.md +55 -0
- package/README.md +0 -85
package/dist/index.js
CHANGED
|
@@ -4560,20 +4560,6 @@ qti-response-declaration {
|
|
|
4560
4560
|
|
|
4561
4561
|
& qti-gap {
|
|
4562
4562
|
|
|
4563
|
-
&[enabled] {
|
|
4564
|
-
|
|
4565
|
-
/* Light theme override */
|
|
4566
|
-
.qti-selections-light & {
|
|
4567
|
-
border-color: var(--qti-light-border-active);
|
|
4568
|
-
}
|
|
4569
|
-
|
|
4570
|
-
/* Dark theme override */
|
|
4571
|
-
.qti-selections-dark & {
|
|
4572
|
-
border-color: var(--qti-dark-border-active);
|
|
4573
|
-
}
|
|
4574
|
-
background-color: var(--qti-bg-active)
|
|
4575
|
-
}
|
|
4576
|
-
|
|
4577
4563
|
&[disabled] {
|
|
4578
4564
|
|
|
4579
4565
|
&:not(:empty) {
|
|
@@ -4591,6 +4577,20 @@ qti-response-declaration {
|
|
|
4591
4577
|
outline: 4px solid var(--qti-disabled-bg)
|
|
4592
4578
|
}
|
|
4593
4579
|
|
|
4580
|
+
&[enabled] {
|
|
4581
|
+
|
|
4582
|
+
/* Light theme override */
|
|
4583
|
+
.qti-selections-light & {
|
|
4584
|
+
border-color: var(--qti-light-border-active);
|
|
4585
|
+
}
|
|
4586
|
+
|
|
4587
|
+
/* Dark theme override */
|
|
4588
|
+
.qti-selections-dark & {
|
|
4589
|
+
border-color: var(--qti-dark-border-active);
|
|
4590
|
+
}
|
|
4591
|
+
background-color: var(--qti-bg-active)
|
|
4592
|
+
}
|
|
4593
|
+
|
|
4594
4594
|
&[active] {
|
|
4595
4595
|
|
|
4596
4596
|
/* Light theme override */
|
|
@@ -4973,12 +4973,22 @@ qti-response-declaration {
|
|
|
4973
4973
|
}
|
|
4974
4974
|
|
|
4975
4975
|
qti-match-interaction:not(.qti-match-tabular) {
|
|
4976
|
+
&:state(--dragzone-enabled) qti-simple-match-set:first-of-type {
|
|
4977
|
+
background-color: var(--qti-bg-active);
|
|
4978
|
+
}
|
|
4979
|
+
|
|
4980
|
+
&:state(--dragzone-active) qti-simple-match-set:first-of-type {
|
|
4981
|
+
border-color: var(--qti-border-active);
|
|
4982
|
+
background-color: var(--qti-bg-active);
|
|
4983
|
+
}
|
|
4984
|
+
|
|
4976
4985
|
/* The draggables */
|
|
4977
4986
|
& qti-simple-match-set:first-of-type {
|
|
4978
4987
|
display: flex;
|
|
4979
4988
|
flex-wrap: wrap;
|
|
4980
4989
|
align-items: flex-start; /* Prevents children from stretching */
|
|
4981
4990
|
gap: var(--qti-gap-size);
|
|
4991
|
+
border: 2px solid transparent;
|
|
4982
4992
|
|
|
4983
4993
|
& qti-simple-associable-choice {
|
|
4984
4994
|
|
|
@@ -5370,6 +5380,16 @@ qti-response-declaration {
|
|
|
5370
5380
|
}
|
|
5371
5381
|
|
|
5372
5382
|
qti-associate-interaction {
|
|
5383
|
+
/* General styles for active and enabled states */
|
|
5384
|
+
&:state(--dragzone-active) slot[name='qti-simple-associable-choice'] {
|
|
5385
|
+
border-color: var(--qti-border-active);
|
|
5386
|
+
background-color: var(--qti-bg-active);
|
|
5387
|
+
}
|
|
5388
|
+
|
|
5389
|
+
&:state(--dragzone-enabled) slot[name='qti-simple-associable-choice'] {
|
|
5390
|
+
background-color: var(--qti-bg-active);
|
|
5391
|
+
}
|
|
5392
|
+
|
|
5373
5393
|
& qti-simple-associable-choice, /* drags when in lightdom */
|
|
5374
5394
|
&::part(qti-simple-associable-choice) /* drags when in shadowdom */ {
|
|
5375
5395
|
|
|
@@ -6921,116 +6941,3715 @@ var makeLitTemplate = (template) => {
|
|
|
6921
6941
|
walker.currentNode = newTextNode;
|
|
6922
6942
|
}
|
|
6923
6943
|
}
|
|
6924
|
-
}
|
|
6925
|
-
for (const e10 of elementsToRemove) {
|
|
6926
|
-
e10.remove();
|
|
6927
|
-
}
|
|
6928
|
-
return litTemplate;
|
|
6929
|
-
};
|
|
6944
|
+
}
|
|
6945
|
+
for (const e10 of elementsToRemove) {
|
|
6946
|
+
e10.remove();
|
|
6947
|
+
}
|
|
6948
|
+
return litTemplate;
|
|
6949
|
+
};
|
|
6950
|
+
|
|
6951
|
+
// src/lib/qti-test/components/test-paging-buttons-stamp.ts
|
|
6952
|
+
var TestPagingButtonsStamp = class extends TestComponent {
|
|
6953
|
+
constructor() {
|
|
6954
|
+
super();
|
|
6955
|
+
this.maxDisplayedItems = 2;
|
|
6956
|
+
this.skipOnCategory = "dep-informational";
|
|
6957
|
+
this._internals.ariaLabel = "pagination";
|
|
6958
|
+
}
|
|
6959
|
+
createRenderRoot() {
|
|
6960
|
+
return this;
|
|
6961
|
+
}
|
|
6962
|
+
render() {
|
|
6963
|
+
const items = this._testContext.items.reduce(
|
|
6964
|
+
(acc, item) => {
|
|
6965
|
+
const isDepInfoItem = item.category?.split(" ").includes(this.skipOnCategory);
|
|
6966
|
+
const newIndex = isDepInfoItem ? "i" : acc.counter++;
|
|
6967
|
+
acc.result.push({
|
|
6968
|
+
...item,
|
|
6969
|
+
newIndex
|
|
6970
|
+
// Assign the new index, which only increments for non-info items
|
|
6971
|
+
});
|
|
6972
|
+
return acc;
|
|
6973
|
+
},
|
|
6974
|
+
{ counter: 0, result: [] }
|
|
6975
|
+
).result;
|
|
6976
|
+
const itemIndex = items.findIndex((item) => item.identifier === this._testContext.navItemId);
|
|
6977
|
+
const start = Math.max(0, itemIndex - this.maxDisplayedItems);
|
|
6978
|
+
const end = Math.min(items.length, itemIndex + this.maxDisplayedItems + 1);
|
|
6979
|
+
const clampedItems = items.slice(start, end);
|
|
6980
|
+
return x`
|
|
6981
|
+
${clampedItems.map((item) => {
|
|
6982
|
+
const rawscore = item.variables.find((vr) => vr.identifier == "SCORE");
|
|
6983
|
+
const score = parseInt(rawscore?.value?.toString());
|
|
6984
|
+
const completionStatus = item.variables.find((v3) => v3.identifier === "completionStatus")?.value;
|
|
6985
|
+
const type = item.category !== this.skipOnCategory ? "regular" : "info";
|
|
6986
|
+
const active = this._testContext.navItemId === item.identifier;
|
|
6987
|
+
const correct = this._testContext.view === "scorer" && type == "regular" && score !== void 0 && !isNaN(score) && score > 0;
|
|
6988
|
+
const incorrect = this._testContext.view === "scorer" && type == "regular" && score !== void 0 && !isNaN(score) && score <= 0;
|
|
6989
|
+
const answered = this._testContext.view === "candidate" && completionStatus === "completed" && item.category !== this.skipOnCategory;
|
|
6990
|
+
const computedItem = {
|
|
6991
|
+
...item,
|
|
6992
|
+
type,
|
|
6993
|
+
active,
|
|
6994
|
+
correct,
|
|
6995
|
+
incorrect,
|
|
6996
|
+
answered
|
|
6997
|
+
};
|
|
6998
|
+
const templateElement = this.firstElementChild;
|
|
6999
|
+
const myTemplate = prepareTemplate(templateElement);
|
|
7000
|
+
return myTemplate({ item: computedItem });
|
|
7001
|
+
})}
|
|
7002
|
+
`;
|
|
7003
|
+
}
|
|
7004
|
+
};
|
|
7005
|
+
__decorateClass([
|
|
7006
|
+
n5({ type: Number, attribute: "max-displayed-items" })
|
|
7007
|
+
], TestPagingButtonsStamp.prototype, "maxDisplayedItems", 2);
|
|
7008
|
+
__decorateClass([
|
|
7009
|
+
n5({ type: String, attribute: "skip-on-category" })
|
|
7010
|
+
], TestPagingButtonsStamp.prototype, "skipOnCategory", 2);
|
|
7011
|
+
TestPagingButtonsStamp = __decorateClass([
|
|
7012
|
+
t4("test-paging-buttons-stamp")
|
|
7013
|
+
], TestPagingButtonsStamp);
|
|
7014
|
+
|
|
7015
|
+
// src/lib/qti-item/qti-item.mixin.ts
|
|
7016
|
+
function QtiItemMixin(Base) {
|
|
7017
|
+
class QtiItemClass extends Base {
|
|
7018
|
+
// the XMLDocument
|
|
7019
|
+
createRenderRoot() {
|
|
7020
|
+
return this;
|
|
7021
|
+
}
|
|
7022
|
+
get assessmentItem() {
|
|
7023
|
+
return this.renderRoot?.querySelector("qti-assessment-item");
|
|
7024
|
+
}
|
|
7025
|
+
async connectedCallback() {
|
|
7026
|
+
super.connectedCallback();
|
|
7027
|
+
await this.updateComplete;
|
|
7028
|
+
this.dispatchEvent(
|
|
7029
|
+
new CustomEvent("qti-item-connected", {
|
|
7030
|
+
bubbles: true,
|
|
7031
|
+
composed: true,
|
|
7032
|
+
detail: { identifier: this.identifier, href: this.href }
|
|
7033
|
+
})
|
|
7034
|
+
);
|
|
7035
|
+
}
|
|
7036
|
+
render() {
|
|
7037
|
+
return x`${this.xmlDoc}`;
|
|
7038
|
+
}
|
|
7039
|
+
}
|
|
7040
|
+
__decorateClass([
|
|
7041
|
+
n5({ type: String, reflect: true })
|
|
7042
|
+
], QtiItemClass.prototype, "identifier", 2);
|
|
7043
|
+
__decorateClass([
|
|
7044
|
+
n5({ type: String })
|
|
7045
|
+
], QtiItemClass.prototype, "href", 2);
|
|
7046
|
+
__decorateClass([
|
|
7047
|
+
n5({ type: Object, attribute: false })
|
|
7048
|
+
], QtiItemClass.prototype, "xmlDoc", 2);
|
|
7049
|
+
return QtiItemClass;
|
|
7050
|
+
}
|
|
7051
|
+
|
|
7052
|
+
// inline:../../item.css?inline
|
|
7053
|
+
var item_default2 = `@layer qti-base, qti-components, qti-utilities, qti-variants, qti-extended;
|
|
7054
|
+
|
|
7055
|
+
:root,
|
|
7056
|
+
:host {
|
|
7057
|
+
/* Active colors */
|
|
7058
|
+
--qti-bg-active: #ffecec;
|
|
7059
|
+
--qti-border-active: #f86d70;
|
|
7060
|
+
|
|
7061
|
+
/* Gap size */
|
|
7062
|
+
--qti-gap-size: 1rem;
|
|
7063
|
+
|
|
7064
|
+
/* Background colors */
|
|
7065
|
+
--qti-bg: white;
|
|
7066
|
+
--qti-hover-bg: #f9fafb;
|
|
7067
|
+
|
|
7068
|
+
/* Light theme colors */
|
|
7069
|
+
--qti-light-bg-active: #f0f0f0; /* Light gray */
|
|
7070
|
+
--qti-light-border-active: #d0d0d0; /* Medium gray */
|
|
7071
|
+
|
|
7072
|
+
/* Dark theme colors */
|
|
7073
|
+
--qti-dark-bg-active: #1f2937; /* Dark gray */
|
|
7074
|
+
--qti-dark-border-active: #64748b; /* Medium gray */
|
|
7075
|
+
|
|
7076
|
+
/* Disabled colors */
|
|
7077
|
+
--qti-disabled-bg: #f3f4f6;
|
|
7078
|
+
--qti-disabled-color: #45484f;
|
|
7079
|
+
|
|
7080
|
+
/* Border properties */
|
|
7081
|
+
--qti-border-thickness: 2px;
|
|
7082
|
+
--qti-border-style: solid;
|
|
7083
|
+
--qti-border-color: #c6cad0;
|
|
7084
|
+
--qti-border-radius: 0.3rem;
|
|
7085
|
+
--qti-drop-border-radius: calc(var(--qti-border-radius) + var(--qti-border-thickness));
|
|
7086
|
+
|
|
7087
|
+
/* Focus & active states */
|
|
7088
|
+
--qti-focus-border-width: 5px;
|
|
7089
|
+
--qti-focus-color: #bddcff7e;
|
|
7090
|
+
|
|
7091
|
+
/* Class-specific variables */
|
|
7092
|
+
|
|
7093
|
+
/* Form elements */
|
|
7094
|
+
--qti-form-size: 1rem;
|
|
7095
|
+
|
|
7096
|
+
/* Point elements */
|
|
7097
|
+
--qti-point-size: 2rem;
|
|
7098
|
+
|
|
7099
|
+
/* Order buttons */
|
|
7100
|
+
--qti-order-size: 2rem;
|
|
7101
|
+
|
|
7102
|
+
/* Generic padding for all elements */
|
|
7103
|
+
--qti-padding-vertical: 0.5rem; /* py-2 */
|
|
7104
|
+
--qti-padding-horizontal: 0.5rem; /* px-2 */
|
|
7105
|
+
}
|
|
7106
|
+
|
|
7107
|
+
/* SVG masks and backgrounds */
|
|
7108
|
+
|
|
7109
|
+
.chevron {
|
|
7110
|
+
background: url("data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E")
|
|
7111
|
+
no-repeat center right 6px;
|
|
7112
|
+
}
|
|
7113
|
+
|
|
7114
|
+
.handle {
|
|
7115
|
+
background-image: radial-gradient(
|
|
7116
|
+
circle at center,
|
|
7117
|
+
rgb(0 0 0 / 10%) 0,
|
|
7118
|
+
rgb(0 0 0 / 20%) 2px,
|
|
7119
|
+
rgb(255 255 255 / 0%) 2px,
|
|
7120
|
+
rgb(255 255 255 / 0%) 100%
|
|
7121
|
+
);
|
|
7122
|
+
background-repeat: repeat-y;
|
|
7123
|
+
background-position: left center;
|
|
7124
|
+
background-size: 14px 8px;
|
|
7125
|
+
}
|
|
7126
|
+
|
|
7127
|
+
.check-mask {
|
|
7128
|
+
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
|
|
7129
|
+
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
|
|
7130
|
+
}
|
|
7131
|
+
|
|
7132
|
+
/*
|
|
7133
|
+
Following are classes that can be applied to elements and element states, so they are not used directly
|
|
7134
|
+
The @apply directive is used to apply these classes to elements
|
|
7135
|
+
*/
|
|
7136
|
+
|
|
7137
|
+
/* Apply .bordered to an element */
|
|
7138
|
+
|
|
7139
|
+
.bordered {
|
|
7140
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
7141
|
+
outline: none;
|
|
7142
|
+
}
|
|
7143
|
+
|
|
7144
|
+
/* Apply .form rules for checkbox and radiobutton */
|
|
7145
|
+
|
|
7146
|
+
.form {
|
|
7147
|
+
|
|
7148
|
+
display: grid;
|
|
7149
|
+
place-content: center;
|
|
7150
|
+
width: var(--qti-form-size);
|
|
7151
|
+
height: var(--qti-form-size);
|
|
7152
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
7153
|
+
outline: none;
|
|
7154
|
+
}
|
|
7155
|
+
|
|
7156
|
+
/* Apply .button rules for button-like elements, such as drags and buttons */
|
|
7157
|
+
|
|
7158
|
+
.button {
|
|
7159
|
+
|
|
7160
|
+
border-radius: var(--qti-border-radius);
|
|
7161
|
+
padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
|
|
7162
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
7163
|
+
outline: none;
|
|
7164
|
+
}
|
|
7165
|
+
|
|
7166
|
+
/* Apply .select for the select dropdown element */
|
|
7167
|
+
|
|
7168
|
+
.select {
|
|
7169
|
+
|
|
7170
|
+
border-radius: var(--qti-border-radius);
|
|
7171
|
+
position: relative;
|
|
7172
|
+
-webkit-appearance: none;
|
|
7173
|
+
-moz-appearance: none;
|
|
7174
|
+
appearance: none;
|
|
7175
|
+
padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
|
|
7176
|
+
padding-right: calc(var(--qti-padding-horizontal) + 1.5rem); /* 1.5rem for the chevron */ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color); outline: none; background: url("data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E")
|
|
7177
|
+
no-repeat center right 6px;
|
|
7178
|
+
}
|
|
7179
|
+
|
|
7180
|
+
/* Apply .text for the input text and textarea */
|
|
7181
|
+
|
|
7182
|
+
.text {
|
|
7183
|
+
|
|
7184
|
+
border-radius: 0;
|
|
7185
|
+
cursor: text;
|
|
7186
|
+
padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
|
|
7187
|
+
background: unset;
|
|
7188
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
7189
|
+
outline: none;
|
|
7190
|
+
}
|
|
7191
|
+
|
|
7192
|
+
/* Apply .spot for hotspot shapes */
|
|
7193
|
+
|
|
7194
|
+
.spot {
|
|
7195
|
+
|
|
7196
|
+
width: 100%;
|
|
7197
|
+
height: 100%;
|
|
7198
|
+
background-color: transparent;
|
|
7199
|
+
padding: 0;
|
|
7200
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
7201
|
+
outline: none;
|
|
7202
|
+
}
|
|
7203
|
+
|
|
7204
|
+
/* Apply .point for circular small hotspots */
|
|
7205
|
+
|
|
7206
|
+
.point {
|
|
7207
|
+
|
|
7208
|
+
border-radius: 100%;
|
|
7209
|
+
width: var(--qti-point-size);
|
|
7210
|
+
height: var(--qti-point-size);
|
|
7211
|
+
background-color: transparent;
|
|
7212
|
+
padding: 0;
|
|
7213
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
7214
|
+
outline: none;
|
|
7215
|
+
}
|
|
7216
|
+
|
|
7217
|
+
/* Apply .drag for draggable elements */
|
|
7218
|
+
|
|
7219
|
+
.drag {
|
|
7220
|
+
|
|
7221
|
+
transition:
|
|
7222
|
+
transform 200ms ease-out,
|
|
7223
|
+
box-shadow 200ms ease-out,
|
|
7224
|
+
rotate 200ms ease-out;
|
|
7225
|
+
cursor: grab;
|
|
7226
|
+
background-color: var(--qti-bg);
|
|
7227
|
+
padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
|
|
7228
|
+
border-radius: var(--qti-border-radius);
|
|
7229
|
+
padding-left: calc(var(--qti-padding-horizontal) + 0.5rem) !important; /* 1.5rem for the drag */ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color); outline: none; background-image: radial-gradient(
|
|
7230
|
+
circle at center,
|
|
7231
|
+
rgb(0 0 0 / 10%) 0,
|
|
7232
|
+
rgb(0 0 0 / 20%) 2px,
|
|
7233
|
+
rgb(255 255 255 / 0%) 2px,
|
|
7234
|
+
rgb(255 255 255 / 0%) 100%
|
|
7235
|
+
); background-repeat: repeat-y; background-position: left center; background-size: 14px 8px;
|
|
7236
|
+
}
|
|
7237
|
+
|
|
7238
|
+
/* Apply .dragging for the dragging state of a draggable element */
|
|
7239
|
+
|
|
7240
|
+
.dragging {
|
|
7241
|
+
pointer-events: none;
|
|
7242
|
+
rotate: -2deg;
|
|
7243
|
+
box-shadow:
|
|
7244
|
+
0 8px 12px rgb(0 0 0 / 20%),
|
|
7245
|
+
0 4px 8px rgb(0 0 0 / 10%);
|
|
7246
|
+
}
|
|
7247
|
+
|
|
7248
|
+
/* Apply .drop for an element where you can drop the draggable */
|
|
7249
|
+
|
|
7250
|
+
.drop {
|
|
7251
|
+
|
|
7252
|
+
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" stroke="%23CCCCCC" stroke-width="1" fill="transparent" /></svg>')
|
|
7253
|
+
center no-repeat;
|
|
7254
|
+
border-radius: var(--qti-border-radius);
|
|
7255
|
+
position: relative;
|
|
7256
|
+
background-color: var(--qti-bg);
|
|
7257
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
7258
|
+
outline: none;
|
|
7259
|
+
}
|
|
7260
|
+
|
|
7261
|
+
/* Apply .dropping for an indicator where you can drop the draggable */
|
|
7262
|
+
|
|
7263
|
+
.dropping {
|
|
7264
|
+
background-color: var(--qti-bg-active);
|
|
7265
|
+
}
|
|
7266
|
+
|
|
7267
|
+
/* Apply .order for a small circular button */
|
|
7268
|
+
|
|
7269
|
+
.order {
|
|
7270
|
+
|
|
7271
|
+
display: grid;
|
|
7272
|
+
place-content: center;
|
|
7273
|
+
|
|
7274
|
+
/* background-color: var(--qti-bg-active); */
|
|
7275
|
+
border-radius: 100%;
|
|
7276
|
+
width: var(--qti-order-size);
|
|
7277
|
+
height: var(--qti-order-size);
|
|
7278
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
7279
|
+
outline: none;
|
|
7280
|
+
}
|
|
7281
|
+
|
|
7282
|
+
/* Apply .check-size for radio and checkbox size */
|
|
7283
|
+
|
|
7284
|
+
.check-size {
|
|
7285
|
+
width: calc(var(--qti-form-size) - 6px);
|
|
7286
|
+
height: calc(var(--qti-form-size) - 6px);
|
|
7287
|
+
}
|
|
7288
|
+
|
|
7289
|
+
/* Apply .check for checkbox */
|
|
7290
|
+
|
|
7291
|
+
.check {
|
|
7292
|
+
gap: 0.5rem;
|
|
7293
|
+
border-radius: var(--qti-border-radius);
|
|
7294
|
+
padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
|
|
7295
|
+
outline: none;
|
|
7296
|
+
cursor: pointer;
|
|
7297
|
+
}
|
|
7298
|
+
|
|
7299
|
+
/* Apply .check-radio for outer circle of the radio buttons */
|
|
7300
|
+
|
|
7301
|
+
.check-radio {
|
|
7302
|
+
|
|
7303
|
+
border-radius: 100%;
|
|
7304
|
+
|
|
7305
|
+
display: grid;
|
|
7306
|
+
|
|
7307
|
+
place-content: center;
|
|
7308
|
+
|
|
7309
|
+
width: var(--qti-form-size);
|
|
7310
|
+
|
|
7311
|
+
height: var(--qti-form-size);
|
|
7312
|
+
|
|
7313
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
7314
|
+
|
|
7315
|
+
outline: none;
|
|
7316
|
+
}
|
|
7317
|
+
|
|
7318
|
+
/* Apply .check-radio-checked for the inner checked radio */
|
|
7319
|
+
|
|
7320
|
+
.check-radio-checked {
|
|
7321
|
+
background-color: var(--qti-border-active);
|
|
7322
|
+
border-radius: 100%;
|
|
7323
|
+
}
|
|
7324
|
+
|
|
7325
|
+
/* Apply .check-checkbox for outer square of the checkbox */
|
|
7326
|
+
|
|
7327
|
+
.check-checkbox {
|
|
7328
|
+
|
|
7329
|
+
display: flex;
|
|
7330
|
+
place-items: center;
|
|
7331
|
+
border-radius: var(--qti-border-radius);
|
|
7332
|
+
display: grid;
|
|
7333
|
+
place-content: center;
|
|
7334
|
+
width: var(--qti-form-size);
|
|
7335
|
+
height: var(--qti-form-size);
|
|
7336
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
7337
|
+
outline: none;
|
|
7338
|
+
}
|
|
7339
|
+
|
|
7340
|
+
/* Apply .check-checkbox-checked for the inner checkmark */
|
|
7341
|
+
|
|
7342
|
+
.check-checkbox-checked {
|
|
7343
|
+
background-color: var(--qti-border-active);
|
|
7344
|
+
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
|
|
7345
|
+
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
|
|
7346
|
+
}
|
|
7347
|
+
|
|
7348
|
+
/* Apply .hov for hover state */
|
|
7349
|
+
|
|
7350
|
+
.hov {
|
|
7351
|
+
background-color: var(--qti-hover-bg);
|
|
7352
|
+
}
|
|
7353
|
+
|
|
7354
|
+
/* Apply .foc for focus state */
|
|
7355
|
+
|
|
7356
|
+
.foc {
|
|
7357
|
+
box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
|
|
7358
|
+
}
|
|
7359
|
+
|
|
7360
|
+
/* Apply .act for active state */
|
|
7361
|
+
|
|
7362
|
+
.act {
|
|
7363
|
+
border-color: var(--qti-border-active);
|
|
7364
|
+
background-color: var(--qti-bg-active);
|
|
7365
|
+
}
|
|
7366
|
+
|
|
7367
|
+
.act-bg {
|
|
7368
|
+
background-color: var(--qti-bg-active);
|
|
7369
|
+
}
|
|
7370
|
+
|
|
7371
|
+
.act-bor {
|
|
7372
|
+
border-color: var(--qti-border-active);
|
|
7373
|
+
}
|
|
7374
|
+
|
|
7375
|
+
/* Apply .rdo for readonly state */
|
|
7376
|
+
|
|
7377
|
+
.rdo {
|
|
7378
|
+
cursor: pointer;
|
|
7379
|
+
background-color: var(--qti-bg);
|
|
7380
|
+
outline: 0;
|
|
7381
|
+
border: none;
|
|
7382
|
+
}
|
|
7383
|
+
|
|
7384
|
+
/* Apply .dis for disabled state */
|
|
7385
|
+
|
|
7386
|
+
.dis {
|
|
7387
|
+
cursor: not-allowed;
|
|
7388
|
+
background-color: var(--qti-disabled-bg);
|
|
7389
|
+
color: var(--qti-disabled-color);
|
|
7390
|
+
border-color: var(--qti-border-color);
|
|
7391
|
+
outline: 4px solid var(--qti-disabled-bg);
|
|
7392
|
+
}
|
|
7393
|
+
|
|
7394
|
+
/* base */
|
|
7395
|
+
|
|
7396
|
+
/* ============================
|
|
7397
|
+
QTI 3 shared css
|
|
7398
|
+
1. Display
|
|
7399
|
+
2. Special Flex styles
|
|
7400
|
+
3. Margin
|
|
7401
|
+
4. Padding
|
|
7402
|
+
5. Horizontal Alignment styles
|
|
7403
|
+
6. Vertical Alignment styles
|
|
7404
|
+
7. Height
|
|
7405
|
+
8. Width
|
|
7406
|
+
9. Text-Indent
|
|
7407
|
+
10. List Style
|
|
7408
|
+
11. Layout
|
|
7409
|
+
12. Other QTI 3 presentation utilities
|
|
7410
|
+
============================ */
|
|
7411
|
+
|
|
7412
|
+
/* ==========
|
|
7413
|
+
Display css
|
|
7414
|
+
=========== */
|
|
7415
|
+
|
|
7416
|
+
.qti-display-inline {
|
|
7417
|
+
display: inline;
|
|
7418
|
+
}
|
|
7419
|
+
|
|
7420
|
+
.qti-display-inline-block {
|
|
7421
|
+
display: inline-block;
|
|
7422
|
+
}
|
|
7423
|
+
|
|
7424
|
+
.qti-display-block {
|
|
7425
|
+
display: block;
|
|
7426
|
+
}
|
|
7427
|
+
|
|
7428
|
+
.qti-display-flex {
|
|
7429
|
+
display: flexbox;
|
|
7430
|
+
display: flex;
|
|
7431
|
+
}
|
|
7432
|
+
|
|
7433
|
+
.qti-display-inline-flex {
|
|
7434
|
+
display: inline-flex;
|
|
7435
|
+
}
|
|
7436
|
+
|
|
7437
|
+
.qti-display-grid {
|
|
7438
|
+
display: grid;
|
|
7439
|
+
}
|
|
7440
|
+
|
|
7441
|
+
.qti-display-inline-grid {
|
|
7442
|
+
display: inline-grid;
|
|
7443
|
+
}
|
|
7444
|
+
|
|
7445
|
+
.qti-display-table {
|
|
7446
|
+
display: table;
|
|
7447
|
+
}
|
|
7448
|
+
|
|
7449
|
+
.qti-display-table-cell {
|
|
7450
|
+
display: table-cell;
|
|
7451
|
+
}
|
|
7452
|
+
|
|
7453
|
+
.qti-display-table-row {
|
|
7454
|
+
display: table-row;
|
|
7455
|
+
}
|
|
7456
|
+
|
|
7457
|
+
.qti-display-list-item {
|
|
7458
|
+
display: list-item;
|
|
7459
|
+
}
|
|
7460
|
+
|
|
7461
|
+
.qti-display-inherit {
|
|
7462
|
+
display: inherit;
|
|
7463
|
+
}
|
|
7464
|
+
|
|
7465
|
+
/*
|
|
7466
|
+
* hidden to screen readers and sighted
|
|
7467
|
+
*/
|
|
7468
|
+
|
|
7469
|
+
.qti-hidden {
|
|
7470
|
+
display: none;
|
|
7471
|
+
}
|
|
7472
|
+
|
|
7473
|
+
/*
|
|
7474
|
+
* visible to screen readers, hidden to sighted
|
|
7475
|
+
*/
|
|
7476
|
+
|
|
7477
|
+
.qti-visually-hidden {
|
|
7478
|
+
position: fixed !important;
|
|
7479
|
+
overflow: hidden;
|
|
7480
|
+
clip: rect(1px 1px 1px 1px);
|
|
7481
|
+
height: 1px;
|
|
7482
|
+
width: 1px;
|
|
7483
|
+
border: 0;
|
|
7484
|
+
margin: -1px;
|
|
7485
|
+
}
|
|
7486
|
+
|
|
7487
|
+
/* =============================
|
|
7488
|
+
Special flex styles
|
|
7489
|
+
============================= */
|
|
7490
|
+
|
|
7491
|
+
.qti-flex-direction-column {
|
|
7492
|
+
flex-direction: column;
|
|
7493
|
+
}
|
|
7494
|
+
|
|
7495
|
+
.qti-flex-direction-row {
|
|
7496
|
+
flex-direction: row;
|
|
7497
|
+
}
|
|
7498
|
+
|
|
7499
|
+
.qti-flex-grow-1 {
|
|
7500
|
+
flex-grow: 1;
|
|
7501
|
+
}
|
|
7502
|
+
|
|
7503
|
+
.qti-flex-grow-0 {
|
|
7504
|
+
flex-grow: 0;
|
|
7505
|
+
}
|
|
7506
|
+
|
|
7507
|
+
/* =========
|
|
7508
|
+
Margin css
|
|
7509
|
+
========== */
|
|
7510
|
+
|
|
7511
|
+
/**
|
|
7512
|
+
* For margin Top and Bottom and Left and Right
|
|
7513
|
+
*/
|
|
7514
|
+
|
|
7515
|
+
.qti-margin-0 {
|
|
7516
|
+
margin: 0 !important;
|
|
7517
|
+
}
|
|
7518
|
+
|
|
7519
|
+
.qti-margin-1 {
|
|
7520
|
+
margin: 0.25rem !important;
|
|
7521
|
+
}
|
|
7522
|
+
|
|
7523
|
+
.qti-margin-2 {
|
|
7524
|
+
margin: 0.5rem !important;
|
|
7525
|
+
}
|
|
7526
|
+
|
|
7527
|
+
.qti-margin-3 {
|
|
7528
|
+
margin: 1rem !important;
|
|
7529
|
+
}
|
|
7530
|
+
|
|
7531
|
+
.qti-margin-4 {
|
|
7532
|
+
margin: 1.5rem !important;
|
|
7533
|
+
}
|
|
7534
|
+
|
|
7535
|
+
.qti-margin-5 {
|
|
7536
|
+
margin: 3rem !important;
|
|
7537
|
+
}
|
|
7538
|
+
|
|
7539
|
+
.qti-margin-auto {
|
|
7540
|
+
margin: auto !important;
|
|
7541
|
+
}
|
|
7542
|
+
|
|
7543
|
+
/*
|
|
7544
|
+
For margin Left and Right
|
|
7545
|
+
*/
|
|
7546
|
+
|
|
7547
|
+
.qti-margin-x-0 {
|
|
7548
|
+
margin-right: 0 !important;
|
|
7549
|
+
margin-left: 0 !important;
|
|
7550
|
+
}
|
|
7551
|
+
|
|
7552
|
+
.qti-margin-x-1 {
|
|
7553
|
+
margin-right: 0.25rem !important;
|
|
7554
|
+
margin-left: 0.25rem !important;
|
|
7555
|
+
}
|
|
7556
|
+
|
|
7557
|
+
.qti-margin-x-2 {
|
|
7558
|
+
margin-right: 0.5rem !important;
|
|
7559
|
+
margin-left: 0.5rem !important;
|
|
7560
|
+
}
|
|
7561
|
+
|
|
7562
|
+
.qti-margin-x-3 {
|
|
7563
|
+
margin-right: 1rem !important;
|
|
7564
|
+
margin-left: 1rem !important;
|
|
7565
|
+
}
|
|
7566
|
+
|
|
7567
|
+
.qti-margin-x-4 {
|
|
7568
|
+
margin-right: 1.5rem !important;
|
|
7569
|
+
margin-left: 1.5rem !important;
|
|
7570
|
+
}
|
|
7571
|
+
|
|
7572
|
+
.qti-margin-x-5 {
|
|
7573
|
+
margin-right: 3rem !important;
|
|
7574
|
+
margin-left: 3rem !important;
|
|
7575
|
+
}
|
|
7576
|
+
|
|
7577
|
+
.qti-margin-x-auto {
|
|
7578
|
+
margin-right: auto !important;
|
|
7579
|
+
margin-left: auto !important;
|
|
7580
|
+
}
|
|
7581
|
+
|
|
7582
|
+
/*
|
|
7583
|
+
For margin Top and Bottom
|
|
7584
|
+
*/
|
|
7585
|
+
|
|
7586
|
+
.qti-margin-y-0 {
|
|
7587
|
+
margin-top: 0 !important;
|
|
7588
|
+
margin-bottom: 0 !important;
|
|
7589
|
+
}
|
|
7590
|
+
|
|
7591
|
+
.qti-margin-y-1 {
|
|
7592
|
+
margin-top: 0.25rem !important;
|
|
7593
|
+
margin-bottom: 0.25rem !important;
|
|
7594
|
+
}
|
|
7595
|
+
|
|
7596
|
+
.qti-margin-y-2 {
|
|
7597
|
+
margin-top: 0.5rem !important;
|
|
7598
|
+
margin-bottom: 0.5rem !important;
|
|
7599
|
+
}
|
|
7600
|
+
|
|
7601
|
+
.qti-margin-y-3 {
|
|
7602
|
+
margin-top: 1rem !important;
|
|
7603
|
+
margin-bottom: 1rem !important;
|
|
7604
|
+
}
|
|
7605
|
+
|
|
7606
|
+
.qti-margin-y-4 {
|
|
7607
|
+
margin-top: 1.5rem !important;
|
|
7608
|
+
margin-bottom: 1.5rem !important;
|
|
7609
|
+
}
|
|
7610
|
+
|
|
7611
|
+
.qti-margin-y-5 {
|
|
7612
|
+
margin-top: 3rem !important;
|
|
7613
|
+
margin-bottom: 3rem !important;
|
|
7614
|
+
}
|
|
7615
|
+
|
|
7616
|
+
.qti-margin-y-auto {
|
|
7617
|
+
margin-top: auto !important;
|
|
7618
|
+
margin-bottom: auto !important;
|
|
7619
|
+
}
|
|
7620
|
+
|
|
7621
|
+
/*
|
|
7622
|
+
For margin Top
|
|
7623
|
+
*/
|
|
7624
|
+
|
|
7625
|
+
.qti-margin-t-0 {
|
|
7626
|
+
margin-top: 0 !important;
|
|
7627
|
+
}
|
|
7628
|
+
|
|
7629
|
+
.qti-margin-t-1 {
|
|
7630
|
+
margin-top: 0.25rem !important;
|
|
7631
|
+
}
|
|
7632
|
+
|
|
7633
|
+
.qti-margin-t-2 {
|
|
7634
|
+
margin-top: 0.5rem !important;
|
|
7635
|
+
}
|
|
7636
|
+
|
|
7637
|
+
.qti-margin-t-3 {
|
|
7638
|
+
margin-top: 1rem !important;
|
|
7639
|
+
}
|
|
7640
|
+
|
|
7641
|
+
.qti-margin-t-4 {
|
|
7642
|
+
margin-top: 1.5rem !important;
|
|
7643
|
+
}
|
|
7644
|
+
|
|
7645
|
+
.qti-margin-t-5 {
|
|
7646
|
+
margin-top: 3rem !important;
|
|
7647
|
+
}
|
|
7648
|
+
|
|
7649
|
+
.qti-margin-t-auto {
|
|
7650
|
+
margin-top: auto !important;
|
|
7651
|
+
}
|
|
7652
|
+
|
|
7653
|
+
/*
|
|
7654
|
+
For margin Bottom
|
|
7655
|
+
*/
|
|
7656
|
+
|
|
7657
|
+
.qti-margin-b-0 {
|
|
7658
|
+
margin-bottom: 0 !important;
|
|
7659
|
+
}
|
|
7660
|
+
|
|
7661
|
+
.qti-margin-b-1 {
|
|
7662
|
+
margin-bottom: 0.25rem !important;
|
|
7663
|
+
}
|
|
7664
|
+
|
|
7665
|
+
.qti-margin-b-2 {
|
|
7666
|
+
margin-bottom: 0.5rem !important;
|
|
7667
|
+
}
|
|
7668
|
+
|
|
7669
|
+
.qti-margin-b-3 {
|
|
7670
|
+
margin-bottom: 1rem !important;
|
|
7671
|
+
}
|
|
7672
|
+
|
|
7673
|
+
.qti-margin-b-4 {
|
|
7674
|
+
margin-bottom: 1.5rem !important;
|
|
7675
|
+
}
|
|
7676
|
+
|
|
7677
|
+
.qti-margin-b-5 {
|
|
7678
|
+
margin-bottom: 3rem !important;
|
|
7679
|
+
}
|
|
7680
|
+
|
|
7681
|
+
.qti-margin-b-auto {
|
|
7682
|
+
margin-bottom: auto !important;
|
|
7683
|
+
}
|
|
7684
|
+
|
|
7685
|
+
/*
|
|
7686
|
+
For margin Start LTR
|
|
7687
|
+
*/
|
|
7688
|
+
|
|
7689
|
+
.qti-margin-s-0 {
|
|
7690
|
+
margin-left: 0 !important;
|
|
7691
|
+
}
|
|
7692
|
+
|
|
7693
|
+
.qti-margin-s-1 {
|
|
7694
|
+
margin-left: 0.25rem !important;
|
|
7695
|
+
}
|
|
7696
|
+
|
|
7697
|
+
.qti-margin-s-2 {
|
|
7698
|
+
margin-left: 0.5rem !important;
|
|
7699
|
+
}
|
|
7700
|
+
|
|
7701
|
+
.qti-margin-s-3 {
|
|
7702
|
+
margin-left: 1rem !important;
|
|
7703
|
+
}
|
|
7704
|
+
|
|
7705
|
+
.qti-margin-s-4 {
|
|
7706
|
+
margin-left: 1.5rem !important;
|
|
7707
|
+
}
|
|
7708
|
+
|
|
7709
|
+
.qti-margin-s-5 {
|
|
7710
|
+
margin-left: 3rem !important;
|
|
7711
|
+
}
|
|
7712
|
+
|
|
7713
|
+
.qti-margin-s-auto {
|
|
7714
|
+
margin-left: auto !important;
|
|
7715
|
+
}
|
|
7716
|
+
|
|
7717
|
+
/*
|
|
7718
|
+
For margin End LTR
|
|
7719
|
+
*/
|
|
7720
|
+
|
|
7721
|
+
.qti-margin-e-0 {
|
|
7722
|
+
margin-right: 0 !important;
|
|
7723
|
+
}
|
|
7724
|
+
|
|
7725
|
+
.qti-margin-e-1 {
|
|
7726
|
+
margin-right: 0.25rem !important;
|
|
7727
|
+
}
|
|
7728
|
+
|
|
7729
|
+
.qti-margin-e-2 {
|
|
7730
|
+
margin-right: 0.5rem !important;
|
|
7731
|
+
}
|
|
7732
|
+
|
|
7733
|
+
.qti-margin-e-3 {
|
|
7734
|
+
margin-right: 1rem !important;
|
|
7735
|
+
}
|
|
7736
|
+
|
|
7737
|
+
.qti-margin-e-4 {
|
|
7738
|
+
margin-right: 1.5rem !important;
|
|
7739
|
+
}
|
|
7740
|
+
|
|
7741
|
+
.qti-margin-e-5 {
|
|
7742
|
+
margin-right: 3rem !important;
|
|
7743
|
+
}
|
|
7744
|
+
|
|
7745
|
+
.qti-margin-e-auto {
|
|
7746
|
+
margin-right: auto !important;
|
|
7747
|
+
}
|
|
7748
|
+
|
|
7749
|
+
/* =========
|
|
7750
|
+
Padding css
|
|
7751
|
+
========== */
|
|
7752
|
+
|
|
7753
|
+
/*
|
|
7754
|
+
For padding Top and Bottom and Left and Right
|
|
7755
|
+
*/
|
|
7756
|
+
|
|
7757
|
+
.qti-padding-0 {
|
|
7758
|
+
padding: 0 !important;
|
|
7759
|
+
}
|
|
7760
|
+
|
|
7761
|
+
.qti-padding-1 {
|
|
7762
|
+
padding: 0.25rem !important;
|
|
7763
|
+
}
|
|
7764
|
+
|
|
7765
|
+
.qti-padding-2 {
|
|
7766
|
+
padding: 0.5rem !important;
|
|
7767
|
+
}
|
|
7768
|
+
|
|
7769
|
+
.qti-padding-3 {
|
|
7770
|
+
padding: 1rem !important;
|
|
7771
|
+
}
|
|
7772
|
+
|
|
7773
|
+
.qti-padding-4 {
|
|
7774
|
+
padding: 1.5rem !important;
|
|
7775
|
+
}
|
|
7776
|
+
|
|
7777
|
+
.qti-padding-5 {
|
|
7778
|
+
padding: 3rem !important;
|
|
7779
|
+
}
|
|
7780
|
+
|
|
7781
|
+
/*
|
|
7782
|
+
For padding Left and Right
|
|
7783
|
+
*/
|
|
7784
|
+
|
|
7785
|
+
.qti-padding-x-0 {
|
|
7786
|
+
padding-right: 0 !important;
|
|
7787
|
+
padding-left: 0 !important;
|
|
7788
|
+
}
|
|
7789
|
+
|
|
7790
|
+
.qti-padding-x-1 {
|
|
7791
|
+
padding-right: 0.25rem !important;
|
|
7792
|
+
padding-left: 0.25rem !important;
|
|
7793
|
+
}
|
|
7794
|
+
|
|
7795
|
+
.qti-padding-x-2 {
|
|
7796
|
+
padding-right: 0.5rem !important;
|
|
7797
|
+
padding-left: 0.5rem !important;
|
|
7798
|
+
}
|
|
7799
|
+
|
|
7800
|
+
.qti-padding-x-3 {
|
|
7801
|
+
padding-right: 1rem !important;
|
|
7802
|
+
padding-left: 1rem !important;
|
|
7803
|
+
}
|
|
7804
|
+
|
|
7805
|
+
.qti-padding-x-4 {
|
|
7806
|
+
padding-right: 1.5rem !important;
|
|
7807
|
+
padding-left: 1.5rem !important;
|
|
7808
|
+
}
|
|
7809
|
+
|
|
7810
|
+
.qti-padding-x-5 {
|
|
7811
|
+
padding-right: 3rem !important;
|
|
7812
|
+
padding-left: 3rem !important;
|
|
7813
|
+
}
|
|
7814
|
+
|
|
7815
|
+
/*
|
|
7816
|
+
For padding Top and Bottom
|
|
7817
|
+
*/
|
|
7818
|
+
|
|
7819
|
+
.qti-padding-y-0 {
|
|
7820
|
+
padding-top: 0 !important;
|
|
7821
|
+
padding-bottom: 0 !important;
|
|
7822
|
+
}
|
|
7823
|
+
|
|
7824
|
+
.qti-padding-y-1 {
|
|
7825
|
+
padding-top: 0.25rem !important;
|
|
7826
|
+
padding-bottom: 0.25rem !important;
|
|
7827
|
+
}
|
|
7828
|
+
|
|
7829
|
+
.qti-padding-y-2 {
|
|
7830
|
+
padding-top: 0.5rem !important;
|
|
7831
|
+
padding-bottom: 0.5rem !important;
|
|
7832
|
+
}
|
|
7833
|
+
|
|
7834
|
+
.qti-padding-y-3 {
|
|
7835
|
+
padding-top: 1rem !important;
|
|
7836
|
+
padding-bottom: 1rem !important;
|
|
7837
|
+
}
|
|
7838
|
+
|
|
7839
|
+
.qti-padding-y-4 {
|
|
7840
|
+
padding-top: 1.5rem !important;
|
|
7841
|
+
padding-bottom: 1.5rem !important;
|
|
7842
|
+
}
|
|
7843
|
+
|
|
7844
|
+
.qti-padding-y-5 {
|
|
7845
|
+
padding-top: 3rem !important;
|
|
7846
|
+
padding-bottom: 3rem !important;
|
|
7847
|
+
}
|
|
7848
|
+
|
|
7849
|
+
/*
|
|
7850
|
+
For padding Top
|
|
7851
|
+
*/
|
|
7852
|
+
|
|
7853
|
+
.qti-padding-t-0 {
|
|
7854
|
+
padding-top: 0 !important;
|
|
7855
|
+
}
|
|
7856
|
+
|
|
7857
|
+
.qti-padding-t-1 {
|
|
7858
|
+
padding-top: 0.25rem !important;
|
|
7859
|
+
}
|
|
7860
|
+
|
|
7861
|
+
.qti-padding-t-2 {
|
|
7862
|
+
padding-top: 0.5rem !important;
|
|
7863
|
+
}
|
|
7864
|
+
|
|
7865
|
+
.qti-padding-t-3 {
|
|
7866
|
+
padding-top: 1rem !important;
|
|
7867
|
+
}
|
|
7868
|
+
|
|
7869
|
+
.qti-padding-t-4 {
|
|
7870
|
+
padding-top: 1.5rem !important;
|
|
7871
|
+
}
|
|
7872
|
+
|
|
7873
|
+
.qti-padding-t-5 {
|
|
7874
|
+
padding-top: 3rem !important;
|
|
7875
|
+
}
|
|
7876
|
+
|
|
7877
|
+
/*
|
|
7878
|
+
For padding Bottom
|
|
7879
|
+
*/
|
|
7880
|
+
|
|
7881
|
+
.qti-padding-b-0 {
|
|
7882
|
+
padding-bottom: 0 !important;
|
|
7883
|
+
}
|
|
7884
|
+
|
|
7885
|
+
.qti-padding-b-1 {
|
|
7886
|
+
padding-bottom: 0.25rem !important;
|
|
7887
|
+
}
|
|
7888
|
+
|
|
7889
|
+
.qti-padding-b-2 {
|
|
7890
|
+
padding-bottom: 0.5rem !important;
|
|
7891
|
+
}
|
|
7892
|
+
|
|
7893
|
+
.qti-padding-b-3 {
|
|
7894
|
+
padding-bottom: 1rem !important;
|
|
7895
|
+
}
|
|
7896
|
+
|
|
7897
|
+
.qti-padding-b-4 {
|
|
7898
|
+
padding-bottom: 1.5rem !important;
|
|
7899
|
+
}
|
|
7900
|
+
|
|
7901
|
+
.qti-padding-b-5 {
|
|
7902
|
+
padding-bottom: 3rem !important;
|
|
7903
|
+
}
|
|
7904
|
+
|
|
7905
|
+
/*
|
|
7906
|
+
For padding Start LTR
|
|
7907
|
+
*/
|
|
7908
|
+
|
|
7909
|
+
.qti-padding-s-0 {
|
|
7910
|
+
padding-left: 0 !important;
|
|
7911
|
+
}
|
|
7912
|
+
|
|
7913
|
+
.qti-padding-s-1 {
|
|
7914
|
+
padding-left: 0.25rem !important;
|
|
7915
|
+
}
|
|
7916
|
+
|
|
7917
|
+
.qti-padding-s-2 {
|
|
7918
|
+
padding-left: 0.5rem !important;
|
|
7919
|
+
}
|
|
7920
|
+
|
|
7921
|
+
.qti-padding-s-3 {
|
|
7922
|
+
padding-left: 1rem !important;
|
|
7923
|
+
}
|
|
7924
|
+
|
|
7925
|
+
.qti-padding-s-4 {
|
|
7926
|
+
padding-left: 1.5rem !important;
|
|
7927
|
+
}
|
|
7928
|
+
|
|
7929
|
+
.qti-padding-s-5 {
|
|
7930
|
+
padding-left: 3rem !important;
|
|
7931
|
+
}
|
|
7932
|
+
|
|
7933
|
+
/*
|
|
7934
|
+
For padding End LTR
|
|
7935
|
+
*/
|
|
7936
|
+
|
|
7937
|
+
.qti-padding-e-0 {
|
|
7938
|
+
padding-right: 0 !important;
|
|
7939
|
+
}
|
|
7940
|
+
|
|
7941
|
+
.qti-padding-e-1 {
|
|
7942
|
+
padding-right: 0.25rem !important;
|
|
7943
|
+
}
|
|
7944
|
+
|
|
7945
|
+
.qti-padding-e-2 {
|
|
7946
|
+
padding-right: 0.5rem !important;
|
|
7947
|
+
}
|
|
7948
|
+
|
|
7949
|
+
.qti-padding-e-3 {
|
|
7950
|
+
padding-right: 1rem !important;
|
|
7951
|
+
}
|
|
7952
|
+
|
|
7953
|
+
.qti-padding-e-4 {
|
|
7954
|
+
padding-right: 1.5rem !important;
|
|
7955
|
+
}
|
|
7956
|
+
|
|
7957
|
+
.qti-padding-e-5 {
|
|
7958
|
+
padding-right: 3rem !important;
|
|
7959
|
+
}
|
|
7960
|
+
|
|
7961
|
+
/* ====================
|
|
7962
|
+
Horizontal alignment
|
|
7963
|
+
==================== */
|
|
7964
|
+
|
|
7965
|
+
.qti-align-left {
|
|
7966
|
+
text-align: left;
|
|
7967
|
+
}
|
|
7968
|
+
|
|
7969
|
+
.qti-align-center {
|
|
7970
|
+
text-align: center;
|
|
7971
|
+
}
|
|
7972
|
+
|
|
7973
|
+
.qti-align-right {
|
|
7974
|
+
text-align: right;
|
|
7975
|
+
}
|
|
7976
|
+
|
|
7977
|
+
/* ==================
|
|
7978
|
+
Vertical alignment
|
|
7979
|
+
================== */
|
|
7980
|
+
|
|
7981
|
+
.qti-valign-top {
|
|
7982
|
+
vertical-align: top;
|
|
7983
|
+
}
|
|
7984
|
+
|
|
7985
|
+
.qti-valign-middle {
|
|
7986
|
+
vertical-align: middle;
|
|
7987
|
+
}
|
|
7988
|
+
|
|
7989
|
+
.qti-valign-baseline {
|
|
7990
|
+
vertical-align: baseline;
|
|
7991
|
+
}
|
|
7992
|
+
|
|
7993
|
+
.qti-valign-bottom {
|
|
7994
|
+
vertical-align: bottom;
|
|
7995
|
+
}
|
|
7996
|
+
|
|
7997
|
+
/* =============
|
|
7998
|
+
Height styles
|
|
7999
|
+
============= */
|
|
8000
|
+
|
|
8001
|
+
.qti-height-0 {
|
|
8002
|
+
height: 0;
|
|
8003
|
+
}
|
|
8004
|
+
|
|
8005
|
+
.qti-height-px {
|
|
8006
|
+
height: 1px;
|
|
8007
|
+
}
|
|
8008
|
+
|
|
8009
|
+
.qti-height-0p5 {
|
|
8010
|
+
height: 0.125rem;
|
|
8011
|
+
}
|
|
8012
|
+
|
|
8013
|
+
.qti-height-1 {
|
|
8014
|
+
height: 0.25rem;
|
|
8015
|
+
}
|
|
8016
|
+
|
|
8017
|
+
.qti-height-1p5 {
|
|
8018
|
+
height: 0.375rem;
|
|
8019
|
+
}
|
|
8020
|
+
|
|
8021
|
+
.qti-height-2 {
|
|
8022
|
+
height: 0.5rem;
|
|
8023
|
+
}
|
|
8024
|
+
|
|
8025
|
+
.qti-height-2p5 {
|
|
8026
|
+
height: 0.625rem;
|
|
8027
|
+
}
|
|
8028
|
+
|
|
8029
|
+
.qti-height-3 {
|
|
8030
|
+
height: 0.75rem;
|
|
8031
|
+
}
|
|
8032
|
+
|
|
8033
|
+
.qti-height-3p5 {
|
|
8034
|
+
height: 0.875rem;
|
|
8035
|
+
}
|
|
8036
|
+
|
|
8037
|
+
.qti-height-4 {
|
|
8038
|
+
height: 1rem;
|
|
8039
|
+
}
|
|
8040
|
+
|
|
8041
|
+
.qti-height-5 {
|
|
8042
|
+
height: 1.25rem;
|
|
8043
|
+
}
|
|
8044
|
+
|
|
8045
|
+
.qti-height-6 {
|
|
8046
|
+
height: 1.5rem;
|
|
8047
|
+
}
|
|
8048
|
+
|
|
8049
|
+
.qti-height-7 {
|
|
8050
|
+
height: 1.75rem;
|
|
8051
|
+
}
|
|
8052
|
+
|
|
8053
|
+
.qti-height-8 {
|
|
8054
|
+
height: 2rem;
|
|
8055
|
+
}
|
|
8056
|
+
|
|
8057
|
+
.qti-height-9 {
|
|
8058
|
+
height: 2.25rem;
|
|
8059
|
+
}
|
|
8060
|
+
|
|
8061
|
+
.qti-height-10 {
|
|
8062
|
+
height: 2.5rem;
|
|
8063
|
+
}
|
|
8064
|
+
|
|
8065
|
+
.qti-height-11 {
|
|
8066
|
+
height: 2.75rem;
|
|
8067
|
+
}
|
|
8068
|
+
|
|
8069
|
+
.qti-height-12 {
|
|
8070
|
+
height: 3rem;
|
|
8071
|
+
}
|
|
8072
|
+
|
|
8073
|
+
.qti-height-14 {
|
|
8074
|
+
height: 3.5rem;
|
|
8075
|
+
}
|
|
8076
|
+
|
|
8077
|
+
.qti-height-16 {
|
|
8078
|
+
height: 4rem;
|
|
8079
|
+
}
|
|
8080
|
+
|
|
8081
|
+
.qti-height-20 {
|
|
8082
|
+
height: 5rem;
|
|
8083
|
+
}
|
|
8084
|
+
|
|
8085
|
+
.qti-height-24 {
|
|
8086
|
+
height: 6rem;
|
|
8087
|
+
}
|
|
8088
|
+
|
|
8089
|
+
.qti-height-28 {
|
|
8090
|
+
height: 7rem;
|
|
8091
|
+
}
|
|
8092
|
+
|
|
8093
|
+
.qti-height-32 {
|
|
8094
|
+
height: 8rem;
|
|
8095
|
+
}
|
|
8096
|
+
|
|
8097
|
+
.qti-height-36 {
|
|
8098
|
+
height: 9rem;
|
|
8099
|
+
}
|
|
8100
|
+
|
|
8101
|
+
.qti-height-40 {
|
|
8102
|
+
height: 10rem;
|
|
8103
|
+
}
|
|
8104
|
+
|
|
8105
|
+
.qti-height-44 {
|
|
8106
|
+
height: 11rem;
|
|
8107
|
+
}
|
|
8108
|
+
|
|
8109
|
+
.qti-height-48 {
|
|
8110
|
+
height: 12rem;
|
|
8111
|
+
}
|
|
8112
|
+
|
|
8113
|
+
.qti-height-52 {
|
|
8114
|
+
height: 13rem;
|
|
8115
|
+
}
|
|
8116
|
+
|
|
8117
|
+
.qti-height-56 {
|
|
8118
|
+
height: 14rem;
|
|
8119
|
+
}
|
|
8120
|
+
|
|
8121
|
+
.qti-height-60 {
|
|
8122
|
+
height: 15rem;
|
|
8123
|
+
}
|
|
8124
|
+
|
|
8125
|
+
.qti-height-64 {
|
|
8126
|
+
height: 16rem;
|
|
8127
|
+
}
|
|
8128
|
+
|
|
8129
|
+
.qti-height-72 {
|
|
8130
|
+
height: 18rem;
|
|
8131
|
+
}
|
|
8132
|
+
|
|
8133
|
+
.qti-height-80 {
|
|
8134
|
+
height: 20rem;
|
|
8135
|
+
}
|
|
8136
|
+
|
|
8137
|
+
.qti-height-96 {
|
|
8138
|
+
height: 24rem;
|
|
8139
|
+
}
|
|
8140
|
+
|
|
8141
|
+
.qti-height-1-2 {
|
|
8142
|
+
height: 50%;
|
|
8143
|
+
}
|
|
8144
|
+
|
|
8145
|
+
.qti-height-1-3 {
|
|
8146
|
+
height: 33.3333%;
|
|
8147
|
+
}
|
|
8148
|
+
|
|
8149
|
+
.qti-height-2-3 {
|
|
8150
|
+
height: 66.6667%;
|
|
8151
|
+
}
|
|
8152
|
+
|
|
8153
|
+
.qti-height-1-4 {
|
|
8154
|
+
height: 25%;
|
|
8155
|
+
}
|
|
8156
|
+
|
|
8157
|
+
.qti-height-2-4 {
|
|
8158
|
+
height: 50%;
|
|
8159
|
+
}
|
|
8160
|
+
|
|
8161
|
+
.qti-height-3-4 {
|
|
8162
|
+
height: 75%;
|
|
8163
|
+
}
|
|
8164
|
+
|
|
8165
|
+
.qti-height-1-5 {
|
|
8166
|
+
height: 20%;
|
|
8167
|
+
}
|
|
8168
|
+
|
|
8169
|
+
.qti-height-2-5 {
|
|
8170
|
+
height: 40%;
|
|
8171
|
+
}
|
|
8172
|
+
|
|
8173
|
+
.qti-height-3-5 {
|
|
8174
|
+
height: 60%;
|
|
8175
|
+
}
|
|
8176
|
+
|
|
8177
|
+
.qti-height-4-5 {
|
|
8178
|
+
height: 80%;
|
|
8179
|
+
}
|
|
8180
|
+
|
|
8181
|
+
.qti-height-1-6 {
|
|
8182
|
+
height: 16.6667%;
|
|
8183
|
+
}
|
|
8184
|
+
|
|
8185
|
+
.qti-height-2-6 {
|
|
8186
|
+
height: 33.3333%;
|
|
8187
|
+
}
|
|
8188
|
+
|
|
8189
|
+
.qti-height-3-6 {
|
|
8190
|
+
height: 50%;
|
|
8191
|
+
}
|
|
8192
|
+
|
|
8193
|
+
.qti-height-4-6 {
|
|
8194
|
+
height: 66.6667%;
|
|
8195
|
+
}
|
|
8196
|
+
|
|
8197
|
+
.qti-height-5-6 {
|
|
8198
|
+
height: 83.3333%;
|
|
8199
|
+
}
|
|
8200
|
+
|
|
8201
|
+
.qti-height-auto {
|
|
8202
|
+
height: auto;
|
|
8203
|
+
}
|
|
8204
|
+
|
|
8205
|
+
.qti-height-full {
|
|
8206
|
+
height: 100%;
|
|
8207
|
+
}
|
|
8208
|
+
|
|
8209
|
+
/* ============
|
|
8210
|
+
Width styles
|
|
8211
|
+
============ */
|
|
8212
|
+
|
|
8213
|
+
.qti-width-0 {
|
|
8214
|
+
width: 0;
|
|
8215
|
+
}
|
|
8216
|
+
|
|
8217
|
+
.qti-width-px {
|
|
8218
|
+
width: 1px;
|
|
8219
|
+
}
|
|
8220
|
+
|
|
8221
|
+
.qti-width-0p5 {
|
|
8222
|
+
width: 0.125rem;
|
|
8223
|
+
}
|
|
8224
|
+
|
|
8225
|
+
.qti-width-1 {
|
|
8226
|
+
width: 0.25rem;
|
|
8227
|
+
}
|
|
8228
|
+
|
|
8229
|
+
.qti-width-1p5 {
|
|
8230
|
+
width: 0.375rem;
|
|
8231
|
+
}
|
|
8232
|
+
|
|
8233
|
+
.qti-width-2 {
|
|
8234
|
+
width: 0.5rem;
|
|
8235
|
+
}
|
|
8236
|
+
|
|
8237
|
+
.qti-width-2p5 {
|
|
8238
|
+
width: 0.625rem;
|
|
8239
|
+
}
|
|
8240
|
+
|
|
8241
|
+
.qti-width-3 {
|
|
8242
|
+
width: 0.75rem;
|
|
8243
|
+
}
|
|
8244
|
+
|
|
8245
|
+
.qti-width-3p5 {
|
|
8246
|
+
width: 0.875rem;
|
|
8247
|
+
}
|
|
8248
|
+
|
|
8249
|
+
.qti-width-4 {
|
|
8250
|
+
width: 1rem;
|
|
8251
|
+
}
|
|
8252
|
+
|
|
8253
|
+
.qti-width-5 {
|
|
8254
|
+
width: 1.25rem;
|
|
8255
|
+
}
|
|
8256
|
+
|
|
8257
|
+
.qti-width-6 {
|
|
8258
|
+
width: 1.5rem;
|
|
8259
|
+
}
|
|
8260
|
+
|
|
8261
|
+
.qti-width-7 {
|
|
8262
|
+
width: 1.75rem;
|
|
8263
|
+
}
|
|
8264
|
+
|
|
8265
|
+
.qti-width-8 {
|
|
8266
|
+
width: 2rem;
|
|
8267
|
+
}
|
|
8268
|
+
|
|
8269
|
+
.qti-width-9 {
|
|
8270
|
+
width: 2.25rem;
|
|
8271
|
+
}
|
|
8272
|
+
|
|
8273
|
+
.qti-width-10 {
|
|
8274
|
+
width: 2.5rem;
|
|
8275
|
+
}
|
|
8276
|
+
|
|
8277
|
+
.qti-width-11 {
|
|
8278
|
+
width: 2.75rem;
|
|
8279
|
+
}
|
|
8280
|
+
|
|
8281
|
+
.qti-width-12 {
|
|
8282
|
+
width: 3rem;
|
|
8283
|
+
}
|
|
8284
|
+
|
|
8285
|
+
.qti-width-14 {
|
|
8286
|
+
width: 3.5rem;
|
|
8287
|
+
}
|
|
8288
|
+
|
|
8289
|
+
.qti-width-16 {
|
|
8290
|
+
width: 4rem;
|
|
8291
|
+
}
|
|
8292
|
+
|
|
8293
|
+
.qti-width-20 {
|
|
8294
|
+
width: 5rem;
|
|
8295
|
+
}
|
|
8296
|
+
|
|
8297
|
+
.qti-width-24 {
|
|
8298
|
+
width: 6rem;
|
|
8299
|
+
}
|
|
8300
|
+
|
|
8301
|
+
.qti-width-28 {
|
|
8302
|
+
width: 7rem;
|
|
8303
|
+
}
|
|
8304
|
+
|
|
8305
|
+
.qti-width-32 {
|
|
8306
|
+
width: 8rem;
|
|
8307
|
+
}
|
|
8308
|
+
|
|
8309
|
+
.qti-width-36 {
|
|
8310
|
+
width: 9rem;
|
|
8311
|
+
}
|
|
8312
|
+
|
|
8313
|
+
.qti-width-40 {
|
|
8314
|
+
width: 10rem;
|
|
8315
|
+
}
|
|
8316
|
+
|
|
8317
|
+
.qti-width-44 {
|
|
8318
|
+
width: 11rem;
|
|
8319
|
+
}
|
|
8320
|
+
|
|
8321
|
+
.qti-width-48 {
|
|
8322
|
+
width: 12rem;
|
|
8323
|
+
}
|
|
8324
|
+
|
|
8325
|
+
.qti-width-52 {
|
|
8326
|
+
width: 13rem;
|
|
8327
|
+
}
|
|
8328
|
+
|
|
8329
|
+
.qti-width-56 {
|
|
8330
|
+
width: 14rem;
|
|
8331
|
+
}
|
|
8332
|
+
|
|
8333
|
+
.qti-width-60 {
|
|
8334
|
+
width: 15rem;
|
|
8335
|
+
}
|
|
8336
|
+
|
|
8337
|
+
.qti-width-64 {
|
|
8338
|
+
width: 16rem;
|
|
8339
|
+
}
|
|
8340
|
+
|
|
8341
|
+
.qti-width-72 {
|
|
8342
|
+
width: 18rem;
|
|
8343
|
+
}
|
|
8344
|
+
|
|
8345
|
+
.qti-width-80 {
|
|
8346
|
+
width: 20rem;
|
|
8347
|
+
}
|
|
8348
|
+
|
|
8349
|
+
.qti-width-96 {
|
|
8350
|
+
width: 24rem;
|
|
8351
|
+
}
|
|
8352
|
+
|
|
8353
|
+
.qti-width-auto {
|
|
8354
|
+
width: auto;
|
|
8355
|
+
}
|
|
8356
|
+
|
|
8357
|
+
.qti-width-1-2 {
|
|
8358
|
+
width: 50%;
|
|
8359
|
+
}
|
|
8360
|
+
|
|
8361
|
+
.qti-width-1-3 {
|
|
8362
|
+
width: 33.3333%;
|
|
8363
|
+
}
|
|
8364
|
+
|
|
8365
|
+
.qti-width-2-3 {
|
|
8366
|
+
width: 66.6667%;
|
|
8367
|
+
}
|
|
8368
|
+
|
|
8369
|
+
.qti-width-1-4 {
|
|
8370
|
+
width: 25%;
|
|
8371
|
+
}
|
|
8372
|
+
|
|
8373
|
+
.qti-width-2-4 {
|
|
8374
|
+
width: 50%;
|
|
8375
|
+
}
|
|
8376
|
+
|
|
8377
|
+
.qti-width-3-4 {
|
|
8378
|
+
width: 75%;
|
|
8379
|
+
}
|
|
8380
|
+
|
|
8381
|
+
.qti-width-1-5 {
|
|
8382
|
+
width: 20%;
|
|
8383
|
+
}
|
|
8384
|
+
|
|
8385
|
+
.qti-width-2-5 {
|
|
8386
|
+
width: 40%;
|
|
8387
|
+
}
|
|
8388
|
+
|
|
8389
|
+
.qti-width-3-5 {
|
|
8390
|
+
width: 60%;
|
|
8391
|
+
}
|
|
8392
|
+
|
|
8393
|
+
.qti-width-4-5 {
|
|
8394
|
+
width: 80%;
|
|
8395
|
+
}
|
|
8396
|
+
|
|
8397
|
+
.qti-width-1-6 {
|
|
8398
|
+
width: 16.6667%;
|
|
8399
|
+
}
|
|
8400
|
+
|
|
8401
|
+
.qti-width-2-6 {
|
|
8402
|
+
width: 33.3333%;
|
|
8403
|
+
}
|
|
8404
|
+
|
|
8405
|
+
.qti-width-3-6 {
|
|
8406
|
+
width: 50%;
|
|
8407
|
+
}
|
|
8408
|
+
|
|
8409
|
+
.qti-width-4-6 {
|
|
8410
|
+
width: 66.6667%;
|
|
8411
|
+
}
|
|
8412
|
+
|
|
8413
|
+
.qti-width-5-6 {
|
|
8414
|
+
width: 83.3333%;
|
|
8415
|
+
}
|
|
8416
|
+
|
|
8417
|
+
.qti-width-1-12 {
|
|
8418
|
+
width: 8.3333%;
|
|
8419
|
+
}
|
|
8420
|
+
|
|
8421
|
+
.qti-width-2-12 {
|
|
8422
|
+
width: 16.6667%;
|
|
8423
|
+
}
|
|
8424
|
+
|
|
8425
|
+
.qti-width-3-12 {
|
|
8426
|
+
width: 25%;
|
|
8427
|
+
}
|
|
8428
|
+
|
|
8429
|
+
.qti-width-4-12 {
|
|
8430
|
+
width: 33.3333%;
|
|
8431
|
+
}
|
|
8432
|
+
|
|
8433
|
+
.qti-width-5-12 {
|
|
8434
|
+
width: 41.6667%;
|
|
8435
|
+
}
|
|
8436
|
+
|
|
8437
|
+
.qti-width-6-12 {
|
|
8438
|
+
width: 50%;
|
|
8439
|
+
}
|
|
8440
|
+
|
|
8441
|
+
.qti-width-7-12 {
|
|
8442
|
+
width: 58.3333%;
|
|
8443
|
+
}
|
|
8444
|
+
|
|
8445
|
+
.qti-width-8-12 {
|
|
8446
|
+
width: 66.6667%;
|
|
8447
|
+
}
|
|
8448
|
+
|
|
8449
|
+
.qti-width-9-12 {
|
|
8450
|
+
width: 75%;
|
|
8451
|
+
}
|
|
8452
|
+
|
|
8453
|
+
.qti-width-10-12 {
|
|
8454
|
+
width: 83.3333%;
|
|
8455
|
+
}
|
|
8456
|
+
|
|
8457
|
+
.qti-width-11-12 {
|
|
8458
|
+
width: 91.6667%;
|
|
8459
|
+
}
|
|
8460
|
+
|
|
8461
|
+
.qti-width-full,
|
|
8462
|
+
.qti-fullwidth {
|
|
8463
|
+
width: 100%;
|
|
8464
|
+
}
|
|
8465
|
+
|
|
8466
|
+
/* ==================
|
|
8467
|
+
Text Indent styles
|
|
8468
|
+
================== */
|
|
8469
|
+
|
|
8470
|
+
.qti-text-indent-0 {
|
|
8471
|
+
text-indent: 0;
|
|
8472
|
+
}
|
|
8473
|
+
|
|
8474
|
+
.qti-text-indent-px {
|
|
8475
|
+
text-indent: 1px;
|
|
8476
|
+
}
|
|
8477
|
+
|
|
8478
|
+
.qti-text-indent-0p5 {
|
|
8479
|
+
text-indent: 0.125rem;
|
|
8480
|
+
}
|
|
8481
|
+
|
|
8482
|
+
.qti-text-indent-1 {
|
|
8483
|
+
text-indent: 0.25rem;
|
|
8484
|
+
}
|
|
8485
|
+
|
|
8486
|
+
.qti-text-indent-1p5 {
|
|
8487
|
+
text-indent: 0.375rem;
|
|
8488
|
+
}
|
|
8489
|
+
|
|
8490
|
+
.qti-text-indent-2 {
|
|
8491
|
+
text-indent: 0.5rem;
|
|
8492
|
+
}
|
|
8493
|
+
|
|
8494
|
+
.qti-text-indent-2p5 {
|
|
8495
|
+
text-indent: 0.625rem;
|
|
8496
|
+
}
|
|
8497
|
+
|
|
8498
|
+
.qti-text-indent-3 {
|
|
8499
|
+
text-indent: 0.75rem;
|
|
8500
|
+
}
|
|
8501
|
+
|
|
8502
|
+
.qti-text-indent-3p5 {
|
|
8503
|
+
text-indent: 0.875rem;
|
|
8504
|
+
}
|
|
8505
|
+
|
|
8506
|
+
.qti-text-indent-4 {
|
|
8507
|
+
text-indent: 1rem;
|
|
8508
|
+
}
|
|
8509
|
+
|
|
8510
|
+
.qti-text-indent-5 {
|
|
8511
|
+
text-indent: 1.25rem;
|
|
8512
|
+
}
|
|
8513
|
+
|
|
8514
|
+
.qti-text-indent-6 {
|
|
8515
|
+
text-indent: 1.5rem;
|
|
8516
|
+
}
|
|
8517
|
+
|
|
8518
|
+
.qti-text-indent-7 {
|
|
8519
|
+
text-indent: 1.75rem;
|
|
8520
|
+
}
|
|
8521
|
+
|
|
8522
|
+
.qti-text-indent-8 {
|
|
8523
|
+
text-indent: 2rem;
|
|
8524
|
+
}
|
|
8525
|
+
|
|
8526
|
+
.qti-text-indent-12 {
|
|
8527
|
+
text-indent: 3rem;
|
|
8528
|
+
}
|
|
8529
|
+
|
|
8530
|
+
.qti-text-indent-16 {
|
|
8531
|
+
text-indent: 4rem;
|
|
8532
|
+
}
|
|
8533
|
+
|
|
8534
|
+
.qti-text-indent-20 {
|
|
8535
|
+
text-indent: 5rem;
|
|
8536
|
+
}
|
|
8537
|
+
|
|
8538
|
+
.qti-text-indent-24 {
|
|
8539
|
+
text-indent: 6rem;
|
|
8540
|
+
}
|
|
8541
|
+
|
|
8542
|
+
.qti-text-indent-28 {
|
|
8543
|
+
text-indent: 7rem;
|
|
8544
|
+
}
|
|
8545
|
+
|
|
8546
|
+
.qti-text-indent-32 {
|
|
8547
|
+
text-indent: 8rem;
|
|
8548
|
+
}
|
|
8549
|
+
|
|
8550
|
+
/* =================
|
|
8551
|
+
List Style styles
|
|
8552
|
+
================= */
|
|
8553
|
+
|
|
8554
|
+
.qti-list-style-type-none {
|
|
8555
|
+
list-style-type: none;
|
|
8556
|
+
}
|
|
8557
|
+
|
|
8558
|
+
.qti-list-style-type-disc {
|
|
8559
|
+
list-style-type: disc;
|
|
8560
|
+
}
|
|
8561
|
+
|
|
8562
|
+
.qti-list-style-type-circle {
|
|
8563
|
+
list-style-type: circle;
|
|
8564
|
+
}
|
|
8565
|
+
|
|
8566
|
+
.qti-list-style-type-square {
|
|
8567
|
+
list-style-type: square;
|
|
8568
|
+
}
|
|
8569
|
+
|
|
8570
|
+
.qti-list-style-type-decimal {
|
|
8571
|
+
list-style-type: decimal;
|
|
8572
|
+
}
|
|
8573
|
+
|
|
8574
|
+
.qti-list-style-type-decimal-leading-zero {
|
|
8575
|
+
list-style-type: decimal-leading-zero;
|
|
8576
|
+
}
|
|
8577
|
+
|
|
8578
|
+
.qti-list-style-type-lower-alpha {
|
|
8579
|
+
list-style-type: lower-alpha;
|
|
8580
|
+
}
|
|
8581
|
+
|
|
8582
|
+
.qti-list-style-type-upper-alpha {
|
|
8583
|
+
list-style-type: upper-alpha;
|
|
8584
|
+
}
|
|
8585
|
+
|
|
8586
|
+
.qti-list-style-type-lower-roman {
|
|
8587
|
+
list-style-type: lower-roman;
|
|
8588
|
+
}
|
|
8589
|
+
|
|
8590
|
+
.qti-list-style-type-upper-roman {
|
|
8591
|
+
list-style-type: upper-roman;
|
|
8592
|
+
}
|
|
8593
|
+
|
|
8594
|
+
.qti-list-style-type-lower-latin {
|
|
8595
|
+
list-style-type: lower-latin;
|
|
8596
|
+
}
|
|
8597
|
+
|
|
8598
|
+
.qti-list-style-type-upper-latin {
|
|
8599
|
+
list-style-type: upper-latin;
|
|
8600
|
+
}
|
|
8601
|
+
|
|
8602
|
+
.qti-list-style-type-lower-greek {
|
|
8603
|
+
list-style-type: lower-greek;
|
|
8604
|
+
}
|
|
8605
|
+
|
|
8606
|
+
.qti-list-style-type-arabic-indic {
|
|
8607
|
+
list-style-type: arabic-indic;
|
|
8608
|
+
}
|
|
8609
|
+
|
|
8610
|
+
.qti-list-style-type-armenian {
|
|
8611
|
+
list-style-type: armenian;
|
|
8612
|
+
}
|
|
8613
|
+
|
|
8614
|
+
.qti-list-style-type-lower-armenian {
|
|
8615
|
+
list-style-type: lower-armenian;
|
|
8616
|
+
}
|
|
8617
|
+
|
|
8618
|
+
.qti-list-style-type-upper-armenian {
|
|
8619
|
+
list-style-type: upper-armenian;
|
|
8620
|
+
}
|
|
8621
|
+
|
|
8622
|
+
.qti-list-style-type-bengali {
|
|
8623
|
+
list-style-type: bengali;
|
|
8624
|
+
}
|
|
8625
|
+
|
|
8626
|
+
.qti-list-style-type-cambodian {
|
|
8627
|
+
list-style-type: cambodian;
|
|
8628
|
+
}
|
|
8629
|
+
|
|
8630
|
+
.qti-list-style-type-simp-chinese-formal {
|
|
8631
|
+
list-style-type: simp-chinese-formal;
|
|
8632
|
+
}
|
|
8633
|
+
|
|
8634
|
+
.qti-list-style-type-simp-chinese-informal {
|
|
8635
|
+
list-style-type: simp-chinese-informal;
|
|
8636
|
+
}
|
|
8637
|
+
|
|
8638
|
+
.qti-list-style-type-trad-chinese-formal {
|
|
8639
|
+
list-style-type: trad-chinese-formal;
|
|
8640
|
+
}
|
|
8641
|
+
|
|
8642
|
+
.qti-list-style-type-trad-chinese-informal {
|
|
8643
|
+
list-style-type: trad-chinese-informal;
|
|
8644
|
+
}
|
|
8645
|
+
|
|
8646
|
+
.qti-list-style-type-cjk-ideographic {
|
|
8647
|
+
list-style-type: cjk-ideographic;
|
|
8648
|
+
}
|
|
8649
|
+
|
|
8650
|
+
.qti-list-style-type-cjk-heavenly-stem {
|
|
8651
|
+
list-style-type: cjk-heavenly-stem;
|
|
8652
|
+
}
|
|
8653
|
+
|
|
8654
|
+
.qti-list-style-type-cjk-earthly-branch {
|
|
8655
|
+
list-style-type: cjk-earthly-branch;
|
|
8656
|
+
}
|
|
8657
|
+
|
|
8658
|
+
.qti-list-style-type-devanagari {
|
|
8659
|
+
list-style-type: devanagari;
|
|
8660
|
+
}
|
|
8661
|
+
|
|
8662
|
+
.qti-list-style-type-ethiopic-halehame-ti-er {
|
|
8663
|
+
list-style-type: ethiopic-halehame-ti-er;
|
|
8664
|
+
}
|
|
8665
|
+
|
|
8666
|
+
.qti-list-style-type-ethiopic-halehame-ti-et {
|
|
8667
|
+
list-style-type: ethiopic-halehame-ti-et;
|
|
8668
|
+
}
|
|
8669
|
+
|
|
8670
|
+
.qti-list-style-type-ethiopic-halehame-am {
|
|
8671
|
+
list-style-type: ethiopic-halehame-am;
|
|
8672
|
+
}
|
|
8673
|
+
|
|
8674
|
+
.qti-list-style-type-ethiopic-halehame {
|
|
8675
|
+
list-style-type: ethiopic-halehame;
|
|
8676
|
+
}
|
|
8677
|
+
|
|
8678
|
+
.qti-list-style-type-georgian {
|
|
8679
|
+
list-style-type: georgian;
|
|
8680
|
+
}
|
|
8681
|
+
|
|
8682
|
+
.qti-list-style-type-gujarati {
|
|
8683
|
+
list-style-type: gujarati;
|
|
8684
|
+
}
|
|
8685
|
+
|
|
8686
|
+
.qti-list-style-type-gurmukhi {
|
|
8687
|
+
list-style-type: gurmukhi;
|
|
8688
|
+
}
|
|
8689
|
+
|
|
8690
|
+
.qti-list-style-type-hangul {
|
|
8691
|
+
list-style-type: hangul;
|
|
8692
|
+
}
|
|
8693
|
+
|
|
8694
|
+
.qti-list-style-type-hangul-consonant {
|
|
8695
|
+
list-style-type: hangul-consonant;
|
|
8696
|
+
}
|
|
8697
|
+
|
|
8698
|
+
.qti-list-style-type-hebrew {
|
|
8699
|
+
list-style-type: hebrew;
|
|
8700
|
+
}
|
|
8701
|
+
|
|
8702
|
+
.qti-list-style-type-hiragana {
|
|
8703
|
+
list-style-type: hiragana;
|
|
8704
|
+
}
|
|
8705
|
+
|
|
8706
|
+
.qti-list-style-type-hiragana-iroha {
|
|
8707
|
+
list-style-type: hiragana-iroha;
|
|
8708
|
+
}
|
|
8709
|
+
|
|
8710
|
+
.qti-list-style-type-khmer {
|
|
8711
|
+
list-style-type: khmer;
|
|
8712
|
+
}
|
|
8713
|
+
|
|
8714
|
+
.qti-list-style-type-korean-hangul-formal {
|
|
8715
|
+
list-style-type: korean-hangul-formal;
|
|
8716
|
+
}
|
|
8717
|
+
|
|
8718
|
+
.qti-list-style-type-korean-hanja-formal {
|
|
8719
|
+
list-style-type: korean-hanja-formal;
|
|
8720
|
+
}
|
|
8721
|
+
|
|
8722
|
+
.qti-list-style-type-korean-hanja-informal {
|
|
8723
|
+
list-style-type: korean-hanja-informal;
|
|
8724
|
+
}
|
|
8725
|
+
|
|
8726
|
+
.qti-list-style-type-lao {
|
|
8727
|
+
list-style-type: lao;
|
|
8728
|
+
}
|
|
8729
|
+
|
|
8730
|
+
.qti-list-style-type-malayalam {
|
|
8731
|
+
list-style-type: malayalam;
|
|
8732
|
+
}
|
|
8733
|
+
|
|
8734
|
+
.qti-list-style-type-mongolian {
|
|
8735
|
+
list-style-type: mongolian;
|
|
8736
|
+
}
|
|
8737
|
+
|
|
8738
|
+
.qti-list-style-type-myanmar {
|
|
8739
|
+
list-style-type: myanmar;
|
|
8740
|
+
}
|
|
8741
|
+
|
|
8742
|
+
.qti-list-style-type-oriya {
|
|
8743
|
+
list-style-type: oriya;
|
|
8744
|
+
}
|
|
8745
|
+
|
|
8746
|
+
.qti-list-style-type-persian {
|
|
8747
|
+
list-style-type: persian;
|
|
8748
|
+
}
|
|
8749
|
+
|
|
8750
|
+
.qti-list-style-type-thai {
|
|
8751
|
+
list-style-type: thai;
|
|
8752
|
+
}
|
|
8753
|
+
|
|
8754
|
+
.qti-list-style-type-tibetan {
|
|
8755
|
+
list-style-type: tibetan;
|
|
8756
|
+
}
|
|
8757
|
+
|
|
8758
|
+
.qti-list-style-type-telugu {
|
|
8759
|
+
list-style-type: telugu;
|
|
8760
|
+
}
|
|
8761
|
+
|
|
8762
|
+
.qti-list-style-type-urdu {
|
|
8763
|
+
list-style-type: urdu;
|
|
8764
|
+
}
|
|
8765
|
+
|
|
8766
|
+
/* =========================
|
|
8767
|
+
Other QTI 3 Presentation Utilities
|
|
8768
|
+
========================= */
|
|
8769
|
+
|
|
8770
|
+
.qti-bordered {
|
|
8771
|
+
border: 1px solid var(--table-border-color);
|
|
8772
|
+
}
|
|
8773
|
+
|
|
8774
|
+
.qti-underline {
|
|
8775
|
+
text-decoration: underline;
|
|
8776
|
+
text-decoration-color: var(--foreground);
|
|
8777
|
+
}
|
|
8778
|
+
|
|
8779
|
+
.qti-italic {
|
|
8780
|
+
font-style: italic;
|
|
8781
|
+
}
|
|
8782
|
+
|
|
8783
|
+
.qti-well {
|
|
8784
|
+
min-height: 20px;
|
|
8785
|
+
padding: 19px;
|
|
8786
|
+
margin-bottom: 20px;
|
|
8787
|
+
background-color: var(--well-bg);
|
|
8788
|
+
border: var(--well-border);
|
|
8789
|
+
border-radius: 4px;
|
|
8790
|
+
box-shadow: var(--well-box-shadow);
|
|
8791
|
+
}
|
|
8792
|
+
|
|
8793
|
+
/* Set writing-mode to vertical-rl
|
|
8794
|
+
Typical for CJK vertical text */
|
|
8795
|
+
|
|
8796
|
+
.qti-writing-mode-vertical-rl {
|
|
8797
|
+
writing-mode: vertical-rl;
|
|
8798
|
+
}
|
|
8799
|
+
|
|
8800
|
+
/* Set writing-mode to vertical-lr
|
|
8801
|
+
Typical for Mongolian vertical text */
|
|
8802
|
+
|
|
8803
|
+
.qti-writing-mode-vertical-lr {
|
|
8804
|
+
writing-mode: vertical-lr;
|
|
8805
|
+
}
|
|
8806
|
+
|
|
8807
|
+
/* Set writing-mode to horizontal-tb
|
|
8808
|
+
Browser default */
|
|
8809
|
+
|
|
8810
|
+
.qti-writing-mode-horizontal-tb {
|
|
8811
|
+
writing-mode: horizontal-tb;
|
|
8812
|
+
}
|
|
8813
|
+
|
|
8814
|
+
/* Float an element left */
|
|
8815
|
+
|
|
8816
|
+
.qti-float-left {
|
|
8817
|
+
float: left;
|
|
8818
|
+
}
|
|
8819
|
+
|
|
8820
|
+
/* Float an element right */
|
|
8821
|
+
|
|
8822
|
+
.qti-float-right {
|
|
8823
|
+
float: right;
|
|
8824
|
+
}
|
|
8825
|
+
|
|
8826
|
+
/* Remove a float */
|
|
8827
|
+
|
|
8828
|
+
.qti-float-none {
|
|
8829
|
+
float: none;
|
|
8830
|
+
}
|
|
8831
|
+
|
|
8832
|
+
/* Clearfix Hack to apply to a container of
|
|
8833
|
+
floated content that overflows the container. */
|
|
8834
|
+
|
|
8835
|
+
.qti-float-clearfix::after {
|
|
8836
|
+
content: '';
|
|
8837
|
+
clear: both;
|
|
8838
|
+
display: table;
|
|
8839
|
+
}
|
|
8840
|
+
|
|
8841
|
+
.qti-float-clear-left
|
|
8842
|
+
.qti-float-clear-right
|
|
8843
|
+
.qti-float-clear-both
|
|
8844
|
+
|
|
8845
|
+
/* Set text-orientation to upright */
|
|
8846
|
+
.qti-text-orientation-upright {
|
|
8847
|
+
text-orientation: upright;
|
|
8848
|
+
}
|
|
8849
|
+
|
|
8850
|
+
/* stylelint-disable number-max-precision */
|
|
8851
|
+
|
|
8852
|
+
@layer qti-base {
|
|
8853
|
+
.qti-layout-row {
|
|
8854
|
+
display: flex;
|
|
8855
|
+
flex-wrap: wrap;
|
|
8856
|
+
width: 100%;
|
|
8857
|
+
gap: 2.1276595745%;
|
|
8858
|
+
}
|
|
8859
|
+
|
|
8860
|
+
.qti-layout-row [class*='qti-layout-col']:not(:empty) {
|
|
8861
|
+
box-sizing: border-box;
|
|
8862
|
+
}
|
|
8863
|
+
|
|
8864
|
+
.qti-layout-row [class*='qti-layout-col']:empty {
|
|
8865
|
+
width: 0;
|
|
8866
|
+
overflow: hidden; /* to fully collapse if there\u2019s padding or borders */
|
|
8867
|
+
}
|
|
8868
|
+
|
|
8869
|
+
.qti-layout-col1 {
|
|
8870
|
+
width: 6.3829787234%;
|
|
8871
|
+
}
|
|
8872
|
+
|
|
8873
|
+
.qti-layout-col2 {
|
|
8874
|
+
width: 14.8936170213%;
|
|
8875
|
+
}
|
|
8876
|
+
|
|
8877
|
+
.qti-layout-col3 {
|
|
8878
|
+
width: 23.4042553191%;
|
|
8879
|
+
}
|
|
8880
|
+
|
|
8881
|
+
.qti-layout-col4 {
|
|
8882
|
+
width: 31.914893617%;
|
|
8883
|
+
}
|
|
8884
|
+
|
|
8885
|
+
.qti-layout-col5 {
|
|
8886
|
+
width: 40.4255319149%;
|
|
8887
|
+
}
|
|
8888
|
+
|
|
8889
|
+
.qti-layout-col6 {
|
|
8890
|
+
width: 48.9361702128%;
|
|
8891
|
+
}
|
|
8892
|
+
|
|
8893
|
+
.qti-layout-col7 {
|
|
8894
|
+
width: 57.4468085106%;
|
|
8895
|
+
}
|
|
8896
|
+
|
|
8897
|
+
.qti-layout-col8 {
|
|
8898
|
+
width: 65.9574468085%;
|
|
8899
|
+
}
|
|
8900
|
+
|
|
8901
|
+
.qti-layout-col9 {
|
|
8902
|
+
width: 74.4680851064%;
|
|
8903
|
+
}
|
|
8904
|
+
|
|
8905
|
+
.qti-layout-col10 {
|
|
8906
|
+
width: 82.9787234043%;
|
|
8907
|
+
}
|
|
8908
|
+
|
|
8909
|
+
.qti-layout-col11 {
|
|
8910
|
+
width: 91.4893617021%;
|
|
8911
|
+
}
|
|
8912
|
+
|
|
8913
|
+
.qti-layout-col12 {
|
|
8914
|
+
width: 100%;
|
|
8915
|
+
}
|
|
8916
|
+
|
|
8917
|
+
.qti-layout-offset1 {
|
|
8918
|
+
margin-left: 8.5106382979%;
|
|
8919
|
+
}
|
|
8920
|
+
|
|
8921
|
+
.qti-layout-offset2 {
|
|
8922
|
+
margin-left: 17.0212765957%;
|
|
8923
|
+
}
|
|
8924
|
+
|
|
8925
|
+
.qti-layout-offset3 {
|
|
8926
|
+
margin-left: 25.5319148936%;
|
|
8927
|
+
}
|
|
8928
|
+
|
|
8929
|
+
.qti-layout-offset4 {
|
|
8930
|
+
margin-left: 34.0425531915%;
|
|
8931
|
+
}
|
|
8932
|
+
|
|
8933
|
+
.qti-layout-offset5 {
|
|
8934
|
+
margin-left: 42.5531914894%;
|
|
8935
|
+
}
|
|
8936
|
+
|
|
8937
|
+
.qti-layout-offset6 {
|
|
8938
|
+
margin-left: 51.0638297872%;
|
|
8939
|
+
}
|
|
8940
|
+
|
|
8941
|
+
.qti-layout-offset7 {
|
|
8942
|
+
margin-left: 59.5744680851%;
|
|
8943
|
+
}
|
|
8944
|
+
|
|
8945
|
+
.qti-layout-offset8 {
|
|
8946
|
+
margin-left: 68.085106383%;
|
|
8947
|
+
}
|
|
8948
|
+
|
|
8949
|
+
.qti-layout-offset9 {
|
|
8950
|
+
margin-left: 76.5957446809%;
|
|
8951
|
+
}
|
|
8952
|
+
|
|
8953
|
+
.qti-layout-offset10 {
|
|
8954
|
+
margin-left: 85.1063829787%;
|
|
8955
|
+
}
|
|
8956
|
+
|
|
8957
|
+
.qti-layout-offset11 {
|
|
8958
|
+
margin-left: 93.6170212766%;
|
|
8959
|
+
}
|
|
8960
|
+
|
|
8961
|
+
.qti-layout-offset12 {
|
|
8962
|
+
margin-left: 102.1276595745%;
|
|
8963
|
+
}
|
|
8964
|
+
|
|
8965
|
+
@media (width <= 767px) {
|
|
8966
|
+
[class*='qti-layout-col'] {
|
|
8967
|
+
width: 100%;
|
|
8968
|
+
}
|
|
8969
|
+
}
|
|
8970
|
+
}
|
|
8971
|
+
|
|
8972
|
+
[view],
|
|
8973
|
+
qti-outcome-declaration,
|
|
8974
|
+
qti-response-declaration {
|
|
8975
|
+
display: none;
|
|
8976
|
+
}
|
|
8977
|
+
|
|
8978
|
+
[view].show {
|
|
8979
|
+
display: block;
|
|
8980
|
+
}
|
|
8981
|
+
|
|
8982
|
+
:host {
|
|
8983
|
+
box-sizing: border-box;
|
|
8984
|
+
}
|
|
8985
|
+
|
|
8986
|
+
*,
|
|
8987
|
+
*::before,
|
|
8988
|
+
*::after {
|
|
8989
|
+
box-sizing: inherit;
|
|
8990
|
+
}
|
|
8991
|
+
|
|
8992
|
+
/* components */
|
|
8993
|
+
|
|
8994
|
+
@layer qti-components {
|
|
8995
|
+
qti-choice-interaction {
|
|
8996
|
+
&.qti-input-control-hidden {
|
|
8997
|
+
& qti-simple-choice {
|
|
8998
|
+
|
|
8999
|
+
&:hover {
|
|
9000
|
+
background-color: var(--qti-hover-bg);
|
|
9001
|
+
}
|
|
9002
|
+
|
|
9003
|
+
&:focus {
|
|
9004
|
+
box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
|
|
9005
|
+
}
|
|
9006
|
+
|
|
9007
|
+
&::part(ch) {
|
|
9008
|
+
display: none;
|
|
9009
|
+
}
|
|
9010
|
+
|
|
9011
|
+
&:state(--checked),
|
|
9012
|
+
&[aria-checked='true'] {
|
|
9013
|
+
border-color: var(--qti-border-active);
|
|
9014
|
+
background-color: var(--qti-bg-active);
|
|
9015
|
+
}
|
|
9016
|
+
|
|
9017
|
+
&:state(readonly),
|
|
9018
|
+
&[aria-readonly='true'] {
|
|
9019
|
+
cursor: pointer;
|
|
9020
|
+
background-color: var(--qti-bg);
|
|
9021
|
+
outline: 0;
|
|
9022
|
+
border: none;
|
|
9023
|
+
}
|
|
9024
|
+
|
|
9025
|
+
&:state(disabled),
|
|
9026
|
+
&[aria-disabled='true'] {
|
|
9027
|
+
cursor: not-allowed;
|
|
9028
|
+
background-color: var(--qti-disabled-bg);
|
|
9029
|
+
color: var(--qti-disabled-color);
|
|
9030
|
+
border-color: var(--qti-border-color);
|
|
9031
|
+
outline: 4px solid var(--qti-disabled-bg);
|
|
9032
|
+
}
|
|
9033
|
+
|
|
9034
|
+
border-radius: var(--qti-border-radius);
|
|
9035
|
+
|
|
9036
|
+
padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
|
|
9037
|
+
|
|
9038
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
9039
|
+
|
|
9040
|
+
outline: none
|
|
9041
|
+
}
|
|
9042
|
+
}
|
|
9043
|
+
|
|
9044
|
+
&:not(.qti-input-control-hidden) {
|
|
9045
|
+
& qti-simple-choice {
|
|
9046
|
+
|
|
9047
|
+
&:not([aria-disabled='true'], [aria-readonly='true'], :state(--checked)):hover {
|
|
9048
|
+
background-color: var(--qti-hover-bg);
|
|
9049
|
+
}
|
|
9050
|
+
|
|
9051
|
+
&:focus {
|
|
9052
|
+
box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
|
|
9053
|
+
}
|
|
9054
|
+
|
|
9055
|
+
&:state(--checked),
|
|
9056
|
+
&[aria-checked='true'] {
|
|
9057
|
+
border-color: var(--qti-border-active);
|
|
9058
|
+
background-color: var(--qti-bg-active);
|
|
9059
|
+
}
|
|
9060
|
+
|
|
9061
|
+
&:state(readonly),
|
|
9062
|
+
&[aria-readonly='true'] {
|
|
9063
|
+
cursor: pointer;
|
|
9064
|
+
background-color: var(--qti-bg);
|
|
9065
|
+
outline: 0;
|
|
9066
|
+
border: none;
|
|
9067
|
+
}
|
|
9068
|
+
|
|
9069
|
+
&:state(disabled),
|
|
9070
|
+
&[aria-disabled='true'] {
|
|
9071
|
+
cursor: not-allowed;
|
|
9072
|
+
background-color: var(--qti-disabled-bg);
|
|
9073
|
+
color: var(--qti-disabled-color);
|
|
9074
|
+
border-color: var(--qti-border-color);
|
|
9075
|
+
outline: 4px solid var(--qti-disabled-bg);
|
|
9076
|
+
}
|
|
9077
|
+
|
|
9078
|
+
&::part(cha) {
|
|
9079
|
+
width: calc(var(--qti-form-size) - 6px);
|
|
9080
|
+
height: calc(var(--qti-form-size) - 6px);
|
|
9081
|
+
}
|
|
9082
|
+
|
|
9083
|
+
&:state(radio)::part(ch) {
|
|
9084
|
+
border-radius: 100%;
|
|
9085
|
+
display: grid;
|
|
9086
|
+
place-content: center;
|
|
9087
|
+
width: var(--qti-form-size);
|
|
9088
|
+
height: var(--qti-form-size);
|
|
9089
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
9090
|
+
outline: none;
|
|
9091
|
+
}
|
|
9092
|
+
|
|
9093
|
+
&:state(radio):state(--checked)::part(cha) {
|
|
9094
|
+
background-color: var(--qti-border-active);
|
|
9095
|
+
border-radius: 100%;
|
|
9096
|
+
}
|
|
9097
|
+
|
|
9098
|
+
&:state(checkbox)::part(ch) {
|
|
9099
|
+
display: flex;
|
|
9100
|
+
place-items: center;
|
|
9101
|
+
border-radius: var(--qti-border-radius);
|
|
9102
|
+
display: grid;
|
|
9103
|
+
place-content: center;
|
|
9104
|
+
width: var(--qti-form-size);
|
|
9105
|
+
height: var(--qti-form-size);
|
|
9106
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
9107
|
+
outline: none;
|
|
9108
|
+
}
|
|
9109
|
+
|
|
9110
|
+
&:state(checkbox):state(--checked)::part(cha) {
|
|
9111
|
+
background-color: var(--qti-border-active);
|
|
9112
|
+
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
|
|
9113
|
+
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
|
|
9114
|
+
}
|
|
9115
|
+
|
|
9116
|
+
gap: 0.5rem;
|
|
9117
|
+
|
|
9118
|
+
border-radius: var(--qti-border-radius);
|
|
9119
|
+
|
|
9120
|
+
padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
|
|
9121
|
+
|
|
9122
|
+
outline: none;
|
|
9123
|
+
|
|
9124
|
+
cursor: pointer
|
|
9125
|
+
}
|
|
9126
|
+
}
|
|
9127
|
+
|
|
9128
|
+
& qti-simple-choice {
|
|
9129
|
+
width: -moz-fit-content;
|
|
9130
|
+
width: fit-content;
|
|
9131
|
+
cursor: pointer;
|
|
9132
|
+
|
|
9133
|
+
&:state(correct-response),
|
|
9134
|
+
&[data-correct-response='true'] {
|
|
9135
|
+
&::after {
|
|
9136
|
+
content: '\\02714';
|
|
9137
|
+
color: #16a34a; /* text-green-600 */
|
|
9138
|
+
}
|
|
9139
|
+
}
|
|
9140
|
+
}
|
|
9141
|
+
|
|
9142
|
+
& qti-simple-choice > p {
|
|
9143
|
+
margin: 0 !important;
|
|
9144
|
+
padding: 0 !important;
|
|
9145
|
+
}
|
|
9146
|
+
}
|
|
9147
|
+
|
|
9148
|
+
.hover-border {
|
|
9149
|
+
border: 2px solid #000; /* Adjust the border style and color as needed */
|
|
9150
|
+
}
|
|
9151
|
+
|
|
9152
|
+
qti-graphic-gap-match-interaction {
|
|
9153
|
+
position: relative;
|
|
9154
|
+
|
|
9155
|
+
&.qti-selections-light {
|
|
9156
|
+
&:state(--dragzone-active)::part(drags) {
|
|
9157
|
+
background-color: var(--qti-light-bg-active);
|
|
9158
|
+
border-color: var(--qti-light-border-active);
|
|
9159
|
+
}
|
|
9160
|
+
|
|
9161
|
+
&:state(--dragzone-enabled)::part(drags) {
|
|
9162
|
+
background-color: var(--qti-light-bg-active);
|
|
9163
|
+
}
|
|
9164
|
+
}
|
|
9165
|
+
|
|
9166
|
+
&.qti-selections-dark {
|
|
9167
|
+
&:state(--dragzone-active)::part(drags) {
|
|
9168
|
+
background-color: var(--qti-dark-bg-active);
|
|
9169
|
+
border-color: var(--qti-dark-border-active);
|
|
9170
|
+
}
|
|
9171
|
+
|
|
9172
|
+
&:state(--dragzone-enabled)::part(drags) {
|
|
9173
|
+
background-color: var(--qti-dark-bg-active);
|
|
9174
|
+
}
|
|
9175
|
+
}
|
|
9176
|
+
|
|
9177
|
+
/* General styles for active and enabled states */
|
|
9178
|
+
&:state(--dragzone-active)::part(drags) {
|
|
9179
|
+
border-color: var(--qti-border-active);
|
|
9180
|
+
background-color: var(--qti-bg-active);
|
|
9181
|
+
}
|
|
9182
|
+
|
|
9183
|
+
&:state(--dragzone-enabled)::part(drags) {
|
|
9184
|
+
background-color: var(--qti-bg-active);
|
|
9185
|
+
}
|
|
9186
|
+
|
|
9187
|
+
& qti-gap-img,
|
|
9188
|
+
qti-gap-text {
|
|
9189
|
+
display: flex;
|
|
9190
|
+
justify-content: center;
|
|
9191
|
+
align-items: center;
|
|
9192
|
+
cursor: grab;
|
|
9193
|
+
}
|
|
9194
|
+
|
|
9195
|
+
& qti-associable-hotspot {
|
|
9196
|
+
display: flex;
|
|
9197
|
+
justify-content: center;
|
|
9198
|
+
align-items: center;
|
|
9199
|
+
border: 2px solid transparent;
|
|
9200
|
+
|
|
9201
|
+
&[enabled] {
|
|
9202
|
+
|
|
9203
|
+
/* Light theme override */
|
|
9204
|
+
.qti-selections-light & {
|
|
9205
|
+
background-color: var(--qti-light-bg-active);
|
|
9206
|
+
}
|
|
9207
|
+
|
|
9208
|
+
/* Dark theme override */
|
|
9209
|
+
.qti-selections-dark & {
|
|
9210
|
+
background-color: var(--qti-dark-bg-active);
|
|
9211
|
+
}
|
|
9212
|
+
background-color: var(--qti-bg-active)
|
|
9213
|
+
}
|
|
9214
|
+
|
|
9215
|
+
&[active] {
|
|
9216
|
+
|
|
9217
|
+
/* Light theme override */
|
|
9218
|
+
.qti-selections-light & {
|
|
9219
|
+
background-color: var(--qti-light-bg-active);
|
|
9220
|
+
border-color: var(--qti-light-border-active);
|
|
9221
|
+
}
|
|
9222
|
+
|
|
9223
|
+
/* Dark theme override */
|
|
9224
|
+
.qti-selections-dark & {
|
|
9225
|
+
background-color: var(--qti-dark-bg-active);
|
|
9226
|
+
border-color: var(--qti-dark-border-active);
|
|
9227
|
+
}
|
|
9228
|
+
border-color: var(--qti-border-active);
|
|
9229
|
+
background-color: var(--qti-bg-active)
|
|
9230
|
+
}
|
|
9231
|
+
|
|
9232
|
+
&[disabled] {
|
|
9233
|
+
|
|
9234
|
+
&:not(:empty) {
|
|
9235
|
+
cursor: default !important;
|
|
9236
|
+
}
|
|
9237
|
+
|
|
9238
|
+
cursor: not-allowed;
|
|
9239
|
+
|
|
9240
|
+
background-color: var(--qti-disabled-bg);
|
|
9241
|
+
|
|
9242
|
+
color: var(--qti-disabled-color);
|
|
9243
|
+
|
|
9244
|
+
border-color: var(--qti-border-color);
|
|
9245
|
+
|
|
9246
|
+
outline: 4px solid var(--qti-disabled-bg)
|
|
9247
|
+
}
|
|
9248
|
+
|
|
9249
|
+
&:empty::after {
|
|
9250
|
+
padding: var(--qti-padding-md) var(--qti-padding-lg); /* Padding shorthand */
|
|
9251
|
+
content: '\\0000a0'; /* when empty, put a space in it */
|
|
9252
|
+
}
|
|
9253
|
+
|
|
9254
|
+
&:not(:empty) {
|
|
9255
|
+
padding: 0;
|
|
9256
|
+
width: auto;
|
|
9257
|
+
}
|
|
9258
|
+
|
|
9259
|
+
&:not(:empty) > * {
|
|
9260
|
+
flex: 1;
|
|
9261
|
+
transform: rotate(0); /* rotate-0 */
|
|
9262
|
+
box-shadow: 0 0 0 1px #e5e7eb; /* ring-gray-200 */
|
|
9263
|
+
}
|
|
9264
|
+
}
|
|
9265
|
+
|
|
9266
|
+
& img {
|
|
9267
|
+
margin: 0;
|
|
9268
|
+
padding: 0;
|
|
9269
|
+
}
|
|
9270
|
+
}
|
|
9271
|
+
|
|
9272
|
+
qti-text-entry-interaction {
|
|
9273
|
+
&::part(input) {
|
|
9274
|
+
border-radius: 0;
|
|
9275
|
+
cursor: text;
|
|
9276
|
+
padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
|
|
9277
|
+
background: unset;
|
|
9278
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
9279
|
+
outline: none;
|
|
9280
|
+
}
|
|
9281
|
+
|
|
9282
|
+
&:hover {
|
|
9283
|
+
background-color: var(--qti-hover-bg);
|
|
9284
|
+
}
|
|
9285
|
+
|
|
9286
|
+
&:focus-within {
|
|
9287
|
+
&::part(input) {
|
|
9288
|
+
box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
|
|
9289
|
+
border-color: var(--qti-border-active);
|
|
9290
|
+
}
|
|
9291
|
+
}
|
|
9292
|
+
}
|
|
9293
|
+
|
|
9294
|
+
qti-extended-text-interaction {
|
|
9295
|
+
&::part(textarea) {
|
|
9296
|
+
border-radius: 0;
|
|
9297
|
+
cursor: text;
|
|
9298
|
+
padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
|
|
9299
|
+
background: unset;
|
|
9300
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
9301
|
+
outline: none;
|
|
9302
|
+
}
|
|
9303
|
+
|
|
9304
|
+
&:hover {
|
|
9305
|
+
background-color: var(--qti-hover-bg);
|
|
9306
|
+
}
|
|
9307
|
+
|
|
9308
|
+
&:focus-within {
|
|
9309
|
+
&::part(textarea) {
|
|
9310
|
+
box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
|
|
9311
|
+
border-color: var(--qti-border-active);
|
|
9312
|
+
}
|
|
9313
|
+
}
|
|
9314
|
+
}
|
|
9315
|
+
|
|
9316
|
+
qti-gap-match-interaction {
|
|
9317
|
+
&.qti-selections-light {
|
|
9318
|
+
&:state(--dragzone-active)::part(drags) {
|
|
9319
|
+
background-color: var(--qti-light-bg-active);
|
|
9320
|
+
border-color: var(--qti-light-border-active);
|
|
9321
|
+
}
|
|
9322
|
+
|
|
9323
|
+
&:state(--dragzone-enabled)::part(drags) {
|
|
9324
|
+
background-color: var(--qti-light-bg-active);
|
|
9325
|
+
}
|
|
9326
|
+
}
|
|
9327
|
+
|
|
9328
|
+
&.qti-selections-dark {
|
|
9329
|
+
&:state(--dragzone-active)::part(drags) {
|
|
9330
|
+
background-color: var(--qti-dark-bg-active);
|
|
9331
|
+
border-color: var(--qti-dark-border-active);
|
|
9332
|
+
}
|
|
9333
|
+
|
|
9334
|
+
&:state(--dragzone-enabled)::part(drags) {
|
|
9335
|
+
background-color: var(--qti-dark-bg-active);
|
|
9336
|
+
}
|
|
9337
|
+
}
|
|
9338
|
+
|
|
9339
|
+
/* General styles for active and enabled states */
|
|
9340
|
+
&:state(--dragzone-active)::part(drags) {
|
|
9341
|
+
border-color: var(--qti-border-active);
|
|
9342
|
+
background-color: var(--qti-bg-active);
|
|
9343
|
+
}
|
|
9344
|
+
|
|
9345
|
+
&:state(--dragzone-enabled)::part(drags) {
|
|
9346
|
+
background-color: var(--qti-bg-active);
|
|
9347
|
+
}
|
|
9348
|
+
|
|
9349
|
+
& qti-gap-text {
|
|
9350
|
+
|
|
9351
|
+
&[dragging] {
|
|
9352
|
+
pointer-events: none;
|
|
9353
|
+
rotate: -2deg;
|
|
9354
|
+
box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
|
|
9355
|
+
0 4px 8px rgb(0 0 0 / 10%);
|
|
9356
|
+
}
|
|
9357
|
+
|
|
9358
|
+
&:hover {
|
|
9359
|
+
background-color: var(--qti-hover-bg);
|
|
9360
|
+
}
|
|
9361
|
+
|
|
9362
|
+
&:focus {
|
|
9363
|
+
box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
|
|
9364
|
+
}
|
|
9365
|
+
|
|
9366
|
+
transition: transform 200ms ease-out,
|
|
9367
|
+
box-shadow 200ms ease-out,
|
|
9368
|
+
rotate 200ms ease-out;
|
|
9369
|
+
|
|
9370
|
+
cursor: grab;
|
|
9371
|
+
|
|
9372
|
+
background-color: var(--qti-bg);
|
|
9373
|
+
|
|
9374
|
+
padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
|
|
9375
|
+
|
|
9376
|
+
border-radius: var(--qti-border-radius);
|
|
9377
|
+
|
|
9378
|
+
padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);
|
|
9379
|
+
|
|
9380
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
9381
|
+
|
|
9382
|
+
outline: none;
|
|
9383
|
+
|
|
9384
|
+
background-image: radial-gradient(
|
|
9385
|
+
circle at center,
|
|
9386
|
+
rgb(0 0 0 / 10%) 0,
|
|
9387
|
+
rgb(0 0 0 / 20%) 2px,
|
|
9388
|
+
rgb(255 255 255 / 0%) 2px,
|
|
9389
|
+
rgb(255 255 255 / 0%) 100%
|
|
9390
|
+
);
|
|
9391
|
+
|
|
9392
|
+
background-repeat: repeat-y;
|
|
9393
|
+
|
|
9394
|
+
background-position: left center;
|
|
9395
|
+
|
|
9396
|
+
background-size: 14px 8px
|
|
9397
|
+
}
|
|
9398
|
+
|
|
9399
|
+
& qti-gap {
|
|
9400
|
+
|
|
9401
|
+
&[disabled] {
|
|
9402
|
+
|
|
9403
|
+
&:not(:empty) {
|
|
9404
|
+
cursor: default !important;
|
|
9405
|
+
}
|
|
9406
|
+
|
|
9407
|
+
cursor: not-allowed;
|
|
9408
|
+
|
|
9409
|
+
background-color: var(--qti-disabled-bg);
|
|
9410
|
+
|
|
9411
|
+
color: var(--qti-disabled-color);
|
|
9412
|
+
|
|
9413
|
+
border-color: var(--qti-border-color);
|
|
9414
|
+
|
|
9415
|
+
outline: 4px solid var(--qti-disabled-bg)
|
|
9416
|
+
}
|
|
9417
|
+
|
|
9418
|
+
&[enabled] {
|
|
9419
|
+
|
|
9420
|
+
/* Light theme override */
|
|
9421
|
+
.qti-selections-light & {
|
|
9422
|
+
border-color: var(--qti-light-border-active);
|
|
9423
|
+
}
|
|
9424
|
+
|
|
9425
|
+
/* Dark theme override */
|
|
9426
|
+
.qti-selections-dark & {
|
|
9427
|
+
border-color: var(--qti-dark-border-active);
|
|
9428
|
+
}
|
|
9429
|
+
background-color: var(--qti-bg-active)
|
|
9430
|
+
}
|
|
9431
|
+
|
|
9432
|
+
&[active] {
|
|
9433
|
+
|
|
9434
|
+
/* Light theme override */
|
|
9435
|
+
.qti-selections-light & {
|
|
9436
|
+
background-color: var(--qti-light-bg-active);
|
|
9437
|
+
border-color: var(--qti-light-border-active);
|
|
9438
|
+
}
|
|
9439
|
+
|
|
9440
|
+
/* Dark theme override */
|
|
9441
|
+
.qti-selections-dark & {
|
|
9442
|
+
background-color: var(--qti-dark-bg-active);
|
|
9443
|
+
border-color: var(--qti-dark-border-active);
|
|
9444
|
+
}
|
|
9445
|
+
border-color: var(--qti-border-active);
|
|
9446
|
+
background-color: var(--qti-bg-active)
|
|
9447
|
+
}
|
|
9448
|
+
|
|
9449
|
+
display: inline-flex;
|
|
9450
|
+
align-items: center;
|
|
9451
|
+
|
|
9452
|
+
&:empty::after {
|
|
9453
|
+
padding: var(--qti-padding-md) var(--qti-padding-lg); /* Padding shorthand */
|
|
9454
|
+
content: '\\0000a0'; /* when empty, put a space in it */
|
|
9455
|
+
}
|
|
9456
|
+
|
|
9457
|
+
&:not(:empty) {
|
|
9458
|
+
display: inline-flex;
|
|
9459
|
+
padding: 0;
|
|
9460
|
+
width: auto;
|
|
9461
|
+
}
|
|
9462
|
+
|
|
9463
|
+
&:not(:empty) > * {
|
|
9464
|
+
flex: 1;
|
|
9465
|
+
transform: rotate(0); /* rotate-0 */
|
|
9466
|
+
box-shadow: 0 0 0 1px #e5e7eb; /* ring-gray-200 */
|
|
9467
|
+
}
|
|
9468
|
+
|
|
9469
|
+
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" stroke="%23CCCCCC" stroke-width="1" fill="transparent" /></svg>')
|
|
9470
|
+
center no-repeat;
|
|
9471
|
+
|
|
9472
|
+
border-radius: var(--qti-border-radius);
|
|
9473
|
+
|
|
9474
|
+
position: relative;
|
|
9475
|
+
|
|
9476
|
+
background-color: var(--qti-bg);
|
|
9477
|
+
|
|
9478
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
9479
|
+
|
|
9480
|
+
outline: none
|
|
9481
|
+
}
|
|
9482
|
+
}
|
|
9483
|
+
|
|
9484
|
+
qti-hotspot-interaction {
|
|
9485
|
+
& qti-hotspot-choice {
|
|
9486
|
+
&[shape='circle'] {
|
|
9487
|
+
|
|
9488
|
+
&:hover {
|
|
9489
|
+
background-color: var(--qti-hover-bg);
|
|
9490
|
+
}
|
|
9491
|
+
|
|
9492
|
+
&:focus {
|
|
9493
|
+
box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
|
|
9494
|
+
}
|
|
9495
|
+
|
|
9496
|
+
&:state(--checked),
|
|
9497
|
+
&[aria-checked='true'] {
|
|
9498
|
+
border-color: var(--qti-border-active);
|
|
9499
|
+
}
|
|
9500
|
+
|
|
9501
|
+
&:state(--readonly),
|
|
9502
|
+
&[aria-readonly='true'] {
|
|
9503
|
+
cursor: pointer;
|
|
9504
|
+
background-color: var(--qti-bg);
|
|
9505
|
+
outline: 0;
|
|
9506
|
+
border: none;
|
|
9507
|
+
}
|
|
9508
|
+
|
|
9509
|
+
&:state(--disabled),
|
|
9510
|
+
&[aria-disabled='true'] {
|
|
9511
|
+
cursor: not-allowed;
|
|
9512
|
+
background-color: var(--qti-disabled-bg);
|
|
9513
|
+
color: var(--qti-disabled-color);
|
|
9514
|
+
border-color: var(--qti-border-color);
|
|
9515
|
+
outline: 4px solid var(--qti-disabled-bg);
|
|
9516
|
+
}
|
|
9517
|
+
|
|
9518
|
+
width: 100%;
|
|
9519
|
+
|
|
9520
|
+
height: 100%;
|
|
9521
|
+
|
|
9522
|
+
background-color: transparent;
|
|
9523
|
+
|
|
9524
|
+
padding: 0;
|
|
9525
|
+
|
|
9526
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
9527
|
+
|
|
9528
|
+
outline: none
|
|
9529
|
+
}
|
|
9530
|
+
|
|
9531
|
+
&[shape='rect'] {
|
|
9532
|
+
|
|
9533
|
+
/* &:hover {
|
|
9534
|
+
@apply hov;
|
|
9535
|
+
} */
|
|
9536
|
+
|
|
9537
|
+
&:focus {
|
|
9538
|
+
box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
|
|
9539
|
+
}
|
|
9540
|
+
|
|
9541
|
+
&:state(--checked),
|
|
9542
|
+
&[aria-checked='true'] {
|
|
9543
|
+
border-color: var(--qti-border-active);
|
|
9544
|
+
}
|
|
9545
|
+
|
|
9546
|
+
&[aria-readonly='true'] {
|
|
9547
|
+
cursor: pointer;
|
|
9548
|
+
background-color: var(--qti-bg);
|
|
9549
|
+
outline: 0;
|
|
9550
|
+
border: none;
|
|
9551
|
+
}
|
|
9552
|
+
|
|
9553
|
+
&[aria-disabled='true'] {
|
|
9554
|
+
cursor: not-allowed;
|
|
9555
|
+
background-color: var(--qti-disabled-bg);
|
|
9556
|
+
color: var(--qti-disabled-color);
|
|
9557
|
+
border-color: var(--qti-border-color);
|
|
9558
|
+
outline: 4px solid var(--qti-disabled-bg);
|
|
9559
|
+
}
|
|
9560
|
+
|
|
9561
|
+
width: 100%;
|
|
9562
|
+
|
|
9563
|
+
height: 100%;
|
|
9564
|
+
|
|
9565
|
+
background-color: transparent;
|
|
9566
|
+
|
|
9567
|
+
padding: 0;
|
|
9568
|
+
|
|
9569
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
9570
|
+
|
|
9571
|
+
outline: none
|
|
9572
|
+
}
|
|
9573
|
+
|
|
9574
|
+
&[shape='poly'] {
|
|
9575
|
+
&:hover::after {
|
|
9576
|
+
content: '';
|
|
9577
|
+
width: 100%;
|
|
9578
|
+
height: 100%;
|
|
9579
|
+
background: repeating-linear-gradient(
|
|
9580
|
+
45deg,
|
|
9581
|
+
var(--qti-border-active),
|
|
9582
|
+
var(--qti-border-active) 5px,
|
|
9583
|
+
transparent 5px,
|
|
9584
|
+
transparent 10px
|
|
9585
|
+
);
|
|
9586
|
+
display: block;
|
|
9587
|
+
}
|
|
9588
|
+
|
|
9589
|
+
&:state(--checked)::after,
|
|
9590
|
+
&[aria-checked='true']::after {
|
|
9591
|
+
content: '';
|
|
9592
|
+
width: 100%;
|
|
9593
|
+
height: 100%;
|
|
9594
|
+
background: repeating-linear-gradient(
|
|
9595
|
+
45deg,
|
|
9596
|
+
transparent,
|
|
9597
|
+
transparent 5px,
|
|
9598
|
+
var(--qti-border-active) 5px,
|
|
9599
|
+
var(--qti-border-active) 10px
|
|
9600
|
+
);
|
|
9601
|
+
display: block;
|
|
9602
|
+
}
|
|
9603
|
+
|
|
9604
|
+
&[aria-readonly='true'] {
|
|
9605
|
+
cursor: pointer;
|
|
9606
|
+
background-color: var(--qti-bg);
|
|
9607
|
+
outline: 0;
|
|
9608
|
+
border: none;
|
|
9609
|
+
}
|
|
9610
|
+
|
|
9611
|
+
&[aria-disabled='true'] {
|
|
9612
|
+
cursor: not-allowed;
|
|
9613
|
+
background-color: var(--qti-disabled-bg);
|
|
9614
|
+
color: var(--qti-disabled-color);
|
|
9615
|
+
border-color: var(--qti-border-color);
|
|
9616
|
+
outline: 4px solid var(--qti-disabled-bg);
|
|
9617
|
+
}
|
|
9618
|
+
}
|
|
9619
|
+
}
|
|
9620
|
+
}
|
|
9621
|
+
|
|
9622
|
+
qti-hottext-interaction {
|
|
9623
|
+
/* &:not(.qti-input-control-hidden),
|
|
9624
|
+
&:not(.qti-unselected-hidden) { */
|
|
9625
|
+
qti-hottext {
|
|
9626
|
+
display: inline-flex;
|
|
9627
|
+
align-items: center;
|
|
9628
|
+
|
|
9629
|
+
&:hover {
|
|
9630
|
+
background-color: var(--qti-hover-bg);
|
|
9631
|
+
}
|
|
9632
|
+
|
|
9633
|
+
&:focus {
|
|
9634
|
+
box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
|
|
9635
|
+
}
|
|
9636
|
+
|
|
9637
|
+
&::part(cha) {
|
|
9638
|
+
width: calc(var(--qti-form-size) - 6px);
|
|
9639
|
+
height: calc(var(--qti-form-size) - 6px);
|
|
9640
|
+
}
|
|
9641
|
+
|
|
9642
|
+
&:state(radio)::part(ch) {
|
|
9643
|
+
border-radius: 100%;
|
|
9644
|
+
display: grid;
|
|
9645
|
+
place-content: center;
|
|
9646
|
+
width: var(--qti-form-size);
|
|
9647
|
+
height: var(--qti-form-size);
|
|
9648
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
9649
|
+
outline: none;
|
|
9650
|
+
}
|
|
9651
|
+
|
|
9652
|
+
&:state(radio):state(--checked)::part(cha) {
|
|
9653
|
+
background-color: var(--qti-border-active);
|
|
9654
|
+
border-radius: 100%;
|
|
9655
|
+
}
|
|
9656
|
+
|
|
9657
|
+
&:state(checkbox)::part(ch) {
|
|
9658
|
+
display: flex;
|
|
9659
|
+
place-items: center;
|
|
9660
|
+
border-radius: var(--qti-border-radius);
|
|
9661
|
+
display: grid;
|
|
9662
|
+
place-content: center;
|
|
9663
|
+
width: var(--qti-form-size);
|
|
9664
|
+
height: var(--qti-form-size);
|
|
9665
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
9666
|
+
outline: none;
|
|
9667
|
+
}
|
|
9668
|
+
|
|
9669
|
+
&:state(checkbox):state(--checked)::part(cha) {
|
|
9670
|
+
background-color: var(--qti-border-active);
|
|
9671
|
+
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
|
|
9672
|
+
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
|
|
9673
|
+
}
|
|
9674
|
+
|
|
9675
|
+
gap: 0.5rem;
|
|
9676
|
+
|
|
9677
|
+
border-radius: var(--qti-border-radius);
|
|
9678
|
+
|
|
9679
|
+
padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
|
|
9680
|
+
|
|
9681
|
+
outline: none;
|
|
9682
|
+
|
|
9683
|
+
cursor: pointer
|
|
9684
|
+
}
|
|
9685
|
+
|
|
9686
|
+
/* } */
|
|
9687
|
+
|
|
9688
|
+
&.qti-input-control-hidden {
|
|
9689
|
+
qti-hottext {
|
|
9690
|
+
/* --qti-padding-md: 0.1rem;
|
|
9691
|
+
--qti-padding-lg: 0.2rem;
|
|
9692
|
+
--qti-border-radius-md: 0.3rem;
|
|
9693
|
+
--qti-border-thickness: 1px;
|
|
9694
|
+
--qti-font-weight-semibold: 400; */
|
|
9695
|
+
|
|
9696
|
+
&:hover {
|
|
9697
|
+
background-color: var(--qti-hover-bg);
|
|
9698
|
+
}
|
|
9699
|
+
|
|
9700
|
+
&:focus {
|
|
9701
|
+
box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
|
|
9702
|
+
}
|
|
9703
|
+
|
|
9704
|
+
/* @layer qti-variants { */
|
|
9705
|
+
&::part(ch) {
|
|
9706
|
+
display: none;
|
|
9707
|
+
}
|
|
9708
|
+
|
|
9709
|
+
&:state(--checked) {
|
|
9710
|
+
border-color: var(--qti-border-active);
|
|
9711
|
+
background-color: var(--qti-bg-active);
|
|
9712
|
+
}
|
|
9713
|
+
|
|
9714
|
+
&[aria-readonly='true'] {
|
|
9715
|
+
cursor: pointer;
|
|
9716
|
+
background-color: var(--qti-bg);
|
|
9717
|
+
outline: 0;
|
|
9718
|
+
border: none;
|
|
9719
|
+
}
|
|
9720
|
+
|
|
9721
|
+
&[aria-disabled='true'] {
|
|
9722
|
+
cursor: not-allowed;
|
|
9723
|
+
background-color: var(--qti-disabled-bg);
|
|
9724
|
+
color: var(--qti-disabled-color);
|
|
9725
|
+
border-color: var(--qti-border-color);
|
|
9726
|
+
outline: 4px solid var(--qti-disabled-bg);
|
|
9727
|
+
}
|
|
9728
|
+
|
|
9729
|
+
border-radius: var(--qti-border-radius);
|
|
9730
|
+
|
|
9731
|
+
padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
|
|
9732
|
+
|
|
9733
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
9734
|
+
|
|
9735
|
+
outline: none
|
|
9736
|
+
}
|
|
9737
|
+
|
|
9738
|
+
/* } */
|
|
9739
|
+
}
|
|
9740
|
+
|
|
9741
|
+
&.qti-unselected-hidden {
|
|
9742
|
+
qti-hottext {
|
|
9743
|
+
&:hover {
|
|
9744
|
+
background-color: var(--qti-hover-bg);
|
|
9745
|
+
}
|
|
9746
|
+
|
|
9747
|
+
&:focus {
|
|
9748
|
+
box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
|
|
9749
|
+
}
|
|
9750
|
+
|
|
9751
|
+
cursor: pointer;
|
|
9752
|
+
|
|
9753
|
+
&::part(ch) {
|
|
9754
|
+
display: none;
|
|
9755
|
+
}
|
|
9756
|
+
|
|
9757
|
+
&:state(--checked) {
|
|
9758
|
+
background-color: var(--qti-bg-active);
|
|
9759
|
+
}
|
|
9760
|
+
|
|
9761
|
+
&[aria-readonly='true'] {
|
|
9762
|
+
cursor: pointer;
|
|
9763
|
+
background-color: var(--qti-bg);
|
|
9764
|
+
outline: 0;
|
|
9765
|
+
border: none;
|
|
9766
|
+
}
|
|
9767
|
+
|
|
9768
|
+
&[aria-disabled='true'] {
|
|
9769
|
+
cursor: not-allowed;
|
|
9770
|
+
background-color: var(--qti-disabled-bg);
|
|
9771
|
+
color: var(--qti-disabled-color);
|
|
9772
|
+
border-color: var(--qti-border-color);
|
|
9773
|
+
outline: 4px solid var(--qti-disabled-bg);
|
|
9774
|
+
}
|
|
9775
|
+
}
|
|
9776
|
+
}
|
|
9777
|
+
}
|
|
9778
|
+
|
|
9779
|
+
qti-inline-choice-interaction {
|
|
9780
|
+
&::part(select) {
|
|
9781
|
+
|
|
9782
|
+
&:hover {
|
|
9783
|
+
background-color: var(--qti-hover-bg);
|
|
9784
|
+
}
|
|
9785
|
+
|
|
9786
|
+
&:focus {
|
|
9787
|
+
box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
|
|
9788
|
+
}
|
|
9789
|
+
|
|
9790
|
+
border-radius: var(--qti-border-radius);
|
|
9791
|
+
|
|
9792
|
+
position: relative;
|
|
9793
|
+
|
|
9794
|
+
-webkit-appearance: none;
|
|
9795
|
+
|
|
9796
|
+
-moz-appearance: none;
|
|
9797
|
+
|
|
9798
|
+
appearance: none;
|
|
9799
|
+
|
|
9800
|
+
padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
|
|
9801
|
+
|
|
9802
|
+
padding-right: calc(var(--qti-padding-horizontal) + 1.5rem);
|
|
9803
|
+
|
|
9804
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
9805
|
+
|
|
9806
|
+
outline: none;
|
|
9807
|
+
|
|
9808
|
+
background: url("data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E")
|
|
9809
|
+
no-repeat center right 6px
|
|
9810
|
+
}
|
|
9811
|
+
}
|
|
9812
|
+
|
|
9813
|
+
qti-match-interaction:not(.qti-match-tabular) {
|
|
9814
|
+
&:state(--dragzone-enabled) qti-simple-match-set:first-of-type {
|
|
9815
|
+
background-color: var(--qti-bg-active);
|
|
9816
|
+
}
|
|
9817
|
+
|
|
9818
|
+
&:state(--dragzone-active) qti-simple-match-set:first-of-type {
|
|
9819
|
+
border-color: var(--qti-border-active);
|
|
9820
|
+
background-color: var(--qti-bg-active);
|
|
9821
|
+
}
|
|
9822
|
+
|
|
9823
|
+
/* The draggables */
|
|
9824
|
+
& qti-simple-match-set:first-of-type {
|
|
9825
|
+
display: flex;
|
|
9826
|
+
flex-wrap: wrap;
|
|
9827
|
+
align-items: flex-start; /* Prevents children from stretching */
|
|
9828
|
+
gap: var(--qti-gap-size);
|
|
9829
|
+
border: 2px solid transparent;
|
|
9830
|
+
|
|
9831
|
+
& qti-simple-associable-choice {
|
|
9832
|
+
|
|
9833
|
+
&[dragging] {
|
|
9834
|
+
pointer-events: none;
|
|
9835
|
+
rotate: -2deg;
|
|
9836
|
+
box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
|
|
9837
|
+
0 4px 8px rgb(0 0 0 / 10%);
|
|
9838
|
+
}
|
|
9839
|
+
|
|
9840
|
+
&:hover {
|
|
9841
|
+
background-color: var(--qti-hover-bg);
|
|
9842
|
+
}
|
|
9843
|
+
|
|
9844
|
+
&:focus {
|
|
9845
|
+
box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
|
|
9846
|
+
}
|
|
9847
|
+
|
|
9848
|
+
transition: transform 200ms ease-out,
|
|
9849
|
+
box-shadow 200ms ease-out,
|
|
9850
|
+
rotate 200ms ease-out;
|
|
9851
|
+
|
|
9852
|
+
cursor: grab;
|
|
9853
|
+
|
|
9854
|
+
background-color: var(--qti-bg);
|
|
9855
|
+
|
|
9856
|
+
padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
|
|
9857
|
+
|
|
9858
|
+
border-radius: var(--qti-border-radius);
|
|
9859
|
+
|
|
9860
|
+
padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);
|
|
9861
|
+
|
|
9862
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
9863
|
+
|
|
9864
|
+
outline: none;
|
|
9865
|
+
|
|
9866
|
+
background-image: radial-gradient(
|
|
9867
|
+
circle at center,
|
|
9868
|
+
rgb(0 0 0 / 10%) 0,
|
|
9869
|
+
rgb(0 0 0 / 20%) 2px,
|
|
9870
|
+
rgb(255 255 255 / 0%) 2px,
|
|
9871
|
+
rgb(255 255 255 / 0%) 100%
|
|
9872
|
+
);
|
|
9873
|
+
|
|
9874
|
+
background-repeat: repeat-y;
|
|
9875
|
+
|
|
9876
|
+
background-position: left center;
|
|
9877
|
+
|
|
9878
|
+
background-size: 14px 8px
|
|
9879
|
+
}
|
|
9880
|
+
}
|
|
9881
|
+
|
|
9882
|
+
/* The droppables */
|
|
9883
|
+
& qti-simple-match-set:last-of-type {
|
|
9884
|
+
display: grid;
|
|
9885
|
+
grid-auto-columns: 1fr; /* auto-cols-fr */
|
|
9886
|
+
grid-auto-flow: column; /* grid-flow-col */
|
|
9887
|
+
gap: var(--qti-gap-size); /* gap-2 */
|
|
9888
|
+
width: 100%; /* w-full */
|
|
9889
|
+
|
|
9890
|
+
& qti-simple-associable-choice {
|
|
9891
|
+
display: flex;
|
|
9892
|
+
flex-direction: column;
|
|
9893
|
+
}
|
|
9894
|
+
|
|
9895
|
+
& > qti-simple-associable-choice {
|
|
9896
|
+
/* a droppable qti-simple-associable-choice */
|
|
9897
|
+
box-sizing: border-box;
|
|
9898
|
+
display: grid;
|
|
9899
|
+
grid-row: 2 / 4;
|
|
9900
|
+
grid-template-rows: subgrid;
|
|
9901
|
+
|
|
9902
|
+
& img {
|
|
9903
|
+
max-width: 100%;
|
|
9904
|
+
height: auto;
|
|
9905
|
+
}
|
|
9906
|
+
|
|
9907
|
+
&[enabled] {
|
|
9908
|
+
&::part(dropslot) {
|
|
9909
|
+
background-color: var(--qti-bg-active);
|
|
9910
|
+
}
|
|
9911
|
+
}
|
|
9912
|
+
|
|
9913
|
+
&[disabled] {
|
|
9914
|
+
&::part(dropslot) {
|
|
9915
|
+
cursor: not-allowed;
|
|
9916
|
+
background-color: var(--qti-disabled-bg);
|
|
9917
|
+
color: var(--qti-disabled-color);
|
|
9918
|
+
border-color: var(--qti-border-color);
|
|
9919
|
+
outline: 4px solid var(--qti-disabled-bg);
|
|
9920
|
+
}
|
|
9921
|
+
}
|
|
9922
|
+
|
|
9923
|
+
&[active] {
|
|
9924
|
+
&::part(dropslot) {
|
|
9925
|
+
border-color: var(--qti-border-active);
|
|
9926
|
+
background-color: var(--qti-bg-active);
|
|
9927
|
+
}
|
|
9928
|
+
}
|
|
9929
|
+
|
|
9930
|
+
&::part(dropslot) {
|
|
9931
|
+
|
|
9932
|
+
&[dragging] {
|
|
9933
|
+
pointer-events: none;
|
|
9934
|
+
rotate: -2deg;
|
|
9935
|
+
box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
|
|
9936
|
+
0 4px 8px rgb(0 0 0 / 10%);
|
|
9937
|
+
}
|
|
9938
|
+
|
|
9939
|
+
&:focus {
|
|
9940
|
+
box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
|
|
9941
|
+
}
|
|
9942
|
+
|
|
9943
|
+
min-height: 6rem;
|
|
9944
|
+
gap: var(--qti-gap-size);
|
|
9945
|
+
box-sizing: border-box;
|
|
9946
|
+
display: flex;
|
|
9947
|
+
justify-content: center;
|
|
9948
|
+
align-items: center;
|
|
9949
|
+
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" stroke="%23CCCCCC" stroke-width="1" fill="transparent" /></svg>')
|
|
9950
|
+
center no-repeat;
|
|
9951
|
+
border-radius: var(--qti-border-radius);
|
|
9952
|
+
position: relative;
|
|
9953
|
+
background-color: var(--qti-bg);
|
|
9954
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
9955
|
+
outline: none;
|
|
9956
|
+
}
|
|
9957
|
+
|
|
9958
|
+
& > *:not(qti-simple-associable-choice) {
|
|
9959
|
+
pointer-events: none;
|
|
9960
|
+
}
|
|
9961
|
+
|
|
9962
|
+
& > qti-simple-associable-choice {
|
|
9963
|
+
|
|
9964
|
+
&::part(dropslot) {
|
|
9965
|
+
display: none;
|
|
9966
|
+
}
|
|
9967
|
+
|
|
9968
|
+
&:hover {
|
|
9969
|
+
background-color: var(--qti-hover-bg);
|
|
9970
|
+
}
|
|
9971
|
+
|
|
9972
|
+
&:focus {
|
|
9973
|
+
box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
|
|
9974
|
+
}
|
|
9975
|
+
|
|
9976
|
+
flex-basis: fit-content;
|
|
9977
|
+
|
|
9978
|
+
transition: transform 200ms ease-out,
|
|
9979
|
+
box-shadow 200ms ease-out,
|
|
9980
|
+
rotate 200ms ease-out;
|
|
9981
|
+
|
|
9982
|
+
cursor: grab;
|
|
9983
|
+
|
|
9984
|
+
background-color: var(--qti-bg);
|
|
9985
|
+
|
|
9986
|
+
padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
|
|
9987
|
+
|
|
9988
|
+
border-radius: var(--qti-border-radius);
|
|
9989
|
+
|
|
9990
|
+
padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);
|
|
9991
|
+
|
|
9992
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
9993
|
+
|
|
9994
|
+
outline: none;
|
|
9995
|
+
|
|
9996
|
+
background-image: radial-gradient(
|
|
9997
|
+
circle at center,
|
|
9998
|
+
rgb(0 0 0 / 10%) 0,
|
|
9999
|
+
rgb(0 0 0 / 20%) 2px,
|
|
10000
|
+
rgb(255 255 255 / 0%) 2px,
|
|
10001
|
+
rgb(255 255 255 / 0%) 100%
|
|
10002
|
+
);
|
|
10003
|
+
|
|
10004
|
+
background-repeat: repeat-y;
|
|
10005
|
+
|
|
10006
|
+
background-position: left center;
|
|
10007
|
+
|
|
10008
|
+
background-size: 14px 8px;
|
|
10009
|
+
}
|
|
10010
|
+
}
|
|
10011
|
+
}
|
|
10012
|
+
}
|
|
10013
|
+
|
|
10014
|
+
qti-order-interaction:state(--dragzone-active)::part(drags) {
|
|
10015
|
+
border-color: var(--qti-border-active);
|
|
10016
|
+
background-color: var(--qti-bg-active);
|
|
10017
|
+
}
|
|
10018
|
+
|
|
10019
|
+
qti-order-interaction:state(--dragzone-enabled)::part(drags) {
|
|
10020
|
+
background-color: var(--qti-bg-active);
|
|
10021
|
+
}
|
|
10022
|
+
|
|
10023
|
+
qti-order-interaction {
|
|
10024
|
+
&::part(qti-simple-choice),
|
|
10025
|
+
& qti-simple-choice {
|
|
10026
|
+
|
|
10027
|
+
&[dragging] {
|
|
10028
|
+
pointer-events: none;
|
|
10029
|
+
rotate: -2deg;
|
|
10030
|
+
box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
|
|
10031
|
+
0 4px 8px rgb(0 0 0 / 10%);
|
|
10032
|
+
}
|
|
10033
|
+
|
|
10034
|
+
&:hover {
|
|
10035
|
+
background-color: var(--qti-hover-bg);
|
|
10036
|
+
}
|
|
10037
|
+
|
|
10038
|
+
&:focus {
|
|
10039
|
+
box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
|
|
10040
|
+
}
|
|
10041
|
+
|
|
10042
|
+
transition: transform 200ms ease-out,
|
|
10043
|
+
box-shadow 200ms ease-out,
|
|
10044
|
+
rotate 200ms ease-out;
|
|
10045
|
+
|
|
10046
|
+
cursor: grab;
|
|
10047
|
+
|
|
10048
|
+
background-color: var(--qti-bg);
|
|
10049
|
+
|
|
10050
|
+
padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
|
|
10051
|
+
|
|
10052
|
+
border-radius: var(--qti-border-radius);
|
|
10053
|
+
|
|
10054
|
+
padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);
|
|
10055
|
+
|
|
10056
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
10057
|
+
|
|
10058
|
+
outline: none;
|
|
10059
|
+
|
|
10060
|
+
background-image: radial-gradient(
|
|
10061
|
+
circle at center,
|
|
10062
|
+
rgb(0 0 0 / 10%) 0,
|
|
10063
|
+
rgb(0 0 0 / 20%) 2px,
|
|
10064
|
+
rgb(255 255 255 / 0%) 2px,
|
|
10065
|
+
rgb(255 255 255 / 0%) 100%
|
|
10066
|
+
);
|
|
10067
|
+
|
|
10068
|
+
background-repeat: repeat-y;
|
|
10069
|
+
|
|
10070
|
+
background-position: left center;
|
|
10071
|
+
|
|
10072
|
+
background-size: 14px 8px
|
|
10073
|
+
}
|
|
10074
|
+
|
|
10075
|
+
&::part(qti-simple-choice) {
|
|
10076
|
+
display: flex;
|
|
10077
|
+
overflow: hidden;
|
|
10078
|
+
align-items: center;
|
|
10079
|
+
width: 100%;
|
|
10080
|
+
text-overflow: ellipsis;
|
|
10081
|
+
}
|
|
10082
|
+
|
|
10083
|
+
&::part(drops) {
|
|
10084
|
+
gap: 0.5rem; /* gap-2 */
|
|
10085
|
+
}
|
|
10086
|
+
|
|
10087
|
+
&::part(drags) {
|
|
10088
|
+
gap: 0.5rem; /* gap-2 */
|
|
10089
|
+
}
|
|
10090
|
+
|
|
10091
|
+
&::part(drop-list) {
|
|
10092
|
+
|
|
10093
|
+
&[enabled] {
|
|
10094
|
+
|
|
10095
|
+
/* Light theme override */
|
|
10096
|
+
.qti-selections-light & {
|
|
10097
|
+
border-color: var(--qti-light-border-active);
|
|
10098
|
+
}
|
|
10099
|
+
|
|
10100
|
+
/* Dark theme override */
|
|
10101
|
+
.qti-selections-dark & {
|
|
10102
|
+
border-color: var(--qti-dark-border-active);
|
|
10103
|
+
}
|
|
10104
|
+
background-color: var(--qti-bg-active)
|
|
10105
|
+
}
|
|
10106
|
+
|
|
10107
|
+
&:hover {
|
|
10108
|
+
background-color: var(--qti-hover-bg);
|
|
10109
|
+
}
|
|
10110
|
+
|
|
10111
|
+
&:focus {
|
|
10112
|
+
box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
|
|
10113
|
+
}
|
|
10114
|
+
|
|
10115
|
+
display: flex;
|
|
10116
|
+
min-height: 4rem;
|
|
10117
|
+
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" stroke="%23CCCCCC" stroke-width="1" fill="transparent" /></svg>')
|
|
10118
|
+
center no-repeat;
|
|
10119
|
+
border-radius: var(--qti-border-radius);
|
|
10120
|
+
position: relative;
|
|
10121
|
+
background-color: var(--qti-bg);
|
|
10122
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
10123
|
+
outline: none;
|
|
10124
|
+
}
|
|
10125
|
+
|
|
10126
|
+
&::part(active) {
|
|
10127
|
+
border-color: var(--qti-border-active);
|
|
10128
|
+
background-color: var(--qti-bg-active);
|
|
10129
|
+
}
|
|
10130
|
+
|
|
10131
|
+
& drop-list {
|
|
10132
|
+
&[shape='circle'] {
|
|
10133
|
+
|
|
10134
|
+
&:hover {
|
|
10135
|
+
background-color: var(--qti-hover-bg);
|
|
10136
|
+
}
|
|
10137
|
+
|
|
10138
|
+
&:focus {
|
|
10139
|
+
box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
|
|
10140
|
+
}
|
|
10141
|
+
|
|
10142
|
+
&[aria-checked='true'] {
|
|
10143
|
+
border-color: var(--qti-border-active);
|
|
10144
|
+
background-color: var(--qti-bg-active);
|
|
10145
|
+
}
|
|
10146
|
+
|
|
10147
|
+
&[aria-readonly='true'] {
|
|
10148
|
+
cursor: pointer;
|
|
10149
|
+
background-color: var(--qti-bg);
|
|
10150
|
+
outline: 0;
|
|
10151
|
+
border: none;
|
|
10152
|
+
}
|
|
10153
|
+
|
|
10154
|
+
&[aria-disabled='true'] {
|
|
10155
|
+
cursor: not-allowed;
|
|
10156
|
+
background-color: var(--qti-disabled-bg);
|
|
10157
|
+
color: var(--qti-disabled-color);
|
|
10158
|
+
border-color: var(--qti-border-color);
|
|
10159
|
+
outline: 4px solid var(--qti-disabled-bg);
|
|
10160
|
+
}
|
|
10161
|
+
|
|
10162
|
+
width: 100%;
|
|
10163
|
+
|
|
10164
|
+
height: 100%;
|
|
10165
|
+
|
|
10166
|
+
background-color: transparent;
|
|
10167
|
+
|
|
10168
|
+
padding: 0;
|
|
10169
|
+
|
|
10170
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
10171
|
+
|
|
10172
|
+
outline: none
|
|
10173
|
+
}
|
|
10174
|
+
|
|
10175
|
+
&[shape='square'] {
|
|
10176
|
+
|
|
10177
|
+
&:hover {
|
|
10178
|
+
background-color: var(--qti-hover-bg);
|
|
10179
|
+
}
|
|
10180
|
+
|
|
10181
|
+
&:focus {
|
|
10182
|
+
box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
|
|
10183
|
+
}
|
|
10184
|
+
|
|
10185
|
+
&[aria-checked='true'] {
|
|
10186
|
+
border-color: var(--qti-border-active);
|
|
10187
|
+
background-color: var(--qti-bg-active);
|
|
10188
|
+
}
|
|
10189
|
+
|
|
10190
|
+
&[aria-readonly='true'] {
|
|
10191
|
+
cursor: pointer;
|
|
10192
|
+
background-color: var(--qti-bg);
|
|
10193
|
+
outline: 0;
|
|
10194
|
+
border: none;
|
|
10195
|
+
}
|
|
10196
|
+
|
|
10197
|
+
&[aria-disabled='true'] {
|
|
10198
|
+
cursor: not-allowed;
|
|
10199
|
+
background-color: var(--qti-disabled-bg);
|
|
10200
|
+
color: var(--qti-disabled-color);
|
|
10201
|
+
border-color: var(--qti-border-color);
|
|
10202
|
+
outline: 4px solid var(--qti-disabled-bg);
|
|
10203
|
+
}
|
|
10204
|
+
|
|
10205
|
+
width: 100%;
|
|
10206
|
+
|
|
10207
|
+
height: 100%;
|
|
10208
|
+
|
|
10209
|
+
background-color: transparent;
|
|
10210
|
+
|
|
10211
|
+
padding: 0;
|
|
10212
|
+
|
|
10213
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
10214
|
+
|
|
10215
|
+
outline: none
|
|
10216
|
+
}
|
|
10217
|
+
}
|
|
10218
|
+
}
|
|
10219
|
+
|
|
10220
|
+
qti-associate-interaction {
|
|
10221
|
+
/* General styles for active and enabled states */
|
|
10222
|
+
&:state(--dragzone-active) slot[name='qti-simple-associable-choice'] {
|
|
10223
|
+
border-color: var(--qti-border-active);
|
|
10224
|
+
background-color: var(--qti-bg-active);
|
|
10225
|
+
}
|
|
10226
|
+
|
|
10227
|
+
&:state(--dragzone-enabled) slot[name='qti-simple-associable-choice'] {
|
|
10228
|
+
background-color: var(--qti-bg-active);
|
|
10229
|
+
}
|
|
10230
|
+
|
|
10231
|
+
& qti-simple-associable-choice, /* drags when in lightdom */
|
|
10232
|
+
&::part(qti-simple-associable-choice) /* drags when in shadowdom */ {
|
|
10233
|
+
|
|
10234
|
+
&:hover {
|
|
10235
|
+
background-color: var(--qti-hover-bg);
|
|
10236
|
+
}
|
|
10237
|
+
|
|
10238
|
+
&:focus {
|
|
10239
|
+
box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
|
|
10240
|
+
}
|
|
10241
|
+
|
|
10242
|
+
&[dragging] {
|
|
10243
|
+
pointer-events: none;
|
|
10244
|
+
rotate: -2deg;
|
|
10245
|
+
box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
|
|
10246
|
+
0 4px 8px rgb(0 0 0 / 10%);
|
|
10247
|
+
}
|
|
10248
|
+
|
|
10249
|
+
transition: transform 200ms ease-out,
|
|
10250
|
+
box-shadow 200ms ease-out,
|
|
10251
|
+
rotate 200ms ease-out;
|
|
10252
|
+
|
|
10253
|
+
cursor: grab;
|
|
10254
|
+
|
|
10255
|
+
background-color: var(--qti-bg);
|
|
10256
|
+
|
|
10257
|
+
padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
|
|
10258
|
+
|
|
10259
|
+
border-radius: var(--qti-border-radius);
|
|
10260
|
+
|
|
10261
|
+
padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);
|
|
10262
|
+
|
|
10263
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
10264
|
+
|
|
10265
|
+
outline: none;
|
|
10266
|
+
|
|
10267
|
+
background-image: radial-gradient(
|
|
10268
|
+
circle at center,
|
|
10269
|
+
rgb(0 0 0 / 10%) 0,
|
|
10270
|
+
rgb(0 0 0 / 20%) 2px,
|
|
10271
|
+
rgb(255 255 255 / 0%) 2px,
|
|
10272
|
+
rgb(255 255 255 / 0%) 100%
|
|
10273
|
+
);
|
|
10274
|
+
|
|
10275
|
+
background-repeat: repeat-y;
|
|
10276
|
+
|
|
10277
|
+
background-position: left center;
|
|
10278
|
+
|
|
10279
|
+
background-size: 14px 8px
|
|
10280
|
+
}
|
|
10281
|
+
|
|
10282
|
+
/* display: flex;
|
|
10283
|
+
overflow: hidden;
|
|
10284
|
+
align-items: center; */
|
|
10285
|
+
|
|
10286
|
+
/* &::part(drop-container) {
|
|
10287
|
+
display: flex;
|
|
10288
|
+
flex-direction: column;
|
|
10289
|
+
gap: var(--qti-gap-size);
|
|
10290
|
+
} */
|
|
10291
|
+
|
|
10292
|
+
&::part(drop-list) {
|
|
10293
|
+
|
|
10294
|
+
display: grid;
|
|
10295
|
+
height: 3rem;
|
|
10296
|
+
min-width: 10rem;
|
|
10297
|
+
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" stroke="%23CCCCCC" stroke-width="1" fill="transparent" /></svg>')
|
|
10298
|
+
center no-repeat;
|
|
10299
|
+
border-radius: var(--qti-border-radius);
|
|
10300
|
+
position: relative;
|
|
10301
|
+
background-color: var(--qti-bg);
|
|
10302
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
10303
|
+
outline: none;
|
|
10304
|
+
}
|
|
10305
|
+
|
|
10306
|
+
&::part(drop-list):focus {
|
|
10307
|
+
box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
|
|
10308
|
+
}
|
|
10309
|
+
|
|
10310
|
+
&::part(drop-list)[dragging] {
|
|
10311
|
+
border-color: var(--qti-border-active);
|
|
10312
|
+
background-color: var(--qti-bg-active);
|
|
10313
|
+
}
|
|
10314
|
+
|
|
10315
|
+
/* &::part(drop-list) {
|
|
10316
|
+
@apply act;
|
|
10317
|
+
} */
|
|
10318
|
+
}
|
|
10319
|
+
|
|
10320
|
+
qti-graphic-order-interaction {
|
|
10321
|
+
& qti-hotspot-choice {
|
|
10322
|
+
|
|
10323
|
+
&:hover {
|
|
10324
|
+
background-color: var(--qti-hover-bg);
|
|
10325
|
+
}
|
|
10326
|
+
|
|
10327
|
+
&:focus {
|
|
10328
|
+
box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
|
|
10329
|
+
}
|
|
10330
|
+
|
|
10331
|
+
&:state(--checked),
|
|
10332
|
+
&[aria-checked='true'] {
|
|
10333
|
+
border-color: var(--qti-border-active);
|
|
10334
|
+
background-color: var(--qti-bg-active);
|
|
10335
|
+
}
|
|
10336
|
+
|
|
10337
|
+
&[aria-readonly='true'] {
|
|
10338
|
+
cursor: pointer;
|
|
10339
|
+
background-color: var(--qti-bg);
|
|
10340
|
+
outline: 0;
|
|
10341
|
+
border: none;
|
|
10342
|
+
}
|
|
10343
|
+
|
|
10344
|
+
&[aria-disabled='true'] {
|
|
10345
|
+
cursor: not-allowed;
|
|
10346
|
+
background-color: var(--qti-disabled-bg);
|
|
10347
|
+
color: var(--qti-disabled-color);
|
|
10348
|
+
border-color: var(--qti-border-color);
|
|
10349
|
+
outline: 4px solid var(--qti-disabled-bg);
|
|
10350
|
+
}
|
|
10351
|
+
|
|
10352
|
+
&[aria-ordervalue] {
|
|
10353
|
+
display: grid;
|
|
10354
|
+
place-content: center;
|
|
10355
|
+
}
|
|
10356
|
+
|
|
10357
|
+
&[aria-ordervalue]::after {
|
|
10358
|
+
content: attr(aria-ordervalue) !important;
|
|
10359
|
+
}
|
|
10360
|
+
|
|
10361
|
+
width: 100%;
|
|
10362
|
+
|
|
10363
|
+
height: 100%;
|
|
10364
|
+
|
|
10365
|
+
background-color: transparent;
|
|
10366
|
+
|
|
10367
|
+
padding: 0;
|
|
10368
|
+
|
|
10369
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
10370
|
+
|
|
10371
|
+
outline: none
|
|
10372
|
+
}
|
|
10373
|
+
|
|
10374
|
+
&.qti-selections-light {
|
|
10375
|
+
&:state(--dragzone-active)::part(drags) {
|
|
10376
|
+
background-color: var(--qti-light-bg-active);
|
|
10377
|
+
border-color: var(--qti-light-border-active);
|
|
10378
|
+
}
|
|
10379
|
+
|
|
10380
|
+
&:state(--dragzone-enabled)::part(drags) {
|
|
10381
|
+
background-color: var(--qti-light-bg-active);
|
|
10382
|
+
}
|
|
10383
|
+
}
|
|
10384
|
+
|
|
10385
|
+
&.qti-selections-dark {
|
|
10386
|
+
&:state(--dragzone-active)::part(drags) {
|
|
10387
|
+
background-color: var(--qti-dark-bg-active);
|
|
10388
|
+
border-color: var(--qti-dark-border-active);
|
|
10389
|
+
}
|
|
10390
|
+
|
|
10391
|
+
&:state(--dragzone-enabled)::part(drags) {
|
|
10392
|
+
background-color: var(--qti-dark-bg-active);
|
|
10393
|
+
}
|
|
10394
|
+
}
|
|
10395
|
+
|
|
10396
|
+
/* General styles for active and enabled states */
|
|
10397
|
+
&:state(--dragzone-active)::part(drags) {
|
|
10398
|
+
border-color: var(--qti-border-active);
|
|
10399
|
+
background-color: var(--qti-bg-active);
|
|
10400
|
+
}
|
|
10401
|
+
|
|
10402
|
+
&:state(--dragzone-enabled)::part(drags) {
|
|
10403
|
+
background-color: var(--qti-bg-active);
|
|
10404
|
+
}
|
|
10405
|
+
}
|
|
10406
|
+
|
|
10407
|
+
qti-graphic-associate-interaction {
|
|
10408
|
+
position: relative;
|
|
10409
|
+
display: block;
|
|
10410
|
+
|
|
10411
|
+
& qti-associable-hotspot {
|
|
10412
|
+
&[shape='circle'] {
|
|
10413
|
+
|
|
10414
|
+
&:hover {
|
|
10415
|
+
background-color: var(--qti-hover-bg);
|
|
10416
|
+
}
|
|
10417
|
+
|
|
10418
|
+
&:focus {
|
|
10419
|
+
box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
|
|
10420
|
+
}
|
|
10421
|
+
|
|
10422
|
+
&[aria-checked='true'] {
|
|
10423
|
+
border-color: var(--qti-border-active);
|
|
10424
|
+
background-color: var(--qti-bg-active);
|
|
10425
|
+
}
|
|
10426
|
+
|
|
10427
|
+
&[aria-readonly='true'] {
|
|
10428
|
+
cursor: pointer;
|
|
10429
|
+
background-color: var(--qti-bg);
|
|
10430
|
+
outline: 0;
|
|
10431
|
+
border: none;
|
|
10432
|
+
}
|
|
10433
|
+
|
|
10434
|
+
&[aria-disabled='true'] {
|
|
10435
|
+
cursor: not-allowed;
|
|
10436
|
+
background-color: var(--qti-disabled-bg);
|
|
10437
|
+
color: var(--qti-disabled-color);
|
|
10438
|
+
border-color: var(--qti-border-color);
|
|
10439
|
+
outline: 4px solid var(--qti-disabled-bg);
|
|
10440
|
+
}
|
|
10441
|
+
|
|
10442
|
+
width: 100%;
|
|
10443
|
+
|
|
10444
|
+
height: 100%;
|
|
10445
|
+
|
|
10446
|
+
background-color: transparent;
|
|
10447
|
+
|
|
10448
|
+
padding: 0;
|
|
10449
|
+
|
|
10450
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
10451
|
+
|
|
10452
|
+
outline: none
|
|
10453
|
+
}
|
|
10454
|
+
|
|
10455
|
+
&[shape='square'] {
|
|
10456
|
+
|
|
10457
|
+
&:hover {
|
|
10458
|
+
background-color: var(--qti-hover-bg);
|
|
10459
|
+
}
|
|
10460
|
+
|
|
10461
|
+
&:focus {
|
|
10462
|
+
box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
|
|
10463
|
+
}
|
|
10464
|
+
|
|
10465
|
+
&[aria-checked='true'] {
|
|
10466
|
+
border-color: var(--qti-border-active);
|
|
10467
|
+
background-color: var(--qti-bg-active);
|
|
10468
|
+
}
|
|
10469
|
+
|
|
10470
|
+
&[aria-readonly='true'] {
|
|
10471
|
+
cursor: pointer;
|
|
10472
|
+
background-color: var(--qti-bg);
|
|
10473
|
+
outline: 0;
|
|
10474
|
+
border: none;
|
|
10475
|
+
}
|
|
10476
|
+
|
|
10477
|
+
&[aria-disabled='true'] {
|
|
10478
|
+
cursor: not-allowed;
|
|
10479
|
+
background-color: var(--qti-disabled-bg);
|
|
10480
|
+
color: var(--qti-disabled-color);
|
|
10481
|
+
border-color: var(--qti-border-color);
|
|
10482
|
+
outline: 4px solid var(--qti-disabled-bg);
|
|
10483
|
+
}
|
|
10484
|
+
|
|
10485
|
+
width: 100%;
|
|
10486
|
+
|
|
10487
|
+
height: 100%;
|
|
10488
|
+
|
|
10489
|
+
background-color: transparent;
|
|
10490
|
+
|
|
10491
|
+
padding: 0;
|
|
10492
|
+
|
|
10493
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
10494
|
+
|
|
10495
|
+
outline: none
|
|
10496
|
+
}
|
|
10497
|
+
}
|
|
10498
|
+
|
|
10499
|
+
&.qti-selections-light {
|
|
10500
|
+
&:state(--dragzone-active)::part(drags) {
|
|
10501
|
+
background-color: var(--qti-light-bg-active);
|
|
10502
|
+
border-color: var(--qti-light-border-active);
|
|
10503
|
+
}
|
|
10504
|
+
|
|
10505
|
+
&:state(--dragzone-enabled)::part(drags) {
|
|
10506
|
+
background-color: var(--qti-light-bg-active);
|
|
10507
|
+
}
|
|
10508
|
+
}
|
|
10509
|
+
|
|
10510
|
+
&.qti-selections-dark {
|
|
10511
|
+
&:state(--dragzone-active)::part(drags) {
|
|
10512
|
+
background-color: var(--qti-dark-bg-active);
|
|
10513
|
+
border-color: var(--qti-dark-border-active);
|
|
10514
|
+
}
|
|
10515
|
+
|
|
10516
|
+
&:state(--dragzone-enabled)::part(drags) {
|
|
10517
|
+
background-color: var(--qti-dark-bg-active);
|
|
10518
|
+
}
|
|
10519
|
+
}
|
|
10520
|
+
|
|
10521
|
+
/* General styles for active and enabled states */
|
|
10522
|
+
&:state(--dragzone-active)::part(drags) {
|
|
10523
|
+
border-color: var(--qti-border-active);
|
|
10524
|
+
background-color: var(--qti-bg-active);
|
|
10525
|
+
}
|
|
10526
|
+
|
|
10527
|
+
&:state(--dragzone-enabled)::part(drags) {
|
|
10528
|
+
background-color: var(--qti-bg-active);
|
|
10529
|
+
}
|
|
10530
|
+
}
|
|
10531
|
+
|
|
10532
|
+
qti-slider-interaction {
|
|
10533
|
+
display: block;
|
|
10534
|
+
|
|
10535
|
+
--qti-tick-color: rgb(229 231 235 / 100%);
|
|
10536
|
+
--qti-tick-width: 1px;
|
|
10537
|
+
|
|
10538
|
+
&::part(slider) {
|
|
10539
|
+
margin-left: 2rem; /* mx-8 */
|
|
10540
|
+
margin-right: 2rem;
|
|
10541
|
+
padding-bottom: 1rem; /* pb-4 */
|
|
10542
|
+
padding-top: 1.25rem; /* pt-5 */
|
|
10543
|
+
}
|
|
10544
|
+
|
|
10545
|
+
--show-bounds: true;
|
|
10546
|
+
|
|
10547
|
+
&::part(bounds) {
|
|
10548
|
+
display: flex;
|
|
10549
|
+
width: 100%;
|
|
10550
|
+
justify-content: space-between;
|
|
10551
|
+
margin-bottom: 0.5rem; /* mb-2 */
|
|
10552
|
+
}
|
|
6930
10553
|
|
|
6931
|
-
|
|
6932
|
-
var TestPagingButtonsStamp = class extends TestComponent {
|
|
6933
|
-
constructor() {
|
|
6934
|
-
super();
|
|
6935
|
-
this.maxDisplayedItems = 2;
|
|
6936
|
-
this.skipOnCategory = "dep-informational";
|
|
6937
|
-
this._internals.ariaLabel = "pagination";
|
|
6938
|
-
}
|
|
6939
|
-
createRenderRoot() {
|
|
6940
|
-
return this;
|
|
6941
|
-
}
|
|
6942
|
-
render() {
|
|
6943
|
-
const items = this._testContext.items.reduce(
|
|
6944
|
-
(acc, item) => {
|
|
6945
|
-
const isDepInfoItem = item.category?.split(" ").includes(this.skipOnCategory);
|
|
6946
|
-
const newIndex = isDepInfoItem ? "i" : acc.counter++;
|
|
6947
|
-
acc.result.push({
|
|
6948
|
-
...item,
|
|
6949
|
-
newIndex
|
|
6950
|
-
// Assign the new index, which only increments for non-info items
|
|
6951
|
-
});
|
|
6952
|
-
return acc;
|
|
6953
|
-
},
|
|
6954
|
-
{ counter: 0, result: [] }
|
|
6955
|
-
).result;
|
|
6956
|
-
const itemIndex = items.findIndex((item) => item.identifier === this._testContext.navItemId);
|
|
6957
|
-
const start = Math.max(0, itemIndex - this.maxDisplayedItems);
|
|
6958
|
-
const end = Math.min(items.length, itemIndex + this.maxDisplayedItems + 1);
|
|
6959
|
-
const clampedItems = items.slice(start, end);
|
|
6960
|
-
return x`
|
|
6961
|
-
${clampedItems.map((item) => {
|
|
6962
|
-
const rawscore = item.variables.find((vr) => vr.identifier == "SCORE");
|
|
6963
|
-
const score = parseInt(rawscore?.value?.toString());
|
|
6964
|
-
const completionStatus = item.variables.find((v3) => v3.identifier === "completionStatus")?.value;
|
|
6965
|
-
const type = item.category !== this.skipOnCategory ? "regular" : "info";
|
|
6966
|
-
const active = this._testContext.navItemId === item.identifier;
|
|
6967
|
-
const correct = this._testContext.view === "scorer" && type == "regular" && score !== void 0 && !isNaN(score) && score > 0;
|
|
6968
|
-
const incorrect = this._testContext.view === "scorer" && type == "regular" && score !== void 0 && !isNaN(score) && score <= 0;
|
|
6969
|
-
const answered = this._testContext.view === "candidate" && completionStatus === "completed" && item.category !== this.skipOnCategory;
|
|
6970
|
-
const computedItem = {
|
|
6971
|
-
...item,
|
|
6972
|
-
type,
|
|
6973
|
-
active,
|
|
6974
|
-
correct,
|
|
6975
|
-
incorrect,
|
|
6976
|
-
answered
|
|
6977
|
-
};
|
|
6978
|
-
const templateElement = this.firstElementChild;
|
|
6979
|
-
const myTemplate = prepareTemplate(templateElement);
|
|
6980
|
-
return myTemplate({ item: computedItem });
|
|
6981
|
-
})}
|
|
6982
|
-
`;
|
|
6983
|
-
}
|
|
6984
|
-
};
|
|
6985
|
-
__decorateClass([
|
|
6986
|
-
n5({ type: Number, attribute: "max-displayed-items" })
|
|
6987
|
-
], TestPagingButtonsStamp.prototype, "maxDisplayedItems", 2);
|
|
6988
|
-
__decorateClass([
|
|
6989
|
-
n5({ type: String, attribute: "skip-on-category" })
|
|
6990
|
-
], TestPagingButtonsStamp.prototype, "skipOnCategory", 2);
|
|
6991
|
-
TestPagingButtonsStamp = __decorateClass([
|
|
6992
|
-
t4("test-paging-buttons-stamp")
|
|
6993
|
-
], TestPagingButtonsStamp);
|
|
10554
|
+
--show-ticks: true;
|
|
6994
10555
|
|
|
6995
|
-
|
|
6996
|
-
|
|
6997
|
-
|
|
6998
|
-
|
|
6999
|
-
|
|
7000
|
-
|
|
10556
|
+
&::part(ticks) {
|
|
10557
|
+
margin-left: 0.125rem; /* mx-0.5 */
|
|
10558
|
+
margin-right: 0.125rem;
|
|
10559
|
+
margin-bottom: 0.25rem; /* mb-1 */
|
|
10560
|
+
height: 0.5rem; /* h-2 */
|
|
10561
|
+
background: linear-gradient(to right, var(--qti-tick-color) var(--qti-tick-width), transparent 1px) repeat-x 0
|
|
10562
|
+
center / calc(calc(100% - var(--qti-tick-width)) / ((var(--max) - var(--min)) / var(--step))) 100%;
|
|
7001
10563
|
}
|
|
7002
|
-
|
|
7003
|
-
|
|
10564
|
+
|
|
10565
|
+
&::part(rail) {
|
|
10566
|
+
display: flex;
|
|
10567
|
+
align-items: center;
|
|
10568
|
+
box-sizing: border-box;
|
|
10569
|
+
height: 0.375rem; /* h-1.5 */
|
|
10570
|
+
width: 100%;
|
|
10571
|
+
cursor: pointer;
|
|
10572
|
+
border-radius: 9999px; /* rounded-full */
|
|
10573
|
+
border: 1px solid #d1d5db; /* border-gray-300 */
|
|
10574
|
+
background-color: #e5e7eb; /* bg-gray-200 */
|
|
7004
10575
|
}
|
|
7005
|
-
|
|
7006
|
-
|
|
7007
|
-
|
|
7008
|
-
|
|
7009
|
-
|
|
7010
|
-
|
|
7011
|
-
|
|
7012
|
-
|
|
7013
|
-
|
|
7014
|
-
|
|
10576
|
+
|
|
10577
|
+
&::part(knob) {
|
|
10578
|
+
background-color: var(--qti-primary);
|
|
10579
|
+
position: relative;
|
|
10580
|
+
height: 1rem; /* h-4 */
|
|
10581
|
+
width: 1rem; /* w-4 */
|
|
10582
|
+
transform-origin: center;
|
|
10583
|
+
transform: translateX(-50%);
|
|
10584
|
+
cursor: pointer;
|
|
10585
|
+
border-radius: 9999px; /* rounded-full */
|
|
10586
|
+
left: var(--value-percentage);
|
|
7015
10587
|
}
|
|
7016
|
-
|
|
7017
|
-
|
|
10588
|
+
|
|
10589
|
+
--show-value: true;
|
|
10590
|
+
|
|
10591
|
+
&::part(value) {
|
|
10592
|
+
position: absolute;
|
|
10593
|
+
bottom: 2rem; /* bottom-8 */
|
|
10594
|
+
left: 0.5rem; /* left-2 */
|
|
10595
|
+
transform: translateX(-50%);
|
|
10596
|
+
cursor: pointer;
|
|
10597
|
+
border-radius: 0.25rem; /* rounded */
|
|
10598
|
+
background-color: #f3f4f6; /* bg-gray-100 */
|
|
10599
|
+
padding: 0.25rem 0.5rem; /* px-2 py-1 */
|
|
10600
|
+
text-align: center;
|
|
10601
|
+
color: #6b7280; /* text-gray-500 */
|
|
7018
10602
|
}
|
|
7019
10603
|
}
|
|
7020
|
-
|
|
7021
|
-
|
|
7022
|
-
|
|
7023
|
-
|
|
7024
|
-
|
|
7025
|
-
|
|
7026
|
-
|
|
7027
|
-
|
|
7028
|
-
|
|
7029
|
-
|
|
10604
|
+
|
|
10605
|
+
qti-select-point-interaction {
|
|
10606
|
+
&::part(point) {
|
|
10607
|
+
&:hover {
|
|
10608
|
+
background-color: var(--qti-hover-bg);
|
|
10609
|
+
}
|
|
10610
|
+
|
|
10611
|
+
&:focus {
|
|
10612
|
+
box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
|
|
10613
|
+
}
|
|
10614
|
+
|
|
10615
|
+
border-radius: 100%;
|
|
10616
|
+
|
|
10617
|
+
width: var(--qti-point-size);
|
|
10618
|
+
|
|
10619
|
+
height: var(--qti-point-size);
|
|
10620
|
+
|
|
10621
|
+
background-color: transparent;
|
|
10622
|
+
|
|
10623
|
+
padding: 0;
|
|
10624
|
+
|
|
10625
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
10626
|
+
|
|
10627
|
+
outline: none;
|
|
10628
|
+
}
|
|
10629
|
+
}
|
|
10630
|
+
|
|
10631
|
+
qti-position-object-stage {
|
|
10632
|
+
& qti-position-object-interaction {
|
|
10633
|
+
/* no styles necessary, only layout styles, defined in the component */
|
|
10634
|
+
}
|
|
10635
|
+
}
|
|
10636
|
+
|
|
10637
|
+
qti-prompt {
|
|
10638
|
+
margin: 0.5rem 0; /* my-2 */
|
|
10639
|
+
display: block;
|
|
10640
|
+
width: 100%;
|
|
10641
|
+
}
|
|
7030
10642
|
}
|
|
10643
|
+
`;
|
|
7031
10644
|
|
|
7032
10645
|
// src/lib/qti-item/qti-item.ts
|
|
7033
10646
|
var QtiItem = class extends QtiItemMixin(r4) {
|
|
10647
|
+
connectedCallback() {
|
|
10648
|
+
super.connectedCallback();
|
|
10649
|
+
const sheet = new CSSStyleSheet();
|
|
10650
|
+
sheet.replaceSync(item_default2);
|
|
10651
|
+
this.shadowRoot.adoptedStyleSheets = [sheet];
|
|
10652
|
+
}
|
|
7034
10653
|
};
|
|
7035
10654
|
QtiItem = __decorateClass([
|
|
7036
10655
|
t4("qti-item")
|
|
@@ -10492,20 +14111,14 @@ var TouchDragAndDrop = class _TouchDragAndDrop {
|
|
|
10492
14111
|
}
|
|
10493
14112
|
findClosestDropzone() {
|
|
10494
14113
|
if (!this.dragSource || this.allDropzones.length === 0) return null;
|
|
10495
|
-
const
|
|
10496
|
-
const dragCorners = this.getCorners(dragRect);
|
|
10497
|
-
const dragCenter = this.getCenter(dragRect);
|
|
14114
|
+
const dragCenter = this.getCenter(this.dragSource.getBoundingClientRect());
|
|
10498
14115
|
let closestDropzone = null;
|
|
10499
14116
|
let minDistance = Infinity;
|
|
10500
14117
|
for (const dropzone of this.allDropzones) {
|
|
10501
|
-
const
|
|
10502
|
-
const
|
|
10503
|
-
|
|
10504
|
-
|
|
10505
|
-
const centerDistance = this.calculateDistance(dragCenter, dropCenter);
|
|
10506
|
-
const totalDistance = cornerDistance * 0.5 + centerDistance * 0.5;
|
|
10507
|
-
if (totalDistance < minDistance) {
|
|
10508
|
-
minDistance = totalDistance;
|
|
14118
|
+
const dropCenter = this.getCenter(dropzone.getBoundingClientRect());
|
|
14119
|
+
const distance = this.calculateDistance(dragCenter, dropCenter);
|
|
14120
|
+
if (distance < minDistance) {
|
|
14121
|
+
minDistance = distance;
|
|
10509
14122
|
closestDropzone = dropzone;
|
|
10510
14123
|
}
|
|
10511
14124
|
}
|
|
@@ -10517,20 +14130,6 @@ var TouchDragAndDrop = class _TouchDragAndDrop {
|
|
|
10517
14130
|
y: rect.top + rect.height / 2
|
|
10518
14131
|
};
|
|
10519
14132
|
}
|
|
10520
|
-
getRectDiagonal(rect) {
|
|
10521
|
-
return Math.sqrt(rect.width ** 2 + rect.height ** 2);
|
|
10522
|
-
}
|
|
10523
|
-
getCorners(rect) {
|
|
10524
|
-
return {
|
|
10525
|
-
topLeft: { x: rect.left, y: rect.top },
|
|
10526
|
-
topRight: { x: rect.right, y: rect.top },
|
|
10527
|
-
bottomLeft: { x: rect.left, y: rect.bottom },
|
|
10528
|
-
bottomRight: { x: rect.right, y: rect.bottom }
|
|
10529
|
-
};
|
|
10530
|
-
}
|
|
10531
|
-
calculateTotalCornerDistance(cornersA, cornersB) {
|
|
10532
|
-
return this.calculateDistance(cornersA.topLeft, cornersB.topLeft) + this.calculateDistance(cornersA.topRight, cornersB.topRight) + this.calculateDistance(cornersA.bottomLeft, cornersB.bottomLeft) + this.calculateDistance(cornersA.bottomRight, cornersB.bottomRight);
|
|
10533
|
-
}
|
|
10534
14133
|
calculateDistance(pointA, pointB) {
|
|
10535
14134
|
const dx = pointA.x - pointB.x;
|
|
10536
14135
|
const dy = pointA.y - pointB.y;
|
|
@@ -10702,12 +14301,9 @@ var DroppablesMixin = (superClass, droppablesSelector) => {
|
|
|
10702
14301
|
ev.preventDefault();
|
|
10703
14302
|
}
|
|
10704
14303
|
dragoverHandler(ev) {
|
|
10705
|
-
const responseIdentifierDraggable = ev.dataTransfer.getData("responseIdentifier");
|
|
10706
14304
|
ev.preventDefault();
|
|
10707
|
-
|
|
10708
|
-
|
|
10709
|
-
ev.dataTransfer.dropEffect = "move";
|
|
10710
|
-
}
|
|
14305
|
+
this.activateDroppable(ev.currentTarget);
|
|
14306
|
+
ev.dataTransfer.dropEffect = "move";
|
|
10711
14307
|
return false;
|
|
10712
14308
|
}
|
|
10713
14309
|
activateDroppable(droppable) {
|
|
@@ -10731,16 +14327,10 @@ var DroppablesMixin = (superClass, droppablesSelector) => {
|
|
|
10731
14327
|
}
|
|
10732
14328
|
findDraggable(responseIdentifier, identifier) {
|
|
10733
14329
|
if (!identifier) return null;
|
|
10734
|
-
|
|
10735
|
-
return this.querySelector(`[identifier=${identifier}]`) || this.shadowRoot.querySelector(`[identifier=${identifier}]`);
|
|
10736
|
-
} else {
|
|
10737
|
-
const assessmentItem = this.closest("qti-assessment-item");
|
|
10738
|
-
const interaction = assessmentItem.querySelector(`[response-identifier=${responseIdentifier}]`);
|
|
10739
|
-
return interaction.querySelector(`[identifier=${identifier}]`);
|
|
10740
|
-
}
|
|
14330
|
+
return this.querySelector(`[identifier=${identifier}]`) || this.shadowRoot.querySelector(`[identifier=${identifier}]`);
|
|
10741
14331
|
}
|
|
10742
14332
|
isValidDrop(_droppable, _draggable, responseIdentifierDraggable) {
|
|
10743
|
-
return
|
|
14333
|
+
return true;
|
|
10744
14334
|
}
|
|
10745
14335
|
async moveDraggableToDroppable(draggable, droppable) {
|
|
10746
14336
|
console.log(`moveDraggableToDroppable, draggable: ${draggable.tagName}, droppable: ${droppable.tagName}`);
|
|
@@ -10856,6 +14446,8 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
|
|
|
10856
14446
|
constructor() {
|
|
10857
14447
|
super(...arguments);
|
|
10858
14448
|
this.draggables = /* @__PURE__ */ new Map();
|
|
14449
|
+
this.observer = null;
|
|
14450
|
+
this.resizeObserver = null;
|
|
10859
14451
|
this.configuration = {
|
|
10860
14452
|
copyStylesDragClone: true,
|
|
10861
14453
|
dragCanBePlacedBack: true,
|
|
@@ -10895,11 +14487,11 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
|
|
|
10895
14487
|
};
|
|
10896
14488
|
this.handleDragEnd = async (ev) => {
|
|
10897
14489
|
ev.preventDefault();
|
|
14490
|
+
const draggable = ev.currentTarget;
|
|
10898
14491
|
this._internals.states.delete("--dragzone-enabled");
|
|
10899
14492
|
this._internals.states.delete("--dragzone-active");
|
|
10900
14493
|
this.deactivateDragLocation();
|
|
10901
14494
|
this.deactivateDroppables();
|
|
10902
|
-
const draggable = ev.currentTarget;
|
|
10903
14495
|
draggable.removeAttribute("dragging");
|
|
10904
14496
|
const wasDropped = await this.wasDropped(ev);
|
|
10905
14497
|
if (!wasDropped) {
|
|
@@ -10941,6 +14533,12 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
|
|
|
10941
14533
|
this.dragContainersModified(dragContainers, []);
|
|
10942
14534
|
this.droppablesModified(droppables, []);
|
|
10943
14535
|
this.draggablesModified(draggables, []);
|
|
14536
|
+
this.updateMinDimensionsForDropZones();
|
|
14537
|
+
this.observer = new MutationObserver(() => this.updateMinDimensionsForDropZones());
|
|
14538
|
+
this.observer.observe(this, { childList: true, subtree: true });
|
|
14539
|
+
this.resizeObserver = new ResizeObserver(() => this.updateMinDimensionsForDropZones());
|
|
14540
|
+
const gapTexts = this.querySelectorAll("qti-gap-text");
|
|
14541
|
+
gapTexts.forEach((gapText) => this.resizeObserver?.observe(gapText));
|
|
10944
14542
|
}
|
|
10945
14543
|
connectedCallback() {
|
|
10946
14544
|
super.connectedCallback();
|
|
@@ -10972,6 +14570,26 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
|
|
|
10972
14570
|
draggable.addEventListener("dragstart", this.handleDragStart);
|
|
10973
14571
|
draggable.addEventListener("dragend", this.handleDragEnd);
|
|
10974
14572
|
}
|
|
14573
|
+
updateMinDimensionsForDropZones() {
|
|
14574
|
+
const gapTexts = this.querySelectorAll(draggablesSelector);
|
|
14575
|
+
const gaps = Array.from(this.querySelectorAll(droppablesSelector)).map((d3) => d3);
|
|
14576
|
+
let maxHeight = 0;
|
|
14577
|
+
let maxWidth = 0;
|
|
14578
|
+
gapTexts.forEach((gapText) => {
|
|
14579
|
+
const rect = gapText.getBoundingClientRect();
|
|
14580
|
+
maxHeight = Math.max(maxHeight, rect.height);
|
|
14581
|
+
maxWidth = Math.max(maxWidth, rect.width);
|
|
14582
|
+
});
|
|
14583
|
+
const dragContainer = this.querySelector(dragContainersSelector) || this.shadowRoot?.querySelector(dragContainersSelector);
|
|
14584
|
+
if (dragContainer) {
|
|
14585
|
+
dragContainer.style.minHeight = `${maxHeight}px`;
|
|
14586
|
+
dragContainer.style.minWidth = `${maxWidth}px`;
|
|
14587
|
+
}
|
|
14588
|
+
for (const gap of gaps) {
|
|
14589
|
+
gap.style.minHeight = `${maxHeight}px`;
|
|
14590
|
+
gap.style.minWidth = `${maxWidth}px`;
|
|
14591
|
+
}
|
|
14592
|
+
}
|
|
10975
14593
|
activateDroppables(target) {
|
|
10976
14594
|
const dragContainers = this.dragDropApi.dragContainers;
|
|
10977
14595
|
dragContainers.forEach((d3) => {
|
|
@@ -11004,13 +14622,12 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
|
|
|
11004
14622
|
});
|
|
11005
14623
|
this.dragDropApi.droppables.forEach((d3) => d3.removeAttribute("enabled"));
|
|
11006
14624
|
}
|
|
11007
|
-
|
|
11008
|
-
return ev.dataTransfer.dropEffect !== "none";
|
|
14625
|
+
wasDropped(ev) {
|
|
14626
|
+
return ev.dataTransfer.dropEffect && ev.dataTransfer.dropEffect !== "none";
|
|
11009
14627
|
}
|
|
11010
14628
|
async restoreInitialDraggablePosition(draggable) {
|
|
11011
14629
|
const { parent, index } = this.draggables.get(draggable);
|
|
11012
14630
|
const moveDraggable = (draggable2, parent2, index2) => {
|
|
11013
|
-
console.log("moveDraggable", draggable2, parent2, index2);
|
|
11014
14631
|
const targetIndex = Math.min(index2, parent2.children.length);
|
|
11015
14632
|
parent2.insertBefore(draggable2, parent2.children[targetIndex]);
|
|
11016
14633
|
draggable2.style.transform = "translate(0, 0)";
|
|
@@ -11020,8 +14637,24 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
|
|
|
11020
14637
|
moveDraggable(draggable, parent, index);
|
|
11021
14638
|
return;
|
|
11022
14639
|
}
|
|
14640
|
+
const transition = document.startViewTransition(() => {
|
|
14641
|
+
draggable.style.transform = "";
|
|
14642
|
+
moveDraggable(draggable, parent, index);
|
|
14643
|
+
});
|
|
14644
|
+
}
|
|
14645
|
+
disconnectedCallback() {
|
|
14646
|
+
super.disconnectedCallback();
|
|
14647
|
+
if (this.observer) {
|
|
14648
|
+
this.observer.disconnect();
|
|
14649
|
+
this.observer = null;
|
|
14650
|
+
}
|
|
14651
|
+
if (this.resizeObserver) {
|
|
14652
|
+
this.resizeObserver.disconnect();
|
|
14653
|
+
this.resizeObserver = null;
|
|
14654
|
+
}
|
|
11023
14655
|
}
|
|
11024
14656
|
validate() {
|
|
14657
|
+
if (!this.shadowRoot) return false;
|
|
11025
14658
|
const validAssociations = this.getValidAssociations();
|
|
11026
14659
|
let isValid = true;
|
|
11027
14660
|
let validityMessage = "";
|
|
@@ -11074,8 +14707,8 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
|
|
|
11074
14707
|
set value(value) {
|
|
11075
14708
|
if (this.isMatchTabular()) return;
|
|
11076
14709
|
this.resetDroppables();
|
|
11077
|
-
value?.forEach((entry) => this.placeResponse(entry));
|
|
11078
14710
|
if (Array.isArray(value)) {
|
|
14711
|
+
value?.forEach((entry) => this.placeResponse(entry));
|
|
11079
14712
|
const formData = new FormData();
|
|
11080
14713
|
value.forEach((response) => {
|
|
11081
14714
|
formData.append(this.responseIdentifier, response);
|
|
@@ -11191,6 +14824,7 @@ var qti_associate_interaction_styles_default = i2`
|
|
|
11191
14824
|
display: flex;
|
|
11192
14825
|
flex-wrap: wrap;
|
|
11193
14826
|
gap: 0.5rem;
|
|
14827
|
+
border: 2px solid transparent;
|
|
11194
14828
|
}
|
|
11195
14829
|
|
|
11196
14830
|
:host::part(associables-container) {
|
|
@@ -11494,57 +15128,12 @@ var QtiGapMatchInteraction = class extends DragDropInteractionMixin(
|
|
|
11494
15128
|
"qti-gap",
|
|
11495
15129
|
`slot[part='drags']`
|
|
11496
15130
|
) {
|
|
11497
|
-
constructor() {
|
|
11498
|
-
super(...arguments);
|
|
11499
|
-
this.observer = null;
|
|
11500
|
-
this.resizeObserver = null;
|
|
11501
|
-
}
|
|
11502
15131
|
render() {
|
|
11503
15132
|
return x`<slot name="prompt"> </slot>
|
|
11504
15133
|
<slot part="drags" name="drags"></slot>
|
|
11505
15134
|
<slot part="drops"></slot>
|
|
11506
15135
|
<div role="alert" id="validationMessage"></div>`;
|
|
11507
15136
|
}
|
|
11508
|
-
firstUpdated(_changedProperties) {
|
|
11509
|
-
super.firstUpdated(_changedProperties);
|
|
11510
|
-
this.updateMinDimensionsForDrowZones();
|
|
11511
|
-
this.observer = new MutationObserver(() => this.updateMinDimensionsForDrowZones());
|
|
11512
|
-
this.observer.observe(this, { childList: true, subtree: true });
|
|
11513
|
-
this.resizeObserver = new ResizeObserver(() => this.updateMinDimensionsForDrowZones());
|
|
11514
|
-
const gapTexts = this.querySelectorAll("qti-gap-text");
|
|
11515
|
-
gapTexts.forEach((gapText) => this.resizeObserver?.observe(gapText));
|
|
11516
|
-
}
|
|
11517
|
-
disconnectedCallback() {
|
|
11518
|
-
super.disconnectedCallback();
|
|
11519
|
-
if (this.observer) {
|
|
11520
|
-
this.observer.disconnect();
|
|
11521
|
-
this.observer = null;
|
|
11522
|
-
}
|
|
11523
|
-
if (this.resizeObserver) {
|
|
11524
|
-
this.resizeObserver.disconnect();
|
|
11525
|
-
this.resizeObserver = null;
|
|
11526
|
-
}
|
|
11527
|
-
}
|
|
11528
|
-
updateMinDimensionsForDrowZones() {
|
|
11529
|
-
const gapTexts = this.querySelectorAll("qti-gap-text");
|
|
11530
|
-
const gaps = this.querySelectorAll("qti-gap");
|
|
11531
|
-
let maxHeight = 0;
|
|
11532
|
-
let maxWidth = 0;
|
|
11533
|
-
gapTexts.forEach((gapText) => {
|
|
11534
|
-
const rect = gapText.getBoundingClientRect();
|
|
11535
|
-
maxHeight = Math.max(maxHeight, rect.height);
|
|
11536
|
-
maxWidth = Math.max(maxWidth, rect.width);
|
|
11537
|
-
});
|
|
11538
|
-
const dragSlot = this.shadowRoot?.querySelector('[part="drags"]');
|
|
11539
|
-
if (dragSlot) {
|
|
11540
|
-
dragSlot.style.minHeight = `${maxHeight}px`;
|
|
11541
|
-
dragSlot.style.minWidth = `${maxWidth}px`;
|
|
11542
|
-
}
|
|
11543
|
-
for (const gap of gaps) {
|
|
11544
|
-
gap.style.minHeight = `${maxHeight}px`;
|
|
11545
|
-
gap.style.minWidth = `${maxWidth}px`;
|
|
11546
|
-
}
|
|
11547
|
-
}
|
|
11548
15137
|
set correctResponse(value) {
|
|
11549
15138
|
let matches = [];
|
|
11550
15139
|
const response = Array.isArray(value) ? value : [value];
|
|
@@ -11914,47 +15503,12 @@ var QtiGraphicGapMatchInteraction = class extends DragDropInteractionMixin(
|
|
|
11914
15503
|
"qti-associable-hotspot",
|
|
11915
15504
|
`slot[part='drags']`
|
|
11916
15505
|
) {
|
|
11917
|
-
constructor() {
|
|
11918
|
-
super(...arguments);
|
|
11919
|
-
this.observer = null;
|
|
11920
|
-
this.resizeObserver = null;
|
|
11921
|
-
}
|
|
11922
15506
|
render() {
|
|
11923
15507
|
return x` <slot name="prompt"></slot>
|
|
11924
15508
|
<slot part="image"></slot>
|
|
11925
15509
|
<slot part="drags" name="drags" class="hover-border"></slot>
|
|
11926
15510
|
<div role="alert" id="validationMessage"></div>`;
|
|
11927
15511
|
}
|
|
11928
|
-
firstUpdated(_changedProperties) {
|
|
11929
|
-
super.firstUpdated(_changedProperties);
|
|
11930
|
-
this.updateMinDimensionsForDrowZones();
|
|
11931
|
-
this.observer = new MutationObserver(() => this.updateMinDimensionsForDrowZones());
|
|
11932
|
-
this.observer.observe(this, { childList: true, subtree: true });
|
|
11933
|
-
this.resizeObserver = new ResizeObserver(() => this.updateMinDimensionsForDrowZones());
|
|
11934
|
-
const draggableGaps = this.querySelectorAll("qti-gap-img, qti-gap-text");
|
|
11935
|
-
draggableGaps.forEach((gapText) => this.resizeObserver?.observe(gapText));
|
|
11936
|
-
}
|
|
11937
|
-
updateMinDimensionsForDrowZones() {
|
|
11938
|
-
const draggableGaps = this.querySelectorAll("qti-gap-img, qti-gap-text");
|
|
11939
|
-
const gaps = this.querySelectorAll("qti-associable-hotspot");
|
|
11940
|
-
let maxHeight = 0;
|
|
11941
|
-
let maxWidth = 0;
|
|
11942
|
-
draggableGaps.forEach((gapText) => {
|
|
11943
|
-
const rect = gapText.getBoundingClientRect();
|
|
11944
|
-
maxHeight = Math.max(maxHeight, rect.height);
|
|
11945
|
-
maxWidth = Math.max(maxWidth, rect.width);
|
|
11946
|
-
});
|
|
11947
|
-
const slots = this.shadowRoot.querySelectorAll("slot");
|
|
11948
|
-
const dragSlot = Array.from(slots).find((slot) => slot.name === "drags");
|
|
11949
|
-
if (dragSlot) {
|
|
11950
|
-
dragSlot.style.minHeight = `${maxHeight}px`;
|
|
11951
|
-
dragSlot.style.minWidth = `${maxWidth}px`;
|
|
11952
|
-
}
|
|
11953
|
-
for (const gap of gaps) {
|
|
11954
|
-
gap.style.minHeight = `${maxHeight}px`;
|
|
11955
|
-
gap.style.minWidth = `${maxWidth}px`;
|
|
11956
|
-
}
|
|
11957
|
-
}
|
|
11958
15512
|
positionHotspotOnRegister(e10) {
|
|
11959
15513
|
const hotspot = e10.target;
|
|
11960
15514
|
const coords = hotspot.getAttribute("coords");
|
|
@@ -12188,7 +15742,7 @@ QtiSimpleAssociableChoice = __decorateClass([
|
|
|
12188
15742
|
|
|
12189
15743
|
// src/lib/qti-components/qti-interaction/qti-match-interaction/qti-match-interaction.styles.ts
|
|
12190
15744
|
var qti_match_interaction_styles_default = i2`
|
|
12191
|
-
slot {
|
|
15745
|
+
slot:not([hidden]) {
|
|
12192
15746
|
/* slot where the */
|
|
12193
15747
|
display: flex;
|
|
12194
15748
|
flex-direction: column;
|
|
@@ -12219,16 +15773,17 @@ var qti_match_interaction_styles_default = i2`
|
|
|
12219
15773
|
// src/lib/qti-components/qti-interaction/qti-match-interaction/qti-match-interaction.ts
|
|
12220
15774
|
var QtiMatchInteraction = class extends DragDropInteractionMixin(
|
|
12221
15775
|
Interaction,
|
|
12222
|
-
"qti-simple-match-set:first-of-type qti-simple-associable-choice",
|
|
12223
|
-
"qti-simple-match-set:last-of-type qti-simple-associable-choice",
|
|
12224
|
-
"qti-simple-match-set"
|
|
15776
|
+
"qti-simple-match-set:first-of-type qti-simple-associable-choice, qti-simple-match-set:last-of-type > qti-simple-associable-choice > qti-simple-associable-choice",
|
|
15777
|
+
"qti-simple-match-set:last-of-type > qti-simple-associable-choice",
|
|
15778
|
+
"qti-simple-match-set:first-of-type"
|
|
12225
15779
|
) {
|
|
12226
15780
|
constructor() {
|
|
12227
15781
|
super(...arguments);
|
|
12228
15782
|
this.lastCheckedRadio = null;
|
|
15783
|
+
this.class = "";
|
|
12229
15784
|
this._response = [];
|
|
12230
|
-
this.correctOptions = [];
|
|
12231
15785
|
this.responseIdentifier = "";
|
|
15786
|
+
this.correctOptions = [];
|
|
12232
15787
|
this.handleRadioClick = (e10) => {
|
|
12233
15788
|
const radio = e10.target;
|
|
12234
15789
|
if (this.lastCheckedRadio === radio) {
|
|
@@ -12299,22 +15854,22 @@ var QtiMatchInteraction = class extends DragDropInteractionMixin(
|
|
|
12299
15854
|
}
|
|
12300
15855
|
}
|
|
12301
15856
|
render() {
|
|
12302
|
-
|
|
12303
|
-
return x`<slot name="prompt"></slot> <slot></slot>
|
|
12304
|
-
<div role="alert" id="validationMessage"></div>`;
|
|
12305
|
-
}
|
|
15857
|
+
const isTabular = this.class.split(" ").includes("qti-match-tabular");
|
|
12306
15858
|
return x`
|
|
12307
15859
|
<slot name="prompt"></slot>
|
|
12308
|
-
<
|
|
12309
|
-
|
|
12310
|
-
|
|
12311
|
-
|
|
12312
|
-
|
|
15860
|
+
<slot ?hidden=${isTabular}></slot>
|
|
15861
|
+
|
|
15862
|
+
${isTabular ? x`
|
|
15863
|
+
<table>
|
|
15864
|
+
<tr>
|
|
15865
|
+
<td></td>
|
|
15866
|
+
${this.cols.map((col) => x`<th part="r-header">${o9(col.innerHTML)}</th>`)}
|
|
15867
|
+
</tr>
|
|
12313
15868
|
|
|
12314
|
-
|
|
15869
|
+
${this.rows.map(
|
|
12315
15870
|
(row) => x`<tr>
|
|
12316
|
-
|
|
12317
|
-
|
|
15871
|
+
<td part="c-header">${o9(row.innerHTML)}</td>
|
|
15872
|
+
${this.cols.map((col) => {
|
|
12318
15873
|
const rowId = row.getAttribute("identifier");
|
|
12319
15874
|
const colId = col.getAttribute("identifier");
|
|
12320
15875
|
const value = `${rowId} ${colId}`;
|
|
@@ -12323,33 +15878,39 @@ var QtiMatchInteraction = class extends DragDropInteractionMixin(
|
|
|
12323
15878
|
const part = `rb ${checked ? "rb-checked" : ""} ${this.correctOptions.includes(value) ? "rb-correct" : ""}`;
|
|
12324
15879
|
const disable = this.correctOptions.length > 0 ? true : row.matchMax === 1 ? false : selectedInRowCount >= row.matchMax && !checked;
|
|
12325
15880
|
return x`<td>
|
|
12326
|
-
|
|
12327
|
-
|
|
12328
|
-
|
|
12329
|
-
|
|
12330
|
-
|
|
12331
|
-
|
|
12332
|
-
|
|
12333
|
-
|
|
12334
|
-
|
|
12335
|
-
|
|
15881
|
+
<input
|
|
15882
|
+
type=${row.matchMax === 1 ? "radio" : `checkbox`}
|
|
15883
|
+
part=${part}
|
|
15884
|
+
name=${rowId}
|
|
15885
|
+
value=${value}
|
|
15886
|
+
.disabled=${disable}
|
|
15887
|
+
@change=${(e10) => this.handleRadioChange(e10)}
|
|
15888
|
+
@click=${(e10) => row.matchMax === 1 ? this.handleRadioClick(e10) : null}
|
|
15889
|
+
/>
|
|
15890
|
+
</td>`;
|
|
12336
15891
|
})}
|
|
12337
|
-
|
|
15892
|
+
</tr>`
|
|
12338
15893
|
)}
|
|
12339
|
-
|
|
15894
|
+
</table>
|
|
15895
|
+
` : E}
|
|
15896
|
+
|
|
15897
|
+
<div role="alert" id="validationMessage"></div>
|
|
12340
15898
|
`;
|
|
12341
15899
|
}
|
|
12342
15900
|
};
|
|
12343
15901
|
QtiMatchInteraction.styles = qti_match_interaction_styles_default;
|
|
12344
15902
|
__decorateClass([
|
|
12345
|
-
|
|
12346
|
-
], QtiMatchInteraction.prototype, "
|
|
15903
|
+
n5({ type: String })
|
|
15904
|
+
], QtiMatchInteraction.prototype, "class", 2);
|
|
12347
15905
|
__decorateClass([
|
|
12348
15906
|
r6()
|
|
12349
|
-
], QtiMatchInteraction.prototype, "
|
|
15907
|
+
], QtiMatchInteraction.prototype, "_response", 2);
|
|
12350
15908
|
__decorateClass([
|
|
12351
15909
|
n5({ type: String, attribute: "response-identifier" })
|
|
12352
15910
|
], QtiMatchInteraction.prototype, "responseIdentifier", 2);
|
|
15911
|
+
__decorateClass([
|
|
15912
|
+
r6()
|
|
15913
|
+
], QtiMatchInteraction.prototype, "correctOptions", 2);
|
|
12353
15914
|
QtiMatchInteraction = __decorateClass([
|
|
12354
15915
|
t4("qti-match-interaction")
|
|
12355
15916
|
], QtiMatchInteraction);
|
|
@@ -13319,7 +16880,9 @@ export {
|
|
|
13319
16880
|
itemContext,
|
|
13320
16881
|
itemContextVariables,
|
|
13321
16882
|
qtiAndMixin,
|
|
13322
|
-
qtiSubtractMixin
|
|
16883
|
+
qtiSubtractMixin,
|
|
16884
|
+
testContext,
|
|
16885
|
+
testElement
|
|
13323
16886
|
};
|
|
13324
16887
|
/*! Bundled license information:
|
|
13325
16888
|
|