@pavankalyan.c/quiz
Version:
This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.1.2.
117 lines (106 loc) • 11.1 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('/core'), require('@angular/common'), require('/platform-browser')) :
typeof define === 'function' && define.amd ? define('.c/quiz', ['exports', '@angular/core', '@angular/common', '@angular/platform-browser'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.pavankalyan = global.pavankalyan || {}, global.pavankalyan.c = global.pavankalyan.c || {}, global.pavankalyan.c.quiz = {}), global.ng.core, global.ng.common, global.ng.platformBrowser));
}(this, (function (exports, i0, common, platformBrowser) { 'use strict';
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () {
return e[k];
}
});
}
});
}
n['default'] = e;
return Object.freeze(n);
}
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
var QuizService = /** @class */ (function () {
function QuizService() {
}
return QuizService;
}());
QuizService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function QuizService_Factory() { return new QuizService(); }, token: QuizService, providedIn: "root" });
QuizService.decorators = [
{ type: i0.Injectable, args: [{
providedIn: 'root'
},] }
];
QuizService.ctorParameters = function () { return []; };
var QuizComponent = /** @class */ (function () {
function QuizComponent() {
this.answerData = new i0.EventEmitter();
this.currentQuestionIndex = 0;
this.answers = {};
this.answeredAll = false;
}
QuizComponent.prototype.ngOnInit = function () {
this.currentQuestion = this.questionData[0];
};
QuizComponent.prototype.selectQuestion = function (id) {
this.currentQuestionIndex = id;
this.currentQuestion = this.questionData[id];
};
QuizComponent.prototype.goToNextQuestion = function () {
if (this.currentQuestionIndex === this.questionData.length - 1) {
return;
}
this.currentQuestionIndex++;
this.currentQuestion = this.questionData[this.currentQuestionIndex];
};
QuizComponent.prototype.saveAnswer = function (qid, aid) {
this.answers[qid] = aid;
this.goToNextQuestion();
if (Object.keys(this.answers).length === this.questionData.length) {
this.answeredAll = true;
}
};
QuizComponent.prototype.submitAnswers = function () {
this.answerData.emit(this.answers);
};
return QuizComponent;
}());
QuizComponent.decorators = [
{ type: i0.Component, args: [{
selector: 'lib-quiz',
template: "\n <div class=\"root-div\">\n <div class=\"quiz\">\n <div class=\"divLast d-flex justify-content-between\">\n <div *ngFor=\"let question of questionData; let i = index\">\n <div *ngIf=\"i == 0\">\n <div class=\"left-end col-12\" (click)=\"selectQuestion(i)\">\n <div class=\"col-3 le\"></div>\n <div\n class=\"dot col-6\"\n [class.attempted]=\"answers[question.questionId] != null\"\n [class]=\"\n currentQuestion.questionId == question.questionId\n ? 'selected'\n : ''\n \"\n >\n {{ i + 1 }}\n </div>\n <div class=\"col-3\"></div>\n </div>\n </div>\n <div *ngIf=\"i == questionData.length - 1\">\n <div class=\"right-end col-12\" (click)=\"selectQuestion(i)\">\n <div class=\"col-3\"></div>\n <div\n class=\"dot col-6\"\n [class.attempted]=\"answers[question.questionId] != null\"\n [class]=\"\n currentQuestion.questionId == question.questionId\n ? 'selected'\n : ''\n \"\n >\n {{ i + 1 }}\n </div>\n <div class=\"col-3 re\"></div>\n </div>\n </div>\n <div *ngIf=\"i != 0 && i != questionData.length - 1\">\n <div class=\"dot-outer\" (click)=\"selectQuestion(i)\">\n <div\n class=\"dot\"\n [class.attempted]=\"answers[question.questionId] != null\"\n [class]=\"\n currentQuestion.questionId == question.questionId\n ? 'selected'\n : ''\n \"\n >\n {{ i + 1 }}\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"question\">\n <div class=\"mt-4\">\n {{ currentQuestionIndex + 1 }}. {{ currentQuestion.questionText }}\n </div>\n <div class=\"options mt-4\">\n <div\n class=\"mx-2 my-2 option p-3 mb-5\"\n *ngFor=\"let option of currentQuestion.options\"\n (click)=\"saveAnswer(currentQuestion.questionId, option.optionId)\"\n [class]=\"\n answers[currentQuestion.questionId] === option.optionId\n ? 'selectedOption'\n : ''\n \"\n >\n <span>{{ option.optionText }}</span>\n </div>\n </div>\n </div>\n </div>\n <div class=\"submit d-flex justify-content-center\">\n <button\n [disabled]=\"!answeredAll\"\n (click)=\"submitAnswers()\"\n class=\"btnSubmit btn btn-lg shadow-none\"\n >\n Submit\n </button>\n </div>\n </div>\n ",
styles: ["\n .divLast {\n height: 60px;\n border-bottom: 3px solid #cecece;\n margin-left: 10%;\n margin-right: 10%;\n }\n .dot:hover {\n height: 25px;\n width: 25px;\n position: relative;\n top: 45px;\n background-color: rgb(41, 212, 41);\n font-size: 18px;\n text-align: center;\n font-weight: 700;\n }\n .attempted {\n background-color: rgb(41, 212, 41) !important;\n }\n .dot-outer {\n width: 30px;\n display: flex;\n justify-content: center;\n font-size: 18px;\n text-align: center;\n font-weight: 700;\n }\n .dot {\n position: relative;\n cursor: pointer;\n top: 51px;\n height: 14px;\n width: 14px;\n background-color: #bbb;\n border-radius: 50%;\n display: inline-block;\n color: white;\n font-size: 0px;\n }\n .left-end {\n width: 30px;\n display: flex;\n justify-content: center;\n }\n .right-end {\n width: 30px;\n display: flex;\n justify-content: center;\n }\n .selected {\n height: 25px;\n width: 25px;\n position: relative;\n top: 45px;\n background-color: rgb(41, 212, 41);\n font-size: 18px;\n text-align: center;\n font-weight: 700;\n }\n .question {\n flex-direction: column;\n display: flex;\n margin-left: 10%;\n margin-right: 10%;\n }\n .options {\n display: flex;\n flex-flow: wrap;\n flex-direction: row;\n }\n\n .option {\n background-color: rgb(255, 255, 255);\n z-index: 0;\n width: 40%;\n border-radius: 10px;\n box-shadow: 0 14px 21px rgba(0, 0, 0, 0.25),\n 0 0px 1px rgba(0, 0, 0, 0.22);\n cursor: pointer;\n }\n .option:hover {\n transform: scale(1.05);\n\n transition: all 0.2s ease-out;\n //animation: 1s ease-out 0s 1 normal none running fadeIn;\n box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034),\n 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06),\n 0 22.3px 17.9px rgba(0, 0, 0, 0.072),\n 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 25px 20px rgba(0, 0, 0, 0.12);\n background-color: rgb(41, 212, 41);\n color: white;\n }\n .quiz {\n background-color: rgb(250, 250, 250);\n height: 90%;\n overflow: auto;\n }\n @media only screen and (max-width: 500px) {\n .options {\n flex-direction: column;\n }\n .option {\n width: 100%;\n }\n .divLast {\n display: none !important;\n }\n }\n .submit {\n width: 100%;\n height: 10%;\n }\n .btnSubmit {\n height: 50px;\n margin: auto;\n background-color: rgb(41, 212, 41);\n color: white;\n }\n\n .btn:focus,\n .btn:active {\n outline: none !important;\n box-shadow: none !important;\n }\n .selectedOption {\n background-color: rgb(41, 212, 41);\n color: white;\n transform: scale(1.025);\n }\n .root-div {\n height: 100vh;\n font-family: 'Trebuchet MS', sans-serif;\n }\n .re,\n .le {\n background-color: #fafafa;\n position: relative;\n top: 51px;\n }\n "]
},] }
];
QuizComponent.ctorParameters = function () { return []; };
QuizComponent.propDecorators = {
questionData: [{ type: i0.Input }],
answerData: [{ type: i0.Output }]
};
var QuizModule = /** @class */ (function () {
function QuizModule() {
}
return QuizModule;
}());
QuizModule.decorators = [
{ type: i0.NgModule, args: [{
declarations: [QuizComponent],
imports: [platformBrowser.BrowserModule, common.CommonModule],
exports: [QuizComponent],
},] }
];
/*
* Public API Surface of quiz
*/
/**
* Generated bundle index. Do not edit.
*/
exports.QuizComponent = QuizComponent;
exports.QuizModule = QuizModule;
exports.QuizService = QuizService;
Object.defineProperty(exports, '__esModule', { value: true });
})));
//# sourceMappingURL=pavankalyan.c-quiz.umd.js.map