@citolab/qti-components 7.0.3 → 7.0.4
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 +277 -3791
- package/dist/custom-element-eslint-rules.js +8 -16
- package/dist/index.d.ts +97 -63
- package/dist/index.js +459 -3930
- package/dist/index.js.map +1 -1
- package/dist/item.css +0 -68
- package/dist/loader/index.d.ts +1 -1
- package/dist/loader/index.js +5 -0
- package/dist/loader/index.js.map +1 -1
- package/dist/qti-components-jsx.d.ts +106 -77
- package/dist/qti-simple-choice-CfgBEvdI.d.ts +1143 -0
- package/dist/qti-simple-choice-D0GiMrqD.d.ts +1168 -0
- package/dist/qti-simple-choice-zEsDq3c0.d.ts +1147 -0
- package/dist/transformers/index.d.ts +1 -0
- package/dist/transformers/index.js +5 -0
- package/dist/transformers/index.js.map +1 -1
- package/dist/vscode.css-custom-data.json +1 -37
- package/dist/vscode.html-custom-data.json +34 -20
- package/package.json +2 -1
package/dist/index.js
CHANGED
|
@@ -1386,6 +1386,7 @@ var qtiTransformTest = () => {
|
|
|
1386
1386
|
return new Promise((resolve, _2) => {
|
|
1387
1387
|
loadXML(uri).then((xml2) => {
|
|
1388
1388
|
xmlFragment = xml2;
|
|
1389
|
+
api.path(uri.substring(0, uri.lastIndexOf("/")));
|
|
1389
1390
|
return resolve(api);
|
|
1390
1391
|
});
|
|
1391
1392
|
});
|
|
@@ -1394,6 +1395,10 @@ var qtiTransformTest = () => {
|
|
|
1394
1395
|
xmlFragment = parseXML(xmlString);
|
|
1395
1396
|
return api;
|
|
1396
1397
|
},
|
|
1398
|
+
path: (location) => {
|
|
1399
|
+
setLocation(xmlFragment, location);
|
|
1400
|
+
return api;
|
|
1401
|
+
},
|
|
1397
1402
|
fn(fn) {
|
|
1398
1403
|
fn(xmlFragment);
|
|
1399
1404
|
return api;
|
|
@@ -1423,28 +1428,12 @@ var TestLoaderMixin = (superClass) => {
|
|
|
1423
1428
|
constructor(...args) {
|
|
1424
1429
|
super(...args);
|
|
1425
1430
|
this.testURL = "";
|
|
1426
|
-
this.addEventListener("qti-load-test-request", (e10) => {
|
|
1427
|
-
const { testURL } = e10.detail;
|
|
1428
|
-
if (!testURL) {
|
|
1429
|
-
console.warn(
|
|
1430
|
-
"No test found, there should be an attribute test-url with the path to the test on the test-container"
|
|
1431
|
-
);
|
|
1432
|
-
} else {
|
|
1433
|
-
this.testURL = testURL;
|
|
1434
|
-
}
|
|
1435
|
-
e10.detail.promise = (async () => {
|
|
1436
|
-
e10.preventDefault();
|
|
1437
|
-
const api = await qtiTransformTest().load(`${this.testURL}`);
|
|
1438
|
-
return api.htmlDoc();
|
|
1439
|
-
})();
|
|
1440
|
-
});
|
|
1441
1431
|
this.addEventListener("qti-assessment-test-connected", () => {
|
|
1442
1432
|
});
|
|
1443
1433
|
this.addEventListener("qti-load-item-request", ({ detail }) => {
|
|
1444
|
-
if (!this.testURL) return;
|
|
1445
1434
|
detail.promise = (async () => {
|
|
1446
1435
|
const api = await qtiTransformItem().load(
|
|
1447
|
-
`${
|
|
1436
|
+
`${detail.href}`,
|
|
1448
1437
|
detail.cancelPreviousRequest
|
|
1449
1438
|
);
|
|
1450
1439
|
return api.htmlDoc();
|
|
@@ -1682,18 +1671,6 @@ __decorateClass([
|
|
|
1682
1671
|
|
|
1683
1672
|
// src/lib/qti-test/qti-test.ts
|
|
1684
1673
|
var QtiTest = class extends TestLoaderMixin(TestNavigationMixin(TestViewMixin(TestBase))) {
|
|
1685
|
-
/**
|
|
1686
|
-
* Lifecycle callback invoked when the element is added to the DOM.
|
|
1687
|
-
* Automatically appends the content of a `<template>` element (if present)
|
|
1688
|
-
* to the shadow DOM.
|
|
1689
|
-
*/
|
|
1690
|
-
connectedCallback() {
|
|
1691
|
-
super.connectedCallback();
|
|
1692
|
-
const template = this.querySelector(":scope > template");
|
|
1693
|
-
if (template) {
|
|
1694
|
-
this.shadowRoot?.appendChild(template.content);
|
|
1695
|
-
}
|
|
1696
|
-
}
|
|
1697
1674
|
/**
|
|
1698
1675
|
* Renders the component's template.
|
|
1699
1676
|
* Provides a default `<slot>` for content projection.
|
|
@@ -2018,6 +1995,14 @@ var TestItemLink = class extends TestComponent {
|
|
|
2018
1995
|
return x` <slot></slot> `;
|
|
2019
1996
|
}
|
|
2020
1997
|
};
|
|
1998
|
+
TestItemLink.styles = i2`
|
|
1999
|
+
:host {
|
|
2000
|
+
${btn};
|
|
2001
|
+
}
|
|
2002
|
+
:host([disabled]) {
|
|
2003
|
+
${dis};
|
|
2004
|
+
}
|
|
2005
|
+
`;
|
|
2021
2006
|
__decorateClass([
|
|
2022
2007
|
n5({ type: String, attribute: "item-id" })
|
|
2023
2008
|
], TestItemLink.prototype, "itemId", 2);
|
|
@@ -5692,76 +5677,8 @@ qti-response-declaration {
|
|
|
5692
5677
|
}
|
|
5693
5678
|
|
|
5694
5679
|
qti-slider-interaction {
|
|
5695
|
-
display: block;
|
|
5696
|
-
|
|
5697
5680
|
--qti-tick-color: rgb(229 231 235 / 100%);
|
|
5698
5681
|
--qti-tick-width: 1px;
|
|
5699
|
-
|
|
5700
|
-
&::part(slider) {
|
|
5701
|
-
margin-left: 2rem; /* mx-8 */
|
|
5702
|
-
margin-right: 2rem;
|
|
5703
|
-
padding-bottom: 1rem; /* pb-4 */
|
|
5704
|
-
padding-top: 1.25rem; /* pt-5 */
|
|
5705
|
-
}
|
|
5706
|
-
|
|
5707
|
-
--show-bounds: true;
|
|
5708
|
-
|
|
5709
|
-
&::part(bounds) {
|
|
5710
|
-
display: flex;
|
|
5711
|
-
width: 100%;
|
|
5712
|
-
justify-content: space-between;
|
|
5713
|
-
margin-bottom: 0.5rem; /* mb-2 */
|
|
5714
|
-
}
|
|
5715
|
-
|
|
5716
|
-
--show-ticks: true;
|
|
5717
|
-
|
|
5718
|
-
&::part(ticks) {
|
|
5719
|
-
margin-left: 0.125rem; /* mx-0.5 */
|
|
5720
|
-
margin-right: 0.125rem;
|
|
5721
|
-
margin-bottom: 0.25rem; /* mb-1 */
|
|
5722
|
-
height: 0.5rem; /* h-2 */
|
|
5723
|
-
background: linear-gradient(to right, var(--qti-tick-color) var(--qti-tick-width), transparent 1px) repeat-x 0
|
|
5724
|
-
center / calc(calc(100% - var(--qti-tick-width)) / ((var(--max) - var(--min)) / var(--step))) 100%;
|
|
5725
|
-
}
|
|
5726
|
-
|
|
5727
|
-
&::part(rail) {
|
|
5728
|
-
display: flex;
|
|
5729
|
-
align-items: center;
|
|
5730
|
-
box-sizing: border-box;
|
|
5731
|
-
height: 0.375rem; /* h-1.5 */
|
|
5732
|
-
width: 100%;
|
|
5733
|
-
cursor: pointer;
|
|
5734
|
-
border-radius: 9999px; /* rounded-full */
|
|
5735
|
-
border: 1px solid #d1d5db; /* border-gray-300 */
|
|
5736
|
-
background-color: #e5e7eb; /* bg-gray-200 */
|
|
5737
|
-
}
|
|
5738
|
-
|
|
5739
|
-
&::part(knob) {
|
|
5740
|
-
background-color: var(--qti-primary);
|
|
5741
|
-
position: relative;
|
|
5742
|
-
height: 1rem; /* h-4 */
|
|
5743
|
-
width: 1rem; /* w-4 */
|
|
5744
|
-
transform-origin: center;
|
|
5745
|
-
transform: translateX(-50%);
|
|
5746
|
-
cursor: pointer;
|
|
5747
|
-
border-radius: 9999px; /* rounded-full */
|
|
5748
|
-
left: var(--value-percentage);
|
|
5749
|
-
}
|
|
5750
|
-
|
|
5751
|
-
--show-value: true;
|
|
5752
|
-
|
|
5753
|
-
&::part(value) {
|
|
5754
|
-
position: absolute;
|
|
5755
|
-
bottom: 2rem; /* bottom-8 */
|
|
5756
|
-
left: 0.5rem; /* left-2 */
|
|
5757
|
-
transform: translateX(-50%);
|
|
5758
|
-
cursor: pointer;
|
|
5759
|
-
border-radius: 0.25rem; /* rounded */
|
|
5760
|
-
background-color: #f3f4f6; /* bg-gray-100 */
|
|
5761
|
-
padding: 0.25rem 0.5rem; /* px-2 py-1 */
|
|
5762
|
-
text-align: center;
|
|
5763
|
-
color: #6b7280; /* text-gray-500 */
|
|
5764
|
-
}
|
|
5765
5682
|
}
|
|
5766
5683
|
|
|
5767
5684
|
qti-select-point-interaction {
|
|
@@ -5808,62 +5725,72 @@ qti-response-declaration {
|
|
|
5808
5725
|
var TestContainer = class extends r4 {
|
|
5809
5726
|
constructor() {
|
|
5810
5727
|
super(...arguments);
|
|
5811
|
-
this.testURL =
|
|
5728
|
+
this.testURL = null;
|
|
5729
|
+
this.testDoc = null;
|
|
5730
|
+
this.testXML = null;
|
|
5731
|
+
/** Template content if provided */
|
|
5732
|
+
this.templateContent = null;
|
|
5733
|
+
}
|
|
5734
|
+
async handleTestURLChange() {
|
|
5735
|
+
if (!this.testURL) return;
|
|
5736
|
+
try {
|
|
5737
|
+
const api = await qtiTransformTest().load(this.testURL);
|
|
5738
|
+
this.testDoc = api.htmlDoc();
|
|
5739
|
+
} catch (error) {
|
|
5740
|
+
console.error("Error loading or parsing XML:", error);
|
|
5741
|
+
}
|
|
5742
|
+
}
|
|
5743
|
+
handleTestXMLChange() {
|
|
5744
|
+
if (!this.testXML) return;
|
|
5745
|
+
try {
|
|
5746
|
+
this.testDoc = qtiTransformTest().parse(this.testXML).htmlDoc();
|
|
5747
|
+
} catch (error) {
|
|
5748
|
+
console.error("Error parsing XML:", error);
|
|
5749
|
+
}
|
|
5812
5750
|
}
|
|
5813
|
-
/**
|
|
5814
|
-
* Lifecycle callback invoked when the element is added to the DOM.
|
|
5815
|
-
* Handles template preloading and dispatches a `qti-load-test-request` event
|
|
5816
|
-
* if no template is found.
|
|
5817
|
-
*/
|
|
5818
5751
|
async connectedCallback() {
|
|
5819
5752
|
super.connectedCallback();
|
|
5820
|
-
|
|
5821
|
-
|
|
5822
|
-
|
|
5823
|
-
|
|
5824
|
-
|
|
5825
|
-
|
|
5826
|
-
|
|
5827
|
-
this.shadowRoot.adoptedStyleSheets = [sheet];
|
|
5828
|
-
await this.updateComplete;
|
|
5829
|
-
const event = new CustomEvent("qti-load-test-request", {
|
|
5830
|
-
bubbles: true,
|
|
5831
|
-
composed: true,
|
|
5832
|
-
detail: {
|
|
5833
|
-
promise: null,
|
|
5834
|
-
testURL: this.testURL
|
|
5835
|
-
}
|
|
5836
|
-
});
|
|
5837
|
-
const preventDefault = this.dispatchEvent(event);
|
|
5838
|
-
if (!preventDefault) {
|
|
5839
|
-
console.warn("No qti-load-test-request listener found");
|
|
5840
|
-
this.preContent = x`<span>qti-load-test-request was not catched</span>`;
|
|
5841
|
-
} else {
|
|
5842
|
-
this.content = (async () => {
|
|
5843
|
-
return await event.detail.promise;
|
|
5844
|
-
})();
|
|
5845
|
-
}
|
|
5753
|
+
this.initializeTemplateContent();
|
|
5754
|
+
this.applyStyles();
|
|
5755
|
+
if (this.testURL) {
|
|
5756
|
+
this.handleTestURLChange();
|
|
5757
|
+
}
|
|
5758
|
+
if (this.testXML) {
|
|
5759
|
+
this.handleTestXMLChange();
|
|
5846
5760
|
}
|
|
5847
5761
|
}
|
|
5848
|
-
|
|
5849
|
-
|
|
5850
|
-
|
|
5851
|
-
|
|
5852
|
-
|
|
5762
|
+
initializeTemplateContent() {
|
|
5763
|
+
const template = this.querySelector("template");
|
|
5764
|
+
this.templateContent = template ? template.content : x``;
|
|
5765
|
+
}
|
|
5766
|
+
applyStyles() {
|
|
5767
|
+
const sheet = new CSSStyleSheet();
|
|
5768
|
+
sheet.replaceSync(item_default);
|
|
5769
|
+
this.shadowRoot.adoptedStyleSheets = [sheet];
|
|
5770
|
+
}
|
|
5853
5771
|
render() {
|
|
5854
5772
|
return x`
|
|
5855
|
-
${this.
|
|
5773
|
+
${this.templateContent}
|
|
5856
5774
|
<slot></slot>
|
|
5857
|
-
${m4(this.
|
|
5775
|
+
${m4(this.testDoc, x`<span>Loading...</span>`)}
|
|
5858
5776
|
`;
|
|
5859
5777
|
}
|
|
5860
5778
|
};
|
|
5861
|
-
__decorateClass([
|
|
5862
|
-
r6()
|
|
5863
|
-
], TestContainer.prototype, "content", 2);
|
|
5864
5779
|
__decorateClass([
|
|
5865
5780
|
n5({ type: String, attribute: "test-url" })
|
|
5866
5781
|
], TestContainer.prototype, "testURL", 2);
|
|
5782
|
+
__decorateClass([
|
|
5783
|
+
r6()
|
|
5784
|
+
], TestContainer.prototype, "testDoc", 2);
|
|
5785
|
+
__decorateClass([
|
|
5786
|
+
r6()
|
|
5787
|
+
], TestContainer.prototype, "testXML", 2);
|
|
5788
|
+
__decorateClass([
|
|
5789
|
+
watch("testURL", { waitUntilFirstUpdate: true })
|
|
5790
|
+
], TestContainer.prototype, "handleTestURLChange", 1);
|
|
5791
|
+
__decorateClass([
|
|
5792
|
+
watch("testXML", { waitUntilFirstUpdate: true })
|
|
5793
|
+
], TestContainer.prototype, "handleTestXMLChange", 1);
|
|
5867
5794
|
TestContainer = __decorateClass([
|
|
5868
5795
|
t4("test-container")
|
|
5869
5796
|
], TestContainer);
|
|
@@ -7012,3648 +6939,89 @@ TestPagingButtonsStamp = __decorateClass([
|
|
|
7012
6939
|
t4("test-paging-buttons-stamp")
|
|
7013
6940
|
], TestPagingButtonsStamp);
|
|
7014
6941
|
|
|
7015
|
-
// src/lib/qti-item/qti-item.
|
|
7016
|
-
|
|
7017
|
-
|
|
7018
|
-
|
|
7019
|
-
|
|
7020
|
-
|
|
7021
|
-
|
|
7022
|
-
|
|
7023
|
-
|
|
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
|
-
}
|
|
10553
|
-
|
|
10554
|
-
--show-ticks: true;
|
|
10555
|
-
|
|
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%;
|
|
10563
|
-
}
|
|
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 */
|
|
10575
|
-
}
|
|
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);
|
|
10587
|
-
}
|
|
10588
|
-
|
|
10589
|
-
--show-value: true;
|
|
6942
|
+
// src/lib/qti-item/qti-item.ts
|
|
6943
|
+
var QtiItem = class extends r4 {
|
|
6944
|
+
render() {
|
|
6945
|
+
return x`<slot></slot>`;
|
|
6946
|
+
}
|
|
6947
|
+
};
|
|
6948
|
+
QtiItem = __decorateClass([
|
|
6949
|
+
t4("qti-item")
|
|
6950
|
+
], QtiItem);
|
|
10590
6951
|
|
|
10591
|
-
|
|
10592
|
-
|
|
10593
|
-
|
|
10594
|
-
|
|
10595
|
-
|
|
10596
|
-
|
|
10597
|
-
|
|
10598
|
-
|
|
10599
|
-
|
|
10600
|
-
|
|
10601
|
-
|
|
6952
|
+
// src/lib/qti-item/components/item-container.ts
|
|
6953
|
+
var ItemContainer = class extends r4 {
|
|
6954
|
+
constructor() {
|
|
6955
|
+
super(...arguments);
|
|
6956
|
+
this.itemURL = null;
|
|
6957
|
+
this.itemDoc = null;
|
|
6958
|
+
this.itemXML = null;
|
|
6959
|
+
/** Template content if provided */
|
|
6960
|
+
this.templateContent = null;
|
|
6961
|
+
}
|
|
6962
|
+
async handleItemURLChange() {
|
|
6963
|
+
if (!this.itemURL) return;
|
|
6964
|
+
try {
|
|
6965
|
+
const api = await qtiTransformItem().load(this.itemURL);
|
|
6966
|
+
this.itemDoc = api.htmlDoc();
|
|
6967
|
+
} catch (error) {
|
|
6968
|
+
console.error("Error loading or parsing XML:", error);
|
|
10602
6969
|
}
|
|
10603
6970
|
}
|
|
10604
|
-
|
|
10605
|
-
|
|
10606
|
-
|
|
10607
|
-
|
|
10608
|
-
|
|
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;
|
|
6971
|
+
handleItemXMLChange() {
|
|
6972
|
+
if (!this.itemXML) return;
|
|
6973
|
+
try {
|
|
6974
|
+
this.itemDoc = qtiTransformItem().parse(this.itemXML).htmlDoc();
|
|
6975
|
+
} catch (error) {
|
|
6976
|
+
console.error("Error parsing XML:", error);
|
|
10628
6977
|
}
|
|
10629
6978
|
}
|
|
10630
|
-
|
|
10631
|
-
|
|
10632
|
-
|
|
10633
|
-
|
|
6979
|
+
async connectedCallback() {
|
|
6980
|
+
super.connectedCallback();
|
|
6981
|
+
this.initializeTemplateContent();
|
|
6982
|
+
this.applyStyles();
|
|
6983
|
+
if (this.itemURL) {
|
|
6984
|
+
this.handleItemURLChange();
|
|
6985
|
+
}
|
|
6986
|
+
if (this.itemXML) {
|
|
6987
|
+
this.handleItemXMLChange();
|
|
10634
6988
|
}
|
|
10635
6989
|
}
|
|
10636
|
-
|
|
10637
|
-
|
|
10638
|
-
|
|
10639
|
-
display: block;
|
|
10640
|
-
width: 100%;
|
|
6990
|
+
initializeTemplateContent() {
|
|
6991
|
+
const template = this.querySelector("template");
|
|
6992
|
+
this.templateContent = template ? template.content : x``;
|
|
10641
6993
|
}
|
|
10642
|
-
|
|
10643
|
-
`;
|
|
10644
|
-
|
|
10645
|
-
// src/lib/qti-item/qti-item.ts
|
|
10646
|
-
var QtiItem = class extends QtiItemMixin(r4) {
|
|
10647
|
-
connectedCallback() {
|
|
10648
|
-
super.connectedCallback();
|
|
6994
|
+
applyStyles() {
|
|
10649
6995
|
const sheet = new CSSStyleSheet();
|
|
10650
|
-
sheet.replaceSync(
|
|
6996
|
+
sheet.replaceSync(item_default);
|
|
10651
6997
|
this.shadowRoot.adoptedStyleSheets = [sheet];
|
|
10652
6998
|
}
|
|
6999
|
+
render() {
|
|
7000
|
+
return x`
|
|
7001
|
+
${this.templateContent}
|
|
7002
|
+
<slot></slot>
|
|
7003
|
+
${m4(this.itemDoc, x`<span>Loading...</span>`)}
|
|
7004
|
+
`;
|
|
7005
|
+
}
|
|
10653
7006
|
};
|
|
10654
|
-
|
|
10655
|
-
|
|
10656
|
-
],
|
|
7007
|
+
__decorateClass([
|
|
7008
|
+
n5({ type: String, attribute: "item-url" })
|
|
7009
|
+
], ItemContainer.prototype, "itemURL", 2);
|
|
7010
|
+
__decorateClass([
|
|
7011
|
+
r6()
|
|
7012
|
+
], ItemContainer.prototype, "itemDoc", 2);
|
|
7013
|
+
__decorateClass([
|
|
7014
|
+
r6()
|
|
7015
|
+
], ItemContainer.prototype, "itemXML", 2);
|
|
7016
|
+
__decorateClass([
|
|
7017
|
+
watch("itemURL", { waitUntilFirstUpdate: true })
|
|
7018
|
+
], ItemContainer.prototype, "handleItemURLChange", 1);
|
|
7019
|
+
__decorateClass([
|
|
7020
|
+
watch("itemXML", { waitUntilFirstUpdate: true })
|
|
7021
|
+
], ItemContainer.prototype, "handleItemXMLChange", 1);
|
|
7022
|
+
ItemContainer = __decorateClass([
|
|
7023
|
+
t4("item-container")
|
|
7024
|
+
], ItemContainer);
|
|
10657
7025
|
|
|
10658
7026
|
// src/lib/qti-components/qti-assessment-item/qti-assessment-item.context.ts
|
|
10659
7027
|
var itemContextVariables = [
|
|
@@ -10701,7 +7069,10 @@ var QtiAssessmentItem = class extends r4 {
|
|
|
10701
7069
|
e10.stopPropagation();
|
|
10702
7070
|
const feedbackElement = e10.detail;
|
|
10703
7071
|
this._feedbackElements.push(feedbackElement);
|
|
10704
|
-
|
|
7072
|
+
const numAttempts = Number(this._context.variables.find((v3) => v3.identifier === "numAttempts")?.value) || 0;
|
|
7073
|
+
if (numAttempts > 0) {
|
|
7074
|
+
feedbackElement.checkShowFeedback(feedbackElement.outcomeIdentifier);
|
|
7075
|
+
}
|
|
10705
7076
|
});
|
|
10706
7077
|
this.addEventListener("qti-register-interaction", (e10) => {
|
|
10707
7078
|
e10.stopPropagation();
|
|
@@ -10757,9 +7128,6 @@ var QtiAssessmentItem = class extends r4 {
|
|
|
10757
7128
|
interactionElement.value = variable.value;
|
|
10758
7129
|
}
|
|
10759
7130
|
}
|
|
10760
|
-
if (variable.type === "outcome") {
|
|
10761
|
-
this._feedbackElements.forEach((fe) => fe.checkShowFeedback(variable.identifier));
|
|
10762
|
-
}
|
|
10763
7131
|
});
|
|
10764
7132
|
}
|
|
10765
7133
|
async connectedCallback() {
|
|
@@ -11451,7 +7819,6 @@ var QtiFeedback = class extends r4 {
|
|
|
11451
7819
|
}
|
|
11452
7820
|
checkShowFeedback(outcomeIdentifier) {
|
|
11453
7821
|
const outcomeVariable = this._context.variables.find((v3) => v3.identifier === outcomeIdentifier) || null;
|
|
11454
|
-
;
|
|
11455
7822
|
if (this.outcomeIdentifier !== outcomeIdentifier || !outcomeVariable) return;
|
|
11456
7823
|
let isFound = false;
|
|
11457
7824
|
if (Array.isArray(outcomeVariable.value)) {
|
|
@@ -11527,17 +7894,92 @@ QtiFeedbackInline = __decorateClass([
|
|
|
11527
7894
|
|
|
11528
7895
|
// src/lib/qti-components/qti-feedback/qti-modal-feedback/qti-modal-feedback.ts
|
|
11529
7896
|
var QtiModalFeedback = class extends QtiFeedback {
|
|
11530
|
-
|
|
11531
|
-
|
|
11532
|
-
|
|
7897
|
+
render() {
|
|
7898
|
+
return x`
|
|
7899
|
+
<dialog class="qti-dialog" part="feedback" ?open="${this.showStatus === "on"}">
|
|
7900
|
+
<slot></slot>
|
|
7901
|
+
<div style="margin-top: var(--qti-gap-size); text-align: center;">
|
|
7902
|
+
<button class="button close-button" @click="${this.closeFeedback}"></button>
|
|
7903
|
+
</div>
|
|
7904
|
+
</dialog>
|
|
7905
|
+
`;
|
|
7906
|
+
}
|
|
7907
|
+
openFeedback() {
|
|
7908
|
+
const dialog = this.shadowRoot?.querySelector("dialog");
|
|
7909
|
+
if (dialog && !dialog.open) {
|
|
7910
|
+
dialog.showModal();
|
|
7911
|
+
}
|
|
7912
|
+
}
|
|
7913
|
+
closeFeedback() {
|
|
7914
|
+
const dialog = this.shadowRoot?.querySelector("dialog");
|
|
7915
|
+
if (dialog && dialog.open) {
|
|
7916
|
+
dialog.close();
|
|
7917
|
+
this.showStatus = "off";
|
|
7918
|
+
}
|
|
7919
|
+
}
|
|
7920
|
+
firstUpdated() {
|
|
7921
|
+
if (this.showStatus === "on") {
|
|
7922
|
+
this.openFeedback();
|
|
7923
|
+
}
|
|
7924
|
+
}
|
|
7925
|
+
updated(changedProperties) {
|
|
7926
|
+
if (changedProperties.has("showStatus")) {
|
|
7927
|
+
if (this.showStatus === "on") {
|
|
7928
|
+
this.openFeedback();
|
|
7929
|
+
} else {
|
|
7930
|
+
this.closeFeedback();
|
|
7931
|
+
}
|
|
7932
|
+
}
|
|
11533
7933
|
}
|
|
11534
7934
|
};
|
|
11535
7935
|
QtiModalFeedback.styles = i2`
|
|
11536
|
-
.
|
|
7936
|
+
.qti-dialog {
|
|
7937
|
+
background: var(--qti-bg);
|
|
7938
|
+
border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
|
|
7939
|
+
border-radius: var(--qti-border-radius);
|
|
7940
|
+
padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
|
|
7941
|
+
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
7942
|
+
position: fixed;
|
|
7943
|
+
top: 50%;
|
|
7944
|
+
left: 50%;
|
|
7945
|
+
transform: translate(-50%, -50%);
|
|
7946
|
+
z-index: 1000;
|
|
7947
|
+
width: auto;
|
|
7948
|
+
max-width: 90%;
|
|
7949
|
+
}
|
|
7950
|
+
|
|
7951
|
+
.button {
|
|
7952
|
+
border-radius: var(--qti-border-radius);
|
|
7953
|
+
padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
|
|
7954
|
+
background-color: var(--qti-bg-active);
|
|
7955
|
+
border: var(--qti-border-active);
|
|
7956
|
+
cursor: pointer;
|
|
7957
|
+
position: relative;
|
|
11537
7958
|
display: inline-block;
|
|
11538
7959
|
}
|
|
11539
|
-
|
|
11540
|
-
|
|
7960
|
+
|
|
7961
|
+
.button:hover {
|
|
7962
|
+
background-color: var(--qti-hover-bg);
|
|
7963
|
+
}
|
|
7964
|
+
|
|
7965
|
+
.button:disabled {
|
|
7966
|
+
background-color: var(--qti-disabled-bg);
|
|
7967
|
+
color: var(--qti-disabled-color);
|
|
7968
|
+
cursor: not-allowed;
|
|
7969
|
+
}
|
|
7970
|
+
|
|
7971
|
+
.button:focus {
|
|
7972
|
+
outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
|
|
7973
|
+
}
|
|
7974
|
+
|
|
7975
|
+
/* Text content of the button */
|
|
7976
|
+
.button::after {
|
|
7977
|
+
content: var(--qti-close-text, 'Close');
|
|
7978
|
+
color: inherit;
|
|
7979
|
+
font-size: inherit;
|
|
7980
|
+
text-align: center;
|
|
7981
|
+
display: inline-block;
|
|
7982
|
+
line-height: 1.5;
|
|
11541
7983
|
}
|
|
11542
7984
|
`;
|
|
11543
7985
|
QtiModalFeedback = __decorateClass([
|
|
@@ -12530,6 +8972,85 @@ QtiChoiceInteraction = __decorateClass([
|
|
|
12530
8972
|
t4("qti-choice-interaction")
|
|
12531
8973
|
], QtiChoiceInteraction);
|
|
12532
8974
|
|
|
8975
|
+
// src/lib/qti-components/qti-interaction/qti-upload-interaction/qti-upload-interaction.ts
|
|
8976
|
+
var QtiUploadInteraction = class extends Interaction {
|
|
8977
|
+
constructor() {
|
|
8978
|
+
super(...arguments);
|
|
8979
|
+
this._file = null;
|
|
8980
|
+
this._base64 = null;
|
|
8981
|
+
}
|
|
8982
|
+
reset() {
|
|
8983
|
+
this._file = null;
|
|
8984
|
+
this._base64 = null;
|
|
8985
|
+
this.saveResponse(null);
|
|
8986
|
+
}
|
|
8987
|
+
validate() {
|
|
8988
|
+
return this._base64 !== null;
|
|
8989
|
+
}
|
|
8990
|
+
get value() {
|
|
8991
|
+
return this._base64;
|
|
8992
|
+
}
|
|
8993
|
+
set value(base64) {
|
|
8994
|
+
if (typeof base64 === "string") {
|
|
8995
|
+
this._base64 = base64;
|
|
8996
|
+
this.saveResponse(base64);
|
|
8997
|
+
} else if (base64 === null) {
|
|
8998
|
+
this.reset();
|
|
8999
|
+
} else {
|
|
9000
|
+
throw new Error("Value must be a Base64-encoded string or null");
|
|
9001
|
+
}
|
|
9002
|
+
}
|
|
9003
|
+
static get properties() {
|
|
9004
|
+
return {
|
|
9005
|
+
...Interaction.properties
|
|
9006
|
+
};
|
|
9007
|
+
}
|
|
9008
|
+
render() {
|
|
9009
|
+
return x`
|
|
9010
|
+
<div>
|
|
9011
|
+
<slot name="prompt"></slot>
|
|
9012
|
+
<input type="file" @change="${this._onFileChange}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" />
|
|
9013
|
+
</div>
|
|
9014
|
+
`;
|
|
9015
|
+
}
|
|
9016
|
+
async _onFileChange(event) {
|
|
9017
|
+
const input = event.target;
|
|
9018
|
+
if (input.files && input.files.length > 0) {
|
|
9019
|
+
this._file = input.files[0];
|
|
9020
|
+
this._base64 = await this._convertToBase64(this._file);
|
|
9021
|
+
this.saveResponse(this._base64);
|
|
9022
|
+
this.dispatchEvent(
|
|
9023
|
+
new CustomEvent("qti-interaction-response", {
|
|
9024
|
+
detail: { response: this._base64 }
|
|
9025
|
+
})
|
|
9026
|
+
);
|
|
9027
|
+
}
|
|
9028
|
+
}
|
|
9029
|
+
_convertToBase64(file) {
|
|
9030
|
+
return new Promise((resolve, reject) => {
|
|
9031
|
+
const reader = new FileReader();
|
|
9032
|
+
reader.onload = () => resolve(reader.result);
|
|
9033
|
+
reader.onerror = () => reject(reader.error);
|
|
9034
|
+
reader.readAsDataURL(file);
|
|
9035
|
+
});
|
|
9036
|
+
}
|
|
9037
|
+
};
|
|
9038
|
+
QtiUploadInteraction.styles = [
|
|
9039
|
+
i2`
|
|
9040
|
+
:host {
|
|
9041
|
+
display: block;
|
|
9042
|
+
margin: 1em 0;
|
|
9043
|
+
}
|
|
9044
|
+
input[type='file'] {
|
|
9045
|
+
display: block;
|
|
9046
|
+
margin-top: 0.5em;
|
|
9047
|
+
}
|
|
9048
|
+
`
|
|
9049
|
+
];
|
|
9050
|
+
QtiUploadInteraction = __decorateClass([
|
|
9051
|
+
t4("qti-upload-interaction")
|
|
9052
|
+
], QtiUploadInteraction);
|
|
9053
|
+
|
|
12533
9054
|
// src/lib/qti-components/qti-outcome-processing/qti-outcome-processing.ts
|
|
12534
9055
|
var QtiOutcomeProcessing = class extends r4 {
|
|
12535
9056
|
render() {
|
|
@@ -14111,19 +10632,36 @@ var TouchDragAndDrop = class _TouchDragAndDrop {
|
|
|
14111
10632
|
}
|
|
14112
10633
|
findClosestDropzone() {
|
|
14113
10634
|
if (!this.dragSource || this.allDropzones.length === 0) return null;
|
|
14114
|
-
const
|
|
10635
|
+
const dragRect = this.dragSource.getBoundingClientRect();
|
|
14115
10636
|
let closestDropzone = null;
|
|
14116
|
-
let
|
|
10637
|
+
let maxOverlapArea = 0;
|
|
14117
10638
|
for (const dropzone of this.allDropzones) {
|
|
14118
|
-
const
|
|
14119
|
-
const
|
|
14120
|
-
if (
|
|
14121
|
-
|
|
10639
|
+
const dropRect = dropzone.getBoundingClientRect();
|
|
10640
|
+
const overlapArea = this.calculateOverlapArea(dragRect, dropRect);
|
|
10641
|
+
if (overlapArea > maxOverlapArea) {
|
|
10642
|
+
maxOverlapArea = overlapArea;
|
|
14122
10643
|
closestDropzone = dropzone;
|
|
14123
10644
|
}
|
|
14124
10645
|
}
|
|
10646
|
+
if (maxOverlapArea === 0) {
|
|
10647
|
+
const dragCenter = this.getCenter(dragRect);
|
|
10648
|
+
let minDistance = Infinity;
|
|
10649
|
+
for (const dropzone of this.allDropzones) {
|
|
10650
|
+
const dropCenter = this.getCenter(dropzone.getBoundingClientRect());
|
|
10651
|
+
const distance = this.calculateDistance(dragCenter, dropCenter);
|
|
10652
|
+
if (distance < minDistance) {
|
|
10653
|
+
minDistance = distance;
|
|
10654
|
+
closestDropzone = dropzone;
|
|
10655
|
+
}
|
|
10656
|
+
}
|
|
10657
|
+
}
|
|
14125
10658
|
return closestDropzone;
|
|
14126
10659
|
}
|
|
10660
|
+
calculateOverlapArea(rect1, rect2) {
|
|
10661
|
+
const xOverlap = Math.max(0, Math.min(rect1.right, rect2.right) - Math.max(rect1.left, rect2.left));
|
|
10662
|
+
const yOverlap = Math.max(0, Math.min(rect1.bottom, rect2.bottom) - Math.max(rect1.top, rect2.top));
|
|
10663
|
+
return xOverlap * yOverlap;
|
|
10664
|
+
}
|
|
14127
10665
|
getCenter(rect) {
|
|
14128
10666
|
return {
|
|
14129
10667
|
x: rect.left + rect.width / 2,
|
|
@@ -16309,187 +12847,177 @@ QtiSelectPointInteraction = __decorateClass([
|
|
|
16309
12847
|
t4("qti-select-point-interaction")
|
|
16310
12848
|
], QtiSelectPointInteraction);
|
|
16311
12849
|
|
|
16312
|
-
// src/lib/qti-components/qti-interaction/qti-slider-interaction/qti-slider-interaction.ts
|
|
16313
|
-
var
|
|
16314
|
-
|
|
16315
|
-
|
|
16316
|
-
|
|
16317
|
-
|
|
16318
|
-
|
|
16319
|
-
this.reverse = false;
|
|
16320
|
-
this._handleDisabledChange = () => {
|
|
16321
|
-
};
|
|
16322
|
-
this._handleReadonlyChange = () => {
|
|
16323
|
-
};
|
|
16324
|
-
this.csLive = getComputedStyle(this);
|
|
12850
|
+
// src/lib/qti-components/qti-interaction/qti-slider-interaction/qti-slider-interaction.styles.ts
|
|
12851
|
+
var qti_slider_interaction_styles_default = i2`
|
|
12852
|
+
:host {
|
|
12853
|
+
display: block;
|
|
12854
|
+
--show-bounds: true;
|
|
12855
|
+
--show-ticks: true;
|
|
12856
|
+
--show-value: true;
|
|
16325
12857
|
}
|
|
16326
|
-
|
|
16327
|
-
|
|
16328
|
-
|
|
16329
|
-
|
|
12858
|
+
|
|
12859
|
+
[part='slider'] {
|
|
12860
|
+
margin-left: 2rem; /* mx-8 */
|
|
12861
|
+
margin-right: 2rem;
|
|
12862
|
+
padding-bottom: 1rem; /* pb-4 */
|
|
12863
|
+
padding-top: 1.25rem; /* pt-5 */
|
|
16330
12864
|
}
|
|
16331
|
-
|
|
16332
|
-
|
|
12865
|
+
|
|
12866
|
+
[part='bounds'] {
|
|
12867
|
+
display: flex;
|
|
12868
|
+
width: 100%;
|
|
12869
|
+
justify-content: space-between;
|
|
12870
|
+
margin-bottom: 0.5rem; /* mb-2 */
|
|
16333
12871
|
}
|
|
16334
|
-
|
|
16335
|
-
|
|
16336
|
-
|
|
12872
|
+
|
|
12873
|
+
[part='ticks'] {
|
|
12874
|
+
margin-left: 0.125rem; /* mx-0.5 */
|
|
12875
|
+
margin-right: 0.125rem;
|
|
12876
|
+
margin-bottom: 0.25rem; /* mb-1 */
|
|
12877
|
+
height: 0.5rem; /* h-2 */
|
|
12878
|
+
background: linear-gradient(to right, var(--qti-border-color) var(--qti-border-thickness), transparent 1px) repeat-x
|
|
12879
|
+
0 center / calc(calc(100% - var(--qti-border-thickness)) / ((var(--max) - var(--min)) / var(--step))) 100%;
|
|
16337
12880
|
}
|
|
16338
|
-
|
|
16339
|
-
|
|
12881
|
+
|
|
12882
|
+
[part='rail'] {
|
|
12883
|
+
display: flex;
|
|
12884
|
+
align-items: center;
|
|
12885
|
+
box-sizing: border-box;
|
|
12886
|
+
height: 0.375rem; /* h-1.5 */
|
|
12887
|
+
width: 100%;
|
|
12888
|
+
cursor: pointer;
|
|
12889
|
+
border-radius: 9999px; /* rounded-full */
|
|
12890
|
+
border: 1px solid #d1d5db; /* border-gray-300 */
|
|
12891
|
+
background-color: #e5e7eb; /* bg-gray-200 */
|
|
16340
12892
|
}
|
|
16341
|
-
|
|
16342
|
-
|
|
16343
|
-
|
|
12893
|
+
|
|
12894
|
+
[part='knob'] {
|
|
12895
|
+
background-color: var(--qti-bg-active);
|
|
12896
|
+
border: 2px solid var(--qti-border-active);
|
|
12897
|
+
position: relative;
|
|
12898
|
+
height: 1rem; /* h-4 */
|
|
12899
|
+
width: 1rem; /* w-4 */
|
|
12900
|
+
transform-origin: center;
|
|
12901
|
+
transform: translateX(-50%);
|
|
12902
|
+
cursor: pointer;
|
|
12903
|
+
border-radius: 9999px; /* rounded-full */
|
|
12904
|
+
left: var(--value-percentage);
|
|
16344
12905
|
}
|
|
16345
|
-
|
|
16346
|
-
|
|
12906
|
+
|
|
12907
|
+
[part='value'] {
|
|
12908
|
+
position: absolute;
|
|
12909
|
+
bottom: 2rem; /* bottom-8 */
|
|
12910
|
+
left: 0.5rem; /* left-2 */
|
|
12911
|
+
transform: translateX(-50%);
|
|
12912
|
+
cursor: pointer;
|
|
12913
|
+
border-radius: 0.25rem; /* rounded */
|
|
12914
|
+
background-color: #f3f4f6; /* bg-gray-100 */
|
|
12915
|
+
padding: 0.25rem 0.5rem; /* px-2 py-1 */
|
|
12916
|
+
text-align: center;
|
|
12917
|
+
color: #6b7280; /* text-gray-500 */
|
|
16347
12918
|
}
|
|
16348
|
-
|
|
12919
|
+
`;
|
|
12920
|
+
|
|
12921
|
+
// src/lib/qti-components/qti-interaction/qti-slider-interaction/qti-slider-interaction.ts
|
|
12922
|
+
var QtiSliderInteraction = class extends r4 {
|
|
12923
|
+
constructor() {
|
|
12924
|
+
super();
|
|
12925
|
+
this._value = 0;
|
|
12926
|
+
this.min = 0;
|
|
12927
|
+
this.max = 100;
|
|
12928
|
+
this.step = 1;
|
|
12929
|
+
this._internals = this.attachInternals();
|
|
16349
12930
|
}
|
|
16350
|
-
|
|
16351
|
-
|
|
12931
|
+
connectedCallback() {
|
|
12932
|
+
super.connectedCallback();
|
|
12933
|
+
this._updateValue(this.min);
|
|
12934
|
+
this.setAttribute("tabindex", "0");
|
|
12935
|
+
this.setAttribute("role", "slider");
|
|
16352
12936
|
}
|
|
16353
12937
|
get value() {
|
|
16354
12938
|
return this._value.toString();
|
|
16355
12939
|
}
|
|
16356
12940
|
set value(val) {
|
|
16357
|
-
const
|
|
16358
|
-
if (
|
|
16359
|
-
this.
|
|
16360
|
-
} else {
|
|
16361
|
-
throw new Error("Value must be a number");
|
|
16362
|
-
}
|
|
16363
|
-
}
|
|
16364
|
-
set response(myResponse) {
|
|
16365
|
-
if (Array.isArray(myResponse)) {
|
|
16366
|
-
console.error("QtiSliderInteraction: response is an array, but should be a single value");
|
|
16367
|
-
return;
|
|
16368
|
-
}
|
|
16369
|
-
const value = parseInt(myResponse);
|
|
16370
|
-
if (Number.isNaN(value)) {
|
|
16371
|
-
console.error("QtiSliderInteraction: response is not a number");
|
|
16372
|
-
return;
|
|
12941
|
+
const newValue = parseInt(val, 10);
|
|
12942
|
+
if (!isNaN(newValue)) {
|
|
12943
|
+
this._updateValue(newValue);
|
|
16373
12944
|
}
|
|
16374
|
-
this._value = value;
|
|
16375
12945
|
}
|
|
16376
|
-
|
|
16377
|
-
|
|
16378
|
-
this._value = this.min;
|
|
16379
|
-
}
|
|
16380
|
-
if (this._value > this.max) {
|
|
16381
|
-
this._value = this.max;
|
|
16382
|
-
}
|
|
12946
|
+
_updateValue(newValue) {
|
|
12947
|
+
this._value = Math.min(this.max, Math.max(this.min, newValue));
|
|
16383
12948
|
const valuePercentage = (this._value - this.min) / (this.max - this.min) * 100;
|
|
16384
12949
|
this.style.setProperty("--value-percentage", `${valuePercentage}%`);
|
|
16385
|
-
this.
|
|
16386
|
-
|
|
12950
|
+
this._internals.setFormValue(this.value);
|
|
12951
|
+
this.requestUpdate();
|
|
12952
|
+
}
|
|
12953
|
+
render() {
|
|
12954
|
+
return x`
|
|
12955
|
+
<slot name="prompt"></slot>
|
|
16387
12956
|
<div id="slider" part="slider">
|
|
16388
|
-
|
|
16389
|
-
|
|
16390
|
-
|
|
16391
|
-
</div>` : E}
|
|
16392
|
-
${this.csLive.getPropertyValue("--show-ticks") == "true" ? x`<div id="ticks" part="ticks"></div>` : E}
|
|
16393
|
-
<div id="rail" part="rail" @mousedown=${this._onMouseDown} @touchstart=${this._onTouchMove}>
|
|
16394
|
-
<div id="knob" part="knob">
|
|
16395
|
-
${this.csLive.getPropertyValue("--show-value") == "true" ? x`<div id="value" part="value">${this.value}</div>` : E}
|
|
16396
|
-
</div>
|
|
12957
|
+
<div id="bounds" part="bounds">
|
|
12958
|
+
<div>${this.min}</div>
|
|
12959
|
+
<div>${this.max}</div>
|
|
16397
12960
|
</div>
|
|
16398
|
-
|
|
16399
|
-
|
|
16400
|
-
|
|
16401
|
-
|
|
16402
|
-
|
|
16403
|
-
|
|
16404
|
-
|
|
16405
|
-
|
|
16406
|
-
_onTouchMove(event) {
|
|
16407
|
-
const handleTouchMove = (event2) => {
|
|
16408
|
-
const { x: x3 } = this.getPositionFromEvent(event2);
|
|
16409
|
-
const diffX2 = x3 - this._rail.getBoundingClientRect().left - document.documentElement.scrollLeft;
|
|
16410
|
-
this.calculateValue(diffX2);
|
|
16411
|
-
event2.stopPropagation();
|
|
16412
|
-
};
|
|
16413
|
-
const handleTouchEnd = () => {
|
|
16414
|
-
document.removeEventListener("touchmove", handleTouchMove);
|
|
16415
|
-
document.removeEventListener("touchend", handleTouchEnd);
|
|
16416
|
-
this.saveResponse(this.value.toString());
|
|
16417
|
-
};
|
|
16418
|
-
document.addEventListener("touchmove", handleTouchMove);
|
|
16419
|
-
document.addEventListener("touchend", handleTouchEnd);
|
|
16420
|
-
const { x: x2 } = this.getPositionFromEvent(event);
|
|
16421
|
-
const diffX = x2 - this._rail.getBoundingClientRect().left - document.documentElement.scrollLeft;
|
|
16422
|
-
this.calculateValue(diffX);
|
|
16423
|
-
event.stopPropagation();
|
|
12961
|
+
|
|
12962
|
+
<div id="ticks" part="ticks"></div>
|
|
12963
|
+
|
|
12964
|
+
<div id="rail" part="rail" @mousedown=${this._onMouseDown} @touchstart=${this._onTouchStart}>
|
|
12965
|
+
<div id="knob" part="knob"><div id="value" part="value">${this.value}</div></div>
|
|
12966
|
+
</div>
|
|
12967
|
+
</div>
|
|
12968
|
+
`;
|
|
16424
12969
|
}
|
|
16425
12970
|
_onMouseDown(event) {
|
|
16426
|
-
|
|
16427
|
-
|
|
16428
|
-
this.calculateValue(diffX2);
|
|
16429
|
-
event2.preventDefault();
|
|
16430
|
-
event2.stopPropagation();
|
|
16431
|
-
};
|
|
12971
|
+
this._startDrag(event.pageX);
|
|
12972
|
+
const handleMouseMove = (e10) => this._onDrag(e10.pageX);
|
|
16432
12973
|
const handleMouseUp = () => {
|
|
16433
12974
|
document.removeEventListener("mousemove", handleMouseMove);
|
|
16434
12975
|
document.removeEventListener("mouseup", handleMouseUp);
|
|
16435
|
-
this.
|
|
12976
|
+
this._onDragEnd();
|
|
16436
12977
|
};
|
|
16437
12978
|
document.addEventListener("mousemove", handleMouseMove);
|
|
16438
12979
|
document.addEventListener("mouseup", handleMouseUp);
|
|
16439
|
-
|
|
16440
|
-
|
|
16441
|
-
event.
|
|
16442
|
-
|
|
16443
|
-
|
|
16444
|
-
|
|
16445
|
-
|
|
16446
|
-
|
|
16447
|
-
|
|
16448
|
-
|
|
16449
|
-
|
|
16450
|
-
|
|
16451
|
-
|
|
16452
|
-
|
|
16453
|
-
|
|
16454
|
-
|
|
16455
|
-
|
|
16456
|
-
|
|
16457
|
-
|
|
16458
|
-
|
|
16459
|
-
|
|
16460
|
-
|
|
16461
|
-
|
|
16462
|
-
|
|
16463
|
-
};
|
|
16464
|
-
}
|
|
16465
|
-
return _touchMove;
|
|
12980
|
+
}
|
|
12981
|
+
_onTouchStart(event) {
|
|
12982
|
+
this._startDrag(event.touches[0].pageX);
|
|
12983
|
+
const handleTouchMove = (e10) => this._onDrag(e10.touches[0].pageX);
|
|
12984
|
+
const handleTouchEnd = () => {
|
|
12985
|
+
document.removeEventListener("touchmove", handleTouchMove);
|
|
12986
|
+
document.removeEventListener("touchend", handleTouchEnd);
|
|
12987
|
+
this._onDragEnd();
|
|
12988
|
+
};
|
|
12989
|
+
document.addEventListener("touchmove", handleTouchMove, { passive: false });
|
|
12990
|
+
document.addEventListener("touchend", handleTouchEnd);
|
|
12991
|
+
}
|
|
12992
|
+
_startDrag(pageX) {
|
|
12993
|
+
this._onDrag(pageX);
|
|
12994
|
+
}
|
|
12995
|
+
_onDrag(pageX) {
|
|
12996
|
+
const railRect = this._rail.getBoundingClientRect();
|
|
12997
|
+
const diffX = pageX - railRect.left;
|
|
12998
|
+
const percentage = Math.min(1, Math.max(0, diffX / railRect.width));
|
|
12999
|
+
const steppedValue = this.min + Math.round(percentage * (this.max - this.min) / this.step) * this.step;
|
|
13000
|
+
this._updateValue(steppedValue);
|
|
13001
|
+
}
|
|
13002
|
+
_onDragEnd() {
|
|
13003
|
+
this.dispatchEvent(new Event("change", { bubbles: true }));
|
|
16466
13004
|
}
|
|
16467
13005
|
};
|
|
16468
|
-
QtiSliderInteraction.
|
|
13006
|
+
QtiSliderInteraction.formAssociated = true;
|
|
13007
|
+
// Enables elementInternals for forms
|
|
13008
|
+
QtiSliderInteraction.styles = qti_slider_interaction_styles_default;
|
|
16469
13009
|
__decorateClass([
|
|
16470
13010
|
e6("#rail")
|
|
16471
13011
|
], QtiSliderInteraction.prototype, "_rail", 2);
|
|
16472
|
-
__decorateClass([
|
|
16473
|
-
n5({ type: Boolean, attribute: "step-label" })
|
|
16474
|
-
], QtiSliderInteraction.prototype, "stepLabel", 2);
|
|
16475
|
-
__decorateClass([
|
|
16476
|
-
n5({ type: Boolean })
|
|
16477
|
-
], QtiSliderInteraction.prototype, "reverse", 2);
|
|
16478
13012
|
__decorateClass([
|
|
16479
13013
|
n5({ type: Number, attribute: "lower-bound" })
|
|
16480
|
-
], QtiSliderInteraction.prototype, "min",
|
|
13014
|
+
], QtiSliderInteraction.prototype, "min", 2);
|
|
16481
13015
|
__decorateClass([
|
|
16482
13016
|
n5({ type: Number, attribute: "upper-bound" })
|
|
16483
|
-
], QtiSliderInteraction.prototype, "max",
|
|
13017
|
+
], QtiSliderInteraction.prototype, "max", 2);
|
|
16484
13018
|
__decorateClass([
|
|
16485
13019
|
n5({ type: Number, attribute: "step" })
|
|
16486
|
-
], QtiSliderInteraction.prototype, "step",
|
|
16487
|
-
__decorateClass([
|
|
16488
|
-
watch("disabled", { waitUntilFirstUpdate: true })
|
|
16489
|
-
], QtiSliderInteraction.prototype, "_handleDisabledChange", 2);
|
|
16490
|
-
__decorateClass([
|
|
16491
|
-
watch("readonly", { waitUntilFirstUpdate: true })
|
|
16492
|
-
], QtiSliderInteraction.prototype, "_handleReadonlyChange", 2);
|
|
13020
|
+
], QtiSliderInteraction.prototype, "step", 2);
|
|
16493
13021
|
QtiSliderInteraction = __decorateClass([
|
|
16494
13022
|
t4("qti-slider-interaction")
|
|
16495
13023
|
], QtiSliderInteraction);
|
|
@@ -16781,6 +13309,7 @@ console.log(
|
|
|
16781
13309
|
export {
|
|
16782
13310
|
ActiveElementMixin,
|
|
16783
13311
|
Interaction,
|
|
13312
|
+
ItemContainer,
|
|
16784
13313
|
QtiAnd,
|
|
16785
13314
|
QtiAssessmentItem,
|
|
16786
13315
|
QtiAssessmentItemRef,
|
|
@@ -16823,7 +13352,6 @@ export {
|
|
|
16823
13352
|
QtiIsNull,
|
|
16824
13353
|
QtiItem,
|
|
16825
13354
|
QtiItemBody,
|
|
16826
|
-
QtiItemMixin,
|
|
16827
13355
|
QtiLookupOutcomeValue,
|
|
16828
13356
|
QtiLt,
|
|
16829
13357
|
QtiLte,
|
|
@@ -16870,6 +13398,7 @@ export {
|
|
|
16870
13398
|
QtiTest,
|
|
16871
13399
|
QtiTestPart,
|
|
16872
13400
|
QtiTextEntryInteraction,
|
|
13401
|
+
QtiUploadInteraction,
|
|
16873
13402
|
QtiVariable,
|
|
16874
13403
|
TestContainer,
|
|
16875
13404
|
TestItemLink,
|