@citolab/qti-components 6.9.1-beta.11 → 6.9.1-beta.13
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/dist/{chunk-62FWJYVB.js → chunk-FGJTTWL5.js} +2 -2
- package/dist/custom-elements.json +8 -0
- package/dist/index.js +82 -60
- package/dist/item.css +26 -4
- package/dist/qti-components/index.js +1 -1
- package/dist/qti-item/index.d.ts +2 -0
- package/dist/qti-item/index.js +29 -7
- package/dist/qti-loader/index.js +1 -1
- package/dist/qti-transformers/index.js +1 -1
- package/package.json +1 -1
package/dist/item.css
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
@layer qti-base, qti-components, qti-utilities, qti-variants, qti-extended;
|
|
2
2
|
|
|
3
|
+
/*
|
|
4
|
+
Base variables on PNP
|
|
5
|
+
https://www.imsglobal.org/spec/qti/v3p0/impl#h.x51afjl5r8gl
|
|
6
|
+
font-face
|
|
7
|
+
https://www.imsglobal.org/spec/qti/v3p0/impl#h.r3hufj74r1do
|
|
8
|
+
line-spacing
|
|
9
|
+
https://www.imsglobal.org/spec/qti/v3p0/impl#h.e0onr51nghyl
|
|
10
|
+
*/
|
|
11
|
+
|
|
3
12
|
:root,
|
|
4
13
|
:host {
|
|
5
14
|
/* Primary colors */
|
|
@@ -19,7 +28,7 @@
|
|
|
19
28
|
--qti-bg-primary: var(--qti-primary);
|
|
20
29
|
|
|
21
30
|
/* Text colors */
|
|
22
|
-
--qti-text-gray-500: #
|
|
31
|
+
--qti-text-gray-500: #45484f;
|
|
23
32
|
--qti-text-white: white;
|
|
24
33
|
|
|
25
34
|
/* Border properties */
|
|
@@ -302,8 +311,7 @@
|
|
|
302
311
|
background-color: var(--qti-bg-gray-100);
|
|
303
312
|
color: var(--qti-text-gray-500);
|
|
304
313
|
border-color: var(--qti-border-color-gray);
|
|
305
|
-
|
|
306
|
-
/* outline: 2px solid var(--qti-bg-gray-100); */
|
|
314
|
+
outline: 4px solid var(--qti-bg-gray-100);
|
|
307
315
|
|
|
308
316
|
/* outline-color: var(--qti-text-gray-50); */
|
|
309
317
|
}
|
|
@@ -1950,6 +1958,7 @@ qti-response-declaration {
|
|
|
1950
1958
|
background-color: var(--qti-bg-gray-100);
|
|
1951
1959
|
color: var(--qti-text-gray-500);
|
|
1952
1960
|
border-color: var(--qti-border-color-gray);
|
|
1961
|
+
outline: 4px solid var(--qti-bg-gray-100);
|
|
1953
1962
|
}
|
|
1954
1963
|
|
|
1955
1964
|
border-radius: var(--qti-border-radius-md);
|
|
@@ -1991,6 +2000,7 @@ qti-response-declaration {
|
|
|
1991
2000
|
background-color: var(--qti-bg-gray-100);
|
|
1992
2001
|
color: var(--qti-text-gray-500);
|
|
1993
2002
|
border-color: var(--qti-border-color-gray);
|
|
2003
|
+
outline: 4px solid var(--qti-bg-gray-100);
|
|
1994
2004
|
}
|
|
1995
2005
|
|
|
1996
2006
|
&::part(cha) {
|
|
@@ -2202,6 +2212,7 @@ qti-response-declaration {
|
|
|
2202
2212
|
background-color: var(--qti-bg-gray-100);
|
|
2203
2213
|
color: var(--qti-text-gray-500);
|
|
2204
2214
|
border-color: var(--qti-border-color-gray);
|
|
2215
|
+
outline: 4px solid var(--qti-bg-gray-100);
|
|
2205
2216
|
}
|
|
2206
2217
|
|
|
2207
2218
|
width: 100%;
|
|
@@ -2243,6 +2254,7 @@ qti-response-declaration {
|
|
|
2243
2254
|
background-color: var(--qti-bg-gray-100);
|
|
2244
2255
|
color: var(--qti-text-gray-500);
|
|
2245
2256
|
border-color: var(--qti-border-color-gray);
|
|
2257
|
+
outline: 4px solid var(--qti-bg-gray-100);
|
|
2246
2258
|
}
|
|
2247
2259
|
|
|
2248
2260
|
width: 100%;
|
|
@@ -2307,6 +2319,7 @@ qti-response-declaration {
|
|
|
2307
2319
|
background-color: var(--qti-bg-gray-100);
|
|
2308
2320
|
color: var(--qti-text-gray-500);
|
|
2309
2321
|
border-color: var(--qti-border-color-gray);
|
|
2322
|
+
outline: 4px solid var(--qti-bg-gray-100);
|
|
2310
2323
|
}
|
|
2311
2324
|
}
|
|
2312
2325
|
}
|
|
@@ -2413,6 +2426,7 @@ qti-response-declaration {
|
|
|
2413
2426
|
background-color: var(--qti-bg-gray-100);
|
|
2414
2427
|
color: var(--qti-text-gray-500);
|
|
2415
2428
|
border-color: var(--qti-border-color-gray);
|
|
2429
|
+
outline: 4px solid var(--qti-bg-gray-100);
|
|
2416
2430
|
}
|
|
2417
2431
|
|
|
2418
2432
|
border-radius: var(--qti-border-radius-md);
|
|
@@ -2461,6 +2475,7 @@ qti-response-declaration {
|
|
|
2461
2475
|
background-color: var(--qti-bg-gray-100);
|
|
2462
2476
|
color: var(--qti-text-gray-500);
|
|
2463
2477
|
border-color: var(--qti-border-color-gray);
|
|
2478
|
+
outline: 4px solid var(--qti-bg-gray-100);
|
|
2464
2479
|
}
|
|
2465
2480
|
}
|
|
2466
2481
|
}
|
|
@@ -2590,7 +2605,11 @@ qti-response-declaration {
|
|
|
2590
2605
|
|
|
2591
2606
|
&[disabled] {
|
|
2592
2607
|
&::part(dropslot) {
|
|
2593
|
-
|
|
2608
|
+
cursor: not-allowed;
|
|
2609
|
+
background-color: var(--qti-bg-gray-100);
|
|
2610
|
+
color: var(--qti-text-gray-500);
|
|
2611
|
+
border-color: var(--qti-border-color-gray);
|
|
2612
|
+
outline: 4px solid var(--qti-bg-gray-100);
|
|
2594
2613
|
}
|
|
2595
2614
|
}
|
|
2596
2615
|
|
|
@@ -2887,6 +2906,7 @@ qti-response-declaration {
|
|
|
2887
2906
|
background-color: var(--qti-bg-gray-100);
|
|
2888
2907
|
color: var(--qti-text-gray-500);
|
|
2889
2908
|
border-color: var(--qti-border-color-gray);
|
|
2909
|
+
outline: 4px solid var(--qti-bg-gray-100);
|
|
2890
2910
|
}
|
|
2891
2911
|
|
|
2892
2912
|
&[aria-ordervalue] {
|
|
@@ -2950,6 +2970,7 @@ qti-response-declaration {
|
|
|
2950
2970
|
background-color: var(--qti-bg-gray-100);
|
|
2951
2971
|
color: var(--qti-text-gray-500);
|
|
2952
2972
|
border-color: var(--qti-border-color-gray);
|
|
2973
|
+
outline: 4px solid var(--qti-bg-gray-100);
|
|
2953
2974
|
}
|
|
2954
2975
|
|
|
2955
2976
|
width: 100%;
|
|
@@ -2991,6 +3012,7 @@ qti-response-declaration {
|
|
|
2991
3012
|
background-color: var(--qti-bg-gray-100);
|
|
2992
3013
|
color: var(--qti-text-gray-500);
|
|
2993
3014
|
border-color: var(--qti-border-color-gray);
|
|
3015
|
+
outline: 4px solid var(--qti-bg-gray-100);
|
|
2994
3016
|
}
|
|
2995
3017
|
|
|
2996
3018
|
width: 100%;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{a as Dt}from"../chunk-
|
|
1
|
+
import{a as Dt}from"../chunk-FGJTTWL5.js";import{a as b,b as C,c as n}from"../chunk-E7TLXHQH.js";import{provide as hr}from"@lit/context";import{LitElement as fr,html as gr}from"lit";import{customElement as br,property as K}from"lit/decorators.js";function y(c,i){let e=b({waitUntilFirstUpdate:!1},i);return(t,r)=>{let{update:s}=t,o=Array.isArray(c)?c:[c];t.update=function(a){o.forEach(l=>{let p=l;if(a.has(p)){let d=a.get(p),m=this[p];d!==m&&(!e.waitUntilFirstUpdate||this.hasUpdated)&&this[r](d,m)}}),s.call(this,a)}}}import{createContext as mr}from"@lit/context";var Ht=[{identifier:"completionStatus",cardinality:"single",baseType:"string",value:"unknown",type:"outcome"},{identifier:"numAttempts",cardinality:"single",baseType:"integer",value:"0",type:"response"}],L=mr("item");var q=class extends fr{constructor(){super();this.identifier="";this.adaptive="false";this.timeDependent=null;this._handleDisabledChange=(e,t)=>{this._interactionElements.forEach(r=>r.disabled=t)};this._handleReadonlyChange=(e,t)=>this._interactionElements.forEach(r=>r.readonly=t);this._context={identifier:this.getAttribute("identifier"),variables:Ht};this._initialContext=C(b({},this._context),{variables:this._context.variables});this._feedbackElements=[];this._interactionElements=[];this.addEventListener("qti-register-variable",e=>{this._context=C(b({},this._context),{variables:[...this._context.variables,e.detail.variable]}),this._initialContext=this._context,e.stopPropagation()}),this.addEventListener("qti-register-feedback",e=>{e.stopPropagation();let t=e.detail;this._feedbackElements.push(t),t.checkShowFeedback(t.outcomeIdentifier)}),this.addEventListener("qti-register-interaction",e=>{e.stopPropagation(),this._interactionElements.push(e.target)}),this.addEventListener("end-attempt",e=>{let{responseIdentifier:t,countAttempt:r}=e.detail;this.updateResponseVariable(t,"true"),this.processResponse(r)}),this.addEventListener("qti-set-outcome-value",e=>{let{outcomeIdentifier:t,value:r}=e.detail;this.updateOutcomeVariable(t,r),e.stopPropagation()}),this.addEventListener("qti-interaction-response",this.handleUpdateResponseVariable)}get variables(){return this._context.variables.map(e=>b({identifier:e.identifier,value:e.value,type:e.type},e.type==="outcome"&&e.identifier==="SCORE"?{externalScored:e.externalScored}:{}))}set variables(e){if(!Array.isArray(e)||e.some(t=>!("identifier"in t))){console.warn("variables property should be an array of VariableDeclaration");return}this._context=C(b({},this._context),{variables:this._context.variables.map(t=>{let r=e.find(s=>s.identifier===t.identifier);return r?b(b({},t),r):t})}),this._context.variables.forEach(t=>{if(t.type==="response"){let r=this._interactionElements.find(s=>s.responseIdentifier===t.identifier);r&&(r.response=t.value)}t.type==="outcome"&&this._feedbackElements.forEach(r=>r.checkShowFeedback(t.identifier))})}async connectedCallback(){super.connectedCallback(),await this.updateComplete,this._emit("qti-assessment-item-connected",this)}set responses(e){if(e)for(let t of e){this.getResponse(t.responseIdentifier)&&this.updateResponseVariable(t.responseIdentifier,t.response);let s=this._interactionElements.find(o=>o.getAttribute("response-identifier")===t.responseIdentifier);s&&(s.response=t.response)}}render(){return gr`<slot></slot>`}showCorrectResponse(e){let r=this._context.variables.filter(s=>"correctResponse"in s&&s.correctResponse).map(s=>({responseIdentifier:s.identifier,response:s.correctResponse}));for(let s of r){let o=this._interactionElements.find(a=>a.getAttribute("response-identifier")===s.responseIdentifier);o&&(o.correctResponse=e?s.response:"")}}processResponse(e=!0){var r;let t=this.querySelector("qti-response-processing");return!t||!t.process?!1:(t.process(),this.adaptive==="false"&&this.updateOutcomeVariable("completionStatus",this._getCompletionStatus()),e&&this.updateOutcomeVariable("numAttempts",(+((r=this._context.variables.find(s=>s.identifier==="numAttempts"))==null?void 0:r.value)+1).toString()),this._emit("qti-response-processed"),!0)}resetResponses(){this._context=this._initialContext}getResponse(e){return this.getVariable(e)}getOutcome(e){return this.getVariable(e)}getVariable(e){return this._context.variables.find(t=>t.identifier===e)||null}handleUpdateResponseVariable(e){let{responseIdentifier:t,response:r}=e.detail;this.updateResponseVariable(t,r)}updateResponseVariable(e,t){this._context=C(b({},this._context),{variables:this._context.variables.map(r=>r.identifier!==e?r:C(b({},r),{value:t}))}),this._emit("qti-interaction-changed",{item:this.identifier,responseIdentifier:e,response:Array.isArray(t)?[...t]:t}),this.adaptive==="false"&&this.updateOutcomeVariable("completionStatus",this._getCompletionStatus())}updateOutcomeVariable(e,t){var s;let r=this.getOutcome(e);if(!r){console.warn(`Can not set qti-outcome-identifier: ${e}, it is not available`);return}this._context=C(b({},this._context),{variables:this._context.variables.map(o=>o.identifier!==e?o:C(b({},o),{value:r.cardinality==="single"?t:[...o.value,t]}))}),this._feedbackElements.forEach(o=>o.checkShowFeedback(e)),this._emit("qti-outcome-changed",{item:this.identifier,outcomeIdentifier:e,value:(s=this._context.variables.find(o=>o.identifier===e))==null?void 0:s.value})}_getCompletionStatus(){return this._interactionElements.every(e=>e.validate())?"completed":this._interactionElements.some(e=>e.validate())?"incomplete":"not_attempted"}_emit(e,t=null){this.dispatchEvent(new CustomEvent(e,{bubbles:!0,composed:!0,detail:t}))}};n([K({type:String})],q.prototype,"title",2),n([K({type:String})],q.prototype,"identifier",2),n([K({type:String})],q.prototype,"adaptive",2),n([K({type:String})],q.prototype,"timeDependent",2),n([K({type:Boolean})],q.prototype,"disabled",2),n([y("disabled",{waitUntilFirstUpdate:!0})],q.prototype,"_handleDisabledChange",2),n([K({type:Boolean})],q.prototype,"readonly",2),n([y("readonly",{waitUntilFirstUpdate:!0})],q.prototype,"_handleReadonlyChange",2),n([hr({context:L})],q.prototype,"_context",2),q=n([br("qti-assessment-item")],q);import{LitElement as vr}from"lit";import{customElement as yr,property as Nt}from"lit/decorators.js";var W=class extends vr{constructor(){super(...arguments);this.identifier="";this.href=""}async connectedCallback(){super.connectedCallback();let e=new Event("qti-assessment-stimulus-ref-connected",{cancelable:!0,bubbles:!0});if(this.dispatchEvent(e)){let s=this.closest("qti-assessment-item").querySelector(`[data-stimulus-idref=${this.identifier}]`);s?await this.loadAndAppendStimulus(s):console.warn(`Stimulus with data-stimulus-idref ${this.identifier} not found`)}}async loadAndAppendStimulus(e){var s;let t=this.href.substring(0,this.href.lastIndexOf("/")),r=await Dt().load(this.href).then(o=>o.path(t).htmldoc());if(r){let o=r.querySelectorAll("qti-stimulus-body, qti-stylesheet");e.append(...o),((s=r.querySelector("qti-assessment-stimulus"))==null?void 0:s.title).includes("(lijst)")&&e.classList.add("qti-stimulus-list")}}};n([Nt({type:String})],W.prototype,"identifier",2),n([Nt({type:String})],W.prototype,"href",2),W=n([yr("qti-assessment-stimulus-ref")],W);import{html as xr}from"lit";import{property as Ae}from"lit/decorators.js";var Vt={toAttribute:c=>c?"true":"false",fromAttribute:c=>c==="true"};function R(c,i){class e extends c{constructor(...s){super(...s);this.identifier="";this.tabIndex=0;this.disabled=!1;this.readonly=!1;this._internals=this.attachInternals()}handleDisabledChange(s,o){this.tabIndex=o?-1:0,o&&this.blur()}setInternalState(s,o){o&&!this._internals.states.has(s)?this._internals.states.add(s):!o&&this._internals.states.has(s)&&this._internals.states.delete(s)}connectedCallback(){super.connectedCallback(),this.addEventListener("keyup",this._onKeyUp),this.addEventListener("click",this._onClick),this.dispatchEvent(new CustomEvent(`register-${i}`,{bubbles:!0,composed:!0}))}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keyup",this._onKeyUp),this.removeEventListener("click",this._onClick),this.dispatchEvent(new CustomEvent(`unregister-${i}`,{bubbles:!0,composed:!0}))}_onKeyUp(s){s.altKey||s.code==="Space"&&(s.preventDefault(),this._activate())}_onClick(){this.disabled||this.readonly||(this.focus(),this._activate())}_activate(){this.disabled||this.readonly||this.dispatchEvent(new CustomEvent(`activate-${i}`,{bubbles:!0,composed:!0,detail:{identifier:this.identifier}}))}render(){return xr`<slot></slot>`}}return n([Ae({type:String})],e.prototype,"identifier",2),n([Ae({type:Number,reflect:!0,attribute:"tabindex"})],e.prototype,"tabIndex",2),n([Ae({type:Boolean,reflect:!0,attribute:"aria-disabled",converter:Vt})],e.prototype,"disabled",2),n([Ae({type:Boolean,reflect:!0,attribute:"aria-readonly",converter:Vt})],e.prototype,"readonly",2),n([y("disabled",{waitUntilFirstUpdate:!0})],e.prototype,"handleDisabledChange",1),e}import{customElement as Cr}from"lit/decorators.js";import{html as qr,LitElement as Tr}from"lit";import{css as Er}from"lit";var $t=Er`
|
|
2
2
|
:host {
|
|
3
3
|
display: block;
|
|
4
4
|
}
|