@pavankalyan.c/quiz/pavankalyan.c-quiz.metadata.json

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

{"__symbolic":"module","version":4,"metadata":{"QuizService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":2,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}]},"statics":{"ɵprov":{}}},"QuizComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":2,"character":1},"arguments":[{"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    "]}]}],"members":{"questionData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":237,"character":3}}]}],"answerData":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":239,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"selectQuestion":[{"__symbolic":"method"}],"goToNextQuestion":[{"__symbolic":"method"}],"saveAnswer":[{"__symbolic":"method"}],"submitAnswers":[{"__symbolic":"method"}]}},"QuizModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":5,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"QuizComponent"}],"imports":[{"__symbolic":"reference","module":"@angular/platform-browser","name":"BrowserModule","line":7,"character":12},{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":7,"character":27}],"exports":[{"__symbolic":"reference","name":"QuizComponent"}]}]}],"members":{}}},"origins":{"QuizService":"./lib/quiz.service","QuizComponent":"./lib/quiz.component","QuizModule":"./lib/quiz.module"},"importAs":"@pavankalyan.c/quiz"}