qti3-item-player-vue3 0.2.4 → 0.2.6
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/assets/pci/pci.html +109 -49
- package/dist/qti3-item-player-vue3.js +1263 -1193
- package/dist/qti3-item-player-vue3.umd.cjs +46 -46
- package/package.json +1 -1
package/dist/assets/pci/pci.html
CHANGED
@@ -127,6 +127,8 @@ const QTI_PCI_API = {
|
|
127
127
|
properties: null,
|
128
128
|
contextVariables: null,
|
129
129
|
templateVariables: null,
|
130
|
+
stylesheets: null,
|
131
|
+
catalogInfo: null,
|
130
132
|
moduleResolution: null,
|
131
133
|
instance: null,
|
132
134
|
response: null,
|
@@ -137,107 +139,125 @@ const QTI_PCI_API = {
|
|
137
139
|
height: 0,
|
138
140
|
onQtiInteractionChanged: null,
|
139
141
|
|
140
|
-
getInstance
|
142
|
+
getInstance () {
|
141
143
|
return this.instance;
|
142
144
|
},
|
143
145
|
|
144
|
-
setInstance
|
146
|
+
setInstance (instance) {
|
145
147
|
this.instance = instance;
|
146
148
|
},
|
147
149
|
|
148
|
-
getTypeIdentifier
|
150
|
+
getTypeIdentifier () {
|
149
151
|
return this.typeIdentifier;
|
150
152
|
},
|
151
153
|
|
152
|
-
setTypeIdentifier
|
154
|
+
setTypeIdentifier (typeIdentifier) {
|
153
155
|
this.typeIdentifier = typeIdentifier;
|
154
156
|
},
|
155
157
|
|
156
|
-
getResponseIdentifier
|
158
|
+
getResponseIdentifier () {
|
157
159
|
return this.responseIdentifier;
|
158
160
|
},
|
159
161
|
|
160
|
-
setResponseIdentifier
|
162
|
+
setResponseIdentifier (responseIdentifier) {
|
161
163
|
this.responseIdentifier = responseIdentifier;
|
162
164
|
},
|
163
165
|
|
164
|
-
getPci
|
166
|
+
getPci () {
|
165
167
|
return this.pci;
|
166
168
|
},
|
167
169
|
|
168
|
-
setPci
|
170
|
+
setPci (pci) {
|
169
171
|
this.pci = pci;
|
170
172
|
},
|
171
173
|
|
172
|
-
getDom
|
174
|
+
getDom () {
|
173
175
|
return this.dom;
|
174
176
|
},
|
175
177
|
|
176
|
-
setDom
|
178
|
+
setDom (dom) {
|
177
179
|
this.dom = dom;
|
178
180
|
},
|
179
181
|
|
180
|
-
getProperties
|
182
|
+
getProperties () {
|
181
183
|
return this.properties;
|
182
184
|
},
|
183
185
|
|
184
|
-
setProperties
|
186
|
+
setProperties (properties) {
|
185
187
|
this.properties = properties;
|
186
188
|
},
|
187
189
|
|
188
|
-
getContextVariables
|
190
|
+
getContextVariables () {
|
189
191
|
return this.contextVariables;
|
190
192
|
},
|
191
193
|
|
192
|
-
setContextVariables
|
194
|
+
setContextVariables (contextVariables) {
|
193
195
|
this.contextVariables = contextVariables;
|
194
196
|
},
|
195
197
|
|
196
|
-
getTemplateVariables
|
198
|
+
getTemplateVariables () {
|
197
199
|
return this.templateVariables;
|
198
200
|
},
|
199
201
|
|
200
|
-
setTemplateVariables
|
202
|
+
setTemplateVariables (templateVariables) {
|
201
203
|
this.templateVariables = templateVariables;
|
202
204
|
},
|
203
205
|
|
204
|
-
|
206
|
+
getStylesheets () {
|
207
|
+
return this.stylesheets;
|
208
|
+
},
|
209
|
+
|
210
|
+
setStylesheets (stylesheets) {
|
211
|
+
if (typeof stylesheets === 'undefined') return;
|
212
|
+
this.stylesheets = stylesheets;
|
213
|
+
},
|
214
|
+
|
215
|
+
getCatalogInfo () {
|
216
|
+
return this.catalogInfo;
|
217
|
+
},
|
218
|
+
|
219
|
+
setCatalogInfo (catalogInfo) {
|
220
|
+
if (typeof catalogInfo === 'undefined') return;
|
221
|
+
this.catalogInfo = catalogInfo;
|
222
|
+
},
|
223
|
+
|
224
|
+
getBoundTo () {
|
205
225
|
return this.boundTo;
|
206
226
|
},
|
207
227
|
|
208
|
-
setBoundTo
|
228
|
+
setBoundTo (boundTo) {
|
209
229
|
this.boundTo = boundTo;
|
210
230
|
},
|
211
231
|
|
212
|
-
getStatus
|
232
|
+
getStatus () {
|
213
233
|
return this.status;
|
214
234
|
},
|
215
235
|
|
216
|
-
setStatus
|
236
|
+
setStatus (status) {
|
217
237
|
this.status = status;
|
218
238
|
},
|
219
239
|
|
220
|
-
getModuleResolution
|
240
|
+
getModuleResolution () {
|
221
241
|
return this.moduleResolution;
|
222
242
|
},
|
223
243
|
|
224
|
-
setModuleResolution
|
244
|
+
setModuleResolution (moduleResolution) {
|
225
245
|
this.moduleResolution = moduleResolution;
|
226
246
|
},
|
227
247
|
|
228
|
-
getState
|
248
|
+
getState () {
|
229
249
|
return this.state;
|
230
250
|
},
|
231
251
|
|
232
|
-
setState
|
252
|
+
setState (state) {
|
233
253
|
this.state = (typeof state === 'undefined') ? null : JSON.parse(state);
|
234
254
|
},
|
235
255
|
|
236
|
-
getStateFromState
|
256
|
+
getStateFromState () {
|
237
257
|
return (this.state === null) ? null : this.state.state;
|
238
258
|
},
|
239
259
|
|
240
|
-
getResponseFromState
|
260
|
+
getResponseFromState () {
|
241
261
|
return (this.state === null) ? undefined : this.state.response;
|
242
262
|
},
|
243
263
|
|
@@ -246,7 +266,7 @@ const QTI_PCI_API = {
|
|
246
266
|
* Upon completion, call NotifyPciStateReady, passing the
|
247
267
|
* stringified response and state as parameters.
|
248
268
|
*/
|
249
|
-
getInteractionState
|
269
|
+
getInteractionState () {
|
250
270
|
const obj = {
|
251
271
|
response: null,
|
252
272
|
state: null
|
@@ -265,21 +285,24 @@ const QTI_PCI_API = {
|
|
265
285
|
this.NotifyPciStateReady(JSON.stringify(obj));
|
266
286
|
},
|
267
287
|
|
268
|
-
initialize
|
288
|
+
initialize (pci) {
|
269
289
|
this.setDom(document.getElementById('qti3-player-pci-element'));
|
270
290
|
this.setPci(pci);
|
271
291
|
this.setTypeIdentifier(pci.typeIdentifier);
|
272
|
-
this.setProperties(pci.properties);
|
292
|
+
this.setProperties(this.transformProperties(pci.properties));
|
273
293
|
this.setModuleResolution(pci.moduleResolution);
|
274
294
|
this.setContextVariables(pci.contextVariables);
|
275
295
|
this.setTemplateVariables(pci.templateVariables);
|
296
|
+
this.setStylesheets(pci.stylesheets);
|
297
|
+
this.setCatalogInfo(pci.catalogInfo);
|
276
298
|
this.setBoundTo(pci.boundTo);
|
277
299
|
this.setStatus(pci.status)
|
278
300
|
|
279
301
|
this.trackResize(this.getDom());
|
280
302
|
this.trackQtiInteractionChanged(this.getDom());
|
303
|
+
this.injectStylesheets();
|
281
304
|
this.injectClassAttribute();
|
282
|
-
|
305
|
+
this.injectMarkup();
|
283
306
|
this.launchPci(
|
284
307
|
this.getTypeIdentifier(),
|
285
308
|
this.getDom(),
|
@@ -293,13 +316,13 @@ const QTI_PCI_API = {
|
|
293
316
|
);
|
294
317
|
},
|
295
318
|
|
296
|
-
injectClassAttribute
|
319
|
+
injectClassAttribute () {
|
297
320
|
if (this.getPci().classAttribute.length == 0) return
|
298
321
|
let wrapperEl = document.getElementById('qti3-player-pci-wrapper');
|
299
322
|
wrapperEl.classList.add(this.getPci().classAttribute);
|
300
323
|
},
|
301
324
|
|
302
|
-
injectMarkup
|
325
|
+
injectMarkup () {
|
303
326
|
this.getDom().innerHTML =
|
304
327
|
`<div
|
305
328
|
id="qti3-player-pci-markup"
|
@@ -307,16 +330,53 @@ const QTI_PCI_API = {
|
|
307
330
|
>${this.getPci().markup}</div>`;
|
308
331
|
},
|
309
332
|
|
310
|
-
|
333
|
+
injectStylesheets () {
|
334
|
+
const stylesheets = this.getStylesheets()
|
335
|
+
if (stylesheets === null) return
|
336
|
+
stylesheets.forEach((stylesheet) => {
|
337
|
+
if (!stylesheet.hasOwnProperty('css')) return
|
338
|
+
// Stylesheet css property is base64. Decode it.
|
339
|
+
const cssText = this.decodeBase64ToBytes(stylesheet.css)
|
340
|
+
const style = document.createElement('style')
|
341
|
+
style.innerHTML = `${cssText}`
|
342
|
+
document.head.appendChild(style)
|
343
|
+
})
|
344
|
+
},
|
345
|
+
|
346
|
+
/**
|
347
|
+
* @description Transform the given properties object into a new object
|
348
|
+
* containing the same keys, but with base64-decoded values.
|
349
|
+
* @param {Object} properties
|
350
|
+
* @return {Object} transformed properties object with decoded values
|
351
|
+
*/
|
352
|
+
transformProperties (properties) {
|
353
|
+
const props = {}
|
354
|
+
for (const [key, value] of Object.entries(properties)) {
|
355
|
+
props[`${key}`] = `${this.decodeBase64ToBytes(value)}`
|
356
|
+
}
|
357
|
+
return props
|
358
|
+
},
|
359
|
+
|
360
|
+
decodeBase64ToBytes (base64) {
|
361
|
+
const textDecoder = new TextDecoder()
|
362
|
+
return textDecoder.decode(this.base64ToBytes(base64))
|
363
|
+
},
|
364
|
+
|
365
|
+
base64ToBytes (base64) {
|
366
|
+
const binString = atob(base64)
|
367
|
+
return Uint8Array.from(binString, (m) => m.codePointAt(0))
|
368
|
+
},
|
369
|
+
|
370
|
+
getModuleDependencies () {
|
311
371
|
// Init qtiCustomInteractionContext as the first dependency
|
312
|
-
let dependencies = ['qtiCustomInteractionContext']
|
372
|
+
let dependencies = ['qtiCustomInteractionContext']
|
313
373
|
|
314
|
-
const paths = this.getModuleResolution().paths
|
374
|
+
const paths = this.getModuleResolution().paths
|
315
375
|
for (let property in paths) {
|
316
|
-
dependencies.push(property)
|
317
|
-
}
|
376
|
+
dependencies.push(property)
|
377
|
+
}
|
318
378
|
|
319
|
-
return dependencies
|
379
|
+
return dependencies
|
320
380
|
},
|
321
381
|
|
322
382
|
/**
|
@@ -333,7 +393,7 @@ const QTI_PCI_API = {
|
|
333
393
|
* @param {Object} boundTo The response variable this PCI is bound to and its value
|
334
394
|
* @param {String} status Item lifecycle status; e.g., 'interacting'
|
335
395
|
*/
|
336
|
-
launchPci
|
396
|
+
launchPci (
|
337
397
|
typeIdentifier,
|
338
398
|
dom,
|
339
399
|
responseIdentifier,
|
@@ -374,7 +434,7 @@ const QTI_PCI_API = {
|
|
374
434
|
});
|
375
435
|
},
|
376
436
|
|
377
|
-
NotifyPciChildLoaded
|
437
|
+
NotifyPciChildLoaded () {
|
378
438
|
if (self == top) return;
|
379
439
|
|
380
440
|
// Extract the identifier qs param
|
@@ -384,7 +444,7 @@ const QTI_PCI_API = {
|
|
384
444
|
window.parent.postMessage({ message: 'PciChildLoaded', identifier: this.getResponseIdentifier(), success: true },'*');
|
385
445
|
},
|
386
446
|
|
387
|
-
NotifyPciReady
|
447
|
+
NotifyPciReady (instance, state) {
|
388
448
|
this.setInstance(instance);
|
389
449
|
|
390
450
|
if (self == top) return;
|
@@ -397,7 +457,7 @@ const QTI_PCI_API = {
|
|
397
457
|
window.parent.postMessage({ message: 'PciReady', identifier: this.getResponseIdentifier(), width: computedWidth, height: computedHeight, success: true },'*');
|
398
458
|
},
|
399
459
|
|
400
|
-
NotifyPciDone
|
460
|
+
NotifyPciDone (instance, response, state, status) {
|
401
461
|
if (self == top) return;
|
402
462
|
|
403
463
|
const stringifiedState = JSON.stringify({
|
@@ -408,12 +468,12 @@ const QTI_PCI_API = {
|
|
408
468
|
window.parent.postMessage({ message: 'PciDone', identifier: this.getResponseIdentifier(), state: stringifiedStateObject, status: status, success: true },'*');
|
409
469
|
},
|
410
470
|
|
411
|
-
NotifyPciStateReady
|
471
|
+
NotifyPciStateReady (stringifiedStateObject) {
|
412
472
|
if (self == top) return;
|
413
473
|
window.parent.postMessage({ message: 'PciGetState_Reply', identifier: this.getResponseIdentifier(), state: stringifiedStateObject, success: true },'*');
|
414
474
|
},
|
415
475
|
|
416
|
-
NotifyPciInteractionChanged
|
476
|
+
NotifyPciInteractionChanged (valid, value) {
|
417
477
|
if (self == top) return;
|
418
478
|
|
419
479
|
const stringifiedState = JSON.stringify({
|
@@ -430,7 +490,7 @@ const QTI_PCI_API = {
|
|
430
490
|
* @method getQueryParameterByName
|
431
491
|
* @param {String} name The name of the paramter to get from the URL.
|
432
492
|
*/
|
433
|
-
getQueryParameterByName
|
493
|
+
getQueryParameterByName (name) {
|
434
494
|
let regex = new RegExp("[\\?&]" + name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]') + '=([^&#]*)');
|
435
495
|
let results = regex.exec(window.location.search);
|
436
496
|
|
@@ -439,7 +499,7 @@ const QTI_PCI_API = {
|
|
439
499
|
return decodeURIComponent(results[1].replace(/\+/g, " "));
|
440
500
|
},
|
441
501
|
|
442
|
-
bindWindowEventListener
|
502
|
+
bindWindowEventListener (element, eventName, eventHandler) {
|
443
503
|
if (element.addEventListener) {
|
444
504
|
element.addEventListener(eventName, eventHandler, false);
|
445
505
|
} else if (element.attachEvent) {
|
@@ -448,7 +508,7 @@ const QTI_PCI_API = {
|
|
448
508
|
}
|
449
509
|
},
|
450
510
|
|
451
|
-
trackResize
|
511
|
+
trackResize (element) {
|
452
512
|
// create a mutation observer instance
|
453
513
|
let observer = new MutationObserver(function(mutations) {
|
454
514
|
mutations.forEach(function(mutation) {
|
@@ -475,12 +535,12 @@ const QTI_PCI_API = {
|
|
475
535
|
});
|
476
536
|
},
|
477
537
|
|
478
|
-
trackQtiInteractionChanged
|
538
|
+
trackQtiInteractionChanged (domElement) {
|
479
539
|
this.onQtiInteractionChanged = this.onQtiInteractionChangedHandler.bind(this);
|
480
540
|
domElement.addEventListener('qti-interaction-changed', this.onQtiInteractionChanged);
|
481
541
|
},
|
482
542
|
|
483
|
-
onQtiInteractionChangedHandler
|
543
|
+
onQtiInteractionChangedHandler (event) {
|
484
544
|
event.preventDefault();
|
485
545
|
|
486
546
|
if (typeof event.detail === 'undefined') {
|