pedago-angular-quiz
Version:
A pedago quiz component for Angular projects
333 lines (323 loc) • 16 kB
JavaScript
import * as i0 from '@angular/core';
import { Pipe, EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
import * as i3 from 'survey-angular-ui';
import { SurveyModule } from 'survey-angular-ui';
import { Model } from 'survey-core';
import { JsonPipe } from '@angular/common';
class ToSurveyJsJsonPipe {
transform(questions, ...args) {
if (!questions || !Array.isArray(questions)) {
return null;
}
const quiz = {
title: args[0]?.title ?? 'Demo quiz',
showTitle: args[0]?.showTitle ?? false,
startSurveyText: 'Start Quiz',
showProgressBar: 'top',
progressBarShowPageNumbers: true,
showPreviewBeforeComplete: 'showAllQuestions',
firstPageIsStarted: true,
showQuestionNumbers: true,
goNextPageAutomatic: false,
allowCompleteSurveyAutomatic: false,
maxTimeToFinish: 60,
completeText: {
fr: 'Send'
},
// widthMode: 'static',
// width: '1000px',
// showTimerPanel: 'bottom',
pages: [
{
"name": "page1",
"elements": [
{
"type": "html",
"html": "You are about to start a quiz. Click <b>Start Quiz</b> to begin."
},
]
},
]
};
const getQuestionType = (question) => {
if (question.type) {
return question.type;
}
if (question.options.filter((option) => option.is_correct).length > 1) {
return 'checkbox';
}
else {
return 'radiogroup';
}
};
questions.forEach((question, index) => {
const page = {
name: `page${index + 1}`,
navigationTitle: question.skill,
description: question.skill,
maxTimeToFinish: question.maxTimeToFinish ?? 10,
elements: [
{
type: getQuestionType(question),
name: question.name ?? `questionName${index + 1}`,
title: question.question,
choices: [],
correctAnswer: []
}
]
};
question.options.forEach((option) => {
// @ts-ignore
page.elements[0].choices.push(option.option);
if (option.is_correct) {
// @ts-ignore
page.elements[0].correctAnswer.push(option.option);
}
});
// @ts-ignore
quiz.pages.push(page);
});
return quiz;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToSurveyJsJsonPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ToSurveyJsJsonPipe, name: "toSurveyJsJson" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ToSurveyJsJsonPipe, decorators: [{
type: Pipe,
args: [{
name: 'toSurveyJsJson'
}]
}] });
class SurveyJsSenderToResponsePipe {
constructor() { }
getCorrectAnswers(sender, questionName) {
return sender.getQuizQuestions().find((question) => question.jsonObj.name === questionName)?.correctAnswer;
}
transform(sender) {
const responses = [];
for (const [questionName, answer] of Object.entries(sender.data)) {
const responseItem = {
id: questionName,
answer: answer,
correctedAnswer: this.getCorrectAnswers(sender, questionName),
is_correct: answer === this.getCorrectAnswers(sender, questionName),
};
if (Array.isArray(this.getCorrectAnswers(sender, questionName))) {
responseItem['is_partially_correct'] = this.getCorrectAnswers(sender, questionName)?.some(item => answer.includes(item));
}
responses.push(responseItem);
}
return responses;
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SurveyJsSenderToResponsePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SurveyJsSenderToResponsePipe, name: "surveyJsSenderToResponse" }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SurveyJsSenderToResponsePipe, decorators: [{
type: Pipe,
args: [{
name: 'surveyJsSenderToResponse'
}]
}], ctorParameters: function () { return []; } });
class Result {
constructor(response, client, userId) {
this.response = response;
if (client) {
this.client = client;
}
if (userId) {
this.userId = userId;
}
}
}
const themeJson = (theme) => ({
"cssVariables": {
"--sjs-general-backcolor": "rgba(255, 255, 255, 1)",
"--sjs-general-backcolor-dark": "rgba(248, 248, 248, 1)",
"--sjs-general-backcolor-dim": theme?.secondaryColor ?? "#E2EBF6",
"--sjs-general-backcolor-dim-light": "rgba(249, 249, 249, 1)",
"--sjs-general-backcolor-dim-dark": "rgba(243, 243, 243, 1)",
"--sjs-general-forecolor": "rgba(0, 0, 0, 0.91)",
"--sjs-general-forecolor-light": "rgba(0, 0, 0, 0.45)",
"--sjs-general-dim-forecolor": "rgba(0, 0, 0, 0.91)",
"--sjs-general-dim-forecolor-light": "rgba(0, 0, 0, 0.45)",
"--sjs-primary-backcolor": theme?.primaryColor ?? "#2f5abc",
"--sjs-primary-backcolor-light": "rgba(47, 90, 188, 0.1)",
"--sjs-primary-backcolor-dark": "rgba(43, 83, 173, 1)",
"--sjs-primary-forecolor": "rgba(255, 255, 255, 1)",
"--sjs-primary-forecolor-light": "rgba(255, 255, 255, 0.25)",
"--sjs-base-unit": "8px",
"--sjs-corner-radius": "4px",
"--sjs-secondary-backcolor": "rgba(255, 152, 20, 1)",
"--sjs-secondary-backcolor-light": "rgba(255, 152, 20, 0.1)",
"--sjs-secondary-backcolor-semi-light": "rgba(255, 152, 20, 0.25)",
"--sjs-secondary-forecolor": "rgba(255, 255, 255, 1)",
"--sjs-secondary-forecolor-light": "rgba(255, 255, 255, 0.25)",
"--sjs-shadow-small": "0px 1px 2px 0px rgba(0, 0, 0, 0.15)",
"--sjs-shadow-medium": "0px 2px 6px 0px rgba(0, 0, 0, 0.1)",
"--sjs-shadow-large": "0px 8px 16px 0px rgba(0, 0, 0, 0.1)",
"--sjs-shadow-inner": "inset 0px 1px 2px 0px rgba(0, 0, 0, 0.15)",
"--sjs-shadow-small-reset": "0px 0px 0px 0px rgba(0, 0, 0, 0.03)",
"--sjs-shadow-inner-reset": "inset 0px 0px 0px 0px rgba(0, 0, 0, 0.03)",
"--sjs-border-light": "rgba(0, 0, 0, 0.09)",
"--sjs-border-default": "rgba(0, 0, 0, 0.16)",
"--sjs-border-inside": "rgba(0, 0, 0, 0.16)",
"--sjs-special-red": "rgba(229, 10, 62, 1)",
"--sjs-special-red-light": "rgba(229, 10, 62, 0.1)",
"--sjs-special-red-forecolor": "rgba(255, 255, 255, 1)",
"--sjs-special-green": "rgba(25, 179, 148, 1)",
"--sjs-special-green-light": "rgba(25, 179, 148, 0.1)",
"--sjs-special-green-forecolor": "rgba(255, 255, 255, 1)",
"--sjs-special-blue": "rgba(67, 127, 217, 1)",
"--sjs-special-blue-light": "rgba(67, 127, 217, 0.1)",
"--sjs-special-blue-forecolor": "rgba(255, 255, 255, 1)",
"--sjs-special-yellow": "rgba(255, 152, 20, 1)",
"--sjs-special-yellow-light": "rgba(255, 152, 20, 0.1)",
"--sjs-special-yellow-forecolor": "rgba(255, 255, 255, 1)",
"--sjs-article-font-xx-large-textDecoration": "none",
"--sjs-article-font-xx-large-fontWeight": "700",
"--sjs-article-font-xx-large-fontStyle": "normal",
"--sjs-article-font-xx-large-fontStretch": "normal",
"--sjs-article-font-xx-large-letterSpacing": "0",
"--sjs-article-font-xx-large-lineHeight": "64px",
"--sjs-article-font-xx-large-paragraphIndent": "0px",
"--sjs-article-font-xx-large-textCase": "none",
"--sjs-article-font-x-large-textDecoration": "none",
"--sjs-article-font-x-large-fontWeight": "700",
"--sjs-article-font-x-large-fontStyle": "normal",
"--sjs-article-font-x-large-fontStretch": "normal",
"--sjs-article-font-x-large-letterSpacing": "0",
"--sjs-article-font-x-large-lineHeight": "56px",
"--sjs-article-font-x-large-paragraphIndent": "0px",
"--sjs-article-font-x-large-textCase": "none",
"--sjs-article-font-large-textDecoration": "none",
"--sjs-article-font-large-fontWeight": "700",
"--sjs-article-font-large-fontStyle": "normal",
"--sjs-article-font-large-fontStretch": "normal",
"--sjs-article-font-large-letterSpacing": "0",
"--sjs-article-font-large-lineHeight": "40px",
"--sjs-article-font-large-paragraphIndent": "0px",
"--sjs-article-font-large-textCase": "none",
"--sjs-article-font-medium-textDecoration": "none",
"--sjs-article-font-medium-fontWeight": "700",
"--sjs-article-font-medium-fontStyle": "normal",
"--sjs-article-font-medium-fontStretch": "normal",
"--sjs-article-font-medium-letterSpacing": "0",
"--sjs-article-font-medium-lineHeight": "32px",
"--sjs-article-font-medium-paragraphIndent": "0px",
"--sjs-article-font-medium-textCase": "none",
"--sjs-article-font-default-textDecoration": "none",
"--sjs-article-font-default-fontWeight": "400",
"--sjs-article-font-default-fontStyle": "normal",
"--sjs-article-font-default-fontStretch": "normal",
"--sjs-article-font-default-letterSpacing": "0",
"--sjs-article-font-default-lineHeight": "28px",
"--sjs-article-font-default-paragraphIndent": "0px",
"--sjs-article-font-default-textCase": "none",
"--sjs-header-backcolor": theme?.headerBackColor ?? "#2f5abc",
"--sjs-font-headertitle-color": "rgba(255, 255, 255, 1)",
"--sjs-font-headerdescription-color": "rgba(255, 255, 255, 1)",
"--sjs-font-headerdescription-weight": "600",
"--sjs-font-headerdescription-size": "14px"
},
"themeName": "default",
"colorPalette": "light",
"isPanelless": false,
"header": {
"height": 320,
"textAreaWidth": 480,
"overlapEnabled": true,
"backgroundImage": theme?.headerImage ?? "https://api.surveyjs.io/private/Surveys/files?name=b64cab40-6d94-420e-a5b8-67a4dae7be9b",
"backgroundImageOpacity": 0.25,
"backgroundImageFit": "cover",
"logoPositionX": "right",
"logoPositionY": "top",
"titlePositionX": "left",
"titlePositionY": "bottom",
"descriptionPositionX": "left",
"descriptionPositionY": "bottom",
"inheritWidthFrom": 'survey'
},
"headerView": theme?.hasheader ? 'advanced' : "basic"
});
class PedagoAngularQuizComponent {
constructor(toSurveyJsJson, surveyJsSenderToResponse) {
this.toSurveyJsJson = toSurveyJsJson;
this.surveyJsSenderToResponse = surveyJsSenderToResponse;
this.onSubmit = new EventEmitter();
}
ngOnInit() {
this.initilize();
}
// ngOnChanges(changes: SimpleChanges | any): void {
// if(changes && changes['data']) {
// const previousValue = changes.propertyName?.previousValue;
// const currentValue = changes.propertyName?.currentValue;
// if (previousValue != currentValue) {
// this.initilize();
// }
// }
// }
initilize() {
const survey = new Model(this.toSurveyJsJson.transform(this.data.questions, this.metadata));
survey.applyTheme(themeJson(this.metadata?.theme));
survey.onComplete.add((sender, options) => {
const result = new Result(this.surveyJsSenderToResponse.transform(sender), this.client, this.userId);
this.onSubmit.emit(result);
});
this.model = survey;
}
ngOnDestroy() {
if (this.onSubmit) {
this.onSubmit.unsubscribe();
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PedagoAngularQuizComponent, deps: [{ token: ToSurveyJsJsonPipe }, { token: SurveyJsSenderToResponsePipe }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: PedagoAngularQuizComponent, selector: "pedago-angular-quiz", inputs: { data: "data", client: "client", userId: "userId", metadata: "metadata" }, outputs: { onSubmit: "onSubmit" }, providers: [ToSurveyJsJsonPipe, SurveyJsSenderToResponsePipe], ngImport: i0, template: "<!--style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0;\"-->\r\n<survey [model]=\"model\"></survey>\r\n", dependencies: [{ kind: "component", type: i3.SurveyComponent, selector: "survey", inputs: ["model"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PedagoAngularQuizComponent, decorators: [{
type: Component,
args: [{ selector: 'pedago-angular-quiz', providers: [ToSurveyJsJsonPipe, SurveyJsSenderToResponsePipe], template: "<!--style=\"position: absolute; top: 0; left: 0; right: 0; bottom: 0;\"-->\r\n<survey [model]=\"model\"></survey>\r\n" }]
}], ctorParameters: function () { return [{ type: ToSurveyJsJsonPipe }, { type: SurveyJsSenderToResponsePipe }]; }, propDecorators: { data: [{
type: Input
}], client: [{
type: Input
}], userId: [{
type: Input
}], metadata: [{
type: Input
}], onSubmit: [{
type: Output
}] } });
class PedagoAngularQuizModule {
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PedagoAngularQuizModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: PedagoAngularQuizModule, declarations: [PedagoAngularQuizComponent,
ToSurveyJsJsonPipe,
SurveyJsSenderToResponsePipe], imports: [SurveyModule,
JsonPipe], exports: [PedagoAngularQuizComponent] }); }
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PedagoAngularQuizModule, imports: [SurveyModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: PedagoAngularQuizModule, decorators: [{
type: NgModule,
args: [{
declarations: [
PedagoAngularQuizComponent,
ToSurveyJsJsonPipe,
SurveyJsSenderToResponsePipe
],
imports: [
SurveyModule,
JsonPipe,
],
exports: [
PedagoAngularQuizComponent
]
}]
}] });
/*
* Public API Surface of pedago-angular-quiz
*/
/**
* Generated bundle index. Do not edit.
*/
export { PedagoAngularQuizComponent, PedagoAngularQuizModule, Result };
//# sourceMappingURL=pedago-angular-quiz.mjs.map