@tekdi/sunbird-quml-player
Version:
The QuML player library components are powered by Angular. This player is primarily designed to be used on Sunbird consumption platforms (mobile app, web portal, offline desktop app) to drive reusability and maintainability, hence reducing the redundant d
3,609 lines • 508 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, Component, Pipe, Input, Output, SecurityContext, HostListener, ViewChild, NgModule } from '@angular/core';
import { CsTelemetryModule } from '@project-sunbird/client-services/telemetry';
import * as _ from 'lodash-es';
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i1 from '@angular/platform-browser';
import * as i5$1 from 'ngx-bootstrap/carousel';
import { CarouselModule } from 'ngx-bootstrap/carousel';
import { of, forkJoin, fromEvent, Subject } from 'rxjs';
import { switchMap, takeUntil } from 'rxjs/operators';
import { v4 } from 'uuid';
import * as i5 from '@project-sunbird/sunbird-player-sdk-v9';
import { errorCode, errorMessage, SunbirdPlayerSdkModule, PLAYER_CONFIG } from '@project-sunbird/sunbird-player-sdk-v9';
import maintain from 'ally.js/esm/maintain/_maintain';
const DEFAULT_SCORE = 1;
const WARNING_TIME_CONFIG = {
DEFAULT_TIME: 75,
SHOW_TIMER: true
};
const COMPATABILITY_LEVEL = 6;
class UtilService {
uniqueId(length = 32) {
let result = '';
const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
const charactersLength = characters.length;
for (let i = 0; i < length; i++) {
result += characters.charAt(Math.floor(Math.random() * charactersLength));
}
return result;
}
getTimeSpentText(pdfPlayerStartTime) {
const duration = new Date().getTime() - pdfPlayerStartTime;
const minutes = Math.floor(duration / 60000);
const seconds = Number(((duration % 60000) / 1000).toFixed(0));
return (minutes + ':' + (seconds < 10 ? '0' : '') + seconds);
}
getKeyValue(keys) {
let key = keys.find((k) => {
return k.includes('response');
});
return key;
}
getMultiselectScore(options, responseDeclaration, isShuffleQuestions, outcomeDeclaration) {
let key = this.getKeyValue(Object.keys(responseDeclaration));
const selectedOptionValue = options.map(option => option.value);
let score;
let mapping = responseDeclaration[key]['mapping'];
if (isShuffleQuestions) {
score = DEFAULT_SCORE;
const scoreForEachMapping = _.round(1 / mapping.length, 2);
_.forEach(mapping, (map) => {
map.score = scoreForEachMapping;
});
}
else {
score = _.get(outcomeDeclaration, 'maxScore.defaultValue');
}
let correctValues = responseDeclaration[key].correctResponse.value.map((ele) => Number(ele));
if (_.isEqual(correctValues.sort(), selectedOptionValue.sort())) {
return score;
}
else if (!_.isEqual(correctValues.sort(), selectedOptionValue.sort())) {
let sum = 0;
_.forEach(mapping, (map, index) => {
if (_.includes(selectedOptionValue, map.value)) {
sum += (map?.score ? map.score : 0);
}
});
return sum;
}
}
hasDuplicates(selectedOptions, option) {
let duplicate = selectedOptions.find((o) => { return o.value === option.value; });
return duplicate;
}
getQuestionType(questions, currentIndex) {
let index = currentIndex - 1 === -1 ? 0 : currentIndex - 1;
return questions[index]['qType'];
}
canGo(progressBarClass) {
let attemptedParams = ['correct', 'wrong', 'attempted'];
return attemptedParams.includes(progressBarClass);
}
sumObjectsByKey(...objects) {
return objects.reduce((accumulator, currentValue) => {
for (const key in currentValue) {
/* istanbul ignore else */
if (currentValue.hasOwnProperty(key)) {
accumulator[key] = (accumulator[key] || 0) + currentValue[key];
}
}
return accumulator;
}, {});
}
scrollParentToChild(parent, child) {
const isMobilePortrait = window.matchMedia("(max-width: 480px)").matches;
const parentRect = parent.getBoundingClientRect();
const childRect = child.getBoundingClientRect();
if (isMobilePortrait) {
parent.scrollLeft = childRect.left + parent.scrollLeft - parentRect.left;
}
else {
parent.scrollTop = (childRect.top + parent.scrollTop) - parentRect.top;
}
}
// fetches the element using its tag video and sets the value of the “src” attribute of source element and poster attribute.
updateSourceOfVideoElement(baseUrl, media, identifier) {
const elements = Array.from(document.getElementsByTagName('video'));
_.forEach(elements, (element) => {
const videoId = element.getAttribute('data-asset-variable');
if (!videoId) {
return;
}
const asset = _.filter(media, ['id', videoId]);
const posterSrc = element.getAttribute('poster');
if (!_.isEmpty(asset) && posterSrc) {
element['poster'] = baseUrl ? `${baseUrl}/${identifier}/${posterSrc}` : asset[0].baseUrl + posterSrc;
}
if (!_.isEmpty(asset)) {
const sourceElement = Array.from(element.getElementsByTagName('source'));
_.forEach(sourceElement, (element) => {
const sourceSrc = element.getAttribute('src');
element['src'] = baseUrl ? `${baseUrl}/${identifier}/${sourceSrc}` : asset[0].baseUrl + sourceSrc;
});
}
});
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UtilService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UtilService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: UtilService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
class QumlLibraryService {
constructor(utilService) {
this.utilService = utilService;
this.isSectionsAvailable = false;
this.telemetryEvent = new EventEmitter();
}
async initializeTelemetry(config, parentConfig) {
if (!_.has(config, 'context') || _.isEmpty(config, 'context')) {
return;
}
this.duration = new Date().getTime();
this.context = config?.context;
this.contentSessionId = this.utilService.uniqueId();
this.playSessionId = this.utilService.uniqueId();
this.channel = this.context.channel || '';
this.pdata = this.context.pdata;
this.sid = this.context.sid;
this.uid = this.context.uid;
this.rollup = this.context.contextRollup;
this.config = config;
this.isSectionsAvailable = parentConfig?.isSectionsAvailable;
/* istanbul ignore else */
if (!CsTelemetryModule.instance.isInitialised && this.context) {
const telemetryConfig = {
pdata: this.context.pdata,
env: 'contentplayer',
channel: this.context.channel,
did: this.context.did,
authtoken: this.context.authToken || '',
uid: this.context.uid || '',
sid: this.context.sid,
batchsize: 20,
mode: this.context.mode,
host: this.context.host || '',
endpoint: this.context.endpoint || '/data/v3/telemetry',
tags: this.context.tags,
cdata: (this.context.cdata || []).concat([
{ id: this.contentSessionId, type: 'ContentSession' },
{ id: this.playSessionId, type: 'PlaySession' },
{ id: '2.0', type: 'PlayerVersion' }
])
};
await CsTelemetryModule.instance.init({});
CsTelemetryModule.instance.telemetryService.initTelemetry({
config: telemetryConfig,
userOrgDetails: {}
});
}
this.telemetryObject = {
id: parentConfig.identifier,
type: 'Content',
ver: parentConfig?.metadata?.pkgVersion ? parentConfig.metadata.pkgVersion.toString() : '',
rollup: this.context?.objectRollup || {}
};
}
startAssesEvent(assesEvent) {
if (!_.isEmpty(this.context)) {
CsTelemetryModule.instance.telemetryService.raiseAssesTelemetry(assesEvent, this.getEventOptions());
}
}
start(duration) {
if (!_.isEmpty(this.context)) {
CsTelemetryModule.instance.telemetryService.raiseStartTelemetry({
options: this.getEventOptions(),
edata: { type: 'content', mode: 'play', pageid: '', duration: Number((duration / 1e3).toFixed(2)) }
});
}
}
response(identifier, version, type, option) {
if (!_.isEmpty(this.context)) {
const responseEvent = {
target: {
id: identifier,
ver: version,
type: type
},
type: 'CHOOSE',
values: [{
option
}]
};
CsTelemetryModule.instance.telemetryService.raiseResponseTelemetry(responseEvent, this.getEventOptions());
}
}
summary(eData) {
if (!_.isEmpty(this.context)) {
CsTelemetryModule.instance.telemetryService.raiseSummaryTelemetry(eData, this.getEventOptions());
}
}
end(duration, currentQuestionIndex, totalNoofQuestions, visitedQuestions, endpageseen, score) {
if (!_.isEmpty(this.context)) {
const durationSec = Number((duration / 1e3).toFixed(2));
CsTelemetryModule.instance.telemetryService.raiseEndTelemetry({
edata: {
type: 'content',
mode: 'play',
pageid: 'sunbird-player-Endpage',
summary: [
{
progress: Number(((currentQuestionIndex / totalNoofQuestions) * 100).toFixed(0))
},
{
totalNoofQuestions: totalNoofQuestions
},
{
visitedQuestions: visitedQuestions,
},
{
endpageseen
},
{
score
},
],
duration: durationSec
},
options: this.getEventOptions()
});
}
}
interact(id, currentPage, currentQuestionDetails) {
if (!_.isEmpty(this.context)) {
CsTelemetryModule.instance.telemetryService.raiseInteractTelemetry({
options: this.getEventOptions(),
edata: { type: 'TOUCH', subtype: '', id, pageid: currentPage + '' }
});
}
}
heartBeat(data) {
if (!_.isEmpty(this.context)) {
CsTelemetryModule.instance.playerTelemetryService.onHeartBeatEvent(data, {});
}
}
impression(currentPage) {
if (!_.isEmpty(this.context)) {
CsTelemetryModule.instance.telemetryService.raiseImpressionTelemetry({
options: this.getEventOptions(),
edata: { type: 'workflow', subtype: '', pageid: currentPage + '', uri: '' }
});
}
}
error(error, edata) {
if (!_.isEmpty(this.context)) {
CsTelemetryModule.instance.telemetryService.raiseErrorTelemetry({
options: this.getEventOptions(),
edata: {
err: 'LOAD',
errtype: 'content',
stacktrace: (error?.toString()) || ''
}
});
}
}
getEventOptions() {
const options = {
object: this.telemetryObject,
context: {
channel: this.channel || '',
pdata: this.pdata,
env: 'contentplayer',
sid: this.sid,
uid: this.uid,
cdata: (this.context?.cdata || []).concat([{ id: this.contentSessionId, type: 'ContentSession' },
{ id: this.playSessionId, type: 'PlaySession' },
{ id: '2.0', type: 'PlayerVersion' }]),
rollup: this.rollup || {}
}
};
/* istanbul ignore else */
if (this.isSectionsAvailable) {
options.context.cdata.push({ id: this.config.metadata.identifier, type: 'SectionId' });
}
return options;
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: QumlLibraryService, deps: [{ token: UtilService }], target: i0.ɵɵFactoryTarget.Injectable }); }
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: QumlLibraryService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: QumlLibraryService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return [{ type: UtilService }]; } });
class QumlLibraryComponent {
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: QumlLibraryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: QumlLibraryComponent, selector: "lib-quml-library", ngImport: i0, template: `
<p>
quml-library works!
</p>
`, isInline: true }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: QumlLibraryComponent, decorators: [{
type: Component,
args: [{ selector: 'lib-quml-library', template: `
<p>
quml-library works!
</p>
` }]
}] });
class SafeHtmlPipe {
constructor(sanitized) {
this.sanitized = sanitized;
}
transform(value) {
return this.sanitized.bypassSecurityTrustHtml(value);
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
/** @nocollapse */ static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SafeHtmlPipe, name: "safeHtml" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SafeHtmlPipe, decorators: [{
type: Pipe,
args: [{
name: 'safeHtml'
}]
}], ctorParameters: function () { return [{ type: i1.DomSanitizer }]; } });
class McqQuestionComponent {
constructor() {
this.showPopup = new EventEmitter();
}
showQumlPopup() {
this.showPopup.emit();
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: McqQuestionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: McqQuestionComponent, selector: "quml-mcq-question", inputs: { mcqQuestion: "mcqQuestion", layout: "layout" }, outputs: { showPopup: "showPopup" }, ngImport: i0, template: "<div [ngClass]=\"mcqQuestion.includes('img') ? 'quml-mcq-image-questions' : 'quml-mcq-questions'\">\n <div class=\"quml-question\" #question [innerHTML]=\"mcqQuestion | safeHtml\">\n </div>\n</div>", styles: [".quml-mcq-questions{display:flex;gap:1rem}.quml-mcq-image-questions{display:flex;justify-content:flex-start;align-items:flex-start}img{width:100%!important}quml-audio{padding:4px 8px;margin-top:19px}.quml-question-icon{display:inline-block;float:left;padding-right:.5rem;content:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMzZweCIgaGVpZ2h0PSIzNnB4IiB2aWV3Qm94PSIwIDAgMzYgMzYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogc2tldGNodG9vbCA2MiAoMTAxMDEwKSAtIGh0dHBzOi8vc2tldGNoLmNvbSAtLT4KICAgIDx0aXRsZT40NjI5QzQ3QS1BQzY2LTQwRTEtOEM3OS0xNTIwOENFRUEzQTU8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIHNrZXRjaHRvb2wuPC9kZXNjPgogICAgPGRlZnM+CiAgICAgICAgPHJlY3QgaWQ9InBhdGgtMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIiByeD0iMTUiPjwvcmVjdD4KICAgICAgICA8ZmlsdGVyIHg9Ii01LjAlIiB5PSItNS4wJSIgd2lkdGg9IjExMC4wJSIgaGVpZ2h0PSIxMTAuMCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImZpbHRlci0yIj4KICAgICAgICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMSIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd0JsdXJJbm5lcjEiPjwvZmVHYXVzc2lhbkJsdXI+CiAgICAgICAgICAgIDxmZU9mZnNldCBkeD0iMCIgZHk9Ii0xIiBpbj0ic2hhZG93Qmx1cklubmVyMSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRJbm5lcjEiPjwvZmVPZmZzZXQ+CiAgICAgICAgICAgIDxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93T2Zmc2V0SW5uZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0iYXJpdGhtZXRpYyIgazI9Ii0xIiBrMz0iMSIgcmVzdWx0PSJzaGFkb3dJbm5lcklubmVyMSI+PC9mZUNvbXBvc2l0ZT4KICAgICAgICAgICAgPGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgICAwIDAgMCAwIDAgICAwIDAgMCAwIDAgIDAgMCAwIDAuNSAwIiB0eXBlPSJtYXRyaXgiIGluPSJzaGFkb3dJbm5lcklubmVyMSI+PC9mZUNvbG9yTWF0cml4PgogICAgICAgIDwvZmlsdGVyPgogICAgPC9kZWZzPgogICAgPGcgaWQ9ImRldnMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJtY3ExIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTgwLjAwMDAwMCwgLTYwLjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iYXVkaW8tcGxheSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTgwLjAwMDAwMCwgNjAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtOSI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwIj4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLUNvcHkiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS01LUNvcHkiIGZpbGw9IiMwMDAwMDAiIGZpbGwtcnVsZT0ibm9uemVybyIgb3BhY2l0eT0iMC4yNzc1Mjk3NjIiIHg9IjAiIHk9IjAiIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgcng9IjE4Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMy4wMDAwMDAsIDMuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS01LUNvcHktMiIgZmlsbC1ydWxlPSJub256ZXJvIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHVzZSBmaWxsPSIjRkZGRkZGIiB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHVzZSBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIxIiBmaWx0ZXI9InVybCgjZmlsdGVyLTIpIiB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3Qgc3Ryb2tlLW9wYWNpdHk9IjAuNDg0MTU2NDY5IiBzdHJva2U9IiNDM0M4REIiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVqb2luPSJzcXVhcmUiIHg9IjEiIHk9IjEiIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOCIgcng9IjE0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNSw5IEwxNSwxNi4wMzMzMzMzIEMxNC42MDY2NjY3LDE1LjgwNjY2NjcgMTQuMTUzMzMzMywxNS42NjY2NjY3IDEzLjY2NjY2NjcsMTUuNjY2NjY2NyBDMTIuMTkzMzMzMywxNS42NjY2NjY3IDExLDE2Ljg2IDExLDE4LjMzMzMzMzMgQzExLDE5LjgwNjY2NjcgMTIuMTkzMzMzMywyMSAxMy42NjY2NjY3LDIxIEMxNS4xNCwyMSAxNi4zMzMzMzMzLDE5LjgwNjY2NjcgMTYuMzMzMzMzMywxOC4zMzMzMzMzIEwxNi4zMzMzMzMzLDExLjY2NjY2NjcgTDE5LDExLjY2NjY2NjcgTDE5LDkgTDE1LDkgTDE1LDkgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjMDhCQzgyIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9ImljX2NoZXZyb25fbGVmdCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzAuMDAwMDAwLCAxOC4wMDAwMDApIHNjYWxlKC0xLCAxKSB0cmFuc2xhdGUoLTMwLjAwMDAwMCwgLTE4LjAwMDAwMCkgdHJhbnNsYXRlKDI2LjAwMDAwMCwgMTIuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iSWNvbi0yNHB4Ij48L2c+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==)}.quml-question{font-size:.875rem;color:#131415;padding-top:1rem;width:100%}.question-image{position:relative}.icon-zommin{position:absolute;bottom:0;right:0;content:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTlweCIgaGVpZ2h0PSIxOXB4IiB2aWV3Qm94PSIwIDAgMTkgMTkiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDYyICg5MTM5MCkgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+em9vbTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJkZXZzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iem9vbSI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik05LjUsMCBMMTgsMCBDMTguNTUyMjg0NywtMS4wMTQ1MzA2M2UtMTYgMTksMC40NDc3MTUyNSAxOSwxIEwxOSwxMyBDMTksMTYuMzEzNzA4NSAxNi4zMTM3MDg1LDE5IDEzLDE5IEwxLDE5IEMwLjQ0NzcxNTI1LDE5IDYuNzYzNTM3NTFlLTE3LDE4LjU1MjI4NDcgMCwxOCBMMCw5LjUgQy02LjQyNTM2MDY0ZS0xNiw0LjI1MzI5NDg4IDQuMjUzMjk0ODgsOS42MzgwNDA5NWUtMTYgOS41LDAgWiIgaWQ9IlJlY3RhbmdsZSIgZmlsbC1vcGFjaXR5PSIwLjUiIGZpbGw9IiM0MzQzNDMiIGZpbGwtcnVsZT0ibm9uemVybyI+PC9wYXRoPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUuMDAwMDAwLCA0LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTQuNTgzMzMzMzMsMC43NSBDNi45NzY2NjY2NywwLjc1IDguOTE2NjY2NjcsMi42OSA4LjkxNjY2NjY3LDUuMDgzMzMzMzMgQzguOTE2NjY2NjcsNi4xNTY2NjY2NyA4LjUyMzMzMzMzLDcuMTQzMzMzMzMgNy44Nyw3LjkwMzMzMzMzIEw3Ljg3LDcuOTAzMzMzMzMgTDguMDU2NjY2NjcsOC4wODMzMzMzMyBMOC41ODMzMzMzMyw4LjA4MzMzMzMzIEwxMS45MSwxMS40MTY2NjY3IEwxMC45MTY2NjY3LDEyLjQxIEw3LjU4MzMzMzMzLDkuMDgzMzMzMzMgTDcuNTgzMzMzMzMsOC41NTY2NjY2NyBMNy40MDMzMzMzMyw4LjM3IEM2LjY0MzMzMzMzLDkuMDIzMzMzMzMgNS42NTY2NjY2Nyw5LjQxNjY2NjY3IDQuNTgzMzMzMzMsOS40MTY2NjY2NyBDMi4xOSw5LjQxNjY2NjY3IDAuMjUsNy40NzY2NjY2NyAwLjI1LDUuMDgzMzMzMzMgQzAuMjUsMi42OSAyLjE5LDAuNzUgNC41ODMzMzMzMywwLjc1IFogTTQuNTgzMzMzMzMsMi4wODMzMzMzMyBDMi45MjMzMzMzMywyLjA4MzMzMzMzIDEuNTgzMzMzMzMsMy40MjMzMzMzMyAxLjU4MzMzMzMzLDUuMDgzMzMzMzMgQzEuNTgzMzMzMzMsNi43NDMzMzMzMyAyLjkyMzMzMzMzLDguMDgzMzMzMzMgNC41ODMzMzMzMyw4LjA4MzMzMzMzIEM2LjI0MzMzMzMzLDguMDgzMzMzMzMgNy41ODMzMzMzMyw2Ljc0MzMzMzMzIDcuNTgzMzMzMzMsNS4wODMzMzMzMyBDNy41ODMzMzMzMywzLjQyMzMzMzMzIDYuMjQzMzMzMzMsMi4wODMzMzMzMyA0LjU4MzMzMzMzLDIuMDgzMzMzMzMgWiBNNC45MTY2NjY2NywzLjQxNjY2NjY3IEw0LjkxNjY2NjY3LDQuNzUgTDYuMjUsNC43NSBMNi4yNSw1LjQxNjY2NjY3IEw0LjkxNjY2NjY3LDUuNDE2NjY2NjcgTDQuOTE2NjY2NjcsNi43NSBMNC4yNSw2Ljc1IEw0LjI1LDUuNDE2NjY2NjcgTDIuOTE2NjY2NjcsNS40MTY2NjY2NyBMMi45MTY2NjY2Nyw0Ljc1IEw0LjI1LDQuNzUgTDQuMjUsMy40MTY2NjY2NyBMNC45MTY2NjY2NywzLjQxNjY2NjY3IFoiIGlkPSJDb21iaW5lZC1TaGFwZSI+PC9wYXRoPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=)}.question-image img{vertical-align:bottom}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: McqQuestionComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-mcq-question', template: "<div [ngClass]=\"mcqQuestion.includes('img') ? 'quml-mcq-image-questions' : 'quml-mcq-questions'\">\n <div class=\"quml-question\" #question [innerHTML]=\"mcqQuestion | safeHtml\">\n </div>\n</div>", styles: [".quml-mcq-questions{display:flex;gap:1rem}.quml-mcq-image-questions{display:flex;justify-content:flex-start;align-items:flex-start}img{width:100%!important}quml-audio{padding:4px 8px;margin-top:19px}.quml-question-icon{display:inline-block;float:left;padding-right:.5rem;content:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMzZweCIgaGVpZ2h0PSIzNnB4IiB2aWV3Qm94PSIwIDAgMzYgMzYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogc2tldGNodG9vbCA2MiAoMTAxMDEwKSAtIGh0dHBzOi8vc2tldGNoLmNvbSAtLT4KICAgIDx0aXRsZT40NjI5QzQ3QS1BQzY2LTQwRTEtOEM3OS0xNTIwOENFRUEzQTU8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIHNrZXRjaHRvb2wuPC9kZXNjPgogICAgPGRlZnM+CiAgICAgICAgPHJlY3QgaWQ9InBhdGgtMSIgeD0iMCIgeT0iMCIgd2lkdGg9IjMwIiBoZWlnaHQ9IjMwIiByeD0iMTUiPjwvcmVjdD4KICAgICAgICA8ZmlsdGVyIHg9Ii01LjAlIiB5PSItNS4wJSIgd2lkdGg9IjExMC4wJSIgaGVpZ2h0PSIxMTAuMCUiIGZpbHRlclVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgaWQ9ImZpbHRlci0yIj4KICAgICAgICAgICAgPGZlR2F1c3NpYW5CbHVyIHN0ZERldmlhdGlvbj0iMSIgaW49IlNvdXJjZUFscGhhIiByZXN1bHQ9InNoYWRvd0JsdXJJbm5lcjEiPjwvZmVHYXVzc2lhbkJsdXI+CiAgICAgICAgICAgIDxmZU9mZnNldCBkeD0iMCIgZHk9Ii0xIiBpbj0ic2hhZG93Qmx1cklubmVyMSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRJbm5lcjEiPjwvZmVPZmZzZXQ+CiAgICAgICAgICAgIDxmZUNvbXBvc2l0ZSBpbj0ic2hhZG93T2Zmc2V0SW5uZXIxIiBpbjI9IlNvdXJjZUFscGhhIiBvcGVyYXRvcj0iYXJpdGhtZXRpYyIgazI9Ii0xIiBrMz0iMSIgcmVzdWx0PSJzaGFkb3dJbm5lcklubmVyMSI+PC9mZUNvbXBvc2l0ZT4KICAgICAgICAgICAgPGZlQ29sb3JNYXRyaXggdmFsdWVzPSIwIDAgMCAwIDAgICAwIDAgMCAwIDAgICAwIDAgMCAwIDAgIDAgMCAwIDAuNSAwIiB0eXBlPSJtYXRyaXgiIGluPSJzaGFkb3dJbm5lcklubmVyMSI+PC9mZUNvbG9yTWF0cml4PgogICAgICAgIDwvZmlsdGVyPgogICAgPC9kZWZzPgogICAgPGcgaWQ9ImRldnMiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJtY3ExIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNTgwLjAwMDAwMCwgLTYwLjAwMDAwMCkiPgogICAgICAgICAgICA8ZyBpZD0iYXVkaW8tcGxheSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTgwLjAwMDAwMCwgNjAuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtOSI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwIj4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwLUNvcHkiPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS01LUNvcHkiIGZpbGw9IiMwMDAwMDAiIGZpbGwtcnVsZT0ibm9uemVybyIgb3BhY2l0eT0iMC4yNzc1Mjk3NjIiIHg9IjAiIHk9IjAiIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgcng9IjE4Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMy4wMDAwMDAsIDMuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS01LUNvcHktMiIgZmlsbC1ydWxlPSJub256ZXJvIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHVzZSBmaWxsPSIjRkZGRkZGIiB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHVzZSBmaWxsPSJibGFjayIgZmlsbC1vcGFjaXR5PSIxIiBmaWx0ZXI9InVybCgjZmlsdGVyLTIpIiB4bGluazpocmVmPSIjcGF0aC0xIj48L3VzZT4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3Qgc3Ryb2tlLW9wYWNpdHk9IjAuNDg0MTU2NDY5IiBzdHJva2U9IiNDM0M4REIiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVqb2luPSJzcXVhcmUiIHg9IjEiIHk9IjEiIHdpZHRoPSIyOCIgaGVpZ2h0PSIyOCIgcng9IjE0Ij48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xNSw5IEwxNSwxNi4wMzMzMzMzIEMxNC42MDY2NjY3LDE1LjgwNjY2NjcgMTQuMTUzMzMzMywxNS42NjY2NjY3IDEzLjY2NjY2NjcsMTUuNjY2NjY2NyBDMTIuMTkzMzMzMywxNS42NjY2NjY3IDExLDE2Ljg2IDExLDE4LjMzMzMzMzMgQzExLDE5LjgwNjY2NjcgMTIuMTkzMzMzMywyMSAxMy42NjY2NjY3LDIxIEMxNS4xNCwyMSAxNi4zMzMzMzMzLDE5LjgwNjY2NjcgMTYuMzMzMzMzMywxOC4zMzMzMzMzIEwxNi4zMzMzMzMzLDExLjY2NjY2NjcgTDE5LDExLjY2NjY2NjcgTDE5LDkgTDE1LDkgTDE1LDkgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjMDhCQzgyIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9ImljX2NoZXZyb25fbGVmdCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzAuMDAwMDAwLCAxOC4wMDAwMDApIHNjYWxlKC0xLCAxKSB0cmFuc2xhdGUoLTMwLjAwMDAwMCwgLTE4LjAwMDAwMCkgdHJhbnNsYXRlKDI2LjAwMDAwMCwgMTIuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iSWNvbi0yNHB4Ij48L2c+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==)}.quml-question{font-size:.875rem;color:#131415;padding-top:1rem;width:100%}.question-image{position:relative}.icon-zommin{position:absolute;bottom:0;right:0;content:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTlweCIgaGVpZ2h0PSIxOXB4IiB2aWV3Qm94PSIwIDAgMTkgMTkiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDYyICg5MTM5MCkgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+em9vbTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJkZXZzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iem9vbSI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik05LjUsMCBMMTgsMCBDMTguNTUyMjg0NywtMS4wMTQ1MzA2M2UtMTYgMTksMC40NDc3MTUyNSAxOSwxIEwxOSwxMyBDMTksMTYuMzEzNzA4NSAxNi4zMTM3MDg1LDE5IDEzLDE5IEwxLDE5IEMwLjQ0NzcxNTI1LDE5IDYuNzYzNTM3NTFlLTE3LDE4LjU1MjI4NDcgMCwxOCBMMCw5LjUgQy02LjQyNTM2MDY0ZS0xNiw0LjI1MzI5NDg4IDQuMjUzMjk0ODgsOS42MzgwNDA5NWUtMTYgOS41LDAgWiIgaWQ9IlJlY3RhbmdsZSIgZmlsbC1vcGFjaXR5PSIwLjUiIGZpbGw9IiM0MzQzNDMiIGZpbGwtcnVsZT0ibm9uemVybyI+PC9wYXRoPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUuMDAwMDAwLCA0LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTQuNTgzMzMzMzMsMC43NSBDNi45NzY2NjY2NywwLjc1IDguOTE2NjY2NjcsMi42OSA4LjkxNjY2NjY3LDUuMDgzMzMzMzMgQzguOTE2NjY2NjcsNi4xNTY2NjY2NyA4LjUyMzMzMzMzLDcuMTQzMzMzMzMgNy44Nyw3LjkwMzMzMzMzIEw3Ljg3LDcuOTAzMzMzMzMgTDguMDU2NjY2NjcsOC4wODMzMzMzMyBMOC41ODMzMzMzMyw4LjA4MzMzMzMzIEwxMS45MSwxMS40MTY2NjY3IEwxMC45MTY2NjY3LDEyLjQxIEw3LjU4MzMzMzMzLDkuMDgzMzMzMzMgTDcuNTgzMzMzMzMsOC41NTY2NjY2NyBMNy40MDMzMzMzMyw4LjM3IEM2LjY0MzMzMzMzLDkuMDIzMzMzMzMgNS42NTY2NjY2Nyw5LjQxNjY2NjY3IDQuNTgzMzMzMzMsOS40MTY2NjY2NyBDMi4xOSw5LjQxNjY2NjY3IDAuMjUsNy40NzY2NjY2NyAwLjI1LDUuMDgzMzMzMzMgQzAuMjUsMi42OSAyLjE5LDAuNzUgNC41ODMzMzMzMywwLjc1IFogTTQuNTgzMzMzMzMsMi4wODMzMzMzMyBDMi45MjMzMzMzMywyLjA4MzMzMzMzIDEuNTgzMzMzMzMsMy40MjMzMzMzMyAxLjU4MzMzMzMzLDUuMDgzMzMzMzMgQzEuNTgzMzMzMzMsNi43NDMzMzMzMyAyLjkyMzMzMzMzLDguMDgzMzMzMzMgNC41ODMzMzMzMyw4LjA4MzMzMzMzIEM2LjI0MzMzMzMzLDguMDgzMzMzMzMgNy41ODMzMzMzMyw2Ljc0MzMzMzMzIDcuNTgzMzMzMzMsNS4wODMzMzMzMyBDNy41ODMzMzMzMywzLjQyMzMzMzMzIDYuMjQzMzMzMzMsMi4wODMzMzMzMyA0LjU4MzMzMzMzLDIuMDgzMzMzMzMgWiBNNC45MTY2NjY2NywzLjQxNjY2NjY3IEw0LjkxNjY2NjY3LDQuNzUgTDYuMjUsNC43NSBMNi4yNSw1LjQxNjY2NjY3IEw0LjkxNjY2NjY3LDUuNDE2NjY2NjcgTDQuOTE2NjY2NjcsNi43NSBMNC4yNSw2Ljc1IEw0LjI1LDUuNDE2NjY2NjcgTDIuOTE2NjY2NjcsNS40MTY2NjY2NyBMMi45MTY2NjY2Nyw0Ljc1IEw0LjI1LDQuNzUgTDQuMjUsMy40MTY2NjY2NyBMNC45MTY2NjY2NywzLjQxNjY2NjY3IFoiIGlkPSJDb21iaW5lZC1TaGFwZSI+PC9wYXRoPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=)}.question-image img{vertical-align:bottom}\n"] }]
}], propDecorators: { mcqQuestion: [{
type: Input
}], showPopup: [{
type: Output
}], layout: [{
type: Input
}] } });
var pageId;
(function (pageId) {
pageId["startPage"] = "START_PAGE";
pageId["submitPage"] = "SUBMIT_PAGE";
pageId["endPage"] = "END_PAGE";
pageId["shortAnswer"] = "SHORT_ANSWER";
})(pageId || (pageId = {}));
var eventName;
(function (eventName) {
eventName["pageScrolled"] = "PAGE_SCROLLED";
eventName["viewHint"] = "VIEW_HINT";
eventName["showAnswer"] = "SHOW_ANSWER_CLICKED";
eventName["nextClicked"] = "NEXT_CLICKED";
eventName["prevClicked"] = "PREV_CLICKED";
eventName["progressBar"] = "PROGRESSBAR_CLICKED";
eventName["replayClicked"] = "REPLAY_CLICKED";
eventName["startPageLoaded"] = "START_PAGE_LOADED";
eventName["viewSolutionClicked"] = "VIEW_SOLUTION_CLICKED";
eventName["solutionClosed"] = "SOLUTION_CLOSED";
eventName["closedFeedBack"] = "CLOSED_FEEDBACK";
eventName["tryAgain"] = "TRY_AGAIN";
eventName["optionClicked"] = "OPTION_CLICKED";
eventName["scoreBoardSubmitClicked"] = "SCORE_BOARD_SUBMIT_CLICKED";
eventName["scoreBoardReviewClicked"] = "SCORE_BOARD_REVIEW_CLICKED";
eventName["endPageExitClicked"] = "EXIT";
eventName["zoomClicked"] = "ZOOM_CLICKED";
eventName["zoomInClicked"] = "ZOOM_IN_CLICKED";
eventName["zoomOutClicked"] = "ZOOM_OUT_CLICKED";
eventName["zoomCloseClicked"] = "ZOOM_CLOSE_CLICKED";
eventName["goToQuestion"] = "GO_TO_QUESTION";
eventName["nextContentPlay"] = "NEXT_CONTENT_PLAY";
eventName["deviceRotationClicked"] = "DEVICE_ROTATION_CLICKED";
eventName["progressIndicatorPopupClosed"] = "PROGRESS_INDICATOR_POPUP_CLOSED";
eventName["progressIndicatorPopupOpened"] = "PROGRESS_INDICATOR_POPUP_OPENED";
})(eventName || (eventName = {}));
var TelemetryType;
(function (TelemetryType) {
TelemetryType["interact"] = "interact";
TelemetryType["impression"] = "impression";
})(TelemetryType || (TelemetryType = {}));
var MimeType;
(function (MimeType) {
MimeType["questionSet"] = "application/vnd.sunbird.questionset";
})(MimeType || (MimeType = {}));
var Cardinality;
(function (Cardinality) {
Cardinality["single"] = "single";
Cardinality["multiple"] = "multiple";
})(Cardinality || (Cardinality = {}));
var QuestionType;
(function (QuestionType) {
QuestionType["mcq"] = "MCQ";
QuestionType["sa"] = "SA";
})(QuestionType || (QuestionType = {}));
class McqImageOptionComponent {
constructor() {
this.showQumlPopup = false;
this.imgOptionSelected = new EventEmitter();
}
showPopup(image) {
this.showQumlPopup = true;
this.qumlPopupImage = image;
}
optionClicked(event, mcqOption) {
this.imgOptionSelected.emit({
name: 'optionSelect',
option: mcqOption,
solutions: this.solutions
});
}
onEnter(event, mcqOption) {
/* istanbul ignore else */
if (event.key === 'Enter') {
event.stopPropagation();
this.optionClicked(event, mcqOption);
}
}
openPopup(optionHtml) {
this.showQumlPopup = true;
this.qumlPopupImage = optionHtml;
}
closePopUp() {
this.showQumlPopup = false;
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: McqImageOptionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: McqImageOptionComponent, selector: "quml-mcq-image-option", inputs: { mcqQuestion: "mcqQuestion", solutions: "solutions", mcqOption: "mcqOption", cardinality: "cardinality" }, outputs: { imgOptionSelected: "imgOptionSelected" }, ngImport: i0, template: "<div class=\"quml-mcq-option-card\" tabindex=\"0\" (keydown)=\"mcqOption.isDisabled ? null: onEnter($event, mcqOption)\"\n(click)=\"mcqOption.isDisabled ? null: optionClicked($event, mcqOption)\"\n[ngClass]=\"mcqOption?.selected ? 'quml-mcq-option-card quml-option--selected' : 'quml-mcq-option-card'\">\n <div class=\"option\" *ngIf=\"mcqOption\" [innerHTML]=\"mcqOption?.label | safeHtml\"\n [ngClass]=\"{'disabled': mcqOption.isDisabled === true}\"></div>\n <div class=\"container\">\n <input type=\"radio\" *ngIf=\"cardinality==='single'\" name=\"radio\" [checked]=\"mcqOption.selected\" id=\"option-checkbox\" tabindex=\"-1\" (click)=\"optionClicked($event, mcqOption)\">\n <input type=\"checkbox\" *ngIf=\"cardinality==='multiple'\" name=\"checkbox\" [checked]=\"mcqOption.selected\" id=\"option-checkbox\"\n tabindex=\"-1\" [disabled]=\"mcqOption?.isDisabled\">\n <span [ngClass]=\"{'radiomark': cardinality==='single','checkmark':cardinality==='multiple'}\" tabindex=\"-1\"></span>\n </div>\n</div>\n", styles: ["::ng-deep :root{--quml-btn-border: #ccc;--quml-color-gray: #666;--quml-checkmark: #cdcdcd;--quml-color-primary-shade: rgba(0, 0, 0, .1);--quml-option-card-bg: #fff;--quml-option-selected-checkmark:#ffff}.quml-mcq-option-card{position:relative;background-color:var(--quml-option-card-bg);border-radius:.25rem;border:.0625rem solid var(--quml-btn-border);padding:1rem;box-shadow:0 .125rem .75rem 0 var(--quml-color-primary-shade);display:flex;align-items:center;justify-content:space-between;gap:.5rem}.quml-mcq-option-card .option-image{position:relative}.quml-mcq-option-card .option-image img{min-width:100%;vertical-align:bottom;width:100%!important}.quml-mcq-option-card .option{color:var(--quml-color-gray);font-size:.75rem;font-weight:700;flex:1}.quml-mcq-option-card label{margin-bottom:0}.zoom-in-icon{position:absolute;right:.5rem;bottom:0}::ng-deep .quml-mcq-option-card .option img{max-width:100%}::ng-deep .quml-mcq-option-card .option label{margin-bottom:0}.selected-option-text{color:var(--primary-color)!important}.icon-zommin{position:absolute;bottom:2px;right:-1px;content:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTlweCIgaGVpZ2h0PSIxOXB4IiB2aWV3Qm94PSIwIDAgMTkgMTkiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDYyICg5MTM5MCkgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+em9vbTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJkZXZzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iem9vbSI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik05LjUsMCBMMTgsMCBDMTguNTUyMjg0NywtMS4wMTQ1MzA2M2UtMTYgMTksMC40NDc3MTUyNSAxOSwxIEwxOSwxMyBDMTksMTYuMzEzNzA4NSAxNi4zMTM3MDg1LDE5IDEzLDE5IEwxLDE5IEMwLjQ0NzcxNTI1LDE5IDYuNzYzNTM3NTFlLTE3LDE4LjU1MjI4NDcgMCwxOCBMMCw5LjUgQy02LjQyNTM2MDY0ZS0xNiw0LjI1MzI5NDg4IDQuMjUzMjk0ODgsOS42MzgwNDA5NWUtMTYgOS41LDAgWiIgaWQ9IlJlY3RhbmdsZSIgZmlsbC1vcGFjaXR5PSIwLjUiIGZpbGw9IiM0MzQzNDMiIGZpbGwtcnVsZT0ibm9uemVybyI+PC9wYXRoPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUuMDAwMDAwLCA0LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTQuNTgzMzMzMzMsMC43NSBDNi45NzY2NjY2NywwLjc1IDguOTE2NjY2NjcsMi42OSA4LjkxNjY2NjY3LDUuMDgzMzMzMzMgQzguOTE2NjY2NjcsNi4xNTY2NjY2NyA4LjUyMzMzMzMzLDcuMTQzMzMzMzMgNy44Nyw3LjkwMzMzMzMzIEw3Ljg3LDcuOTAzMzMzMzMgTDguMDU2NjY2NjcsOC4wODMzMzMzMyBMOC41ODMzMzMzMyw4LjA4MzMzMzMzIEwxMS45MSwxMS40MTY2NjY3IEwxMC45MTY2NjY3LDEyLjQxIEw3LjU4MzMzMzMzLDkuMDgzMzMzMzMgTDcuNTgzMzMzMzMsOC41NTY2NjY2NyBMNy40MDMzMzMzMyw4LjM3IEM2LjY0MzMzMzMzLDkuMDIzMzMzMzMgNS42NTY2NjY2Nyw5LjQxNjY2NjY3IDQuNTgzMzMzMzMsOS40MTY2NjY2NyBDMi4xOSw5LjQxNjY2NjY3IDAuMjUsNy40NzY2NjY2NyAwLjI1LDUuMDgzMzMzMzMgQzAuMjUsMi42OSAyLjE5LDAuNzUgNC41ODMzMzMzMywwLjc1IFogTTQuNTgzMzMzMzMsMi4wODMzMzMzMyBDMi45MjMzMzMzMywyLjA4MzMzMzMzIDEuNTgzMzMzMzMsMy40MjMzMzMzMyAxLjU4MzMzMzMzLDUuMDgzMzMzMzMgQzEuNTgzMzMzMzMsNi43NDMzMzMzMyAyLjkyMzMzMzMzLDguMDgzMzMzMzMgNC41ODMzMzMzMyw4LjA4MzMzMzMzIEM2LjI0MzMzMzMzLDguMDgzMzMzMzMgNy41ODMzMzMzMyw2Ljc0MzMzMzMzIDcuNTgzMzMzMzMsNS4wODMzMzMzMyBDNy41ODMzMzMzMywzLjQyMzMzMzMzIDYuMjQzMzMzMzMsMi4wODMzMzMzMyA0LjU4MzMzMzMzLDIuMDgzMzMzMzMgWiBNNC45MTY2NjY2NywzLjQxNjY2NjY3IEw0LjkxNjY2NjY3LDQuNzUgTDYuMjUsNC43NSBMNi4yNSw1LjQxNjY2NjY3IEw0LjkxNjY2NjY3LDUuNDE2NjY2NjcgTDQuOTE2NjY2NjcsNi43NSBMNC4yNSw2Ljc1IEw0LjI1LDUuNDE2NjY2NjcgTDIuOTE2NjY2NjcsNS40MTY2NjY2NyBMMi45MTY2NjY2Nyw0Ljc1IEw0LjI1LDQuNzUgTDQuMjUsMy40MTY2NjY2NyBMNC45MTY2NjY2NywzLjQxNjY2NjY3IFoiIGlkPSJDb21iaW5lZC1TaGFwZSI+PC9wYXRoPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=)}.image-option-selected{border:.125rem solid var(--primary-color)}.checkmark{display:block;height:1.25rem;width:1.25rem;border:.125rem solid var(--quml-checkmark)}.container input{position:absolute;opacity:0;cursor:pointer}.container input:checked~.checkmark,.quml-option--selected .checkmark{position:relative;background-color:var(--quml-option-selected-checkmark);border:.125rem solid var(--primary-color)}input:checked~.checkmark:after,.quml-option--selected .checkmark:after{content:\"\";opacity:1}.container .checkmark:after,.quml-option--selected .container .checkmark:after{width:.75rem;height:.75rem;background:var(--primary-color);position:absolute;top:50%;left:50%;margin:0;transform:translate(-50%,-50%);opacity:0}.quml-option--selected .container .checkmark:after{opacity:1}.quml-option--selected{border:.125rem solid var(--primary-color)}.radiomark{display:block;height:1.25rem;width:1.25rem;border-radius:50%;border:.125rem solid var(--quml-checkmark)}.container input:checked~.radiomark,.quml-option--selected .radiomark{position:relative;background-color:var(--quml-option-selected-checkmark);border:.125rem solid var(--primary-color)}input:checked~.radiomark:after,.quml-option--selected .radiomark:after{content:\"\";opacity:1}.container .radiomark:after,.quml-option--selected .container .radiomark:after{width:.75rem;height:.75rem;border-radius:50%;background:var(--primary-color);position:absolute;top:50%;left:50%;margin:0;transform:translate(-50%,-50%);opacity:0}.quml-option--selected .container .checkmark:after,.quml-option--selected .container .radiomark:after{opacity:1}.disabled{opacity:.4}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: McqImageOptionComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-mcq-image-option', template: "<div class=\"quml-mcq-option-card\" tabindex=\"0\" (keydown)=\"mcqOption.isDisabled ? null: onEnter($event, mcqOption)\"\n(click)=\"mcqOption.isDisabled ? null: optionClicked($event, mcqOption)\"\n[ngClass]=\"mcqOption?.selected ? 'quml-mcq-option-card quml-option--selected' : 'quml-mcq-option-card'\">\n <div class=\"option\" *ngIf=\"mcqOption\" [innerHTML]=\"mcqOption?.label | safeHtml\"\n [ngClass]=\"{'disabled': mcqOption.isDisabled === true}\"></div>\n <div class=\"container\">\n <input type=\"radio\" *ngIf=\"cardinality==='single'\" name=\"radio\" [checked]=\"mcqOption.selected\" id=\"option-checkbox\" tabindex=\"-1\" (click)=\"optionClicked($event, mcqOption)\">\n <input type=\"checkbox\" *ngIf=\"cardinality==='multiple'\" name=\"checkbox\" [checked]=\"mcqOption.selected\" id=\"option-checkbox\"\n tabindex=\"-1\" [disabled]=\"mcqOption?.isDisabled\">\n <span [ngClass]=\"{'radiomark': cardinality==='single','checkmark':cardinality==='multiple'}\" tabindex=\"-1\"></span>\n </div>\n</div>\n", styles: ["::ng-deep :root{--quml-btn-border: #ccc;--quml-color-gray: #666;--quml-checkmark: #cdcdcd;--quml-color-primary-shade: rgba(0, 0, 0, .1);--quml-option-card-bg: #fff;--quml-option-selected-checkmark:#ffff}.quml-mcq-option-card{position:relative;background-color:var(--quml-option-card-bg);border-radius:.25rem;border:.0625rem solid var(--quml-btn-border);padding:1rem;box-shadow:0 .125rem .75rem 0 var(--quml-color-primary-shade);display:flex;align-items:center;justify-content:space-between;gap:.5rem}.quml-mcq-option-card .option-image{position:relative}.quml-mcq-option-card .option-image img{min-width:100%;vertical-align:bottom;width:100%!important}.quml-mcq-option-card .option{color:var(--quml-color-gray);font-size:.75rem;font-weight:700;flex:1}.quml-mcq-option-card label{margin-bottom:0}.zoom-in-icon{position:absolute;right:.5rem;bottom:0}::ng-deep .quml-mcq-option-card .option img{max-width:100%}::ng-deep .quml-mcq-option-card .option label{margin-bottom:0}.selected-option-text{color:var(--primary-color)!important}.icon-zommin{position:absolute;bottom:2px;right:-1px;content:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTlweCIgaGVpZ2h0PSIxOXB4IiB2aWV3Qm94PSIwIDAgMTkgMTkiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDYyICg5MTM5MCkgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+em9vbTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJkZXZzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iem9vbSI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik05LjUsMCBMMTgsMCBDMTguNTUyMjg0NywtMS4wMTQ1MzA2M2UtMTYgMTksMC40NDc3MTUyNSAxOSwxIEwxOSwxMyBDMTksMTYuMzEzNzA4NSAxNi4zMTM3MDg1LDE5IDEzLDE5IEwxLDE5IEMwLjQ0NzcxNTI1LDE5IDYuNzYzNTM3NTFlLTE3LDE4LjU1MjI4NDcgMCwxOCBMMCw5LjUgQy02LjQyNTM2MDY0ZS0xNiw0LjI1MzI5NDg4IDQuMjUzMjk0ODgsOS42MzgwNDA5NWUtMTYgOS41LDAgWiIgaWQ9IlJlY3RhbmdsZSIgZmlsbC1vcGFjaXR5PSIwLjUiIGZpbGw9IiM0MzQzNDMiIGZpbGwtcnVsZT0ibm9uemVybyI+PC9wYXRoPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUuMDAwMDAwLCA0LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTQuNTgzMzMzMzMsMC43NSBDNi45NzY2NjY2NywwLjc1IDguOTE2NjY2NjcsMi42OSA4LjkxNjY2NjY3LDUuMDgzMzMzMzMgQzguOTE2NjY2NjcsNi4xNTY2NjY2NyA4LjUyMzMzMzMzLDcuMTQzMzMzMzMgNy44Nyw3LjkwMzMzMzMzIEw3Ljg3LDcuOTAzMzMzMzMgTDguMDU2NjY2NjcsOC4wODMzMzMzMyBMOC41ODMzMzMzMyw4LjA4MzMzMzMzIEwxMS45MSwxMS40MTY2NjY3IEwxMC45MTY2NjY3LDEyLjQxIEw3LjU4MzMzMzMzLDkuMDgzMzMzMzMgTDcuNTgzMzMzMzMsOC41NTY2NjY2NyBMNy40MDMzMzMzMyw4LjM3IEM2LjY0MzMzMzMzLDkuMDIzMzMzMzMgNS42NTY2NjY2Nyw5LjQxNjY2NjY3IDQuNTgzMzMzMzMsOS40MTY2NjY2NyBDMi4xOSw5LjQxNjY2NjY3IDAuMjUsNy40NzY2NjY2NyAwLjI1LDUuMDgzMzMzMzMgQzAuMjUsMi42OSAyLjE5LDAuNzUgNC41ODMzMzMzMywwLjc1IFogTTQuNTgzMzMzMzMsMi4wODMzMzMzMyBDMi45MjMzMzMzMywyLjA4MzMzMzMzIDEuNTgzMzMzMzMsMy40MjMzMzMzMyAxLjU4MzMzMzMzLDUuMDgzMzMzMzMgQzEuNTgzMzMzMzMsNi43NDMzMzMzMyAyLjkyMzMzMzMzLDguMDgzMzMzMzMgNC41ODMzMzMzMyw4LjA4MzMzMzMzIEM2LjI0MzMzMzMzLDguMDgzMzMzMzMgNy41ODMzMzMzMyw2Ljc0MzMzMzMzIDcuNTgzMzMzMzMsNS4wODMzMzMzMyBDNy41ODMzMzMzMywzLjQyMzMzMzMzIDYuMjQzMzMzMzMsMi4wODMzMzMzMyA0LjU4MzMzMzMzLDIuMDgzMzMzMzMgWiBNNC45MTY2NjY2NywzLjQxNjY2NjY3IEw0LjkxNjY2NjY3LDQuNzUgTDYuMjUsNC43NSBMNi4yNSw1LjQxNjY2NjY3IEw0LjkxNjY2NjY3LDUuNDE2NjY2NjcgTDQuOTE2NjY2NjcsNi43NSBMNC4yNSw2Ljc1IEw0LjI1LDUuNDE2NjY2NjcgTDIuOTE2NjY2NjcsNS40MTY2NjY2NyBMMi45MTY2NjY2Nyw0Ljc1IEw0LjI1LDQuNzUgTDQuMjUsMy40MTY2NjY2NyBMNC45MTY2NjY2NywzLjQxNjY2NjY3IFoiIGlkPSJDb21iaW5lZC1TaGFwZSI+PC9wYXRoPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=)}.image-option-selected{border:.125rem solid var(--primary-color)}.checkmark{display:block;height:1.25rem;width:1.25rem;border:.125rem solid var(--quml-checkmark)}.container input{position:absolute;opacity:0;cursor:pointer}.container input:checked~.checkmark,.quml-option--selected .checkmark{position:relative;background-color:var(--quml-option-selected-checkmark);border:.125rem solid var(--primary-color)}input:checked~.checkmark:after,.quml-option--selected .checkmark:after{content:\"\";opacity:1}.container .checkmark:after,.quml-option--selected .container .checkmark:after{width:.75rem;height:.75rem;background:var(--primary-color);position:absolute;top:50%;left:50%;margin:0;transform:translate(-50%,-50%);opacity:0}.quml-option--selected .container .checkmark:after{opacity:1}.quml-option--selected{border:.125rem solid var(--primary-color)}.radiomark{display:block;height:1.25rem;width:1.25rem;border-radius:50%;border:.125rem solid var(--quml-checkmark)}.container input:checked~.radiomark,.quml-option--selected .radiomark{position:relative;background-color:var(--quml-option-selected-checkmark);border:.125rem solid var(--primary-color)}input:checked~.radiomark:after,.quml-option--selected .radiomark:after{content:\"\";opacity:1}.container .radiomark:after,.quml-option--selected .container .radiomark:after{width:.75rem;height:.75rem;border-radius:50%;background:var(--primary-color);position:absolute;top:50%;left:50%;margin:0;transform:translate(-50%,-50%);opacity:0}.quml-option--selected .container .checkmark:after,.quml-option--selected .container .radiomark:after{opacity:1}.disabled{opacity:.4}\n"] }]
}], propDecorators: { mcqQuestion: [{
type: Input
}], solutions: [{
type: Input
}], mcqOption: [{
type: Input
}], cardinality: [{
type: Input
}], imgOptionSelected: [{
type: Output
}] } });
class McqOptionComponent {
constructor(utilService) {
this.utilService = utilService;
this.showPopup = new EventEmitter();
this.optionSelected = new EventEmitter();
this.selectedOption = [];
}
ngOnChanges() {
/* istanbul ignore else */
this.mcqOptions = this.shuffleOptions ? _.shuffle(this.mcqOptions) : this.mcqOptions;
if (this.replayed) {
this.selectedOption = [];
this.mcqOptions.forEach((ele) => {
ele.selected = false;
ele['isDisabled'] = false;
});
this.selectedOption = [];
}
/* istanbul ignore else */
if (this.tryAgain) {
this.unselectOption();
}
}
unselectOption() {
this.mcqOptions.forEach((ele) => {
ele.selected = false;
ele['isDisabled'] = false;
});
this.selectedOption = [];
this.optionSelected.emit({
name: 'optionSelect',
option: this.selectedOption,
cardinality: this.cardinality,
solutions: this.solutions
});
}
onOptionSelect(event, mcqOption, index) {
if (this.cardinality === Cardinality.single) {
if (index !== undefined) {
this.mcqOptions.forEach((ele) => ele.selected = false);
this.mcqOptions[index].selected = this.mcqOptions[index].label === mcqOption.label;
}
else {
this.mcqOptions.forEach(element => {
element.selected = element.label === mcqOption.label;
});
}
}
else if (this.cardinality === Cardinality.multiple) {
this.mcqOptions.forEach(element => {
if (element.label === mcqOption.label) {
if (this.utilService.hasDuplicates(this.selectedOption, mcqOption)) {
element.selected = false;
this.selectedOption = _.filter(this.selectedOption, (item) => item.label !== mcqOption.label);
}
else {
element.selected = true;
this.selectedOption.push(mcqOption);
}
}
});
if (this.selectedOption.length === this.numberOfCorrectOptions) {
// disable extra options
this.selectedOption.forEach(selectedEelement => {
this.mcqOptions.forEach(element => {
if ((element.label != selectedEelement.label) && !element.selected) {
element['isDisabled'] = true;
}
else {
element['isDisabled'] = false;
}
});
});
}
else {
this.mcqOptions.forEach(element => {
element['isDisabled'] = false;
});
}
}
this.optionSelected.emit({
name: 'optionSelect',
option: this.cardinality === 'single' ? mcqOption : this.selectedOption,
cardinality: this.cardinality,
solutions: this.solutions
});
}
showQumlPopup() {
this.showPopup.emit();
}
onEnter(event, mcqOption, index) {
/* istanbul ignore else */
if (event.key === 'Enter') {
event.stopPropagation();
this.onOptionSelect(event, mcqOption, index);
}
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: McqOptionComponent, deps: [{ token: UtilService }], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: McqOptionComponent, selector: "quml-mcq-option", inputs: { shuffleOptions: "shuffleOptions", mcqOptions: "mcqOptions", solutions: "solutions", layout: "layout", cardinality: "cardinality", numberOfCorrectOptions: "numberOfCorrectOptions", replayed: "replayed", tryAgain: "tryAgain" }, outputs: { showPopup: "showPopup", optionSelected: "optionSelected" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"quml-mcq-options\" role=\"radiogroup\" *ngIf=\"layout === 'DEFAULT' || layout === 'IMAGEQOPTION'\">\n <div class=\"quml-option-card\" tabindex=\"0\" role=\"checkbox\" [attr.aria-checked]=\"mcqOption.selected\" aria-labelledby=\"option-checkbox\" *ngFor=\"let mcqOption of mcqOptions; let index = index\"\n (keydown)=\"mcqOption.isDisabled ? null: onEnter($event, mcqOption, index)\"\n (click)=\"mcqOption.isDisabled ? null: onOptionSelect($event, mcqOption, index)\"\n [ngClass]=\"{'disabled': mcqOption.isDisabled === true}\">\n <div class=\"quml-option\" [ngClass]=\"mcqOption.selected ? 'quml-option quml-option--selected' : 'quml-option'\">\n <div class=\"option\" [innerHTML]=\"mcqOption.label | safeHtml\"></div>\n <div class=\"container\">\n <input type=\"radio\" *ngIf=\"cardinality==='single'\" name=\"radio\" [checked]=\"mcqOption.selected\"\n id=\"option-checkbox\" tabindex=\"-1\">\n <input type=\"checkbox\" *ngIf=\"cardinality==='multiple'\" name=\"checkbox\" [checked]=\"mcqOption.selected\"\n id=\"option-checkbox\" tabindex=\"-1\" [disabled]=\"mcqOption?.isDisabled\">\n <span [ngClass]=\"{'radiomark': cardinality==='single','checkmark':cardinality==='multiple'}\" tabindex=\"-1\"></span>\n </div>\n </div>\n </div>\n</div>\n<div *ngIf=\"layout === 'IMAGEGRID'\">\n <div class=\"qumlImageOption\">\n <div class=\"wrapper\">\n <div *ngFor=\"let mcqOption of mcqOptions; let index = index\">\n <quml-mcq-image-option (imgOptionSelected)=\"onOptionSelect($event, mcqOption, index)\" [mcqOption]='mcqOption' [cardinality]=\"cardinality\"></quml-mcq-image-option>\n </div>\n </div>\n </div>\n\n</div>\n<div *ngIf=\"layout === 'IMAGEQAGRID'\">\n <div class=\"qumlOption-imageQaGrid\">\n <div class=\"wrapper\">\n <div *ngFor=\"let mcqOption of mcqOptions; let index = index\">\n <quml-mcq-image-option (imgOptionSelected)=\"onOptionSelect($event, mcqOption, index)\" [mcqOption]='mcqOption' [cardinality]=\"cardinality\"></quml-mcq-image-option>\n </div>\n </div>\n </div>\n</div>\n<div *ngIf=\"layout === 'MULTIIMAGEGRID'\">\n <div class=\"qumlImageOption\">\n <div class=\"wrapper\">\n <div *ngFor=\"let mcqOption of mcqOptions; let index = index\">\n <quml-mcq-image-option (imgOptionSelected)=\"onOptionSelect($event, mcqOption, index)\" [mcqOption]='mcqOption' [cardinality]=\"cardinality\"></quml-mcq-image-option>\n </div>\n </div>\n </div>\n</div>\n", styles: ["::ng-deep :root{--quml-btn-border: #ccc;--quml-color-gray: #666;--quml-checkmark: #cdcdcd;--quml-color-primary-shade: rgba(0, 0, 0, .1);--quml-color-success: #08BC82;--quml-color-danger: #F1635D;--quml-option-card-bg: #fff;--quml-option-selected-checkmark:#fff;--quml-option-selected-checkmark-icon:#fff}.quml-mcq-options{align-items:center;margin-bottom:.5rem}.quml-option label.container{margin:0 auto}.quml-option-card{margin-bottom:1rem}.quml-option{position:relative;background-color:var(--quml-option-card-bg);border-radius:.25rem;border:.0625rem solid var(--quml-btn-border);padding:1rem;box-shadow:0 .125rem .75rem 0 var(--quml-color-primary-shade);display:flex;align-items:center;justify-content:space-between;height:100%;gap:.5rem}.quml-option .option{flex:1}.quml-option--selected{border:.125rem solid var(--primary-color)}.quml-option-card .option{color:var(--quml-color-gray);font-size:.875rem}.selected-option{border:.125rem solid var(--primary-color)}.selected-option-text{color:var(--primary-color)!important}.container{padding-right:0!important}.checkmark{display:block;height:1.25rem;width:1.25rem;border:.125rem solid var(--quml-checkmark)}.radiomark{display:block;height:1.25rem;width:1.25rem;border-radius:50%;border:.125rem solid var(--quml-checkmark)}.container input{position:absolute;opacity:0;cursor:pointer}.container input:checked~.checkmark,.quml-option--selected .checkmark{position:relative;background-color:var(--quml-option-selected-checkmark);border:.125rem solid var(--primary-color)}.container input:checked~.radiomark,.quml-option--selected .radiomark{position:relative;background-color:var(--quml-option-selected-checkmark);border:.125rem solid var(--primary-color)}input:checked~.checkmark:after,.quml-option--selected .checkmark:after{content:\"\";opacity:1}input:checked~.radiomark:after,.quml-option--selected .radiomark:after{content:\"\";opacity:1}.container .radiomark:after,.quml-option--selected .container .radiomark:after{width:.75rem;height:.75rem;border-radius:50%;background:var(--primary-color);position:absolute;top:50%;left:50%;margin:0;transform:translate(-50%,-50%);opacity:0}.container .checkmark:after,.quml-option--selected .container .checkmark:after{width:.75rem;height:.75rem;background:var(--primary-color);position:absolute;top:50%;left:50%;margin:0;transform:translate(-50%,-50%);opacity:0}.quml-option--selected .container .checkmark:after,.quml-option--selected .container .radiomark:after{opacity:1}img{width:100%!important}.option-img{position:relative}.option-img img{width:100%}.icon-zommin{position:absolute;bottom:0;right:0;content:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTlweCIgaGVpZ2h0PSIxOXB4IiB2aWV3Qm94PSIwIDAgMTkgMTkiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDYyICg5MTM5MCkgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+em9vbTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJkZXZzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iem9vbSI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik05LjUsMCBMMTgsMCBDMTguNTUyMjg0NywtMS4wMTQ1MzA2M2UtMTYgMTksMC40NDc3MTUyNSAxOSwxIEwxOSwxMyBDMTksMTYuMzEzNzA4NSAxNi4zMTM3MDg1LDE5IDEzLDE5IEwxLDE5IEMwLjQ0NzcxNTI1LDE5IDYuNzYzNTM3NTFlLTE3LDE4LjU1MjI4NDcgMCwxOCBMMCw5LjUgQy02LjQyNTM2MDY0ZS0xNiw0LjI1MzI5NDg4IDQuMjUzMjk0ODgsOS42MzgwNDA5NWUtMTYgOS41LDAgWiIgaWQ9IlJlY3RhbmdsZSIgZmlsbC1vcGFjaXR5PSIwLjUiIGZpbGw9IiM0MzQzNDMiIGZpbGwtcnVsZT0ibm9uemVybyI+PC9wYXRoPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUuMDAwMDAwLCA0LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTQuNTgzMzMzMzMsMC43NSBDNi45NzY2NjY2NywwLjc1IDguOTE2NjY2NjcsMi42OSA4LjkxNjY2NjY3LDUuMDgzMzMzMzMgQzguOTE2NjY2NjcsNi4xNTY2NjY2NyA4LjUyMzMzMzMzLDcuMTQzMzMzMzMgNy44Nyw3LjkwMzMzMzMzIEw3Ljg3LDcuOTAzMzMzMzMgTDguMDU2NjY2NjcsOC4wODMzMzMzMyBMOC41ODMzMzMzMyw4LjA4MzMzMzMzIEwxMS45MSwxMS40MTY2NjY3IEwxMC45MTY2NjY3LDEyLjQxIEw3LjU4MzMzMzMzLDkuMDgzMzMzMzMgTDcuNTgzMzMzMzMsOC41NTY2NjY2NyBMNy40MDMzMzMzMyw4LjM3IEM2LjY0MzMzMzMzLDkuMDIzMzMzMzMgNS42NTY2NjY2Nyw5LjQxNjY2NjY3IDQuNTgzMzMzMzMsOS40MTY2NjY2NyBDMi4xOSw5LjQxNjY2NjY3IDAuMjUsNy40NzY2NjY2NyAwLjI1LDUuMDgzMzMzMzMgQzAuMjUsMi42OSAyLjE5LDAuNzUgNC41ODMzMzMzMywwLjc1IFogTTQuNTgzMzMzMzMsMi4wODMzMzMzMyBDMi45MjMzMzMzMywyLjA4MzMzMzMzIDEuNTgzMzMzMzMsMy40MjMzMzMzMyAxLjU4MzMzMzMzLDUuMDgzMzMzMzMgQzEuNTgzMzMzMzMsNi43NDMzMzMzMyAyLjkyMzMzMzMzLDguMDgzMzMzMzMgNC41ODMzMzMzMyw4LjA4MzMzMzMzIEM2LjI0MzMzMzMzLDguMDgzMzMzMzMgNy41ODMzMzMzMyw2Ljc0MzMzMzMzIDcuNTgzMzMzMzMsNS4wODMzMzMzMyBDNy41ODMzMzMzMywzLjQyMzMzMzMzIDYuMjQzMzMzMzMsMi4wODMzMzMzMyA0LjU4MzMzMzMzLDIuMDgzMzMzMzMgWiBNNC45MTY2NjY2NywzLjQxNjY2NjY3IEw0LjkxNjY2NjY3LDQuNzUgTDYuMjUsNC43NSBMNi4yNSw1LjQxNjY2NjY3IEw0LjkxNjY2NjY3LDUuNDE2NjY2NjcgTDQuOTE2NjY2NjcsNi43NSBMNC4yNSw2Ljc1IEw0LjI1LDUuNDE2NjY2NjcgTDIuOTE2NjY2NjcsNS40MTY2NjY2NyBMMi45MTY2NjY2Nyw0Ljc1IEw0LjI1LDQuNzUgTDQuMjUsMy40MTY2NjY2NyBMNC45MTY2NjY2NywzLjQxNjY2NjY3IFoiIGlkPSJDb21iaW5lZC1TaGFwZSI+PC9wYXRoPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=)}.qumlImageOption .wrapper{margin-top:2rem;display:grid;gap:1rem}.qumlOption-imageQaGrid .wrapper{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:1rem}@media only screen and (max-width: 640px){.qumlOption-imageQaGrid .wrapper{grid-template-columns:repeat(1,1fr)}}@media only screen and (max-width: 840px){.qumlImageOption .wrapper{grid-template-columns:repeat(2,1fr)}}@media only screen and (max-width: 640px){.qumlImageOption .wrapper{grid-template-columns:repeat(1,1fr)}}.disabled{opacity:.4}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: McqImageOptionComponent, selector: "quml-mcq-image-option", inputs: ["mcqQuestion", "solutions", "mcqOption", "cardinality"], outputs: ["imgOptionSelected"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: McqOptionComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-mcq-option', template: "<div class=\"quml-mcq-options\" role=\"radiogroup\" *ngIf=\"layout === 'DEFAULT' || layout === 'IMAGEQOPTION'\">\n <div class=\"quml-option-card\" tabindex=\"0\" role=\"checkbox\" [attr.aria-checked]=\"mcqOption.selected\" aria-labelledby=\"option-checkbox\" *ngFor=\"let mcqOption of mcqOptions; let index = index\"\n (keydown)=\"mcqOption.isDisabled ? null: onEnter($event, mcqOption, index)\"\n (click)=\"mcqOption.isDisabled ? null: onOptionSelect($event, mcqOption, index)\"\n [ngClass]=\"{'disabled': mcqOption.isDisabled === true}\">\n <div class=\"quml-option\" [ngClass]=\"mcqOption.selected ? 'quml-option quml-option--selected' : 'quml-option'\">\n <div class=\"option\" [innerHTML]=\"mcqOption.label | safeHtml\"></div>\n <div class=\"container\">\n <input type=\"radio\" *ngIf=\"cardinality==='single'\" name=\"radio\" [checked]=\"mcqOption.selected\"\n id=\"option-checkbox\" tabindex=\"-1\">\n <input type=\"checkbox\" *ngIf=\"cardinality==='multiple'\" name=\"checkbox\" [checked]=\"mcqOption.selected\"\n id=\"option-checkbox\" tabindex=\"-1\" [disabled]=\"mcqOption?.isDisabled\">\n <span [ngClass]=\"{'radiomark': cardinality==='single','checkmark':cardinality==='multiple'}\" tabindex=\"-1\"></span>\n </div>\n </div>\n </div>\n</div>\n<div *ngIf=\"layout === 'IMAGEGRID'\">\n <div class=\"qumlImageOption\">\n <div class=\"wrapper\">\n <div *ngFor=\"let mcqOption of mcqOptions; let index = index\">\n <quml-mcq-image-option (imgOptionSelected)=\"onOptionSelect($event, mcqOption, index)\" [mcqOption]='mcqOption' [cardinality]=\"cardinality\"></quml-mcq-image-option>\n </div>\n </div>\n </div>\n\n</div>\n<div *ngIf=\"layout === 'IMAGEQAGRID'\">\n <div class=\"qumlOption-imageQaGrid\">\n <div class=\"wrapper\">\n <div *ngFor=\"let mcqOption of mcqOptions; let index = index\">\n <quml-mcq-image-option (imgOptionSelected)=\"onOptionSelect($event, mcqOption, index)\" [mcqOption]='mcqOption' [cardinality]=\"cardinality\"></quml-mcq-image-option>\n </div>\n </div>\n </div>\n</div>\n<div *ngIf=\"layout === 'MULTIIMAGEGRID'\">\n <div class=\"qumlImageOption\">\n <div class=\"wrapper\">\n <div *ngFor=\"let mcqOption of mcqOptions; let index = index\">\n <quml-mcq-image-option (imgOptionSelected)=\"onOptionSelect($event, mcqOption, index)\" [mcqOption]='mcqOption' [cardinality]=\"cardinality\"></quml-mcq-image-option>\n </div>\n </div>\n </div>\n</div>\n", styles: ["::ng-deep :root{--quml-btn-border: #ccc;--quml-color-gray: #666;--quml-checkmark: #cdcdcd;--quml-color-primary-shade: rgba(0, 0, 0, .1);--quml-color-success: #08BC82;--quml-color-danger: #F1635D;--quml-option-card-bg: #fff;--quml-option-selected-checkmark:#fff;--quml-option-selected-checkmark-icon:#fff}.quml-mcq-options{align-items:center;margin-bottom:.5rem}.quml-option label.container{margin:0 auto}.quml-option-card{margin-bottom:1rem}.quml-option{position:relative;background-color:var(--quml-option-card-bg);border-radius:.25rem;border:.0625rem solid var(--quml-btn-border);padding:1rem;box-shadow:0 .125rem .75rem 0 var(--quml-color-primary-shade);display:flex;align-items:center;justify-content:space-between;height:100%;gap:.5rem}.quml-option .option{flex:1}.quml-option--selected{border:.125rem solid var(--primary-color)}.quml-option-card .option{color:var(--quml-color-gray);font-size:.875rem}.selected-option{border:.125rem solid var(--primary-color)}.selected-option-text{color:var(--primary-color)!important}.container{padding-right:0!important}.checkmark{display:block;height:1.25rem;width:1.25rem;border:.125rem solid var(--quml-checkmark)}.radiomark{display:block;height:1.25rem;width:1.25rem;border-radius:50%;border:.125rem solid var(--quml-checkmark)}.container input{position:absolute;opacity:0;cursor:pointer}.container input:checked~.checkmark,.quml-option--selected .checkmark{position:relative;background-color:var(--quml-option-selected-checkmark);border:.125rem solid var(--primary-color)}.container input:checked~.radiomark,.quml-option--selected .radiomark{position:relative;background-color:var(--quml-option-selected-checkmark);border:.125rem solid var(--primary-color)}input:checked~.checkmark:after,.quml-option--selected .checkmark:after{content:\"\";opacity:1}input:checked~.radiomark:after,.quml-option--selected .radiomark:after{content:\"\";opacity:1}.container .radiomark:after,.quml-option--selected .container .radiomark:after{width:.75rem;height:.75rem;border-radius:50%;background:var(--primary-color);position:absolute;top:50%;left:50%;margin:0;transform:translate(-50%,-50%);opacity:0}.container .checkmark:after,.quml-option--selected .container .checkmark:after{width:.75rem;height:.75rem;background:var(--primary-color);position:absolute;top:50%;left:50%;margin:0;transform:translate(-50%,-50%);opacity:0}.quml-option--selected .container .checkmark:after,.quml-option--selected .container .radiomark:after{opacity:1}img{width:100%!important}.option-img{position:relative}.option-img img{width:100%}.icon-zommin{position:absolute;bottom:0;right:0;content:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTlweCIgaGVpZ2h0PSIxOXB4IiB2aWV3Qm94PSIwIDAgMTkgMTkiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDYyICg5MTM5MCkgLSBodHRwczovL3NrZXRjaC5jb20gLS0+CiAgICA8dGl0bGU+em9vbTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxnIGlkPSJkZXZzIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iem9vbSI+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik05LjUsMCBMMTgsMCBDMTguNTUyMjg0NywtMS4wMTQ1MzA2M2UtMTYgMTksMC40NDc3MTUyNSAxOSwxIEwxOSwxMyBDMTksMTYuMzEzNzA4NSAxNi4zMTM3MDg1LDE5IDEzLDE5IEwxLDE5IEMwLjQ0NzcxNTI1LDE5IDYuNzYzNTM3NTFlLTE3LDE4LjU1MjI4NDcgMCwxOCBMMCw5LjUgQy02LjQyNTM2MDY0ZS0xNiw0LjI1MzI5NDg4IDQuMjUzMjk0ODgsOS42MzgwNDA5NWUtMTYgOS41LDAgWiIgaWQ9IlJlY3RhbmdsZSIgZmlsbC1vcGFjaXR5PSIwLjUiIGZpbGw9IiM0MzQzNDMiIGZpbGwtcnVsZT0ibm9uemVybyI+PC9wYXRoPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDUuMDAwMDAwLCA0LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTQuNTgzMzMzMzMsMC43NSBDNi45NzY2NjY2NywwLjc1IDguOTE2NjY2NjcsMi42OSA4LjkxNjY2NjY3LDUuMDgzMzMzMzMgQzguOTE2NjY2NjcsNi4xNTY2NjY2NyA4LjUyMzMzMzMzLDcuMTQzMzMzMzMgNy44Nyw3LjkwMzMzMzMzIEw3Ljg3LDcuOTAzMzMzMzMgTDguMDU2NjY2NjcsOC4wODMzMzMzMyBMOC41ODMzMzMzMyw4LjA4MzMzMzMzIEwxMS45MSwxMS40MTY2NjY3IEwxMC45MTY2NjY3LDEyLjQxIEw3LjU4MzMzMzMzLDkuMDgzMzMzMzMgTDcuNTgzMzMzMzMsOC41NTY2NjY2NyBMNy40MDMzMzMzMyw4LjM3IEM2LjY0MzMzMzMzLDkuMDIzMzMzMzMgNS42NTY2NjY2Nyw5LjQxNjY2NjY3IDQuNTgzMzMzMzMsOS40MTY2NjY2NyBDMi4xOSw5LjQxNjY2NjY3IDAuMjUsNy40NzY2NjY2NyAwLjI1LDUuMDgzMzMzMzMgQzAuMjUsMi42OSAyLjE5LDAuNzUgNC41ODMzMzMzMywwLjc1IFogTTQuNTgzMzMzMzMsMi4wODMzMzMzMyBDMi45MjMzMzMzMywyLjA4MzMzMzMzIDEuNTgzMzMzMzMsMy40MjMzMzMzMyAxLjU4MzMzMzMzLDUuMDgzMzMzMzMgQzEuNTgzMzMzMzMsNi43NDMzMzMzMyAyLjkyMzMzMzMzLDguMDgzMzMzMzMgNC41ODMzMzMzMyw4LjA4MzMzMzMzIEM2LjI0MzMzMzMzLDguMDgzMzMzMzMgNy41ODMzMzMzMyw2Ljc0MzMzMzMzIDcuNTgzMzMzMzMsNS4wODMzMzMzMyBDNy41ODMzMzMzMywzLjQyMzMzMzMzIDYuMjQzMzMzMzMsMi4wODMzMzMzMyA0LjU4MzMzMzMzLDIuMDgzMzMzMzMgWiBNNC45MTY2NjY2NywzLjQxNjY2NjY3IEw0LjkxNjY2NjY3LDQuNzUgTDYuMjUsNC43NSBMNi4yNSw1LjQxNjY2NjY3IEw0LjkxNjY2NjY3LDUuNDE2NjY2NjcgTDQuOTE2NjY2NjcsNi43NSBMNC4yNSw2Ljc1IEw0LjI1LDUuNDE2NjY2NjcgTDIuOTE2NjY2NjcsNS40MTY2NjY2NyBMMi45MTY2NjY2Nyw0Ljc1IEw0LjI1LDQuNzUgTDQuMjUsMy40MTY2NjY2NyBMNC45MTY2NjY2NywzLjQxNjY2NjY3IFoiIGlkPSJDb21iaW5lZC1TaGFwZSI+PC9wYXRoPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=)}.qumlImageOption .wrapper{margin-top:2rem;display:grid;gap:1rem}.qumlOption-imageQaGrid .wrapper{display:grid;grid-template-columns:repeat(2,1fr);grid-gap:1rem}@media only screen and (max-width: 640px){.qumlOption-imageQaGrid .wrapper{grid-template-columns:repeat(1,1fr)}}@media only screen and (max-width: 840px){.qumlImageOption .wrapper{grid-template-columns:repeat(2,1fr)}}@media only screen and (max-width: 640px){.qumlImageOption .wrapper{grid-template-columns:repeat(1,1fr)}}.disabled{opacity:.4}\n"] }]
}], ctorParameters: function () { return [{ type: UtilService }]; }, propDecorators: { shuffleOptions: [{
type: Input
}], mcqOptions: [{
type: Input
}], solutions: [{
type: Input
}], layout: [{
type: Input
}], cardinality: [{
type: Input
}], numberOfCorrectOptions: [{
type: Input
}], showPopup: [{
type: Output
}], optionSelected: [{
type: Output
}], replayed: [{
type: Input
}], tryAgain: [{
type: Input
}] } });
class QumlPopupComponent {
constructor() {
this.popUpClose = new EventEmitter();
}
ngAfterViewInit() {
const htmlTagElement = document.getElementById('htmlTag');
if (htmlTagElement) {
htmlTagElement.getElementsByTagName('img')[0].style.width = '70%';
}
}
closePopup() {
this.popUpClose.emit();
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: QumlPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: QumlPopupComponent, selector: "quml-quml-popup", inputs: { image: "image", htmlTag: "htmlTag" }, outputs: { popUpClose: "popUpClose" }, ngImport: i0, template: "<div class=\"quml-popup\">\n <div class=\"quml-popup-icon\" (click)=\"closePopup()\">✕</div>\n <img *ngIf=\"!htmlTag\" src={{image}} alt=\"Image\">\n</div>\n\n<div *ngIf=\"htmlTag\" class=\"htmlTag\" id=\"htmlTag\" [innerHtml]=\"htmlTag | safeHtml\"></div>\n\n", styles: [".quml-popup{position:absolute;inset:0;background:#0006;padding:1rem;display:flex;align-items:center;justify-content:center;z-index:2}.quml-popup .quml-popup-icon{font-size:1.25rem;right:10%;position:absolute;cursor:pointer;z-index:2;color:var(--white);top:8%}.quml-popup img{box-shadow:0 .25rem .5rem #0003;height:90%;border-radius:.5rem;position:absolute;z-index:2}.htmlTag{position:absolute;top:15%;left:27%;z-index:10}@media only screen and (max-width: 640px){.htmlTag{position:absolute;top:10%;left:27%;z-index:10}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: QumlPopupComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-quml-popup', template: "<div class=\"quml-popup\">\n <div class=\"quml-popup-icon\" (click)=\"closePopup()\">✕</div>\n <img *ngIf=\"!htmlTag\" src={{image}} alt=\"Image\">\n</div>\n\n<div *ngIf=\"htmlTag\" class=\"htmlTag\" id=\"htmlTag\" [innerHtml]=\"htmlTag | safeHtml\"></div>\n\n", styles: [".quml-popup{position:absolute;inset:0;background:#0006;padding:1rem;display:flex;align-items:center;justify-content:center;z-index:2}.quml-popup .quml-popup-icon{font-size:1.25rem;right:10%;position:absolute;cursor:pointer;z-index:2;color:var(--white);top:8%}.quml-popup img{box-shadow:0 .25rem .5rem #0003;height:90%;border-radius:.5rem;position:absolute;z-index:2}.htmlTag{position:absolute;top:15%;left:27%;z-index:10}@media only screen and (max-width: 640px){.htmlTag{position:absolute;top:10%;left:27%;z-index:10}}\n"] }]
}], propDecorators: { image: [{
type: Input
}], htmlTag: [{
type: Input
}], popUpClose: [{
type: Output
}] } });
class McqComponent {
constructor(domSanitizer, utilService) {
this.domSanitizer = domSanitizer;
this.utilService = utilService;
this.componentLoaded = new EventEmitter();
this.answerChanged = new EventEmitter();
this.optionSelected = new EventEmitter();
this.mcqOptions = [];
this.showQumlPopup = false;
}
ngOnInit() {
this.numberOfCorrectOptions = _.castArray(this.question.responseDeclaration.response1.correctResponse.value).length;
if (this.question?.solutions) {
this.solutions = this.question.solutions;
}
let key = this.utilService.getKeyValue(Object.keys(this.question.responseDeclaration));
this.cardinality = this.question.responseDeclaration[key]['cardinality'];
switch (this.question.templateId) {
case "mcq-vertical":
this.layout = 'DEFAULT';
break;
case "mcq-horizontal":
this.layout = 'IMAGEGRID';
break;
case "mcq-vertical-split":
this.layout = 'IMAGEQAGRID';
break;
case "mcq-grid-split":
this.layout = 'MULTIIMAGEGRID';
break;
default:
console.error("Invalid templateId");
}
this.renderLatex();
this.mcqQuestion = this.domSanitizer.sanitize(SecurityContext.HTML, this.domSanitizer.bypassSecurityTrustHtml(this.question.body));
this.options = this.question.interactions[key].options;
this.initOptions();
}
ngAfterViewInit() {
const el = document.getElementsByClassName('mcq-options');
if (el != null && el.length > 0) {
el[0].remove();
}
}
initOptions() {
for (let j = 0; j < this.options.length; j++) {
let imageUrl;
if (this.options[j].url) {
imageUrl = this.options[j].url;
}
const option = this.options[j];
const optionValue = option.value.body;
const optionHtml = this.domSanitizer.sanitize(SecurityContext.HTML, this.domSanitizer.bypassSecurityTrustHtml(optionValue));
const optionToBePushed = {};
optionToBePushed.index = j;
optionToBePushed.optionHtml = optionHtml;
optionToBePushed.selected = false;
optionToBePushed.url = imageUrl;
this.mcqOptions.push(optionToBePushed);
}
}
renderLatex() {
setTimeout(() => {
this.replaceLatexText();
}, 100);
}
replaceLatexText() {
const questionElement = document.getElementById(this.identifier);
if (questionElement != null) {
const mathTextDivs = questionElement.getElementsByClassName('mathText');
for (let i = 0; i < mathTextDivs.length; i++) {
const mathExp = mathTextDivs[i];
const textToRender = mathExp.innerHTML;
katex.render(textToRender, mathExp, { displayMode: false, output: 'html', throwOnError: true });
}
}
}
getSelectedOptionAndResult(optionObj) {
this.optionSelected.emit(optionObj);
}
showPopup() {
this.showQumlPopup = true;
}
closePopUp() {
this.showQumlPopup = false;
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: McqComponent, deps: [{ token: i1.DomSanitizer }, { token: UtilService }], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: McqComponent, selector: "quml-mcq", inputs: { shuffleOptions: "shuffleOptions", question: "question", identifier: "identifier", layout: "layout", replayed: "replayed", tryAgain: "tryAgain" }, outputs: { componentLoaded: "componentLoaded", answerChanged: "answerChanged", optionSelected: "optionSelected" }, ngImport: i0, template: "<!-- Default Layout-->\n<div class=\"quml-mcq layoutDefault\" *ngIf=\"layout=='DEFAULT'\">\n <div class=\"quml-mcq--question mb-16\">\n <quml-mcq-question [mcqQuestion]=\"mcqQuestion\" [layout]=\"layout\" (showPopup)=\"showPopup()\"></quml-mcq-question>\n </div>\n <div class=\"quml-mcq--option\">\n <quml-mcq-option [mcqOptions]=\"options\" [replayed]=\"replayed\" [cardinality]=\"cardinality\"\n [solutions]=\"solutions\" [layout]=\"layout\" [numberOfCorrectOptions]=\"numberOfCorrectOptions\" (optionSelected)=\"getSelectedOptionAndResult($event)\"\n (showPopup)=\"showPopup()\" [tryAgain]=\"tryAgain\"></quml-mcq-option>\n </div>\n</div>\n<!-- End of Default Layout-->\n<!--Image Grid Layout-->\n<div class=\"quml-mcq layoutImageGrid-mcq-horizontal\" *ngIf=\"layout=='IMAGEGRID'\">\n <div class=\"quml-mcq--question mb-16\">\n <quml-mcq-question [mcqQuestion]=\"mcqQuestion\" [layout]=\"layout\"></quml-mcq-question>\n </div>\n <div class=\"quml-mcq--option\">\n <quml-mcq-option [mcqOptions]=\"options\" [replayed]=\"replayed\" [cardinality]=\"cardinality\" [layout]=\"layout\"\n [solutions]=\"solutions\" (optionSelected)=\"getSelectedOptionAndResult($event)\" [tryAgain]=\"tryAgain\"\n [numberOfCorrectOptions]=\"numberOfCorrectOptions\">\n </quml-mcq-option>\n </div>\n</div>\n<!--End of Grid Layout-->\n<!--Image Multi Grid Layout-->\n<div class=\"quml-mcq layoutMultiImageGrid\" *ngIf=\"layout==='MULTIIMAGEGRID'\">\n <div class=\"imageqa-wrapper image-grid\">\n <div class=\"quml-mcq--question mb-16\">\n <quml-mcq-question [mcqQuestion]=\"mcqQuestion\" [layout]=\"layout\"></quml-mcq-question>\n </div>\n <div class=\"quml-mcq--option\">\n <quml-mcq-option [shuffleOptions]=\"shuffleOptions\" [mcqOptions]=\"options\" [replayed]=\"replayed\" [cardinality]=\"cardinality\"\n [solutions]=\"solutions\" (optionSelected)=\"getSelectedOptionAndResult($event)\" [layout]=\"layout\" [tryAgain]=\"tryAgain\"\n [numberOfCorrectOptions]=\"numberOfCorrectOptions\">\n </quml-mcq-option>\n </div>\n </div>\n</div>\n<!--End of Image Multi Grid Layout-->\n<!--Image QA Grid Layout-->\n<div class=\"quml-mcq layoutImageQAGridMCQ-vSplit\" *ngIf=\"layout=='IMAGEQAGRID'\">\n <div class=\"imageqa-wrapper\">\n <div class=\"quml-mcq--question mb-16\">\n <quml-mcq-question [mcqQuestion]=\"mcqQuestion\" [layout]=\"layout\"></quml-mcq-question>\n </div>\n <div class=\"quml-mcq--option\">\n <quml-mcq-option [mcqOptions]=\"options\" [replayed]=\"replayed\" [cardinality]=\"cardinality\"\n [solutions]=\"solutions\" (optionSelected)=\"getSelectedOptionAndResult($event)\" [layout]=\"layout\"\n [tryAgain]=\"tryAgain\" [numberOfCorrectOptions]=\"numberOfCorrectOptions\">\n </quml-mcq-option>\n </div>\n </div>\n</div>\n<!--End of Image QA Grid Layout-->\n<!--Image QOption Layout-->\n<div class=\"quml-mcq layoutImageOption\" *ngIf=\"layout=='IMAGEQOPTION'\">\n <div class=\"columnBlock questionBlock quml-mcq--question mb-16\">\n <quml-mcq-question [mcqQuestion]=\"mcqQuestion\" [layout]=\"layout\"></quml-mcq-question>\n </div>\n <div class=\"columnBlock quml-mcq--option\">\n <quml-mcq-option [mcqOptions]=\"options\" [replayed]=\"replayed\" [cardinality]=\"cardinality\"\n [solutions]=\"solutions\" [layout]=\"layout\" (optionSelected)=\"getSelectedOptionAndResult($event)\"\n [tryAgain]=\"tryAgain\" [numberOfCorrectOptions]=\"numberOfCorrectOptions\">\n </quml-mcq-option>\n </div>\n</div>\n\n<!--End of Image QOption Layout-->\n<quml-quml-popup *ngIf=\"showQumlPopup\" (popUpClose)=\"closePopUp()\"></quml-quml-popup>\n", styles: [".quml-mcq{padding:0}.quml-mcq .columnBlock{display:inline-block;min-width:12.5rem;padding:.25rem;min-height:12.5rem;vertical-align:top}.quml-mcq .questionBlock{max-width:17.1875rem;width:30%}.quml-mcq .quml-mcq--option{overflow-x:auto}.quml-mcq .image-grid{display:flex}.quml-mcq .image-grid .quml-mcq--question{flex-basis:25%}.quml-mcq .image-grid .quml-mcq--option{flex:1 1 75%}::ng-deep .layoutImageGrid-mcq-horizontal .quml-mcq--option .qumlImageOption .wrapper{grid-template-columns:repeat(4,1fr)}@media only screen and (min-width: 360px) and (max-width: 640px){::ng-deep .layoutImageGrid-mcq-horizontal .quml-mcq--option .qumlImageOption .wrapper{grid-template-columns:repeat(2,1fr)}}::ng-deep .layoutImageGrid-mcq-horizontal .quml-mcq-option-card .magnify-icon{width:1rem;height:1rem;right:-.25rem;bottom:-.25rem;border-top-left-radius:.4rem}::ng-deep .layoutImageGrid-mcq-horizontal .quml-mcq-option-card .magnify-icon:after{width:.75rem;height:.75rem;bottom:.0625rem;right:.0625rem}\n", ".answer{border:1px solid;padding:.2em;margin:.5em}.icon{width:15%;max-width:70px;min-width:50px;display:inline-block;vertical-align:top}.mcqText{display:inline-block;word-break:break-word}.mcq-option{background:var(--white);border-radius:5px;margin:8px 16px;padding:8px}.options{word-break:break-word;padding:15px 5px}.even,.odd{width:47%;display:inline-block;vertical-align:middle}.column-block{display:inline-block;width:48%;vertical-align:middle}.selected{background:var(--primary-color);color:var(--white);box-shadow:1px 2px 1px 3px var(--black)}.mathText{display:inline!important}.padding-top{padding-top:16px}@media only screen and (min-width: 100px) and (max-width: 481px){.mcqText{width:75%}.even,.odd{width:38%;display:inline-block;vertical-align:middle}.column-block{display:inline-block;width:42%;vertical-align:middle}}@media only screen and (min-width: 481px) and (max-width: 800px){.mcqText{width:85%}.even,.odd{width:43%;display:inline-block;vertical-align:middle}.column-block{display:inline-block;width:45%;vertical-align:middle}}@media only screen and (min-width: 801px) and (max-width: 1200px){.even,.odd{width:45%}.column-block{display:inline-block;width:45%;vertical-align:middle}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: McqQuestionComponent, selector: "quml-mcq-question", inputs: ["mcqQuestion", "layout"], outputs: ["showPopup"] }, { kind: "component", type: McqOptionComponent, selector: "quml-mcq-option", inputs: ["shuffleOptions", "mcqOptions", "solutions", "layout", "cardinality", "numberOfCorrectOptions", "replayed", "tryAgain"], outputs: ["showPopup", "optionSelected"] }, { kind: "component", type: QumlPopupComponent, selector: "quml-quml-popup", inputs: ["image", "htmlTag"], outputs: ["popUpClose"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: McqComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-mcq', template: "<!-- Default Layout-->\n<div class=\"quml-mcq layoutDefault\" *ngIf=\"layout=='DEFAULT'\">\n <div class=\"quml-mcq--question mb-16\">\n <quml-mcq-question [mcqQuestion]=\"mcqQuestion\" [layout]=\"layout\" (showPopup)=\"showPopup()\"></quml-mcq-question>\n </div>\n <div class=\"quml-mcq--option\">\n <quml-mcq-option [mcqOptions]=\"options\" [replayed]=\"replayed\" [cardinality]=\"cardinality\"\n [solutions]=\"solutions\" [layout]=\"layout\" [numberOfCorrectOptions]=\"numberOfCorrectOptions\" (optionSelected)=\"getSelectedOptionAndResult($event)\"\n (showPopup)=\"showPopup()\" [tryAgain]=\"tryAgain\"></quml-mcq-option>\n </div>\n</div>\n<!-- End of Default Layout-->\n<!--Image Grid Layout-->\n<div class=\"quml-mcq layoutImageGrid-mcq-horizontal\" *ngIf=\"layout=='IMAGEGRID'\">\n <div class=\"quml-mcq--question mb-16\">\n <quml-mcq-question [mcqQuestion]=\"mcqQuestion\" [layout]=\"layout\"></quml-mcq-question>\n </div>\n <div class=\"quml-mcq--option\">\n <quml-mcq-option [mcqOptions]=\"options\" [replayed]=\"replayed\" [cardinality]=\"cardinality\" [layout]=\"layout\"\n [solutions]=\"solutions\" (optionSelected)=\"getSelectedOptionAndResult($event)\" [tryAgain]=\"tryAgain\"\n [numberOfCorrectOptions]=\"numberOfCorrectOptions\">\n </quml-mcq-option>\n </div>\n</div>\n<!--End of Grid Layout-->\n<!--Image Multi Grid Layout-->\n<div class=\"quml-mcq layoutMultiImageGrid\" *ngIf=\"layout==='MULTIIMAGEGRID'\">\n <div class=\"imageqa-wrapper image-grid\">\n <div class=\"quml-mcq--question mb-16\">\n <quml-mcq-question [mcqQuestion]=\"mcqQuestion\" [layout]=\"layout\"></quml-mcq-question>\n </div>\n <div class=\"quml-mcq--option\">\n <quml-mcq-option [shuffleOptions]=\"shuffleOptions\" [mcqOptions]=\"options\" [replayed]=\"replayed\" [cardinality]=\"cardinality\"\n [solutions]=\"solutions\" (optionSelected)=\"getSelectedOptionAndResult($event)\" [layout]=\"layout\" [tryAgain]=\"tryAgain\"\n [numberOfCorrectOptions]=\"numberOfCorrectOptions\">\n </quml-mcq-option>\n </div>\n </div>\n</div>\n<!--End of Image Multi Grid Layout-->\n<!--Image QA Grid Layout-->\n<div class=\"quml-mcq layoutImageQAGridMCQ-vSplit\" *ngIf=\"layout=='IMAGEQAGRID'\">\n <div class=\"imageqa-wrapper\">\n <div class=\"quml-mcq--question mb-16\">\n <quml-mcq-question [mcqQuestion]=\"mcqQuestion\" [layout]=\"layout\"></quml-mcq-question>\n </div>\n <div class=\"quml-mcq--option\">\n <quml-mcq-option [mcqOptions]=\"options\" [replayed]=\"replayed\" [cardinality]=\"cardinality\"\n [solutions]=\"solutions\" (optionSelected)=\"getSelectedOptionAndResult($event)\" [layout]=\"layout\"\n [tryAgain]=\"tryAgain\" [numberOfCorrectOptions]=\"numberOfCorrectOptions\">\n </quml-mcq-option>\n </div>\n </div>\n</div>\n<!--End of Image QA Grid Layout-->\n<!--Image QOption Layout-->\n<div class=\"quml-mcq layoutImageOption\" *ngIf=\"layout=='IMAGEQOPTION'\">\n <div class=\"columnBlock questionBlock quml-mcq--question mb-16\">\n <quml-mcq-question [mcqQuestion]=\"mcqQuestion\" [layout]=\"layout\"></quml-mcq-question>\n </div>\n <div class=\"columnBlock quml-mcq--option\">\n <quml-mcq-option [mcqOptions]=\"options\" [replayed]=\"replayed\" [cardinality]=\"cardinality\"\n [solutions]=\"solutions\" [layout]=\"layout\" (optionSelected)=\"getSelectedOptionAndResult($event)\"\n [tryAgain]=\"tryAgain\" [numberOfCorrectOptions]=\"numberOfCorrectOptions\">\n </quml-mcq-option>\n </div>\n</div>\n\n<!--End of Image QOption Layout-->\n<quml-quml-popup *ngIf=\"showQumlPopup\" (popUpClose)=\"closePopUp()\"></quml-quml-popup>\n", styles: [".quml-mcq{padding:0}.quml-mcq .columnBlock{display:inline-block;min-width:12.5rem;padding:.25rem;min-height:12.5rem;vertical-align:top}.quml-mcq .questionBlock{max-width:17.1875rem;width:30%}.quml-mcq .quml-mcq--option{overflow-x:auto}.quml-mcq .image-grid{display:flex}.quml-mcq .image-grid .quml-mcq--question{flex-basis:25%}.quml-mcq .image-grid .quml-mcq--option{flex:1 1 75%}::ng-deep .layoutImageGrid-mcq-horizontal .quml-mcq--option .qumlImageOption .wrapper{grid-template-columns:repeat(4,1fr)}@media only screen and (min-width: 360px) and (max-width: 640px){::ng-deep .layoutImageGrid-mcq-horizontal .quml-mcq--option .qumlImageOption .wrapper{grid-template-columns:repeat(2,1fr)}}::ng-deep .layoutImageGrid-mcq-horizontal .quml-mcq-option-card .magnify-icon{width:1rem;height:1rem;right:-.25rem;bottom:-.25rem;border-top-left-radius:.4rem}::ng-deep .layoutImageGrid-mcq-horizontal .quml-mcq-option-card .magnify-icon:after{width:.75rem;height:.75rem;bottom:.0625rem;right:.0625rem}\n", ".answer{border:1px solid;padding:.2em;margin:.5em}.icon{width:15%;max-width:70px;min-width:50px;display:inline-block;vertical-align:top}.mcqText{display:inline-block;word-break:break-word}.mcq-option{background:var(--white);border-radius:5px;margin:8px 16px;padding:8px}.options{word-break:break-word;padding:15px 5px}.even,.odd{width:47%;display:inline-block;vertical-align:middle}.column-block{display:inline-block;width:48%;vertical-align:middle}.selected{background:var(--primary-color);color:var(--white);box-shadow:1px 2px 1px 3px var(--black)}.mathText{display:inline!important}.padding-top{padding-top:16px}@media only screen and (min-width: 100px) and (max-width: 481px){.mcqText{width:75%}.even,.odd{width:38%;display:inline-block;vertical-align:middle}.column-block{display:inline-block;width:42%;vertical-align:middle}}@media only screen and (min-width: 481px) and (max-width: 800px){.mcqText{width:85%}.even,.odd{width:43%;display:inline-block;vertical-align:middle}.column-block{display:inline-block;width:45%;vertical-align:middle}}@media only screen and (min-width: 801px) and (max-width: 1200px){.even,.odd{width:45%}.column-block{display:inline-block;width:45%;vertical-align:middle}}\n"] }]
}], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: UtilService }]; }, propDecorators: { shuffleOptions: [{
type: Input
}], question: [{
type: Input
}], identifier: [{
type: Input
}], layout: [{
type: Input
}], replayed: [{
type: Input
}], tryAgain: [{
type: Input
}], componentLoaded: [{
type: Output
}], answerChanged: [{
type: Output
}], optionSelected: [{
type: Output
}] } });
class SaComponent {
constructor(domSanitizer, utilService) {
this.domSanitizer = domSanitizer;
this.utilService = utilService;
this.componentLoaded = new EventEmitter();
this.showAnswerClicked = new EventEmitter();
this.showAnswer = false;
}
ngOnInit() {
this.question = this.questions?.body;
this.answer = this.questions?.answer;
this.solutions = _.isEmpty(this.questions?.solutions) ? null : this.questions?.solutions;
}
ngAfterViewInit() {
this.handleKeyboardAccessibility();
this.utilService.updateSourceOfVideoElement(this.baseUrl, this.questions?.media, this.questions.identifier);
}
ngOnChanges() {
if (this.replayed) {
this.showAnswer = false;
}
else if (this.questions?.isAnswerShown) {
this.showAnswer = true;
}
}
showAnswerToUser() {
this.showAnswer = true;
this.showAnswerClicked.emit({
showAnswer: this.showAnswer
});
}
onEnter(event) {
/* istanbul ignore else */
if (event.keyCode === 13) {
event.stopPropagation();
this.showAnswerToUser();
}
}
handleKeyboardAccessibility() {
const elements = Array.from(document.getElementsByClassName('option-body'));
elements.forEach((element) => {
/* istanbul ignore else */
if (element.offsetHeight) {
const children = Array.from(element.querySelectorAll("a"));
children.forEach((child) => {
child.setAttribute('tabindex', '-1');
});
}
});
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SaComponent, deps: [{ token: i1.DomSanitizer }, { token: UtilService }], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SaComponent, selector: "quml-sa", inputs: { questions: "questions", replayed: "replayed", baseUrl: "baseUrl" }, outputs: { componentLoaded: "componentLoaded", showAnswerClicked: "showAnswerClicked" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"quml-sa\">\n <div class=\"question-container\" tabindex=\"0\">\n <div class=\"sa-title\">Question</div>\n <div class=\"question\" [innerHTML]=\"question | safeHtml\"></div>\n </div>\n <div class=\"sa-button-container\">\n <div *ngIf=\"!showAnswer\" id=\"submit-answer\" tabindex=\"0\" class=\"sb-btn sb-btn-primary sb-btn-normal sb-btn-radius\"\n aria-label=\"Show Answer\" (click)=\"showAnswerToUser()\" (keydown)=\"onEnter($event)\">Show Answer</div>\n </div>\n <div id=\"answer-container\" [ngClass]=\"showAnswer ? 'option-container-blurred-out': 'option-container-blurred'\">\n <div class=\"sa-title\" [attr.aria-hidden]=\"showAnswer ? null : true\">Answer</div>\n <div class=\"option-body\" [innerHTML]=\"answer | safeHtml\" [attr.aria-hidden]=\"showAnswer ? null : true\"></div>\n <ng-container *ngIf=\"solutions\"> \n <div class=\"sa-title\" [attr.aria-hidden]=\"showAnswer ? null : true\">Solution</div>\n <div class=\"solutions\" *ngFor=\"let solution of solutions | keyvalue\" [attr.aria-hidden]=\"showAnswer ? null : true\">\n <div [innerHTML]=\"solution.value | safeHtml\" tabindex=\"-1\"></div>\n </div>\n </ng-container>\n </div>\n</div>", styles: [".sa-title{color:var(--primary-color);font-size:.875rem;font-weight:500;margin:16px 0;clear:both}.question-container{margin-top:2.5rem}.sa-button-container{text-align:center;margin-bottom:1rem;margin-top:1rem;clear:both}.option-container-blurred{filter:blur(.25rem);pointer-events:none;-webkit-user-select:none;user-select:none;clear:both}.option-container-blurred-out{filter:unset;transition:.4s;-webkit-user-select:text;user-select:text;pointer-events:auto}.solutions{clear:both}\n", ".answer{border:1px solid;padding:.2em;margin:.5em}.icon{width:15%;max-width:70px;min-width:50px;display:inline-block;vertical-align:top}.mcqText{display:inline-block;word-break:break-word}.mcq-option{background:var(--white);border-radius:5px;margin:8px 16px;padding:8px}.options{word-break:break-word;padding:15px 5px}.even,.odd{width:47%;display:inline-block;vertical-align:middle}.column-block{display:inline-block;width:48%;vertical-align:middle}.selected{background:var(--primary-color);color:var(--white);box-shadow:1px 2px 1px 3px var(--black)}.mathText{display:inline!important}.padding-top{padding-top:16px}@media only screen and (min-width: 100px) and (max-width: 481px){.mcqText{width:75%}.even,.odd{width:38%;display:inline-block;vertical-align:middle}.column-block{display:inline-block;width:42%;vertical-align:middle}}@media only screen and (min-width: 481px) and (max-width: 800px){.mcqText{width:85%}.even,.odd{width:43%;display:inline-block;vertical-align:middle}.column-block{display:inline-block;width:45%;vertical-align:middle}}@media only screen and (min-width: 801px) and (max-width: 1200px){.even,.odd{width:45%}.column-block{display:inline-block;width:45%;vertical-align:middle}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SaComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-sa', template: "<div class=\"quml-sa\">\n <div class=\"question-container\" tabindex=\"0\">\n <div class=\"sa-title\">Question</div>\n <div class=\"question\" [innerHTML]=\"question | safeHtml\"></div>\n </div>\n <div class=\"sa-button-container\">\n <div *ngIf=\"!showAnswer\" id=\"submit-answer\" tabindex=\"0\" class=\"sb-btn sb-btn-primary sb-btn-normal sb-btn-radius\"\n aria-label=\"Show Answer\" (click)=\"showAnswerToUser()\" (keydown)=\"onEnter($event)\">Show Answer</div>\n </div>\n <div id=\"answer-container\" [ngClass]=\"showAnswer ? 'option-container-blurred-out': 'option-container-blurred'\">\n <div class=\"sa-title\" [attr.aria-hidden]=\"showAnswer ? null : true\">Answer</div>\n <div class=\"option-body\" [innerHTML]=\"answer | safeHtml\" [attr.aria-hidden]=\"showAnswer ? null : true\"></div>\n <ng-container *ngIf=\"solutions\"> \n <div class=\"sa-title\" [attr.aria-hidden]=\"showAnswer ? null : true\">Solution</div>\n <div class=\"solutions\" *ngFor=\"let solution of solutions | keyvalue\" [attr.aria-hidden]=\"showAnswer ? null : true\">\n <div [innerHTML]=\"solution.value | safeHtml\" tabindex=\"-1\"></div>\n </div>\n </ng-container>\n </div>\n</div>", styles: [".sa-title{color:var(--primary-color);font-size:.875rem;font-weight:500;margin:16px 0;clear:both}.question-container{margin-top:2.5rem}.sa-button-container{text-align:center;margin-bottom:1rem;margin-top:1rem;clear:both}.option-container-blurred{filter:blur(.25rem);pointer-events:none;-webkit-user-select:none;user-select:none;clear:both}.option-container-blurred-out{filter:unset;transition:.4s;-webkit-user-select:text;user-select:text;pointer-events:auto}.solutions{clear:both}\n", ".answer{border:1px solid;padding:.2em;margin:.5em}.icon{width:15%;max-width:70px;min-width:50px;display:inline-block;vertical-align:top}.mcqText{display:inline-block;word-break:break-word}.mcq-option{background:var(--white);border-radius:5px;margin:8px 16px;padding:8px}.options{word-break:break-word;padding:15px 5px}.even,.odd{width:47%;display:inline-block;vertical-align:middle}.column-block{display:inline-block;width:48%;vertical-align:middle}.selected{background:var(--primary-color);color:var(--white);box-shadow:1px 2px 1px 3px var(--black)}.mathText{display:inline!important}.padding-top{padding-top:16px}@media only screen and (min-width: 100px) and (max-width: 481px){.mcqText{width:75%}.even,.odd{width:38%;display:inline-block;vertical-align:middle}.column-block{display:inline-block;width:42%;vertical-align:middle}}@media only screen and (min-width: 481px) and (max-width: 800px){.mcqText{width:85%}.even,.odd{width:43%;display:inline-block;vertical-align:middle}.column-block{display:inline-block;width:45%;vertical-align:middle}}@media only screen and (min-width: 801px) and (max-width: 1200px){.even,.odd{width:45%}.column-block{display:inline-block;width:45%;vertical-align:middle}}\n"] }]
}], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: UtilService }]; }, propDecorators: { questions: [{
type: Input
}], replayed: [{
type: Input
}], baseUrl: [{
type: Input
}], componentLoaded: [{
type: Output
}], showAnswerClicked: [{
type: Output
}] } });
class QuestionCursor {
}
class TransformationService {
getTransformedHierarchy(questionsetMetadata) {
let updatedMetadata = this.getTransformedQuestionSetMetadata(questionsetMetadata);
if (!_.isEmpty(updatedMetadata, 'children')) {
updatedMetadata.children = this.transformChildren(updatedMetadata.children);
}
return updatedMetadata;
}
getTransformedQuestionSetMetadata(data) {
data = this.processMaxScoreProperty(data);
data = _.omit(data, 'version');
data = this.processInstructions(data);
data = this.processBloomsLevel(data);
data = this.processBooleanProps(data);
data = this.processTimeLimits(data);
return data;
}
processMaxScoreProperty(data) {
if (_.has(data, 'maxScore')) {
const outcomeDeclaration = {
maxScore: {
cardinality: 'single',
type: 'integer',
defaultValue: data.maxScore
}
};
data = _.omit(data, 'maxScore');
data['outcomeDeclaration'] = outcomeDeclaration;
}
return data;
}
processInstructions(data) {
if (_.has(data, 'instructions.default')) {
data.instructions = data.instructions.default;
}
return data;
}
processBloomsLevel(data) {
if (_.has(data, 'bloomsLevel')) {
const bLevel = _.get(data, 'bloomsLevel');
_.unset(data, 'bloomsLevel');
_.set(data, 'complexityLevel', [bLevel.toString()]);
}
return data;
}
processBooleanProps(data) {
const booleanProps = ["showSolutions", "showFeedback", "showHints", "showTimer"];
const getBooleanValue = (str) => str === "Yes";
_.forEach(booleanProps, (prop) => {
if (_.has(data, prop)) {
const propVal = data[prop];
data[prop] = getBooleanValue(propVal);
}
});
return data;
}
processTimeLimits(data) {
let parsedTimeLimits;
if (_.has(data, 'timeLimits') && !_.isNull(data.timeLimits)) {
if (_.isString(data.timeLimits)) {
parsedTimeLimits = JSON.parse(data.timeLimits);
}
else {
parsedTimeLimits = data.timeLimits;
}
data.timeLimits = {
questionSet: {
min: 0,
max: parsedTimeLimits?.maxTime ? _.toInteger(parsedTimeLimits.maxTime) : 0
}
};
}
return data;
}
transformChildren(children) {
const self = this;
if (!_.isEmpty(children)) {
_.forEach(children, (ch) => {
if (_.has(ch, 'version')) {
_.unset(ch, 'version');
}
ch = this.processBloomsLevel(ch);
ch = this.processBooleanProps(ch);
if (_.get(ch, 'mimeType').toLowerCase() === 'application/vnd.sunbird.questionset') {
ch = this.processTimeLimits(ch);
ch = this.processInstructions(ch);
const nestedChildren = _.get(ch, 'children', []);
self.transformChildren(nestedChildren);
}
});
}
return children;
}
getTransformedQuestionMetadata(data) {
if (_.has(data, 'questions')) {
_.forEach(data.questions, (question) => {
if (!_.has(question, 'qumlVersion') || question.qumlVersion != 1.1) {
question = this.processResponseDeclaration(question);
question = this.processInteractions(question);
question = this.processSolutions(question);
question = this.processInstructions(question);
question = this.processHints(question);
question = this.processBloomsLevel(question);
question = this.processBooleanProps(question);
const ans = this.getAnswer(question);
if (!_.isEmpty(ans)) {
_.set(question, 'answer', ans);
}
}
});
return data;
}
}
processResponseDeclaration(data) {
let outcomeDeclaration = {};
if (_.isEqual(_.toLower(data.primaryCategory), 'subjective question')) {
data = this.processSubjectiveResponseDeclaration(data);
}
else {
let responseDeclaration = data.responseDeclaration;
if (!_.isEmpty(responseDeclaration)) {
for (const key in responseDeclaration) {
const responseData = responseDeclaration[key];
const maxScore = {
cardinality: _.get(responseData, 'cardinality', ''),
type: _.get(responseData, 'type', ''),
defaultValue: _.get(responseData, 'maxScore'),
};
delete responseData.maxScore;
outcomeDeclaration['maxScore'] = maxScore;
const correctResp = responseData.correctResponse || {};
delete correctResp.outcomes;
if (_.toLower(_.get(responseData, 'type')) === 'integer' && _.toLower(_.get(responseData, 'cardinality')) === 'single') {
const correctKey = correctResp.value;
correctResp.value = parseInt(correctKey, 10);
}
responseData.mapping = this.getUpdatedMapping(responseData);
responseDeclaration[key] = responseData;
}
data.responseDeclaration = responseDeclaration;
data['outcomeDeclaration'] = outcomeDeclaration;
}
}
return data;
}
processSubjectiveResponseDeclaration(subjectiveMetadata) {
let outcomeDeclaration = {};
delete subjectiveMetadata.responseDeclaration;
delete subjectiveMetadata.interactions;
if (_.has(subjectiveMetadata, 'maxScore') && !_.isNull(subjectiveMetadata.maxScore)) {
outcomeDeclaration = {
maxScore: {
cardinality: 'single',
type: 'integer',
defaultValue: subjectiveMetadata.maxScore
}
};
subjectiveMetadata.outcomeDeclaration = outcomeDeclaration;
return subjectiveMetadata;
}
return subjectiveMetadata;
}
getUpdatedMapping(responseData) {
const mappingData = responseData.mapping || [];
if (!_.isEmpty(mappingData)) {
const updatedMapping = mappingData.map(mapData => ({
value: mapData.response,
score: _.get(mapData, 'outcomes.score', 0),
}));
return updatedMapping;
}
return mappingData;
}
processInteractions(data) {
const interactions = _.get(data, 'interactions', {});
if (!_.isEmpty(interactions)) {
const validation = _.get(interactions, 'validation', {});
const resp1 = _.get(interactions, 'response1', {});
const resValData = _.get(interactions, 'response1.validation', {});
if (!_.isEmpty(resValData)) {
_.forEach(resValData, (value, key) => {
_.set(validation, key, value);
});
}
else {
_.set(resp1, 'validation', validation);
}
_.unset(interactions, 'validation');
_.set(interactions, 'response1', resp1);
_.set(data, 'interactions', interactions);
}
return data;
}
processSolutions(data) {
const solutions = _.get(data, 'solutions', []);
if (!_.isEmpty(solutions) && _.isArray(solutions)) {
const updatedSolutions = _.reduce(solutions, (result, solution) => {
result[_.get(solution, 'id')] = this.getSolutionString(solution, _.get(data, 'media', []));
return result;
}, {});
_.set(data, 'solutions', updatedSolutions);
}
return data;
}
getSolutionString(data, media) {
if (!_.isEmpty(data)) {
const type = _.get(data, 'type', '');
switch (type) {
case 'html': {
return _.get(data, 'value', '');
}
case 'video': {
const value = _.get(data, 'value', '');
const mediaData = _.find(media, (item) => _.isEqual(value, _.get(item, 'id', '')));
if (mediaData) {
const src = _.get(mediaData, 'src', '');
const thumbnail = _.get(mediaData, 'thumbnail', '');
const solutionStr = `<video data-asset-variable="media_identifier" width="400" controls poster="thumbnail_url">
<source type="video/mp4" src="media_source_url">
<source type="video/webm" src="media_source_url">
</video>`.replace('media_identifier', value).replace('thumbnail_url', thumbnail).replace(/media_source_url/g, src);
return solutionStr;
}
return '';
}
default: {
return '';
}
}
}
return '';
}
processHints(data) {
const hints = _.get(data, 'hints', []);
let updatedHints = {};
if (!_.isEmpty(hints)) {
_.forEach(hints, (hint) => {
_.merge(updatedHints, { [v4()]: hint });
});
_.set(data, 'hints', updatedHints);
}
return data;
}
getAnswer(data) {
const interactions = _.get(data, 'interactions', {});
if (!_.isEqual(_.get(data, 'primaryCategory'), 'Subjective Question') && !_.isEmpty(interactions)) {
const responseData = _.get(data, 'responseDeclaration.response1', {});
const options = _.get(interactions, 'response1.options', {});
let formatedAnswer = '';
let answerData = _.get(responseData, 'cardinality');
if (answerData === 'single') {
const correctResp = _.get(_.get(responseData, 'correctResponse', {}), 'value', 0);
const label = options[correctResp];
formatedAnswer = `<div class="answer-container"><div class="answer-body">${label.label}</div></div>`;
}
else {
const correctResp = _.get(responseData, 'correctResponse.value');
let singleAns = '<div class="answer-body">answer_html</div>';
const answerList = [];
_.forEach(options, (option) => {
if (_.includes(correctResp, option.value)) {
const replAns = _.replace(singleAns, 'answer_html', _.get(option, 'label'));
answerList.push(replAns);
}
});
formatedAnswer = `<div class="answer-container">${answerList.join('')}</div>`;
}
return formatedAnswer;
}
else {
return _.get(data, 'answer', '');
}
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TransformationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TransformationService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TransformationService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
class ViewerService {
constructor(qumlLibraryService, utilService, questionCursor, transformationService) {
this.qumlLibraryService = qumlLibraryService;
this.utilService = utilService;
this.questionCursor = questionCursor;
this.transformationService = transformationService;
this.qumlPlayerEvent = new EventEmitter();
this.qumlQuestionEvent = new EventEmitter();
this.version = '1.0';
this.timeSpent = '0:0';
this.isAvailableLocally = false;
this.isSectionsAvailable = false;
this.sectionQuestions = [];
}
initialize(config, threshold, questionIds, parentConfig) {
this.qumlLibraryService.initializeTelemetry(config, parentConfig);
this.identifiers = _.cloneDeep(questionIds);
this.parentIdentifier = config.metadata.identifier;
this.threshold = threshold;
this.rotation = 0;
this.totalNumberOfQuestions = config.metadata.childNodes.length || 0;
this.qumlPlayerStartTime = this.qumlPlayerLastPageTime = new Date().getTime();
this.currentQuestionIndex = 1;
this.contentName = config.metadata.name;
this.isAvailableLocally = parentConfig.isAvailableLocally;
this.isSectionsAvailable = parentConfig?.isSectionsAvailable;
this.src = config.metadata.artifactUrl || '';
this.questionSetId = config.metadata.identifier;
/* istanbul ignore else */
if (config?.context?.userData) {
const firstName = config.context.userData?.firstName ?? '';
const lastName = config.context.userData?.lastName ?? '';
this.userName = firstName + ' ' + lastName;
}
this.metaData = {
pagesHistory: [],
totalPages: 0,
duration: 0,
rotation: [],
progressBar: [],
questions: [],
questionIds: [],
lastQuestionId: '',
};
this.loadingProgress = 0;
this.endPageSeen = false;
}
raiseStartEvent(currentQuestionIndex) {
this.currentQuestionIndex = currentQuestionIndex;
const duration = new Date().getTime() - this.qumlPlayerStartTime;
const startEvent = {
eid: 'START',
ver: this.version,
edata: {
type: 'START',
currentIndex: this.currentQuestionIndex,
duration
},
metaData: this.metaData
};
this.qumlPlayerEvent.emit(startEvent);
this.qumlPlayerLastPageTime = this.qumlPlayerStartTime = new Date().getTime();
this.qumlLibraryService.start(duration);
}
raiseEndEvent(currentQuestionIndex, endPageSeen, score) {
this.metaData.questions = this.sectionQuestions;
const duration = new Date().getTime() - this.qumlPlayerStartTime;
const endEvent = {
eid: 'END',
ver: this.version,
edata: {
type: 'END',
currentPage: currentQuestionIndex,
totalPages: this.totalNumberOfQuestions,
duration
},
metaData: this.metaData
};
this.qumlPlayerEvent.emit(endEvent);
this.timeSpent = this.utilService.getTimeSpentText(this.qumlPlayerStartTime);
this.qumlLibraryService.end(duration, currentQuestionIndex, this.totalNumberOfQuestions, this.totalNumberOfQuestions, endPageSeen, score);
}
raiseHeartBeatEvent(type, telemetryType, pageId, nextContentId) {
const hearBeatEvent = {
eid: 'HEARTBEAT',
ver: this.version,
edata: {
type,
questionIndex: this.currentQuestionIndex,
},
metaData: this.metaData
};
if (type === eventName.nextContentPlay && nextContentId) {
hearBeatEvent.edata.nextContentId = nextContentId;
}
if (this.isSectionsAvailable) {
hearBeatEvent.edata.sectionId = this.questionSetId;
}
this.qumlPlayerEvent.emit(hearBeatEvent);
if (TelemetryType.interact === telemetryType) {
this.qumlLibraryService.interact(type.toLowerCase(), pageId);
}
else if (TelemetryType.impression === telemetryType) {
this.qumlLibraryService.impression(pageId);
}
}
raiseAssesEvent(questionData, index, pass, score, resValues, duration) {
const assessEvent = {
item: questionData,
index: index,
pass: pass,
score: score,
resvalues: resValues,
duration: duration
};
this.qumlPlayerEvent.emit(assessEvent);
this.qumlLibraryService.startAssesEvent(assessEvent);
}
raiseResponseEvent(identifier, qType, optionSelected) {
const responseEvent = {
target: {
id: identifier,
ver: this.version,
type: qType
},
values: [{
optionSelected
}]
};
this.qumlPlayerEvent.emit(responseEvent);
this.qumlLibraryService.response(identifier, this.version, qType, optionSelected);
}
raiseSummaryEvent(currentQuestionIndex, endpageseen, score, summaryObj) {
let timespent = new Date().getTime() - this.qumlPlayerStartTime;
timespent = Number(((timespent % 60000) / 1000).toFixed(2));
const eData = {
type: "content",
mode: "play",
starttime: this.qumlPlayerStartTime,
endtime: new Date().getTime(),
timespent,
pageviews: this.totalNumberOfQuestions,
interactions: summaryObj.correct + summaryObj.wrong + summaryObj.partial,
extra: [{
id: "progress",
value: ((currentQuestionIndex / this.totalNumberOfQuestions) * 100).toFixed(0).toString()
}, {
id: "endpageseen",
value: endpageseen.toString()
}, {
id: "score",
value: score.toString()
}, {
id: "correct",
value: summaryObj.correct.toString()
}, {
id: "incorrect",
value: summaryObj.wrong.toString()
}, {
id: "partial",
value: summaryObj.partial.toString()
}, {
id: "skipped",
value: summaryObj.skipped.toString()
}]
};
const summaryEvent = {
eid: 'QUML_SUMMARY',
ver: this.version,
edata: eData,
metaData: this.metaData
};
this.qumlPlayerEvent.emit(summaryEvent);
this.qumlLibraryService.summary(eData);
}
raiseExceptionLog(errorCode, errorType, stacktrace, traceId) {
const exceptionLogEvent = {
eid: "ERROR",
edata: {
err: errorCode,
errtype: errorType,
requestid: traceId || '',
stacktrace: stacktrace || '',
}
};
this.qumlPlayerEvent.emit(exceptionLogEvent);
this.qumlLibraryService.error(stacktrace, { err: errorCode, errtype: errorType });
}
getSectionQuestionData(sectionChildren, questionIdArr) {
const availableQuestions = [];
let questionsIdNotHavingCompleteData = [];
if (_.isEmpty(sectionChildren)) {
questionsIdNotHavingCompleteData = questionIdArr;
}
else {
const foundQuestions = sectionChildren.filter(child => questionIdArr.includes(child.identifier));
for (const question of foundQuestions) {
if (_.has(question, 'body')) {
availableQuestions.push(question);
}
else {
questionsIdNotHavingCompleteData.push(question.identifier);
}
}
}
if (!_.isEmpty(questionsIdNotHavingCompleteData)) {
return this.fetchIncompleteQuestionsData(availableQuestions, questionsIdNotHavingCompleteData);
}
else {
const allQuestions$ = of({ questions: availableQuestions, count: availableQuestions.length });
return allQuestions$;
}
}
fetchIncompleteQuestionsData(availableQuestions, questionsIdNotHavingCompleteData) {
return this.questionCursor.getQuestions(questionsIdNotHavingCompleteData, this.parentIdentifier).pipe(switchMap((questionData) => {
const fetchedQuestions = questionData.questions;
const allQuestions = _.concat(availableQuestions, fetchedQuestions);
return of({ questions: allQuestions, count: allQuestions.length });
}));
}
getQuestions(currentIndex, index) {
const sectionChildren = this.sectionConfig?.metadata?.children;
let indentifersForQuestions;
if (currentIndex !== undefined && index) {
indentifersForQuestions = this.identifiers.splice(currentIndex, index);
}
else if (!currentIndex && !index) {
indentifersForQuestions = this.identifiers.splice(0, this.threshold);
}
if (!_.isEmpty(indentifersForQuestions)) {
let requests;
const chunkArray = _.chunk(indentifersForQuestions, 10);
_.forEach(chunkArray, (value) => {
requests = this.getSectionQuestionData(sectionChildren, value);
});
forkJoin(requests).subscribe(questions => {
_.forEach(questions, (value) => {
const transformedquestionsList = this.transformationService.getTransformedQuestionMetadata(value);
this.qumlQuestionEvent.emit(transformedquestionsList);
});
}, (error) => {
this.qumlQuestionEvent.emit({
error: error
});
});
}
}
getQuestion() {
const sectionChildren = this.sectionConfig?.metadata?.children;
if (this.identifiers.length) {
let questionIdentifier = this.identifiers.splice(0, this.threshold);
const fetchedQuestion = _.find(sectionChildren, (question) => _.includes(questionIdentifier, question.identifier));
if (_.has(fetchedQuestion, 'body')) {
const fetchedQuestionData = { questions: [fetchedQuestion], count: 1 };
const transformedquestionsList = this.transformationService.getTransformedQuestionMetadata(fetchedQuestionData);
this.qumlQuestionEvent.emit(transformedquestionsList);
}
else {
this.questionCursor.getQuestion(questionIdentifier[0]).subscribe((question) => {
const fetchedQuestionData = question;
const transformedquestionsList = this.transformationService.getTransformedQuestionMetadata(fetchedQuestionData);
this.qumlQuestionEvent.emit(transformedquestionsList);
}, (error) => {
this.qumlQuestionEvent.emit({
error: error
});
});
}
}
}
generateMaxAttemptEvents(currentattempt, maxLimitExceeded, isLastAttempt) {
return {
eid: 'exdata',
ver: this.version,
edata: {
type: 'exdata',
currentattempt,
maxLimitExceeded,
isLastAttempt
},
metaData: this.metaData
};
}
updateSectionQuestions(id, questions) {
const index = this.sectionQuestions.findIndex(section => section.id === id);
if (index > -1) {
this.sectionQuestions[index].questions = questions;
}
else {
this.sectionQuestions.push({ id, questions });
}
}
getSectionQuestions(id) {
return this.sectionQuestions.find(section => section.id === id)?.questions || [];
}
pauseVideo() {
const videoElements = Array.from(document.getElementsByTagName('video'));
videoElements.forEach((element) => element.pause());
const audioElements = Array.from(document.getElementsByTagName('audio'));
audioElements.forEach((element) => element.pause());
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewerService, deps: [{ token: QumlLibraryService }, { token: UtilService }, { token: QuestionCursor }, { token: TransformationService }], target: i0.ɵɵFactoryTarget.Injectable }); }
/** @nocollapse */ static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewerService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ViewerService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return [{ type: QumlLibraryService }, { type: UtilService }, { type: QuestionCursor }, { type: TransformationService }]; } });
class AnsComponent {
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AnsComponent, selector: "quml-ans", ngImport: i0, template: "<svg tabindex=\"0\" width=\"25px\" height=\"25px\" viewBox=\"0 0 25 25\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>ans</title>\n <g id=\"Symbols\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"ans\">\n <circle id=\"Oval\" stroke=\"#979797\" cx=\"12.0235\" cy=\"12.0235\" r=\"11.5235\"></circle>\n <path d=\"M5.9515,14.5235 L6.3675,13.1635 L8.4475,13.1635 L8.8635,14.5235 L10.1675,14.5235 L8.1435,8.7875 L6.6635,8.7875 L4.6475,14.5235 L5.9515,14.5235 Z M8.1595,12.1475 L6.6715,12.1475 L7.0795,10.8195 C7.10083333,10.7608333 7.1315,10.6608333 7.1715,10.5195 C7.2115,10.3781667 7.25416667,10.2288333 7.2995,10.0715 C7.34483333,9.91416667 7.38083333,9.78216667 7.4075,9.6755 C7.43416667,9.78216667 7.46883333,9.9075 7.5115,10.0515 C7.55416667,10.1955 7.59683333,10.3368333 7.6395,10.4755 C7.68216667,10.6141667 7.71683333,10.7288333 7.7435,10.8195 L7.7435,10.8195 L8.1595,12.1475 Z M11.9835,14.5235 L11.9835,12.4675 C11.9835,12.0035 12.0501667,11.6475 12.1835,11.3995 C12.3168333,11.1515 12.5648333,11.0275 12.9275,11.0275 C13.1728333,11.0275 13.3515,11.1061667 13.4635,11.2635 C13.5755,11.4208333 13.6315,11.6568333 13.6315,11.9715 L13.6315,11.9715 L13.6315,14.5235 L14.8235,14.5235 L14.8235,11.6755 C14.8235,11.1155 14.6821667,10.7088333 14.3995,10.4555 C14.1168333,10.2021667 13.7408333,10.0755 13.2715,10.0755 C12.9995,10.0755 12.7421667,10.1261667 12.4995,10.2275 C12.2568333,10.3288333 12.0661667,10.4915 11.9275,10.7155 L11.9275,10.7155 L11.8635,10.7155 L11.7035,10.1555 L10.7915,10.1555 L10.7915,14.5235 L11.9835,14.5235 Z M17.2315,14.6035 C17.8501667,14.6035 18.3155,14.4848333 18.6275,14.2475 C18.9395,14.0101667 19.0955,13.6701667 19.0955,13.2275 C19.0955,12.9715 19.0461667,12.7608333 18.9475,12.5955 C18.8488333,12.4301667 18.7088333,12.2928333 18.5275,12.1835 C18.3461667,12.0741667 18.1301667,11.9688333 17.8795,11.8675 C17.6235,11.7608333 17.4301667,11.6755 17.2995,11.6115 C17.1688333,11.5475 17.0808333,11.4875 17.0355,11.4315 C16.9901667,11.3755 16.9675,11.3128333 16.9675,11.2435 C16.9675,11.0515 17.1435,10.9555 17.4955,10.9555 C17.6928333,10.9555 17.8875,10.9861667 18.0795,11.0475 C18.2715,11.1088333 18.4741667,11.1848333 18.6875,11.2755 L18.6875,11.2755 L19.0475,10.4195 C18.7861667,10.2968333 18.5328333,10.2088333 18.2875,10.1555 C18.0421667,10.1021667 17.7835,10.0755 17.5115,10.0755 C16.9888333,10.0755 16.5701667,10.1768333 16.2555,10.3795 C15.9408333,10.5821667 15.7835,10.8861667 15.7835,11.2915 C15.7835,11.5368333 15.8261667,11.7408333 15.9115,11.9035 C15.9968333,12.0661667 16.1261667,12.2048333 16.2995,12.3195 C16.4728333,12.4341667 16.6981667,12.5501667 16.9755,12.6675 C17.2581667,12.7848333 17.4661667,12.8808333 17.5995,12.9555 C17.7328333,13.0301667 17.8195,13.0968333 17.8595,13.1555 C17.8995,13.2141667 17.9195,13.2808333 17.9195,13.3555 C17.9195,13.4675 17.8688333,13.5581667 17.7675,13.6275 C17.6661667,13.6968333 17.5008333,13.7315 17.2715,13.7315 C17.0635,13.7315 16.8235,13.6968333 16.5515,13.6275 C16.2795,13.5581667 16.0261667,13.4701667 15.7915,13.3635 L15.7915,13.3635 L15.7915,14.3475 C16.0101667,14.4381667 16.2288333,14.5035 16.4475,14.5435 C16.6661667,14.5835 16.9275,14.6035 17.2315,14.6035 Z\" id=\"Ans\" fill=\"#6D7278\" fill-rule=\"nonzero\"></path>\n </g>\n </g>\n</svg>" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AnsComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-ans', template: "<svg tabindex=\"0\" width=\"25px\" height=\"25px\" viewBox=\"0 0 25 25\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>ans</title>\n <g id=\"Symbols\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"ans\">\n <circle id=\"Oval\" stroke=\"#979797\" cx=\"12.0235\" cy=\"12.0235\" r=\"11.5235\"></circle>\n <path d=\"M5.9515,14.5235 L6.3675,13.1635 L8.4475,13.1635 L8.8635,14.5235 L10.1675,14.5235 L8.1435,8.7875 L6.6635,8.7875 L4.6475,14.5235 L5.9515,14.5235 Z M8.1595,12.1475 L6.6715,12.1475 L7.0795,10.8195 C7.10083333,10.7608333 7.1315,10.6608333 7.1715,10.5195 C7.2115,10.3781667 7.25416667,10.2288333 7.2995,10.0715 C7.34483333,9.91416667 7.38083333,9.78216667 7.4075,9.6755 C7.43416667,9.78216667 7.46883333,9.9075 7.5115,10.0515 C7.55416667,10.1955 7.59683333,10.3368333 7.6395,10.4755 C7.68216667,10.6141667 7.71683333,10.7288333 7.7435,10.8195 L7.7435,10.8195 L8.1595,12.1475 Z M11.9835,14.5235 L11.9835,12.4675 C11.9835,12.0035 12.0501667,11.6475 12.1835,11.3995 C12.3168333,11.1515 12.5648333,11.0275 12.9275,11.0275 C13.1728333,11.0275 13.3515,11.1061667 13.4635,11.2635 C13.5755,11.4208333 13.6315,11.6568333 13.6315,11.9715 L13.6315,11.9715 L13.6315,14.5235 L14.8235,14.5235 L14.8235,11.6755 C14.8235,11.1155 14.6821667,10.7088333 14.3995,10.4555 C14.1168333,10.2021667 13.7408333,10.0755 13.2715,10.0755 C12.9995,10.0755 12.7421667,10.1261667 12.4995,10.2275 C12.2568333,10.3288333 12.0661667,10.4915 11.9275,10.7155 L11.9275,10.7155 L11.8635,10.7155 L11.7035,10.1555 L10.7915,10.1555 L10.7915,14.5235 L11.9835,14.5235 Z M17.2315,14.6035 C17.8501667,14.6035 18.3155,14.4848333 18.6275,14.2475 C18.9395,14.0101667 19.0955,13.6701667 19.0955,13.2275 C19.0955,12.9715 19.0461667,12.7608333 18.9475,12.5955 C18.8488333,12.4301667 18.7088333,12.2928333 18.5275,12.1835 C18.3461667,12.0741667 18.1301667,11.9688333 17.8795,11.8675 C17.6235,11.7608333 17.4301667,11.6755 17.2995,11.6115 C17.1688333,11.5475 17.0808333,11.4875 17.0355,11.4315 C16.9901667,11.3755 16.9675,11.3128333 16.9675,11.2435 C16.9675,11.0515 17.1435,10.9555 17.4955,10.9555 C17.6928333,10.9555 17.8875,10.9861667 18.0795,11.0475 C18.2715,11.1088333 18.4741667,11.1848333 18.6875,11.2755 L18.6875,11.2755 L19.0475,10.4195 C18.7861667,10.2968333 18.5328333,10.2088333 18.2875,10.1555 C18.0421667,10.1021667 17.7835,10.0755 17.5115,10.0755 C16.9888333,10.0755 16.5701667,10.1768333 16.2555,10.3795 C15.9408333,10.5821667 15.7835,10.8861667 15.7835,11.2915 C15.7835,11.5368333 15.8261667,11.7408333 15.9115,11.9035 C15.9968333,12.0661667 16.1261667,12.2048333 16.2995,12.3195 C16.4728333,12.4341667 16.6981667,12.5501667 16.9755,12.6675 C17.2581667,12.7848333 17.4661667,12.8808333 17.5995,12.9555 C17.7328333,13.0301667 17.8195,13.0968333 17.8595,13.1555 C17.8995,13.2141667 17.9195,13.2808333 17.9195,13.3555 C17.9195,13.4675 17.8688333,13.5581667 17.7675,13.6275 C17.6661667,13.6968333 17.5008333,13.7315 17.2715,13.7315 C17.0635,13.7315 16.8235,13.6968333 16.5515,13.6275 C16.2795,13.5581667 16.0261667,13.4701667 15.7915,13.3635 L15.7915,13.3635 L15.7915,14.3475 C16.0101667,14.4381667 16.2288333,14.5035 16.4475,14.5435 C16.6661667,14.5835 16.9275,14.6035 17.2315,14.6035 Z\" id=\"Ans\" fill=\"#6D7278\" fill-rule=\"nonzero\"></path>\n </g>\n </g>\n</svg>" }]
}] });
class DurationtimerComponent {
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DurationtimerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DurationtimerComponent, selector: "quml-durationtimer", ngImport: i0, template: "<svg width=\"10px\" height=\"16px\" viewBox=\"0 0 10 16\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>Shape</title>\n <g id=\"Symbols\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"timer/active\" transform=\"translate(-8.000000, -2.000000)\" fill=\"#6D7278\">\n <path d=\"M8,2 L8,6.8 L8.008,6.8 L8,6.808 L11.2,10 L8,13.2 L8.008,13.208 L8,13.208 L8,18 L17.6,18 L17.6,13.208 L17.592,13.208 L17.6,13.2 L14.4,10 L17.6,6.808 L17.592,6.8 L17.6,6.8 L17.6,2 L8,2 L8,2 Z M16,13.6 L16,16.4 L9.6,16.4 L9.6,13.6 L12.8,10.4 L16,13.6 L16,13.6 Z M12.8,9.6 L9.6,6.4 L9.6,3.6 L16,3.6 L16,6.4 L12.8,9.6 L12.8,9.6 Z\" id=\"Shape\"></path>\n </g>\n </g>\n</svg>" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DurationtimerComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-durationtimer', template: "<svg width=\"10px\" height=\"16px\" viewBox=\"0 0 10 16\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>Shape</title>\n <g id=\"Symbols\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"timer/active\" transform=\"translate(-8.000000, -2.000000)\" fill=\"#6D7278\">\n <path d=\"M8,2 L8,6.8 L8.008,6.8 L8,6.808 L11.2,10 L8,13.2 L8.008,13.208 L8,13.208 L8,18 L17.6,18 L17.6,13.208 L17.592,13.208 L17.6,13.2 L14.4,10 L17.6,6.808 L17.592,6.8 L17.6,6.8 L17.6,2 L8,2 L8,2 Z M16,13.6 L16,16.4 L9.6,16.4 L9.6,13.6 L12.8,10.4 L16,13.6 L16,13.6 Z M12.8,9.6 L9.6,6.4 L9.6,3.6 L16,3.6 L16,6.4 L12.8,9.6 L12.8,9.6 Z\" id=\"Shape\"></path>\n </g>\n </g>\n</svg>" }]
}] });
class ProgressIndicatorsComponent {
constructor() {
this.close = new EventEmitter();
this.indicators = [
{
iconText: '1',
title: 'Correct',
class: 'correct'
},
{
iconText: '1',
title: 'Incorrect',
class: 'incorrect'
},
{
iconText: '1',
title: 'Attempted',
class: 'attempted'
},
{
iconText: '1',
title: 'Not viewed',
class: ''
},
{
iconText: '1',
title: 'Skipped',
class: 'skipped'
},
{
iconText: '1',
title: 'Current',
class: 'current'
},
{
iconText: 'i',
title: 'Info page',
class: ''
},
{
iconText: '<img src="./assets/flag_active.svg" alt="Flag logo: Show scoreboard">',
title: 'Summary page',
class: ''
}
];
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressIndicatorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ProgressIndicatorsComponent, selector: "quml-progress-indicators", outputs: { close: "close" }, ngImport: i0, template: "<div class=\"progress-indicators\">\n <div class=\"progress-indicators__overlay\">\n <div class=\"progress-indicators__popup\" aria-modal=\"true\">\n <div class=\"close-btn\" (click)=\"close.emit(true)\">\n <button type=\"button\" id=\"close\" class=\"close-icon\" data-animation=\"showShadow\"\n aria-label=\"player-close-btn\"></button>\n </div>\n <div class=\"progress-indicators__metadata\">\n <h5 class=\"progress-indicators__title text-left\">Progress bar indicators</h5>\n <div class=\"progress-indicators__content\">\n <div class=\"progress-indicators__item\" *ngFor=\"let item of indicators\">\n <span class=\"default\" [ngClass]=\"item.class ? item.class : ''\" [innerHtml]=\"item.iconText\"></span>\n <p>{{item.title}}</p>\n </div>\n </div>\n <div class=\"progress-indicators__action-btns\">\n <button type=\"button\" class=\"sb-btn sb-btn-normal sb-btn-primary sb-btn-radius submit-btn\"\n (click)=\"close.emit(true)\">Close</button>\n </div>\n </div>\n </div>\n </div>\n</div>", styles: [":host .progress-indicators{width:100%;height:100%;position:absolute;top:0;left:0;z-index:99;transition:all .3s;opacity:1}:host .progress-indicators__overlay{width:100%;height:100%;background:rgba(var(--rc-rgba-black),.5);display:flex;align-items:center;justify-content:center;transition:all .3s}:host .progress-indicators__popup{width:90%;max-width:22.5rem;min-height:13.125rem;background:var(--white);border-radius:1rem;box-shadow:0 0 1.5em rgba(var(--rc-rgba-black),.22);padding:1.5rem;position:relative;transition:all .3s ease-in;transform:scale(.5);transform:scale(1)}:host .progress-indicators__close-btn{position:absolute;top:.75rem;right:.75rem;width:1.5rem;height:1.5rem;cursor:pointer}:host .progress-indicators__close-btn img{max-width:100%}:host .progress-indicators__metadata{display:flex;flex-direction:column;height:100%}:host .progress-indicators__title{font-size:1rem;font-weight:700;line-height:1.375rem;word-break:break-word}:host .progress-indicators__content{display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}:host .progress-indicators__content div{width:50%}:host .progress-indicators__item{display:flex;align-items:center;justify-content:flex-start;margin-bottom:1rem}:host .progress-indicators__item p{padding-left:8px;margin:0}:host .progress-indicators__text{color:var(--gray-400);word-break:break-word}:host .progress-indicators__size{color:var(--black)}:host .progress-indicators__text,:host .progress-indicators__size{font-size:.875rem;line-height:1.25rem}:host .progress-indicators__title,:host .progress-indicators__text,:host .progress-indicators__size{margin:0 0 1.5em}:host .progress-indicators__action-btns{display:flex;align-items:center;justify-content:flex-end}:host .progress-indicators__action-btns .cancel-btn,:host .progress-indicators__action-btns .submit-btn{outline:none;border:none;font-size:.75rem;text-transform:uppercase;cursor:pointer;line-height:normal}:host .progress-indicators .close-btn{position:absolute;top:.75rem;right:.75rem}:host .progress-indicators .close-btn .close-icon{width:1.875rem;height:1.875rem;background:0 0;border-radius:50%;cursor:pointer;display:flex;justify-content:center;align-items:center;padding:0}:host .progress-indicators .close-btn .close-icon:after{content:\"\";transform:rotate(-45deg)}:host .progress-indicators .close-btn .close-icon:before{content:\"\";transform:rotate(45deg)}:host .progress-indicators .close-btn .close-icon:after,:host .progress-indicators .close-btn .close-icon:before{content:\"\";width:1.25rem;height:.125rem;position:absolute;background-color:var(--black)}:host .progress-indicators .close-btn .close-icon[data-animation=showShadow]{box-shadow:0 0 0 0 var(--red) inset;transition:.2s cubic-bezier(.175,.885,.52,1.775);border:0px solid var(--white)}:host .progress-indicators .close-btn .close-icon[data-animation=showShadow]:before{transition:.2s cubic-bezier(.175,.885,.52,1.775)}:host .progress-indicators .close-btn .close-icon[data-animation=showShadow]:after{transition:.2s cubic-bezier(.175,.885,.52,1.775)}:host .progress-indicators .close-btn .close-icon[data-animation=showShadow]:not(.showShadow):hover{box-shadow:0 0 0 .25rem var(--red) inset}:host .progress-indicators .close-btn .close-icon[data-animation=showShadow]:not(.showShadow):hover:before{transform:scale(.7) rotate(45deg);transition-delay:.1s;background-color:var(--red)}:host .progress-indicators .close-btn .close-icon[data-animation=showShadow]:not(.showShadow):hover:after{transform:scale(.7) rotate(-45deg);transition-delay:.1s;background-color:var(--red)}:host .default{background-color:var(--quml-question-bg);border-radius:50%;width:1.25rem;padding:.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center;border:.0625rem solid #ccc;font-size:.8rem;font-weight:700;line-height:1.6rem}:host .correct{--correct-bg: var(--quml-color-success);background:var(--correct-bg);color:var(--white);border:0 solid transparent}:host .incorrect{--wrong-bg: var(--quml-color-danger);background:var(--wrong-bg);color:var(--white);border:0 solid transparent}:host .skipped{color:var(--white);background:var(--quml-scoreboard-skipped);border:.0625rem solid var(--quml-scoreboard-skipped)}:host .current{color:var(--primary-color);border:.0625rem solid var(--primary-color)}:host .current:after{border:1px solid var(--primary-color);content:\"\";width:1.65rem;height:1.65rem;border-radius:50%;padding:.25rem;position:absolute}:host .attempted{color:var(--white);background:var(--primary-color)}::ng-deep html[dir=rtl] .close-btn{left:.75rem;right:auto}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ProgressIndicatorsComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-progress-indicators', template: "<div class=\"progress-indicators\">\n <div class=\"progress-indicators__overlay\">\n <div class=\"progress-indicators__popup\" aria-modal=\"true\">\n <div class=\"close-btn\" (click)=\"close.emit(true)\">\n <button type=\"button\" id=\"close\" class=\"close-icon\" data-animation=\"showShadow\"\n aria-label=\"player-close-btn\"></button>\n </div>\n <div class=\"progress-indicators__metadata\">\n <h5 class=\"progress-indicators__title text-left\">Progress bar indicators</h5>\n <div class=\"progress-indicators__content\">\n <div class=\"progress-indicators__item\" *ngFor=\"let item of indicators\">\n <span class=\"default\" [ngClass]=\"item.class ? item.class : ''\" [innerHtml]=\"item.iconText\"></span>\n <p>{{item.title}}</p>\n </div>\n </div>\n <div class=\"progress-indicators__action-btns\">\n <button type=\"button\" class=\"sb-btn sb-btn-normal sb-btn-primary sb-btn-radius submit-btn\"\n (click)=\"close.emit(true)\">Close</button>\n </div>\n </div>\n </div>\n </div>\n</div>", styles: [":host .progress-indicators{width:100%;height:100%;position:absolute;top:0;left:0;z-index:99;transition:all .3s;opacity:1}:host .progress-indicators__overlay{width:100%;height:100%;background:rgba(var(--rc-rgba-black),.5);display:flex;align-items:center;justify-content:center;transition:all .3s}:host .progress-indicators__popup{width:90%;max-width:22.5rem;min-height:13.125rem;background:var(--white);border-radius:1rem;box-shadow:0 0 1.5em rgba(var(--rc-rgba-black),.22);padding:1.5rem;position:relative;transition:all .3s ease-in;transform:scale(.5);transform:scale(1)}:host .progress-indicators__close-btn{position:absolute;top:.75rem;right:.75rem;width:1.5rem;height:1.5rem;cursor:pointer}:host .progress-indicators__close-btn img{max-width:100%}:host .progress-indicators__metadata{display:flex;flex-direction:column;height:100%}:host .progress-indicators__title{font-size:1rem;font-weight:700;line-height:1.375rem;word-break:break-word}:host .progress-indicators__content{display:flex;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}:host .progress-indicators__content div{width:50%}:host .progress-indicators__item{display:flex;align-items:center;justify-content:flex-start;margin-bottom:1rem}:host .progress-indicators__item p{padding-left:8px;margin:0}:host .progress-indicators__text{color:var(--gray-400);word-break:break-word}:host .progress-indicators__size{color:var(--black)}:host .progress-indicators__text,:host .progress-indicators__size{font-size:.875rem;line-height:1.25rem}:host .progress-indicators__title,:host .progress-indicators__text,:host .progress-indicators__size{margin:0 0 1.5em}:host .progress-indicators__action-btns{display:flex;align-items:center;justify-content:flex-end}:host .progress-indicators__action-btns .cancel-btn,:host .progress-indicators__action-btns .submit-btn{outline:none;border:none;font-size:.75rem;text-transform:uppercase;cursor:pointer;line-height:normal}:host .progress-indicators .close-btn{position:absolute;top:.75rem;right:.75rem}:host .progress-indicators .close-btn .close-icon{width:1.875rem;height:1.875rem;background:0 0;border-radius:50%;cursor:pointer;display:flex;justify-content:center;align-items:center;padding:0}:host .progress-indicators .close-btn .close-icon:after{content:\"\";transform:rotate(-45deg)}:host .progress-indicators .close-btn .close-icon:before{content:\"\";transform:rotate(45deg)}:host .progress-indicators .close-btn .close-icon:after,:host .progress-indicators .close-btn .close-icon:before{content:\"\";width:1.25rem;height:.125rem;position:absolute;background-color:var(--black)}:host .progress-indicators .close-btn .close-icon[data-animation=showShadow]{box-shadow:0 0 0 0 var(--red) inset;transition:.2s cubic-bezier(.175,.885,.52,1.775);border:0px solid var(--white)}:host .progress-indicators .close-btn .close-icon[data-animation=showShadow]:before{transition:.2s cubic-bezier(.175,.885,.52,1.775)}:host .progress-indicators .close-btn .close-icon[data-animation=showShadow]:after{transition:.2s cubic-bezier(.175,.885,.52,1.775)}:host .progress-indicators .close-btn .close-icon[data-animation=showShadow]:not(.showShadow):hover{box-shadow:0 0 0 .25rem var(--red) inset}:host .progress-indicators .close-btn .close-icon[data-animation=showShadow]:not(.showShadow):hover:before{transform:scale(.7) rotate(45deg);transition-delay:.1s;background-color:var(--red)}:host .progress-indicators .close-btn .close-icon[data-animation=showShadow]:not(.showShadow):hover:after{transform:scale(.7) rotate(-45deg);transition-delay:.1s;background-color:var(--red)}:host .default{background-color:var(--quml-question-bg);border-radius:50%;width:1.25rem;padding:.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center;border:.0625rem solid #ccc;font-size:.8rem;font-weight:700;line-height:1.6rem}:host .correct{--correct-bg: var(--quml-color-success);background:var(--correct-bg);color:var(--white);border:0 solid transparent}:host .incorrect{--wrong-bg: var(--quml-color-danger);background:var(--wrong-bg);color:var(--white);border:0 solid transparent}:host .skipped{color:var(--white);background:var(--quml-scoreboard-skipped);border:.0625rem solid var(--quml-scoreboard-skipped)}:host .current{color:var(--primary-color);border:.0625rem solid var(--primary-color)}:host .current:after{border:1px solid var(--primary-color);content:\"\";width:1.65rem;height:1.65rem;border-radius:50%;padding:.25rem;position:absolute}:host .attempted{color:var(--white);background:var(--primary-color)}::ng-deep html[dir=rtl] .close-btn{left:.75rem;right:auto}\n"] }]
}], propDecorators: { close: [{
type: Output
}] } });
class HeaderComponent {
constructor(viewerService) {
this.viewerService = viewerService;
this.showDeviceOrientation = false;
this.nextSlideClicked = new EventEmitter();
this.prevSlideClicked = new EventEmitter();
this.durationEnds = new EventEmitter();
this.showSolution = new EventEmitter();
this.toggleScreenRotate = new EventEmitter();
this.showWarning = false;
this.isMobilePortrait = false;
this.showProgressIndicatorPopUp = false;
}
ngOnInit() {
if (this.duration && this.showTimer) {
this.minutes = Math.floor(this.duration / 60);
this.seconds = this.duration - this.minutes * 60 < 10 ? `0${this.duration - this.minutes * 60}` : this.duration - this.minutes * 60;
}
}
ngOnChanges() {
if (this.duration && this.showTimer && this.initializeTimer && !this.intervalRef) {
this.timer();
}
else if (this.duration === 0 && this.showTimer && this.initializeTimer && !this.intervalRef) {
this.showCountUp();
}
if (this.replayed && this.duration && this.showTimer) {
this.showWarning = false;
clearInterval(this.intervalRef);
this.timer();
}
else if (this.replayed && this.duration === 0 && this.showTimer) {
clearInterval(this.intervalRef);
this.showCountUp();
}
}
ngAfterViewInit() {
this.isMobilePortrait = window.matchMedia("(max-width: 480px)").matches;
}
ngOnDestroy() {
if (this.intervalRef) {
clearInterval(this.intervalRef);
}
}
nextSlide() {
if (!this.disableNext) {
this.nextSlideClicked.emit({ type: 'next' });
}
}
prevSlide() {
if (!this.showStartPage && this.currentSlideIndex === 1) {
return;
}
if (!this.disablePreviousNavigation) {
this.prevSlideClicked.emit({ event: 'previous clicked' });
}
}
timer() {
/* istanbul ignore else */
if (this.duration > 0) {
let durationInSec = this.duration;
this.intervalRef = setInterval(() => {
let min = ~~(durationInSec / 60);
let sec = (durationInSec % 60);
if (sec < 10) {
this.time = min + ':' + '0' + sec;
}
else {
this.time = min + ':' + sec;
}
if (durationInSec === 0) {
clearInterval(this.intervalRef);
this.durationEnds.emit(true);
return false;
}
/* istanbul ignore else */
if (parseInt(durationInSec) <= parseInt(this.warningTime) && this.showWarningTimer) {
this.showWarning = true;
}
durationInSec--;
}, 1000);
}
}
showCountUp() {
let min = 0;
let sec = 0;
this.intervalRef = setInterval(() => {
if (sec === 59) {
sec = 0;
min = min + 1;
}
if (sec < 10) {
this.time = min + ':' + '0' + sec++;
}
else {
this.time = min + ':' + sec++;
}
}, 1000);
}
onAnswerKeyDown(event) {
/* istanbul ignore else */
if (event.key === 'Enter') {
event.stopPropagation();
this.showSolution.emit();
}
}
openProgressIndicatorPopup() {
this.showProgressIndicatorPopUp = true;
this.viewerService.raiseHeartBeatEvent(eventName.progressIndicatorPopupOpened, TelemetryType.interact, this.currentSlideIndex);
}
onKeydownHandler(event) {
this.onProgressPopupClose();
}
onProgressPopupClose() {
this.showProgressIndicatorPopUp = false;
this.viewerService.raiseHeartBeatEvent(eventName.progressIndicatorPopupClosed, TelemetryType.interact, this.currentSlideIndex);
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderComponent, deps: [{ token: ViewerService }], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HeaderComponent, selector: "quml-header", inputs: { questions: "questions", duration: "duration", warningTime: "warningTime", showWarningTimer: "showWarningTimer", disablePreviousNavigation: "disablePreviousNavigation", showTimer: "showTimer", totalNoOfQuestions: "totalNoOfQuestions", currentSlideIndex: "currentSlideIndex", active: "active", initializeTimer: "initializeTimer", endPageReached: "endPageReached", loadScoreBoard: "loadScoreBoard", replayed: "replayed", currentSolutions: "currentSolutions", showFeedBack: "showFeedBack", disableNext: "disableNext", startPageInstruction: "startPageInstruction", showStartPage: "showStartPage", attempts: "attempts", showDeviceOrientation: "showDeviceOrientation", showLegend: "showLegend" }, outputs: { nextSlideClicked: "nextSlideClicked", prevSlideClicked: "prevSlideClicked", durationEnds: "durationEnds", showSolution: "showSolution", toggleScreenRotate: "toggleScreenRotate" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, usesOnChanges: true, ngImport: i0, template: "<div class=\"quml-header__container\">\n <div class=\"quml-header__features pl-64\">\n <div *ngIf=\"attempts?.max && attempts?.current\" class=\"attempts sb-color-primary fnormal font-weight-bold\">\n Attempt no {{attempts.current}}/{{attempts.max}}</div>\n <img src=\"assets/question-mark-round.svg\" *ngIf=\"showLegend\" alt=\"Progress Indicators\" title=\"Progress Indicators\" height=\"20\" width=\"20\" (click)=\"openProgressIndicatorPopup()\">\n </div>\n\n <div class=\"quml-header__metadata\">\n <img src=\"assets/device-rotate.svg\" alt=\"Change Orientation\" title=\"Change Orientation\" height=\"20\" width=\"20\" *ngIf=\"showDeviceOrientation\" (click)=\"toggleScreenRotate.emit()\">\n <ng-container *ngIf=\"duration && showTimer\">\n <div class=\"duration mr-16\" title=\"{{minutes}}:{{seconds}}\" *ngIf=\"!initializeTimer\">\n <quml-durationtimer></quml-durationtimer>\n <span>{{minutes}}:{{seconds}}</span>\n </div>\n <div class=\"duration mr-16\" title=\"{{minutes}}:{{seconds}}\" *ngIf=\"initializeTimer && time\">\n <quml-durationtimer></quml-durationtimer>\n <span [ngClass]=\"{'blink': showWarning}\">{{time}}</span>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!duration && showTimer && initializeTimer\">\n <div class=\"duration mr-16\" title=\"{{minutes}}:{{seconds}}\">\n <quml-durationtimer></quml-durationtimer>\n <span>{{time}}</span>\n </div>\n </ng-container>\n\n <div class=\"quml-navigation\" *ngIf=\"!disableNext && !isMobilePortrait\">\n <div class=\"quml-navigation__previous\" (click)=\"prevSlide()\" aria-label=\"preview slide\" title=\"preview slide\"\n role=\"navigation\"\n [ngClass]=\"(startPageInstruction && currentSlideIndex === 0) || (!showStartPage && currentSlideIndex === 1) ? 'navigation-icon-disabled': '' \"\n [attr.tabindex]=\"(startPageInstruction && currentSlideIndex === 0) || (!showStartPage && currentSlideIndex === 1) ? -1 : 0\">\n </div>\n <div class=\"quml-navigation__next ml-8\" (click)=\"nextSlide()\" (keydown.enter)=\"$event.stopPropagation();nextSlide()\"\n aria-label=\"next slide\" title=\"next slide\" *ngIf=\"!active\" role=\"navigation\"\n [ngClass]=\"disableNext ? 'navigation-icon-disabled': '' \" tabindex=\"0\"></div>\n <div class=\"quml-navigation__next quml-navigation__next--active ml-8\" (click)=\"nextSlide()\"\n (keydown.enter)=\"$event.stopPropagation();nextSlide()\" aria-label=\"next slide\" title=\"next slide\" *ngIf=\"active\" role=\"navigation\"\n [ngClass]=\"disableNext ? 'navigation-icon-disabled': '' \" tabindex=\"0\"></div>\n </div>\n\n </div>\n</div>\n\n<div class=\"quml-header__metadata quml-header__metadata--portrait\" *ngIf=\"!loadScoreBoard && !endPageReached\">\n <div class=\"current-slide fnormal\" *ngIf=\"currentSlideIndex\">{{currentSlideIndex}}/{{totalNoOfQuestions}}</div>\n <div class=\"ml-16\" *ngIf=\"currentSolutions && showFeedBack\">\n <quml-ans (click)=\"showSolution.emit()\" (keydown)=\"onAnswerKeyDown($event)\"></quml-ans>\n </div>\n <div class=\"quml-navigation ml-auto\">\n <div class=\"quml-navigation__previous\" tabindex=\"0\" (click)=\"prevSlide()\" (keydown.enter)=\"prevSlide()\"\n aria-label=\"preview slide\"></div>\n <div class=\"quml-navigation__next ml-8\" tabindex=\"0\" (click)=\"nextSlide()\" (keydown.enter)=\"nextSlide()\"\n *ngIf=\"!active\" aria-label=\"next slide\"></div>\n <div class=\"quml-navigation__next quml-navigation__next--active ml-8\" tabindex=\"0\" (click)=\"nextSlide()\"\n (keydown.enter)=\"nextSlide()\" *ngIf=\"active\" aria-label=\"next slide\"></div>\n </div>\n\n</div>\n\n<quml-progress-indicators *ngIf=\"showProgressIndicatorPopUp\" (close)=\"onProgressPopupClose()\"></quml-progress-indicators>", styles: ["::ng-deep :root{--quml-color-primary: #FFD555;--quml-color-primary-contrast:#333;--quml-color-warning: #ff0000;--quml-btn-border: #ccc;--quml-color-gray: #666;--quml-main-bg: #fff;--quml-navigation-btns:#333;--quml-header-metadata: #fff}.quml-header__container,.quml-header__features,.quml-header__metadata{display:flex;align-items:center}.quml-header__container{justify-content:space-between;position:absolute;top:0;background:var(--quml-main-bg);min-height:3.5rem;width:100%;padding:.5rem 1rem .5rem 0;z-index:8}.quml-header__features{justify-content:space-between}.quml-header__features img,.quml-header__metadata img{margin:0 1rem;cursor:pointer}.quml-header__metadata--portrait{display:none}@media only screen and (max-width: 480px){.quml-header__metadata--portrait{display:flex;position:fixed;bottom:0;width:100%;padding:.5rem 1rem;background-color:var(--white);z-index:5;min-height:3rem}.quml-header__metadata--portrait .quml-navigation{display:flex}}.quml-navigation{display:flex;align-items:center}@media only screen and (max-width: 480px){.quml-navigation{display:none}}.quml-navigation__next,.quml-navigation__previous{position:relative;width:3.75rem;height:2.25rem;background:var(--quml-header-metadata);border:.03125rem solid var(--quml-btn-border);border-radius:1rem;box-shadow:inset 0 -.09375rem .0625rem #0003;cursor:pointer}.quml-navigation__next:after,.quml-navigation__previous:after{content:\"\";display:inline-block;padding:.21875rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:solid var(--quml-navigation-btns);border-width:0 .125rem .125rem 0}.quml-navigation__next:hover,.quml-navigation__next--active,.quml-navigation__next:focus,.quml-navigation__previous:hover,.quml-navigation__previous--active,.quml-navigation__previous:focus{background-color:var(--quml-color-primary)}.quml-navigation__next:after{transform:translate(-50%,-50%) rotate(-45deg);-webkit-transform:translate(-50%,-50%) rotate(-45deg)}.quml-navigation__previous:after{transform:translate(-50%,-50%) rotate(135deg);-webkit-transform:translate(-50%,-50%) rotate(135deg)}.blink{animation:blink 1s steps(1,end) infinite;color:var(--quml-color-warning)}.duration,quml-durationtimer{display:flex;align-items:center}.duration{color:var(--quml-color-primary-contrast);font-weight:700}quml-durationtimer{margin-right:.5rem}.current-slide{color:var(--quml-color-gray);font-weight:700}.navigation-icon-disabled{opacity:.6;cursor:not-allowed}@keyframes blink{0%{opacity:1}50%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: AnsComponent, selector: "quml-ans" }, { kind: "component", type: DurationtimerComponent, selector: "quml-durationtimer" }, { kind: "component", type: ProgressIndicatorsComponent, selector: "quml-progress-indicators", outputs: ["close"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HeaderComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-header', template: "<div class=\"quml-header__container\">\n <div class=\"quml-header__features pl-64\">\n <div *ngIf=\"attempts?.max && attempts?.current\" class=\"attempts sb-color-primary fnormal font-weight-bold\">\n Attempt no {{attempts.current}}/{{attempts.max}}</div>\n <img src=\"assets/question-mark-round.svg\" *ngIf=\"showLegend\" alt=\"Progress Indicators\" title=\"Progress Indicators\" height=\"20\" width=\"20\" (click)=\"openProgressIndicatorPopup()\">\n </div>\n\n <div class=\"quml-header__metadata\">\n <img src=\"assets/device-rotate.svg\" alt=\"Change Orientation\" title=\"Change Orientation\" height=\"20\" width=\"20\" *ngIf=\"showDeviceOrientation\" (click)=\"toggleScreenRotate.emit()\">\n <ng-container *ngIf=\"duration && showTimer\">\n <div class=\"duration mr-16\" title=\"{{minutes}}:{{seconds}}\" *ngIf=\"!initializeTimer\">\n <quml-durationtimer></quml-durationtimer>\n <span>{{minutes}}:{{seconds}}</span>\n </div>\n <div class=\"duration mr-16\" title=\"{{minutes}}:{{seconds}}\" *ngIf=\"initializeTimer && time\">\n <quml-durationtimer></quml-durationtimer>\n <span [ngClass]=\"{'blink': showWarning}\">{{time}}</span>\n </div>\n </ng-container>\n <ng-container *ngIf=\"!duration && showTimer && initializeTimer\">\n <div class=\"duration mr-16\" title=\"{{minutes}}:{{seconds}}\">\n <quml-durationtimer></quml-durationtimer>\n <span>{{time}}</span>\n </div>\n </ng-container>\n\n <div class=\"quml-navigation\" *ngIf=\"!disableNext && !isMobilePortrait\">\n <div class=\"quml-navigation__previous\" (click)=\"prevSlide()\" aria-label=\"preview slide\" title=\"preview slide\"\n role=\"navigation\"\n [ngClass]=\"(startPageInstruction && currentSlideIndex === 0) || (!showStartPage && currentSlideIndex === 1) ? 'navigation-icon-disabled': '' \"\n [attr.tabindex]=\"(startPageInstruction && currentSlideIndex === 0) || (!showStartPage && currentSlideIndex === 1) ? -1 : 0\">\n </div>\n <div class=\"quml-navigation__next ml-8\" (click)=\"nextSlide()\" (keydown.enter)=\"$event.stopPropagation();nextSlide()\"\n aria-label=\"next slide\" title=\"next slide\" *ngIf=\"!active\" role=\"navigation\"\n [ngClass]=\"disableNext ? 'navigation-icon-disabled': '' \" tabindex=\"0\"></div>\n <div class=\"quml-navigation__next quml-navigation__next--active ml-8\" (click)=\"nextSlide()\"\n (keydown.enter)=\"$event.stopPropagation();nextSlide()\" aria-label=\"next slide\" title=\"next slide\" *ngIf=\"active\" role=\"navigation\"\n [ngClass]=\"disableNext ? 'navigation-icon-disabled': '' \" tabindex=\"0\"></div>\n </div>\n\n </div>\n</div>\n\n<div class=\"quml-header__metadata quml-header__metadata--portrait\" *ngIf=\"!loadScoreBoard && !endPageReached\">\n <div class=\"current-slide fnormal\" *ngIf=\"currentSlideIndex\">{{currentSlideIndex}}/{{totalNoOfQuestions}}</div>\n <div class=\"ml-16\" *ngIf=\"currentSolutions && showFeedBack\">\n <quml-ans (click)=\"showSolution.emit()\" (keydown)=\"onAnswerKeyDown($event)\"></quml-ans>\n </div>\n <div class=\"quml-navigation ml-auto\">\n <div class=\"quml-navigation__previous\" tabindex=\"0\" (click)=\"prevSlide()\" (keydown.enter)=\"prevSlide()\"\n aria-label=\"preview slide\"></div>\n <div class=\"quml-navigation__next ml-8\" tabindex=\"0\" (click)=\"nextSlide()\" (keydown.enter)=\"nextSlide()\"\n *ngIf=\"!active\" aria-label=\"next slide\"></div>\n <div class=\"quml-navigation__next quml-navigation__next--active ml-8\" tabindex=\"0\" (click)=\"nextSlide()\"\n (keydown.enter)=\"nextSlide()\" *ngIf=\"active\" aria-label=\"next slide\"></div>\n </div>\n\n</div>\n\n<quml-progress-indicators *ngIf=\"showProgressIndicatorPopUp\" (close)=\"onProgressPopupClose()\"></quml-progress-indicators>", styles: ["::ng-deep :root{--quml-color-primary: #FFD555;--quml-color-primary-contrast:#333;--quml-color-warning: #ff0000;--quml-btn-border: #ccc;--quml-color-gray: #666;--quml-main-bg: #fff;--quml-navigation-btns:#333;--quml-header-metadata: #fff}.quml-header__container,.quml-header__features,.quml-header__metadata{display:flex;align-items:center}.quml-header__container{justify-content:space-between;position:absolute;top:0;background:var(--quml-main-bg);min-height:3.5rem;width:100%;padding:.5rem 1rem .5rem 0;z-index:8}.quml-header__features{justify-content:space-between}.quml-header__features img,.quml-header__metadata img{margin:0 1rem;cursor:pointer}.quml-header__metadata--portrait{display:none}@media only screen and (max-width: 480px){.quml-header__metadata--portrait{display:flex;position:fixed;bottom:0;width:100%;padding:.5rem 1rem;background-color:var(--white);z-index:5;min-height:3rem}.quml-header__metadata--portrait .quml-navigation{display:flex}}.quml-navigation{display:flex;align-items:center}@media only screen and (max-width: 480px){.quml-navigation{display:none}}.quml-navigation__next,.quml-navigation__previous{position:relative;width:3.75rem;height:2.25rem;background:var(--quml-header-metadata);border:.03125rem solid var(--quml-btn-border);border-radius:1rem;box-shadow:inset 0 -.09375rem .0625rem #0003;cursor:pointer}.quml-navigation__next:after,.quml-navigation__previous:after{content:\"\";display:inline-block;padding:.21875rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border:solid var(--quml-navigation-btns);border-width:0 .125rem .125rem 0}.quml-navigation__next:hover,.quml-navigation__next--active,.quml-navigation__next:focus,.quml-navigation__previous:hover,.quml-navigation__previous--active,.quml-navigation__previous:focus{background-color:var(--quml-color-primary)}.quml-navigation__next:after{transform:translate(-50%,-50%) rotate(-45deg);-webkit-transform:translate(-50%,-50%) rotate(-45deg)}.quml-navigation__previous:after{transform:translate(-50%,-50%) rotate(135deg);-webkit-transform:translate(-50%,-50%) rotate(135deg)}.blink{animation:blink 1s steps(1,end) infinite;color:var(--quml-color-warning)}.duration,quml-durationtimer{display:flex;align-items:center}.duration{color:var(--quml-color-primary-contrast);font-weight:700}quml-durationtimer{margin-right:.5rem}.current-slide{color:var(--quml-color-gray);font-weight:700}.navigation-icon-disabled{opacity:.6;cursor:not-allowed}@keyframes blink{0%{opacity:1}50%{opacity:0}to{opacity:1}}\n"] }]
}], ctorParameters: function () { return [{ type: ViewerService }]; }, propDecorators: { questions: [{
type: Input
}], duration: [{
type: Input
}], warningTime: [{
type: Input
}], showWarningTimer: [{
type: Input
}], disablePreviousNavigation: [{
type: Input
}], showTimer: [{
type: Input
}], totalNoOfQuestions: [{
type: Input
}], currentSlideIndex: [{
type: Input
}], active: [{
type: Input
}], initializeTimer: [{
type: Input
}], endPageReached: [{
type: Input
}], loadScoreBoard: [{
type: Input
}], replayed: [{
type: Input
}], currentSolutions: [{
type: Input
}], showFeedBack: [{
type: Input
}], disableNext: [{
type: Input
}], startPageInstruction: [{
type: Input
}], showStartPage: [{
type: Input
}], attempts: [{
type: Input
}], showDeviceOrientation: [{
type: Input
}], showLegend: [{
type: Input
}], nextSlideClicked: [{
type: Output
}], prevSlideClicked: [{
type: Output
}], durationEnds: [{
type: Output
}], showSolution: [{
type: Output
}], toggleScreenRotate: [{
type: Output
}], onKeydownHandler: [{
type: HostListener,
args: ['document:keydown.escape', ['$event']]
}] } });
class ZoomInComponent {
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ZoomInComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ZoomInComponent, selector: "quml-zoom-in", ngImport: i0, template: "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n width=\"12px\" height=\"12px\" viewBox=\"0 0 512 512\" style=\"enable-background:new 0 0 512 512;\" xml:space=\"preserve\">\n<g>\n\t<g>\n\t\t<path d=\"M506.141,477.851L361.689,333.399c65.814-80.075,61.336-198.944-13.451-273.73c-79.559-79.559-209.01-79.559-288.569,0\n\t\t\ts-79.559,209.01,0,288.569c74.766,74.766,193.62,79.293,273.73,13.451l144.452,144.452c7.812,7.812,20.477,7.812,28.289,0\n\t\t\tC513.953,498.328,513.953,485.663,506.141,477.851z M319.949,319.948c-63.96,63.96-168.03,63.959-231.99,0\n\t\t\tc-63.96-63.96-63.96-168.03,0-231.99c63.958-63.957,168.028-63.962,231.99,0C383.909,151.918,383.909,255.988,319.949,319.948z\"/>\n\t</g>\n</g>\n<g>\n\t<g>\n\t\t<path d=\"M301.897,183.949h-77.94v-77.94c0-11.048-8.956-20.004-20.004-20.004c-11.048,0-20.004,8.956-20.004,20.004v77.94h-77.94\n\t\t\tc-11.048,0-20.004,8.956-20.004,20.004c0,11.048,8.956,20.004,20.004,20.004h77.94v77.94c0,11.048,8.956,20.004,20.004,20.004\n\t\t\tc11.048,0,20.004-8.956,20.004-20.004v-77.94h77.94c11.048,0,20.004-8.956,20.004-20.004\n\t\t\tC321.901,192.905,312.945,183.949,301.897,183.949z\"/>\n\t</g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n</svg>\n" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ZoomInComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-zoom-in', template: "<svg version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n width=\"12px\" height=\"12px\" viewBox=\"0 0 512 512\" style=\"enable-background:new 0 0 512 512;\" xml:space=\"preserve\">\n<g>\n\t<g>\n\t\t<path d=\"M506.141,477.851L361.689,333.399c65.814-80.075,61.336-198.944-13.451-273.73c-79.559-79.559-209.01-79.559-288.569,0\n\t\t\ts-79.559,209.01,0,288.569c74.766,74.766,193.62,79.293,273.73,13.451l144.452,144.452c7.812,7.812,20.477,7.812,28.289,0\n\t\t\tC513.953,498.328,513.953,485.663,506.141,477.851z M319.949,319.948c-63.96,63.96-168.03,63.959-231.99,0\n\t\t\tc-63.96-63.96-63.96-168.03,0-231.99c63.958-63.957,168.028-63.962,231.99,0C383.909,151.918,383.909,255.988,319.949,319.948z\"/>\n\t</g>\n</g>\n<g>\n\t<g>\n\t\t<path d=\"M301.897,183.949h-77.94v-77.94c0-11.048-8.956-20.004-20.004-20.004c-11.048,0-20.004,8.956-20.004,20.004v77.94h-77.94\n\t\t\tc-11.048,0-20.004,8.956-20.004,20.004c0,11.048,8.956,20.004,20.004,20.004h77.94v77.94c0,11.048,8.956,20.004,20.004,20.004\n\t\t\tc11.048,0,20.004-8.956,20.004-20.004v-77.94h77.94c11.048,0,20.004-8.956,20.004-20.004\n\t\t\tC321.901,192.905,312.945,183.949,301.897,183.949z\"/>\n\t</g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n<g>\n</g>\n</svg>\n" }]
}] });
class StarComponent {
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StarComponent, selector: "quml-star", ngImport: i0, template: "<svg width=\"18px\" height=\"19px\" viewBox=\"0 0 20 19\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>Star</title>\n <defs>\n <linearGradient x1=\"50%\" y1=\"0%\" x2=\"50%\" y2=\"100%\" id=\"linearGradient-1\">\n <stop stop-color=\"#FFE500\" offset=\"0%\"></stop>\n <stop stop-color=\"#E6B302\" offset=\"100%\"></stop>\n </linearGradient>\n </defs>\n <g id=\"Symbols\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"M9.52906513,1.05447851 C9.88447433,0.933955771 10.2858614,0.949017066 10.6489852,1.12822939 C10.9381809,1.27095597 11.1722611,1.50503624 11.3149877,1.79423187 L11.3149877,1.79423187 L12.3803318,3.95285472 C12.8901488,4.98585688 13.8756284,5.70184969 15.0156139,5.86749929 L15.0156139,5.86749929 L17.3977957,6.21365056 C17.7985266,6.27188017 18.1377182,6.4870255 18.3621696,6.78779616 C18.586621,7.08856682 18.6963323,7.47496281 18.6381027,7.87569375 C18.591728,8.19484007 18.4414393,8.48979843 18.2105028,8.71490584 L18.2105028,8.71490584 L16.4867399,10.3951594 C15.6618386,11.1992394 15.2854189,12.3577401 15.4801517,13.4931194 L15.4801517,13.4931194 L15.8870769,15.8656755 C15.9555299,16.2647872 15.8557305,16.6538611 15.6390399,16.9602703 C15.4223493,17.2666796 15.0887676,17.4904241 14.6896558,17.5588771 C14.3717991,17.6133938 14.0448352,17.5616079 13.7593821,17.4115363 L13.7593821,17.4115363 L11.6286939,16.2913672 C10.6090599,15.7553139 9.39094014,15.7553139 8.37130605,16.2913672 L8.37130605,16.2913672 L6.24061792,17.4115363 C5.88219327,17.5999712 5.48132228,17.6252868 5.12294871,17.5138875 C4.76457514,17.4024881 4.44869898,17.1543739 4.26026399,16.7959492 C4.11019239,16.5104961 4.0584064,16.1835322 4.1129231,15.8656755 L4.1129231,15.8656755 L4.51984832,13.4931194 C4.7145811,12.3577401 4.33816141,11.1992394 3.51326011,10.3951594 L3.51326011,10.3951594 L1.7894972,8.71490584 C1.49952557,8.43225335 1.35157308,8.05882533 1.34677662,7.68356752 C1.34198016,7.3083097 1.48033973,6.93122211 1.76299222,6.64125047 C1.98809962,6.41031402 2.28305798,6.26002523 2.6022043,6.21365056 L2.6022043,6.21365056 L4.98438605,5.86749929 C6.12437162,5.70184969 7.10985117,4.98585688 7.61966822,3.95285472 L7.61966822,3.95285472 L8.68501228,1.79423187 C8.86422461,1.43110804 9.17365593,1.17500126 9.52906513,1.05447851 Z\"\n id=\"Star\" stroke=\"#EDBA01\" fill=\"url(#linearGradient-1)\"></path>\n </g>\n</svg>" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StarComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-star', template: "<svg width=\"18px\" height=\"19px\" viewBox=\"0 0 20 19\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>Star</title>\n <defs>\n <linearGradient x1=\"50%\" y1=\"0%\" x2=\"50%\" y2=\"100%\" id=\"linearGradient-1\">\n <stop stop-color=\"#FFE500\" offset=\"0%\"></stop>\n <stop stop-color=\"#E6B302\" offset=\"100%\"></stop>\n </linearGradient>\n </defs>\n <g id=\"Symbols\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"M9.52906513,1.05447851 C9.88447433,0.933955771 10.2858614,0.949017066 10.6489852,1.12822939 C10.9381809,1.27095597 11.1722611,1.50503624 11.3149877,1.79423187 L11.3149877,1.79423187 L12.3803318,3.95285472 C12.8901488,4.98585688 13.8756284,5.70184969 15.0156139,5.86749929 L15.0156139,5.86749929 L17.3977957,6.21365056 C17.7985266,6.27188017 18.1377182,6.4870255 18.3621696,6.78779616 C18.586621,7.08856682 18.6963323,7.47496281 18.6381027,7.87569375 C18.591728,8.19484007 18.4414393,8.48979843 18.2105028,8.71490584 L18.2105028,8.71490584 L16.4867399,10.3951594 C15.6618386,11.1992394 15.2854189,12.3577401 15.4801517,13.4931194 L15.4801517,13.4931194 L15.8870769,15.8656755 C15.9555299,16.2647872 15.8557305,16.6538611 15.6390399,16.9602703 C15.4223493,17.2666796 15.0887676,17.4904241 14.6896558,17.5588771 C14.3717991,17.6133938 14.0448352,17.5616079 13.7593821,17.4115363 L13.7593821,17.4115363 L11.6286939,16.2913672 C10.6090599,15.7553139 9.39094014,15.7553139 8.37130605,16.2913672 L8.37130605,16.2913672 L6.24061792,17.4115363 C5.88219327,17.5999712 5.48132228,17.6252868 5.12294871,17.5138875 C4.76457514,17.4024881 4.44869898,17.1543739 4.26026399,16.7959492 C4.11019239,16.5104961 4.0584064,16.1835322 4.1129231,15.8656755 L4.1129231,15.8656755 L4.51984832,13.4931194 C4.7145811,12.3577401 4.33816141,11.1992394 3.51326011,10.3951594 L3.51326011,10.3951594 L1.7894972,8.71490584 C1.49952557,8.43225335 1.35157308,8.05882533 1.34677662,7.68356752 C1.34198016,7.3083097 1.48033973,6.93122211 1.76299222,6.64125047 C1.98809962,6.41031402 2.28305798,6.26002523 2.6022043,6.21365056 L2.6022043,6.21365056 L4.98438605,5.86749929 C6.12437162,5.70184969 7.10985117,4.98585688 7.61966822,3.95285472 L7.61966822,3.95285472 L8.68501228,1.79423187 C8.86422461,1.43110804 9.17365593,1.17500126 9.52906513,1.05447851 Z\"\n id=\"Star\" stroke=\"#EDBA01\" fill=\"url(#linearGradient-1)\"></path>\n </g>\n</svg>" }]
}] });
class PreviousComponent {
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PreviousComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PreviousComponent, selector: "quml-previous", ngImport: i0, template: "<svg width=\"60px\" height=\"36px\" viewBox=\"0 0 60 36\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>Previous</title>\n <defs>\n <rect id=\"path-1\" x=\"0\" y=\"0\" width=\"60\" height=\"36\" rx=\"18\"></rect>\n <filter x=\"-5.8%\" y=\"-9.7%\" width=\"111.7%\" height=\"119.4%\" filterUnits=\"objectBoundingBox\" id=\"filter-2\">\n <feGaussianBlur stdDeviation=\"3\" in=\"SourceAlpha\" result=\"shadowBlurInner1\"></feGaussianBlur>\n <feOffset dx=\"0\" dy=\"1\" in=\"shadowBlurInner1\" result=\"shadowOffsetInner1\"></feOffset>\n <feComposite in=\"shadowOffsetInner1\" in2=\"SourceAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\" result=\"shadowInnerInner1\"></feComposite>\n <feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0\" type=\"matrix\" in=\"shadowInnerInner1\"></feColorMatrix>\n </filter>\n <rect id=\"path-3\" x=\"0\" y=\"0\" width=\"54\" height=\"30\" rx=\"15\"></rect>\n <filter x=\"-2.8%\" y=\"-5.0%\" width=\"105.6%\" height=\"110.0%\" filterUnits=\"objectBoundingBox\" id=\"filter-4\">\n <feGaussianBlur stdDeviation=\"0.5\" in=\"SourceGraphic\"></feGaussianBlur>\n </filter>\n <filter x=\"-5.6%\" y=\"-10.0%\" width=\"111.1%\" height=\"120.0%\" filterUnits=\"objectBoundingBox\" id=\"filter-5\">\n <feGaussianBlur stdDeviation=\"1\" in=\"SourceAlpha\" result=\"shadowBlurInner1\"></feGaussianBlur>\n <feOffset dx=\"0\" dy=\"-1\" in=\"shadowBlurInner1\" result=\"shadowOffsetInner1\"></feOffset>\n <feComposite in=\"shadowOffsetInner1\" in2=\"SourceAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\" result=\"shadowInnerInner1\"></feComposite>\n <feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0\" type=\"matrix\" in=\"shadowInnerInner1\"></feColorMatrix>\n </filter>\n </defs>\n <g id=\"button/previous2\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"Group\">\n <g id=\"Group-Copy\">\n <g id=\"Rectangle-5-Copy\" opacity=\"0.1\" fill-rule=\"nonzero\">\n <use fill=\"#CCCCCC\" xlink:href=\"#path-1\"></use>\n <use fill=\"black\" fill-opacity=\"1\" filter=\"url(#filter-2)\" xlink:href=\"#path-1\"></use>\n </g>\n <g id=\"Group-2\" transform=\"translate(3.000000, 3.000000)\">\n <g id=\"Rectangle-5-Copy-2\" fill-rule=\"nonzero\" filter=\"url(#filter-4)\">\n <use fill=\"#FFFFFF\" xlink:href=\"#path-3\"></use>\n <use fill=\"black\" fill-opacity=\"1\" filter=\"url(#filter-5)\" xlink:href=\"#path-3\"></use>\n </g>\n <polygon id=\"Shape\" fill=\"#6D7278\" points=\"31 10.41 29.59 9 23.59 15 29.59 21 31 19.59 26.42 15\"></polygon>\n </g>\n </g>\n <g id=\"Icon-24px\" transform=\"translate(30.000000, 18.000000) scale(-1, 1) translate(-30.000000, -18.000000) translate(26.000000, 12.000000)\"></g>\n </g>\n </g>\n</svg>" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PreviousComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-previous', template: "<svg width=\"60px\" height=\"36px\" viewBox=\"0 0 60 36\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>Previous</title>\n <defs>\n <rect id=\"path-1\" x=\"0\" y=\"0\" width=\"60\" height=\"36\" rx=\"18\"></rect>\n <filter x=\"-5.8%\" y=\"-9.7%\" width=\"111.7%\" height=\"119.4%\" filterUnits=\"objectBoundingBox\" id=\"filter-2\">\n <feGaussianBlur stdDeviation=\"3\" in=\"SourceAlpha\" result=\"shadowBlurInner1\"></feGaussianBlur>\n <feOffset dx=\"0\" dy=\"1\" in=\"shadowBlurInner1\" result=\"shadowOffsetInner1\"></feOffset>\n <feComposite in=\"shadowOffsetInner1\" in2=\"SourceAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\" result=\"shadowInnerInner1\"></feComposite>\n <feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0\" type=\"matrix\" in=\"shadowInnerInner1\"></feColorMatrix>\n </filter>\n <rect id=\"path-3\" x=\"0\" y=\"0\" width=\"54\" height=\"30\" rx=\"15\"></rect>\n <filter x=\"-2.8%\" y=\"-5.0%\" width=\"105.6%\" height=\"110.0%\" filterUnits=\"objectBoundingBox\" id=\"filter-4\">\n <feGaussianBlur stdDeviation=\"0.5\" in=\"SourceGraphic\"></feGaussianBlur>\n </filter>\n <filter x=\"-5.6%\" y=\"-10.0%\" width=\"111.1%\" height=\"120.0%\" filterUnits=\"objectBoundingBox\" id=\"filter-5\">\n <feGaussianBlur stdDeviation=\"1\" in=\"SourceAlpha\" result=\"shadowBlurInner1\"></feGaussianBlur>\n <feOffset dx=\"0\" dy=\"-1\" in=\"shadowBlurInner1\" result=\"shadowOffsetInner1\"></feOffset>\n <feComposite in=\"shadowOffsetInner1\" in2=\"SourceAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\" result=\"shadowInnerInner1\"></feComposite>\n <feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0\" type=\"matrix\" in=\"shadowInnerInner1\"></feColorMatrix>\n </filter>\n </defs>\n <g id=\"button/previous2\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"Group\">\n <g id=\"Group-Copy\">\n <g id=\"Rectangle-5-Copy\" opacity=\"0.1\" fill-rule=\"nonzero\">\n <use fill=\"#CCCCCC\" xlink:href=\"#path-1\"></use>\n <use fill=\"black\" fill-opacity=\"1\" filter=\"url(#filter-2)\" xlink:href=\"#path-1\"></use>\n </g>\n <g id=\"Group-2\" transform=\"translate(3.000000, 3.000000)\">\n <g id=\"Rectangle-5-Copy-2\" fill-rule=\"nonzero\" filter=\"url(#filter-4)\">\n <use fill=\"#FFFFFF\" xlink:href=\"#path-3\"></use>\n <use fill=\"black\" fill-opacity=\"1\" filter=\"url(#filter-5)\" xlink:href=\"#path-3\"></use>\n </g>\n <polygon id=\"Shape\" fill=\"#6D7278\" points=\"31 10.41 29.59 9 23.59 15 29.59 21 31 19.59 26.42 15\"></polygon>\n </g>\n </g>\n <g id=\"Icon-24px\" transform=\"translate(30.000000, 18.000000) scale(-1, 1) translate(-30.000000, -18.000000) translate(26.000000, 12.000000)\"></g>\n </g>\n </g>\n</svg>" }]
}] });
class NextComponent {
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NextComponent, selector: "quml-next", ngImport: i0, template: "<svg width=\"60px\" height=\"36px\" viewBox=\"0 0 60 36\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>Next</title>\n <defs>\n <rect id=\"path-1\" x=\"0\" y=\"0\" width=\"60\" height=\"36\" rx=\"18\"></rect>\n <filter x=\"-5.8%\" y=\"-9.7%\" width=\"111.7%\" height=\"119.4%\" filterUnits=\"objectBoundingBox\" id=\"filter-2\">\n <feGaussianBlur stdDeviation=\"3\" in=\"SourceAlpha\" result=\"shadowBlurInner1\"></feGaussianBlur>\n <feOffset dx=\"0\" dy=\"1\" in=\"shadowBlurInner1\" result=\"shadowOffsetInner1\"></feOffset>\n <feComposite in=\"shadowOffsetInner1\" in2=\"SourceAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\" result=\"shadowInnerInner1\"></feComposite>\n <feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0\" type=\"matrix\" in=\"shadowInnerInner1\"></feColorMatrix>\n </filter>\n <rect id=\"path-3\" x=\"0\" y=\"0\" width=\"54\" height=\"30\" rx=\"15\"></rect>\n <filter x=\"-2.8%\" y=\"-5.0%\" width=\"105.6%\" height=\"110.0%\" filterUnits=\"objectBoundingBox\" id=\"filter-4\">\n <feGaussianBlur stdDeviation=\"0.5\" in=\"SourceGraphic\"></feGaussianBlur>\n </filter>\n <filter x=\"-5.6%\" y=\"-10.0%\" width=\"111.1%\" height=\"120.0%\" filterUnits=\"objectBoundingBox\" id=\"filter-5\">\n <feGaussianBlur stdDeviation=\"1\" in=\"SourceAlpha\" result=\"shadowBlurInner1\"></feGaussianBlur>\n <feOffset dx=\"0\" dy=\"-1\" in=\"shadowBlurInner1\" result=\"shadowOffsetInner1\"></feOffset>\n <feComposite in=\"shadowOffsetInner1\" in2=\"SourceAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\" result=\"shadowInnerInner1\"></feComposite>\n <feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0\" type=\"matrix\" in=\"shadowInnerInner1\"></feColorMatrix>\n </filter>\n </defs>\n <g id=\"button/next2\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"Group\">\n <g id=\"Group-Copy\">\n <g id=\"Rectangle-5-Copy\" opacity=\"0.1\" fill-rule=\"nonzero\">\n <use fill=\"#CCCCCC\" xlink:href=\"#path-1\"></use>\n <use fill=\"black\" fill-opacity=\"1\" filter=\"url(#filter-2)\" xlink:href=\"#path-1\"></use>\n </g>\n <g id=\"Group-2\" transform=\"translate(3.000000, 3.000000)\">\n <g id=\"Rectangle-5-Copy-2\" fill-rule=\"nonzero\" filter=\"url(#filter-4)\">\n <use fill=\"#FFFFFF\" xlink:href=\"#path-3\"></use>\n <use fill=\"black\" fill-opacity=\"1\" filter=\"url(#filter-5)\" xlink:href=\"#path-3\"></use>\n </g>\n <polygon id=\"Shape\" fill=\"#6D7278\" transform=\"translate(27.295000, 15.000000) scale(-1, 1) translate(-27.295000, -15.000000) \" points=\"31 10.41 29.59 9 23.59 15 29.59 21 31 19.59 26.42 15\"></polygon>\n </g>\n </g>\n <g id=\"Icon-24px\" transform=\"translate(30.000000, 18.000000) scale(-1, 1) translate(-30.000000, -18.000000) translate(26.000000, 12.000000)\"></g>\n </g>\n </g>\n</svg>" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NextComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-next', template: "<svg width=\"60px\" height=\"36px\" viewBox=\"0 0 60 36\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>Next</title>\n <defs>\n <rect id=\"path-1\" x=\"0\" y=\"0\" width=\"60\" height=\"36\" rx=\"18\"></rect>\n <filter x=\"-5.8%\" y=\"-9.7%\" width=\"111.7%\" height=\"119.4%\" filterUnits=\"objectBoundingBox\" id=\"filter-2\">\n <feGaussianBlur stdDeviation=\"3\" in=\"SourceAlpha\" result=\"shadowBlurInner1\"></feGaussianBlur>\n <feOffset dx=\"0\" dy=\"1\" in=\"shadowBlurInner1\" result=\"shadowOffsetInner1\"></feOffset>\n <feComposite in=\"shadowOffsetInner1\" in2=\"SourceAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\" result=\"shadowInnerInner1\"></feComposite>\n <feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0\" type=\"matrix\" in=\"shadowInnerInner1\"></feColorMatrix>\n </filter>\n <rect id=\"path-3\" x=\"0\" y=\"0\" width=\"54\" height=\"30\" rx=\"15\"></rect>\n <filter x=\"-2.8%\" y=\"-5.0%\" width=\"105.6%\" height=\"110.0%\" filterUnits=\"objectBoundingBox\" id=\"filter-4\">\n <feGaussianBlur stdDeviation=\"0.5\" in=\"SourceGraphic\"></feGaussianBlur>\n </filter>\n <filter x=\"-5.6%\" y=\"-10.0%\" width=\"111.1%\" height=\"120.0%\" filterUnits=\"objectBoundingBox\" id=\"filter-5\">\n <feGaussianBlur stdDeviation=\"1\" in=\"SourceAlpha\" result=\"shadowBlurInner1\"></feGaussianBlur>\n <feOffset dx=\"0\" dy=\"-1\" in=\"shadowBlurInner1\" result=\"shadowOffsetInner1\"></feOffset>\n <feComposite in=\"shadowOffsetInner1\" in2=\"SourceAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\" result=\"shadowInnerInner1\"></feComposite>\n <feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0\" type=\"matrix\" in=\"shadowInnerInner1\"></feColorMatrix>\n </filter>\n </defs>\n <g id=\"button/next2\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"Group\">\n <g id=\"Group-Copy\">\n <g id=\"Rectangle-5-Copy\" opacity=\"0.1\" fill-rule=\"nonzero\">\n <use fill=\"#CCCCCC\" xlink:href=\"#path-1\"></use>\n <use fill=\"black\" fill-opacity=\"1\" filter=\"url(#filter-2)\" xlink:href=\"#path-1\"></use>\n </g>\n <g id=\"Group-2\" transform=\"translate(3.000000, 3.000000)\">\n <g id=\"Rectangle-5-Copy-2\" fill-rule=\"nonzero\" filter=\"url(#filter-4)\">\n <use fill=\"#FFFFFF\" xlink:href=\"#path-3\"></use>\n <use fill=\"black\" fill-opacity=\"1\" filter=\"url(#filter-5)\" xlink:href=\"#path-3\"></use>\n </g>\n <polygon id=\"Shape\" fill=\"#6D7278\" transform=\"translate(27.295000, 15.000000) scale(-1, 1) translate(-27.295000, -15.000000) \" points=\"31 10.41 29.59 9 23.59 15 29.59 21 31 19.59 26.42 15\"></polygon>\n </g>\n </g>\n <g id=\"Icon-24px\" transform=\"translate(30.000000, 18.000000) scale(-1, 1) translate(-30.000000, -18.000000) translate(26.000000, 12.000000)\"></g>\n </g>\n </g>\n</svg>" }]
}] });
class BookmarkComponent {
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BookmarkComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: BookmarkComponent, selector: "quml-bookmark", ngImport: i0, template: "<svg width=\"14px\" height=\"18px\" viewBox=\"0 0 14 18\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>bookmark</title>\n <g id=\"Symbols\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path d=\"M12,0 L2,0 C0.9,0 0.01,0.9 0.01,2 L0,18 L7,15 L14,18 L14,2 C14,0.9 13.1,0 12,0 L12,0 Z M12,15 L7,12.82 L2,15 L2,2 L12,2 L12,15 L12,15 Z\" id=\"bookmark\" fill=\"#6D7278\"></path>\n </g>\n</svg>" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: BookmarkComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-bookmark', template: "<svg width=\"14px\" height=\"18px\" viewBox=\"0 0 14 18\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>bookmark</title>\n <g id=\"Symbols\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path d=\"M12,0 L2,0 C0.9,0 0.01,0.9 0.01,2 L0,18 L7,15 L14,18 L14,2 C14,0.9 13.1,0 12,0 L12,0 Z M12,15 L7,12.82 L2,15 L2,2 L12,2 L12,15 L12,15 Z\" id=\"bookmark\" fill=\"#6D7278\"></path>\n </g>\n</svg>" }]
}] });
class HintComponent {
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HintComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: HintComponent, selector: "quml-hint", ngImport: i0, template: "<svg width=\"14px\" height=\"20px\" viewBox=\"0 0 14 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>hint</title>\n <g id=\"Symbols\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path d=\"M4,19 C4,19.55 4.45,20 5,20 L9,20 C9.55,20 10,19.55 10,19 L10,18 L4,18 L4,19 L4,19 Z M7,0 C3.14,0 0,3.14 0,7 C0,9.38 1.19,11.47 3,12.74 L3,15 C3,15.55 3.45,16 4,16 L10,16 C10.55,16 11,15.55 11,15 L11,12.74 C12.81,11.47 14,9.38 14,7 C14,3.14 10.86,0 7,0 L7,0 Z M9.85,11.1 L9,11.7 L9,14 L5,14 L5,11.7 L4.15,11.1 C2.8,10.16 2,8.63 2,7 C2,4.24 4.24,2 7,2 C9.76,2 12,4.24 12,7 C12,8.63 11.2,10.16 9.85,11.1 L9.85,11.1 Z\" id=\"hint\" fill=\"#6D7278\"></path>\n </g>\n</svg>" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: HintComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-hint', template: "<svg width=\"14px\" height=\"20px\" viewBox=\"0 0 14 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>hint</title>\n <g id=\"Symbols\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path d=\"M4,19 C4,19.55 4.45,20 5,20 L9,20 C9.55,20 10,19.55 10,19 L10,18 L4,18 L4,19 L4,19 Z M7,0 C3.14,0 0,3.14 0,7 C0,9.38 1.19,11.47 3,12.74 L3,15 C3,15.55 3.45,16 4,16 L10,16 C10.55,16 11,15.55 11,15 L11,12.74 C12.81,11.47 14,9.38 14,7 C14,3.14 10.86,0 7,0 L7,0 Z M9.85,11.1 L9,11.7 L9,14 L5,14 L5,11.7 L4.15,11.1 C2.8,10.16 2,8.63 2,7 C2,4.24 4.24,2 7,2 C9.76,2 12,4.24 12,7 C12,8.63 11.2,10.16 9.85,11.1 L9.85,11.1 Z\" id=\"hint\" fill=\"#6D7278\"></path>\n </g>\n</svg>" }]
}] });
class ShareComponent {
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ShareComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ShareComponent, selector: "quml-share", ngImport: i0, template: "<svg width=\"17px\" height=\"18px\" viewBox=\"0 0 17 18\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>share</title>\n <g id=\"Symbols\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path d=\"M13.4613333,12.8088889 C12.7857778,12.8088889 12.1813333,13.0755556 11.7191111,13.4933333 L5.38133333,9.80444444 C5.42577778,9.6 5.46133333,9.39555556 5.46133333,9.18222222 C5.46133333,8.96888889 5.42577778,8.76444444 5.38133333,8.56 L11.648,4.90666667 C12.128,5.35111111 12.7591111,5.62666667 13.4613333,5.62666667 C14.9368889,5.62666667 16.128,4.43555556 16.128,2.96 C16.128,1.48444444 14.9368889,0.293333333 13.4613333,0.293333333 C11.9857778,0.293333333 10.7946667,1.48444444 10.7946667,2.96 C10.7946667,3.17333333 10.8302222,3.37777778 10.8746667,3.58222222 L4.608,7.23555556 C4.128,6.79111111 3.49688889,6.51555556 2.79466667,6.51555556 C1.31911111,6.51555556 0.128,7.70666667 0.128,9.18222222 C0.128,10.6577778 1.31911111,11.8488889 2.79466667,11.8488889 C3.49688889,11.8488889 4.128,11.5733333 4.608,11.1288889 L10.9368889,14.8266667 C10.8924444,15.0133333 10.8657778,15.2088889 10.8657778,15.4044444 C10.8657778,16.8355556 12.0302222,18 13.4613333,18 C14.8924444,18 16.0568889,16.8355556 16.0568889,15.4044444 C16.0568889,13.9733333 14.8924444,12.8088889 13.4613333,12.8088889 L13.4613333,12.8088889 Z\" id=\"share\" fill=\"#6D7278\"></path>\n </g>\n</svg>" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ShareComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-share', template: "<svg width=\"17px\" height=\"18px\" viewBox=\"0 0 17 18\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>share</title>\n <g id=\"Symbols\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path d=\"M13.4613333,12.8088889 C12.7857778,12.8088889 12.1813333,13.0755556 11.7191111,13.4933333 L5.38133333,9.80444444 C5.42577778,9.6 5.46133333,9.39555556 5.46133333,9.18222222 C5.46133333,8.96888889 5.42577778,8.76444444 5.38133333,8.56 L11.648,4.90666667 C12.128,5.35111111 12.7591111,5.62666667 13.4613333,5.62666667 C14.9368889,5.62666667 16.128,4.43555556 16.128,2.96 C16.128,1.48444444 14.9368889,0.293333333 13.4613333,0.293333333 C11.9857778,0.293333333 10.7946667,1.48444444 10.7946667,2.96 C10.7946667,3.17333333 10.8302222,3.37777778 10.8746667,3.58222222 L4.608,7.23555556 C4.128,6.79111111 3.49688889,6.51555556 2.79466667,6.51555556 C1.31911111,6.51555556 0.128,7.70666667 0.128,9.18222222 C0.128,10.6577778 1.31911111,11.8488889 2.79466667,11.8488889 C3.49688889,11.8488889 4.128,11.5733333 4.608,11.1288889 L10.9368889,14.8266667 C10.8924444,15.0133333 10.8657778,15.2088889 10.8657778,15.4044444 C10.8657778,16.8355556 12.0302222,18 13.4613333,18 C14.8924444,18 16.0568889,16.8355556 16.0568889,15.4044444 C16.0568889,13.9733333 14.8924444,12.8088889 13.4613333,12.8088889 L13.4613333,12.8088889 Z\" id=\"share\" fill=\"#6D7278\"></path>\n </g>\n</svg>" }]
}] });
class CorrectComponent {
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CorrectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CorrectComponent, selector: "quml-correct", ngImport: i0, template: "<svg width=\"48px\" height=\"48px\" viewBox=\"0 0 21 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>correct option</title>\n <g id=\"Symbols\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"M10.5,0 C4.98,0 0.5,4.48 0.5,10 C0.5,15.52 4.98,20 10.5,20 C16.02,20 20.5,15.52 20.5,10 C20.5,4.48 16.02,0 10.5,0 L10.5,0 Z M8.5,15 L3.5,10 L4.91,8.59 L8.5,12.17 L16.09,4.58 L17.5,6 L8.5,15 L8.5,15 Z\"\n id=\"correct-option\" fill=\"#31A679\"></path>\n </g>\n</svg>" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CorrectComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-correct', template: "<svg width=\"48px\" height=\"48px\" viewBox=\"0 0 21 20\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>correct option</title>\n <g id=\"Symbols\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <path\n d=\"M10.5,0 C4.98,0 0.5,4.48 0.5,10 C0.5,15.52 4.98,20 10.5,20 C16.02,20 20.5,15.52 20.5,10 C20.5,4.48 16.02,0 10.5,0 L10.5,0 Z M8.5,15 L3.5,10 L4.91,8.59 L8.5,12.17 L16.09,4.58 L17.5,6 L8.5,15 L8.5,15 Z\"\n id=\"correct-option\" fill=\"#31A679\"></path>\n </g>\n</svg>" }]
}] });
class ScoreboardComponent {
constructor(viewerService) {
this.viewerService = viewerService;
this.submitClicked = new EventEmitter();
this.emitQuestionNo = new EventEmitter();
this.scoreBoardLoaded = new EventEmitter();
}
ngOnInit() {
this.scoreBoardLoaded.emit({
scoreBoardLoaded: true
});
this.subscription = fromEvent(document, 'keydown').subscribe((e) => {
/* istanbul ignore else */
if (e['key'] === 'Enter') {
e.stopPropagation();
document.activeElement.click();
}
});
}
goToQuestion(index, identifier) {
this.emitQuestionNo.emit({ questionNo: index, identifier });
}
onReviewClicked() {
if (this.isSections) {
this.goToQuestion(1, this.scores[0].identifier);
}
else {
this.goToQuestion(1);
}
this.viewerService.raiseHeartBeatEvent(eventName.scoreBoardReviewClicked, TelemetryType.interact, pageId.submitPage);
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScoreboardComponent, deps: [{ token: ViewerService }], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ScoreboardComponent, selector: "quml-scoreboard", inputs: { scores: "scores", totalNoOfQuestions: "totalNoOfQuestions", contentName: "contentName", showFeedBack: "showFeedBack", isSections: "isSections", summary: "summary" }, outputs: { submitClicked: "submitClicked", emitQuestionNo: "emitQuestionNo", scoreBoardLoaded: "scoreBoardLoaded" }, ngImport: i0, template: "<div class=\"scoreboard\">\n <div class=\"scoreboard__header\">\n <div class=\"scoreboard__title\">\n Are you ready to submit?\n </div>\n <div class=\"scoreboard__subtitle\">\n {{contentName}}\n </div>\n </div>\n\n <div class=\"sections-score-card\">\n <div class=\"sections-score-count-info\">\n <div class=\"mb-15\">Total Questions: {{totalNoOfQuestions}}</div>\n <div class=\"mb-15\">Questions Answered: {{summary?.correct + summary?.wrong}}</div>\n <div class=\"mb-15\">Questions Skipped: {{summary?.skipped}}</div>\n <div class=\"mb-15\">Questions not Viewed: {{totalNoOfQuestions - (summary?.correct + summary?.wrong + summary?.skipped)}}</div>\n </div>\n\n <div class=\"sections-score-count-sections\">\n <div class=\"scoreboard__points\" *ngIf=\"!isSections\">\n <div *ngFor=\"let score of scores; let i = index\" class=\"scoreboard__index\" (click)=\"goToQuestion(i+1)\"\n tabindex=\"0\" attr.aria-label=\"question number {{score.index}}\"\n [ngClass]=\"showFeedBack ? score.class : (score.class === 'skipped' ? score.class : (score.class === 'unattempted' ? score.class : 'attempted'))\">\n {{score.index}}\n </div>\n </div>\n\n <div *ngIf=\"isSections\">\n <div *ngFor=\"let section of scores\" class=\"sections-score-counts\">\n <div class=\"sections-score-card__title\">Section {{section?.index}}</div>\n <div class=\"sections-score-card__points\">\n <div *ngFor=\"let score of section?.children; let i = index\" class=\"scoreboard__index\" tabindex=\"0\"\n attr.aria-label=\"question number {{score.index}}\" (click)=\"goToQuestion(i+1, section.identifier)\"\n [ngClass]=\"score.showFeedback ? score.class : (score.class === 'skipped' ? score.class : (score.class === 'unattempted' ? score.class : 'attempted'))\">\n {{score.index}}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"scoreboard__btn-container\">\n <button type=\"submit\" class=\"sb-btn sb-btn-outline-primary sb-btn-normal sb-btn-radius px-20 mx-8\"\n (click)=\"onReviewClicked()\">Review</button>\n <button type=\"submit\" class=\"sb-btn sb-btn-primary sb-btn-normal sb-btn-radius px-20 mx-8\"\n (click)=\"submitClicked.emit({type:'submit-clicked'})\">Submit</button>\n </div>\n</div>", styles: ["::ng-deep :root{--quml-scoreboard-sub-title: #6d7278;--quml-scoreboard-skipped: #969696;--quml-scoreboard-unattempted: #575757;--quml-color-success: #08bc82;--quml-color-danger: #f1635d;--quml-color-primary-contrast: #333}.scoreboard{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;padding:3.5rem 2.5rem 0}@media (max-width: 767px){.scoreboard{top:0;height:calc(100% + -0px)}}.scoreboard__header{font-weight:700;text-align:center;line-height:normal;height:5rem}.scoreboard__title{color:var(--primary-color);font-size:1.25rem}.scoreboard__subtitle{color:var(--quml-scoreboard-sub-title);font-size:.875rem;margin-top:.5rem}.scoreboard__points{display:flex;flex-wrap:wrap;margin:0 auto;width:100%;max-height:calc(100vh - 12rem);align-items:center;overflow-y:auto;justify-content:center}.scoreboard__btn-container{display:flex;height:5rem;align-items:center}.scoreboard__index{font-size:.625rem;font-weight:500;border-radius:50%;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;margin:0rem 1rem 1rem;cursor:pointer}.scoreboard__index.skipped{color:var(--white);background:var(--quml-scoreboard-skipped);border:.0625rem solid var(--quml-scoreboard-skipped)}.scoreboard__index.partial,.scoreboard__index.wrong,.scoreboard__index.correct{color:var(--white);border:0px solid transparent}.scoreboard__index.correct{--correct-bg: var(--quml-color-success);background:var(--correct-bg)}.scoreboard__index.wrong{--wrong-bg: var(--quml-color-danger);background:var(--wrong-bg)}.scoreboard__index.partial{--partial-bg: linear-gradient( 180deg, rgba(71, 164, 128, 1) 0%, rgba(71, 164, 128, 1) 50%, rgba(249, 122, 116, 1) 50%, rgba(249, 122, 116, 1) 100% );background:var(--partial-bg)}.scoreboard__index.unattempted{color:var(--quml-scoreboard-unattempted);border:.03125rem solid var(--quml-scoreboard-unattempted)}.scoreboard__index.unattempted:hover{border:.0625rem solid var(--primary-color);color:var(--primary-color)}.scoreboard__index.attempted{color:var(--white)!important;background:var(--primary-color);border:.03125rem solid var(--primary-color)}@media screen and (orientation: landscape){.scoreboard .scoreboard__header{display:block;width:100%;text-align:left}}.sections-score-card{width:100%;height:calc(100% - 10rem);overflow-y:auto;display:flex}.sections-score-card__title{width:100%;color:var(--quml-color-primary-contrast);font-size:.875rem;font-weight:700;text-align:center;margin-bottom:1rem}.sections-score-card__points{display:flex;flex-wrap:wrap;margin:.5rem auto 0;width:100%;max-height:100%;align-items:center;overflow-y:auto;justify-content:center}@media screen and (orientation: portrait){.sections-score-card{flex-direction:column;text-align:center}}.sections-score-card .sections-score-count-info{width:100%;display:block;border-right:0;padding-bottom:1.5rem;position:sticky;top:0;background:#fff}@media screen and (orientation: landscape){.sections-score-card .sections-score-count-info{width:40%;border-right:1px solid #979797}}@media screen and (orientation: landscape){.sections-score-card .sections-score-count-sections{width:60%}}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ScoreboardComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-scoreboard', template: "<div class=\"scoreboard\">\n <div class=\"scoreboard__header\">\n <div class=\"scoreboard__title\">\n Are you ready to submit?\n </div>\n <div class=\"scoreboard__subtitle\">\n {{contentName}}\n </div>\n </div>\n\n <div class=\"sections-score-card\">\n <div class=\"sections-score-count-info\">\n <div class=\"mb-15\">Total Questions: {{totalNoOfQuestions}}</div>\n <div class=\"mb-15\">Questions Answered: {{summary?.correct + summary?.wrong}}</div>\n <div class=\"mb-15\">Questions Skipped: {{summary?.skipped}}</div>\n <div class=\"mb-15\">Questions not Viewed: {{totalNoOfQuestions - (summary?.correct + summary?.wrong + summary?.skipped)}}</div>\n </div>\n\n <div class=\"sections-score-count-sections\">\n <div class=\"scoreboard__points\" *ngIf=\"!isSections\">\n <div *ngFor=\"let score of scores; let i = index\" class=\"scoreboard__index\" (click)=\"goToQuestion(i+1)\"\n tabindex=\"0\" attr.aria-label=\"question number {{score.index}}\"\n [ngClass]=\"showFeedBack ? score.class : (score.class === 'skipped' ? score.class : (score.class === 'unattempted' ? score.class : 'attempted'))\">\n {{score.index}}\n </div>\n </div>\n\n <div *ngIf=\"isSections\">\n <div *ngFor=\"let section of scores\" class=\"sections-score-counts\">\n <div class=\"sections-score-card__title\">Section {{section?.index}}</div>\n <div class=\"sections-score-card__points\">\n <div *ngFor=\"let score of section?.children; let i = index\" class=\"scoreboard__index\" tabindex=\"0\"\n attr.aria-label=\"question number {{score.index}}\" (click)=\"goToQuestion(i+1, section.identifier)\"\n [ngClass]=\"score.showFeedback ? score.class : (score.class === 'skipped' ? score.class : (score.class === 'unattempted' ? score.class : 'attempted'))\">\n {{score.index}}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"scoreboard__btn-container\">\n <button type=\"submit\" class=\"sb-btn sb-btn-outline-primary sb-btn-normal sb-btn-radius px-20 mx-8\"\n (click)=\"onReviewClicked()\">Review</button>\n <button type=\"submit\" class=\"sb-btn sb-btn-primary sb-btn-normal sb-btn-radius px-20 mx-8\"\n (click)=\"submitClicked.emit({type:'submit-clicked'})\">Submit</button>\n </div>\n</div>", styles: ["::ng-deep :root{--quml-scoreboard-sub-title: #6d7278;--quml-scoreboard-skipped: #969696;--quml-scoreboard-unattempted: #575757;--quml-color-success: #08bc82;--quml-color-danger: #f1635d;--quml-color-primary-contrast: #333}.scoreboard{display:flex;flex-direction:column;align-items:center;width:100%;height:100%;padding:3.5rem 2.5rem 0}@media (max-width: 767px){.scoreboard{top:0;height:calc(100% + -0px)}}.scoreboard__header{font-weight:700;text-align:center;line-height:normal;height:5rem}.scoreboard__title{color:var(--primary-color);font-size:1.25rem}.scoreboard__subtitle{color:var(--quml-scoreboard-sub-title);font-size:.875rem;margin-top:.5rem}.scoreboard__points{display:flex;flex-wrap:wrap;margin:0 auto;width:100%;max-height:calc(100vh - 12rem);align-items:center;overflow-y:auto;justify-content:center}.scoreboard__btn-container{display:flex;height:5rem;align-items:center}.scoreboard__index{font-size:.625rem;font-weight:500;border-radius:50%;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;margin:0rem 1rem 1rem;cursor:pointer}.scoreboard__index.skipped{color:var(--white);background:var(--quml-scoreboard-skipped);border:.0625rem solid var(--quml-scoreboard-skipped)}.scoreboard__index.partial,.scoreboard__index.wrong,.scoreboard__index.correct{color:var(--white);border:0px solid transparent}.scoreboard__index.correct{--correct-bg: var(--quml-color-success);background:var(--correct-bg)}.scoreboard__index.wrong{--wrong-bg: var(--quml-color-danger);background:var(--wrong-bg)}.scoreboard__index.partial{--partial-bg: linear-gradient( 180deg, rgba(71, 164, 128, 1) 0%, rgba(71, 164, 128, 1) 50%, rgba(249, 122, 116, 1) 50%, rgba(249, 122, 116, 1) 100% );background:var(--partial-bg)}.scoreboard__index.unattempted{color:var(--quml-scoreboard-unattempted);border:.03125rem solid var(--quml-scoreboard-unattempted)}.scoreboard__index.unattempted:hover{border:.0625rem solid var(--primary-color);color:var(--primary-color)}.scoreboard__index.attempted{color:var(--white)!important;background:var(--primary-color);border:.03125rem solid var(--primary-color)}@media screen and (orientation: landscape){.scoreboard .scoreboard__header{display:block;width:100%;text-align:left}}.sections-score-card{width:100%;height:calc(100% - 10rem);overflow-y:auto;display:flex}.sections-score-card__title{width:100%;color:var(--quml-color-primary-contrast);font-size:.875rem;font-weight:700;text-align:center;margin-bottom:1rem}.sections-score-card__points{display:flex;flex-wrap:wrap;margin:.5rem auto 0;width:100%;max-height:100%;align-items:center;overflow-y:auto;justify-content:center}@media screen and (orientation: portrait){.sections-score-card{flex-direction:column;text-align:center}}.sections-score-card .sections-score-count-info{width:100%;display:block;border-right:0;padding-bottom:1.5rem;position:sticky;top:0;background:#fff}@media screen and (orientation: landscape){.sections-score-card .sections-score-count-info{width:40%;border-right:1px solid #979797}}@media screen and (orientation: landscape){.sections-score-card .sections-score-count-sections{width:60%}}\n"] }]
}], ctorParameters: function () { return [{ type: ViewerService }]; }, propDecorators: { scores: [{
type: Input
}], totalNoOfQuestions: [{
type: Input
}], contentName: [{
type: Input
}], showFeedBack: [{
type: Input
}], isSections: [{
type: Input
}], summary: [{
type: Input
}], submitClicked: [{
type: Output
}], emitQuestionNo: [{
type: Output
}], scoreBoardLoaded: [{
type: Output
}] } });
class TimerComponent {
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TimerComponent, selector: "quml-timer", ngImport: i0, template: "<svg width=\"18px\" height=\"19px\" viewBox=\"0 0 18 19\" version=\"1.1\" tabindex=\"-1\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>ic_timer</title>\n <defs>\n <linearGradient x1=\"13.2653061%\" y1=\"0%\" x2=\"87.9981222%\" y2=\"100%\" id=\"linearGradient-1\">\n <stop stop-color=\"#F1635D\" offset=\"0%\"></stop>\n <stop stop-color=\"#F97A74\" offset=\"100%\"></stop>\n </linearGradient>\n </defs>\n <g id=\"Content-player\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"player-intro-page\" transform=\"translate(-446.000000, -159.000000)\">\n <g id=\"Icon-24px\" transform=\"translate(446.000000, 159.495625)\">\n <polygon id=\"Shape\" points=\"0 0 18 0 18 18 0 18\"></polygon>\n <path d=\"M11.25,0.75 L6.75,0.75 L6.75,2.25 L11.25,2.25 L11.25,0.75 L11.25,0.75 Z M8.25,10.5 L9.75,10.5 L9.75,6 L8.25,6 L8.25,10.5 L8.25,10.5 Z M14.2725,5.5425 L15.3375,4.4775 C15.015,4.095 14.6625,3.735 14.28,3.42 L13.215,4.485 C12.0525,3.555 10.59,3 9,3 C5.2725,3 2.25,6.0225 2.25,9.75 C2.25,13.4775 5.265,16.5 9,16.5 C12.735,16.5 15.75,13.4775 15.75,9.75 C15.75,8.16 15.195,6.6975 14.2725,5.5425 L14.2725,5.5425 Z M9,15 C6.0975,15 3.75,12.6525 3.75,9.75 C3.75,6.8475 6.0975,4.5 9,4.5 C11.9025,4.5 14.25,6.8475 14.25,9.75 C14.25,12.6525 11.9025,15 9,15 L9,15 Z\" id=\"Shape\" fill=\"#f8756f\"></path>\n </g>\n </g>\n </g>\n</svg>" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TimerComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-timer', template: "<svg width=\"18px\" height=\"19px\" viewBox=\"0 0 18 19\" version=\"1.1\" tabindex=\"-1\" aria-hidden=\"true\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>ic_timer</title>\n <defs>\n <linearGradient x1=\"13.2653061%\" y1=\"0%\" x2=\"87.9981222%\" y2=\"100%\" id=\"linearGradient-1\">\n <stop stop-color=\"#F1635D\" offset=\"0%\"></stop>\n <stop stop-color=\"#F97A74\" offset=\"100%\"></stop>\n </linearGradient>\n </defs>\n <g id=\"Content-player\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"player-intro-page\" transform=\"translate(-446.000000, -159.000000)\">\n <g id=\"Icon-24px\" transform=\"translate(446.000000, 159.495625)\">\n <polygon id=\"Shape\" points=\"0 0 18 0 18 18 0 18\"></polygon>\n <path d=\"M11.25,0.75 L6.75,0.75 L6.75,2.25 L11.25,2.25 L11.25,0.75 L11.25,0.75 Z M8.25,10.5 L9.75,10.5 L9.75,6 L8.25,6 L8.25,10.5 L8.25,10.5 Z M14.2725,5.5425 L15.3375,4.4775 C15.015,4.095 14.6625,3.735 14.28,3.42 L13.215,4.485 C12.0525,3.555 10.59,3 9,3 C5.2725,3 2.25,6.0225 2.25,9.75 C2.25,13.4775 5.265,16.5 9,16.5 C12.735,16.5 15.75,13.4775 15.75,9.75 C15.75,8.16 15.195,6.6975 14.2725,5.5425 L14.2725,5.5425 Z M9,15 C6.0975,15 3.75,12.6525 3.75,9.75 C3.75,6.8475 6.0975,4.5 9,4.5 C11.9025,4.5 14.25,6.8475 14.25,9.75 C14.25,12.6525 11.9025,15 9,15 L9,15 Z\" id=\"Shape\" fill=\"#f8756f\"></path>\n </g>\n </g>\n </g>\n</svg>" }]
}] });
class ContentComponent {
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ContentComponent, selector: "quml-content", ngImport: i0, template: "<svg width=\"18px\" height=\"19px\" viewBox=\"0 0 18 19\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" tabindex=\"-1\" aria-hidden=\"true\">\n <title>ic_content_paste</title>\n <defs>\n <linearGradient x1=\"16.5289256%\" y1=\"0%\" x2=\"84.622256%\" y2=\"100%\" id=\"linearGradient-1\">\n <stop stop-color=\"#F1635D\" offset=\"0%\"></stop>\n <stop stop-color=\"#F97A74\" offset=\"100%\"></stop>\n </linearGradient>\n </defs>\n <g id=\"Content-player\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"player-intro-page\" transform=\"translate(-447.000000, -95.000000)\">\n <g id=\"Icon-24px\" transform=\"translate(447.000000, 95.495625)\" >\n <polygon id=\"Shape\" points=\"0 0 18 0 18 18 0 18\"></polygon>\n <path d=\"M14.25,1.5 L11.115,1.5 C10.8,0.63 9.975,0 9,0 C8.025,0 7.2,0.63 6.885,1.5 L3.75,1.5 C2.925,1.5 2.25,2.175 2.25,3 L2.25,15 C2.25,15.825 2.925,16.5 3.75,16.5 L14.25,16.5 C15.075,16.5 15.75,15.825 15.75,15 L15.75,3 C15.75,2.175 15.075,1.5 14.25,1.5 L14.25,1.5 Z M9,1.5 C9.4125,1.5 9.75,1.8375 9.75,2.25 C9.75,2.6625 9.4125,3 9,3 C8.5875,3 8.25,2.6625 8.25,2.25 C8.25,1.8375 8.5875,1.5 9,1.5 L9,1.5 Z M14.25,15 L3.75,15 L3.75,3 L5.25,3 L5.25,5.25 L12.75,5.25 L12.75,3 L14.25,3 L14.25,15 L14.25,15 Z\" id=\"Shape\" fill=\"#f8756f\"></path>\n </g>\n </g>\n </g>\n</svg>" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ContentComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-content', template: "<svg width=\"18px\" height=\"19px\" viewBox=\"0 0 18 19\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" tabindex=\"-1\" aria-hidden=\"true\">\n <title>ic_content_paste</title>\n <defs>\n <linearGradient x1=\"16.5289256%\" y1=\"0%\" x2=\"84.622256%\" y2=\"100%\" id=\"linearGradient-1\">\n <stop stop-color=\"#F1635D\" offset=\"0%\"></stop>\n <stop stop-color=\"#F97A74\" offset=\"100%\"></stop>\n </linearGradient>\n </defs>\n <g id=\"Content-player\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"player-intro-page\" transform=\"translate(-447.000000, -95.000000)\">\n <g id=\"Icon-24px\" transform=\"translate(447.000000, 95.495625)\" >\n <polygon id=\"Shape\" points=\"0 0 18 0 18 18 0 18\"></polygon>\n <path d=\"M14.25,1.5 L11.115,1.5 C10.8,0.63 9.975,0 9,0 C8.025,0 7.2,0.63 6.885,1.5 L3.75,1.5 C2.925,1.5 2.25,2.175 2.25,3 L2.25,15 C2.25,15.825 2.925,16.5 3.75,16.5 L14.25,16.5 C15.075,16.5 15.75,15.825 15.75,15 L15.75,3 C15.75,2.175 15.075,1.5 14.25,1.5 L14.25,1.5 Z M9,1.5 C9.4125,1.5 9.75,1.8375 9.75,2.25 C9.75,2.6625 9.4125,3 9,3 C8.5875,3 8.25,2.6625 8.25,2.25 C8.25,1.8375 8.5875,1.5 9,1.5 L9,1.5 Z M14.25,15 L3.75,15 L3.75,3 L5.25,3 L5.25,5.25 L12.75,5.25 L12.75,3 L14.25,3 L14.25,15 L14.25,15 Z\" id=\"Shape\" fill=\"#f8756f\"></path>\n </g>\n </g>\n </g>\n</svg>" }]
}] });
class StartpagestariconComponent {
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StartpagestariconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StartpagestariconComponent, selector: "quml-startpagestaricon", ngImport: i0, template: "<svg width=\"14px\" height=\"13px\" viewBox=\"0 0 14 13\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>Star</title>\n <defs>\n <linearGradient x1=\"0%\" y1=\"0%\" x2=\"101.719666%\" y2=\"100%\" id=\"linearGradient-1\">\n <stop stop-color=\"#F1635D\" offset=\"0%\"></stop>\n <stop stop-color=\"#F97A74\" offset=\"100%\"></stop>\n </linearGradient>\n </defs>\n <g id=\"Content-player\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"player-intro-page\" transform=\"translate(-448.000000, -226.000000)\" fill=\"#f8756f\">\n <path d=\"M454.069318,237.484914 L452.648859,238.231693 C452.008011,238.568607 451.215379,238.322219 450.878466,237.681372 C450.744305,237.426183 450.698009,237.133884 450.746746,236.849727 L451.018029,235.268023 C451.129305,234.619235 450.914208,233.957235 450.442836,233.49776 L449.293661,232.377591 C448.775204,231.872221 448.764596,231.042245 449.269966,230.523788 C449.471207,230.317336 449.734894,230.182981 450.020203,230.141523 L451.608325,229.910756 C452.259745,229.816099 452.822876,229.40696 453.1142,228.816673 L453.824429,227.377591 C454.144853,226.728342 454.930929,226.461776 455.580179,226.782199 C455.838713,226.909794 456.047976,227.119057 456.175571,227.377591 L456.8858,228.816673 C457.177124,229.40696 457.740255,229.816099 458.391675,229.910756 L459.979797,230.141523 C460.696286,230.245635 461.192716,230.910864 461.088604,231.627354 C461.047146,231.912664 460.912791,232.17635 460.706339,232.377591 L459.557164,233.49776 C459.085792,233.957235 458.870695,234.619235 458.981971,235.268023 L459.253254,236.849727 C459.375645,237.563322 458.89638,238.241022 458.182786,238.363413 C457.898629,238.412149 457.60633,238.365854 457.351141,238.231693 L455.930682,237.484914 C455.348034,237.178598 454.651966,237.178598 454.069318,237.484914 Z\" id=\"Star\"></path>\n </g>\n </g>\n</svg>" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StartpagestariconComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-startpagestaricon', template: "<svg width=\"14px\" height=\"13px\" viewBox=\"0 0 14 13\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>Star</title>\n <defs>\n <linearGradient x1=\"0%\" y1=\"0%\" x2=\"101.719666%\" y2=\"100%\" id=\"linearGradient-1\">\n <stop stop-color=\"#F1635D\" offset=\"0%\"></stop>\n <stop stop-color=\"#F97A74\" offset=\"100%\"></stop>\n </linearGradient>\n </defs>\n <g id=\"Content-player\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"player-intro-page\" transform=\"translate(-448.000000, -226.000000)\" fill=\"#f8756f\">\n <path d=\"M454.069318,237.484914 L452.648859,238.231693 C452.008011,238.568607 451.215379,238.322219 450.878466,237.681372 C450.744305,237.426183 450.698009,237.133884 450.746746,236.849727 L451.018029,235.268023 C451.129305,234.619235 450.914208,233.957235 450.442836,233.49776 L449.293661,232.377591 C448.775204,231.872221 448.764596,231.042245 449.269966,230.523788 C449.471207,230.317336 449.734894,230.182981 450.020203,230.141523 L451.608325,229.910756 C452.259745,229.816099 452.822876,229.40696 453.1142,228.816673 L453.824429,227.377591 C454.144853,226.728342 454.930929,226.461776 455.580179,226.782199 C455.838713,226.909794 456.047976,227.119057 456.175571,227.377591 L456.8858,228.816673 C457.177124,229.40696 457.740255,229.816099 458.391675,229.910756 L459.979797,230.141523 C460.696286,230.245635 461.192716,230.910864 461.088604,231.627354 C461.047146,231.912664 460.912791,232.17635 460.706339,232.377591 L459.557164,233.49776 C459.085792,233.957235 458.870695,234.619235 458.981971,235.268023 L459.253254,236.849727 C459.375645,237.563322 458.89638,238.241022 458.182786,238.363413 C457.898629,238.412149 457.60633,238.365854 457.351141,238.231693 L455.930682,237.484914 C455.348034,237.178598 454.651966,237.178598 454.069318,237.484914 Z\" id=\"Star\"></path>\n </g>\n </g>\n</svg>" }]
}] });
class StartpageComponent {
ngOnInit() {
this.minutes = Math.floor(this.time / 60);
this.seconds = this.time - this.minutes * 60 < 10 ? `0${this.time - this.minutes * 60}` : this.time - this.minutes * 60;
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StartpageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: StartpageComponent, selector: "quml-startpage", inputs: { instructions: "instructions", totalNoOfQuestions: "totalNoOfQuestions", points: "points", time: "time", contentName: "contentName", showTimer: "showTimer" }, ngImport: i0, template: "<div class=\"startpage\" tabindex=\"0\">\n <div class=\"startpage__header\" [attr.aria-label]=\"'question set title '+contentName\">\n {{contentName}}\n </div>\n <div class=\"startpage__content\">\n <div class=\"startpage__metadata\">\n <div class=\"startpage__md-heading\">Questions</div>\n <div class=\"startpage__md-scores\">\n <quml-content class=\"startpage__md-icon\"></quml-content>\n <span class=\"startpage__md-desc\">{{totalNoOfQuestions}}</span>\n </div>\n </div>\n <div class=\"startpage__metadata\" *ngIf=\"showTimer && time > 0\">\n <div class=\"startpage__md-heading\">Minutes</div>\n <div class=\"startpage__md-scores\">\n <quml-timer class=\"startpage__md-icon\"></quml-timer>\n <span class=\"startpage__md-desc\">{{minutes}}:{{seconds}}</span>\n </div>\n </div>\n <div class=\"startpage__metadata\" *ngIf=\"points\">\n <div class=\"startpage__md-heading\">Points</div>\n <div class=\"startpage__md-scores\">\n <quml-startpagestaricon class=\"startpage__md-icon\">i</quml-startpagestaricon>\n <span class=\"startpage__md-desc\">{{points}}</span>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"instructions\">\n <div class=\"startpage__instruction\">\n <div class=\"startpage__instr-title\">Instructions</div>\n <div [innerHTML]=\"instructions | safeHtml\" class=\"startpage__instr-desc\"></div>\n </div>\n </ng-container>\n</div>", styles: ["::ng-deep :root{--quml-scoreboard-sub-title: #6D7278;--quml-color-primary-contrast: #333;--quml-zoom-btn-txt: #eee;--quml-zoom-btn-hover: #f2f2f2}.startpage__header{color:var(--primary-color);font-size:1.125rem;font-weight:700;margin:1rem 0;line-height:normal}.startpage__content{display:flex;border-bottom:.0625rem solid var(--quml-zoom-btn-txt);align-items:center;line-height:normal;margin-bottom:1rem;padding-bottom:1.5rem}.startpage__metadata{margin:0 4rem .5rem 0}.startpage__md-heading{color:var(--quml-scoreboard-sub-title);font-size:.75rem;line-height:normal;margin-bottom:.5rem}.startpage__md-scores,.startpage__md-icon{display:flex;align-items:center}.startpage__md-desc{color:var(--primary-color);font-size:1.125rem;font-weight:700;margin-left:.5rem}.startpage__instr-title{color:var(--quml-scoreboard-sub-title);font-size:.75rem;font-weight:700;letter-spacing:0;line-height:18px}.startpage__instr-desc{padding:1rem 0;color:var(--quml-color-primary-contrast);font-size:.75rem;letter-spacing:0;line-height:17px}::ng-deep .startpage__instr-desc ul{list-style-type:disc}::ng-deep .startpage__instr-desc li{margin-bottom:.5rem;margin-left:.5rem}::ng-deep .startpage__instr-desc table{width:100%}::ng-deep .startpage__instr-desc th,::ng-deep .startpage__instr-desc td{border:.0625rem solid #ddd;padding:.5rem}::ng-deep .startpage__instr-desc tr:nth-child(2n){background-color:var(--quml-zoom-btn-hover)}@media only screen and (max-width: 480px){.startpage__header{margin-top:1.5rem}}\n", "::ng-deep :root{--quml-mcq-title-txt: #131415}::ng-deep .startpage__instr-desc .mcq-title,::ng-deep .quml-mcq .mcq-title,::ng-deep .quml-sa .mcq-title,::ng-deep quml-sa .mcq-title,::ng-deep quml-mcq-solutions .mcq-title{color:var(--quml-mcq-title-txt)}::ng-deep .startpage__instr-desc .fs-8,::ng-deep .startpage__instr-desc .fs-9,::ng-deep .startpage__instr-desc .fs-10,::ng-deep .startpage__instr-desc .fs-11,::ng-deep .startpage__instr-desc .fs-12,::ng-deep .startpage__instr-desc .fs-13,::ng-deep .startpage__instr-desc .fs-14,::ng-deep .startpage__instr-desc .fs-15,::ng-deep .startpage__instr-desc .fs-16,::ng-deep .startpage__instr-desc .fs-17,::ng-deep .startpage__instr-desc .fs-18,::ng-deep .startpage__instr-desc .fs-19,::ng-deep .startpage__instr-desc .fs-20,::ng-deep .startpage__instr-desc .fs-21,::ng-deep .startpage__instr-desc .fs-22,::ng-deep .startpage__instr-desc .fs-23,::ng-deep .startpage__instr-desc .fs-24,::ng-deep .startpage__instr-desc .fs-25,::ng-deep .startpage__instr-desc .fs-26,::ng-deep .startpage__instr-desc .fs-27,::ng-deep .startpage__instr-desc .fs-28,::ng-deep .startpage__instr-desc .fs-29,::ng-deep .startpage__instr-desc .fs-30,::ng-deep .startpage__instr-desc .fs-36,::ng-deep .quml-mcq .fs-8,::ng-deep .quml-mcq .fs-9,::ng-deep .quml-mcq .fs-10,::ng-deep .quml-mcq .fs-11,::ng-deep .quml-mcq .fs-12,::ng-deep .quml-mcq .fs-13,::ng-deep .quml-mcq .fs-14,::ng-deep .quml-mcq .fs-15,::ng-deep .quml-mcq .fs-16,::ng-deep .quml-mcq .fs-17,::ng-deep .quml-mcq .fs-18,::ng-deep .quml-mcq .fs-19,::ng-deep .quml-mcq .fs-20,::ng-deep .quml-mcq .fs-21,::ng-deep .quml-mcq .fs-22,::ng-deep .quml-mcq .fs-23,::ng-deep .quml-mcq .fs-24,::ng-deep .quml-mcq .fs-25,::ng-deep .quml-mcq .fs-26,::ng-deep .quml-mcq .fs-27,::ng-deep .quml-mcq .fs-28,::ng-deep .quml-mcq .fs-29,::ng-deep .quml-mcq .fs-30,::ng-deep .quml-mcq .fs-36,::ng-deep .quml-sa .fs-8,::ng-deep .quml-sa .fs-9,::ng-deep .quml-sa .fs-10,::ng-deep .quml-sa .fs-11,::ng-deep .quml-sa .fs-12,::ng-deep .quml-sa .fs-13,::ng-deep .quml-sa .fs-14,::ng-deep .quml-sa .fs-15,::ng-deep .quml-sa .fs-16,::ng-deep .quml-sa .fs-17,::ng-deep .quml-sa .fs-18,::ng-deep .quml-sa .fs-19,::ng-deep .quml-sa .fs-20,::ng-deep .quml-sa .fs-21,::ng-deep .quml-sa .fs-22,::ng-deep .quml-sa .fs-23,::ng-deep .quml-sa .fs-24,::ng-deep .quml-sa .fs-25,::ng-deep .quml-sa .fs-26,::ng-deep .quml-sa .fs-27,::ng-deep .quml-sa .fs-28,::ng-deep .quml-sa .fs-29,::ng-deep .quml-sa .fs-30,::ng-deep .quml-sa .fs-36,::ng-deep quml-sa .fs-8,::ng-deep quml-sa .fs-9,::ng-deep quml-sa .fs-10,::ng-deep quml-sa .fs-11,::ng-deep quml-sa .fs-12,::ng-deep quml-sa .fs-13,::ng-deep quml-sa .fs-14,::ng-deep quml-sa .fs-15,::ng-deep quml-sa .fs-16,::ng-deep quml-sa .fs-17,::ng-deep quml-sa .fs-18,::ng-deep quml-sa .fs-19,::ng-deep quml-sa .fs-20,::ng-deep quml-sa .fs-21,::ng-deep quml-sa .fs-22,::ng-deep quml-sa .fs-23,::ng-deep quml-sa .fs-24,::ng-deep quml-sa .fs-25,::ng-deep quml-sa .fs-26,::ng-deep quml-sa .fs-27,::ng-deep quml-sa .fs-28,::ng-deep quml-sa .fs-29,::ng-deep quml-sa .fs-30,::ng-deep quml-sa .fs-36,::ng-deep quml-mcq-solutions .fs-8,::ng-deep quml-mcq-solutions .fs-9,::ng-deep quml-mcq-solutions .fs-10,::ng-deep quml-mcq-solutions .fs-11,::ng-deep quml-mcq-solutions .fs-12,::ng-deep quml-mcq-solutions .fs-13,::ng-deep quml-mcq-solutions .fs-14,::ng-deep quml-mcq-solutions .fs-15,::ng-deep quml-mcq-solutions .fs-16,::ng-deep quml-mcq-solutions .fs-17,::ng-deep quml-mcq-solutions .fs-18,::ng-deep quml-mcq-solutions .fs-19,::ng-deep quml-mcq-solutions .fs-20,::ng-deep quml-mcq-solutions .fs-21,::ng-deep quml-mcq-solutions .fs-22,::ng-deep quml-mcq-solutions .fs-23,::ng-deep quml-mcq-solutions .fs-24,::ng-deep quml-mcq-solutions .fs-25,::ng-deep quml-mcq-solutions .fs-26,::ng-deep quml-mcq-solutions .fs-27,::ng-deep quml-mcq-solutions .fs-28,::ng-deep quml-mcq-solutions .fs-29,::ng-deep quml-mcq-solutions .fs-30,::ng-deep quml-mcq-solutions .fs-36{line-height:normal}::ng-deep .startpage__instr-desc .fs-8,::ng-deep .quml-mcq .fs-8,::ng-deep .quml-sa .fs-8,::ng-deep quml-sa .fs-8,::ng-deep quml-mcq-solutions .fs-8{font-size:.5rem}::ng-deep .startpage__instr-desc .fs-9,::ng-deep .quml-mcq .fs-9,::ng-deep .quml-sa .fs-9,::ng-deep quml-sa .fs-9,::ng-deep quml-mcq-solutions .fs-9{font-size:.563rem}::ng-deep .startpage__instr-desc .fs-10,::ng-deep .quml-mcq .fs-10,::ng-deep .quml-sa .fs-10,::ng-deep quml-sa .fs-10,::ng-deep quml-mcq-solutions .fs-10{font-size:.625rem}::ng-deep .startpage__instr-desc .fs-11,::ng-deep .quml-mcq .fs-11,::ng-deep .quml-sa .fs-11,::ng-deep quml-sa .fs-11,::ng-deep quml-mcq-solutions .fs-11{font-size:.688rem}::ng-deep .startpage__instr-desc .fs-12,::ng-deep .quml-mcq .fs-12,::ng-deep .quml-sa .fs-12,::ng-deep quml-sa .fs-12,::ng-deep quml-mcq-solutions .fs-12{font-size:.75rem}::ng-deep .startpage__instr-desc .fs-13,::ng-deep .quml-mcq .fs-13,::ng-deep .quml-sa .fs-13,::ng-deep quml-sa .fs-13,::ng-deep quml-mcq-solutions .fs-13{font-size:.813rem}::ng-deep .startpage__instr-desc .fs-14,::ng-deep .quml-mcq .fs-14,::ng-deep .quml-sa .fs-14,::ng-deep quml-sa .fs-14,::ng-deep quml-mcq-solutions .fs-14{font-size:.875rem}::ng-deep .startpage__instr-desc .fs-15,::ng-deep .quml-mcq .fs-15,::ng-deep .quml-sa .fs-15,::ng-deep quml-sa .fs-15,::ng-deep quml-mcq-solutions .fs-15{font-size:.938rem}::ng-deep .startpage__instr-desc .fs-16,::ng-deep .quml-mcq .fs-16,::ng-deep .quml-sa .fs-16,::ng-deep quml-sa .fs-16,::ng-deep quml-mcq-solutions .fs-16{font-size:1rem}::ng-deep .startpage__instr-desc .fs-17,::ng-deep .quml-mcq .fs-17,::ng-deep .quml-sa .fs-17,::ng-deep quml-sa .fs-17,::ng-deep quml-mcq-solutions .fs-17{font-size:1.063rem}::ng-deep .startpage__instr-desc .fs-18,::ng-deep .quml-mcq .fs-18,::ng-deep .quml-sa .fs-18,::ng-deep quml-sa .fs-18,::ng-deep quml-mcq-solutions .fs-18{font-size:1.125rem}::ng-deep .startpage__instr-desc .fs-19,::ng-deep .quml-mcq .fs-19,::ng-deep .quml-sa .fs-19,::ng-deep quml-sa .fs-19,::ng-deep quml-mcq-solutions .fs-19{font-size:1.188rem}::ng-deep .startpage__instr-desc .fs-20,::ng-deep .quml-mcq .fs-20,::ng-deep .quml-sa .fs-20,::ng-deep quml-sa .fs-20,::ng-deep quml-mcq-solutions .fs-20{font-size:1.25rem}::ng-deep .startpage__instr-desc .fs-21,::ng-deep .quml-mcq .fs-21,::ng-deep .quml-sa .fs-21,::ng-deep quml-sa .fs-21,::ng-deep quml-mcq-solutions .fs-21{font-size:1.313rem}::ng-deep .startpage__instr-desc .fs-22,::ng-deep .quml-mcq .fs-22,::ng-deep .quml-sa .fs-22,::ng-deep quml-sa .fs-22,::ng-deep quml-mcq-solutions .fs-22{font-size:1.375rem}::ng-deep .startpage__instr-desc .fs-23,::ng-deep .quml-mcq .fs-23,::ng-deep .quml-sa .fs-23,::ng-deep quml-sa .fs-23,::ng-deep quml-mcq-solutions .fs-23{font-size:1.438rem}::ng-deep .startpage__instr-desc .fs-24,::ng-deep .quml-mcq .fs-24,::ng-deep .quml-sa .fs-24,::ng-deep quml-sa .fs-24,::ng-deep quml-mcq-solutions .fs-24{font-size:1.5rem}::ng-deep .startpage__instr-desc .fs-25,::ng-deep .quml-mcq .fs-25,::ng-deep .quml-sa .fs-25,::ng-deep quml-sa .fs-25,::ng-deep quml-mcq-solutions .fs-25{font-size:1.563rem}::ng-deep .startpage__instr-desc .fs-26,::ng-deep .quml-mcq .fs-26,::ng-deep .quml-sa .fs-26,::ng-deep quml-sa .fs-26,::ng-deep quml-mcq-solutions .fs-26{font-size:1.625rem}::ng-deep .startpage__instr-desc .fs-27,::ng-deep .quml-mcq .fs-27,::ng-deep .quml-sa .fs-27,::ng-deep quml-sa .fs-27,::ng-deep quml-mcq-solutions .fs-27{font-size:1.688rem}::ng-deep .startpage__instr-desc .fs-28,::ng-deep .quml-mcq .fs-28,::ng-deep .quml-sa .fs-28,::ng-deep quml-sa .fs-28,::ng-deep quml-mcq-solutions .fs-28{font-size:1.75rem}::ng-deep .startpage__instr-desc .fs-29,::ng-deep .quml-mcq .fs-29,::ng-deep .quml-sa .fs-29,::ng-deep quml-sa .fs-29,::ng-deep quml-mcq-solutions .fs-29{font-size:1.813rem}::ng-deep .startpage__instr-desc .fs-30,::ng-deep .quml-mcq .fs-30,::ng-deep .quml-sa .fs-30,::ng-deep quml-sa .fs-30,::ng-deep quml-mcq-solutions .fs-30{font-size:1.875rem}::ng-deep .startpage__instr-desc .fs-36,::ng-deep .quml-mcq .fs-36,::ng-deep .quml-sa .fs-36,::ng-deep quml-sa .fs-36,::ng-deep quml-mcq-solutions .fs-36{font-size:2.25rem}::ng-deep .startpage__instr-desc .text-left,::ng-deep .quml-mcq .text-left,::ng-deep .quml-sa .text-left,::ng-deep quml-sa .text-left,::ng-deep quml-mcq-solutions .text-left{text-align:left}::ng-deep .startpage__instr-desc .text-center,::ng-deep .quml-mcq .text-center,::ng-deep .quml-sa .text-center,::ng-deep quml-sa .text-center,::ng-deep quml-mcq-solutions .text-center{text-align:center}::ng-deep .startpage__instr-desc .text-right,::ng-deep .quml-mcq .text-right,::ng-deep .quml-sa .text-right,::ng-deep quml-sa .text-right,::ng-deep quml-mcq-solutions .text-right{text-align:right}::ng-deep .startpage__instr-desc .image-style-align-right,::ng-deep .quml-mcq .image-style-align-right,::ng-deep .quml-sa .image-style-align-right,::ng-deep quml-sa .image-style-align-right,::ng-deep quml-mcq-solutions .image-style-align-right{float:right;text-align:right;margin-left:.5rem}::ng-deep .startpage__instr-desc .image-style-align-left,::ng-deep .quml-mcq .image-style-align-left,::ng-deep .quml-sa .image-style-align-left,::ng-deep quml-sa .image-style-align-left,::ng-deep quml-mcq-solutions .image-style-align-left{float:left;text-align:left;margin-right:.5rem}::ng-deep .startpage__instr-desc .image,::ng-deep .startpage__instr-desc figure.image,::ng-deep .quml-mcq .image,::ng-deep .quml-mcq figure.image,::ng-deep .quml-sa .image,::ng-deep .quml-sa figure.image,::ng-deep quml-sa .image,::ng-deep quml-sa figure.image,::ng-deep quml-mcq-solutions .image,::ng-deep quml-mcq-solutions figure.image{display:table;clear:both;text-align:center;margin:.5rem auto;position:relative}::ng-deep .startpage__instr-desc figure.image.resize-original,::ng-deep .startpage__instr-desc figure.image,::ng-deep .quml-mcq figure.image.resize-original,::ng-deep .quml-mcq figure.image,::ng-deep .quml-sa figure.image.resize-original,::ng-deep .quml-sa figure.image,::ng-deep quml-sa figure.image.resize-original,::ng-deep quml-sa figure.image,::ng-deep quml-mcq-solutions figure.image.resize-original,::ng-deep quml-mcq-solutions figure.image{width:auto;height:auto;overflow:visible}::ng-deep .startpage__instr-desc figure.image img,::ng-deep .quml-mcq figure.image img,::ng-deep .quml-sa figure.image img,::ng-deep quml-sa figure.image img,::ng-deep quml-mcq-solutions figure.image img{width:auto}::ng-deep .startpage__instr-desc figure.image.resize-original img,::ng-deep .quml-mcq figure.image.resize-original img,::ng-deep .quml-sa figure.image.resize-original img,::ng-deep quml-sa figure.image.resize-original img,::ng-deep quml-mcq-solutions figure.image.resize-original img{width:auto;height:auto}::ng-deep .startpage__instr-desc .image img,::ng-deep .quml-mcq .image img,::ng-deep .quml-sa .image img,::ng-deep quml-sa .image img,::ng-deep quml-mcq-solutions .image img{display:block;margin:0 auto;max-width:100%;min-width:50px}::ng-deep .startpage__instr-desc figure.image.resize-25,::ng-deep .quml-mcq figure.image.resize-25,::ng-deep .quml-sa figure.image.resize-25,::ng-deep quml-sa figure.image.resize-25,::ng-deep quml-mcq-solutions figure.image.resize-25{width:25%;height:auto}::ng-deep .startpage__instr-desc figure.image.resize-50,::ng-deep .quml-mcq figure.image.resize-50,::ng-deep .quml-sa figure.image.resize-50,::ng-deep quml-sa figure.image.resize-50,::ng-deep quml-mcq-solutions figure.image.resize-50{width:50%;height:auto}::ng-deep .startpage__instr-desc figure.image.resize-75,::ng-deep .quml-mcq figure.image.resize-75,::ng-deep .quml-sa figure.image.resize-75,::ng-deep quml-sa figure.image.resize-75,::ng-deep quml-mcq-solutions figure.image.resize-75{width:75%;height:auto}::ng-deep .startpage__instr-desc figure.image.resize-100,::ng-deep .quml-mcq figure.image.resize-100,::ng-deep .quml-sa figure.image.resize-100,::ng-deep quml-sa figure.image.resize-100,::ng-deep quml-mcq-solutions figure.image.resize-100{width:100%;height:auto}::ng-deep .startpage__instr-desc figure.table table,::ng-deep .quml-mcq figure.table table,::ng-deep .quml-sa figure.table table,::ng-deep quml-sa figure.table table,::ng-deep quml-mcq-solutions figure.table table{border-right:.0625rem solid var(--gray-100)}::ng-deep .startpage__instr-desc figure.table table,::ng-deep .startpage__instr-desc figure.table table tr td,::ng-deep .startpage__instr-desc figure.table table tr th,::ng-deep .quml-mcq figure.table table,::ng-deep .quml-mcq figure.table table tr td,::ng-deep .quml-mcq figure.table table tr th,::ng-deep .quml-sa figure.table table,::ng-deep .quml-sa figure.table table tr td,::ng-deep .quml-sa figure.table table tr th,::ng-deep quml-sa figure.table table,::ng-deep quml-sa figure.table table tr td,::ng-deep quml-sa figure.table table tr th,::ng-deep quml-mcq-solutions figure.table table,::ng-deep quml-mcq-solutions figure.table table tr td,::ng-deep quml-mcq-solutions figure.table table tr th{border:.0625rem solid var(--black);border-collapse:collapse}::ng-deep .startpage__instr-desc figure.table table,::ng-deep .quml-mcq figure.table table,::ng-deep .quml-sa figure.table table,::ng-deep quml-sa figure.table table,::ng-deep quml-mcq-solutions figure.table table{width:100%;background:var(--white);border:.0625rem solid var(--gray-100);box-shadow:none;border-radius:.25rem .25rem 0 0;text-align:left;color:var(--gray);border-collapse:separate;border-spacing:0;table-layout:fixed}::ng-deep .startpage__instr-desc figure.table table thead tr th,::ng-deep .quml-mcq figure.table table thead tr th,::ng-deep .quml-sa figure.table table thead tr th,::ng-deep quml-sa figure.table table thead tr th,::ng-deep quml-mcq-solutions figure.table table thead tr th{font-size:.875rem;padding:1rem;background-color:var(--primary-100);position:relative;height:2.5rem;border:0px;border-bottom:.0625rem solid var(--gray-100);border-right:.0625rem solid var(--gray-100);font-weight:700;color:var(--primary-color);text-transform:uppercase}::ng-deep .startpage__instr-desc figure.table table thead tr th:first-child,::ng-deep .quml-mcq figure.table table thead tr th:first-child,::ng-deep .quml-sa figure.table table thead tr th:first-child,::ng-deep quml-sa figure.table table thead tr th:first-child,::ng-deep quml-mcq-solutions figure.table table thead tr th:first-child{border-top-left-radius:.25rem}::ng-deep .startpage__instr-desc figure.table table thead tr th:last-child,::ng-deep .quml-mcq figure.table table thead tr th:last-child,::ng-deep .quml-sa figure.table table thead tr th:last-child,::ng-deep quml-sa figure.table table thead tr th:last-child,::ng-deep quml-mcq-solutions figure.table table thead tr th:last-child{border-top-right-radius:.25rem;border-right:0rem solid var(--gray-100)}::ng-deep .startpage__instr-desc figure.table table tbody tr:nth-child(2n),::ng-deep .quml-mcq figure.table table tbody tr:nth-child(2n),::ng-deep .quml-sa figure.table table tbody tr:nth-child(2n),::ng-deep quml-sa figure.table table tbody tr:nth-child(2n),::ng-deep quml-mcq-solutions figure.table table tbody tr:nth-child(2n){background-color:var(--gray-0)}::ng-deep .startpage__instr-desc figure.table table tbody tr:hover,::ng-deep .quml-mcq figure.table table tbody tr:hover,::ng-deep .quml-sa figure.table table tbody tr:hover,::ng-deep quml-sa figure.table table tbody tr:hover,::ng-deep quml-mcq-solutions figure.table table tbody tr:hover{background:var(--primary-0);color:rgba(var(--rc-rgba-gray),.95);cursor:pointer}::ng-deep .startpage__instr-desc figure.table table tbody tr td,::ng-deep .quml-mcq figure.table table tbody tr td,::ng-deep .quml-sa figure.table table tbody tr td,::ng-deep quml-sa figure.table table tbody tr td,::ng-deep quml-mcq-solutions figure.table table tbody tr td{font-size:.875rem;padding:1rem;color:var(--gray);height:3.5rem;border:0px;border-bottom:.0625rem solid var(--gray-100);border-right:.0625rem solid var(--gray-100);word-break:break-word;line-height:normal}::ng-deep .startpage__instr-desc figure.table table tbody tr td:last-child,::ng-deep .quml-mcq figure.table table tbody tr td:last-child,::ng-deep .quml-sa figure.table table tbody tr td:last-child,::ng-deep quml-sa figure.table table tbody tr td:last-child,::ng-deep quml-mcq-solutions figure.table table tbody tr td:last-child{border-right:0rem solid var(--gray-100)}::ng-deep .startpage__instr-desc figure.table table tbody tr td p,::ng-deep .quml-mcq figure.table table tbody tr td p,::ng-deep .quml-sa figure.table table tbody tr td p,::ng-deep quml-sa figure.table table tbody tr td p,::ng-deep quml-mcq-solutions figure.table table tbody tr td p{margin-bottom:0!important}::ng-deep .startpage__instr-desc figure.table table tbody tr:last-child td,::ng-deep .quml-mcq figure.table table tbody tr:last-child td,::ng-deep .quml-sa figure.table table tbody tr:last-child td,::ng-deep quml-sa figure.table table tbody tr:last-child td,::ng-deep quml-mcq-solutions figure.table table tbody tr:last-child td{border-bottom:none}::ng-deep .startpage__instr-desc figure.table table tbody tr:last-child td:first-child,::ng-deep .quml-mcq figure.table table tbody tr:last-child td:first-child,::ng-deep .quml-sa figure.table table tbody tr:last-child td:first-child,::ng-deep quml-sa figure.table table tbody tr:last-child td:first-child,::ng-deep quml-mcq-solutions figure.table table tbody tr:last-child td:first-child{border-bottom-left-radius:.25rem}::ng-deep .startpage__instr-desc figure.table table tbody tr:last-child td:last-child,::ng-deep .quml-mcq figure.table table tbody tr:last-child td:last-child,::ng-deep .quml-sa figure.table table tbody tr:last-child td:last-child,::ng-deep quml-sa figure.table table tbody tr:last-child td:last-child,::ng-deep quml-mcq-solutions figure.table table tbody tr:last-child td:last-child{border-bottom-right-radius:.25rem}::ng-deep .startpage__instr-desc ul,::ng-deep .startpage__instr-desc ol,::ng-deep .quml-mcq ul,::ng-deep .quml-mcq ol,::ng-deep .quml-sa ul,::ng-deep .quml-sa ol,::ng-deep quml-sa ul,::ng-deep quml-sa ol,::ng-deep quml-mcq-solutions ul,::ng-deep quml-mcq-solutions ol{margin-top:.5rem}::ng-deep .startpage__instr-desc ul li,::ng-deep .startpage__instr-desc ol li,::ng-deep .quml-mcq ul li,::ng-deep .quml-mcq ol li,::ng-deep .quml-sa ul li,::ng-deep .quml-sa ol li,::ng-deep quml-sa ul li,::ng-deep quml-sa ol li,::ng-deep quml-mcq-solutions ul li,::ng-deep quml-mcq-solutions ol li{margin:.5rem;font-weight:400;line-height:normal}::ng-deep .startpage__instr-desc ul,::ng-deep .quml-mcq ul,::ng-deep .quml-sa ul,::ng-deep quml-sa ul,::ng-deep quml-mcq-solutions ul{list-style-type:disc}::ng-deep .startpage__instr-desc h1,::ng-deep .startpage__instr-desc h2,::ng-deep .startpage__instr-desc h3,::ng-deep .startpage__instr-desc h4,::ng-deep .startpage__instr-desc h5,::ng-deep .startpage__instr-desc h6,::ng-deep .quml-mcq h1,::ng-deep .quml-mcq h2,::ng-deep .quml-mcq h3,::ng-deep .quml-mcq h4,::ng-deep .quml-mcq h5,::ng-deep .quml-mcq h6,::ng-deep .quml-sa h1,::ng-deep .quml-sa h2,::ng-deep .quml-sa h3,::ng-deep .quml-sa h4,::ng-deep .quml-sa h5,::ng-deep .quml-sa h6,::ng-deep quml-sa h1,::ng-deep quml-sa h2,::ng-deep quml-sa h3,::ng-deep quml-sa h4,::ng-deep quml-sa h5,::ng-deep quml-sa h6,::ng-deep quml-mcq-solutions h1,::ng-deep quml-mcq-solutions h2,::ng-deep quml-mcq-solutions h3,::ng-deep quml-mcq-solutions h4,::ng-deep quml-mcq-solutions h5,::ng-deep quml-mcq-solutions h6{color:var(--primary-color);line-height:normal;margin-bottom:1rem}::ng-deep .startpage__instr-desc p,::ng-deep .startpage__instr-desc span,::ng-deep .quml-mcq p,::ng-deep .quml-mcq span,::ng-deep .quml-sa p,::ng-deep .quml-sa span,::ng-deep quml-sa p,::ng-deep quml-sa span,::ng-deep quml-mcq-solutions p,::ng-deep quml-mcq-solutions span{color:var(--quml-mcq-title-txt)}::ng-deep .startpage__instr-desc p strong,::ng-deep .startpage__instr-desc p span strong,::ng-deep .quml-mcq p strong,::ng-deep .quml-mcq p span strong,::ng-deep .quml-sa p strong,::ng-deep .quml-sa p span strong,::ng-deep quml-sa p strong,::ng-deep quml-sa p span strong,::ng-deep quml-mcq-solutions p strong,::ng-deep quml-mcq-solutions p span strong{font-weight:700}::ng-deep .startpage__instr-desc p span u,::ng-deep .startpage__instr-desc p u,::ng-deep .quml-mcq p span u,::ng-deep .quml-mcq p u,::ng-deep .quml-sa p span u,::ng-deep .quml-sa p u,::ng-deep quml-sa p span u,::ng-deep quml-sa p u,::ng-deep quml-mcq-solutions p span u,::ng-deep quml-mcq-solutions p u{text-decoration:underline}::ng-deep .startpage__instr-desc p span i,::ng-deep .startpage__instr-desc p i,::ng-deep .quml-mcq p span i,::ng-deep .quml-mcq p i,::ng-deep .quml-sa p span i,::ng-deep .quml-sa p i,::ng-deep quml-sa p span i,::ng-deep quml-sa p i,::ng-deep quml-mcq-solutions p span i,::ng-deep quml-mcq-solutions p i{font-style:italic}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: TimerComponent, selector: "quml-timer" }, { kind: "component", type: ContentComponent, selector: "quml-content" }, { kind: "component", type: StartpagestariconComponent, selector: "quml-startpagestaricon" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: StartpageComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-startpage', template: "<div class=\"startpage\" tabindex=\"0\">\n <div class=\"startpage__header\" [attr.aria-label]=\"'question set title '+contentName\">\n {{contentName}}\n </div>\n <div class=\"startpage__content\">\n <div class=\"startpage__metadata\">\n <div class=\"startpage__md-heading\">Questions</div>\n <div class=\"startpage__md-scores\">\n <quml-content class=\"startpage__md-icon\"></quml-content>\n <span class=\"startpage__md-desc\">{{totalNoOfQuestions}}</span>\n </div>\n </div>\n <div class=\"startpage__metadata\" *ngIf=\"showTimer && time > 0\">\n <div class=\"startpage__md-heading\">Minutes</div>\n <div class=\"startpage__md-scores\">\n <quml-timer class=\"startpage__md-icon\"></quml-timer>\n <span class=\"startpage__md-desc\">{{minutes}}:{{seconds}}</span>\n </div>\n </div>\n <div class=\"startpage__metadata\" *ngIf=\"points\">\n <div class=\"startpage__md-heading\">Points</div>\n <div class=\"startpage__md-scores\">\n <quml-startpagestaricon class=\"startpage__md-icon\">i</quml-startpagestaricon>\n <span class=\"startpage__md-desc\">{{points}}</span>\n </div>\n </div>\n </div>\n <ng-container *ngIf=\"instructions\">\n <div class=\"startpage__instruction\">\n <div class=\"startpage__instr-title\">Instructions</div>\n <div [innerHTML]=\"instructions | safeHtml\" class=\"startpage__instr-desc\"></div>\n </div>\n </ng-container>\n</div>", styles: ["::ng-deep :root{--quml-scoreboard-sub-title: #6D7278;--quml-color-primary-contrast: #333;--quml-zoom-btn-txt: #eee;--quml-zoom-btn-hover: #f2f2f2}.startpage__header{color:var(--primary-color);font-size:1.125rem;font-weight:700;margin:1rem 0;line-height:normal}.startpage__content{display:flex;border-bottom:.0625rem solid var(--quml-zoom-btn-txt);align-items:center;line-height:normal;margin-bottom:1rem;padding-bottom:1.5rem}.startpage__metadata{margin:0 4rem .5rem 0}.startpage__md-heading{color:var(--quml-scoreboard-sub-title);font-size:.75rem;line-height:normal;margin-bottom:.5rem}.startpage__md-scores,.startpage__md-icon{display:flex;align-items:center}.startpage__md-desc{color:var(--primary-color);font-size:1.125rem;font-weight:700;margin-left:.5rem}.startpage__instr-title{color:var(--quml-scoreboard-sub-title);font-size:.75rem;font-weight:700;letter-spacing:0;line-height:18px}.startpage__instr-desc{padding:1rem 0;color:var(--quml-color-primary-contrast);font-size:.75rem;letter-spacing:0;line-height:17px}::ng-deep .startpage__instr-desc ul{list-style-type:disc}::ng-deep .startpage__instr-desc li{margin-bottom:.5rem;margin-left:.5rem}::ng-deep .startpage__instr-desc table{width:100%}::ng-deep .startpage__instr-desc th,::ng-deep .startpage__instr-desc td{border:.0625rem solid #ddd;padding:.5rem}::ng-deep .startpage__instr-desc tr:nth-child(2n){background-color:var(--quml-zoom-btn-hover)}@media only screen and (max-width: 480px){.startpage__header{margin-top:1.5rem}}\n", "::ng-deep :root{--quml-mcq-title-txt: #131415}::ng-deep .startpage__instr-desc .mcq-title,::ng-deep .quml-mcq .mcq-title,::ng-deep .quml-sa .mcq-title,::ng-deep quml-sa .mcq-title,::ng-deep quml-mcq-solutions .mcq-title{color:var(--quml-mcq-title-txt)}::ng-deep .startpage__instr-desc .fs-8,::ng-deep .startpage__instr-desc .fs-9,::ng-deep .startpage__instr-desc .fs-10,::ng-deep .startpage__instr-desc .fs-11,::ng-deep .startpage__instr-desc .fs-12,::ng-deep .startpage__instr-desc .fs-13,::ng-deep .startpage__instr-desc .fs-14,::ng-deep .startpage__instr-desc .fs-15,::ng-deep .startpage__instr-desc .fs-16,::ng-deep .startpage__instr-desc .fs-17,::ng-deep .startpage__instr-desc .fs-18,::ng-deep .startpage__instr-desc .fs-19,::ng-deep .startpage__instr-desc .fs-20,::ng-deep .startpage__instr-desc .fs-21,::ng-deep .startpage__instr-desc .fs-22,::ng-deep .startpage__instr-desc .fs-23,::ng-deep .startpage__instr-desc .fs-24,::ng-deep .startpage__instr-desc .fs-25,::ng-deep .startpage__instr-desc .fs-26,::ng-deep .startpage__instr-desc .fs-27,::ng-deep .startpage__instr-desc .fs-28,::ng-deep .startpage__instr-desc .fs-29,::ng-deep .startpage__instr-desc .fs-30,::ng-deep .startpage__instr-desc .fs-36,::ng-deep .quml-mcq .fs-8,::ng-deep .quml-mcq .fs-9,::ng-deep .quml-mcq .fs-10,::ng-deep .quml-mcq .fs-11,::ng-deep .quml-mcq .fs-12,::ng-deep .quml-mcq .fs-13,::ng-deep .quml-mcq .fs-14,::ng-deep .quml-mcq .fs-15,::ng-deep .quml-mcq .fs-16,::ng-deep .quml-mcq .fs-17,::ng-deep .quml-mcq .fs-18,::ng-deep .quml-mcq .fs-19,::ng-deep .quml-mcq .fs-20,::ng-deep .quml-mcq .fs-21,::ng-deep .quml-mcq .fs-22,::ng-deep .quml-mcq .fs-23,::ng-deep .quml-mcq .fs-24,::ng-deep .quml-mcq .fs-25,::ng-deep .quml-mcq .fs-26,::ng-deep .quml-mcq .fs-27,::ng-deep .quml-mcq .fs-28,::ng-deep .quml-mcq .fs-29,::ng-deep .quml-mcq .fs-30,::ng-deep .quml-mcq .fs-36,::ng-deep .quml-sa .fs-8,::ng-deep .quml-sa .fs-9,::ng-deep .quml-sa .fs-10,::ng-deep .quml-sa .fs-11,::ng-deep .quml-sa .fs-12,::ng-deep .quml-sa .fs-13,::ng-deep .quml-sa .fs-14,::ng-deep .quml-sa .fs-15,::ng-deep .quml-sa .fs-16,::ng-deep .quml-sa .fs-17,::ng-deep .quml-sa .fs-18,::ng-deep .quml-sa .fs-19,::ng-deep .quml-sa .fs-20,::ng-deep .quml-sa .fs-21,::ng-deep .quml-sa .fs-22,::ng-deep .quml-sa .fs-23,::ng-deep .quml-sa .fs-24,::ng-deep .quml-sa .fs-25,::ng-deep .quml-sa .fs-26,::ng-deep .quml-sa .fs-27,::ng-deep .quml-sa .fs-28,::ng-deep .quml-sa .fs-29,::ng-deep .quml-sa .fs-30,::ng-deep .quml-sa .fs-36,::ng-deep quml-sa .fs-8,::ng-deep quml-sa .fs-9,::ng-deep quml-sa .fs-10,::ng-deep quml-sa .fs-11,::ng-deep quml-sa .fs-12,::ng-deep quml-sa .fs-13,::ng-deep quml-sa .fs-14,::ng-deep quml-sa .fs-15,::ng-deep quml-sa .fs-16,::ng-deep quml-sa .fs-17,::ng-deep quml-sa .fs-18,::ng-deep quml-sa .fs-19,::ng-deep quml-sa .fs-20,::ng-deep quml-sa .fs-21,::ng-deep quml-sa .fs-22,::ng-deep quml-sa .fs-23,::ng-deep quml-sa .fs-24,::ng-deep quml-sa .fs-25,::ng-deep quml-sa .fs-26,::ng-deep quml-sa .fs-27,::ng-deep quml-sa .fs-28,::ng-deep quml-sa .fs-29,::ng-deep quml-sa .fs-30,::ng-deep quml-sa .fs-36,::ng-deep quml-mcq-solutions .fs-8,::ng-deep quml-mcq-solutions .fs-9,::ng-deep quml-mcq-solutions .fs-10,::ng-deep quml-mcq-solutions .fs-11,::ng-deep quml-mcq-solutions .fs-12,::ng-deep quml-mcq-solutions .fs-13,::ng-deep quml-mcq-solutions .fs-14,::ng-deep quml-mcq-solutions .fs-15,::ng-deep quml-mcq-solutions .fs-16,::ng-deep quml-mcq-solutions .fs-17,::ng-deep quml-mcq-solutions .fs-18,::ng-deep quml-mcq-solutions .fs-19,::ng-deep quml-mcq-solutions .fs-20,::ng-deep quml-mcq-solutions .fs-21,::ng-deep quml-mcq-solutions .fs-22,::ng-deep quml-mcq-solutions .fs-23,::ng-deep quml-mcq-solutions .fs-24,::ng-deep quml-mcq-solutions .fs-25,::ng-deep quml-mcq-solutions .fs-26,::ng-deep quml-mcq-solutions .fs-27,::ng-deep quml-mcq-solutions .fs-28,::ng-deep quml-mcq-solutions .fs-29,::ng-deep quml-mcq-solutions .fs-30,::ng-deep quml-mcq-solutions .fs-36{line-height:normal}::ng-deep .startpage__instr-desc .fs-8,::ng-deep .quml-mcq .fs-8,::ng-deep .quml-sa .fs-8,::ng-deep quml-sa .fs-8,::ng-deep quml-mcq-solutions .fs-8{font-size:.5rem}::ng-deep .startpage__instr-desc .fs-9,::ng-deep .quml-mcq .fs-9,::ng-deep .quml-sa .fs-9,::ng-deep quml-sa .fs-9,::ng-deep quml-mcq-solutions .fs-9{font-size:.563rem}::ng-deep .startpage__instr-desc .fs-10,::ng-deep .quml-mcq .fs-10,::ng-deep .quml-sa .fs-10,::ng-deep quml-sa .fs-10,::ng-deep quml-mcq-solutions .fs-10{font-size:.625rem}::ng-deep .startpage__instr-desc .fs-11,::ng-deep .quml-mcq .fs-11,::ng-deep .quml-sa .fs-11,::ng-deep quml-sa .fs-11,::ng-deep quml-mcq-solutions .fs-11{font-size:.688rem}::ng-deep .startpage__instr-desc .fs-12,::ng-deep .quml-mcq .fs-12,::ng-deep .quml-sa .fs-12,::ng-deep quml-sa .fs-12,::ng-deep quml-mcq-solutions .fs-12{font-size:.75rem}::ng-deep .startpage__instr-desc .fs-13,::ng-deep .quml-mcq .fs-13,::ng-deep .quml-sa .fs-13,::ng-deep quml-sa .fs-13,::ng-deep quml-mcq-solutions .fs-13{font-size:.813rem}::ng-deep .startpage__instr-desc .fs-14,::ng-deep .quml-mcq .fs-14,::ng-deep .quml-sa .fs-14,::ng-deep quml-sa .fs-14,::ng-deep quml-mcq-solutions .fs-14{font-size:.875rem}::ng-deep .startpage__instr-desc .fs-15,::ng-deep .quml-mcq .fs-15,::ng-deep .quml-sa .fs-15,::ng-deep quml-sa .fs-15,::ng-deep quml-mcq-solutions .fs-15{font-size:.938rem}::ng-deep .startpage__instr-desc .fs-16,::ng-deep .quml-mcq .fs-16,::ng-deep .quml-sa .fs-16,::ng-deep quml-sa .fs-16,::ng-deep quml-mcq-solutions .fs-16{font-size:1rem}::ng-deep .startpage__instr-desc .fs-17,::ng-deep .quml-mcq .fs-17,::ng-deep .quml-sa .fs-17,::ng-deep quml-sa .fs-17,::ng-deep quml-mcq-solutions .fs-17{font-size:1.063rem}::ng-deep .startpage__instr-desc .fs-18,::ng-deep .quml-mcq .fs-18,::ng-deep .quml-sa .fs-18,::ng-deep quml-sa .fs-18,::ng-deep quml-mcq-solutions .fs-18{font-size:1.125rem}::ng-deep .startpage__instr-desc .fs-19,::ng-deep .quml-mcq .fs-19,::ng-deep .quml-sa .fs-19,::ng-deep quml-sa .fs-19,::ng-deep quml-mcq-solutions .fs-19{font-size:1.188rem}::ng-deep .startpage__instr-desc .fs-20,::ng-deep .quml-mcq .fs-20,::ng-deep .quml-sa .fs-20,::ng-deep quml-sa .fs-20,::ng-deep quml-mcq-solutions .fs-20{font-size:1.25rem}::ng-deep .startpage__instr-desc .fs-21,::ng-deep .quml-mcq .fs-21,::ng-deep .quml-sa .fs-21,::ng-deep quml-sa .fs-21,::ng-deep quml-mcq-solutions .fs-21{font-size:1.313rem}::ng-deep .startpage__instr-desc .fs-22,::ng-deep .quml-mcq .fs-22,::ng-deep .quml-sa .fs-22,::ng-deep quml-sa .fs-22,::ng-deep quml-mcq-solutions .fs-22{font-size:1.375rem}::ng-deep .startpage__instr-desc .fs-23,::ng-deep .quml-mcq .fs-23,::ng-deep .quml-sa .fs-23,::ng-deep quml-sa .fs-23,::ng-deep quml-mcq-solutions .fs-23{font-size:1.438rem}::ng-deep .startpage__instr-desc .fs-24,::ng-deep .quml-mcq .fs-24,::ng-deep .quml-sa .fs-24,::ng-deep quml-sa .fs-24,::ng-deep quml-mcq-solutions .fs-24{font-size:1.5rem}::ng-deep .startpage__instr-desc .fs-25,::ng-deep .quml-mcq .fs-25,::ng-deep .quml-sa .fs-25,::ng-deep quml-sa .fs-25,::ng-deep quml-mcq-solutions .fs-25{font-size:1.563rem}::ng-deep .startpage__instr-desc .fs-26,::ng-deep .quml-mcq .fs-26,::ng-deep .quml-sa .fs-26,::ng-deep quml-sa .fs-26,::ng-deep quml-mcq-solutions .fs-26{font-size:1.625rem}::ng-deep .startpage__instr-desc .fs-27,::ng-deep .quml-mcq .fs-27,::ng-deep .quml-sa .fs-27,::ng-deep quml-sa .fs-27,::ng-deep quml-mcq-solutions .fs-27{font-size:1.688rem}::ng-deep .startpage__instr-desc .fs-28,::ng-deep .quml-mcq .fs-28,::ng-deep .quml-sa .fs-28,::ng-deep quml-sa .fs-28,::ng-deep quml-mcq-solutions .fs-28{font-size:1.75rem}::ng-deep .startpage__instr-desc .fs-29,::ng-deep .quml-mcq .fs-29,::ng-deep .quml-sa .fs-29,::ng-deep quml-sa .fs-29,::ng-deep quml-mcq-solutions .fs-29{font-size:1.813rem}::ng-deep .startpage__instr-desc .fs-30,::ng-deep .quml-mcq .fs-30,::ng-deep .quml-sa .fs-30,::ng-deep quml-sa .fs-30,::ng-deep quml-mcq-solutions .fs-30{font-size:1.875rem}::ng-deep .startpage__instr-desc .fs-36,::ng-deep .quml-mcq .fs-36,::ng-deep .quml-sa .fs-36,::ng-deep quml-sa .fs-36,::ng-deep quml-mcq-solutions .fs-36{font-size:2.25rem}::ng-deep .startpage__instr-desc .text-left,::ng-deep .quml-mcq .text-left,::ng-deep .quml-sa .text-left,::ng-deep quml-sa .text-left,::ng-deep quml-mcq-solutions .text-left{text-align:left}::ng-deep .startpage__instr-desc .text-center,::ng-deep .quml-mcq .text-center,::ng-deep .quml-sa .text-center,::ng-deep quml-sa .text-center,::ng-deep quml-mcq-solutions .text-center{text-align:center}::ng-deep .startpage__instr-desc .text-right,::ng-deep .quml-mcq .text-right,::ng-deep .quml-sa .text-right,::ng-deep quml-sa .text-right,::ng-deep quml-mcq-solutions .text-right{text-align:right}::ng-deep .startpage__instr-desc .image-style-align-right,::ng-deep .quml-mcq .image-style-align-right,::ng-deep .quml-sa .image-style-align-right,::ng-deep quml-sa .image-style-align-right,::ng-deep quml-mcq-solutions .image-style-align-right{float:right;text-align:right;margin-left:.5rem}::ng-deep .startpage__instr-desc .image-style-align-left,::ng-deep .quml-mcq .image-style-align-left,::ng-deep .quml-sa .image-style-align-left,::ng-deep quml-sa .image-style-align-left,::ng-deep quml-mcq-solutions .image-style-align-left{float:left;text-align:left;margin-right:.5rem}::ng-deep .startpage__instr-desc .image,::ng-deep .startpage__instr-desc figure.image,::ng-deep .quml-mcq .image,::ng-deep .quml-mcq figure.image,::ng-deep .quml-sa .image,::ng-deep .quml-sa figure.image,::ng-deep quml-sa .image,::ng-deep quml-sa figure.image,::ng-deep quml-mcq-solutions .image,::ng-deep quml-mcq-solutions figure.image{display:table;clear:both;text-align:center;margin:.5rem auto;position:relative}::ng-deep .startpage__instr-desc figure.image.resize-original,::ng-deep .startpage__instr-desc figure.image,::ng-deep .quml-mcq figure.image.resize-original,::ng-deep .quml-mcq figure.image,::ng-deep .quml-sa figure.image.resize-original,::ng-deep .quml-sa figure.image,::ng-deep quml-sa figure.image.resize-original,::ng-deep quml-sa figure.image,::ng-deep quml-mcq-solutions figure.image.resize-original,::ng-deep quml-mcq-solutions figure.image{width:auto;height:auto;overflow:visible}::ng-deep .startpage__instr-desc figure.image img,::ng-deep .quml-mcq figure.image img,::ng-deep .quml-sa figure.image img,::ng-deep quml-sa figure.image img,::ng-deep quml-mcq-solutions figure.image img{width:auto}::ng-deep .startpage__instr-desc figure.image.resize-original img,::ng-deep .quml-mcq figure.image.resize-original img,::ng-deep .quml-sa figure.image.resize-original img,::ng-deep quml-sa figure.image.resize-original img,::ng-deep quml-mcq-solutions figure.image.resize-original img{width:auto;height:auto}::ng-deep .startpage__instr-desc .image img,::ng-deep .quml-mcq .image img,::ng-deep .quml-sa .image img,::ng-deep quml-sa .image img,::ng-deep quml-mcq-solutions .image img{display:block;margin:0 auto;max-width:100%;min-width:50px}::ng-deep .startpage__instr-desc figure.image.resize-25,::ng-deep .quml-mcq figure.image.resize-25,::ng-deep .quml-sa figure.image.resize-25,::ng-deep quml-sa figure.image.resize-25,::ng-deep quml-mcq-solutions figure.image.resize-25{width:25%;height:auto}::ng-deep .startpage__instr-desc figure.image.resize-50,::ng-deep .quml-mcq figure.image.resize-50,::ng-deep .quml-sa figure.image.resize-50,::ng-deep quml-sa figure.image.resize-50,::ng-deep quml-mcq-solutions figure.image.resize-50{width:50%;height:auto}::ng-deep .startpage__instr-desc figure.image.resize-75,::ng-deep .quml-mcq figure.image.resize-75,::ng-deep .quml-sa figure.image.resize-75,::ng-deep quml-sa figure.image.resize-75,::ng-deep quml-mcq-solutions figure.image.resize-75{width:75%;height:auto}::ng-deep .startpage__instr-desc figure.image.resize-100,::ng-deep .quml-mcq figure.image.resize-100,::ng-deep .quml-sa figure.image.resize-100,::ng-deep quml-sa figure.image.resize-100,::ng-deep quml-mcq-solutions figure.image.resize-100{width:100%;height:auto}::ng-deep .startpage__instr-desc figure.table table,::ng-deep .quml-mcq figure.table table,::ng-deep .quml-sa figure.table table,::ng-deep quml-sa figure.table table,::ng-deep quml-mcq-solutions figure.table table{border-right:.0625rem solid var(--gray-100)}::ng-deep .startpage__instr-desc figure.table table,::ng-deep .startpage__instr-desc figure.table table tr td,::ng-deep .startpage__instr-desc figure.table table tr th,::ng-deep .quml-mcq figure.table table,::ng-deep .quml-mcq figure.table table tr td,::ng-deep .quml-mcq figure.table table tr th,::ng-deep .quml-sa figure.table table,::ng-deep .quml-sa figure.table table tr td,::ng-deep .quml-sa figure.table table tr th,::ng-deep quml-sa figure.table table,::ng-deep quml-sa figure.table table tr td,::ng-deep quml-sa figure.table table tr th,::ng-deep quml-mcq-solutions figure.table table,::ng-deep quml-mcq-solutions figure.table table tr td,::ng-deep quml-mcq-solutions figure.table table tr th{border:.0625rem solid var(--black);border-collapse:collapse}::ng-deep .startpage__instr-desc figure.table table,::ng-deep .quml-mcq figure.table table,::ng-deep .quml-sa figure.table table,::ng-deep quml-sa figure.table table,::ng-deep quml-mcq-solutions figure.table table{width:100%;background:var(--white);border:.0625rem solid var(--gray-100);box-shadow:none;border-radius:.25rem .25rem 0 0;text-align:left;color:var(--gray);border-collapse:separate;border-spacing:0;table-layout:fixed}::ng-deep .startpage__instr-desc figure.table table thead tr th,::ng-deep .quml-mcq figure.table table thead tr th,::ng-deep .quml-sa figure.table table thead tr th,::ng-deep quml-sa figure.table table thead tr th,::ng-deep quml-mcq-solutions figure.table table thead tr th{font-size:.875rem;padding:1rem;background-color:var(--primary-100);position:relative;height:2.5rem;border:0px;border-bottom:.0625rem solid var(--gray-100);border-right:.0625rem solid var(--gray-100);font-weight:700;color:var(--primary-color);text-transform:uppercase}::ng-deep .startpage__instr-desc figure.table table thead tr th:first-child,::ng-deep .quml-mcq figure.table table thead tr th:first-child,::ng-deep .quml-sa figure.table table thead tr th:first-child,::ng-deep quml-sa figure.table table thead tr th:first-child,::ng-deep quml-mcq-solutions figure.table table thead tr th:first-child{border-top-left-radius:.25rem}::ng-deep .startpage__instr-desc figure.table table thead tr th:last-child,::ng-deep .quml-mcq figure.table table thead tr th:last-child,::ng-deep .quml-sa figure.table table thead tr th:last-child,::ng-deep quml-sa figure.table table thead tr th:last-child,::ng-deep quml-mcq-solutions figure.table table thead tr th:last-child{border-top-right-radius:.25rem;border-right:0rem solid var(--gray-100)}::ng-deep .startpage__instr-desc figure.table table tbody tr:nth-child(2n),::ng-deep .quml-mcq figure.table table tbody tr:nth-child(2n),::ng-deep .quml-sa figure.table table tbody tr:nth-child(2n),::ng-deep quml-sa figure.table table tbody tr:nth-child(2n),::ng-deep quml-mcq-solutions figure.table table tbody tr:nth-child(2n){background-color:var(--gray-0)}::ng-deep .startpage__instr-desc figure.table table tbody tr:hover,::ng-deep .quml-mcq figure.table table tbody tr:hover,::ng-deep .quml-sa figure.table table tbody tr:hover,::ng-deep quml-sa figure.table table tbody tr:hover,::ng-deep quml-mcq-solutions figure.table table tbody tr:hover{background:var(--primary-0);color:rgba(var(--rc-rgba-gray),.95);cursor:pointer}::ng-deep .startpage__instr-desc figure.table table tbody tr td,::ng-deep .quml-mcq figure.table table tbody tr td,::ng-deep .quml-sa figure.table table tbody tr td,::ng-deep quml-sa figure.table table tbody tr td,::ng-deep quml-mcq-solutions figure.table table tbody tr td{font-size:.875rem;padding:1rem;color:var(--gray);height:3.5rem;border:0px;border-bottom:.0625rem solid var(--gray-100);border-right:.0625rem solid var(--gray-100);word-break:break-word;line-height:normal}::ng-deep .startpage__instr-desc figure.table table tbody tr td:last-child,::ng-deep .quml-mcq figure.table table tbody tr td:last-child,::ng-deep .quml-sa figure.table table tbody tr td:last-child,::ng-deep quml-sa figure.table table tbody tr td:last-child,::ng-deep quml-mcq-solutions figure.table table tbody tr td:last-child{border-right:0rem solid var(--gray-100)}::ng-deep .startpage__instr-desc figure.table table tbody tr td p,::ng-deep .quml-mcq figure.table table tbody tr td p,::ng-deep .quml-sa figure.table table tbody tr td p,::ng-deep quml-sa figure.table table tbody tr td p,::ng-deep quml-mcq-solutions figure.table table tbody tr td p{margin-bottom:0!important}::ng-deep .startpage__instr-desc figure.table table tbody tr:last-child td,::ng-deep .quml-mcq figure.table table tbody tr:last-child td,::ng-deep .quml-sa figure.table table tbody tr:last-child td,::ng-deep quml-sa figure.table table tbody tr:last-child td,::ng-deep quml-mcq-solutions figure.table table tbody tr:last-child td{border-bottom:none}::ng-deep .startpage__instr-desc figure.table table tbody tr:last-child td:first-child,::ng-deep .quml-mcq figure.table table tbody tr:last-child td:first-child,::ng-deep .quml-sa figure.table table tbody tr:last-child td:first-child,::ng-deep quml-sa figure.table table tbody tr:last-child td:first-child,::ng-deep quml-mcq-solutions figure.table table tbody tr:last-child td:first-child{border-bottom-left-radius:.25rem}::ng-deep .startpage__instr-desc figure.table table tbody tr:last-child td:last-child,::ng-deep .quml-mcq figure.table table tbody tr:last-child td:last-child,::ng-deep .quml-sa figure.table table tbody tr:last-child td:last-child,::ng-deep quml-sa figure.table table tbody tr:last-child td:last-child,::ng-deep quml-mcq-solutions figure.table table tbody tr:last-child td:last-child{border-bottom-right-radius:.25rem}::ng-deep .startpage__instr-desc ul,::ng-deep .startpage__instr-desc ol,::ng-deep .quml-mcq ul,::ng-deep .quml-mcq ol,::ng-deep .quml-sa ul,::ng-deep .quml-sa ol,::ng-deep quml-sa ul,::ng-deep quml-sa ol,::ng-deep quml-mcq-solutions ul,::ng-deep quml-mcq-solutions ol{margin-top:.5rem}::ng-deep .startpage__instr-desc ul li,::ng-deep .startpage__instr-desc ol li,::ng-deep .quml-mcq ul li,::ng-deep .quml-mcq ol li,::ng-deep .quml-sa ul li,::ng-deep .quml-sa ol li,::ng-deep quml-sa ul li,::ng-deep quml-sa ol li,::ng-deep quml-mcq-solutions ul li,::ng-deep quml-mcq-solutions ol li{margin:.5rem;font-weight:400;line-height:normal}::ng-deep .startpage__instr-desc ul,::ng-deep .quml-mcq ul,::ng-deep .quml-sa ul,::ng-deep quml-sa ul,::ng-deep quml-mcq-solutions ul{list-style-type:disc}::ng-deep .startpage__instr-desc h1,::ng-deep .startpage__instr-desc h2,::ng-deep .startpage__instr-desc h3,::ng-deep .startpage__instr-desc h4,::ng-deep .startpage__instr-desc h5,::ng-deep .startpage__instr-desc h6,::ng-deep .quml-mcq h1,::ng-deep .quml-mcq h2,::ng-deep .quml-mcq h3,::ng-deep .quml-mcq h4,::ng-deep .quml-mcq h5,::ng-deep .quml-mcq h6,::ng-deep .quml-sa h1,::ng-deep .quml-sa h2,::ng-deep .quml-sa h3,::ng-deep .quml-sa h4,::ng-deep .quml-sa h5,::ng-deep .quml-sa h6,::ng-deep quml-sa h1,::ng-deep quml-sa h2,::ng-deep quml-sa h3,::ng-deep quml-sa h4,::ng-deep quml-sa h5,::ng-deep quml-sa h6,::ng-deep quml-mcq-solutions h1,::ng-deep quml-mcq-solutions h2,::ng-deep quml-mcq-solutions h3,::ng-deep quml-mcq-solutions h4,::ng-deep quml-mcq-solutions h5,::ng-deep quml-mcq-solutions h6{color:var(--primary-color);line-height:normal;margin-bottom:1rem}::ng-deep .startpage__instr-desc p,::ng-deep .startpage__instr-desc span,::ng-deep .quml-mcq p,::ng-deep .quml-mcq span,::ng-deep .quml-sa p,::ng-deep .quml-sa span,::ng-deep quml-sa p,::ng-deep quml-sa span,::ng-deep quml-mcq-solutions p,::ng-deep quml-mcq-solutions span{color:var(--quml-mcq-title-txt)}::ng-deep .startpage__instr-desc p strong,::ng-deep .startpage__instr-desc p span strong,::ng-deep .quml-mcq p strong,::ng-deep .quml-mcq p span strong,::ng-deep .quml-sa p strong,::ng-deep .quml-sa p span strong,::ng-deep quml-sa p strong,::ng-deep quml-sa p span strong,::ng-deep quml-mcq-solutions p strong,::ng-deep quml-mcq-solutions p span strong{font-weight:700}::ng-deep .startpage__instr-desc p span u,::ng-deep .startpage__instr-desc p u,::ng-deep .quml-mcq p span u,::ng-deep .quml-mcq p u,::ng-deep .quml-sa p span u,::ng-deep .quml-sa p u,::ng-deep quml-sa p span u,::ng-deep quml-sa p u,::ng-deep quml-mcq-solutions p span u,::ng-deep quml-mcq-solutions p u{text-decoration:underline}::ng-deep .startpage__instr-desc p span i,::ng-deep .startpage__instr-desc p i,::ng-deep .quml-mcq p span i,::ng-deep .quml-mcq p i,::ng-deep .quml-sa p span i,::ng-deep .quml-sa p i,::ng-deep quml-sa p span i,::ng-deep quml-sa p i,::ng-deep quml-mcq-solutions p span i,::ng-deep quml-mcq-solutions p i{font-style:italic}\n"] }]
}], propDecorators: { instructions: [{
type: Input
}], totalNoOfQuestions: [{
type: Input
}], points: [{
type: Input
}], time: [{
type: Input
}], contentName: [{
type: Input
}], showTimer: [{
type: Input
}] } });
class PreviousActiveComponent {
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PreviousActiveComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PreviousActiveComponent, selector: "quml-previous-active", ngImport: i0, template: "<svg width=\"60px\" height=\"36px\" viewBox=\"0 0 60 36\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>Previous</title>\n <defs>\n <rect id=\"path-1\" x=\"0\" y=\"0\" width=\"56\" height=\"32\" rx=\"16\"></rect>\n <filter x=\"-2.7%\" y=\"-4.7%\" width=\"105.4%\" height=\"109.4%\" filterUnits=\"objectBoundingBox\" id=\"filter-2\">\n <feGaussianBlur stdDeviation=\"0.5\" in=\"SourceGraphic\"></feGaussianBlur>\n </filter>\n <filter x=\"-5.4%\" y=\"-9.4%\" width=\"110.7%\" height=\"118.8%\" filterUnits=\"objectBoundingBox\" id=\"filter-3\">\n <feGaussianBlur stdDeviation=\"1\" in=\"SourceAlpha\" result=\"shadowBlurInner1\"></feGaussianBlur>\n <feOffset dx=\"0\" dy=\"-1\" in=\"shadowBlurInner1\" result=\"shadowOffsetInner1\"></feOffset>\n <feComposite in=\"shadowOffsetInner1\" in2=\"SourceAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\" result=\"shadowInnerInner1\"></feComposite>\n <feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0\" type=\"matrix\" in=\"shadowInnerInner1\"></feColorMatrix>\n </filter>\n </defs>\n <g id=\"Symbols\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"Group\" transform=\"translate(30.000000, 18.000000) scale(-1, 1) translate(-30.000000, -18.000000) translate(2.000000, 2.000000)\">\n <g id=\"Group-2\">\n <g id=\"Rectangle-5-Copy-2\" fill-rule=\"nonzero\" filter=\"url(#filter-2)\">\n <use fill=\"#FFFFFF\" xlink:href=\"#path-1\"></use>\n <use fill=\"black\" fill-opacity=\"1\" filter=\"url(#filter-3)\" xlink:href=\"#path-1\"></use>\n </g>\n <polygon id=\"Shape\" fill=\"#6D7278\" transform=\"translate(28.000000, 16.000000) scale(-1, 1) translate(-28.000000, -16.000000) \" points=\"31.705 11.41 30.295 10 24.295 16 30.295 22 31.705 20.59 27.125 16\"></polygon>\n </g>\n <g id=\"Icon-24px\" transform=\"translate(27.000000, 15.000000) scale(-1, 1) translate(-27.000000, -15.000000) translate(23.000000, 9.000000)\"></g>\n </g>\n </g>\n</svg>" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PreviousActiveComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-previous-active', template: "<svg width=\"60px\" height=\"36px\" viewBox=\"0 0 60 36\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>Previous</title>\n <defs>\n <rect id=\"path-1\" x=\"0\" y=\"0\" width=\"56\" height=\"32\" rx=\"16\"></rect>\n <filter x=\"-2.7%\" y=\"-4.7%\" width=\"105.4%\" height=\"109.4%\" filterUnits=\"objectBoundingBox\" id=\"filter-2\">\n <feGaussianBlur stdDeviation=\"0.5\" in=\"SourceGraphic\"></feGaussianBlur>\n </filter>\n <filter x=\"-5.4%\" y=\"-9.4%\" width=\"110.7%\" height=\"118.8%\" filterUnits=\"objectBoundingBox\" id=\"filter-3\">\n <feGaussianBlur stdDeviation=\"1\" in=\"SourceAlpha\" result=\"shadowBlurInner1\"></feGaussianBlur>\n <feOffset dx=\"0\" dy=\"-1\" in=\"shadowBlurInner1\" result=\"shadowOffsetInner1\"></feOffset>\n <feComposite in=\"shadowOffsetInner1\" in2=\"SourceAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\" result=\"shadowInnerInner1\"></feComposite>\n <feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0\" type=\"matrix\" in=\"shadowInnerInner1\"></feColorMatrix>\n </filter>\n </defs>\n <g id=\"Symbols\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"Group\" transform=\"translate(30.000000, 18.000000) scale(-1, 1) translate(-30.000000, -18.000000) translate(2.000000, 2.000000)\">\n <g id=\"Group-2\">\n <g id=\"Rectangle-5-Copy-2\" fill-rule=\"nonzero\" filter=\"url(#filter-2)\">\n <use fill=\"#FFFFFF\" xlink:href=\"#path-1\"></use>\n <use fill=\"black\" fill-opacity=\"1\" filter=\"url(#filter-3)\" xlink:href=\"#path-1\"></use>\n </g>\n <polygon id=\"Shape\" fill=\"#6D7278\" transform=\"translate(28.000000, 16.000000) scale(-1, 1) translate(-28.000000, -16.000000) \" points=\"31.705 11.41 30.295 10 24.295 16 30.295 22 31.705 20.59 27.125 16\"></polygon>\n </g>\n <g id=\"Icon-24px\" transform=\"translate(27.000000, 15.000000) scale(-1, 1) translate(-27.000000, -15.000000) translate(23.000000, 9.000000)\"></g>\n </g>\n </g>\n</svg>" }]
}] });
class NextActiveComponent {
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NextActiveComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: NextActiveComponent, selector: "quml-next-active", ngImport: i0, template: " <svg width=\"60px\" height=\"36px\" viewBox=\"0 0 60 36\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>Next</title>\n <defs>\n <rect id=\"path-1\" x=\"0\" y=\"0\" width=\"60\" height=\"36\" rx=\"18\"></rect>\n <filter x=\"-5.8%\" y=\"-9.7%\" width=\"111.7%\" height=\"119.4%\" filterUnits=\"objectBoundingBox\" id=\"filter-2\">\n <feGaussianBlur stdDeviation=\"3\" in=\"SourceAlpha\" result=\"shadowBlurInner1\"></feGaussianBlur>\n <feOffset dx=\"0\" dy=\"1\" in=\"shadowBlurInner1\" result=\"shadowOffsetInner1\"></feOffset>\n <feComposite in=\"shadowOffsetInner1\" in2=\"SourceAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"\n result=\"shadowInnerInner1\"></feComposite>\n <feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0\" type=\"matrix\" in=\"shadowInnerInner1\">\n </feColorMatrix>\n </filter>\n <rect id=\"path-3\" x=\"0\" y=\"0\" width=\"54\" height=\"30\" rx=\"15\"></rect>\n <filter x=\"-2.8%\" y=\"-5.0%\" width=\"105.6%\" height=\"110.0%\" filterUnits=\"objectBoundingBox\" id=\"filter-4\">\n <feGaussianBlur stdDeviation=\"0.5\" in=\"SourceGraphic\"></feGaussianBlur>\n </filter>\n <filter x=\"-5.6%\" y=\"-10.0%\" width=\"111.1%\" height=\"120.0%\" filterUnits=\"objectBoundingBox\" id=\"filter-5\">\n <feGaussianBlur stdDeviation=\"1\" in=\"SourceAlpha\" result=\"shadowBlurInner1\"></feGaussianBlur>\n <feOffset dx=\"0\" dy=\"-1\" in=\"shadowBlurInner1\" result=\"shadowOffsetInner1\"></feOffset>\n <feComposite in=\"shadowOffsetInner1\" in2=\"SourceAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"\n result=\"shadowInnerInner1\"></feComposite>\n <feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0\" type=\"matrix\" in=\"shadowInnerInner1\">\n </feColorMatrix>\n </filter>\n </defs>\n <g id=\"button/next2\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"Group\">\n <g id=\"Group-Copy\">\n <g id=\"Rectangle-5-Copy\" opacity=\"0.1\" fill-rule=\"nonzero\">\n <use fill=\"#CCCCCC\" xlink:href=\"#path-1\"></use>\n <use fill=\"black\" fill-opacity=\"1\" filter=\"url(#filter-2)\" xlink:href=\"#path-1\"></use>\n </g>\n <g id=\"Group-2\" transform=\"translate(3.000000, 3.000000)\">\n <g id=\"Rectangle-5-Copy-2\" fill-rule=\"nonzero\" filter=\"url(#filter-4)\">\n <use fill=\"#FFD655\" xlink:href=\"#path-3\"></use>\n <use fill=\"black\" fill-opacity=\"1\" filter=\"url(#filter-5)\" xlink:href=\"#path-3\"></use>\n </g>\n <polygon id=\"Shape\" fill=\"#666\"\n transform=\"translate(27.295000, 15.000000) scale(-1, 1) translate(-27.295000, -15.000000) \"\n points=\"31 10.41 29.59 9 23.59 15 29.59 21 31 19.59 26.42 15\"></polygon>\n </g>\n </g>\n <g id=\"Icon-24px\"\n transform=\"translate(30.000000, 18.000000) scale(-1, 1) translate(-30.000000, -18.000000) translate(26.000000, 12.000000)\">\n </g>\n </g>\n </g>\n</svg> " }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: NextActiveComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-next-active', template: " <svg width=\"60px\" height=\"36px\" viewBox=\"0 0 60 36\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>Next</title>\n <defs>\n <rect id=\"path-1\" x=\"0\" y=\"0\" width=\"60\" height=\"36\" rx=\"18\"></rect>\n <filter x=\"-5.8%\" y=\"-9.7%\" width=\"111.7%\" height=\"119.4%\" filterUnits=\"objectBoundingBox\" id=\"filter-2\">\n <feGaussianBlur stdDeviation=\"3\" in=\"SourceAlpha\" result=\"shadowBlurInner1\"></feGaussianBlur>\n <feOffset dx=\"0\" dy=\"1\" in=\"shadowBlurInner1\" result=\"shadowOffsetInner1\"></feOffset>\n <feComposite in=\"shadowOffsetInner1\" in2=\"SourceAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"\n result=\"shadowInnerInner1\"></feComposite>\n <feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0\" type=\"matrix\" in=\"shadowInnerInner1\">\n </feColorMatrix>\n </filter>\n <rect id=\"path-3\" x=\"0\" y=\"0\" width=\"54\" height=\"30\" rx=\"15\"></rect>\n <filter x=\"-2.8%\" y=\"-5.0%\" width=\"105.6%\" height=\"110.0%\" filterUnits=\"objectBoundingBox\" id=\"filter-4\">\n <feGaussianBlur stdDeviation=\"0.5\" in=\"SourceGraphic\"></feGaussianBlur>\n </filter>\n <filter x=\"-5.6%\" y=\"-10.0%\" width=\"111.1%\" height=\"120.0%\" filterUnits=\"objectBoundingBox\" id=\"filter-5\">\n <feGaussianBlur stdDeviation=\"1\" in=\"SourceAlpha\" result=\"shadowBlurInner1\"></feGaussianBlur>\n <feOffset dx=\"0\" dy=\"-1\" in=\"shadowBlurInner1\" result=\"shadowOffsetInner1\"></feOffset>\n <feComposite in=\"shadowOffsetInner1\" in2=\"SourceAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\"\n result=\"shadowInnerInner1\"></feComposite>\n <feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0\" type=\"matrix\" in=\"shadowInnerInner1\">\n </feColorMatrix>\n </filter>\n </defs>\n <g id=\"button/next2\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"Group\">\n <g id=\"Group-Copy\">\n <g id=\"Rectangle-5-Copy\" opacity=\"0.1\" fill-rule=\"nonzero\">\n <use fill=\"#CCCCCC\" xlink:href=\"#path-1\"></use>\n <use fill=\"black\" fill-opacity=\"1\" filter=\"url(#filter-2)\" xlink:href=\"#path-1\"></use>\n </g>\n <g id=\"Group-2\" transform=\"translate(3.000000, 3.000000)\">\n <g id=\"Rectangle-5-Copy-2\" fill-rule=\"nonzero\" filter=\"url(#filter-4)\">\n <use fill=\"#FFD655\" xlink:href=\"#path-3\"></use>\n <use fill=\"black\" fill-opacity=\"1\" filter=\"url(#filter-5)\" xlink:href=\"#path-3\"></use>\n </g>\n <polygon id=\"Shape\" fill=\"#666\"\n transform=\"translate(27.295000, 15.000000) scale(-1, 1) translate(-27.295000, -15.000000) \"\n points=\"31 10.41 29.59 9 23.59 15 29.59 21 31 19.59 26.42 15\"></polygon>\n </g>\n </g>\n <g id=\"Icon-24px\"\n transform=\"translate(30.000000, 18.000000) scale(-1, 1) translate(-30.000000, -18.000000) translate(26.000000, 12.000000)\">\n </g>\n </g>\n </g>\n</svg> " }]
}] });
class AlertComponent {
constructor() {
this.closeAlert = new EventEmitter();
this.showSolution = new EventEmitter();
this.showHint = new EventEmitter();
this.isFocusSet = false;
}
onKeydownHandler(event) {
this.close('close');
}
ngOnInit() {
this.isFocusSet = false;
this.previousActiveElement = document.activeElement;
this.subscription = fromEvent(document, 'keydown').subscribe((e) => {
if (e['key'] === 'Tab') {
const nextBtn = document.querySelector('.quml-navigation__previous');
/* istanbul ignore else */
if (nextBtn) {
this.close('close');
nextBtn.focus({ preventScroll: true });
this.isFocusSet = true;
e.stopPropagation();
}
}
});
}
ngAfterViewInit() {
setTimeout(() => {
const wrongButton = document.querySelector('#wrongButton');
const correctButton = document.querySelector('#correctButton');
if (this.alertType === 'wrong' && wrongButton) {
wrongButton.focus({ preventScroll: true });
}
else if (this.alertType === 'correct' && this.showSolutionButton && correctButton) {
correctButton.focus({ preventScroll: true });
}
}, 200);
}
viewHint() {
this.showHint.emit({
hint: true,
});
}
viewSolution() {
this.showSolution.emit({
solution: true,
});
}
close(type) {
this.closeAlert.emit({ type });
}
ngOnDestroy() {
/* istanbul ignore else */
if (this.previousActiveElement && !this.isFocusSet) {
this.previousActiveElement.focus({ preventScroll: true });
}
/* istanbul ignore else */
if (this.subscription) {
this.subscription.unsubscribe();
}
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AlertComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AlertComponent, selector: "quml-alert", inputs: { alertType: "alertType", isHintAvailable: "isHintAvailable", showSolutionButton: "showSolutionButton" }, outputs: { closeAlert: "closeAlert", showSolution: "showSolution", showHint: "showHint" }, host: { listeners: { "document:keydown.escape": "onKeydownHandler($event)" } }, ngImport: i0, template: "<div class=\"quml-alert\">\n <div class=\"quml-alert__overlay\" (click)=\"close('close')\" (keyup.enter)=\"close('close')\"></div>\n <div class=\"quml-alert__container\">\n <div class=\"quml-alert__body\">\n <div class=\"quml-alert__image quml-alert__image--correct\" *ngIf=\"alertType === 'correct'\">\n <div class=\"quml-alert__icon-container\">\n <img class=\"quml-alert__icon\" src=\"assets/quml-correct.svg\" alt=\"Correct Answer\">\n\n </div>\n <div class=\"quml-alert__icon-empty\"></div>\n <img class=\"quml-alert__banner\" src=\"assets/banner-correct.svg\" alt=\"\" >\n </div>\n <div class=\"quml-alert__image quml-alert__image--wrong\" *ngIf=\"alertType === 'wrong'\">\n <div class=\"quml-alert__icon-container\">\n <img class=\"quml-alert__icon\" src=\"assets/quml-wrong.svg\" alt=\"Wrong Answer\">\n </div>\n <div class=\"quml-alert__icon-empty\"></div>\n <img class=\"quml-alert__banner\" src=\"assets/banner-wrong.svg\" alt=\"\">\n </div>\n \n \n\n <div class=\"quml-alert__solution-container\">\n <div class=\"quml-alert__try-again\" *ngIf=\"alertType === 'wrong'\">\n <span tabindex=\"0\" id=\"wrongButton\" *ngIf=\"alertType === 'wrong'\" (click)=\"close('tryAgain')\" (keyup.enter)=\"close('tryAgain')\" aria-label=\"Try again\">Try again</span>\n <!-- TODO: should add some label for correct response when solution is off <span *ngIf=\"alertType === 'correct' && !showSolutionButton\">Correct</span> --> \n </div>\n <div class=\"quml-alert__view-solution\" *ngIf=\"showSolutionButton\">\n <span tabindex=\"0\" id=\"correctButton\" (click)=\"viewSolution()\" (keyup.enter)=\"viewSolution()\" aria-label=\"View Solution\">View Solution</span>\n </div>\n </div>\n\n <div *ngIf=\"isHintAvailable\" class=\"quml-alert__view-hint quml-alert__view-hint--disabled\">\n <img tabindex=\"0\" id=\"hintButton\" class=\"view-hint-icon\" (click)=\"viewHint()\" (keyup.enter)=\"viewHint()\" src=\"assets/view-hint.svg\" alt=\"View Hint logo\">\n </div>\n </div>\n </div>\n</div>\n", styles: ["::ng-deep :root{--quml-color-primary: #FFD555;--quml-color-primary-rgba: #f6bc42;--quml-color-primary-shade: rgba(0, 0, 0, .1);--quml-color-tertiary: #FA6400;--quml-color-tertiary-rgba: rgba(250, 100, 0, .6);--quml-color-rgba: rgba(0, 0, 0, .6)}.quml-alert__overlay{position:absolute;width:100%;height:100%;top:0;left:0}.quml-alert__container{position:absolute;bottom:.75rem;height:5.625rem;left:0;right:0;border-radius:.5rem;box-shadow:0 .125rem .875rem 0 var(-quml-color-primary-shade);padding:.5rem 1.5rem .5rem .5rem;animation-name:example;animation-timing-function:ease-in-out;animation-duration:.4s;margin:0 auto .5rem;width:23.25rem;background:linear-gradient(145deg,var(--quml-color-primary),var(--quml-color-primary) 60%,var(--quml-color-primary-rgba) 60%);z-index:1}@media only screen and (max-width: 480px){.quml-alert__container{position:absolute;bottom:3.75rem;border-radius:.5rem;background-color:var(--white);box-shadow:0 .125rem .875rem 0 var(-quml-color-primary-shade);width:21.75rem;padding:.5rem}}.quml-alert__body{display:flex;align-items:center;position:relative;height:100%}.quml-alert__image{position:relative;height:100%;width:7.625rem;overflow:hidden}.quml-alert__icon-container{background:var(--white);border-radius:.5rem;position:absolute;width:4.5rem;z-index:1;height:4rem;left:0;right:0;margin:0 auto;bottom:-54px;animation:sign-board-animation .2s ease-out forwards;animation-delay:.3s}.quml-alert__icon-empty{position:absolute;background:var(--quml-color-primary);width:7.625rem;z-index:2;height:1.25rem;margin:0 auto;bottom:0}.quml-alert__icon{position:absolute;top:15%;left:0;width:1.75rem;height:1.75rem;right:0;margin:0 auto;animation:.1s ease-out .7s forwards correct-button-anim}.quml-alert__banner{position:absolute;bottom:0;z-index:3;height:2.1875rem}.quml-alert__solution-container{display:flex;align-items:center;justify-content:center;width:calc(100% - 122px)}.quml-alert__try-again,.quml-alert__view-solution{line-height:normal;cursor:pointer;background:var(--white);padding:.5rem 1rem;border-radius:1rem;font-size:.75rem;color:var(--quml-color-tertiary);box-shadow:0 .125rem .875rem 0 var(--quml-color-tertiary-rgba);margin-left:.5rem}.quml-alert__view-hint{width:2rem;height:2rem;margin-left:auto;background:var(--white);border-radius:50%;box-shadow:0 .375rem 1rem -.4375rem var(--quml-color-rgba);position:relative}.quml-alert__view-hint--disabled{opacity:.6}.quml-alert__view-hint,.quml-alert__try-again{cursor:pointer;text-transform:capitalize}@keyframes sign-board-animation{0%{visibility:hidden;transform:translateY(0)}to{visibility:visible;transform:translateY(-100%)}}@keyframes correct-button-anim{0%{visibility:hidden;transform:scale(.2)}to{visibility:visible;-khtml-transform:scale(1.1);transform:scale(1.1)}}@keyframes example{0%{margin-bottom:-50px}to{margin-bottom:8px}}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AlertComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-alert', template: "<div class=\"quml-alert\">\n <div class=\"quml-alert__overlay\" (click)=\"close('close')\" (keyup.enter)=\"close('close')\"></div>\n <div class=\"quml-alert__container\">\n <div class=\"quml-alert__body\">\n <div class=\"quml-alert__image quml-alert__image--correct\" *ngIf=\"alertType === 'correct'\">\n <div class=\"quml-alert__icon-container\">\n <img class=\"quml-alert__icon\" src=\"assets/quml-correct.svg\" alt=\"Correct Answer\">\n\n </div>\n <div class=\"quml-alert__icon-empty\"></div>\n <img class=\"quml-alert__banner\" src=\"assets/banner-correct.svg\" alt=\"\" >\n </div>\n <div class=\"quml-alert__image quml-alert__image--wrong\" *ngIf=\"alertType === 'wrong'\">\n <div class=\"quml-alert__icon-container\">\n <img class=\"quml-alert__icon\" src=\"assets/quml-wrong.svg\" alt=\"Wrong Answer\">\n </div>\n <div class=\"quml-alert__icon-empty\"></div>\n <img class=\"quml-alert__banner\" src=\"assets/banner-wrong.svg\" alt=\"\">\n </div>\n \n \n\n <div class=\"quml-alert__solution-container\">\n <div class=\"quml-alert__try-again\" *ngIf=\"alertType === 'wrong'\">\n <span tabindex=\"0\" id=\"wrongButton\" *ngIf=\"alertType === 'wrong'\" (click)=\"close('tryAgain')\" (keyup.enter)=\"close('tryAgain')\" aria-label=\"Try again\">Try again</span>\n <!-- TODO: should add some label for correct response when solution is off <span *ngIf=\"alertType === 'correct' && !showSolutionButton\">Correct</span> --> \n </div>\n <div class=\"quml-alert__view-solution\" *ngIf=\"showSolutionButton\">\n <span tabindex=\"0\" id=\"correctButton\" (click)=\"viewSolution()\" (keyup.enter)=\"viewSolution()\" aria-label=\"View Solution\">View Solution</span>\n </div>\n </div>\n\n <div *ngIf=\"isHintAvailable\" class=\"quml-alert__view-hint quml-alert__view-hint--disabled\">\n <img tabindex=\"0\" id=\"hintButton\" class=\"view-hint-icon\" (click)=\"viewHint()\" (keyup.enter)=\"viewHint()\" src=\"assets/view-hint.svg\" alt=\"View Hint logo\">\n </div>\n </div>\n </div>\n</div>\n", styles: ["::ng-deep :root{--quml-color-primary: #FFD555;--quml-color-primary-rgba: #f6bc42;--quml-color-primary-shade: rgba(0, 0, 0, .1);--quml-color-tertiary: #FA6400;--quml-color-tertiary-rgba: rgba(250, 100, 0, .6);--quml-color-rgba: rgba(0, 0, 0, .6)}.quml-alert__overlay{position:absolute;width:100%;height:100%;top:0;left:0}.quml-alert__container{position:absolute;bottom:.75rem;height:5.625rem;left:0;right:0;border-radius:.5rem;box-shadow:0 .125rem .875rem 0 var(-quml-color-primary-shade);padding:.5rem 1.5rem .5rem .5rem;animation-name:example;animation-timing-function:ease-in-out;animation-duration:.4s;margin:0 auto .5rem;width:23.25rem;background:linear-gradient(145deg,var(--quml-color-primary),var(--quml-color-primary) 60%,var(--quml-color-primary-rgba) 60%);z-index:1}@media only screen and (max-width: 480px){.quml-alert__container{position:absolute;bottom:3.75rem;border-radius:.5rem;background-color:var(--white);box-shadow:0 .125rem .875rem 0 var(-quml-color-primary-shade);width:21.75rem;padding:.5rem}}.quml-alert__body{display:flex;align-items:center;position:relative;height:100%}.quml-alert__image{position:relative;height:100%;width:7.625rem;overflow:hidden}.quml-alert__icon-container{background:var(--white);border-radius:.5rem;position:absolute;width:4.5rem;z-index:1;height:4rem;left:0;right:0;margin:0 auto;bottom:-54px;animation:sign-board-animation .2s ease-out forwards;animation-delay:.3s}.quml-alert__icon-empty{position:absolute;background:var(--quml-color-primary);width:7.625rem;z-index:2;height:1.25rem;margin:0 auto;bottom:0}.quml-alert__icon{position:absolute;top:15%;left:0;width:1.75rem;height:1.75rem;right:0;margin:0 auto;animation:.1s ease-out .7s forwards correct-button-anim}.quml-alert__banner{position:absolute;bottom:0;z-index:3;height:2.1875rem}.quml-alert__solution-container{display:flex;align-items:center;justify-content:center;width:calc(100% - 122px)}.quml-alert__try-again,.quml-alert__view-solution{line-height:normal;cursor:pointer;background:var(--white);padding:.5rem 1rem;border-radius:1rem;font-size:.75rem;color:var(--quml-color-tertiary);box-shadow:0 .125rem .875rem 0 var(--quml-color-tertiary-rgba);margin-left:.5rem}.quml-alert__view-hint{width:2rem;height:2rem;margin-left:auto;background:var(--white);border-radius:50%;box-shadow:0 .375rem 1rem -.4375rem var(--quml-color-rgba);position:relative}.quml-alert__view-hint--disabled{opacity:.6}.quml-alert__view-hint,.quml-alert__try-again{cursor:pointer;text-transform:capitalize}@keyframes sign-board-animation{0%{visibility:hidden;transform:translateY(0)}to{visibility:visible;transform:translateY(-100%)}}@keyframes correct-button-anim{0%{visibility:hidden;transform:scale(.2)}to{visibility:visible;-khtml-transform:scale(1.1);transform:scale(1.1)}}@keyframes example{0%{margin-bottom:-50px}to{margin-bottom:8px}}\n"] }]
}], propDecorators: { alertType: [{
type: Input
}], isHintAvailable: [{
type: Input
}], showSolutionButton: [{
type: Input
}], closeAlert: [{
type: Output
}], showSolution: [{
type: Output
}], showHint: [{
type: Output
}], onKeydownHandler: [{
type: HostListener,
args: ['document:keydown.escape', ['$event']]
}] } });
class CloseComponent {
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CloseComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CloseComponent, selector: "quml-close", ngImport: i0, template: "<svg width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>Icon 24px</title>\n <g id=\"PDF-Player\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"pdf-portrait-pop\" transform=\"translate(-320.000000, -397.000000)\">\n <g id=\"Group-18-Copy\" transform=\"translate(0.000000, 381.000000)\">\n <g id=\"Icon-24px\" transform=\"translate(320.000000, 16.000000)\">\n <polygon id=\"Shape\" fill=\"#000000\" points=\"19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12\"></polygon>\n <polygon id=\"Shape\" points=\"0 0 24 0 24 24 0 24\"></polygon>\n </g>\n </g>\n </g>\n </g>\n</svg>" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CloseComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-close', template: "<svg width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>Icon 24px</title>\n <g id=\"PDF-Player\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"pdf-portrait-pop\" transform=\"translate(-320.000000, -397.000000)\">\n <g id=\"Group-18-Copy\" transform=\"translate(0.000000, 381.000000)\">\n <g id=\"Icon-24px\" transform=\"translate(320.000000, 16.000000)\">\n <polygon id=\"Shape\" fill=\"#000000\" points=\"19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12\"></polygon>\n <polygon id=\"Shape\" points=\"0 0 24 0 24 24 0 24\"></polygon>\n </g>\n </g>\n </g>\n </g>\n</svg>" }]
}] });
class McqSolutionsComponent {
constructor(utilService) {
this.utilService = utilService;
this.close = new EventEmitter();
}
closeSolution() {
if (this.solutionVideoPlayer) {
this.solutionVideoPlayer.nativeElement.pause();
}
this.close.emit({
close: true
});
}
ngAfterViewInit() {
this.utilService.updateSourceOfVideoElement(this.baseUrl, this.media, this.identifier);
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: McqSolutionsComponent, deps: [{ token: UtilService }], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: McqSolutionsComponent, selector: "quml-mcq-solutions", inputs: { question: "question", options: "options", solutions: "solutions", baseUrl: "baseUrl", media: "media", identifier: "identifier" }, outputs: { close: "close" }, viewQueries: [{ propertyName: "solutionVideoPlayer", first: true, predicate: ["solutionVideoPlayer"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"solutions\">\n <div class=\"close-icon\" role=\"button\" tabindex=\"0\" aria-label=\"Close\" (click)=\"closeSolution()\" (keydown.enter)=\"closeSolution()\">\n <quml-close tabindex=\"-1\"></quml-close>\n </div>\n <div class=\"solution-header\">Question</div>\n <div [innerHtml]=\"question | safeHtml\"></div>\n <div class=\"solution-header\">Options</div>\n <div class=\"solution-options-container\">\n <div class=\"solution-options\" *ngFor=\"let option of options\">\n <div [innerHtml]=\"option.label | safeHtml\"></div>\n </div>\n</div>\n <ng-container *ngIf=\"solutions\">\n <div class=\"solution-header\">Solution</div>\n <div *ngIf=\"!showVideoSolution\">\n <div *ngFor=\"let solution of solutions | keyvalue\">\n <div [innerHtml]=\"solution.value | safeHtml\"></div>\n </div>\n </div>\n</ng-container>\n <div class=\"scoreboard-button-container\">\n <button type=\"submit\" class=\"sb-btn sb-btn-primary sb-btn-normal sb-btn-radius\" (click)=\"closeSolution()\">Done</button>\n </div>\n</div>", styles: ["::ng-deep :root{--quml-close-icon: #000}.solutions{top:0;left:0;width:100%;height:100%;padding:1rem;overflow:auto}.solution-header{color:var(--gray-800);font-size:.875rem;font-weight:700;margin:1rem 0;clear:both}.close-icon{float:right;cursor:pointer;width:3rem;height:3rem;border-radius:50%;padding:.25rem}.close-icon:hover{background:#00000026}.close-icon:hover quml-close svg polygon#Shape{fill:var(--white)}.close-icon quml-close{display:flex;align-items:center;justify-content:center}.close-icon quml-close svg g polygon:first-child{fill:var(--quml-close-icon)}.video-container{text-align:center;margin:.5rem auto}.scoreboard-button-container{text-align:center;clear:both;margin:1rem 0}.solution-options-container .solution-options{margin-bottom:.5rem}.image-style-align-right{float:right!important;text-align:right!important;margin-left:.5rem!important}.image-style-align-left{float:left!important;text-align:left!important;margin-right:.5rem!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CloseComponent, selector: "quml-close" }, { kind: "pipe", type: i2.KeyValuePipe, name: "keyvalue" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: McqSolutionsComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-mcq-solutions', template: "<div class=\"solutions\">\n <div class=\"close-icon\" role=\"button\" tabindex=\"0\" aria-label=\"Close\" (click)=\"closeSolution()\" (keydown.enter)=\"closeSolution()\">\n <quml-close tabindex=\"-1\"></quml-close>\n </div>\n <div class=\"solution-header\">Question</div>\n <div [innerHtml]=\"question | safeHtml\"></div>\n <div class=\"solution-header\">Options</div>\n <div class=\"solution-options-container\">\n <div class=\"solution-options\" *ngFor=\"let option of options\">\n <div [innerHtml]=\"option.label | safeHtml\"></div>\n </div>\n</div>\n <ng-container *ngIf=\"solutions\">\n <div class=\"solution-header\">Solution</div>\n <div *ngIf=\"!showVideoSolution\">\n <div *ngFor=\"let solution of solutions | keyvalue\">\n <div [innerHtml]=\"solution.value | safeHtml\"></div>\n </div>\n </div>\n</ng-container>\n <div class=\"scoreboard-button-container\">\n <button type=\"submit\" class=\"sb-btn sb-btn-primary sb-btn-normal sb-btn-radius\" (click)=\"closeSolution()\">Done</button>\n </div>\n</div>", styles: ["::ng-deep :root{--quml-close-icon: #000}.solutions{top:0;left:0;width:100%;height:100%;padding:1rem;overflow:auto}.solution-header{color:var(--gray-800);font-size:.875rem;font-weight:700;margin:1rem 0;clear:both}.close-icon{float:right;cursor:pointer;width:3rem;height:3rem;border-radius:50%;padding:.25rem}.close-icon:hover{background:#00000026}.close-icon:hover quml-close svg polygon#Shape{fill:var(--white)}.close-icon quml-close{display:flex;align-items:center;justify-content:center}.close-icon quml-close svg g polygon:first-child{fill:var(--quml-close-icon)}.video-container{text-align:center;margin:.5rem auto}.scoreboard-button-container{text-align:center;clear:both;margin:1rem 0}.solution-options-container .solution-options{margin-bottom:.5rem}.image-style-align-right{float:right!important;text-align:right!important;margin-left:.5rem!important}.image-style-align-left{float:left!important;text-align:left!important;margin-right:.5rem!important}\n"] }]
}], ctorParameters: function () { return [{ type: UtilService }]; }, propDecorators: { question: [{
type: Input
}], options: [{
type: Input
}], solutions: [{
type: Input
}], baseUrl: [{
type: Input
}], media: [{
type: Input
}], identifier: [{
type: Input
}], close: [{
type: Output
}], solutionVideoPlayer: [{
type: ViewChild,
args: ['solutionVideoPlayer', { static: true }]
}] } });
class AudioComponent {
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AudioComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: AudioComponent, selector: "quml-audio", ngImport: i0, template: "<svg width=\"36px\" height=\"36px\" viewBox=\"0 0 36 36\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>audio play</title>\n <defs>\n <rect id=\"path-1\" x=\"0\" y=\"0\" width=\"36\" height=\"36\" rx=\"18\"></rect>\n <filter x=\"-4.2%\" y=\"-4.2%\" width=\"108.3%\" height=\"108.3%\" filterUnits=\"objectBoundingBox\" id=\"filter-2\">\n <feGaussianBlur stdDeviation=\"1\" in=\"SourceAlpha\" result=\"shadowBlurInner1\"></feGaussianBlur>\n <feOffset dx=\"0\" dy=\"-1\" in=\"shadowBlurInner1\" result=\"shadowOffsetInner1\"></feOffset>\n <feComposite in=\"shadowOffsetInner1\" in2=\"SourceAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\" result=\"shadowInnerInner1\"></feComposite>\n <feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0\" type=\"matrix\" in=\"shadowInnerInner1\"></feColorMatrix>\n </filter>\n </defs>\n <g id=\"audio-play\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"Rectangle-5-Copy-2\" fill-rule=\"nonzero\">\n <use fill=\"#FFFFFF\" xlink:href=\"#path-1\"></use>\n <use fill-opacity=\"1\" filter=\"url(#filter-2)\" xlink:href=\"#path-1\"></use>\n <rect stroke-opacity=\"0.484156469\" stroke=\"#C3C8DB\" stroke-width=\"2\" stroke-linejoin=\"square\" x=\"1\" y=\"1\" width=\"34\" height=\"34\" rx=\"17\"></rect>\n </g>\n <path d=\"M19.483871,8.64533333 C23.6232258,9.616 26.7096774,13.4346667 26.7096774,18 C26.7096774,22.5653333 23.6232258,26.384 19.483871,27.3546667 L19.483871,27.3546667 L19.483871,25.1573333 C22.4670968,24.24 24.6451613,21.3813333 24.6451613,18 C24.6451613,14.6186667 22.4670968,11.76 19.483871,10.8426667 L19.483871,10.8426667 Z M17.4193548,9.46666667 L17.4193548,26.5333333 L12.2580645,21.2 L8.12903226,21.2 L8.12903226,14.8 L12.2580645,14.8 L17.4193548,9.46666667 Z M19.483871,13.7013333 C21.0116129,14.4906667 22.0645161,16.112 22.0645161,18 C22.0645161,19.888 21.0116129,21.5093333 19.483871,22.288 L19.483871,22.288 Z\" id=\"Combined-Shape\" fill=\"#6D7278\"></path>\n </g>\n</svg>" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AudioComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-audio', template: "<svg width=\"36px\" height=\"36px\" viewBox=\"0 0 36 36\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>audio play</title>\n <defs>\n <rect id=\"path-1\" x=\"0\" y=\"0\" width=\"36\" height=\"36\" rx=\"18\"></rect>\n <filter x=\"-4.2%\" y=\"-4.2%\" width=\"108.3%\" height=\"108.3%\" filterUnits=\"objectBoundingBox\" id=\"filter-2\">\n <feGaussianBlur stdDeviation=\"1\" in=\"SourceAlpha\" result=\"shadowBlurInner1\"></feGaussianBlur>\n <feOffset dx=\"0\" dy=\"-1\" in=\"shadowBlurInner1\" result=\"shadowOffsetInner1\"></feOffset>\n <feComposite in=\"shadowOffsetInner1\" in2=\"SourceAlpha\" operator=\"arithmetic\" k2=\"-1\" k3=\"1\" result=\"shadowInnerInner1\"></feComposite>\n <feColorMatrix values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0\" type=\"matrix\" in=\"shadowInnerInner1\"></feColorMatrix>\n </filter>\n </defs>\n <g id=\"audio-play\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"Rectangle-5-Copy-2\" fill-rule=\"nonzero\">\n <use fill=\"#FFFFFF\" xlink:href=\"#path-1\"></use>\n <use fill-opacity=\"1\" filter=\"url(#filter-2)\" xlink:href=\"#path-1\"></use>\n <rect stroke-opacity=\"0.484156469\" stroke=\"#C3C8DB\" stroke-width=\"2\" stroke-linejoin=\"square\" x=\"1\" y=\"1\" width=\"34\" height=\"34\" rx=\"17\"></rect>\n </g>\n <path d=\"M19.483871,8.64533333 C23.6232258,9.616 26.7096774,13.4346667 26.7096774,18 C26.7096774,22.5653333 23.6232258,26.384 19.483871,27.3546667 L19.483871,27.3546667 L19.483871,25.1573333 C22.4670968,24.24 24.6451613,21.3813333 24.6451613,18 C24.6451613,14.6186667 22.4670968,11.76 19.483871,10.8426667 L19.483871,10.8426667 Z M17.4193548,9.46666667 L17.4193548,26.5333333 L12.2580645,21.2 L8.12903226,21.2 L8.12903226,14.8 L12.2580645,14.8 L17.4193548,9.46666667 Z M19.483871,13.7013333 C21.0116129,14.4906667 22.0645161,16.112 22.0645161,18 C22.0645161,19.888 21.0116129,21.5093333 19.483871,22.288 L19.483871,22.288 Z\" id=\"Combined-Shape\" fill=\"#6D7278\"></path>\n </g>\n</svg>" }]
}] });
class WrongComponent {
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WrongComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: WrongComponent, selector: "quml-wrong", ngImport: i0, template: "<svg width=\"48px\" height=\"48px\" viewBox=\"0 0 48 48\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>wrong</title>\n <defs>\n <linearGradient x1=\"0%\" y1=\"0%\" x2=\"101.719666%\" y2=\"100%\" id=\"linearGradient-1\">\n <stop stop-color=\"#F1635D\" offset=\"0%\"></stop>\n <stop stop-color=\"#F97A74\" offset=\"100%\"></stop>\n </linearGradient>\n </defs>\n <g id=\"Symbols\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"wrong\">\n <circle id=\"Oval\" fill=\"#f77f79\" fill-rule=\"nonzero\" opacity=\"0.900000036\" cx=\"24\" cy=\"24\" r=\"24\"></circle>\n <polygon id=\"Shape\" fill=\"#fff\" points=\"36.0349854 14.4171429 33.6107955 12 24 21.5828571 14.3892045 12 11.9650146 14.4171429 21.5758101 24 11.9650146 33.5828571 14.3892045 36 24 26.4171429 33.6107955 36 36.0349854 33.5828571 26.4241899 24\"></polygon>\n </g>\n </g>\n</svg>" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: WrongComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-wrong', template: "<svg width=\"48px\" height=\"48px\" viewBox=\"0 0 48 48\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>wrong</title>\n <defs>\n <linearGradient x1=\"0%\" y1=\"0%\" x2=\"101.719666%\" y2=\"100%\" id=\"linearGradient-1\">\n <stop stop-color=\"#F1635D\" offset=\"0%\"></stop>\n <stop stop-color=\"#F97A74\" offset=\"100%\"></stop>\n </linearGradient>\n </defs>\n <g id=\"Symbols\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"wrong\">\n <circle id=\"Oval\" fill=\"#f77f79\" fill-rule=\"nonzero\" opacity=\"0.900000036\" cx=\"24\" cy=\"24\" r=\"24\"></circle>\n <polygon id=\"Shape\" fill=\"#fff\" points=\"36.0349854 14.4171429 33.6107955 12 24 21.5828571 14.3892045 12 11.9650146 14.4171429 21.5758101 24 11.9650146 33.5828571 14.3892045 36 24 26.4171429 33.6107955 36 36.0349854 33.5828571 26.4241899 24\"></polygon>\n </g>\n </g>\n</svg>" }]
}] });
class MenuComponent {
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MenuComponent, selector: "quml-menu", ngImport: i0, template: "<svg width=\"18px\" height=\"12px\" viewBox=\"0 0 18 12\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>Shape</title>\n <g id=\"Symbols\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"icon/menu\" fill=\"#333333\">\n <path d=\"M0,12 L18,12 L18,10 L0,10 L0,12 L0,12 Z M0,7 L18,7 L18,5 L0,5 L0,7 L0,7 Z M0,0 L0,2 L18,2 L18,0 L0,0 L0,0 Z\" id=\"Shape\"></path>\n </g>\n </g>\n</svg>" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MenuComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-menu', template: "<svg width=\"18px\" height=\"12px\" viewBox=\"0 0 18 12\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\">\n <title>Shape</title>\n <g id=\"Symbols\" stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g id=\"icon/menu\" fill=\"#333333\">\n <path d=\"M0,12 L18,12 L18,10 L0,10 L0,12 L0,12 Z M0,7 L18,7 L18,5 L0,5 L0,7 L0,7 Z M0,0 L0,2 L18,2 L18,0 L0,0 L0,0 Z\" id=\"Shape\"></path>\n </g>\n </g>\n</svg>" }]
}] });
class SectionPlayerComponent {
constructor(viewerService, utilService, cdRef, errorService) {
this.viewerService = viewerService;
this.utilService = utilService;
this.cdRef = cdRef;
this.errorService = errorService;
this.sectionIndex = 0;
this.playerEvent = new EventEmitter();
this.sectionEnd = new EventEmitter();
this.showScoreBoard = new EventEmitter();
this.destroy$ = new Subject();
this.loadView = false;
this.showContentError = false;
this.noOfTimesApiCalled = 0;
this.currentSlideIndex = 0;
this.showStartPage = true;
this.questions = [];
this.progressBarClass = [];
this.tryAgainClicked = false;
this.carouselConfig = {
NEXT: 1,
PREV: 2
};
this.active = false;
this.showQuestions = false;
this.showZoomModal = false;
this.imageZoomCount = 100;
this.showRootInstruction = true;
this.slideDuration = 0;
this.isAssessEventRaised = false;
this.isShuffleQuestions = false;
this.playerContentCompatibiltyLevel = COMPATABILITY_LEVEL;
}
ngOnChanges(changes) {
/* istanbul ignore else */
if (changes && Object.values(changes)[0].firstChange) {
this.subscribeToEvents();
}
this.viewerService.sectionConfig = this.sectionConfig;
this.setConfig();
}
ngAfterViewInit() {
this.viewerService.raiseStartEvent(0);
this.viewerService.raiseHeartBeatEvent(eventName.startPageLoaded, 'impression', 0);
}
subscribeToEvents() {
this.viewerService.qumlPlayerEvent
.pipe(takeUntil(this.destroy$))
.subscribe((res) => {
this.playerEvent.emit(res);
});
this.viewerService.qumlQuestionEvent
.pipe(takeUntil(this.destroy$))
.subscribe((res) => {
if (res?.error) {
let traceId;
if (_.has(this.sectionConfig, 'config')) {
traceId = this.sectionConfig.config;
}
if (navigator.onLine && this.viewerService.isAvailableLocally) {
this.viewerService.raiseExceptionLog(errorCode.contentLoadFails, errorMessage.contentLoadFails, new Error(errorMessage.contentLoadFails), traceId);
}
else {
this.viewerService.raiseExceptionLog(errorCode.internetConnectivity, errorMessage.internetConnectivity, new Error(errorMessage.internetConnectivity), traceId);
}
this.showContentError = true;
return;
}
if (!res?.questions) {
return;
}
const unCommonQuestions = _.xorBy(this.questions, res.questions, 'identifier');
this.questions = _.uniqBy(this.questions.concat(unCommonQuestions), 'identifier');
this.sortQuestions();
this.viewerService.updateSectionQuestions(this.sectionConfig.metadata.identifier, this.questions);
this.cdRef.detectChanges();
this.noOfTimesApiCalled++;
this.loadView = true;
if (this.currentSlideIndex > 0 && this.myCarousel) {
this.myCarousel.selectSlide(this.currentSlideIndex);
if (this.questions[this.currentSlideIndex - 1]) {
this.currentQuestionsMedia = this.questions[this.currentSlideIndex - 1]?.media;
this.setImageZoom();
this.highlightQuestion();
}
}
if (this.currentSlideIndex === 0) {
if (this.showStartPage) {
this.active = this.sectionIndex === 0;
}
else {
setTimeout(() => { this.nextSlide(); });
}
}
this.removeAttribute();
});
}
setConfig() {
this.noOfTimesApiCalled = 0;
this.currentSlideIndex = 0;
this.active = this.currentSlideIndex === 0 && this.sectionIndex === 0 && this.showStartPage;
/* istanbul ignore else */
if (this.myCarousel) {
this.myCarousel.selectSlide(this.currentSlideIndex);
}
this.threshold = this.sectionConfig?.context?.threshold || 3;
this.questionIds = _.cloneDeep(this.sectionConfig.metadata.childNodes);
/* istanbul ignore else */
if (this.parentConfig.isReplayed) {
this.initializeTimer = true;
this.viewerService.raiseStartEvent(0);
this.viewerService.raiseHeartBeatEvent(eventName.startPageLoaded, 'impression', 0);
this.disableNext = false;
this.currentSlideIndex = 0;
this.myCarousel.selectSlide(0);
this.showRootInstruction = true;
this.currentQuestionsMedia = _.get(this.questions[0], 'media');
this.setImageZoom();
this.loadView = true;
this.removeAttribute();
setTimeout(() => {
const menuBtn = document.querySelector('#overlay-button');
/* istanbul ignore else */
if (menuBtn) {
menuBtn.focus({ preventScroll: true });
}
}, 200);
}
this.shuffleOptions = this.sectionConfig.config?.shuffleOptions;
this.isShuffleQuestions = this.sectionConfig.metadata.shuffle;
this.noOfQuestions = this.questionIds.length;
this.viewerService.initialize(this.sectionConfig, this.threshold, this.questionIds, this.parentConfig);
this.checkCompatibilityLevel(this.sectionConfig.metadata.compatibilityLevel);
this.timeLimit = this.sectionConfig.metadata?.timeLimits?.questionSet?.max || 0;
this.warningTime = this.timeLimit ? (this.timeLimit - (this.timeLimit * this.parentConfig.warningTime / 100)) : 0;
this.showWarningTimer = this.parentConfig.showWarningTimer;
this.showTimer = this.sectionConfig.metadata?.showTimer;
if (this.sectionConfig.metadata?.showFeedback) {
this.showFeedBack = this.sectionConfig.metadata?.showFeedback; // prioritize the section level config
}
else {
this.showFeedBack = this.parentConfig.showFeedback; // Fallback to parent config
}
this.showUserSolution = this.sectionConfig.metadata?.showSolutions;
this.startPageInstruction = this.sectionConfig.metadata?.instructions || this.parentConfig.instructions;
this.linearNavigation = this.sectionConfig.metadata.navigationMode === 'non-linear' ? false : true;
this.showHints = this.sectionConfig.metadata?.showHints;
this.points = this.sectionConfig.metadata?.points;
this.allowSkip = this.sectionConfig.metadata?.allowSkip?.toLowerCase() !== 'no';
this.showStartPage = this.sectionConfig.metadata?.showStartPage?.toLowerCase() !== 'no';
this.progressBarClass = this.parentConfig.isSectionsAvailable ? this.mainProgressBar.find(item => item.isActive)?.children :
this.mainProgressBar;
if (this.progressBarClass) {
this.progressBarClass.forEach(item => item.showFeedback = this.showFeedBack);
}
this.questions = this.viewerService.getSectionQuestions(this.sectionConfig.metadata.identifier);
this.sortQuestions();
this.viewerService.updateSectionQuestions(this.sectionConfig.metadata.identifier, this.questions);
this.resetQuestionState();
if (this.jumpToQuestion) {
this.goToQuestion(this.jumpToQuestion);
}
else if (this.threshold === 1) {
this.viewerService.getQuestion();
}
else if (this.threshold > 1) {
this.viewerService.getQuestions();
}
if (!this.sectionConfig.metadata?.children?.length) {
this.loadView = true;
this.disableNext = true;
}
if (!this.initializeTimer) {
this.initializeTimer = true;
}
this.initialTime = this.initialSlideDuration = new Date().getTime();
}
removeAttribute() {
setTimeout(() => {
const firstSlide = document.querySelector('.carousel.slide');
/* istanbul ignore else */
if (firstSlide) {
firstSlide.removeAttribute("tabindex");
}
}, 100);
}
sortQuestions() {
/* istanbul ignore else */
if (this.questions.length && this.questionIds.length) {
const ques = [];
this.questionIds.forEach((questionId) => {
const que = this.questions.find(question => question.identifier === questionId);
/* istanbul ignore else */
if (que) {
ques.push(que);
}
});
this.questions = ques;
}
}
createSummaryObj() {
const classObj = _.groupBy(this.progressBarClass, 'class');
return {
skipped: classObj?.skipped?.length || 0,
correct: classObj?.correct?.length || 0,
wrong: classObj?.wrong?.length || 0,
partial: classObj?.partial?.length || 0
};
}
nextSlide() {
this.currentQuestionsMedia = _.get(this.questions[this.currentSlideIndex], 'media');
this.getQuestion();
this.viewerService.raiseHeartBeatEvent(eventName.nextClicked, TelemetryType.interact, this.myCarousel.getCurrentSlideIndex() + 1);
this.viewerService.raiseHeartBeatEvent(eventName.nextClicked, TelemetryType.impression, this.myCarousel.getCurrentSlideIndex() + 1);
/* istanbul ignore else */
if (this.currentSlideIndex !== this.questions.length) {
this.currentSlideIndex = this.currentSlideIndex + 1;
}
/* istanbul ignore else */
if (this.myCarousel.isLast(this.myCarousel.getCurrentSlideIndex()) || this.noOfQuestions === this.myCarousel.getCurrentSlideIndex()) {
this.calculateScore();
}
/* istanbul ignore else */
if (this.myCarousel.getCurrentSlideIndex() > 0 &&
this.questions[this.myCarousel.getCurrentSlideIndex() - 1].qType === QuestionType.mcq && this.currentOptionSelected) {
const option = this.currentOptionSelected?.option ? this.currentOptionSelected['option'] : undefined;
const identifier = this.questions[this.myCarousel.getCurrentSlideIndex() - 1].identifier;
const qType = this.questions[this.myCarousel.getCurrentSlideIndex() - 1].qType;
this.viewerService.raiseResponseEvent(identifier, qType, option);
}
/* istanbul ignore else */
if (this.questions[this.myCarousel.getCurrentSlideIndex()]) {
this.setSkippedClass(this.myCarousel.getCurrentSlideIndex());
}
/* istanbul ignore else */
if (this.myCarousel.getCurrentSlideIndex() === this.noOfQuestions) {
this.clearTimeInterval();
this.emitSectionEnd();
return;
}
this.myCarousel.move(this.carouselConfig.NEXT);
this.setImageZoom();
this.resetQuestionState();
this.clearTimeInterval();
}
prevSlide() {
this.disableNext = false;
this.currentSolutions = undefined;
this.viewerService.raiseHeartBeatEvent(eventName.prevClicked, TelemetryType.interact, this.myCarousel.getCurrentSlideIndex() - 1);
this.showAlert = false;
/* istanbul ignore else */
if (this.currentSlideIndex !== this.questions.length) {
this.currentSlideIndex = this.currentSlideIndex + 1;
}
if (this.myCarousel.getCurrentSlideIndex() + 1 === this.noOfQuestions && this.endPageReached) {
this.endPageReached = false;
}
else {
this.myCarousel.move(this.carouselConfig.PREV);
}
this.currentSlideIndex = this.myCarousel.getCurrentSlideIndex();
this.active = this.currentSlideIndex === 0 && this.sectionIndex === 0 && this.showStartPage;
this.currentQuestionsMedia = _.get(this.questions[this.myCarousel.getCurrentSlideIndex() - 1], 'media');
this.setImageZoom();
this.setSkippedClass(this.myCarousel.getCurrentSlideIndex() - 1);
}
getQuestion() {
if (this.myCarousel.getCurrentSlideIndex() > 0
&& ((this.threshold * this.noOfTimesApiCalled) - 1) === this.myCarousel.getCurrentSlideIndex()
&& this.threshold * this.noOfTimesApiCalled >= this.questions.length && this.threshold > 1) {
this.viewerService.getQuestions();
}
if (this.myCarousel.getCurrentSlideIndex() > 0
&& this.questions[this.myCarousel.getCurrentSlideIndex()] === undefined && this.threshold > 1) {
this.viewerService.getQuestions();
}
if (this.threshold === 1 && this.myCarousel.getCurrentSlideIndex() >= 0) {
this.viewerService.getQuestion();
}
}
resetQuestionState() {
this.active = false;
this.showAlert = false;
this.optionSelectedObj = undefined;
this.currentOptionSelected = undefined;
this.currentQuestion = undefined;
this.currentOptions = undefined;
this.currentSolutions = undefined;
}
activeSlideChange(event) {
this.initialSlideDuration = new Date().getTime();
this.isAssessEventRaised = false;
const questionElement = document.querySelector('li.progressBar-border');
const progressBarContainer = document.querySelector(".lanscape-mode-right");
/* istanbul ignore else */
if (progressBarContainer && questionElement && !this.parentConfig.isReplayed) {
this.utilService.scrollParentToChild(progressBarContainer, questionElement);
}
const contentElement = document.querySelector(".landscape-content");
if (contentElement) {
contentElement.scrollTop = 0;
}
this.viewerService.pauseVideo();
}
nextSlideClicked(event) {
if (this.showRootInstruction && this.parentConfig.isSectionsAvailable) {
this.showRootInstruction = false;
return;
}
if (this.myCarousel.getCurrentSlideIndex() === 0) {
return this.nextSlide();
}
/* istanbul ignore else */
if (event?.type === 'next') {
this.validateSelectedOption(this.optionSelectedObj, 'next');
}
}
previousSlideClicked(event) {
/* istanbul ignore else */
if (event.event === 'previous clicked') {
if (this.optionSelectedObj && this.showFeedBack) {
this.stopAutoNavigation = false;
this.validateSelectedOption(this.optionSelectedObj, 'previous');
}
else {
this.stopAutoNavigation = true;
if (this.currentSlideIndex === 0 && this.parentConfig.isSectionsAvailable && this.getCurrentSectionIndex() > 0) {
const previousSectionId = this.mainProgressBar[this.getCurrentSectionIndex() - 1].identifier;
this.jumpToSection(previousSectionId);
return;
}
this.prevSlide();
}
}
}
updateScoreForShuffledQuestion() {
const currentIndex = this.myCarousel.getCurrentSlideIndex() - 1;
if (this.isShuffleQuestions) {
this.updateScoreBoard(currentIndex, 'correct', undefined, DEFAULT_SCORE);
}
}
getCurrentSectionIndex() {
const currentSectionId = this.sectionConfig.metadata.identifier;
return this.mainProgressBar.findIndex(section => section.identifier === currentSectionId);
}
goToSlideClicked(event, index) {
/* istanbul ignore else */
if (!this.progressBarClass?.length) {
/* istanbul ignore else */
if (index === 0) {
this.jumpSlideIndex = 0;
this.goToSlide(this.jumpSlideIndex);
}
return;
}
event.stopPropagation();
this.active = false;
this.jumpSlideIndex = index;
if (this.optionSelectedObj && this.showFeedBack) {
this.stopAutoNavigation = false;
this.validateSelectedOption(this.optionSelectedObj, 'jump');
}
else {
this.stopAutoNavigation = true;
this.goToSlide(this.jumpSlideIndex);
}
}
onEnter(event, index) {
/* istanbul ignore else */
if (event.keyCode === 13) {
event.stopPropagation();
this.goToSlideClicked(event, index);
}
}
jumpToSection(identifier) {
this.showRootInstruction = false;
this.emitSectionEnd(false, identifier);
}
onSectionEnter(event, identifier) {
/* istanbul ignore else */
if (event.keyCode === 13) {
event.stopPropagation();
/* istanbul ignore else */
if (this.optionSelectedObj) {
this.validateSelectedOption(this.optionSelectedObj, 'jump');
}
this.jumpToSection(identifier);
}
}
onScoreBoardClicked() {
this.viewerService.updateSectionQuestions(this.sectionConfig.metadata.identifier, this.questions);
this.showScoreBoard.emit();
}
onScoreBoardEnter(event) {
event.stopPropagation();
/* istanbul ignore else */
if (event.key === 'Enter') {
this.onScoreBoardClicked();
}
}
focusOnNextButton() {
setTimeout(() => {
const nextBtn = document.querySelector('.quml-navigation__next');
/* istanbul ignore else */
if (nextBtn) {
nextBtn.focus({ preventScroll: true });
}
}, 100);
}
getOptionSelected(optionSelected) {
/* istanbul ignore else */
if (optionSelected.cardinality === Cardinality.single && JSON.stringify(this.currentOptionSelected) === JSON.stringify(optionSelected)) {
return; // Same option selected
}
this.focusOnNextButton();
this.active = true;
this.currentOptionSelected = optionSelected;
const currentIndex = this.myCarousel.getCurrentSlideIndex() - 1;
this.viewerService.raiseHeartBeatEvent(eventName.optionClicked, TelemetryType.interact, this.myCarousel.getCurrentSlideIndex());
// This optionSelected comes empty whenever the try again is clicked on feedback popup
if (_.isEmpty(optionSelected?.option)) {
this.optionSelectedObj = undefined;
this.currentSolutions = undefined;
this.updateScoreBoard(currentIndex, 'skipped');
}
else {
this.optionSelectedObj = optionSelected;
this.isAssessEventRaised = false;
this.currentSolutions = !_.isEmpty(optionSelected.solutions) ? optionSelected.solutions : undefined;
}
this.currentQuestionIndetifier = this.questions[currentIndex].identifier;
this.media = _.get(this.questions[currentIndex], 'media', []);
/* istanbul ignore else */
if (!this.showFeedBack) {
this.validateSelectedOption(this.optionSelectedObj);
}
}
durationEnds() {
this.showSolution = false;
this.showAlert = false;
this.viewerService.pauseVideo();
this.emitSectionEnd(true);
}
checkCompatibilityLevel(compatibilityLevel) {
/* istanbul ignore else */
if (compatibilityLevel) {
// TODO: It is a temporary fix for IQ-679 or ED-3398
// Before these changes we were calling errorService.checkContentCompatibility
const checkContentCompatible = this.checkContentCompatibility(compatibilityLevel);
/* istanbul ignore else */
if (!checkContentCompatible.isCompitable) {
this.viewerService.raiseExceptionLog(errorCode.contentCompatibility, errorMessage.contentCompatibility, checkContentCompatible.error, this.sectionConfig?.config?.traceId);
}
}
}
checkContentCompatibility(currentCompatibilityLevel) {
if (currentCompatibilityLevel > this.playerContentCompatibiltyLevel) {
const compatibilityError = new Error();
compatibilityError.message = `Player supports ${this.playerContentCompatibiltyLevel}
but content compatibility is ${currentCompatibilityLevel}`;
compatibilityError.name = 'contentCompatibily';
return { error: compatibilityError, isCompitable: false };
}
else {
return { error: null, isCompitable: true };
}
}
emitSectionEnd(isDurationEnded = false, jumpToSection) {
const eventObj = {
summary: this.createSummaryObj(),
score: this.calculateScore(),
durationSpent: this.utilService.getTimeSpentText(this.initialTime),
slideIndex: this.myCarousel.getCurrentSlideIndex(),
isDurationEnded,
};
if (jumpToSection) {
eventObj.jumpToSection = jumpToSection;
}
this.viewerService.updateSectionQuestions(this.sectionConfig.metadata.identifier, this.questions);
this.sectionEnd.emit(eventObj);
}
closeAlertBox(event) {
if (event?.type === 'close') {
this.viewerService.raiseHeartBeatEvent(eventName.closedFeedBack, TelemetryType.interact, this.myCarousel.getCurrentSlideIndex());
}
else if (event?.type === 'tryAgain') {
this.tryAgainClicked = true;
setTimeout(() => {
this.tryAgainClicked = false;
}, 2000);
this.viewerService.raiseHeartBeatEvent(eventName.tryAgain, TelemetryType.interact, this.myCarousel.getCurrentSlideIndex());
}
this.showAlert = false;
}
setSkippedClass(index) {
if (this.progressBarClass && _.get(this.progressBarClass[index], 'class') === 'unattempted') {
this.progressBarClass[index].class = 'skipped';
}
}
toggleScreenRotate(event) {
this.viewerService.raiseHeartBeatEvent(eventName.deviceRotationClicked, TelemetryType.interact, this.myCarousel.getCurrentSlideIndex() + 1);
}
validateSelectedOption(option, type) {
const selectedOptionValue = option?.option?.value;
const currentIndex = this.myCarousel.getCurrentSlideIndex() - 1;
const isQuestionSkipAllowed = !this.optionSelectedObj &&
this.allowSkip && this.utilService.getQuestionType(this.questions, currentIndex) === QuestionType.mcq;
const isSubjectiveQuestion = this.utilService.getQuestionType(this.questions, currentIndex) === QuestionType.sa;
const onStartPage = this.startPageInstruction && this.myCarousel.getCurrentSlideIndex() === 0;
const isActive = !this.optionSelectedObj && this.active;
const selectedQuestion = this.questions[currentIndex];
const key = selectedQuestion.responseDeclaration ? this.utilService.getKeyValue(Object.keys(selectedQuestion.responseDeclaration)) : '';
this.slideDuration = Math.round((new Date().getTime() - this.initialSlideDuration) / 1000);
const getParams = () => {
if (selectedQuestion.qType.toUpperCase() === QuestionType.mcq && selectedQuestion?.editorState?.options) {
return selectedQuestion.editorState.options;
}
else if (selectedQuestion.qType.toUpperCase() === QuestionType.mcq && !_.isEmpty(selectedQuestion?.editorState)) {
return [selectedQuestion?.editorState];
}
else {
return [];
}
};
const edataItem = {
'id': selectedQuestion.identifier,
'title': selectedQuestion.name,
'desc': selectedQuestion.description,
'type': selectedQuestion.qType.toLowerCase(),
'maxscore': key.length === 0 ? 0 : selectedQuestion.outcomeDeclaration.maxScore.defaultValue || 0,
'params': getParams()
};
/* istanbul ignore else */
if (edataItem && this.parentConfig.isSectionsAvailable) {
edataItem.sectionId = this.sectionConfig.metadata.identifier;
}
/* istanbul ignore else */
if (!this.optionSelectedObj && !this.isAssessEventRaised && selectedQuestion.qType.toUpperCase() !== QuestionType.sa) {
this.isAssessEventRaised = true;
this.viewerService.raiseAssesEvent(edataItem, currentIndex + 1, 'No', 0, [], this.slideDuration);
}
if (this.optionSelectedObj) {
this.currentQuestion = selectedQuestion.body;
this.currentOptions = selectedQuestion.interactions[key].options;
if (option.cardinality === Cardinality.single) {
const correctOptionValue = Number(selectedQuestion.responseDeclaration[key].correctResponse.value);
this.showAlert = true;
if (option.option?.value === correctOptionValue) {
const currentScore = this.getScore(currentIndex, key, true);
if (!this.isAssessEventRaised) {
this.isAssessEventRaised = true;
this.viewerService.raiseAssesEvent(edataItem, currentIndex + 1, 'Yes', currentScore, [option.option], this.slideDuration);
}
this.alertType = 'correct';
if (this.showFeedBack)
this.correctFeedBackTimeOut(type);
this.updateScoreBoard(currentIndex, 'correct', undefined, currentScore);
}
else {
const currentScore = this.getScore(currentIndex, key, false, option);
this.alertType = 'wrong';
const classType = this.progressBarClass[currentIndex].class === 'partial' ? 'partial' : 'wrong';
this.updateScoreBoard(currentIndex, classType, selectedOptionValue, currentScore);
/* istanbul ignore else */
if (!this.isAssessEventRaised) {
this.isAssessEventRaised = true;
this.viewerService.raiseAssesEvent(edataItem, currentIndex + 1, 'No', 0, [option.option], this.slideDuration);
}
}
}
if (option.cardinality === Cardinality.multiple) {
const responseDeclaration = this.questions[currentIndex].responseDeclaration;
const outcomeDeclaration = this.questions[currentIndex].outcomeDeclaration;
const currentScore = this.utilService.getMultiselectScore(option.option, responseDeclaration, this.isShuffleQuestions, outcomeDeclaration);
this.showAlert = true;
if (currentScore === 0) {
if (!this.isAssessEventRaised) {
this.isAssessEventRaised = true;
this.viewerService.raiseAssesEvent(edataItem, currentIndex + 1, 'No', 0, [option.option], this.slideDuration);
}
this.alertType = 'wrong';
this.updateScoreBoard(currentIndex, 'wrong');
}
else {
this.updateScoreBoard(currentIndex, 'correct', undefined, currentScore);
if (!this.isAssessEventRaised) {
this.isAssessEventRaised = true;
this.viewerService.raiseAssesEvent(edataItem, currentIndex + 1, 'Yes', currentScore, [option.option], this.slideDuration);
}
if (this.showFeedBack)
this.correctFeedBackTimeOut(type);
this.alertType = 'correct';
}
}
this.optionSelectedObj = undefined;
}
else if ((isQuestionSkipAllowed) || isSubjectiveQuestion || onStartPage || isActive) {
if (!_.isUndefined(type)) {
this.nextSlide();
}
}
else if (this.startPageInstruction && !this.optionSelectedObj && !this.active && !this.allowSkip &&
this.myCarousel.getCurrentSlideIndex() > 0 && this.utilService.getQuestionType(this.questions, currentIndex) === QuestionType.mcq
&& this.utilService.canGo(this.progressBarClass[this.myCarousel.getCurrentSlideIndex()])) {
this.infoPopupTimeOut();
}
else if (!this.optionSelectedObj && !this.active && !this.allowSkip && this.myCarousel.getCurrentSlideIndex() >= 0
&& this.utilService.getQuestionType(this.questions, currentIndex) === QuestionType.mcq
&& this.utilService.canGo(this.progressBarClass[this.myCarousel.getCurrentSlideIndex()])) {
this.infoPopupTimeOut();
}
}
infoPopupTimeOut() {
this.infoPopup = true;
setTimeout(() => {
this.infoPopup = false;
}, 2000);
}
correctFeedBackTimeOut(type) {
this.intervalRef = setTimeout(() => {
if (this.showAlert) {
this.showAlert = false;
if (!this.myCarousel.isLast(this.myCarousel.getCurrentSlideIndex()) && type === 'next') {
this.nextSlide();
}
else if (type === 'previous' && !this.stopAutoNavigation) {
this.prevSlide();
}
else if (type === 'jump' && !this.stopAutoNavigation) {
this.goToSlide(this.jumpSlideIndex);
}
else if (this.myCarousel.isLast(this.myCarousel.getCurrentSlideIndex())) {
this.endPageReached = true;
this.emitSectionEnd();
}
}
}, 4000);
}
goToSlide(index) {
this.viewerService.raiseHeartBeatEvent(eventName.goToQuestion, TelemetryType.interact, this.myCarousel.getCurrentSlideIndex());
this.disableNext = false;
this.currentSlideIndex = index;
this.showRootInstruction = false;
if (index === 0) {
this.optionSelectedObj = undefined;
this.myCarousel.selectSlide(0);
this.active = this.currentSlideIndex === 0 && this.sectionIndex === 0 && this.showStartPage;
this.showRootInstruction = true;
/* istanbul ignore else */
if (!this.sectionConfig.metadata?.children?.length) {
this.disableNext = true;
}
return;
}
this.currentQuestionsMedia = _.get(this.questions[this.currentSlideIndex - 1], 'media');
this.setSkippedClass(this.currentSlideIndex - 1);
/* istanbul ignore else */
if (!this.initializeTimer) {
this.initializeTimer = true;
}
if (this.questions[index - 1] === undefined) {
this.showQuestions = false;
this.viewerService.getQuestions(0, index);
this.currentSlideIndex = index;
}
else if (this.questions[index - 1] !== undefined) {
this.myCarousel.selectSlide(index);
}
this.setImageZoom();
this.currentSolutions = undefined;
this.highlightQuestion();
}
goToQuestion(event) {
this.active = false;
this.showRootInstruction = false;
this.disableNext = false;
this.initializeTimer = true;
const index = event.questionNo;
this.viewerService.getQuestions(0, index);
this.currentSlideIndex = index;
this.myCarousel.selectSlide(index);
this.highlightQuestion();
}
highlightQuestion() {
const currentQuestion = this.questions[this.currentSlideIndex - 1];
const questionType = currentQuestion?.qType?.toUpperCase();
const element = document.getElementById(currentQuestion?.identifier);
if (element && questionType) {
let questionTitleElement;
switch (questionType) {
case QuestionType.mcq:
questionTitleElement = element.querySelector('.mcq-title');
break;
default:
questionTitleElement = element.querySelector('.question-container');
}
if (questionTitleElement) {
setTimeout(() => {
questionTitleElement.focus({ preventScroll: true });
}, 0);
}
}
}
getSolutions() {
this.showAlert = false;
this.viewerService.raiseHeartBeatEvent(eventName.showAnswer, TelemetryType.interact, this.myCarousel.getCurrentSlideIndex());
this.viewerService.raiseHeartBeatEvent(eventName.showAnswer, TelemetryType.impression, this.myCarousel.getCurrentSlideIndex());
const currentIndex = this.myCarousel.getCurrentSlideIndex() - 1;
this.currentQuestion = this.questions[currentIndex].body;
this.currentOptions = this.questions[currentIndex].interactions.response1.options;
this.currentQuestionsMedia = _.get(this.questions[currentIndex], 'media');
setTimeout(() => {
this.setImageZoom();
});
setTimeout(() => {
this.setImageHeightWidthClass();
}, 100);
/* istanbul ignore else */
if (this.currentSolutions) {
this.showSolution = true;
}
this.clearTimeInterval();
}
viewSolution() {
this.viewerService.raiseHeartBeatEvent(eventName.viewSolutionClicked, TelemetryType.interact, this.myCarousel.getCurrentSlideIndex());
this.showSolution = true;
this.showAlert = false;
this.currentQuestionsMedia = _.get(this.questions[this.myCarousel.getCurrentSlideIndex() - 1], 'media');
setTimeout(() => {
this.setImageZoom();
this.setImageHeightWidthClass();
});
clearTimeout(this.intervalRef);
}
closeSolution() {
this.setImageZoom();
this.viewerService.raiseHeartBeatEvent(eventName.solutionClosed, TelemetryType.interact, this.myCarousel.getCurrentSlideIndex());
this.showSolution = false;
this.myCarousel.selectSlide(this.currentSlideIndex);
this.focusOnNextButton();
}
viewHint() {
this.viewerService.raiseHeartBeatEvent(eventName.viewHint, TelemetryType.interact, this.myCarousel.getCurrentSlideIndex());
}
onAnswerKeyDown(event) {
/* istanbul ignore else */
if (event.key === 'Enter') {
event.stopPropagation();
this.getSolutions();
}
}
showAnswerClicked(event, question) {
/* istanbul ignore else */
if (event?.showAnswer) {
this.focusOnNextButton();
this.active = true;
this.progressBarClass[this.myCarousel.getCurrentSlideIndex() - 1].class = 'correct';
this.updateScoreForShuffledQuestion();
/* istanbul ignore else */
if (question) {
const index = this.questions.findIndex(que => que.identifier === question.identifier);
/* istanbul ignore else */
if (index > -1) {
this.questions[index].isAnswerShown = true;
this.viewerService.updateSectionQuestions(this.sectionConfig.metadata.identifier, this.questions);
}
}
this.viewerService.raiseHeartBeatEvent(eventName.showAnswer, TelemetryType.interact, pageId.shortAnswer);
this.viewerService.raiseHeartBeatEvent(eventName.pageScrolled, TelemetryType.impression, this.myCarousel.getCurrentSlideIndex() - 1);
}
}
getScore(currentIndex, key, isCorrectAnswer, selectedOption) {
/* istanbul ignore else */
if (isCorrectAnswer) {
if (this.isShuffleQuestions) {
return DEFAULT_SCORE;
}
return this.questions[currentIndex].outcomeDeclaration.maxScore.defaultValue ?
this.questions[currentIndex].outcomeDeclaration.maxScore.defaultValue : DEFAULT_SCORE;
}
else {
const selectedOptionValue = selectedOption.option.value;
const mapping = this.questions[currentIndex].responseDeclaration.mapping;
let score = 0;
/* istanbul ignore else */
if (mapping) {
mapping.forEach((val) => {
if (selectedOptionValue === val.value) {
score = val.score || 0;
if (val.score) {
this.progressBarClass[currentIndex].class = 'partial';
}
}
});
}
return score;
}
}
calculateScore() {
return this.progressBarClass.reduce((accumulator, element) => accumulator + element.score, 0);
}
updateScoreBoard(index, classToBeUpdated, optionValue, score) {
this.progressBarClass.forEach((ele) => {
if (ele.index - 1 === index) {
ele.class = classToBeUpdated;
ele.score = score ? score : 0;
/* istanbul ignore else */
if (!this.showFeedBack) {
ele.value = optionValue;
}
}
});
}
/* End of score methods */
/* Start of Image zoom related */
setImageHeightWidthClass() {
document.querySelectorAll('[data-asset-variable]').forEach(image => {
image.removeAttribute('class');
if (image.clientHeight > image.clientWidth) {
image.setAttribute('class', 'portrait');
}
else if (image.clientHeight < image.clientWidth) {
image.setAttribute('class', 'landscape');
}
// } else {
// image.setAttribute('class', 'neutral');
// }
});
}
setImageZoom() {
const index = this.myCarousel.getCurrentSlideIndex() - 1;
const currentQuestionId = this.questions[index]?.identifier;
document.querySelectorAll('[data-asset-variable]').forEach(image => {
if (image.nodeName.toLowerCase() !== 'img') {
return;
}
const imageId = image.getAttribute('data-asset-variable');
image.setAttribute('class', 'option-image');
image.setAttribute('id', imageId);
_.forEach(this.currentQuestionsMedia, (val) => {
if (imageId === val.id) {
if (this.parentConfig.isAvailableLocally && this.parentConfig.baseUrl) {
let baseUrl = this.parentConfig.baseUrl;
baseUrl = `${baseUrl.substring(0, baseUrl.lastIndexOf('/'))}/${this.sectionConfig.metadata.identifier}`;
if (currentQuestionId) {
image['src'] = `${baseUrl}/${currentQuestionId}/${val.src}`;
}
}
else if (val.baseUrl) {
image['src'] = val.baseUrl + val.src;
}
}
});
const divElement = document.createElement('div');
divElement.setAttribute('class', 'magnify-icon');
divElement.onclick = (event) => {
this.viewerService.raiseHeartBeatEvent(eventName.zoomClicked, TelemetryType.interact, this.myCarousel.getCurrentSlideIndex());
this.zoomImgSrc = image['src'];
this.showZoomModal = true;
const zoomImage = document.getElementById('imageModal');
if (zoomImage.clientHeight > image.clientWidth) {
zoomImage.setAttribute('class', 'portrait');
}
else if (image.clientHeight < image.clientWidth) {
zoomImage.setAttribute('class', 'landscape');
}
else {
zoomImage.setAttribute('class', 'neutral');
}
event.stopPropagation();
};
image.parentNode.insertBefore(divElement, image.nextSibling);
});
}
zoomIn() {
this.viewerService.raiseHeartBeatEvent(eventName.zoomInClicked, TelemetryType.interact, this.myCarousel.getCurrentSlideIndex());
this.imageZoomCount = this.imageZoomCount + 10;
this.setImageModalHeightWidth();
}
zoomOut() {
this.viewerService.raiseHeartBeatEvent(eventName.zoomOutClicked, TelemetryType.interact, this.myCarousel.getCurrentSlideIndex());
/* istanbul ignore else */
if (this.imageZoomCount > 100) {
this.imageZoomCount = this.imageZoomCount - 10;
this.setImageModalHeightWidth();
}
}
setImageModalHeightWidth() {
this.imageModal.nativeElement.style.width = `${this.imageZoomCount}%`;
this.imageModal.nativeElement.style.height = `${this.imageZoomCount}%`;
}
closeZoom() {
this.viewerService.raiseHeartBeatEvent(eventName.zoomCloseClicked, TelemetryType.interact, this.myCarousel.getCurrentSlideIndex());
document.getElementById('imageModal').removeAttribute('style');
this.showZoomModal = false;
}
/* End of Image zoom related */
clearTimeInterval() {
if (this.intervalRef) {
clearTimeout(this.intervalRef);
}
}
ngOnDestroy() {
this.destroy$.next(true);
this.destroy$.unsubscribe();
this.errorService.getInternetConnectivityError.unsubscribe();
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SectionPlayerComponent, deps: [{ token: ViewerService }, { token: UtilService }, { token: i0.ChangeDetectorRef }, { token: i5.ErrorService }], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SectionPlayerComponent, selector: "quml-section-player", inputs: { sectionConfig: "sectionConfig", attempts: "attempts", jumpToQuestion: "jumpToQuestion", mainProgressBar: "mainProgressBar", sectionIndex: "sectionIndex", parentConfig: "parentConfig" }, outputs: { playerEvent: "playerEvent", sectionEnd: "sectionEnd", showScoreBoard: "showScoreBoard" }, host: { listeners: { "window:beforeunload": "ngOnDestroy()" } }, viewQueries: [{ propertyName: "myCarousel", first: true, predicate: ["myCarousel"], descendants: true }, { propertyName: "imageModal", first: true, predicate: ["imageModal"], descendants: true, static: true }, { propertyName: "questionSlide", first: true, predicate: ["questionSlide"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"quml-container\" *ngIf=\"loadView\" [hidden]=\"showZoomModal\">\n <div [hidden]=\"showSolution\" class=\"quml-landscape\">\n <quml-header class=\"main-header\" (durationEnds)=\"durationEnds()\" [disablePreviousNavigation]=\"linearNavigation\"\n [duration]=\"timeLimit\" [warningTime]=\"warningTime\" [showWarningTimer]=\"showWarningTimer\" [showTimer]=\"showTimer\" [showLegend]=\"parentConfig?.showLegend\"\n (nextSlideClicked)=\"nextSlideClicked($event)\" (prevSlideClicked)=\"previousSlideClicked($event)\"\n [currentSlideIndex]=\"currentSlideIndex\" [totalNoOfQuestions]=\"noOfQuestions\" [active]=\"active\"\n [showFeedBack]=\"showFeedBack\" [currentSolutions]=\"currentSolutions\" (showSolution)=\"viewSolution()\"\n [initializeTimer]=\"initializeTimer\" [replayed]=\"parentConfig?.isReplayed\" [disableNext]=\"disableNext\"\n [startPageInstruction]=\"startPageInstruction\" [attempts]=\"attempts\" [showStartPage]=\"showStartPage\"\n [showDeviceOrientation]=\"sectionConfig?.config?.showDeviceOrientation\" (toggleScreenRotate)=\"toggleScreenRotate()\">\n </quml-header>\n\n <div class=\"landscape-mode\">\n <div class=\"lanscape-mode-left\">\n <div class=\"current-slide\" *ngIf=\"currentSlideIndex !== 0\">\n {{myCarousel.getCurrentSlideIndex()}}/{{noOfQuestions}}\n </div>\n <div *ngIf=\"currentSolutions && showUserSolution\">\n <quml-ans (click)=\"getSolutions()\" (keydown)=\"onAnswerKeyDown($event)\"></quml-ans>\n </div>\n </div>\n <div class=\"landscape-content\">\n <carousel class=\"landscape-center\" [interval]=\"0\" [showIndicators]=\"false\" [noWrap]=\"true\" #myCarousel\n (activeSlideChange)=\"activeSlideChange($event)\">\n <slide>\n <quml-startpage\n [instructions]=\"showRootInstruction ? parentConfig?.instructions : sectionConfig.metadata?.instructions\"\n [points]=\"points\" [time]=\"showRootInstruction ? timeLimit : null\" [showTimer]=\"showTimer\"\n [totalNoOfQuestions]=\"showRootInstruction ? parentConfig?.questionCount : noOfQuestions\"\n [contentName]=\"showRootInstruction ? parentConfig?.contentName : parentConfig?.isSectionsAvailable ? sectionConfig?.metadata?.name : parentConfig?.contentName\">\n </quml-startpage>\n </slide>\n <slide *ngFor=\"let question of questions; let i= index\" #questionSlide>\n <div [id]=\"question.identifier\">\n <div *ngIf=\"question?.primaryCategory.toLowerCase() === 'multiple choice question'\">\n <quml-mcq [shuffleOptions]='shuffleOptions' [question]='question' [replayed]=\"parentConfig?.isReplayed\"\n (optionSelected)=\"getOptionSelected($event)\" [identifier]=\"question.id\" [tryAgain]=\"tryAgainClicked\">\n </quml-mcq>\n </div>\n <div *ngIf=\"question?.primaryCategory.toLowerCase() === 'subjective question'\">\n <quml-sa [questions]='question' [replayed]=\"parentConfig?.isReplayed\" [baseUrl]=\"parentConfig?.baseUrl\"\n (showAnswerClicked)=\"showAnswerClicked($event, question)\">\n </quml-sa>\n </div>\n </div>\n </slide>\n </carousel>\n </div>\n <div class=\"lanscape-mode-right\">\n <ul>\n <ng-container>\n <li class=\"showFeedBack-progressBar info-page hover-effect\" tabindex=\"0\"\n [ngClass]=\"(currentSlideIndex === 0) ? 'att-color progressBar-border': 'att-color' \"\n (keydown)=\"onEnter($event, 0)\" (click)=\"goToSlideClicked($event, 0)\">i\n </li>\n <li>\n <ul *ngIf=\"parentConfig?.isSectionsAvailable\" class=\"scoreboard-sections\">\n <li class=\"section relative\" *ngFor=\"let section of mainProgressBar; let i=index;\"\n attr.aria-label=\"section {{section?.index}}\" (click)=\"jumpToSection(section?.identifier)\"\n (keydown)=\"onSectionEnter($event, section?.identifier)\"\n [ngClass]=\"{'attempted' : section.class === 'attempted', 'partial': section.class === 'partial'}\">\n <label for=\"list-item-{{i}}\" class=\"progressBar-border\"\n [ngClass]=\"{'active' : section?.isActive && !showRootInstruction && section.class !== 'attempted'}\"\n tabindex=\"0\">{{section?.index}}</label>\n <ul *ngIf=\"section?.isActive && showFeedBack\">\n <li *ngFor=\"let question of progressBarClass; let j=index\" tabindex=\"0\"\n attr.aria-label=\"question number {{question?.index}}\"\n (click)=\"goToSlideClicked($event, question?.index)\" (keydown)=\"onEnter($event, question?.index)\"\n class=\"showFeedBack-progressBar\"\n [ngClass]=\"(j+1) === myCarousel.getCurrentSlideIndex() ? (question.class === 'skipped' ? 'progressBar-border' : 'progressBar-border ' + question.class) : question.class\">\n {{question?.index}}\n </li>\n </ul>\n <ul class=\"nonFeedback\" *ngIf=\"section?.isActive && !showFeedBack\">\n <li *ngFor=\"let question of progressBarClass; let j=index\" tabindex=\"0\"\n attr.aria-label=\"question number {{question?.index}}\"\n (click)=\"goToSlideClicked($event, question?.index)\" (keydown)=\"onEnter($event, question?.index)\"\n class=\"showFeedBack-progressBar\"\n [ngClass]=\"(j+1) === myCarousel.getCurrentSlideIndex() ? (question.class === 'skipped' ? 'progressBar-border' : 'att-color progressBar-border') : question.class === 'skipped' ? question.class: question.class === 'unattempted' ? '' : 'att-color'\">\n {{question?.index}}\n </li>\n </ul>\n </li>\n </ul>\n </li>\n <li>\n <ul class=\"singleContent\" *ngIf=\"!parentConfig?.isSectionsAvailable && showFeedBack\">\n <li *ngFor=\"let question of progressBarClass; let j=index\" tabindex=\"0\"\n attr.aria-label=\"question number {{question?.index}}\"\n (click)=\"goToSlideClicked($event, question?.index)\" (keydown)=\"onEnter($event, question?.index)\"\n class=\"showFeedBack-progressBar hover-effect\"\n [ngClass]=\"(j+1) === myCarousel.getCurrentSlideIndex() ? (question.class === 'skipped' ? 'progressBar-border' : 'progressBar-border ' + question.class) : question.class\">\n {{question?.index}}\n </li>\n </ul>\n </li>\n <li>\n <ul class=\"singleContent nonFeedback\" *ngIf=\"!parentConfig?.isSectionsAvailable && !showFeedBack\">\n <li *ngFor=\"let question of progressBarClass; let j=index\" tabindex=\"0\"\n attr.aria-label=\"question number {{question?.index}}\"\n (click)=\"goToSlideClicked($event, question?.index)\" (keydown)=\"onEnter($event, question?.index)\"\n class=\"showFeedBack-progressBar hover-effect\"\n [ngClass]=\"(j+1) === myCarousel.getCurrentSlideIndex() ? (question.class === 'skipped' ? 'progressBar-border' : 'att-color progressBar-border') : question.class === 'skipped' ? question.class: question.class === 'unattempted' ? '' : 'att-color'\">\n {{question?.index}}\n </li>\n </ul>\n </li>\n <li class=\"requiresSubmit cursor-pointer showFeedBack-progressBar hover-effect\" tabindex=\"0\"\n aria-label=\"scoreboard\" *ngIf=\"parentConfig.requiresSubmit && progressBarClass?.length\"\n (click)=\"disableNext = true; onScoreBoardClicked()\" (keydown)=\"onScoreBoardEnter($event)\">\n <img src=\"./assets/flag_inactive.svg\" alt=\"Flag logo: Show scoreboard\">\n </li>\n <!-- <li class=\"requiresSubmit\" *ngIf=\"loadScoreBoard && parentConfig.requiresSubmit\">\n <img src=\"./assets/flag_active.svg\" alt=\"\">\n </li> -->\n </ng-container>\n </ul>\n </div>\n </div>\n </div>\n\n <quml-alert *ngIf=\"showAlert && showFeedBack\" [alertType]=\"alertType\" [isHintAvailable]=\"showHints\"\n [showSolutionButton]=\"showUserSolution && currentSolutions\" (showSolution)=\"viewSolution()\" (showHint)=\"viewHint()\"\n (closeAlert)=\"closeAlertBox($event)\"></quml-alert>\n\n <quml-mcq-solutions *ngIf=\"showSolution\" [question]=\"currentQuestion\" [options]=\"currentOptions\"\n [solutions]=\"currentSolutions\" [baseUrl]=\"parentConfig?.baseUrl\" [media]=\"media\" [identifier]=\"currentQuestionIndetifier\" (close)=\"closeSolution()\"></quml-mcq-solutions>\n</div>\n\n<div class=\"info-popup\" *ngIf=\"infoPopup\">\n Please attempt the question\n</div>\n\n<sb-player-contenterror *ngIf=\"showContentError\"></sb-player-contenterror>\n\n\n<!-- Zoom -->\n<div class=\"image-viewer__overlay\" [hidden]=\"!showZoomModal\">\n <div class=\"image-viewer__close\" (click)=\"closeZoom()\">\n </div>\n <div class=\"image-viewer__container\">\n <img #imageModal id=\"imageModal\" class=\"image-viewer__img\" [src]=\"zoomImgSrc\" alt=\"Zoomed image\">\n </div>\n <div class=\"image-viewer__zoom\">\n <div class=\"image-viewer__zoomin\" (click)=\"zoomIn()\"></div>\n <div class=\"image-viewer__zoomout\" (click)=\"zoomOut()\"></div>\n </div>\n</div>", styles: ["@charset \"UTF-8\";::ng-deep :root{--quml-scoreboard-sub-title: #6d7278;--quml-scoreboard-skipped: #969696;--quml-scoreboard-unattempted: #575757;--quml-color-success: #08bc82;--quml-color-danger: #f1635d;--quml-color-primary-contrast: #333;--quml-btn-border: #ccc;--quml-heder-text-color: #6250f5;--quml-header-bg-color: #c2c2c2;--quml-mcq-title-txt: #131415;--quml-zoom-btn-txt: #eee;--quml-zoom-btn-hover: #f2f2f2;--quml-main-bg: #fff;--quml-btn-color: #fff;--quml-question-bg: #fff}.quml-header{background:var(--quml-header-bg-color);display:flow-root;height:2.25rem;position:fixed}.quml-container{overflow:hidden;width:100%;height:100%;position:relative}.quml-landscape{width:100%;height:100%}::ng-deep .carousel{outline:none}.col{padding-left:0;padding-right:0}.quml-button{background-color:var(--primary-color);border:none;color:var(--quml-btn-color);padding:.25rem;text-align:center;text-decoration:none;font-size:1rem;margin:.125rem .5rem .125rem .125rem;cursor:pointer;width:3rem;height:2.5rem;border-radius:10%}.landscape-mode{height:100%;width:100%;position:relative;background-color:var(--quml-main-bg)}.landscape-content{padding:2.5rem 4rem 0;overflow:auto;height:100%;width:100%}@media only screen and (max-width: 480px){.landscape-content{padding:5rem 1rem 0;height:calc(100% - 3rem)}}.lanscape-mode-left{position:absolute;left:0;top:3.5rem;text-align:center;z-index:1;width:4rem}.lanscape-mode-left div{padding-bottom:1.5rem}.landscape-center{width:100%}.lanscape-mode-right{-ms-overflow-style:none;scrollbar-width:none;position:absolute;padding:0 1rem;right:.5rem;color:var(--quml-scoreboard-unattempted);font-size:.75rem;height:calc(100% - 4rem);overflow-y:auto;top:3.5rem}.lanscape-mode-right ul{list-style:none;margin-top:.5rem;padding:0;text-align:center;position:relative}.lanscape-mode-right ul:before{content:\"\";width:.0625rem;height:100%;position:absolute;left:0;right:0;background-color:#cccccc80;z-index:1;margin:0 auto}.lanscape-mode-right ul li{position:relative;z-index:2}.lanscape-mode-right ul li.requiresSubmit{color:var(--quml-scoreboard-unattempted);border:.03125rem solid var(--quml-scoreboard-unattempted);border-radius:50%;width:1.25rem;height:1.25rem;background:var(--white)}.lanscape-mode-right ul li.requiresSubmit:hover{border:.0625rem solid var(--primary-color)}.lanscape-mode-right ul .singleContent.nonFeedback li:hover{border:1px solid var(--primary-color);color:var(--primary-color)}.lanscape-mode-right ul .singleContent.nonFeedback li.att-color{color:var(--white);background:var(--primary-color)}.lanscape-mode-right ul .section ul.nonFeedback li:hover{border:1px solid var(--primary-color);color:var(--primary-color)}.lanscape-mode-right ul .section ul.nonFeedback li.att-color{color:var(--white);background:var(--primary-color)}.lanscape-mode-right ul .section ul li:hover:after,.lanscape-mode-right ul .section ul li:focus:after,.lanscape-mode-right ul .section ul li.progressBar-border:after{border:1px solid var(--primary-color);content:\"\";width:1.65rem;height:1.65rem;border-radius:50%;padding:.25rem;position:absolute}.lanscape-mode-right ul .section.attempted:after{content:\"\";display:inline-block;transform:rotate(45deg);height:.6rem;width:.3rem;border-bottom:.12rem solid var(--primary-color);border-right:.12rem solid var(--primary-color);position:absolute;top:.25rem;right:-.7rem}.lanscape-mode-right ul .section.correct:after,.lanscape-mode-right ul .section.wrong:after,.lanscape-mode-right ul .section.partial:after{content:\"\";position:absolute;top:.525rem;right:-.7rem;height:.375rem;width:.375rem;border-radius:.375rem}.lanscape-mode-right ul .section.correct:after{--correct-bg: var(--quml-color-success);background:var(--correct-bg)}.lanscape-mode-right ul .section.wrong:after{--wrong-bg: var(--quml-color-danger);background:var(--wrong-bg)}.lanscape-mode-right ul .section.partial:after{--partial-bg: linear-gradient( 180deg, rgba(71, 164, 128, 1) 0%, rgba(71, 164, 128, 1) 50%, rgba(249, 122, 116, 1) 50%, rgba(249, 122, 116, 1) 100% );background:var(--partial-bg)}.lanscape-mode-right ul .section.attempted label,.lanscape-mode-right ul .section.partial label{color:var(--white)!important;background:var(--primary-color);border:.03125rem solid var(--primary-color)}.lanscape-mode-right ul .section label{background-color:var(--quml-question-bg);border-radius:.25rem;width:1.25rem;padding:.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center;color:var(--quml-scoreboard-unattempted);border:.03125rem solid var(--quml-scoreboard-unattempted);margin-bottom:2.25rem;cursor:pointer}.lanscape-mode-right ul .section label.requiresSubmit{color:var(--quml-scoreboard-unattempted);border:.03125rem solid var(--quml-scoreboard-unattempted);border-radius:50%;background:var(--white)}.lanscape-mode-right ul .section label.requiresSubmit:hover{border:.0625rem solid var(--primary-color)}.lanscape-mode-right ul .section label.active,.lanscape-mode-right ul .section label:hover,.lanscape-mode-right ul .section label:focus{color:var(--primary-color);border:.0625rem solid var(--primary-color)}.lanscape-mode-right ul .section label.active:after,.lanscape-mode-right ul .section label:hover:after,.lanscape-mode-right ul .section label:focus:after{border:1px solid var(--primary-color);content:\"\";height:1.65rem;border-radius:.25rem;position:absolute;width:1.65rem;background:var(--quml-question-bg);z-index:-1}.lanscape-mode-right ul .section label.skipped{color:var(--white);background:var(--quml-scoreboard-skipped);border:.0625rem solid var(--quml-scoreboard-skipped)}.lanscape-mode-right ul .section label.unattempted{color:var(--quml-scoreboard-unattempted);border:.03125rem solid var(--quml-scoreboard-unattempted)}.lanscape-mode-right ul .section label.unattempted:hover{border:.0625rem solid var(--primary-color);color:var(--primary-color)}.lanscape-mode-right ul input[type=checkbox]{display:none}.lanscape-mode-right ul input[type=checkbox]~ul{height:0;transform:scaleY(0)}.lanscape-mode-right ul input[type=checkbox]:checked~ul{height:100%;transform-origin:top;transition:transform .2s ease-out;transform:scaleY(1)}.lanscape-mode-right ul .section input[type=checkbox]:checked~label{border:.0625rem solid var(--primary-color);color:var(--primary-color)}.lanscape-mode-right ul .showFeedBack-progressBar{background-color:var(--quml-question-bg);border-radius:50%;width:1.25rem;padding:.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center;border:.0625rem solid rgb(204,204,204);margin-bottom:2.25rem;cursor:pointer}.lanscape-mode-right ul .showFeedBack-progressBar.requiresSubmit:hover{border:.0625rem solid var(--primary-color)}.lanscape-mode-right ul .showFeedBack-progressBar.progressBar-border,.lanscape-mode-right ul .showFeedBack-progressBar .active,.lanscape-mode-right ul .showFeedBack-progressBar.att-color{color:var(--primary-color);border:.0625rem solid var(--primary-color)}.lanscape-mode-right ul .showFeedBack-progressBar.info-page{color:var(--white);background:var(--primary-color);border:.0625rem solid var(--primary-color)}.lanscape-mode-right ul .showFeedBack-progressBar.skipped{color:var(--white);background:var(--quml-scoreboard-skipped);border:.0625rem solid var(--quml-scoreboard-skipped)}.lanscape-mode-right ul .showFeedBack-progressBar.skipped:hover{color:var(--white)!important}.lanscape-mode-right ul .showFeedBack-progressBar.partial,.lanscape-mode-right ul .showFeedBack-progressBar.wrong,.lanscape-mode-right ul .showFeedBack-progressBar.correct{color:var(--white);border:0px solid transparent}.lanscape-mode-right ul .showFeedBack-progressBar.correct{--correct-bg: var(--quml-color-success);background:var(--correct-bg)}.lanscape-mode-right ul .showFeedBack-progressBar.wrong{--wrong-bg: var(--quml-color-danger);background:var(--wrong-bg)}.lanscape-mode-right ul .showFeedBack-progressBar.partial{--partial-bg: linear-gradient( 180deg, rgba(71, 164, 128, 1) 0%, rgba(71, 164, 128, 1) 50%, rgba(249, 122, 116, 1) 50%, rgba(249, 122, 116, 1) 100% );background:var(--partial-bg)}.lanscape-mode-right ul .showFeedBack-progressBar.unattempted{color:var(--quml-scoreboard-unattempted);border:.03125rem solid var(--quml-scoreboard-unattempted)}.lanscape-mode-right ul .showFeedBack-progressBar.unattempted:hover{border:.0625rem solid var(--primary-color);color:var(--primary-color)}.current-slide{color:var(--quml-scoreboard-sub-title);font-size:.875rem;font-weight:900;letter-spacing:0}@media only screen and (max-width: 480px){.lanscape-mode-right{background:var(--white);display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;width:90%;height:2.5rem;padding:1rem 0 0;margin:auto;left:0}.lanscape-mode-right ul{list-style:none;padding:0;text-align:center;position:relative;display:flex;height:1.5rem;margin-top:0}.lanscape-mode-right ul .showFeedBack-progressBar{margin-right:2.25rem;z-index:1}.lanscape-mode-right ul .showFeedBack-progressBar:last-child{margin-right:0}.lanscape-mode-right ul .singleContent{display:flex}.lanscape-mode-right ul .singleContent .showFeedBack-progressBar:last-child{margin-right:2.25rem}.lanscape-mode-right ul .section ul{top:-1.75rem;position:inherit;margin:.5rem 2.25rem;padding-left:1.25rem}.lanscape-mode-right ul .section ul:before{background:transparent}.lanscape-mode-right ul .section.attempted:after{content:\"\";top:-.8125rem;right:auto;left:.625rem}.lanscape-mode-right ul .section.correct:after{content:\"\";top:-.525rem;left:.5rem;right:auto}.lanscape-mode-right ul .section.wrong:after{content:\"\";top:-.525rem;left:.5rem;right:auto}.lanscape-mode-right ul .section.partial:after{content:\"\";top:-.525rem;left:.5rem;right:auto}.lanscape-mode-right ul .section label{margin-right:2.25rem;margin-bottom:0}.lanscape-mode-right ul:before{content:\"\";width:100%;height:.0625rem;position:absolute;left:0;top:50%;transform:translateY(-50%);right:0;background-color:#cccccc80;z-index:0;margin:0 auto}.lanscape-mode-right ul input[type=checkbox]~ul{width:0;transform:scaleX(0);margin:0}.lanscape-mode-right ul input[type=checkbox]:checked~ul{width:calc(100% - 4rem);transform-origin:left;transition:transform .2s ease-out;transform:scaleX(1);margin:-1.25rem 3rem 0 4rem}.landscape-center{margin-top:2rem}.lanscape-mode-left{display:none}.landscape-mode{grid-template-areas:\"right right right\" \"center center center\" \"left left left\"}}.quml-timer{padding:.5rem}.quml-header-text{margin:.5rem;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.quml-arrow-button{border-radius:28%;font-size:0%;outline:none;background-color:var(--primary-color);padding:.5rem}.info-popup{position:absolute;top:18%;right:10%;font-size:.875rem;box-shadow:0 .125rem .875rem #0000001a;padding:.75rem}.quml-menu{width:1.5rem;height:1.5rem}.quml-card{background-color:var(--white);padding:1.25rem;box-shadow:0 .25rem .5rem #0003;width:25%;position:absolute;left:37%;text-align:center;top:25%;z-index:2}.quml-card-title{font-size:1.25rem;text-align:center}.quml-card-body .wrong{color:red}.quml-card-body .right{color:green}.quml-card-button-section .button-container button{color:var(--white);background-color:var(--primary-color);border-color:var(--primary-color);outline:none;font-size:.875rem;padding:.25rem 1.5rem}.quml-card-button-section .button-container{width:40%;display:inline;padding-right:.75rem}::ng-deep .carousel.slide a.left.carousel-control.carousel-control-prev,::ng-deep .carousel.slide .carousel-control.carousel-control-next{display:none}::ng-deep .carousel-item{perspective:unset}.potrait-header-top{visibility:hidden;margin-top:-2.5rem}.potrait-header-top .wrapper{display:grid;grid-template-columns:1fr 15fr}.potrait-header-top .quml-menu{color:var(--quml-heder-text-color);font-size:1.5rem;padding-left:1.25rem;margin-top:.25rem}.potrait-header-top .quml-header-text{font-size:.875rem;color:var(--quml-heder-text-color)}.row{margin-right:0;margin-left:0}.portrait-header{visibility:hidden}.image-viewer__overlay,.image-viewer__container,.image-viewer__close,.image-viewer__zoom{position:absolute}.image-viewer__overlay{width:100%;height:100%;background:var(--quml-color-primary-contrast);z-index:11111}.image-viewer__container{background-color:var(--quml-color-primary-contrast);top:50%;left:50%;transform:translate(-50%,-50%);z-index:11111;width:80%;height:80%}.image-viewer__img{width:100%;height:100%}.image-viewer__close{top:1rem;right:1rem;text-align:center;cursor:pointer;z-index:999999;background:#00000080;border-radius:100%;width:3rem;height:3rem;position:inherit}.image-viewer__close:after{content:\"\\2715\";color:var(--white);font-size:2rem}.image-viewer__close:hover{background:#000}.image-viewer__zoom{bottom:1rem;right:1rem;width:2.5rem;height:auto;border-radius:.5rem;background:var(--white);display:flex;flex-direction:column;align-items:center;overflow:hidden;z-index:99999;position:inherit;border:.0625rem solid var(--quml-zoom-btn-txt)}.image-viewer__zoomin,.image-viewer__zoomout{text-align:center;height:2.5rem;position:relative;width:2.5rem;cursor:pointer}.image-viewer__zoomin:hover,.image-viewer__zoomout:hover{background-color:var(--quml-zoom-btn-hover)}.image-viewer__zoomin:after,.image-viewer__zoomout:after{font-size:1.5rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.image-viewer__zoomin{border-bottom:.0625rem solid var(--quml-btn-border)}.image-viewer__zoomin:after{content:\"+\"}.image-viewer__zoomout:after{content:\"\\2212\"}::ng-deep quml-ans{cursor:pointer}::ng-deep quml-ans svg circle{fill:var(--quml-zoom-btn-txt)}::ng-deep .magnify-icon{position:absolute;right:0;bottom:0;width:1.5rem;height:1.5rem;border-top-left-radius:.5rem;cursor:pointer;background-color:var(--quml-color-primary-contrast)}::ng-deep .magnify-icon:after{content:\"\";position:absolute;bottom:.125rem;right:.125rem;z-index:1;width:1rem;height:1rem;background-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' version='1.1' width='512' height='512' x='0' y='0' viewBox='0 0 37.166 37.166' style='enable-background:new 0 0 512 512' xml:space='preserve' class=''%3E%3Cg%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M35.829,32.045l-6.833-6.833c-0.513-0.513-1.167-0.788-1.836-0.853c2.06-2.567,3.298-5.819,3.298-9.359 c0-8.271-6.729-15-15-15c-8.271,0-15,6.729-15,15c0,8.271,6.729,15,15,15c3.121,0,6.021-0.96,8.424-2.598 c0.018,0.744,0.305,1.482,0.872,2.052l6.833,6.833c0.585,0.586,1.354,0.879,2.121,0.879s1.536-0.293,2.121-0.879 C37.001,35.116,37.001,33.217,35.829,32.045z M15.458,25c-5.514,0-10-4.484-10-10c0-5.514,4.486-10,10-10c5.514,0,10,4.486,10,10 C25.458,20.516,20.972,25,15.458,25z M22.334,15c0,1.104-0.896,2-2,2h-2.75v2.75c0,1.104-0.896,2-2,2s-2-0.896-2-2V17h-2.75 c-1.104,0-2-0.896-2-2s0.896-2,2-2h2.75v-2.75c0-1.104,0.896-2,2-2s2,0.896,2,2V13h2.75C21.438,13,22.334,13.895,22.334,15z' fill='%23ffffff' data-original='%23000000' style='' class=''/%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A\");background-size:cover;background-repeat:no-repeat;background-position:center}::ng-deep .solution-options figure.image{border:.0625rem solid var(--quml-btn-border);overflow:hidden;border-radius:.25rem;position:relative}::ng-deep .solutions .solution-options figure.image,::ng-deep .image-viewer__overlay .image-viewer__container{display:flex;align-items:center;justify-content:center}::ng-deep .solutions .solution-options figure.image .portrait,::ng-deep .image-viewer__overlay .image-viewer__container .portrait{width:auto;height:100%}::ng-deep .solutions .solution-options figure.image .neutral,::ng-deep .image-viewer__overlay .image-viewer__container .neutral{width:auto;height:auto}@media only screen and (max-width: 768px){::ng-deep .solutions .solution-options figure.image .neutral,::ng-deep .image-viewer__overlay .image-viewer__container .neutral{width:100%}}@media only screen and (min-width: 768px){::ng-deep .solutions .solution-options figure.image .neutral,::ng-deep .image-viewer__overlay .image-viewer__container .neutral{height:100%}}::ng-deep .solutions .solution-options figure.image .landscape,::ng-deep .image-viewer__overlay .image-viewer__container .landscape{height:auto}::ng-deep .quml-mcq .mcq-title,::ng-deep .quml-sa .mcq-title,::ng-deep quml-sa .mcq-title,::ng-deep quml-mcq-solutions .mcq-title{color:var(--quml-mcq-title-txt)}::ng-deep .quml-mcq .mcq-title p,::ng-deep .quml-sa .mcq-title p,::ng-deep quml-sa .mcq-title p,::ng-deep quml-mcq-solutions .mcq-title p{word-break:break-word}@media only screen and (max-width: 480px){::ng-deep .quml-mcq .mcq-title,::ng-deep .quml-sa .mcq-title,::ng-deep quml-sa .mcq-title,::ng-deep quml-mcq-solutions .mcq-title{margin-top:1rem}}::ng-deep .quml-mcq .quml-mcq--option .quml-mcq-option-card p:first-child,::ng-deep .quml-mcq .quml-mcq--option .quml-mcq-option-card p:last-child,::ng-deep .quml-sa .quml-mcq--option .quml-mcq-option-card p:first-child,::ng-deep .quml-sa .quml-mcq--option .quml-mcq-option-card p:last-child,::ng-deep quml-sa .quml-mcq--option .quml-mcq-option-card p:first-child,::ng-deep quml-sa .quml-mcq--option .quml-mcq-option-card p:last-child,::ng-deep quml-mcq-solutions .quml-mcq--option .quml-mcq-option-card p:first-child,::ng-deep quml-mcq-solutions .quml-mcq--option .quml-mcq-option-card p:last-child{margin-bottom:0}::ng-deep quml-mcq-solutions figure.image,::ng-deep quml-mcq-solutions figure.image.resize-25,::ng-deep quml-mcq-solutions figure.image.resize-50,::ng-deep quml-mcq-solutions figure.image.resize-75,::ng-deep quml-mcq-solutions figure.image.resize-100,::ng-deep quml-mcq-solutions figure.image.resize-original{width:25%;height:auto}::ng-deep quml-mcq-solutions .solution-options p{margin-bottom:1rem}::ng-deep .quml-option .option p{word-break:break-word}.endPage-container-height{height:100%}.scoreboard-sections{display:contents}.scoreboard-sections li{position:relative;z-index:2}.hover-effect:hover:after,.hover-effect:focus:after,.hover-effect.progressBar-border:after{border:1px solid var(--primary-color);content:\"\";width:1.65rem;height:1.65rem;border-radius:50%;padding:.25rem;position:absolute}\n", "::ng-deep :root{--quml-mcq-title-txt: #131415}::ng-deep .startpage__instr-desc .mcq-title,::ng-deep .quml-mcq .mcq-title,::ng-deep .quml-sa .mcq-title,::ng-deep quml-sa .mcq-title,::ng-deep quml-mcq-solutions .mcq-title{color:var(--quml-mcq-title-txt)}::ng-deep .startpage__instr-desc .fs-8,::ng-deep .startpage__instr-desc .fs-9,::ng-deep .startpage__instr-desc .fs-10,::ng-deep .startpage__instr-desc .fs-11,::ng-deep .startpage__instr-desc .fs-12,::ng-deep .startpage__instr-desc .fs-13,::ng-deep .startpage__instr-desc .fs-14,::ng-deep .startpage__instr-desc .fs-15,::ng-deep .startpage__instr-desc .fs-16,::ng-deep .startpage__instr-desc .fs-17,::ng-deep .startpage__instr-desc .fs-18,::ng-deep .startpage__instr-desc .fs-19,::ng-deep .startpage__instr-desc .fs-20,::ng-deep .startpage__instr-desc .fs-21,::ng-deep .startpage__instr-desc .fs-22,::ng-deep .startpage__instr-desc .fs-23,::ng-deep .startpage__instr-desc .fs-24,::ng-deep .startpage__instr-desc .fs-25,::ng-deep .startpage__instr-desc .fs-26,::ng-deep .startpage__instr-desc .fs-27,::ng-deep .startpage__instr-desc .fs-28,::ng-deep .startpage__instr-desc .fs-29,::ng-deep .startpage__instr-desc .fs-30,::ng-deep .startpage__instr-desc .fs-36,::ng-deep .quml-mcq .fs-8,::ng-deep .quml-mcq .fs-9,::ng-deep .quml-mcq .fs-10,::ng-deep .quml-mcq .fs-11,::ng-deep .quml-mcq .fs-12,::ng-deep .quml-mcq .fs-13,::ng-deep .quml-mcq .fs-14,::ng-deep .quml-mcq .fs-15,::ng-deep .quml-mcq .fs-16,::ng-deep .quml-mcq .fs-17,::ng-deep .quml-mcq .fs-18,::ng-deep .quml-mcq .fs-19,::ng-deep .quml-mcq .fs-20,::ng-deep .quml-mcq .fs-21,::ng-deep .quml-mcq .fs-22,::ng-deep .quml-mcq .fs-23,::ng-deep .quml-mcq .fs-24,::ng-deep .quml-mcq .fs-25,::ng-deep .quml-mcq .fs-26,::ng-deep .quml-mcq .fs-27,::ng-deep .quml-mcq .fs-28,::ng-deep .quml-mcq .fs-29,::ng-deep .quml-mcq .fs-30,::ng-deep .quml-mcq .fs-36,::ng-deep .quml-sa .fs-8,::ng-deep .quml-sa .fs-9,::ng-deep .quml-sa .fs-10,::ng-deep .quml-sa .fs-11,::ng-deep .quml-sa .fs-12,::ng-deep .quml-sa .fs-13,::ng-deep .quml-sa .fs-14,::ng-deep .quml-sa .fs-15,::ng-deep .quml-sa .fs-16,::ng-deep .quml-sa .fs-17,::ng-deep .quml-sa .fs-18,::ng-deep .quml-sa .fs-19,::ng-deep .quml-sa .fs-20,::ng-deep .quml-sa .fs-21,::ng-deep .quml-sa .fs-22,::ng-deep .quml-sa .fs-23,::ng-deep .quml-sa .fs-24,::ng-deep .quml-sa .fs-25,::ng-deep .quml-sa .fs-26,::ng-deep .quml-sa .fs-27,::ng-deep .quml-sa .fs-28,::ng-deep .quml-sa .fs-29,::ng-deep .quml-sa .fs-30,::ng-deep .quml-sa .fs-36,::ng-deep quml-sa .fs-8,::ng-deep quml-sa .fs-9,::ng-deep quml-sa .fs-10,::ng-deep quml-sa .fs-11,::ng-deep quml-sa .fs-12,::ng-deep quml-sa .fs-13,::ng-deep quml-sa .fs-14,::ng-deep quml-sa .fs-15,::ng-deep quml-sa .fs-16,::ng-deep quml-sa .fs-17,::ng-deep quml-sa .fs-18,::ng-deep quml-sa .fs-19,::ng-deep quml-sa .fs-20,::ng-deep quml-sa .fs-21,::ng-deep quml-sa .fs-22,::ng-deep quml-sa .fs-23,::ng-deep quml-sa .fs-24,::ng-deep quml-sa .fs-25,::ng-deep quml-sa .fs-26,::ng-deep quml-sa .fs-27,::ng-deep quml-sa .fs-28,::ng-deep quml-sa .fs-29,::ng-deep quml-sa .fs-30,::ng-deep quml-sa .fs-36,::ng-deep quml-mcq-solutions .fs-8,::ng-deep quml-mcq-solutions .fs-9,::ng-deep quml-mcq-solutions .fs-10,::ng-deep quml-mcq-solutions .fs-11,::ng-deep quml-mcq-solutions .fs-12,::ng-deep quml-mcq-solutions .fs-13,::ng-deep quml-mcq-solutions .fs-14,::ng-deep quml-mcq-solutions .fs-15,::ng-deep quml-mcq-solutions .fs-16,::ng-deep quml-mcq-solutions .fs-17,::ng-deep quml-mcq-solutions .fs-18,::ng-deep quml-mcq-solutions .fs-19,::ng-deep quml-mcq-solutions .fs-20,::ng-deep quml-mcq-solutions .fs-21,::ng-deep quml-mcq-solutions .fs-22,::ng-deep quml-mcq-solutions .fs-23,::ng-deep quml-mcq-solutions .fs-24,::ng-deep quml-mcq-solutions .fs-25,::ng-deep quml-mcq-solutions .fs-26,::ng-deep quml-mcq-solutions .fs-27,::ng-deep quml-mcq-solutions .fs-28,::ng-deep quml-mcq-solutions .fs-29,::ng-deep quml-mcq-solutions .fs-30,::ng-deep quml-mcq-solutions .fs-36{line-height:normal}::ng-deep .startpage__instr-desc .fs-8,::ng-deep .quml-mcq .fs-8,::ng-deep .quml-sa .fs-8,::ng-deep quml-sa .fs-8,::ng-deep quml-mcq-solutions .fs-8{font-size:.5rem}::ng-deep .startpage__instr-desc .fs-9,::ng-deep .quml-mcq .fs-9,::ng-deep .quml-sa .fs-9,::ng-deep quml-sa .fs-9,::ng-deep quml-mcq-solutions .fs-9{font-size:.563rem}::ng-deep .startpage__instr-desc .fs-10,::ng-deep .quml-mcq .fs-10,::ng-deep .quml-sa .fs-10,::ng-deep quml-sa .fs-10,::ng-deep quml-mcq-solutions .fs-10{font-size:.625rem}::ng-deep .startpage__instr-desc .fs-11,::ng-deep .quml-mcq .fs-11,::ng-deep .quml-sa .fs-11,::ng-deep quml-sa .fs-11,::ng-deep quml-mcq-solutions .fs-11{font-size:.688rem}::ng-deep .startpage__instr-desc .fs-12,::ng-deep .quml-mcq .fs-12,::ng-deep .quml-sa .fs-12,::ng-deep quml-sa .fs-12,::ng-deep quml-mcq-solutions .fs-12{font-size:.75rem}::ng-deep .startpage__instr-desc .fs-13,::ng-deep .quml-mcq .fs-13,::ng-deep .quml-sa .fs-13,::ng-deep quml-sa .fs-13,::ng-deep quml-mcq-solutions .fs-13{font-size:.813rem}::ng-deep .startpage__instr-desc .fs-14,::ng-deep .quml-mcq .fs-14,::ng-deep .quml-sa .fs-14,::ng-deep quml-sa .fs-14,::ng-deep quml-mcq-solutions .fs-14{font-size:.875rem}::ng-deep .startpage__instr-desc .fs-15,::ng-deep .quml-mcq .fs-15,::ng-deep .quml-sa .fs-15,::ng-deep quml-sa .fs-15,::ng-deep quml-mcq-solutions .fs-15{font-size:.938rem}::ng-deep .startpage__instr-desc .fs-16,::ng-deep .quml-mcq .fs-16,::ng-deep .quml-sa .fs-16,::ng-deep quml-sa .fs-16,::ng-deep quml-mcq-solutions .fs-16{font-size:1rem}::ng-deep .startpage__instr-desc .fs-17,::ng-deep .quml-mcq .fs-17,::ng-deep .quml-sa .fs-17,::ng-deep quml-sa .fs-17,::ng-deep quml-mcq-solutions .fs-17{font-size:1.063rem}::ng-deep .startpage__instr-desc .fs-18,::ng-deep .quml-mcq .fs-18,::ng-deep .quml-sa .fs-18,::ng-deep quml-sa .fs-18,::ng-deep quml-mcq-solutions .fs-18{font-size:1.125rem}::ng-deep .startpage__instr-desc .fs-19,::ng-deep .quml-mcq .fs-19,::ng-deep .quml-sa .fs-19,::ng-deep quml-sa .fs-19,::ng-deep quml-mcq-solutions .fs-19{font-size:1.188rem}::ng-deep .startpage__instr-desc .fs-20,::ng-deep .quml-mcq .fs-20,::ng-deep .quml-sa .fs-20,::ng-deep quml-sa .fs-20,::ng-deep quml-mcq-solutions .fs-20{font-size:1.25rem}::ng-deep .startpage__instr-desc .fs-21,::ng-deep .quml-mcq .fs-21,::ng-deep .quml-sa .fs-21,::ng-deep quml-sa .fs-21,::ng-deep quml-mcq-solutions .fs-21{font-size:1.313rem}::ng-deep .startpage__instr-desc .fs-22,::ng-deep .quml-mcq .fs-22,::ng-deep .quml-sa .fs-22,::ng-deep quml-sa .fs-22,::ng-deep quml-mcq-solutions .fs-22{font-size:1.375rem}::ng-deep .startpage__instr-desc .fs-23,::ng-deep .quml-mcq .fs-23,::ng-deep .quml-sa .fs-23,::ng-deep quml-sa .fs-23,::ng-deep quml-mcq-solutions .fs-23{font-size:1.438rem}::ng-deep .startpage__instr-desc .fs-24,::ng-deep .quml-mcq .fs-24,::ng-deep .quml-sa .fs-24,::ng-deep quml-sa .fs-24,::ng-deep quml-mcq-solutions .fs-24{font-size:1.5rem}::ng-deep .startpage__instr-desc .fs-25,::ng-deep .quml-mcq .fs-25,::ng-deep .quml-sa .fs-25,::ng-deep quml-sa .fs-25,::ng-deep quml-mcq-solutions .fs-25{font-size:1.563rem}::ng-deep .startpage__instr-desc .fs-26,::ng-deep .quml-mcq .fs-26,::ng-deep .quml-sa .fs-26,::ng-deep quml-sa .fs-26,::ng-deep quml-mcq-solutions .fs-26{font-size:1.625rem}::ng-deep .startpage__instr-desc .fs-27,::ng-deep .quml-mcq .fs-27,::ng-deep .quml-sa .fs-27,::ng-deep quml-sa .fs-27,::ng-deep quml-mcq-solutions .fs-27{font-size:1.688rem}::ng-deep .startpage__instr-desc .fs-28,::ng-deep .quml-mcq .fs-28,::ng-deep .quml-sa .fs-28,::ng-deep quml-sa .fs-28,::ng-deep quml-mcq-solutions .fs-28{font-size:1.75rem}::ng-deep .startpage__instr-desc .fs-29,::ng-deep .quml-mcq .fs-29,::ng-deep .quml-sa .fs-29,::ng-deep quml-sa .fs-29,::ng-deep quml-mcq-solutions .fs-29{font-size:1.813rem}::ng-deep .startpage__instr-desc .fs-30,::ng-deep .quml-mcq .fs-30,::ng-deep .quml-sa .fs-30,::ng-deep quml-sa .fs-30,::ng-deep quml-mcq-solutions .fs-30{font-size:1.875rem}::ng-deep .startpage__instr-desc .fs-36,::ng-deep .quml-mcq .fs-36,::ng-deep .quml-sa .fs-36,::ng-deep quml-sa .fs-36,::ng-deep quml-mcq-solutions .fs-36{font-size:2.25rem}::ng-deep .startpage__instr-desc .text-left,::ng-deep .quml-mcq .text-left,::ng-deep .quml-sa .text-left,::ng-deep quml-sa .text-left,::ng-deep quml-mcq-solutions .text-left{text-align:left}::ng-deep .startpage__instr-desc .text-center,::ng-deep .quml-mcq .text-center,::ng-deep .quml-sa .text-center,::ng-deep quml-sa .text-center,::ng-deep quml-mcq-solutions .text-center{text-align:center}::ng-deep .startpage__instr-desc .text-right,::ng-deep .quml-mcq .text-right,::ng-deep .quml-sa .text-right,::ng-deep quml-sa .text-right,::ng-deep quml-mcq-solutions .text-right{text-align:right}::ng-deep .startpage__instr-desc .image-style-align-right,::ng-deep .quml-mcq .image-style-align-right,::ng-deep .quml-sa .image-style-align-right,::ng-deep quml-sa .image-style-align-right,::ng-deep quml-mcq-solutions .image-style-align-right{float:right;text-align:right;margin-left:.5rem}::ng-deep .startpage__instr-desc .image-style-align-left,::ng-deep .quml-mcq .image-style-align-left,::ng-deep .quml-sa .image-style-align-left,::ng-deep quml-sa .image-style-align-left,::ng-deep quml-mcq-solutions .image-style-align-left{float:left;text-align:left;margin-right:.5rem}::ng-deep .startpage__instr-desc .image,::ng-deep .startpage__instr-desc figure.image,::ng-deep .quml-mcq .image,::ng-deep .quml-mcq figure.image,::ng-deep .quml-sa .image,::ng-deep .quml-sa figure.image,::ng-deep quml-sa .image,::ng-deep quml-sa figure.image,::ng-deep quml-mcq-solutions .image,::ng-deep quml-mcq-solutions figure.image{display:table;clear:both;text-align:center;margin:.5rem auto;position:relative}::ng-deep .startpage__instr-desc figure.image.resize-original,::ng-deep .startpage__instr-desc figure.image,::ng-deep .quml-mcq figure.image.resize-original,::ng-deep .quml-mcq figure.image,::ng-deep .quml-sa figure.image.resize-original,::ng-deep .quml-sa figure.image,::ng-deep quml-sa figure.image.resize-original,::ng-deep quml-sa figure.image,::ng-deep quml-mcq-solutions figure.image.resize-original,::ng-deep quml-mcq-solutions figure.image{width:auto;height:auto;overflow:visible}::ng-deep .startpage__instr-desc figure.image img,::ng-deep .quml-mcq figure.image img,::ng-deep .quml-sa figure.image img,::ng-deep quml-sa figure.image img,::ng-deep quml-mcq-solutions figure.image img{width:auto}::ng-deep .startpage__instr-desc figure.image.resize-original img,::ng-deep .quml-mcq figure.image.resize-original img,::ng-deep .quml-sa figure.image.resize-original img,::ng-deep quml-sa figure.image.resize-original img,::ng-deep quml-mcq-solutions figure.image.resize-original img{width:auto;height:auto}::ng-deep .startpage__instr-desc .image img,::ng-deep .quml-mcq .image img,::ng-deep .quml-sa .image img,::ng-deep quml-sa .image img,::ng-deep quml-mcq-solutions .image img{display:block;margin:0 auto;max-width:100%;min-width:50px}::ng-deep .startpage__instr-desc figure.image.resize-25,::ng-deep .quml-mcq figure.image.resize-25,::ng-deep .quml-sa figure.image.resize-25,::ng-deep quml-sa figure.image.resize-25,::ng-deep quml-mcq-solutions figure.image.resize-25{width:25%;height:auto}::ng-deep .startpage__instr-desc figure.image.resize-50,::ng-deep .quml-mcq figure.image.resize-50,::ng-deep .quml-sa figure.image.resize-50,::ng-deep quml-sa figure.image.resize-50,::ng-deep quml-mcq-solutions figure.image.resize-50{width:50%;height:auto}::ng-deep .startpage__instr-desc figure.image.resize-75,::ng-deep .quml-mcq figure.image.resize-75,::ng-deep .quml-sa figure.image.resize-75,::ng-deep quml-sa figure.image.resize-75,::ng-deep quml-mcq-solutions figure.image.resize-75{width:75%;height:auto}::ng-deep .startpage__instr-desc figure.image.resize-100,::ng-deep .quml-mcq figure.image.resize-100,::ng-deep .quml-sa figure.image.resize-100,::ng-deep quml-sa figure.image.resize-100,::ng-deep quml-mcq-solutions figure.image.resize-100{width:100%;height:auto}::ng-deep .startpage__instr-desc figure.table table,::ng-deep .quml-mcq figure.table table,::ng-deep .quml-sa figure.table table,::ng-deep quml-sa figure.table table,::ng-deep quml-mcq-solutions figure.table table{border-right:.0625rem solid var(--gray-100)}::ng-deep .startpage__instr-desc figure.table table,::ng-deep .startpage__instr-desc figure.table table tr td,::ng-deep .startpage__instr-desc figure.table table tr th,::ng-deep .quml-mcq figure.table table,::ng-deep .quml-mcq figure.table table tr td,::ng-deep .quml-mcq figure.table table tr th,::ng-deep .quml-sa figure.table table,::ng-deep .quml-sa figure.table table tr td,::ng-deep .quml-sa figure.table table tr th,::ng-deep quml-sa figure.table table,::ng-deep quml-sa figure.table table tr td,::ng-deep quml-sa figure.table table tr th,::ng-deep quml-mcq-solutions figure.table table,::ng-deep quml-mcq-solutions figure.table table tr td,::ng-deep quml-mcq-solutions figure.table table tr th{border:.0625rem solid var(--black);border-collapse:collapse}::ng-deep .startpage__instr-desc figure.table table,::ng-deep .quml-mcq figure.table table,::ng-deep .quml-sa figure.table table,::ng-deep quml-sa figure.table table,::ng-deep quml-mcq-solutions figure.table table{width:100%;background:var(--white);border:.0625rem solid var(--gray-100);box-shadow:none;border-radius:.25rem .25rem 0 0;text-align:left;color:var(--gray);border-collapse:separate;border-spacing:0;table-layout:fixed}::ng-deep .startpage__instr-desc figure.table table thead tr th,::ng-deep .quml-mcq figure.table table thead tr th,::ng-deep .quml-sa figure.table table thead tr th,::ng-deep quml-sa figure.table table thead tr th,::ng-deep quml-mcq-solutions figure.table table thead tr th{font-size:.875rem;padding:1rem;background-color:var(--primary-100);position:relative;height:2.5rem;border:0px;border-bottom:.0625rem solid var(--gray-100);border-right:.0625rem solid var(--gray-100);font-weight:700;color:var(--primary-color);text-transform:uppercase}::ng-deep .startpage__instr-desc figure.table table thead tr th:first-child,::ng-deep .quml-mcq figure.table table thead tr th:first-child,::ng-deep .quml-sa figure.table table thead tr th:first-child,::ng-deep quml-sa figure.table table thead tr th:first-child,::ng-deep quml-mcq-solutions figure.table table thead tr th:first-child{border-top-left-radius:.25rem}::ng-deep .startpage__instr-desc figure.table table thead tr th:last-child,::ng-deep .quml-mcq figure.table table thead tr th:last-child,::ng-deep .quml-sa figure.table table thead tr th:last-child,::ng-deep quml-sa figure.table table thead tr th:last-child,::ng-deep quml-mcq-solutions figure.table table thead tr th:last-child{border-top-right-radius:.25rem;border-right:0rem solid var(--gray-100)}::ng-deep .startpage__instr-desc figure.table table tbody tr:nth-child(2n),::ng-deep .quml-mcq figure.table table tbody tr:nth-child(2n),::ng-deep .quml-sa figure.table table tbody tr:nth-child(2n),::ng-deep quml-sa figure.table table tbody tr:nth-child(2n),::ng-deep quml-mcq-solutions figure.table table tbody tr:nth-child(2n){background-color:var(--gray-0)}::ng-deep .startpage__instr-desc figure.table table tbody tr:hover,::ng-deep .quml-mcq figure.table table tbody tr:hover,::ng-deep .quml-sa figure.table table tbody tr:hover,::ng-deep quml-sa figure.table table tbody tr:hover,::ng-deep quml-mcq-solutions figure.table table tbody tr:hover{background:var(--primary-0);color:rgba(var(--rc-rgba-gray),.95);cursor:pointer}::ng-deep .startpage__instr-desc figure.table table tbody tr td,::ng-deep .quml-mcq figure.table table tbody tr td,::ng-deep .quml-sa figure.table table tbody tr td,::ng-deep quml-sa figure.table table tbody tr td,::ng-deep quml-mcq-solutions figure.table table tbody tr td{font-size:.875rem;padding:1rem;color:var(--gray);height:3.5rem;border:0px;border-bottom:.0625rem solid var(--gray-100);border-right:.0625rem solid var(--gray-100);word-break:break-word;line-height:normal}::ng-deep .startpage__instr-desc figure.table table tbody tr td:last-child,::ng-deep .quml-mcq figure.table table tbody tr td:last-child,::ng-deep .quml-sa figure.table table tbody tr td:last-child,::ng-deep quml-sa figure.table table tbody tr td:last-child,::ng-deep quml-mcq-solutions figure.table table tbody tr td:last-child{border-right:0rem solid var(--gray-100)}::ng-deep .startpage__instr-desc figure.table table tbody tr td p,::ng-deep .quml-mcq figure.table table tbody tr td p,::ng-deep .quml-sa figure.table table tbody tr td p,::ng-deep quml-sa figure.table table tbody tr td p,::ng-deep quml-mcq-solutions figure.table table tbody tr td p{margin-bottom:0!important}::ng-deep .startpage__instr-desc figure.table table tbody tr:last-child td,::ng-deep .quml-mcq figure.table table tbody tr:last-child td,::ng-deep .quml-sa figure.table table tbody tr:last-child td,::ng-deep quml-sa figure.table table tbody tr:last-child td,::ng-deep quml-mcq-solutions figure.table table tbody tr:last-child td{border-bottom:none}::ng-deep .startpage__instr-desc figure.table table tbody tr:last-child td:first-child,::ng-deep .quml-mcq figure.table table tbody tr:last-child td:first-child,::ng-deep .quml-sa figure.table table tbody tr:last-child td:first-child,::ng-deep quml-sa figure.table table tbody tr:last-child td:first-child,::ng-deep quml-mcq-solutions figure.table table tbody tr:last-child td:first-child{border-bottom-left-radius:.25rem}::ng-deep .startpage__instr-desc figure.table table tbody tr:last-child td:last-child,::ng-deep .quml-mcq figure.table table tbody tr:last-child td:last-child,::ng-deep .quml-sa figure.table table tbody tr:last-child td:last-child,::ng-deep quml-sa figure.table table tbody tr:last-child td:last-child,::ng-deep quml-mcq-solutions figure.table table tbody tr:last-child td:last-child{border-bottom-right-radius:.25rem}::ng-deep .startpage__instr-desc ul,::ng-deep .startpage__instr-desc ol,::ng-deep .quml-mcq ul,::ng-deep .quml-mcq ol,::ng-deep .quml-sa ul,::ng-deep .quml-sa ol,::ng-deep quml-sa ul,::ng-deep quml-sa ol,::ng-deep quml-mcq-solutions ul,::ng-deep quml-mcq-solutions ol{margin-top:.5rem}::ng-deep .startpage__instr-desc ul li,::ng-deep .startpage__instr-desc ol li,::ng-deep .quml-mcq ul li,::ng-deep .quml-mcq ol li,::ng-deep .quml-sa ul li,::ng-deep .quml-sa ol li,::ng-deep quml-sa ul li,::ng-deep quml-sa ol li,::ng-deep quml-mcq-solutions ul li,::ng-deep quml-mcq-solutions ol li{margin:.5rem;font-weight:400;line-height:normal}::ng-deep .startpage__instr-desc ul,::ng-deep .quml-mcq ul,::ng-deep .quml-sa ul,::ng-deep quml-sa ul,::ng-deep quml-mcq-solutions ul{list-style-type:disc}::ng-deep .startpage__instr-desc h1,::ng-deep .startpage__instr-desc h2,::ng-deep .startpage__instr-desc h3,::ng-deep .startpage__instr-desc h4,::ng-deep .startpage__instr-desc h5,::ng-deep .startpage__instr-desc h6,::ng-deep .quml-mcq h1,::ng-deep .quml-mcq h2,::ng-deep .quml-mcq h3,::ng-deep .quml-mcq h4,::ng-deep .quml-mcq h5,::ng-deep .quml-mcq h6,::ng-deep .quml-sa h1,::ng-deep .quml-sa h2,::ng-deep .quml-sa h3,::ng-deep .quml-sa h4,::ng-deep .quml-sa h5,::ng-deep .quml-sa h6,::ng-deep quml-sa h1,::ng-deep quml-sa h2,::ng-deep quml-sa h3,::ng-deep quml-sa h4,::ng-deep quml-sa h5,::ng-deep quml-sa h6,::ng-deep quml-mcq-solutions h1,::ng-deep quml-mcq-solutions h2,::ng-deep quml-mcq-solutions h3,::ng-deep quml-mcq-solutions h4,::ng-deep quml-mcq-solutions h5,::ng-deep quml-mcq-solutions h6{color:var(--primary-color);line-height:normal;margin-bottom:1rem}::ng-deep .startpage__instr-desc p,::ng-deep .startpage__instr-desc span,::ng-deep .quml-mcq p,::ng-deep .quml-mcq span,::ng-deep .quml-sa p,::ng-deep .quml-sa span,::ng-deep quml-sa p,::ng-deep quml-sa span,::ng-deep quml-mcq-solutions p,::ng-deep quml-mcq-solutions span{color:var(--quml-mcq-title-txt)}::ng-deep .startpage__instr-desc p strong,::ng-deep .startpage__instr-desc p span strong,::ng-deep .quml-mcq p strong,::ng-deep .quml-mcq p span strong,::ng-deep .quml-sa p strong,::ng-deep .quml-sa p span strong,::ng-deep quml-sa p strong,::ng-deep quml-sa p span strong,::ng-deep quml-mcq-solutions p strong,::ng-deep quml-mcq-solutions p span strong{font-weight:700}::ng-deep .startpage__instr-desc p span u,::ng-deep .startpage__instr-desc p u,::ng-deep .quml-mcq p span u,::ng-deep .quml-mcq p u,::ng-deep .quml-sa p span u,::ng-deep .quml-sa p u,::ng-deep quml-sa p span u,::ng-deep quml-sa p u,::ng-deep quml-mcq-solutions p span u,::ng-deep quml-mcq-solutions p u{text-decoration:underline}::ng-deep .startpage__instr-desc p span i,::ng-deep .startpage__instr-desc p i,::ng-deep .quml-mcq p span i,::ng-deep .quml-mcq p i,::ng-deep .quml-sa p span i,::ng-deep .quml-sa p i,::ng-deep quml-sa p span i,::ng-deep quml-sa p i,::ng-deep quml-mcq-solutions p span i,::ng-deep quml-mcq-solutions p i{font-style:italic}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5$1.SlideComponent, selector: "slide", inputs: ["active"] }, { kind: "component", type: i5$1.CarouselComponent, selector: "carousel", inputs: ["noWrap", "noPause", "showIndicators", "pauseOnFocus", "indicatorsByChunk", "itemsPerSlide", "singleSlideOffset", "isAnimated", "activeSlide", "startFromIndex", "interval"], outputs: ["activeSlideChange", "slideRangeChange"] }, { kind: "component", type: i5.ContenterrorComponent, selector: "sb-player-contenterror", inputs: ["errorMsg"] }, { kind: "component", type: McqComponent, selector: "quml-mcq", inputs: ["shuffleOptions", "question", "identifier", "layout", "replayed", "tryAgain"], outputs: ["componentLoaded", "answerChanged", "optionSelected"] }, { kind: "component", type: HeaderComponent, selector: "quml-header", inputs: ["questions", "duration", "warningTime", "showWarningTimer", "disablePreviousNavigation", "showTimer", "totalNoOfQuestions", "currentSlideIndex", "active", "initializeTimer", "endPageReached", "loadScoreBoard", "replayed", "currentSolutions", "showFeedBack", "disableNext", "startPageInstruction", "showStartPage", "attempts", "showDeviceOrientation", "showLegend"], outputs: ["nextSlideClicked", "prevSlideClicked", "durationEnds", "showSolution", "toggleScreenRotate"] }, { kind: "component", type: SaComponent, selector: "quml-sa", inputs: ["questions", "replayed", "baseUrl"], outputs: ["componentLoaded", "showAnswerClicked"] }, { kind: "component", type: AnsComponent, selector: "quml-ans" }, { kind: "component", type: StartpageComponent, selector: "quml-startpage", inputs: ["instructions", "totalNoOfQuestions", "points", "time", "contentName", "showTimer"] }, { kind: "component", type: AlertComponent, selector: "quml-alert", inputs: ["alertType", "isHintAvailable", "showSolutionButton"], outputs: ["closeAlert", "showSolution", "showHint"] }, { kind: "component", type: McqSolutionsComponent, selector: "quml-mcq-solutions", inputs: ["question", "options", "solutions", "baseUrl", "media", "identifier"], outputs: ["close"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SectionPlayerComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-section-player', template: "<div class=\"quml-container\" *ngIf=\"loadView\" [hidden]=\"showZoomModal\">\n <div [hidden]=\"showSolution\" class=\"quml-landscape\">\n <quml-header class=\"main-header\" (durationEnds)=\"durationEnds()\" [disablePreviousNavigation]=\"linearNavigation\"\n [duration]=\"timeLimit\" [warningTime]=\"warningTime\" [showWarningTimer]=\"showWarningTimer\" [showTimer]=\"showTimer\" [showLegend]=\"parentConfig?.showLegend\"\n (nextSlideClicked)=\"nextSlideClicked($event)\" (prevSlideClicked)=\"previousSlideClicked($event)\"\n [currentSlideIndex]=\"currentSlideIndex\" [totalNoOfQuestions]=\"noOfQuestions\" [active]=\"active\"\n [showFeedBack]=\"showFeedBack\" [currentSolutions]=\"currentSolutions\" (showSolution)=\"viewSolution()\"\n [initializeTimer]=\"initializeTimer\" [replayed]=\"parentConfig?.isReplayed\" [disableNext]=\"disableNext\"\n [startPageInstruction]=\"startPageInstruction\" [attempts]=\"attempts\" [showStartPage]=\"showStartPage\"\n [showDeviceOrientation]=\"sectionConfig?.config?.showDeviceOrientation\" (toggleScreenRotate)=\"toggleScreenRotate()\">\n </quml-header>\n\n <div class=\"landscape-mode\">\n <div class=\"lanscape-mode-left\">\n <div class=\"current-slide\" *ngIf=\"currentSlideIndex !== 0\">\n {{myCarousel.getCurrentSlideIndex()}}/{{noOfQuestions}}\n </div>\n <div *ngIf=\"currentSolutions && showUserSolution\">\n <quml-ans (click)=\"getSolutions()\" (keydown)=\"onAnswerKeyDown($event)\"></quml-ans>\n </div>\n </div>\n <div class=\"landscape-content\">\n <carousel class=\"landscape-center\" [interval]=\"0\" [showIndicators]=\"false\" [noWrap]=\"true\" #myCarousel\n (activeSlideChange)=\"activeSlideChange($event)\">\n <slide>\n <quml-startpage\n [instructions]=\"showRootInstruction ? parentConfig?.instructions : sectionConfig.metadata?.instructions\"\n [points]=\"points\" [time]=\"showRootInstruction ? timeLimit : null\" [showTimer]=\"showTimer\"\n [totalNoOfQuestions]=\"showRootInstruction ? parentConfig?.questionCount : noOfQuestions\"\n [contentName]=\"showRootInstruction ? parentConfig?.contentName : parentConfig?.isSectionsAvailable ? sectionConfig?.metadata?.name : parentConfig?.contentName\">\n </quml-startpage>\n </slide>\n <slide *ngFor=\"let question of questions; let i= index\" #questionSlide>\n <div [id]=\"question.identifier\">\n <div *ngIf=\"question?.primaryCategory.toLowerCase() === 'multiple choice question'\">\n <quml-mcq [shuffleOptions]='shuffleOptions' [question]='question' [replayed]=\"parentConfig?.isReplayed\"\n (optionSelected)=\"getOptionSelected($event)\" [identifier]=\"question.id\" [tryAgain]=\"tryAgainClicked\">\n </quml-mcq>\n </div>\n <div *ngIf=\"question?.primaryCategory.toLowerCase() === 'subjective question'\">\n <quml-sa [questions]='question' [replayed]=\"parentConfig?.isReplayed\" [baseUrl]=\"parentConfig?.baseUrl\"\n (showAnswerClicked)=\"showAnswerClicked($event, question)\">\n </quml-sa>\n </div>\n </div>\n </slide>\n </carousel>\n </div>\n <div class=\"lanscape-mode-right\">\n <ul>\n <ng-container>\n <li class=\"showFeedBack-progressBar info-page hover-effect\" tabindex=\"0\"\n [ngClass]=\"(currentSlideIndex === 0) ? 'att-color progressBar-border': 'att-color' \"\n (keydown)=\"onEnter($event, 0)\" (click)=\"goToSlideClicked($event, 0)\">i\n </li>\n <li>\n <ul *ngIf=\"parentConfig?.isSectionsAvailable\" class=\"scoreboard-sections\">\n <li class=\"section relative\" *ngFor=\"let section of mainProgressBar; let i=index;\"\n attr.aria-label=\"section {{section?.index}}\" (click)=\"jumpToSection(section?.identifier)\"\n (keydown)=\"onSectionEnter($event, section?.identifier)\"\n [ngClass]=\"{'attempted' : section.class === 'attempted', 'partial': section.class === 'partial'}\">\n <label for=\"list-item-{{i}}\" class=\"progressBar-border\"\n [ngClass]=\"{'active' : section?.isActive && !showRootInstruction && section.class !== 'attempted'}\"\n tabindex=\"0\">{{section?.index}}</label>\n <ul *ngIf=\"section?.isActive && showFeedBack\">\n <li *ngFor=\"let question of progressBarClass; let j=index\" tabindex=\"0\"\n attr.aria-label=\"question number {{question?.index}}\"\n (click)=\"goToSlideClicked($event, question?.index)\" (keydown)=\"onEnter($event, question?.index)\"\n class=\"showFeedBack-progressBar\"\n [ngClass]=\"(j+1) === myCarousel.getCurrentSlideIndex() ? (question.class === 'skipped' ? 'progressBar-border' : 'progressBar-border ' + question.class) : question.class\">\n {{question?.index}}\n </li>\n </ul>\n <ul class=\"nonFeedback\" *ngIf=\"section?.isActive && !showFeedBack\">\n <li *ngFor=\"let question of progressBarClass; let j=index\" tabindex=\"0\"\n attr.aria-label=\"question number {{question?.index}}\"\n (click)=\"goToSlideClicked($event, question?.index)\" (keydown)=\"onEnter($event, question?.index)\"\n class=\"showFeedBack-progressBar\"\n [ngClass]=\"(j+1) === myCarousel.getCurrentSlideIndex() ? (question.class === 'skipped' ? 'progressBar-border' : 'att-color progressBar-border') : question.class === 'skipped' ? question.class: question.class === 'unattempted' ? '' : 'att-color'\">\n {{question?.index}}\n </li>\n </ul>\n </li>\n </ul>\n </li>\n <li>\n <ul class=\"singleContent\" *ngIf=\"!parentConfig?.isSectionsAvailable && showFeedBack\">\n <li *ngFor=\"let question of progressBarClass; let j=index\" tabindex=\"0\"\n attr.aria-label=\"question number {{question?.index}}\"\n (click)=\"goToSlideClicked($event, question?.index)\" (keydown)=\"onEnter($event, question?.index)\"\n class=\"showFeedBack-progressBar hover-effect\"\n [ngClass]=\"(j+1) === myCarousel.getCurrentSlideIndex() ? (question.class === 'skipped' ? 'progressBar-border' : 'progressBar-border ' + question.class) : question.class\">\n {{question?.index}}\n </li>\n </ul>\n </li>\n <li>\n <ul class=\"singleContent nonFeedback\" *ngIf=\"!parentConfig?.isSectionsAvailable && !showFeedBack\">\n <li *ngFor=\"let question of progressBarClass; let j=index\" tabindex=\"0\"\n attr.aria-label=\"question number {{question?.index}}\"\n (click)=\"goToSlideClicked($event, question?.index)\" (keydown)=\"onEnter($event, question?.index)\"\n class=\"showFeedBack-progressBar hover-effect\"\n [ngClass]=\"(j+1) === myCarousel.getCurrentSlideIndex() ? (question.class === 'skipped' ? 'progressBar-border' : 'att-color progressBar-border') : question.class === 'skipped' ? question.class: question.class === 'unattempted' ? '' : 'att-color'\">\n {{question?.index}}\n </li>\n </ul>\n </li>\n <li class=\"requiresSubmit cursor-pointer showFeedBack-progressBar hover-effect\" tabindex=\"0\"\n aria-label=\"scoreboard\" *ngIf=\"parentConfig.requiresSubmit && progressBarClass?.length\"\n (click)=\"disableNext = true; onScoreBoardClicked()\" (keydown)=\"onScoreBoardEnter($event)\">\n <img src=\"./assets/flag_inactive.svg\" alt=\"Flag logo: Show scoreboard\">\n </li>\n <!-- <li class=\"requiresSubmit\" *ngIf=\"loadScoreBoard && parentConfig.requiresSubmit\">\n <img src=\"./assets/flag_active.svg\" alt=\"\">\n </li> -->\n </ng-container>\n </ul>\n </div>\n </div>\n </div>\n\n <quml-alert *ngIf=\"showAlert && showFeedBack\" [alertType]=\"alertType\" [isHintAvailable]=\"showHints\"\n [showSolutionButton]=\"showUserSolution && currentSolutions\" (showSolution)=\"viewSolution()\" (showHint)=\"viewHint()\"\n (closeAlert)=\"closeAlertBox($event)\"></quml-alert>\n\n <quml-mcq-solutions *ngIf=\"showSolution\" [question]=\"currentQuestion\" [options]=\"currentOptions\"\n [solutions]=\"currentSolutions\" [baseUrl]=\"parentConfig?.baseUrl\" [media]=\"media\" [identifier]=\"currentQuestionIndetifier\" (close)=\"closeSolution()\"></quml-mcq-solutions>\n</div>\n\n<div class=\"info-popup\" *ngIf=\"infoPopup\">\n Please attempt the question\n</div>\n\n<sb-player-contenterror *ngIf=\"showContentError\"></sb-player-contenterror>\n\n\n<!-- Zoom -->\n<div class=\"image-viewer__overlay\" [hidden]=\"!showZoomModal\">\n <div class=\"image-viewer__close\" (click)=\"closeZoom()\">\n </div>\n <div class=\"image-viewer__container\">\n <img #imageModal id=\"imageModal\" class=\"image-viewer__img\" [src]=\"zoomImgSrc\" alt=\"Zoomed image\">\n </div>\n <div class=\"image-viewer__zoom\">\n <div class=\"image-viewer__zoomin\" (click)=\"zoomIn()\"></div>\n <div class=\"image-viewer__zoomout\" (click)=\"zoomOut()\"></div>\n </div>\n</div>", styles: ["@charset \"UTF-8\";::ng-deep :root{--quml-scoreboard-sub-title: #6d7278;--quml-scoreboard-skipped: #969696;--quml-scoreboard-unattempted: #575757;--quml-color-success: #08bc82;--quml-color-danger: #f1635d;--quml-color-primary-contrast: #333;--quml-btn-border: #ccc;--quml-heder-text-color: #6250f5;--quml-header-bg-color: #c2c2c2;--quml-mcq-title-txt: #131415;--quml-zoom-btn-txt: #eee;--quml-zoom-btn-hover: #f2f2f2;--quml-main-bg: #fff;--quml-btn-color: #fff;--quml-question-bg: #fff}.quml-header{background:var(--quml-header-bg-color);display:flow-root;height:2.25rem;position:fixed}.quml-container{overflow:hidden;width:100%;height:100%;position:relative}.quml-landscape{width:100%;height:100%}::ng-deep .carousel{outline:none}.col{padding-left:0;padding-right:0}.quml-button{background-color:var(--primary-color);border:none;color:var(--quml-btn-color);padding:.25rem;text-align:center;text-decoration:none;font-size:1rem;margin:.125rem .5rem .125rem .125rem;cursor:pointer;width:3rem;height:2.5rem;border-radius:10%}.landscape-mode{height:100%;width:100%;position:relative;background-color:var(--quml-main-bg)}.landscape-content{padding:2.5rem 4rem 0;overflow:auto;height:100%;width:100%}@media only screen and (max-width: 480px){.landscape-content{padding:5rem 1rem 0;height:calc(100% - 3rem)}}.lanscape-mode-left{position:absolute;left:0;top:3.5rem;text-align:center;z-index:1;width:4rem}.lanscape-mode-left div{padding-bottom:1.5rem}.landscape-center{width:100%}.lanscape-mode-right{-ms-overflow-style:none;scrollbar-width:none;position:absolute;padding:0 1rem;right:.5rem;color:var(--quml-scoreboard-unattempted);font-size:.75rem;height:calc(100% - 4rem);overflow-y:auto;top:3.5rem}.lanscape-mode-right ul{list-style:none;margin-top:.5rem;padding:0;text-align:center;position:relative}.lanscape-mode-right ul:before{content:\"\";width:.0625rem;height:100%;position:absolute;left:0;right:0;background-color:#cccccc80;z-index:1;margin:0 auto}.lanscape-mode-right ul li{position:relative;z-index:2}.lanscape-mode-right ul li.requiresSubmit{color:var(--quml-scoreboard-unattempted);border:.03125rem solid var(--quml-scoreboard-unattempted);border-radius:50%;width:1.25rem;height:1.25rem;background:var(--white)}.lanscape-mode-right ul li.requiresSubmit:hover{border:.0625rem solid var(--primary-color)}.lanscape-mode-right ul .singleContent.nonFeedback li:hover{border:1px solid var(--primary-color);color:var(--primary-color)}.lanscape-mode-right ul .singleContent.nonFeedback li.att-color{color:var(--white);background:var(--primary-color)}.lanscape-mode-right ul .section ul.nonFeedback li:hover{border:1px solid var(--primary-color);color:var(--primary-color)}.lanscape-mode-right ul .section ul.nonFeedback li.att-color{color:var(--white);background:var(--primary-color)}.lanscape-mode-right ul .section ul li:hover:after,.lanscape-mode-right ul .section ul li:focus:after,.lanscape-mode-right ul .section ul li.progressBar-border:after{border:1px solid var(--primary-color);content:\"\";width:1.65rem;height:1.65rem;border-radius:50%;padding:.25rem;position:absolute}.lanscape-mode-right ul .section.attempted:after{content:\"\";display:inline-block;transform:rotate(45deg);height:.6rem;width:.3rem;border-bottom:.12rem solid var(--primary-color);border-right:.12rem solid var(--primary-color);position:absolute;top:.25rem;right:-.7rem}.lanscape-mode-right ul .section.correct:after,.lanscape-mode-right ul .section.wrong:after,.lanscape-mode-right ul .section.partial:after{content:\"\";position:absolute;top:.525rem;right:-.7rem;height:.375rem;width:.375rem;border-radius:.375rem}.lanscape-mode-right ul .section.correct:after{--correct-bg: var(--quml-color-success);background:var(--correct-bg)}.lanscape-mode-right ul .section.wrong:after{--wrong-bg: var(--quml-color-danger);background:var(--wrong-bg)}.lanscape-mode-right ul .section.partial:after{--partial-bg: linear-gradient( 180deg, rgba(71, 164, 128, 1) 0%, rgba(71, 164, 128, 1) 50%, rgba(249, 122, 116, 1) 50%, rgba(249, 122, 116, 1) 100% );background:var(--partial-bg)}.lanscape-mode-right ul .section.attempted label,.lanscape-mode-right ul .section.partial label{color:var(--white)!important;background:var(--primary-color);border:.03125rem solid var(--primary-color)}.lanscape-mode-right ul .section label{background-color:var(--quml-question-bg);border-radius:.25rem;width:1.25rem;padding:.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center;color:var(--quml-scoreboard-unattempted);border:.03125rem solid var(--quml-scoreboard-unattempted);margin-bottom:2.25rem;cursor:pointer}.lanscape-mode-right ul .section label.requiresSubmit{color:var(--quml-scoreboard-unattempted);border:.03125rem solid var(--quml-scoreboard-unattempted);border-radius:50%;background:var(--white)}.lanscape-mode-right ul .section label.requiresSubmit:hover{border:.0625rem solid var(--primary-color)}.lanscape-mode-right ul .section label.active,.lanscape-mode-right ul .section label:hover,.lanscape-mode-right ul .section label:focus{color:var(--primary-color);border:.0625rem solid var(--primary-color)}.lanscape-mode-right ul .section label.active:after,.lanscape-mode-right ul .section label:hover:after,.lanscape-mode-right ul .section label:focus:after{border:1px solid var(--primary-color);content:\"\";height:1.65rem;border-radius:.25rem;position:absolute;width:1.65rem;background:var(--quml-question-bg);z-index:-1}.lanscape-mode-right ul .section label.skipped{color:var(--white);background:var(--quml-scoreboard-skipped);border:.0625rem solid var(--quml-scoreboard-skipped)}.lanscape-mode-right ul .section label.unattempted{color:var(--quml-scoreboard-unattempted);border:.03125rem solid var(--quml-scoreboard-unattempted)}.lanscape-mode-right ul .section label.unattempted:hover{border:.0625rem solid var(--primary-color);color:var(--primary-color)}.lanscape-mode-right ul input[type=checkbox]{display:none}.lanscape-mode-right ul input[type=checkbox]~ul{height:0;transform:scaleY(0)}.lanscape-mode-right ul input[type=checkbox]:checked~ul{height:100%;transform-origin:top;transition:transform .2s ease-out;transform:scaleY(1)}.lanscape-mode-right ul .section input[type=checkbox]:checked~label{border:.0625rem solid var(--primary-color);color:var(--primary-color)}.lanscape-mode-right ul .showFeedBack-progressBar{background-color:var(--quml-question-bg);border-radius:50%;width:1.25rem;padding:.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center;border:.0625rem solid rgb(204,204,204);margin-bottom:2.25rem;cursor:pointer}.lanscape-mode-right ul .showFeedBack-progressBar.requiresSubmit:hover{border:.0625rem solid var(--primary-color)}.lanscape-mode-right ul .showFeedBack-progressBar.progressBar-border,.lanscape-mode-right ul .showFeedBack-progressBar .active,.lanscape-mode-right ul .showFeedBack-progressBar.att-color{color:var(--primary-color);border:.0625rem solid var(--primary-color)}.lanscape-mode-right ul .showFeedBack-progressBar.info-page{color:var(--white);background:var(--primary-color);border:.0625rem solid var(--primary-color)}.lanscape-mode-right ul .showFeedBack-progressBar.skipped{color:var(--white);background:var(--quml-scoreboard-skipped);border:.0625rem solid var(--quml-scoreboard-skipped)}.lanscape-mode-right ul .showFeedBack-progressBar.skipped:hover{color:var(--white)!important}.lanscape-mode-right ul .showFeedBack-progressBar.partial,.lanscape-mode-right ul .showFeedBack-progressBar.wrong,.lanscape-mode-right ul .showFeedBack-progressBar.correct{color:var(--white);border:0px solid transparent}.lanscape-mode-right ul .showFeedBack-progressBar.correct{--correct-bg: var(--quml-color-success);background:var(--correct-bg)}.lanscape-mode-right ul .showFeedBack-progressBar.wrong{--wrong-bg: var(--quml-color-danger);background:var(--wrong-bg)}.lanscape-mode-right ul .showFeedBack-progressBar.partial{--partial-bg: linear-gradient( 180deg, rgba(71, 164, 128, 1) 0%, rgba(71, 164, 128, 1) 50%, rgba(249, 122, 116, 1) 50%, rgba(249, 122, 116, 1) 100% );background:var(--partial-bg)}.lanscape-mode-right ul .showFeedBack-progressBar.unattempted{color:var(--quml-scoreboard-unattempted);border:.03125rem solid var(--quml-scoreboard-unattempted)}.lanscape-mode-right ul .showFeedBack-progressBar.unattempted:hover{border:.0625rem solid var(--primary-color);color:var(--primary-color)}.current-slide{color:var(--quml-scoreboard-sub-title);font-size:.875rem;font-weight:900;letter-spacing:0}@media only screen and (max-width: 480px){.lanscape-mode-right{background:var(--white);display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;width:90%;height:2.5rem;padding:1rem 0 0;margin:auto;left:0}.lanscape-mode-right ul{list-style:none;padding:0;text-align:center;position:relative;display:flex;height:1.5rem;margin-top:0}.lanscape-mode-right ul .showFeedBack-progressBar{margin-right:2.25rem;z-index:1}.lanscape-mode-right ul .showFeedBack-progressBar:last-child{margin-right:0}.lanscape-mode-right ul .singleContent{display:flex}.lanscape-mode-right ul .singleContent .showFeedBack-progressBar:last-child{margin-right:2.25rem}.lanscape-mode-right ul .section ul{top:-1.75rem;position:inherit;margin:.5rem 2.25rem;padding-left:1.25rem}.lanscape-mode-right ul .section ul:before{background:transparent}.lanscape-mode-right ul .section.attempted:after{content:\"\";top:-.8125rem;right:auto;left:.625rem}.lanscape-mode-right ul .section.correct:after{content:\"\";top:-.525rem;left:.5rem;right:auto}.lanscape-mode-right ul .section.wrong:after{content:\"\";top:-.525rem;left:.5rem;right:auto}.lanscape-mode-right ul .section.partial:after{content:\"\";top:-.525rem;left:.5rem;right:auto}.lanscape-mode-right ul .section label{margin-right:2.25rem;margin-bottom:0}.lanscape-mode-right ul:before{content:\"\";width:100%;height:.0625rem;position:absolute;left:0;top:50%;transform:translateY(-50%);right:0;background-color:#cccccc80;z-index:0;margin:0 auto}.lanscape-mode-right ul input[type=checkbox]~ul{width:0;transform:scaleX(0);margin:0}.lanscape-mode-right ul input[type=checkbox]:checked~ul{width:calc(100% - 4rem);transform-origin:left;transition:transform .2s ease-out;transform:scaleX(1);margin:-1.25rem 3rem 0 4rem}.landscape-center{margin-top:2rem}.lanscape-mode-left{display:none}.landscape-mode{grid-template-areas:\"right right right\" \"center center center\" \"left left left\"}}.quml-timer{padding:.5rem}.quml-header-text{margin:.5rem;text-align:center;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.quml-arrow-button{border-radius:28%;font-size:0%;outline:none;background-color:var(--primary-color);padding:.5rem}.info-popup{position:absolute;top:18%;right:10%;font-size:.875rem;box-shadow:0 .125rem .875rem #0000001a;padding:.75rem}.quml-menu{width:1.5rem;height:1.5rem}.quml-card{background-color:var(--white);padding:1.25rem;box-shadow:0 .25rem .5rem #0003;width:25%;position:absolute;left:37%;text-align:center;top:25%;z-index:2}.quml-card-title{font-size:1.25rem;text-align:center}.quml-card-body .wrong{color:red}.quml-card-body .right{color:green}.quml-card-button-section .button-container button{color:var(--white);background-color:var(--primary-color);border-color:var(--primary-color);outline:none;font-size:.875rem;padding:.25rem 1.5rem}.quml-card-button-section .button-container{width:40%;display:inline;padding-right:.75rem}::ng-deep .carousel.slide a.left.carousel-control.carousel-control-prev,::ng-deep .carousel.slide .carousel-control.carousel-control-next{display:none}::ng-deep .carousel-item{perspective:unset}.potrait-header-top{visibility:hidden;margin-top:-2.5rem}.potrait-header-top .wrapper{display:grid;grid-template-columns:1fr 15fr}.potrait-header-top .quml-menu{color:var(--quml-heder-text-color);font-size:1.5rem;padding-left:1.25rem;margin-top:.25rem}.potrait-header-top .quml-header-text{font-size:.875rem;color:var(--quml-heder-text-color)}.row{margin-right:0;margin-left:0}.portrait-header{visibility:hidden}.image-viewer__overlay,.image-viewer__container,.image-viewer__close,.image-viewer__zoom{position:absolute}.image-viewer__overlay{width:100%;height:100%;background:var(--quml-color-primary-contrast);z-index:11111}.image-viewer__container{background-color:var(--quml-color-primary-contrast);top:50%;left:50%;transform:translate(-50%,-50%);z-index:11111;width:80%;height:80%}.image-viewer__img{width:100%;height:100%}.image-viewer__close{top:1rem;right:1rem;text-align:center;cursor:pointer;z-index:999999;background:#00000080;border-radius:100%;width:3rem;height:3rem;position:inherit}.image-viewer__close:after{content:\"\\2715\";color:var(--white);font-size:2rem}.image-viewer__close:hover{background:#000}.image-viewer__zoom{bottom:1rem;right:1rem;width:2.5rem;height:auto;border-radius:.5rem;background:var(--white);display:flex;flex-direction:column;align-items:center;overflow:hidden;z-index:99999;position:inherit;border:.0625rem solid var(--quml-zoom-btn-txt)}.image-viewer__zoomin,.image-viewer__zoomout{text-align:center;height:2.5rem;position:relative;width:2.5rem;cursor:pointer}.image-viewer__zoomin:hover,.image-viewer__zoomout:hover{background-color:var(--quml-zoom-btn-hover)}.image-viewer__zoomin:after,.image-viewer__zoomout:after{font-size:1.5rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.image-viewer__zoomin{border-bottom:.0625rem solid var(--quml-btn-border)}.image-viewer__zoomin:after{content:\"+\"}.image-viewer__zoomout:after{content:\"\\2212\"}::ng-deep quml-ans{cursor:pointer}::ng-deep quml-ans svg circle{fill:var(--quml-zoom-btn-txt)}::ng-deep .magnify-icon{position:absolute;right:0;bottom:0;width:1.5rem;height:1.5rem;border-top-left-radius:.5rem;cursor:pointer;background-color:var(--quml-color-primary-contrast)}::ng-deep .magnify-icon:after{content:\"\";position:absolute;bottom:.125rem;right:.125rem;z-index:1;width:1rem;height:1rem;background-image:url(\"data:image/svg+xml,%3C%3Fxml version='1.0'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.com/svgjs' version='1.1' width='512' height='512' x='0' y='0' viewBox='0 0 37.166 37.166' style='enable-background:new 0 0 512 512' xml:space='preserve' class=''%3E%3Cg%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M35.829,32.045l-6.833-6.833c-0.513-0.513-1.167-0.788-1.836-0.853c2.06-2.567,3.298-5.819,3.298-9.359 c0-8.271-6.729-15-15-15c-8.271,0-15,6.729-15,15c0,8.271,6.729,15,15,15c3.121,0,6.021-0.96,8.424-2.598 c0.018,0.744,0.305,1.482,0.872,2.052l6.833,6.833c0.585,0.586,1.354,0.879,2.121,0.879s1.536-0.293,2.121-0.879 C37.001,35.116,37.001,33.217,35.829,32.045z M15.458,25c-5.514,0-10-4.484-10-10c0-5.514,4.486-10,10-10c5.514,0,10,4.486,10,10 C25.458,20.516,20.972,25,15.458,25z M22.334,15c0,1.104-0.896,2-2,2h-2.75v2.75c0,1.104-0.896,2-2,2s-2-0.896-2-2V17h-2.75 c-1.104,0-2-0.896-2-2s0.896-2,2-2h2.75v-2.75c0-1.104,0.896-2,2-2s2,0.896,2,2V13h2.75C21.438,13,22.334,13.895,22.334,15z' fill='%23ffffff' data-original='%23000000' style='' class=''/%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3Cg xmlns='http://www.w3.org/2000/svg'%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A\");background-size:cover;background-repeat:no-repeat;background-position:center}::ng-deep .solution-options figure.image{border:.0625rem solid var(--quml-btn-border);overflow:hidden;border-radius:.25rem;position:relative}::ng-deep .solutions .solution-options figure.image,::ng-deep .image-viewer__overlay .image-viewer__container{display:flex;align-items:center;justify-content:center}::ng-deep .solutions .solution-options figure.image .portrait,::ng-deep .image-viewer__overlay .image-viewer__container .portrait{width:auto;height:100%}::ng-deep .solutions .solution-options figure.image .neutral,::ng-deep .image-viewer__overlay .image-viewer__container .neutral{width:auto;height:auto}@media only screen and (max-width: 768px){::ng-deep .solutions .solution-options figure.image .neutral,::ng-deep .image-viewer__overlay .image-viewer__container .neutral{width:100%}}@media only screen and (min-width: 768px){::ng-deep .solutions .solution-options figure.image .neutral,::ng-deep .image-viewer__overlay .image-viewer__container .neutral{height:100%}}::ng-deep .solutions .solution-options figure.image .landscape,::ng-deep .image-viewer__overlay .image-viewer__container .landscape{height:auto}::ng-deep .quml-mcq .mcq-title,::ng-deep .quml-sa .mcq-title,::ng-deep quml-sa .mcq-title,::ng-deep quml-mcq-solutions .mcq-title{color:var(--quml-mcq-title-txt)}::ng-deep .quml-mcq .mcq-title p,::ng-deep .quml-sa .mcq-title p,::ng-deep quml-sa .mcq-title p,::ng-deep quml-mcq-solutions .mcq-title p{word-break:break-word}@media only screen and (max-width: 480px){::ng-deep .quml-mcq .mcq-title,::ng-deep .quml-sa .mcq-title,::ng-deep quml-sa .mcq-title,::ng-deep quml-mcq-solutions .mcq-title{margin-top:1rem}}::ng-deep .quml-mcq .quml-mcq--option .quml-mcq-option-card p:first-child,::ng-deep .quml-mcq .quml-mcq--option .quml-mcq-option-card p:last-child,::ng-deep .quml-sa .quml-mcq--option .quml-mcq-option-card p:first-child,::ng-deep .quml-sa .quml-mcq--option .quml-mcq-option-card p:last-child,::ng-deep quml-sa .quml-mcq--option .quml-mcq-option-card p:first-child,::ng-deep quml-sa .quml-mcq--option .quml-mcq-option-card p:last-child,::ng-deep quml-mcq-solutions .quml-mcq--option .quml-mcq-option-card p:first-child,::ng-deep quml-mcq-solutions .quml-mcq--option .quml-mcq-option-card p:last-child{margin-bottom:0}::ng-deep quml-mcq-solutions figure.image,::ng-deep quml-mcq-solutions figure.image.resize-25,::ng-deep quml-mcq-solutions figure.image.resize-50,::ng-deep quml-mcq-solutions figure.image.resize-75,::ng-deep quml-mcq-solutions figure.image.resize-100,::ng-deep quml-mcq-solutions figure.image.resize-original{width:25%;height:auto}::ng-deep quml-mcq-solutions .solution-options p{margin-bottom:1rem}::ng-deep .quml-option .option p{word-break:break-word}.endPage-container-height{height:100%}.scoreboard-sections{display:contents}.scoreboard-sections li{position:relative;z-index:2}.hover-effect:hover:after,.hover-effect:focus:after,.hover-effect.progressBar-border:after{border:1px solid var(--primary-color);content:\"\";width:1.65rem;height:1.65rem;border-radius:50%;padding:.25rem;position:absolute}\n", "::ng-deep :root{--quml-mcq-title-txt: #131415}::ng-deep .startpage__instr-desc .mcq-title,::ng-deep .quml-mcq .mcq-title,::ng-deep .quml-sa .mcq-title,::ng-deep quml-sa .mcq-title,::ng-deep quml-mcq-solutions .mcq-title{color:var(--quml-mcq-title-txt)}::ng-deep .startpage__instr-desc .fs-8,::ng-deep .startpage__instr-desc .fs-9,::ng-deep .startpage__instr-desc .fs-10,::ng-deep .startpage__instr-desc .fs-11,::ng-deep .startpage__instr-desc .fs-12,::ng-deep .startpage__instr-desc .fs-13,::ng-deep .startpage__instr-desc .fs-14,::ng-deep .startpage__instr-desc .fs-15,::ng-deep .startpage__instr-desc .fs-16,::ng-deep .startpage__instr-desc .fs-17,::ng-deep .startpage__instr-desc .fs-18,::ng-deep .startpage__instr-desc .fs-19,::ng-deep .startpage__instr-desc .fs-20,::ng-deep .startpage__instr-desc .fs-21,::ng-deep .startpage__instr-desc .fs-22,::ng-deep .startpage__instr-desc .fs-23,::ng-deep .startpage__instr-desc .fs-24,::ng-deep .startpage__instr-desc .fs-25,::ng-deep .startpage__instr-desc .fs-26,::ng-deep .startpage__instr-desc .fs-27,::ng-deep .startpage__instr-desc .fs-28,::ng-deep .startpage__instr-desc .fs-29,::ng-deep .startpage__instr-desc .fs-30,::ng-deep .startpage__instr-desc .fs-36,::ng-deep .quml-mcq .fs-8,::ng-deep .quml-mcq .fs-9,::ng-deep .quml-mcq .fs-10,::ng-deep .quml-mcq .fs-11,::ng-deep .quml-mcq .fs-12,::ng-deep .quml-mcq .fs-13,::ng-deep .quml-mcq .fs-14,::ng-deep .quml-mcq .fs-15,::ng-deep .quml-mcq .fs-16,::ng-deep .quml-mcq .fs-17,::ng-deep .quml-mcq .fs-18,::ng-deep .quml-mcq .fs-19,::ng-deep .quml-mcq .fs-20,::ng-deep .quml-mcq .fs-21,::ng-deep .quml-mcq .fs-22,::ng-deep .quml-mcq .fs-23,::ng-deep .quml-mcq .fs-24,::ng-deep .quml-mcq .fs-25,::ng-deep .quml-mcq .fs-26,::ng-deep .quml-mcq .fs-27,::ng-deep .quml-mcq .fs-28,::ng-deep .quml-mcq .fs-29,::ng-deep .quml-mcq .fs-30,::ng-deep .quml-mcq .fs-36,::ng-deep .quml-sa .fs-8,::ng-deep .quml-sa .fs-9,::ng-deep .quml-sa .fs-10,::ng-deep .quml-sa .fs-11,::ng-deep .quml-sa .fs-12,::ng-deep .quml-sa .fs-13,::ng-deep .quml-sa .fs-14,::ng-deep .quml-sa .fs-15,::ng-deep .quml-sa .fs-16,::ng-deep .quml-sa .fs-17,::ng-deep .quml-sa .fs-18,::ng-deep .quml-sa .fs-19,::ng-deep .quml-sa .fs-20,::ng-deep .quml-sa .fs-21,::ng-deep .quml-sa .fs-22,::ng-deep .quml-sa .fs-23,::ng-deep .quml-sa .fs-24,::ng-deep .quml-sa .fs-25,::ng-deep .quml-sa .fs-26,::ng-deep .quml-sa .fs-27,::ng-deep .quml-sa .fs-28,::ng-deep .quml-sa .fs-29,::ng-deep .quml-sa .fs-30,::ng-deep .quml-sa .fs-36,::ng-deep quml-sa .fs-8,::ng-deep quml-sa .fs-9,::ng-deep quml-sa .fs-10,::ng-deep quml-sa .fs-11,::ng-deep quml-sa .fs-12,::ng-deep quml-sa .fs-13,::ng-deep quml-sa .fs-14,::ng-deep quml-sa .fs-15,::ng-deep quml-sa .fs-16,::ng-deep quml-sa .fs-17,::ng-deep quml-sa .fs-18,::ng-deep quml-sa .fs-19,::ng-deep quml-sa .fs-20,::ng-deep quml-sa .fs-21,::ng-deep quml-sa .fs-22,::ng-deep quml-sa .fs-23,::ng-deep quml-sa .fs-24,::ng-deep quml-sa .fs-25,::ng-deep quml-sa .fs-26,::ng-deep quml-sa .fs-27,::ng-deep quml-sa .fs-28,::ng-deep quml-sa .fs-29,::ng-deep quml-sa .fs-30,::ng-deep quml-sa .fs-36,::ng-deep quml-mcq-solutions .fs-8,::ng-deep quml-mcq-solutions .fs-9,::ng-deep quml-mcq-solutions .fs-10,::ng-deep quml-mcq-solutions .fs-11,::ng-deep quml-mcq-solutions .fs-12,::ng-deep quml-mcq-solutions .fs-13,::ng-deep quml-mcq-solutions .fs-14,::ng-deep quml-mcq-solutions .fs-15,::ng-deep quml-mcq-solutions .fs-16,::ng-deep quml-mcq-solutions .fs-17,::ng-deep quml-mcq-solutions .fs-18,::ng-deep quml-mcq-solutions .fs-19,::ng-deep quml-mcq-solutions .fs-20,::ng-deep quml-mcq-solutions .fs-21,::ng-deep quml-mcq-solutions .fs-22,::ng-deep quml-mcq-solutions .fs-23,::ng-deep quml-mcq-solutions .fs-24,::ng-deep quml-mcq-solutions .fs-25,::ng-deep quml-mcq-solutions .fs-26,::ng-deep quml-mcq-solutions .fs-27,::ng-deep quml-mcq-solutions .fs-28,::ng-deep quml-mcq-solutions .fs-29,::ng-deep quml-mcq-solutions .fs-30,::ng-deep quml-mcq-solutions .fs-36{line-height:normal}::ng-deep .startpage__instr-desc .fs-8,::ng-deep .quml-mcq .fs-8,::ng-deep .quml-sa .fs-8,::ng-deep quml-sa .fs-8,::ng-deep quml-mcq-solutions .fs-8{font-size:.5rem}::ng-deep .startpage__instr-desc .fs-9,::ng-deep .quml-mcq .fs-9,::ng-deep .quml-sa .fs-9,::ng-deep quml-sa .fs-9,::ng-deep quml-mcq-solutions .fs-9{font-size:.563rem}::ng-deep .startpage__instr-desc .fs-10,::ng-deep .quml-mcq .fs-10,::ng-deep .quml-sa .fs-10,::ng-deep quml-sa .fs-10,::ng-deep quml-mcq-solutions .fs-10{font-size:.625rem}::ng-deep .startpage__instr-desc .fs-11,::ng-deep .quml-mcq .fs-11,::ng-deep .quml-sa .fs-11,::ng-deep quml-sa .fs-11,::ng-deep quml-mcq-solutions .fs-11{font-size:.688rem}::ng-deep .startpage__instr-desc .fs-12,::ng-deep .quml-mcq .fs-12,::ng-deep .quml-sa .fs-12,::ng-deep quml-sa .fs-12,::ng-deep quml-mcq-solutions .fs-12{font-size:.75rem}::ng-deep .startpage__instr-desc .fs-13,::ng-deep .quml-mcq .fs-13,::ng-deep .quml-sa .fs-13,::ng-deep quml-sa .fs-13,::ng-deep quml-mcq-solutions .fs-13{font-size:.813rem}::ng-deep .startpage__instr-desc .fs-14,::ng-deep .quml-mcq .fs-14,::ng-deep .quml-sa .fs-14,::ng-deep quml-sa .fs-14,::ng-deep quml-mcq-solutions .fs-14{font-size:.875rem}::ng-deep .startpage__instr-desc .fs-15,::ng-deep .quml-mcq .fs-15,::ng-deep .quml-sa .fs-15,::ng-deep quml-sa .fs-15,::ng-deep quml-mcq-solutions .fs-15{font-size:.938rem}::ng-deep .startpage__instr-desc .fs-16,::ng-deep .quml-mcq .fs-16,::ng-deep .quml-sa .fs-16,::ng-deep quml-sa .fs-16,::ng-deep quml-mcq-solutions .fs-16{font-size:1rem}::ng-deep .startpage__instr-desc .fs-17,::ng-deep .quml-mcq .fs-17,::ng-deep .quml-sa .fs-17,::ng-deep quml-sa .fs-17,::ng-deep quml-mcq-solutions .fs-17{font-size:1.063rem}::ng-deep .startpage__instr-desc .fs-18,::ng-deep .quml-mcq .fs-18,::ng-deep .quml-sa .fs-18,::ng-deep quml-sa .fs-18,::ng-deep quml-mcq-solutions .fs-18{font-size:1.125rem}::ng-deep .startpage__instr-desc .fs-19,::ng-deep .quml-mcq .fs-19,::ng-deep .quml-sa .fs-19,::ng-deep quml-sa .fs-19,::ng-deep quml-mcq-solutions .fs-19{font-size:1.188rem}::ng-deep .startpage__instr-desc .fs-20,::ng-deep .quml-mcq .fs-20,::ng-deep .quml-sa .fs-20,::ng-deep quml-sa .fs-20,::ng-deep quml-mcq-solutions .fs-20{font-size:1.25rem}::ng-deep .startpage__instr-desc .fs-21,::ng-deep .quml-mcq .fs-21,::ng-deep .quml-sa .fs-21,::ng-deep quml-sa .fs-21,::ng-deep quml-mcq-solutions .fs-21{font-size:1.313rem}::ng-deep .startpage__instr-desc .fs-22,::ng-deep .quml-mcq .fs-22,::ng-deep .quml-sa .fs-22,::ng-deep quml-sa .fs-22,::ng-deep quml-mcq-solutions .fs-22{font-size:1.375rem}::ng-deep .startpage__instr-desc .fs-23,::ng-deep .quml-mcq .fs-23,::ng-deep .quml-sa .fs-23,::ng-deep quml-sa .fs-23,::ng-deep quml-mcq-solutions .fs-23{font-size:1.438rem}::ng-deep .startpage__instr-desc .fs-24,::ng-deep .quml-mcq .fs-24,::ng-deep .quml-sa .fs-24,::ng-deep quml-sa .fs-24,::ng-deep quml-mcq-solutions .fs-24{font-size:1.5rem}::ng-deep .startpage__instr-desc .fs-25,::ng-deep .quml-mcq .fs-25,::ng-deep .quml-sa .fs-25,::ng-deep quml-sa .fs-25,::ng-deep quml-mcq-solutions .fs-25{font-size:1.563rem}::ng-deep .startpage__instr-desc .fs-26,::ng-deep .quml-mcq .fs-26,::ng-deep .quml-sa .fs-26,::ng-deep quml-sa .fs-26,::ng-deep quml-mcq-solutions .fs-26{font-size:1.625rem}::ng-deep .startpage__instr-desc .fs-27,::ng-deep .quml-mcq .fs-27,::ng-deep .quml-sa .fs-27,::ng-deep quml-sa .fs-27,::ng-deep quml-mcq-solutions .fs-27{font-size:1.688rem}::ng-deep .startpage__instr-desc .fs-28,::ng-deep .quml-mcq .fs-28,::ng-deep .quml-sa .fs-28,::ng-deep quml-sa .fs-28,::ng-deep quml-mcq-solutions .fs-28{font-size:1.75rem}::ng-deep .startpage__instr-desc .fs-29,::ng-deep .quml-mcq .fs-29,::ng-deep .quml-sa .fs-29,::ng-deep quml-sa .fs-29,::ng-deep quml-mcq-solutions .fs-29{font-size:1.813rem}::ng-deep .startpage__instr-desc .fs-30,::ng-deep .quml-mcq .fs-30,::ng-deep .quml-sa .fs-30,::ng-deep quml-sa .fs-30,::ng-deep quml-mcq-solutions .fs-30{font-size:1.875rem}::ng-deep .startpage__instr-desc .fs-36,::ng-deep .quml-mcq .fs-36,::ng-deep .quml-sa .fs-36,::ng-deep quml-sa .fs-36,::ng-deep quml-mcq-solutions .fs-36{font-size:2.25rem}::ng-deep .startpage__instr-desc .text-left,::ng-deep .quml-mcq .text-left,::ng-deep .quml-sa .text-left,::ng-deep quml-sa .text-left,::ng-deep quml-mcq-solutions .text-left{text-align:left}::ng-deep .startpage__instr-desc .text-center,::ng-deep .quml-mcq .text-center,::ng-deep .quml-sa .text-center,::ng-deep quml-sa .text-center,::ng-deep quml-mcq-solutions .text-center{text-align:center}::ng-deep .startpage__instr-desc .text-right,::ng-deep .quml-mcq .text-right,::ng-deep .quml-sa .text-right,::ng-deep quml-sa .text-right,::ng-deep quml-mcq-solutions .text-right{text-align:right}::ng-deep .startpage__instr-desc .image-style-align-right,::ng-deep .quml-mcq .image-style-align-right,::ng-deep .quml-sa .image-style-align-right,::ng-deep quml-sa .image-style-align-right,::ng-deep quml-mcq-solutions .image-style-align-right{float:right;text-align:right;margin-left:.5rem}::ng-deep .startpage__instr-desc .image-style-align-left,::ng-deep .quml-mcq .image-style-align-left,::ng-deep .quml-sa .image-style-align-left,::ng-deep quml-sa .image-style-align-left,::ng-deep quml-mcq-solutions .image-style-align-left{float:left;text-align:left;margin-right:.5rem}::ng-deep .startpage__instr-desc .image,::ng-deep .startpage__instr-desc figure.image,::ng-deep .quml-mcq .image,::ng-deep .quml-mcq figure.image,::ng-deep .quml-sa .image,::ng-deep .quml-sa figure.image,::ng-deep quml-sa .image,::ng-deep quml-sa figure.image,::ng-deep quml-mcq-solutions .image,::ng-deep quml-mcq-solutions figure.image{display:table;clear:both;text-align:center;margin:.5rem auto;position:relative}::ng-deep .startpage__instr-desc figure.image.resize-original,::ng-deep .startpage__instr-desc figure.image,::ng-deep .quml-mcq figure.image.resize-original,::ng-deep .quml-mcq figure.image,::ng-deep .quml-sa figure.image.resize-original,::ng-deep .quml-sa figure.image,::ng-deep quml-sa figure.image.resize-original,::ng-deep quml-sa figure.image,::ng-deep quml-mcq-solutions figure.image.resize-original,::ng-deep quml-mcq-solutions figure.image{width:auto;height:auto;overflow:visible}::ng-deep .startpage__instr-desc figure.image img,::ng-deep .quml-mcq figure.image img,::ng-deep .quml-sa figure.image img,::ng-deep quml-sa figure.image img,::ng-deep quml-mcq-solutions figure.image img{width:auto}::ng-deep .startpage__instr-desc figure.image.resize-original img,::ng-deep .quml-mcq figure.image.resize-original img,::ng-deep .quml-sa figure.image.resize-original img,::ng-deep quml-sa figure.image.resize-original img,::ng-deep quml-mcq-solutions figure.image.resize-original img{width:auto;height:auto}::ng-deep .startpage__instr-desc .image img,::ng-deep .quml-mcq .image img,::ng-deep .quml-sa .image img,::ng-deep quml-sa .image img,::ng-deep quml-mcq-solutions .image img{display:block;margin:0 auto;max-width:100%;min-width:50px}::ng-deep .startpage__instr-desc figure.image.resize-25,::ng-deep .quml-mcq figure.image.resize-25,::ng-deep .quml-sa figure.image.resize-25,::ng-deep quml-sa figure.image.resize-25,::ng-deep quml-mcq-solutions figure.image.resize-25{width:25%;height:auto}::ng-deep .startpage__instr-desc figure.image.resize-50,::ng-deep .quml-mcq figure.image.resize-50,::ng-deep .quml-sa figure.image.resize-50,::ng-deep quml-sa figure.image.resize-50,::ng-deep quml-mcq-solutions figure.image.resize-50{width:50%;height:auto}::ng-deep .startpage__instr-desc figure.image.resize-75,::ng-deep .quml-mcq figure.image.resize-75,::ng-deep .quml-sa figure.image.resize-75,::ng-deep quml-sa figure.image.resize-75,::ng-deep quml-mcq-solutions figure.image.resize-75{width:75%;height:auto}::ng-deep .startpage__instr-desc figure.image.resize-100,::ng-deep .quml-mcq figure.image.resize-100,::ng-deep .quml-sa figure.image.resize-100,::ng-deep quml-sa figure.image.resize-100,::ng-deep quml-mcq-solutions figure.image.resize-100{width:100%;height:auto}::ng-deep .startpage__instr-desc figure.table table,::ng-deep .quml-mcq figure.table table,::ng-deep .quml-sa figure.table table,::ng-deep quml-sa figure.table table,::ng-deep quml-mcq-solutions figure.table table{border-right:.0625rem solid var(--gray-100)}::ng-deep .startpage__instr-desc figure.table table,::ng-deep .startpage__instr-desc figure.table table tr td,::ng-deep .startpage__instr-desc figure.table table tr th,::ng-deep .quml-mcq figure.table table,::ng-deep .quml-mcq figure.table table tr td,::ng-deep .quml-mcq figure.table table tr th,::ng-deep .quml-sa figure.table table,::ng-deep .quml-sa figure.table table tr td,::ng-deep .quml-sa figure.table table tr th,::ng-deep quml-sa figure.table table,::ng-deep quml-sa figure.table table tr td,::ng-deep quml-sa figure.table table tr th,::ng-deep quml-mcq-solutions figure.table table,::ng-deep quml-mcq-solutions figure.table table tr td,::ng-deep quml-mcq-solutions figure.table table tr th{border:.0625rem solid var(--black);border-collapse:collapse}::ng-deep .startpage__instr-desc figure.table table,::ng-deep .quml-mcq figure.table table,::ng-deep .quml-sa figure.table table,::ng-deep quml-sa figure.table table,::ng-deep quml-mcq-solutions figure.table table{width:100%;background:var(--white);border:.0625rem solid var(--gray-100);box-shadow:none;border-radius:.25rem .25rem 0 0;text-align:left;color:var(--gray);border-collapse:separate;border-spacing:0;table-layout:fixed}::ng-deep .startpage__instr-desc figure.table table thead tr th,::ng-deep .quml-mcq figure.table table thead tr th,::ng-deep .quml-sa figure.table table thead tr th,::ng-deep quml-sa figure.table table thead tr th,::ng-deep quml-mcq-solutions figure.table table thead tr th{font-size:.875rem;padding:1rem;background-color:var(--primary-100);position:relative;height:2.5rem;border:0px;border-bottom:.0625rem solid var(--gray-100);border-right:.0625rem solid var(--gray-100);font-weight:700;color:var(--primary-color);text-transform:uppercase}::ng-deep .startpage__instr-desc figure.table table thead tr th:first-child,::ng-deep .quml-mcq figure.table table thead tr th:first-child,::ng-deep .quml-sa figure.table table thead tr th:first-child,::ng-deep quml-sa figure.table table thead tr th:first-child,::ng-deep quml-mcq-solutions figure.table table thead tr th:first-child{border-top-left-radius:.25rem}::ng-deep .startpage__instr-desc figure.table table thead tr th:last-child,::ng-deep .quml-mcq figure.table table thead tr th:last-child,::ng-deep .quml-sa figure.table table thead tr th:last-child,::ng-deep quml-sa figure.table table thead tr th:last-child,::ng-deep quml-mcq-solutions figure.table table thead tr th:last-child{border-top-right-radius:.25rem;border-right:0rem solid var(--gray-100)}::ng-deep .startpage__instr-desc figure.table table tbody tr:nth-child(2n),::ng-deep .quml-mcq figure.table table tbody tr:nth-child(2n),::ng-deep .quml-sa figure.table table tbody tr:nth-child(2n),::ng-deep quml-sa figure.table table tbody tr:nth-child(2n),::ng-deep quml-mcq-solutions figure.table table tbody tr:nth-child(2n){background-color:var(--gray-0)}::ng-deep .startpage__instr-desc figure.table table tbody tr:hover,::ng-deep .quml-mcq figure.table table tbody tr:hover,::ng-deep .quml-sa figure.table table tbody tr:hover,::ng-deep quml-sa figure.table table tbody tr:hover,::ng-deep quml-mcq-solutions figure.table table tbody tr:hover{background:var(--primary-0);color:rgba(var(--rc-rgba-gray),.95);cursor:pointer}::ng-deep .startpage__instr-desc figure.table table tbody tr td,::ng-deep .quml-mcq figure.table table tbody tr td,::ng-deep .quml-sa figure.table table tbody tr td,::ng-deep quml-sa figure.table table tbody tr td,::ng-deep quml-mcq-solutions figure.table table tbody tr td{font-size:.875rem;padding:1rem;color:var(--gray);height:3.5rem;border:0px;border-bottom:.0625rem solid var(--gray-100);border-right:.0625rem solid var(--gray-100);word-break:break-word;line-height:normal}::ng-deep .startpage__instr-desc figure.table table tbody tr td:last-child,::ng-deep .quml-mcq figure.table table tbody tr td:last-child,::ng-deep .quml-sa figure.table table tbody tr td:last-child,::ng-deep quml-sa figure.table table tbody tr td:last-child,::ng-deep quml-mcq-solutions figure.table table tbody tr td:last-child{border-right:0rem solid var(--gray-100)}::ng-deep .startpage__instr-desc figure.table table tbody tr td p,::ng-deep .quml-mcq figure.table table tbody tr td p,::ng-deep .quml-sa figure.table table tbody tr td p,::ng-deep quml-sa figure.table table tbody tr td p,::ng-deep quml-mcq-solutions figure.table table tbody tr td p{margin-bottom:0!important}::ng-deep .startpage__instr-desc figure.table table tbody tr:last-child td,::ng-deep .quml-mcq figure.table table tbody tr:last-child td,::ng-deep .quml-sa figure.table table tbody tr:last-child td,::ng-deep quml-sa figure.table table tbody tr:last-child td,::ng-deep quml-mcq-solutions figure.table table tbody tr:last-child td{border-bottom:none}::ng-deep .startpage__instr-desc figure.table table tbody tr:last-child td:first-child,::ng-deep .quml-mcq figure.table table tbody tr:last-child td:first-child,::ng-deep .quml-sa figure.table table tbody tr:last-child td:first-child,::ng-deep quml-sa figure.table table tbody tr:last-child td:first-child,::ng-deep quml-mcq-solutions figure.table table tbody tr:last-child td:first-child{border-bottom-left-radius:.25rem}::ng-deep .startpage__instr-desc figure.table table tbody tr:last-child td:last-child,::ng-deep .quml-mcq figure.table table tbody tr:last-child td:last-child,::ng-deep .quml-sa figure.table table tbody tr:last-child td:last-child,::ng-deep quml-sa figure.table table tbody tr:last-child td:last-child,::ng-deep quml-mcq-solutions figure.table table tbody tr:last-child td:last-child{border-bottom-right-radius:.25rem}::ng-deep .startpage__instr-desc ul,::ng-deep .startpage__instr-desc ol,::ng-deep .quml-mcq ul,::ng-deep .quml-mcq ol,::ng-deep .quml-sa ul,::ng-deep .quml-sa ol,::ng-deep quml-sa ul,::ng-deep quml-sa ol,::ng-deep quml-mcq-solutions ul,::ng-deep quml-mcq-solutions ol{margin-top:.5rem}::ng-deep .startpage__instr-desc ul li,::ng-deep .startpage__instr-desc ol li,::ng-deep .quml-mcq ul li,::ng-deep .quml-mcq ol li,::ng-deep .quml-sa ul li,::ng-deep .quml-sa ol li,::ng-deep quml-sa ul li,::ng-deep quml-sa ol li,::ng-deep quml-mcq-solutions ul li,::ng-deep quml-mcq-solutions ol li{margin:.5rem;font-weight:400;line-height:normal}::ng-deep .startpage__instr-desc ul,::ng-deep .quml-mcq ul,::ng-deep .quml-sa ul,::ng-deep quml-sa ul,::ng-deep quml-mcq-solutions ul{list-style-type:disc}::ng-deep .startpage__instr-desc h1,::ng-deep .startpage__instr-desc h2,::ng-deep .startpage__instr-desc h3,::ng-deep .startpage__instr-desc h4,::ng-deep .startpage__instr-desc h5,::ng-deep .startpage__instr-desc h6,::ng-deep .quml-mcq h1,::ng-deep .quml-mcq h2,::ng-deep .quml-mcq h3,::ng-deep .quml-mcq h4,::ng-deep .quml-mcq h5,::ng-deep .quml-mcq h6,::ng-deep .quml-sa h1,::ng-deep .quml-sa h2,::ng-deep .quml-sa h3,::ng-deep .quml-sa h4,::ng-deep .quml-sa h5,::ng-deep .quml-sa h6,::ng-deep quml-sa h1,::ng-deep quml-sa h2,::ng-deep quml-sa h3,::ng-deep quml-sa h4,::ng-deep quml-sa h5,::ng-deep quml-sa h6,::ng-deep quml-mcq-solutions h1,::ng-deep quml-mcq-solutions h2,::ng-deep quml-mcq-solutions h3,::ng-deep quml-mcq-solutions h4,::ng-deep quml-mcq-solutions h5,::ng-deep quml-mcq-solutions h6{color:var(--primary-color);line-height:normal;margin-bottom:1rem}::ng-deep .startpage__instr-desc p,::ng-deep .startpage__instr-desc span,::ng-deep .quml-mcq p,::ng-deep .quml-mcq span,::ng-deep .quml-sa p,::ng-deep .quml-sa span,::ng-deep quml-sa p,::ng-deep quml-sa span,::ng-deep quml-mcq-solutions p,::ng-deep quml-mcq-solutions span{color:var(--quml-mcq-title-txt)}::ng-deep .startpage__instr-desc p strong,::ng-deep .startpage__instr-desc p span strong,::ng-deep .quml-mcq p strong,::ng-deep .quml-mcq p span strong,::ng-deep .quml-sa p strong,::ng-deep .quml-sa p span strong,::ng-deep quml-sa p strong,::ng-deep quml-sa p span strong,::ng-deep quml-mcq-solutions p strong,::ng-deep quml-mcq-solutions p span strong{font-weight:700}::ng-deep .startpage__instr-desc p span u,::ng-deep .startpage__instr-desc p u,::ng-deep .quml-mcq p span u,::ng-deep .quml-mcq p u,::ng-deep .quml-sa p span u,::ng-deep .quml-sa p u,::ng-deep quml-sa p span u,::ng-deep quml-sa p u,::ng-deep quml-mcq-solutions p span u,::ng-deep quml-mcq-solutions p u{text-decoration:underline}::ng-deep .startpage__instr-desc p span i,::ng-deep .startpage__instr-desc p i,::ng-deep .quml-mcq p span i,::ng-deep .quml-mcq p i,::ng-deep .quml-sa p span i,::ng-deep .quml-sa p i,::ng-deep quml-sa p span i,::ng-deep quml-sa p i,::ng-deep quml-mcq-solutions p span i,::ng-deep quml-mcq-solutions p i{font-style:italic}\n"] }]
}], ctorParameters: function () { return [{ type: ViewerService }, { type: UtilService }, { type: i0.ChangeDetectorRef }, { type: i5.ErrorService }]; }, propDecorators: { sectionConfig: [{
type: Input
}], attempts: [{
type: Input
}], jumpToQuestion: [{
type: Input
}], mainProgressBar: [{
type: Input
}], sectionIndex: [{
type: Input
}], parentConfig: [{
type: Input
}], playerEvent: [{
type: Output
}], sectionEnd: [{
type: Output
}], showScoreBoard: [{
type: Output
}], myCarousel: [{
type: ViewChild,
args: ['myCarousel', { static: false }]
}], imageModal: [{
type: ViewChild,
args: ['imageModal', { static: true }]
}], questionSlide: [{
type: ViewChild,
args: ['questionSlide', { static: false }]
}], ngOnDestroy: [{
type: HostListener,
args: ['window:beforeunload']
}] } });
class MainPlayerComponent {
constructor(viewerService, utilService, transformationService) {
this.viewerService = viewerService;
this.utilService = utilService;
this.transformationService = transformationService;
this.playerEvent = new EventEmitter();
this.telemetryEvent = new EventEmitter();
this.isInitialized = false;
this.isLoading = false;
this.isSectionsAvailable = false;
this.isMultiLevelSection = false;
this.sections = [];
this.sectionIndex = 0;
this.parentConfig = {
loadScoreBoard: false,
requiresSubmit: false,
isSectionsAvailable: false,
isReplayed: false,
identifier: '',
contentName: '',
baseUrl: '',
isAvailableLocally: false,
instructions: {},
questionCount: 0,
sideMenuConfig: {
enable: true,
showShare: true,
showDownload: false,
showExit: false,
},
showFeedback: false,
showLegend: true,
warningTime: WARNING_TIME_CONFIG.DEFAULT_TIME,
showWarningTimer: WARNING_TIME_CONFIG.SHOW_TIMER
};
this.endPageReached = false;
this.isEndEventRaised = false;
this.isSummaryEventRaised = false;
this.showReplay = true;
this.mainProgressBar = [];
this.loadScoreBoard = false;
this.summary = {
correct: 0,
partial: 0,
skipped: 0,
wrong: 0
};
this.isDurationExpired = false;
this.finalScore = 0;
this.totalNoOfQuestions = 0;
this.totalVisitedQuestion = 0;
}
onTelemetryEvent(event) {
this.telemetryEvent.emit(event.detail);
}
ngOnInit() {
this.isInitialized = true;
if (this.playerConfig) {
if (typeof this.playerConfig === 'string') {
try {
this.playerConfig = JSON.parse(this.playerConfig);
}
catch (error) {
console.error('Invalid playerConfig: ', error);
}
}
if (!_.has(this.playerConfig.metadata, 'qumlVersion') && _.get(this.playerConfig.metadata, 'qumlVersion') != 1.1) {
this.playerConfig.metadata = this.transformationService.getTransformedHierarchy(this.playerConfig.metadata);
}
console.log('playerConfig::', this.playerConfig);
this.isLoading = true;
this.setConfig();
this.initializeSections();
}
}
ngOnChanges(changes) {
if (changes.playerConfig.firstChange && this.isInitialized) {
// This explicitly calling ngOnInit is for the web-component. Life cycle methods works in different order there.
this.ngOnInit();
}
}
initializeSections() {
const childMimeType = _.map(this.playerConfig.metadata.children, 'mimeType');
this.parentConfig.isSectionsAvailable = this.isSectionsAvailable = childMimeType[0] === MimeType.questionSet;
this.parentConfig.metadata = { ...this.playerConfig.metadata };
this.viewerService.sectionQuestions = [];
if (this.isSectionsAvailable) {
this.isMultiLevelSection = this.getMultilevelSection(this.playerConfig.metadata);
if (this.isMultiLevelSection) {
this.contentError = {
messageHeader: 'Unable to load content',
messageTitle: 'Multi level sections are not supported as of now'
};
}
else {
let children = this.playerConfig.metadata.children;
this.sections = _.map(children, (child) => {
let childNodes = child?.children?.map(item => item.identifier) || [];
const maxQuestions = child?.maxQuestions;
childNodes = child?.shuffle ? _.shuffle(childNodes) : childNodes;
if (maxQuestions) {
childNodes = childNodes.slice(0, maxQuestions);
}
if (this.playerConfig.metadata.timeLimits) {
child = {
...child,
timeLimits: this.playerConfig.metadata.timeLimits,
showTimer: this.playerConfig.metadata.showTimer
};
}
return {
...this.playerConfig, metadata: { ...child, childNodes },
};
});
this.setInitialScores();
this.activeSection = _.cloneDeep(this.sections[0]);
this.isLoading = false;
}
}
else {
let childNodes = [];
if (this.playerConfig.metadata?.children?.length) {
childNodes = this.playerConfig.metadata.children.map(item => item.identifier);
}
else {
childNodes = this.playerConfig.metadata.childNodes;
}
childNodes = this.playerConfig.metadata?.shuffle ? _.shuffle(childNodes) : childNodes;
const maxQuestions = this.playerConfig.metadata.maxQuestions;
/* istanbul ignore else */
if (maxQuestions) {
childNodes = childNodes.slice(0, maxQuestions);
}
childNodes.forEach((element, index) => {
this.totalNoOfQuestions++;
this.mainProgressBar.push({
index: (index + 1), class: 'unattempted', value: undefined,
score: 0,
});
});
this.playerConfig.metadata.childNodes = childNodes;
if (!this.playerConfig.metadata?.shuffle) {
if (this.playerConfig.config?.progressBar?.length) {
this.mainProgressBar = _.cloneDeep(this.playerConfig.config.progressBar);
}
if (this.playerConfig.config?.questions?.length) {
const questionsObj = this.playerConfig.config.questions.find(item => item.id === this.playerConfig.metadata.identifier);
if (questionsObj?.questions) {
this.viewerService.updateSectionQuestions(this.playerConfig.metadata.identifier, questionsObj.questions);
}
}
}
this.activeSection = _.cloneDeep(this.playerConfig);
this.isLoading = false;
this.parentConfig.questionCount = this.totalNoOfQuestions;
}
}
setConfig() {
this.parentConfig.contentName = this.playerConfig.metadata?.name;
this.parentConfig.identifier = this.playerConfig.metadata?.identifier;
this.parentConfig.requiresSubmit = this.playerConfig.metadata?.requiresSubmit?.toLowerCase() !== 'no';
this.parentConfig.instructions = this.playerConfig.metadata?.instructions;
this.parentConfig.showLegend = this.playerConfig.config?.showLegend !== undefined ? this.playerConfig.config.showLegend : true;
this.nextContent = this.playerConfig.config?.nextContent;
this.showEndPage = this.playerConfig.metadata?.showEndPage?.toLowerCase() !== 'no';
this.parentConfig.showFeedback = this.showFeedBack = this.playerConfig.metadata?.showFeedback;
this.parentConfig.sideMenuConfig = { ...this.parentConfig.sideMenuConfig, ...this.playerConfig.config.sideMenu };
this.parentConfig.warningTime = _.get(this.playerConfig, 'config.warningTime', this.parentConfig.warningTime);
this.parentConfig.showWarningTimer = _.get(this.playerConfig, 'config.showWarningTimer', this.parentConfig.showWarningTimer);
if (this.playerConfig?.context?.userData) {
const firstName = this.playerConfig.context.userData?.firstName ?? '';
const lastName = this.playerConfig.context.userData?.lastName ?? '';
this.userName = firstName + ' ' + lastName;
}
if (this.playerConfig.metadata.isAvailableLocally && this.playerConfig.metadata.basePath) {
this.parentConfig.baseUrl = this.playerConfig.metadata.basePath;
this.parentConfig.isAvailableLocally = true;
}
this.attempts = {
max: this.playerConfig.metadata?.maxAttempts,
current: this.playerConfig.metadata?.currentAttempt ? this.playerConfig.metadata.currentAttempt + 1 : 1
};
this.totalScore = this.playerConfig.metadata.outcomeDeclaration.maxScore.defaultValue;
this.showReplay = this.attempts?.max && this.attempts?.current >= this.attempts.max ? false : true;
if (typeof this.playerConfig.metadata?.timeLimits === 'string') {
this.playerConfig.metadata.timeLimits = JSON.parse(this.playerConfig.metadata.timeLimits);
}
this.initialTime = new Date().getTime();
this.emitMaxAttemptEvents();
}
getMultilevelSection(obj) {
let isMultiLevel;
obj.children.forEach(item => {
if (item.children && !isMultiLevel) {
isMultiLevel = this.hasChildren(item.children);
}
});
return isMultiLevel;
}
hasChildren(arr) {
return arr.some(item => item.children);
}
emitMaxAttemptEvents() {
if ((this.playerConfig.metadata?.maxAttempts - 1) === this.playerConfig.metadata?.currentAttempt) {
this.playerEvent.emit(this.viewerService.generateMaxAttemptEvents(this.attempts?.current, false, true));
}
else if (this.playerConfig.metadata?.currentAttempt >= this.playerConfig.metadata?.maxAttempts) {
this.playerEvent.emit(this.viewerService.generateMaxAttemptEvents(this.attempts?.current, true, false));
}
}
getActiveSectionIndex() {
return this.sections.findIndex(sec => sec.metadata?.identifier === this.activeSection.metadata?.identifier);
}
onShowScoreBoard(event) {
/* istanbul ignore else */
if (this.parentConfig.isSectionsAvailable) {
const activeSectionIndex = this.getActiveSectionIndex();
this.updateSectionScore(activeSectionIndex);
}
this.getSummaryObject();
this.loadScoreBoard = true;
this.viewerService.pauseVideo();
}
onSectionEnd(event) {
if (event.isDurationEnded) {
this.isDurationExpired = true;
}
if (this.parentConfig.isSectionsAvailable) {
const activeSectionIndex = this.getActiveSectionIndex();
this.updateSectionScore(activeSectionIndex);
this.setNextSection(event, activeSectionIndex);
}
else {
this.prepareEnd(event);
}
}
onPlayerEvent(event) {
this.playerEvent.emit(event);
}
getSummaryObject() {
const progressBar = this.isSectionsAvailable ? _.flattenDeep(this.mainProgressBar.map(item => item.children)) : this.mainProgressBar;
const classObj = _.groupBy(progressBar, 'class');
this.summary = {
skipped: _.get(classObj, 'skipped.length') || 0,
correct: _.get(classObj, 'correct.length') || 0,
wrong: _.get(classObj, 'wrong.length') || 0,
partial: _.get(classObj, 'partial.length') || 0
};
this.totalVisitedQuestion = this.summary.correct + this.summary.wrong + this.summary.partial + this.summary.skipped;
this.viewerService.totalNumberOfQuestions = this.totalNoOfQuestions;
}
updateSectionScore(activeSectionIndex) {
this.mainProgressBar[activeSectionIndex].score = this.mainProgressBar[activeSectionIndex].children
.reduce((accumulator, currentValue) => accumulator + currentValue.score, 0);
}
setNextSection(event, activeSectionIndex) {
this.summary = this.utilService.sumObjectsByKey(this.summary, event.summary);
const isSectionFullyAttempted = event.summary.skipped === 0 &&
(event.summary?.correct + event.summary?.wrong) === this.mainProgressBar[activeSectionIndex]?.children?.length;
const isSectionPartiallyAttempted = event.summary.skipped > 0;
if (event.isDurationEnded) {
this.isDurationExpired = true;
this.prepareEnd(event);
return;
}
let nextSectionIndex = activeSectionIndex + 1;
/* istanbul ignore else */
if (event.jumpToSection) {
const sectionIndex = this.sections.findIndex(sec => sec.metadata?.identifier === event.jumpToSection);
nextSectionIndex = sectionIndex > -1 ? sectionIndex : nextSectionIndex;
}
this.sectionIndex = _.cloneDeep(nextSectionIndex);
this.mainProgressBar.forEach((item, index) => {
item.isActive = index === nextSectionIndex;
if (index === activeSectionIndex) {
if (isSectionFullyAttempted) {
item.class = 'attempted';
}
else if (isSectionPartiallyAttempted) {
item.class = 'partial';
}
}
});
if (nextSectionIndex < this.sections.length) {
this.activeSection = _.cloneDeep(this.sections[nextSectionIndex]);
}
else {
this.prepareEnd(event);
}
}
prepareEnd(event) {
this.viewerService.pauseVideo();
this.calculateScore();
this.setDurationSpent();
this.getSummaryObject();
if (this.parentConfig.requiresSubmit && !this.isDurationExpired) {
this.loadScoreBoard = true;
}
else {
this.endPageReached = true;
this.loadScoreBoard = false;
this.viewerService.raiseSummaryEvent(this.totalVisitedQuestion, this.endPageReached, this.finalScore, this.summary);
this.raiseEndEvent(this.totalVisitedQuestion, this.endPageReached, this.finalScore);
this.isSummaryEventRaised = true;
this.isEndEventRaised = true;
}
}
replayContent() {
this.parentConfig.isReplayed = true;
this.loadScoreBoard = false;
this.endPageReached = false;
this.isDurationExpired = false;
this.isEndEventRaised = false;
this.attempts.current = this.attempts.current + 1;
this.showReplay = this.attempts?.max && this.attempts?.current >= this.attempts.max ? false : true;
this.totalNoOfQuestions = 0;
this.totalVisitedQuestion = 0;
this.mainProgressBar = [];
this.jumpToQuestion = undefined;
this.summary = {
correct: 0,
partial: 0,
skipped: 0,
wrong: 0
};
this.sections = [];
this.initialTime = new Date().getTime();
this.initializeSections();
this.endPageReached = false;
this.loadScoreBoard = false;
this.activeSection = this.isSectionsAvailable ? _.cloneDeep(this.sections[0]) : this.playerConfig;
/* istanbul ignore else */
if (this.attempts?.max === this.attempts?.current) {
this.playerEvent.emit(this.viewerService.generateMaxAttemptEvents(_.get(this.attempts, 'current'), false, true));
}
this.viewerService.raiseHeartBeatEvent(eventName.replayClicked, TelemetryType.interact, pageId.endPage);
setTimeout(() => {
this.parentConfig.isReplayed = false;
const element = document.querySelector('li.info-page');
/* istanbul ignore else */
if (element) {
element.scrollIntoView({ behavior: 'smooth' });
}
}, 1000);
}
setInitialScores(activeSectionIndex = 0) {
const alphabets = 'abcdefghijklmnopqrstuvwxyz'.split('');
this.sections.forEach((section, i) => {
this.mainProgressBar.push({
index: alphabets[i].toLocaleUpperCase(), class: 'unattempted', value: undefined,
score: 0,
isActive: i === activeSectionIndex,
identifier: section.metadata?.identifier
});
const children = [];
section.metadata.childNodes.forEach((child, index) => {
children.push({
index: (index + 1), class: 'unattempted', value: undefined,
score: 0,
});
this.totalNoOfQuestions++;
});
this.mainProgressBar[this.mainProgressBar.length - 1] = {
..._.last(this.mainProgressBar), children
};
});
this.parentConfig.questionCount = this.totalNoOfQuestions;
}
calculateScore() {
this.finalScore = this.mainProgressBar.reduce((accumulator, currentValue) => accumulator + currentValue.score, 0);
this.generateOutComeLabel();
return this.finalScore;
}
exitContent(event) {
this.calculateScore();
/* istanbul ignore else */
if (event?.type === 'EXIT') {
this.viewerService.raiseHeartBeatEvent(eventName.endPageExitClicked, TelemetryType.interact, pageId.endPage);
this.getSummaryObject();
this.viewerService.raiseSummaryEvent(this.totalVisitedQuestion, this.endPageReached, this.finalScore, this.summary);
this.isSummaryEventRaised = true;
this.raiseEndEvent(this.totalVisitedQuestion, this.endPageReached, this.finalScore);
}
}
raiseEndEvent(currentQuestionIndex, endPageSeen, score) {
if (this.isEndEventRaised) {
return;
}
this.isEndEventRaised = true;
this.viewerService.metaData.progressBar = this.mainProgressBar;
this.viewerService.raiseEndEvent(currentQuestionIndex, endPageSeen, score);
/* istanbul ignore else */
if (_.get(this.attempts, 'current') >= _.get(this.attempts, 'max')) {
this.playerEvent.emit(this.viewerService.generateMaxAttemptEvents(_.get(this.attempts, 'current'), true, false));
}
}
setDurationSpent() {
/* istanbul ignore else */
if (this.playerConfig.metadata?.summaryType !== 'Score') {
this.viewerService.metaData.duration = new Date().getTime() - this.initialTime;
this.durationSpent = this.utilService.getTimeSpentText(this.initialTime);
}
}
onScoreBoardLoaded(event) {
if (event?.scoreBoardLoaded) {
this.calculateScore();
}
}
onScoreBoardSubmitted() {
this.endPageReached = true;
this.getSummaryObject();
this.setDurationSpent();
this.viewerService.raiseHeartBeatEvent(eventName.scoreBoardSubmitClicked, TelemetryType.interact, pageId.submitPage);
this.viewerService.raiseSummaryEvent(this.totalVisitedQuestion, this.endPageReached, this.finalScore, this.summary);
this.raiseEndEvent(this.totalVisitedQuestion, this.endPageReached, this.finalScore);
this.loadScoreBoard = false;
this.isSummaryEventRaised = true;
}
generateOutComeLabel() {
this.outcomeLabel = this.finalScore.toString();
switch (_.get(this.playerConfig, 'metadata.summaryType')) {
case 'Complete': {
this.outcomeLabel = this.totalScore ? `${this.finalScore} / ${this.totalScore}` : this.outcomeLabel;
break;
}
case 'Duration': {
this.outcomeLabel = '';
break;
}
}
}
goToQuestion(event) {
/* istanbul ignore else */
if (this.parentConfig.isSectionsAvailable && event.identifier) {
const sectionIndex = this.sections.findIndex(sec => sec.metadata?.identifier === event.identifier);
this.activeSection = _.cloneDeep(this.sections[sectionIndex]);
this.mainProgressBar.forEach((item, index) => {
item.isActive = index === sectionIndex;
});
}
this.jumpToQuestion = event;
this.loadScoreBoard = false;
}
playNextContent(event) {
this.viewerService.raiseHeartBeatEvent(event?.type, TelemetryType.interact, pageId.endPage, event?.identifier);
}
toggleScreenRotate(event) {
this.viewerService.raiseHeartBeatEvent(eventName.deviceRotationClicked, TelemetryType.interact, this.sectionPlayer.myCarousel.getCurrentSlideIndex() + 1);
}
sideBarEvents(event) {
/* istanbul ignore else */
if (event.type === 'OPEN_MENU' || event.type === 'CLOSE_MENU') {
this.handleSideBarAccessibility(event);
}
this.viewerService.raiseHeartBeatEvent(event.type, TelemetryType.interact, this.sectionPlayer.myCarousel.getCurrentSlideIndex() + 1);
}
handleSideBarAccessibility(event) {
const navBlock = document.querySelector('.navBlock');
const overlayInput = document.querySelector('#overlay-input');
const overlayButton = document.querySelector('#overlay-button');
const sideBarList = document.querySelector('#sidebar-list');
if (event.type === 'OPEN_MENU') {
const isMobile = this.playerConfig.config?.sideMenu?.showExit;
this.disabledHandle = isMobile ? maintain.hidden({ filter: [sideBarList, overlayButton, overlayInput] }) : maintain.tabFocus({ context: navBlock });
this.subscription = fromEvent(document, 'keydown').subscribe((e) => {
console.log("===========", e.key);
/* istanbul ignore else */
if (e['key'] === 'Escape') {
const inputChecked = document.getElementById('overlay-input');
inputChecked.checked = false;
document.getElementById('playerSideMenu').style.visibility = 'hidden';
document.querySelector('.navBlock').style.marginLeft = '-100%';
this.viewerService.raiseHeartBeatEvent('CLOSE_MENU', TelemetryType.interact, this.sectionPlayer.myCarousel.getCurrentSlideIndex() + 1);
this.disabledHandle.disengage();
this.subscription.unsubscribe();
this.disabledHandle = null;
this.subscription = null;
}
});
}
else if (event.type === 'CLOSE_MENU' && this.disabledHandle) {
this.disabledHandle.disengage();
this.disabledHandle = null;
/* istanbul ignore else */
if (this.subscription) {
this.subscription.unsubscribe();
this.subscription = null;
}
}
}
ngOnDestroy() {
this.calculateScore();
this.getSummaryObject();
/* istanbul ignore else */
if (this.isSummaryEventRaised === false) {
this.viewerService.raiseSummaryEvent(this.totalVisitedQuestion, this.endPageReached, this.finalScore, this.summary);
}
/* istanbul ignore else */
if (this.subscription) {
this.subscription.unsubscribe();
}
this.raiseEndEvent(this.totalVisitedQuestion, this.endPageReached, this.finalScore);
}
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MainPlayerComponent, deps: [{ token: ViewerService }, { token: UtilService }, { token: TransformationService }], target: i0.ɵɵFactoryTarget.Component }); }
/** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MainPlayerComponent, selector: "quml-main-player", inputs: { playerConfig: "playerConfig" }, outputs: { playerEvent: "playerEvent", telemetryEvent: "telemetryEvent" }, host: { listeners: { "document:TelemetryEvent": "onTelemetryEvent($event)", "window:beforeunload": "ngOnDestroy()" } }, viewQueries: [{ propertyName: "sectionPlayer", first: true, predicate: SectionPlayerComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<!-- Need to show loading here -->\n<sb-player-start-page *ngIf=\"isLoading\" [title]=\"parentConfig?.contentName\"></sb-player-start-page>\n\n<sb-player-side-menu-icon *ngIf=\"parentConfig?.sideMenuConfig?.enable && !endPageReached\" (sidebarMenuEvent)=\"sideBarEvents($event)\"></sb-player-side-menu-icon>\n<quml-header *ngIf=\"loadScoreBoard && parentConfig?.requiresSubmit && !endPageReached\" [showLegend]=\"parentConfig?.showLegend\"\n [disablePreviousNavigation]=\"true\" [disableNext]=\"true\" [attempts]=\"attempts\" [loadScoreBoard]=\"true\"\n [showDeviceOrientation]=\"playerConfig?.config?.showDeviceOrientation\" (toggleScreenRotate)=\"toggleScreenRotate()\"></quml-header>\n<sb-player-sidebar [title]=\"parentConfig?.contentName\" [config]=\"parentConfig?.sideMenuConfig\" (sidebarEvent)=\"sideBarEvents($event)\">\n</sb-player-sidebar>\n\n<div *ngIf=\"!isLoading\" class=\"main-container\">\n <div class=\"main-container\" [hidden]=\"!activeSection || loadScoreBoard || endPageReached\">\n <quml-section-player *ngIf=\"activeSection\" [sectionConfig]=\"activeSection\" (sectionEnd)=\"onSectionEnd($event)\" [attempts]=\"attempts\"\n [mainProgressBar]=\"mainProgressBar\" [parentConfig]=\"parentConfig\" [sectionIndex]=\"sectionIndex\"\n [jumpToQuestion]=\"jumpToQuestion\" (showScoreBoard)=\"onShowScoreBoard($event)\"\n (playerEvent)=\"onPlayerEvent($event)\">\n </quml-section-player>\n </div>\n\n <!-- Show scoreboard -->\n <quml-scoreboard *ngIf=\"loadScoreBoard && parentConfig?.requiresSubmit && !endPageReached\"\n (scoreBoardLoaded)=\"onScoreBoardLoaded($event)\" (submitClicked)=\"onScoreBoardSubmitted()\"\n [contentName]=\"parentConfig.contentName\" [scores]=\"mainProgressBar\" [totalNoOfQuestions]=\"totalNoOfQuestions\"\n [showFeedBack]=\"showFeedBack\" (emitQuestionNo)=\"goToQuestion($event)\"\n [isSections]=\"parentConfig?.isSectionsAvailable\" [summary]=\"summary\">\n </quml-scoreboard>\n\n <!-- Show player end page -->\n <div class=\"endPage-container\" *ngIf=\"endPageReached\" [ngClass]=\"endPageReached ? 'endPage-container-height': ''\">\n <sb-player-end-page *ngIf=\"endPageReached && showEndPage\" [contentName]=\"parentConfig.contentName\"\n [outcome]=\"outcomeLabel\" [outcomeLabel]=\"'Score: '\" [userName]=\"userName\" [timeSpentLabel]=\"durationSpent\"\n (replayContent)=\"replayContent()\" (exitContent)=\"exitContent($event)\"\n [showExit]=\"parentConfig?.sideMenuConfig.showExit\" [showReplay]=\"showReplay\" [nextContent]=\"nextContent\"\n (playNextContent)=\"playNextContent($event)\">\n\n <span class=\"sb-color-primary mt-8 fnormal font-weight-bold d-block\"\n *ngIf=\"attempts?.max && attempts?.current && attempts.max !== attempts.current\">Attempt no\n {{attempts.current}}/{{attempts.max}}\n </span>\n\n <span class=\"attempts sb-color-primary mt-8 fnormal font-weight-bold d-block\"\n *ngIf=\"attempts?.max === attempts?.current\">{{attempts.current}}/{{attempts.max}} attempts completed\n </span>\n </sb-player-end-page>\n </div>\n\n\n <!-- Show content error -->\n <div *ngIf=\"isMultiLevelSection\">\n <sb-player-contenterror [errorMsg]=\"contentError\"></sb-player-contenterror>\n </div>\n</div>", styles: ["::ng-deep :root{--quml-main-bg: #fff}::ng-deep #overlay-button{top:.6rem!important}.main-container{width:100%;height:100%;background:var(--quml-main-bg)}.endPage-container-height{height:100%}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.StartPageComponent, selector: "sb-player-start-page", inputs: ["title", "progress"] }, { kind: "component", type: i5.EndPageComponent, selector: "sb-player-end-page", inputs: ["showExit", "showReplay", "contentName", "outcome", "outcomeLabel", "userName", "timeSpentLabel", "nextContent"], outputs: ["replayContent", "exitContent", "playNextContent"] }, { kind: "component", type: i5.SidebarComponent, selector: "sb-player-sidebar", inputs: ["title", "config"], outputs: ["sidebarEvent", "toggleMenu"] }, { kind: "component", type: i5.SideMenuIconComponent, selector: "sb-player-side-menu-icon", outputs: ["sidebarMenuEvent"] }, { kind: "component", type: i5.ContenterrorComponent, selector: "sb-player-contenterror", inputs: ["errorMsg"] }, { kind: "component", type: HeaderComponent, selector: "quml-header", inputs: ["questions", "duration", "warningTime", "showWarningTimer", "disablePreviousNavigation", "showTimer", "totalNoOfQuestions", "currentSlideIndex", "active", "initializeTimer", "endPageReached", "loadScoreBoard", "replayed", "currentSolutions", "showFeedBack", "disableNext", "startPageInstruction", "showStartPage", "attempts", "showDeviceOrientation", "showLegend"], outputs: ["nextSlideClicked", "prevSlideClicked", "durationEnds", "showSolution", "toggleScreenRotate"] }, { kind: "component", type: ScoreboardComponent, selector: "quml-scoreboard", inputs: ["scores", "totalNoOfQuestions", "contentName", "showFeedBack", "isSections", "summary"], outputs: ["submitClicked", "emitQuestionNo", "scoreBoardLoaded"] }, { kind: "component", type: SectionPlayerComponent, selector: "quml-section-player", inputs: ["sectionConfig", "attempts", "jumpToQuestion", "mainProgressBar", "sectionIndex", "parentConfig"], outputs: ["playerEvent", "sectionEnd", "showScoreBoard"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MainPlayerComponent, decorators: [{
type: Component,
args: [{ selector: 'quml-main-player', template: "<!-- Need to show loading here -->\n<sb-player-start-page *ngIf=\"isLoading\" [title]=\"parentConfig?.contentName\"></sb-player-start-page>\n\n<sb-player-side-menu-icon *ngIf=\"parentConfig?.sideMenuConfig?.enable && !endPageReached\" (sidebarMenuEvent)=\"sideBarEvents($event)\"></sb-player-side-menu-icon>\n<quml-header *ngIf=\"loadScoreBoard && parentConfig?.requiresSubmit && !endPageReached\" [showLegend]=\"parentConfig?.showLegend\"\n [disablePreviousNavigation]=\"true\" [disableNext]=\"true\" [attempts]=\"attempts\" [loadScoreBoard]=\"true\"\n [showDeviceOrientation]=\"playerConfig?.config?.showDeviceOrientation\" (toggleScreenRotate)=\"toggleScreenRotate()\"></quml-header>\n<sb-player-sidebar [title]=\"parentConfig?.contentName\" [config]=\"parentConfig?.sideMenuConfig\" (sidebarEvent)=\"sideBarEvents($event)\">\n</sb-player-sidebar>\n\n<div *ngIf=\"!isLoading\" class=\"main-container\">\n <div class=\"main-container\" [hidden]=\"!activeSection || loadScoreBoard || endPageReached\">\n <quml-section-player *ngIf=\"activeSection\" [sectionConfig]=\"activeSection\" (sectionEnd)=\"onSectionEnd($event)\" [attempts]=\"attempts\"\n [mainProgressBar]=\"mainProgressBar\" [parentConfig]=\"parentConfig\" [sectionIndex]=\"sectionIndex\"\n [jumpToQuestion]=\"jumpToQuestion\" (showScoreBoard)=\"onShowScoreBoard($event)\"\n (playerEvent)=\"onPlayerEvent($event)\">\n </quml-section-player>\n </div>\n\n <!-- Show scoreboard -->\n <quml-scoreboard *ngIf=\"loadScoreBoard && parentConfig?.requiresSubmit && !endPageReached\"\n (scoreBoardLoaded)=\"onScoreBoardLoaded($event)\" (submitClicked)=\"onScoreBoardSubmitted()\"\n [contentName]=\"parentConfig.contentName\" [scores]=\"mainProgressBar\" [totalNoOfQuestions]=\"totalNoOfQuestions\"\n [showFeedBack]=\"showFeedBack\" (emitQuestionNo)=\"goToQuestion($event)\"\n [isSections]=\"parentConfig?.isSectionsAvailable\" [summary]=\"summary\">\n </quml-scoreboard>\n\n <!-- Show player end page -->\n <div class=\"endPage-container\" *ngIf=\"endPageReached\" [ngClass]=\"endPageReached ? 'endPage-container-height': ''\">\n <sb-player-end-page *ngIf=\"endPageReached && showEndPage\" [contentName]=\"parentConfig.contentName\"\n [outcome]=\"outcomeLabel\" [outcomeLabel]=\"'Score: '\" [userName]=\"userName\" [timeSpentLabel]=\"durationSpent\"\n (replayContent)=\"replayContent()\" (exitContent)=\"exitContent($event)\"\n [showExit]=\"parentConfig?.sideMenuConfig.showExit\" [showReplay]=\"showReplay\" [nextContent]=\"nextContent\"\n (playNextContent)=\"playNextContent($event)\">\n\n <span class=\"sb-color-primary mt-8 fnormal font-weight-bold d-block\"\n *ngIf=\"attempts?.max && attempts?.current && attempts.max !== attempts.current\">Attempt no\n {{attempts.current}}/{{attempts.max}}\n </span>\n\n <span class=\"attempts sb-color-primary mt-8 fnormal font-weight-bold d-block\"\n *ngIf=\"attempts?.max === attempts?.current\">{{attempts.current}}/{{attempts.max}} attempts completed\n </span>\n </sb-player-end-page>\n </div>\n\n\n <!-- Show content error -->\n <div *ngIf=\"isMultiLevelSection\">\n <sb-player-contenterror [errorMsg]=\"contentError\"></sb-player-contenterror>\n </div>\n</div>", styles: ["::ng-deep :root{--quml-main-bg: #fff}::ng-deep #overlay-button{top:.6rem!important}.main-container{width:100%;height:100%;background:var(--quml-main-bg)}.endPage-container-height{height:100%}\n"] }]
}], ctorParameters: function () { return [{ type: ViewerService }, { type: UtilService }, { type: TransformationService }]; }, propDecorators: { playerConfig: [{
type: Input
}], playerEvent: [{
type: Output
}], telemetryEvent: [{
type: Output
}], sectionPlayer: [{
type: ViewChild,
args: [SectionPlayerComponent]
}], onTelemetryEvent: [{
type: HostListener,
args: ['document:TelemetryEvent', ['$event']]
}], ngOnDestroy: [{
type: HostListener,
args: ['window:beforeunload']
}] } });
class QumlLibraryModule {
/** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: QumlLibraryModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
/** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: QumlLibraryModule, declarations: [QumlLibraryComponent,
McqComponent,
HeaderComponent,
SaComponent,
McqQuestionComponent,
McqOptionComponent,
QumlPopupComponent,
McqImageOptionComponent,
ZoomInComponent,
StarComponent,
PreviousComponent,
NextComponent,
PreviousActiveComponent,
BookmarkComponent,
HintComponent,
AnsComponent,
ShareComponent,
CorrectComponent,
ScoreboardComponent,
StartpageComponent,
TimerComponent,
ContentComponent,
StartpagestariconComponent,
NextActiveComponent,
AlertComponent,
CloseComponent,
McqSolutionsComponent,
DurationtimerComponent,
AudioComponent,
WrongComponent,
MenuComponent,
SafeHtmlPipe,
MainPlayerComponent,
SectionPlayerComponent,
ProgressIndicatorsComponent], imports: [CommonModule,
CarouselModule,
SunbirdPlayerSdkModule], exports: [MainPlayerComponent] }); }
/** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: QumlLibraryModule, providers: [
QumlLibraryService,
{ provide: PLAYER_CONFIG, useValue: { contentCompatibilityLevel: 6 } }
], imports: [CommonModule,
CarouselModule,
SunbirdPlayerSdkModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: QumlLibraryModule, decorators: [{
type: NgModule,
args: [{
declarations: [
QumlLibraryComponent,
McqComponent,
HeaderComponent,
SaComponent,
McqQuestionComponent,
McqOptionComponent,
QumlPopupComponent,
McqImageOptionComponent,
ZoomInComponent,
StarComponent,
PreviousComponent,
NextComponent,
PreviousActiveComponent,
BookmarkComponent,
HintComponent,
AnsComponent,
ShareComponent,
CorrectComponent,
ScoreboardComponent,
StartpageComponent,
TimerComponent,
ContentComponent,
StartpagestariconComponent,
NextActiveComponent,
AlertComponent,
CloseComponent,
McqSolutionsComponent,
DurationtimerComponent,
AudioComponent,
WrongComponent,
MenuComponent,
SafeHtmlPipe,
MainPlayerComponent,
SectionPlayerComponent,
ProgressIndicatorsComponent,
],
imports: [
CommonModule,
CarouselModule,
SunbirdPlayerSdkModule
],
providers: [
QumlLibraryService,
{ provide: PLAYER_CONFIG, useValue: { contentCompatibilityLevel: 6 } }
],
exports: [MainPlayerComponent]
}]
}] });
/*
* Public API Surface of quml-library
*/
/**
* Generated bundle index. Do not edit.
*/
export { MainPlayerComponent, QuestionCursor, QumlLibraryComponent, QumlLibraryModule, QumlLibraryService };
//# sourceMappingURL=tekdi-sunbird-quml-player.mjs.map