@pavankalyan.c/quiz/bundles/pavankalyan.c-quiz.umd.min.js

This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 11.1.2.

!function(n,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("@angular/core"),require("@angular/common"),require("@angular/platform-browser")):"function"==typeof define&&define.amd?define("@pavankalyan.c/quiz",["exports","@angular/core","@angular/common","@angular/platform-browser"],t):t(((n="undefined"!=typeof globalThis?globalThis:n||self).pavankalyan=n.pavankalyan||{},n.pavankalyan.c=n.pavankalyan.c||{},n.pavankalyan.c.quiz={}),n.ng.core,n.ng.common,n.ng.platformBrowser)}(this,(function(n,t,e,o){"use strict";function i(n){if(n&&n.__esModule)return n;var t=Object.create(null);return n&&Object.keys(n).forEach((function(e){if("default"!==e){var o=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(t,e,o.get?o:{enumerable:!0,get:function(){return n[e]}})}})),t.default=n,Object.freeze(t)}var s=i(t),r=function(){};r.ɵprov=s.ɵɵdefineInjectable({factory:function(){return new r},token:r,providedIn:"root"}),r.decorators=[{type:t.Injectable,args:[{providedIn:"root"}]}],r.ctorParameters=function(){return[]};var a=function(){function n(){this.answerData=new t.EventEmitter,this.currentQuestionIndex=0,this.answers={},this.answeredAll=!1}return n.prototype.ngOnInit=function(){this.currentQuestion=this.questionData[0]},n.prototype.selectQuestion=function(n){this.currentQuestionIndex=n,this.currentQuestion=this.questionData[n]},n.prototype.goToNextQuestion=function(){this.currentQuestionIndex!==this.questionData.length-1&&(this.currentQuestionIndex++,this.currentQuestion=this.questionData[this.currentQuestionIndex])},n.prototype.saveAnswer=function(n,t){this.answers[n]=t,this.goToNextQuestion(),Object.keys(this.answers).length===this.questionData.length&&(this.answeredAll=!0)},n.prototype.submitAnswers=function(){this.answerData.emit(this.answers)},n}();a.decorators=[{type:t.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    "]}]}],a.ctorParameters=function(){return[]},a.propDecorators={questionData:[{type:t.Input}],answerData:[{type:t.Output}]};var c=function(){};c.decorators=[{type:t.NgModule,args:[{declarations:[a],imports:[o.BrowserModule,e.CommonModule],exports:[a]}]}],n.QuizComponent=a,n.QuizModule=c,n.QuizService=r,Object.defineProperty(n,"__esModule",{value:!0})}));
//# sourceMappingURL=pavankalyan.c-quiz.umd.min.js.map