import { __decorate, __values } from "tslib";
import { Component, Input } from '@angular/core';
import { ItemService } from '../item-service/item-service.service';
import { DomSanitizer } from '@angular/platform-browser';
import { FormBuilder, FormGroup, FormArray, FormControl, ValidatorFn } from '@angular/forms';
import { BsModalService } from 'ngx-bootstrap/modal';
import { QuizService } from '../../../shared/service/quiz.service';
var GraphicOptionComponent = /** @class */ (function () {
    function GraphicOptionComponent(modalService, itemService, _DomSanitizationService, formBuilder, quizService) {
        this.modalService = modalService;
        this.itemService = itemService;
        this._DomSanitizationService = _DomSanitizationService;
        this.formBuilder = formBuilder;
        this.quizService = quizService;
        // Declare the Variables
        this.userAnswer = [];
        this.correctAns = [];
        this.userResponse = false;
        this.assetData = [];
        this.userSelectedLabel = [];
        this.myInterval = 0;
        this.radioValue = {};
        this.questionDetails1 = [];
        this.assetPosition = [];
        this.incorrectRationale = [];
        this.imagePath = [];
    }
    Object.defineProperty(GraphicOptionComponent.prototype, "questionDetails", {
        get: function () {
            return this.questionDetails;
        },
        enumerable: true,
        configurable: true
    });
    Object.defineProperty(GraphicOptionComponent.prototype, "questionCurrentData", {
        set: function (value) {
            if (value) {
                this.questionDetails1 = value;
                this.createQuestion();
            }
            else {
                this.questionDetails1 = [];
                this.createQuestion();
            }
        },
        enumerable: true,
        configurable: true
    });
    /* Init */
    GraphicOptionComponent.prototype.ngOnInit = function () {
        this.isOnlineEngine = this.quizService.isOnline;
    };
    GraphicOptionComponent.prototype.ngOnChanges = function (changes) { };
    /* Do Check */
    GraphicOptionComponent.prototype.ngDoCheck = function () {
        if (this.isClearAnswer === true) {
            this.clearUserInputs();
            this.itemService.userAnswerMethod([]);
            this.itemService.clearAnswerMethodFalse(false);
            this.itemService.hideAnswer(false);
        }
        if (this.isShowHide === true) {
            this.message = true;
        }
        else if (this.isShowHide === false) {
            this.message = false;
        }
    };
    /* function to get correct answer */
    GraphicOptionComponent.prototype.correctAnswer = function () {
        var e_1, _a;
        try {
            for (var _b = __values(this.questionDetails1.choiceInteraction.simpleChoices), _c = _b.next(); !_c.done; _c = _b.next()) {
                var i = _c.value;
                if (i.correct === true) {
                    this.correctAns = i;
                }
            }
        }
        catch (e_1_1) { e_1 = { error: e_1_1 }; }
        finally {
            try {
                if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
            }
            finally { if (e_1) throw e_1.error; }
        }
        this.incorrectRationale = this.questionDetails1.choiceInteraction.simpleChoices.filter(function (item) { return item.rationale !== null && item.correct !== true; });
    };
    /* function to get selected answer */
    GraphicOptionComponent.prototype.selectAnswer = function (option) {
        //conosole.log("radioValue", this.form.controls["choices"].value);
        this.radioValue = option;
        this.userAnswer = this.radioValue['choiceId'];
        if (this.userAnswer !== undefined && this.userAnswer !== null) {
            var answerObj = [this.userAnswer];
            this.itemService.userAnswerMethod(answerObj);
            this.itemService.validateAnswerValueMethod(this.isUserAnswersCorrect());
        }
        else {
            this.itemService.userAnswerMethod([]);
            this.itemService.validateAnswerValueMethod(false);
        }
    };
    /* Check wheather the user answer is correct */
    GraphicOptionComponent.prototype.isUserAnswersCorrect = function () {
        if (this.userAnswer === this.correctAns.choiceId) {
            return true;
        }
        else {
            return false;
        }
    };
    /* function to clear user inputs */
    GraphicOptionComponent.prototype.clearUserInputs = function () {
        this.userAnswer = [];
        this.form.reset();
    };
    /* Get Choice class name */
    GraphicOptionComponent.prototype.getChoiceClassName = function (choiceDetails) {
        if (choiceDetails.correct) {
            return 'wk-icon-checkmark green-checkmark';
        }
        else if (!choiceDetails.correct &&
            this.userAnswer === choiceDetails.choiceId) {
            return 'wk-icon-close wrong-checkmark';
        }
        else {
            return 'wk-icon-checkmark disabled-checkmark';
        }
    };
    /* Check the value changes */
    GraphicOptionComponent.prototype.valueChanged = function () {
        if (this.userAnswer !== undefined && this.userAnswer !== null) {
            var answerObj = this.userAnswer.length !== 0 ? [this.userAnswer] : this.userAnswer;
            this.itemService.userAnswerMethod(answerObj);
            this.itemService.validateAnswerValueMethod(this.isUserAnswersCorrect());
        }
        else {
            this.itemService.userAnswerMethod([]);
            this.itemService.validateAnswerValueMethod(false);
        }
    };
    GraphicOptionComponent.prototype.createQuestion = function () {
        var e_2, _a;
        var _this = this;
        this.radioValue = {};
        this.userAnswer = [];
        this.correctAns = [];
        this.itemService.userAnswerMethod([]);
        this.itemService.validateAnswerValueMethod(false);
        this.itemService.userAnswerState.subscribe(function (answer) { return (_this.userAnswerService = answer); });
        this.assetData = this.questionDetails1.assets;
        if (this.assetData.length !== 0) {
            this.assetPosition = this.questionDetails1.assets[0]['assetsPosition'];
        }
        if (this.questionDetails1.userAttemptDetails.userAnswer !== undefined &&
            Object.keys(this.questionDetails1.userAttemptDetails.userAnswer)
                .length !== 0) {
            try {
                for (var _b = __values(this.questionDetails1.choiceInteraction.simpleChoices), _c = _b.next(); !_c.done; _c = _b.next()) {
                    var j = _c.value;
                    if (this.questionDetails1.userAttemptDetails.userAnswer[0] ===
                        j['choiceId']) {
                        this.radioValue = j;
                        this.userAnswer = this.radioValue['choiceId'];
                    }
                }
            }
            catch (e_2_1) { e_2 = { error: e_2_1 }; }
            finally {
                try {
                    if (_c && !_c.done && (_a = _b.return)) _a.call(_b);
                }
                finally { if (e_2) throw e_2.error; }
            }
        }
        this.form = this.formBuilder.group({
            choices: [this.radioValue['choiceId']]
        });
        this.valueChanged();
        this.correctAnswer();
    };
    GraphicOptionComponent.prototype.clickImage = function (template, slide) {
        if (this.quizService.isOnline) {
            this.imageUrl = slide.assetPath;
        }
        else {
            this.imageUrl =
                this.splitStringForType('image', slide.assetName) + slide.assetsContent;
        }
        if (this.imageUrl !== undefined) {
            this.modalRef = this.modalService.show(template);
        }
    };
    GraphicOptionComponent.prototype.splitStringForType = function (type, value) {
        var name = value.split('.')[1];
        switch (type) {
            case 'image':
                return "data:image/" + name + ";base64,";
            case 'audio':
                return "data:audio/" + name + ";base64,";
            case 'video':
                return "data:video/" + name + ";base64,";
            default:
                break;
        }
    };
    GraphicOptionComponent.prototype.loadImagePath = function (assetType, slide) {
        if (this.quizService.isOnline) {
            return slide.assetPath;
        }
        return this.splitStringForType(assetType, slide.assetName) + slide.assetsContent;
    };
    GraphicOptionComponent.prototype.returnType = function (value) {
        var name = value.split('.')[1];
        return name;
    };
    GraphicOptionComponent.prototype.loadImagePathinsideModal = function (imageUrl) {
        return imageUrl;
    };
    GraphicOptionComponent.ctorParameters = function () { return [
        { type: BsModalService },
        { type: ItemService },
        { type: DomSanitizer },
        { type: FormBuilder },
        { type: QuizService }
    ]; };
    __decorate([
        Input('questionDetails')
    ], GraphicOptionComponent.prototype, "questionCurrentData", null);
    __decorate([
        Input()
    ], GraphicOptionComponent.prototype, "examEngineType", void 0);
    __decorate([
        Input()
    ], GraphicOptionComponent.prototype, "isClearAnswer", void 0);
    __decorate([
        Input()
    ], GraphicOptionComponent.prototype, "isShowHide", void 0);
    __decorate([
        Input()
    ], GraphicOptionComponent.prototype, "imagePath", void 0);
    __decorate([
        Input()
    ], GraphicOptionComponent.prototype, "checkQuizSubmission", void 0);
    __decorate([
        Input()
    ], GraphicOptionComponent.prototype, "canShowMetadata", void 0);
    __decorate([
        Input()
    ], GraphicOptionComponent.prototype, "preferredTextFormat", void 0);
    GraphicOptionComponent = __decorate([
        Component({
            selector: 'graphic-option',
            template: "<!--###################### QP exam Engine Type ###############################-->\n<ng-container *ngIf=\"examEngineType == 'QP' || examEngineType == 'NCLEX'\">\n  <!--Question text-->\n  <div class=\"wk-row\">\n    <media-carousel\n      *ngIf=\"\n        questionDetails1.assets &&\n        questionDetails1.assets.length != 0 &&\n        assetPosition != 'Bottom' &&\n        assetPosition != 'WithinText'\n      \"\n      [imagePath]=\"imagePath\"\n      [assetData]=\"assetData\"\n      [assetsPosition]=\"assetPosition\"\n    ></media-carousel>\n\n    <div\n      [ngClass]=\"{\n        'wk-col-8':\n          questionDetails1.assets != undefined &&\n          questionDetails1.assets.length != 0 &&\n          assetPosition != 'WithinText' &&\n          assetPosition != 'WithinText',\n        'wk-col-12':\n          questionDetails1.assets == undefined ||\n          questionDetails1.assets.length == 0 ||\n          assetPosition == 'WithinText',\n        'right-assets-position-question graphic-opt-full-width ':\n          assetPosition == 'Right',\n        'left-assets-position-question adjust-width-col-8':\n          assetPosition == 'Left',\n        'top-assets-position-question': assetPosition == 'Top',\n        'bottom-assets-position-question': assetPosition == 'Bottom'\n      }\"\n    >\n      <div class=\"wkqp-layout-item\">\n        <div class=\"wkqp-field-item normal-font mb0 \">\n          <div class=\"wkqp-field-header\" *ngIf=\"assetPosition != 'WithinText'\">\n            <div\n              class=\"mb20 normal-font wkqp-prewrap\"\n              libGetFormatText\n              [preferredTextFormat]=\"preferredTextFormat\"\n              [plainText]=\"questionDetails1.promptText\"\n              [richText]=\"questionDetails1.richPromptText\"\n            ></div>\n          </div>\n          <div class=\"wkqp-field-header\" *ngIf=\"assetPosition == 'WithinText'\">\n            <item-text-assets\n              [promptText]=\"questionDetails1.promptText\"\n              [imagePath]=\"imagePath\"\n              [assetData]=\"assetData\"\n              [assetsPosition]=\"assetPosition\"\n            ></item-text-assets>\n          </div>\n        </div>\n      </div>\n      <media-carousel\n        *ngIf=\"\n          questionDetails1.assets &&\n          questionDetails1.assets.length != 0 &&\n          assetPosition == 'Bottom' &&\n          assetPosition != 'WithinText'\n        \"\n        [imagePath]=\"imagePath\"\n        [assetData]=\"assetData\"\n        [assetsPosition]=\"assetPosition\"\n      ></media-carousel>\n      <div\n        class=\"wkqp-table-permit-overflow assets-permit-mt25mb0 graphical-table-midwrap\"\n      >\n        <fieldset class=\"common-full-width mb20\">\n          <legend\n            class=\"offscreen\"\n            libGetFormatText\n            [preferredTextFormat]=\"preferredTextFormat\"\n            [plainText]=\"questionDetails1.promptText\"\n            [richText]=\"questionDetails1.richPromptText\"\n          ></legend>\n          <form [formGroup]=\"form\">\n            <table class=\"wkqp-table question-type-video\" role=\"presentation\">\n              <tbody>\n                <tr\n                  *ngFor=\"\n                    let option of questionDetails1.choiceInteraction\n                      .simpleChoices;\n                    let i = index\n                  \"\n                >\n                  <td width=\"5%\" align=\"center\" valign=\"middle\">\n                    <div class=\"wkqp-radio-field\">\n                      <span\n                        *ngIf=\"message\"\n                        [ngClass]=\"getChoiceClassName(option)\"\n                      ></span>\n                      <input\n                        type=\"radio\"\n                        [hidden]=\"message\"\n                        [value]=\"option.choiceId\"\n                        (change)=\"selectAnswer(option)\"\n                        formControlName=\"choices\"\n                      />\n                      <span\n                        libGetFormatText\n                        [preferredTextFormat]=\"preferredTextFormat\"\n                        [plainText]=\"option.label\"\n                        [richText]=\"option.richLabel\"\n                      ></span>\n                    </div>\n                  </td>\n                  <td width=\"95%\">\n                    <div class=\"media-width400\">\n                      <wkqp-image-scaling\n                        [slideData]=\"option.value\"\n                        [ImageSource]=\"loadImagePath('image', option.value)\"\n                        class=\"grap-opt-answer\"\n                      ></wkqp-image-scaling>\n\n                      <div\n                        class=\"img-go-enlarge-text\"\n                        *ngIf=\"option.value.assetTypeId == 1\"\n                      >\n                        <span class=\"graphic-img-text\"\n                          >Click on image to enlarge.</span\n                        >\n                      </div>\n\n                      <video\n                        title=\"{{ option.value.altTitle }}\"\n                        name=\"previewVideo\"\n                        id=\"previewVideo \"\n                        class=\"item-prev-video55\"\n                        *ngIf=\"option.value.assetTypeId == 3\"\n                      >\n                        <source [src]=\"loadImagePath('video', option.value)\" />\n                        <source\n                          [src]=\"loadImagePath('video', option.value)\"\n                          type='video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"'\n                        />\n                        <source\n                          [src]=\"loadImagePath('video', option.value)\"\n                          type='video/ogg; codecs=\"theora, vorbis\"'\n                        />\n                      </video>\n                      <app-media-controls\n                        *ngIf=\"option.value.assetTypeId == 3\"\n                        [assetId]=\"option.value.assetId\"\n                        [assetType]=\"'video'\"\n                      ></app-media-controls>\n                      <audio\n                        title=\"{{ option.value.altTitle }}\"\n                        class=\"item-prev-audio55\"\n                        *ngIf=\"option.value.assetTypeId == 2\"\n                        name=\"previewAudio\"\n                        class=\"item-prev-audio55\"\n                        id=\"previewAudio\"\n                      >\n                        <source [src]=\"loadImagePath('audio', option.value)\" />\n                      </audio>\n                      <app-media-controls\n                        *ngIf=\"option.value.assetTypeId == 2\"\n                        [assetId]=\"option.value.assetId\"\n                        [assetType]=\"'audio'\"\n                      ></app-media-controls>\n                      <wkqp-download-transcript\n                        *ngIf=\"isOnlineEngine && option.value.transcript\"\n                        [slideData]=\"option.value\"\n                      >\n                      </wkqp-download-transcript>\n                      <!-- <media-carousel [assetData]=\"option.value\" [assetsPosition]=\"'graphic'\"></media-carousel> -->\n                    </div>\n                    <div\n                      class=\"wkqp-alert-info wkqp-prewrap correct-rationale-section wkqp-prewrap\"\n                      *ngIf=\"message && option.rationale\"\n                    >\n                      <strong>Rationale: </strong>\n                      <span\n                        libGetFormatText\n                        [preferredTextFormat]=\"preferredTextFormat\"\n                        [plainText]=\"option.rationale\"\n                        [richText]=\"option.richRationale\"\n                      ></span>\n                    </div>\n                  </td>\n                </tr>\n              </tbody>\n            </table>\n          </form>\n        </fieldset>\n      </div>\n      <!--User answer and correct answer-->\n      <ng-container *ngIf=\"message\">\n        <!--Your response-->\n        <p\n          class=\"wkqp-prewrap mb20\"\n          [ngClass]=\"\n            isUserAnswersCorrect()\n              ? 'wkqp-alert-success wkqp-success'\n              : 'wkqp-alert-danger wkqp-danger'\n          \"\n          *ngIf=\"userAnswer.length != 0\"\n        >\n          <strong>Your Response:</strong>\n        </p>\n        <div *ngIf=\"userAnswer.length != 0\" class=\"wk-row media-width400 mb20\">\n          <wkqp-image-scaling\n            [slideData]=\"radioValue.value\"\n            [ImageSource]=\"loadImagePath('image', radioValue.value)\"\n            class=\"grap-opt-answer\"\n          ></wkqp-image-scaling>\n\n          <div\n            class=\"img-go-enlarge-text\"\n            *ngIf=\"radioValue.value.assetTypeId == 1\"\n          >\n            <span class=\"graphic-img-text\">Click on image to enlarge.</span>\n          </div>\n          <video\n            title=\"{{ radioValue.value.altTitle }}\"\n            name=\"previewVideo\"\n            id=\"previewVideo\"\n            class=\"item-prev-video55 full-width\"\n            *ngIf=\"radioValue.value.assetTypeId == 3\"\n          >\n            <source [src]=\"loadImagePath('video', radioValue.value)\" />\n            <source\n              [src]=\"loadImagePath('video', radioValue.value)\"\n              type='video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"'\n            />\n            <source\n              [src]=\"loadImagePath('video', radioValue.value)\"\n              type='video/ogg; codecs=\"theora, vorbis\"'\n            />\n          </video>\n          <app-media-controls\n            *ngIf=\"radioValue.value.assetTypeId == 3\"\n            [assetId]=\"radioValue.value.assetId\"\n            [assetType]=\"'video'\"\n            [controlsPosition]=\"'graphic'\"\n          ></app-media-controls>\n          <audio\n            title=\"{{ radioValue.value.altTitle }}\"\n            *ngIf=\"radioValue.value.assetTypeId == 2\"\n            name=\"previewAudio\"\n            class=\"item-prev-audio55 full-width\"\n            id=\"previewAudio\"\n          >\n            <source [src]=\"loadImagePath('audio', radioValue.value)\" />\n          </audio>\n          <app-media-controls\n            *ngIf=\"radioValue.value.assetTypeId == 2\"\n            [assetId]=\"radioValue.value.assetId\"\n            [assetType]=\"'audio'\"\n            [controlsPosition]=\"'graphic'\"\n          ></app-media-controls>\n          <wkqp-download-transcript\n            *ngIf=\"isOnlineEngine && radioValue.value.transcript\"\n            [slideData]=\"radioValue.value\"\n          >\n          </wkqp-download-transcript>\n          <!-- <media-carousel [assetData]=\"radioValue.value\" [assetsPosition]=\"'graphic'\"></media-carousel> -->\n        </div>\n\n        <!--Correct response-->\n        <p\n          class=\"wkqp-prewrap wkqp-alert-success wkqp-success  mb20\"\n          *ngIf=\"!isUserAnswersCorrect()\"\n        >\n          <strong>Correct Response:</strong>\n        </p>\n        <div *ngIf=\"!isUserAnswersCorrect()\" class=\"wk-row media-width400 mb20\">\n          <wkqp-image-scaling\n            [slideData]=\"correctAns.value\"\n            [ImageSource]=\"loadImagePath('image', correctAns.value)\"\n            class=\"grap-opt-answer\"\n          ></wkqp-image-scaling>\n          <div\n            class=\"img-go-enlarge-text\"\n            *ngIf=\"correctAns.value.assetTypeId == 1\"\n          >\n            <span class=\"graphic-img-text\">Click on image to enlarge.</span>\n          </div>\n          <video\n            title=\"{{ correctAns.value.altTitle }}\"\n            name=\"previewVideo\"\n            id=\"previewVideo\"\n            class=\"item-prev-video55 full-width\"\n            *ngIf=\"correctAns.value.assetTypeId == 3\"\n          >\n            <source [src]=\"loadImagePath('video', correctAns.value)\" />\n            <source\n              [src]=\"loadImagePath('video', correctAns.value)\"\n              type='video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"'\n            />\n            <source\n              [src]=\"loadImagePath('video', correctAns.value)\"\n              type='video/ogg; codecs=\"theora, vorbis\"'\n            />\n          </video>\n          <app-media-controls\n            *ngIf=\"correctAns.value.assetTypeId == 3\"\n            [assetId]=\"correctAns.value.assetId\"\n            [assetType]=\"'video'\"\n            [controlsPosition]=\"'graphic'\"\n          ></app-media-controls>\n          <audio\n            title=\"{{ correctAns.value.altTitle }}\"\n            class=\"item-prev-audio55 full-width\"\n            *ngIf=\"correctAns.value.assetTypeId == 2\"\n            name=\"previewAudio\"\n            id=\"previewAudio\"\n          >\n            <source [src]=\"loadImagePath('audio', correctAns.value)\" />\n          </audio>\n          <app-media-controls\n            *ngIf=\"correctAns.value.assetTypeId == 2\"\n            [assetId]=\"correctAns.value.assetId\"\n            [assetType]=\"'audio'\"\n            [controlsPosition]=\"'graphic'\"\n          ></app-media-controls>\n          <wkqp-download-transcript\n            *ngIf=\"isOnlineEngine && correctAns.value.transcript\"\n            [slideData]=\"correctAns.value\"\n          >\n          </wkqp-download-transcript>\n          <!-- <media-carousel [assetData]=\"correctAns.value\" [assetsPosition]=\"'graphic'\"></media-carousel> -->\n        </div>\n        <div *ngIf=\"canShowMetadata\">\n          <lib-metadata [itemData]=\"questionDetails1\"></lib-metadata>\n        </div>\n      </ng-container>\n    </div>\n  </div>\n  <div *ngIf=\"canShowMetadata && message != true\">\n    <lib-metadata [itemData]=\"questionDetails1\"></lib-metadata>\n  </div>\n\n  <div class=\"rationale-remedation-block mb20\" *ngIf=\"message\">\n    <!--Rationle-->\n    <lib-rationale\n      [itemData]=\"questionDetails1.modelFeedback\"\n      [preferredTextFormat]=\"preferredTextFormat\"\n    ></lib-rationale>\n    <!--Remediation-->\n    <lib-remediation\n      [itemData]=\"questionDetails1.remediationLinks\"\n      [preferredTextFormat]=\"preferredTextFormat\"\n    ></lib-remediation>\n  </div>\n</ng-container>\n\n<!--###################### USMLE exam Engine Type ###############################-->\n<ng-container *ngIf=\"examEngineType == 'USMLE'\">\n  <!--Question text-->\n  <div class=\"wk-row\">\n    <media-carousel\n      *ngIf=\"\n        questionDetails1.assets &&\n        questionDetails1.assets.length != 0 &&\n        assetPosition != 'Bottom' &&\n        assetPosition != 'WithinText'\n      \"\n      [imagePath]=\"imagePath\"\n      [assetData]=\"assetData\"\n      [assetsPosition]=\"assetPosition\"\n    ></media-carousel>\n\n    <div\n      [ngClass]=\"{\n        'wk-col-8':\n          questionDetails1.assets != undefined &&\n          questionDetails1.assets.length != 0 &&\n          assetPosition != 'WithinText',\n        'wk-col-12':\n          questionDetails1.assets == undefined ||\n          questionDetails1.assets.length == 0 ||\n          assetPosition == 'WithinText',\n        'right-assets-position-question': assetPosition == 'Right',\n        'left-assets-position-question': assetPosition == 'Left',\n        'top-assets-position-question': assetPosition == 'Top',\n        'bottom-assets-position-question': assetPosition == 'Bottom'\n      }\"\n    >\n      <div class=\"wkqp-layout-item\">\n        <div class=\"wkqp-field-item normal-font mb0 \">\n          <div class=\"wkqp-field-header\" *ngIf=\"assetPosition != 'WithinText'\">\n            <div class=\"mb20 normal-font wkqp-prewrap\">\n              {{ questionDetails1.promptText }}\n            </div>\n          </div>\n          <div class=\"wkqp-field-header\" *ngIf=\"assetPosition == 'WithinText'\">\n            <item-text-assets\n              [promptText]=\"questionDetails1.promptText\"\n              [imagePath]=\"imagePath\"\n              [assetData]=\"assetData\"\n              [assetsPosition]=\"assetPosition\"\n            ></item-text-assets>\n          </div>\n        </div>\n      </div>\n      <!--Question media answer-->\n      <div\n        class=\"wkqp-table-permit-overflow assets-permit-mt25mb0 graphical-table-midwrap\"\n      >\n        <fieldset>\n          <table class=\"wkqp-table question-type-video\" role=\"presentation\">\n            <tbody>\n              <fieldset class=\"common-full-width\">\n                <legend class=\"offscreen\">\n                  {{ questionDetails1.promptText }}\n                </legend>\n                <form [formGroup]=\"form\">\n                  <tr\n                    *ngFor=\"\n                      let option of questionDetails1.choiceInteraction\n                        .simpleChoices;\n                      let i = index\n                    \"\n                  >\n                    <td width=\"5%\" align=\"center\" valign=\"middle\">\n                      <div ng-class=\"wkqp-radio-field\">\n                        <!-- <input id=\"{{option.choiceId}}\" name=\"Answer Choices\" [attr.aria-label]=\"option.value.assetName\" [checked]=\"option.checked\"\n              type=\"radio\" name=\"choice\" [hidden]=\"message\" (change)=\"selectAnswer(option, i)\" [value]=\"option\"> -->\n                        <div>\n                          <span\n                            *ngIf=\"checkQuizSubmission == true\"\n                            [ngClass]=\"getChoiceClassName(option)\"\n                          ></span>\n                          <input\n                            type=\"radio\"\n                            [hidden]=\"checkQuizSubmission == true\"\n                            [value]=\"option.choiceId\"\n                            (change)=\"selectAnswer(option)\"\n                            formControlName=\"choices\"\n                          />\n                          <span>{{ option.label }}</span>\n                        </div>\n                      </div>\n                    </td>\n                    <td width=\"95%\">\n                      <div>\n                        <img\n                          [src]=\"\n                            _DomSanitizationService.bypassSecurityTrustUrl(\n                              splitStringForType(\n                                'image',\n                                option.value.assetName\n                              ) + option.value.assetsContent\n                            )\n                          \"\n                          *ngIf=\"option.value.assetTypeId == 1\"\n                          class=\"item-prev-img55 grap-opt-answer\"\n                          width=\"300px\"\n                          (enter)=\"\n                            clickImage(\n                              splitStringForType(\n                                'image',\n                                option.value.assetName\n                              ) + option.value.assetsContent,\n                              template\n                            )\n                          \"\n                          (click)=\"\n                            clickImage(\n                              splitStringForType(\n                                'image',\n                                option.value.assetName\n                              ) + option.value.assetsContent,\n                              template\n                            )\n                          \"\n                        />\n                        <video\n                          title=\"{{ option.value.altTitle }}\"\n                          name=\"previewVideo\"\n                          id=\"previewVideo \"\n                          class=\"item-prev-video55\"\n                          *ngIf=\"option.value.assetTypeId == 3\"\n                        >\n                          <source\n                            [src]=\"\n                              _DomSanitizationService.bypassSecurityTrustUrl(\n                                splitStringForType(\n                                  'video',\n                                  option.value.assetName\n                                ) + option.value.assetsContent\n                              )\n                            \"\n                          />\n                          <source\n                            [src]=\"\n                              _DomSanitizationService.bypassSecurityTrustUrl(\n                                splitStringForType(\n                                  'video',\n                                  option.value.assetName\n                                ) + option.value.assetsContent\n                              )\n                            \"\n                            type='video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"'\n                          />\n                          <source\n                            [src]=\"\n                              _DomSanitizationService.bypassSecurityTrustUrl(\n                                splitStringForType(\n                                  'video',\n                                  option.value.assetName\n                                ) + option.value.assetsContent\n                              )\n                            \"\n                            type='video/ogg; codecs=\"theora, vorbis\"'\n                          />\n                        </video>\n                        <app-media-controls\n                          *ngIf=\"option.value.assetTypeId == 3\"\n                          [assetId]=\"option.value.assetId\"\n                          [assetType]=\"'video'\"\n                        ></app-media-controls>\n                        <audio\n                          title=\"{{ option.value.altTitle }}\"\n                          class=\"item-prev-audio55\"\n                          *ngIf=\"option.value.assetTypeId == 2\"\n                          name=\"previewAudio\"\n                          class=\"item-prev-audio55\"\n                          id=\"previewAudio\"\n                        >\n                          <source\n                            [src]=\"\n                              _DomSanitizationService.bypassSecurityTrustUrl(\n                                splitStringForType(\n                                  'audio',\n                                  option.value.assetName\n                                ) + option.value.assetsContent\n                              )\n                            \"\n                          />\n                        </audio>\n                        <app-media-controls\n                          *ngIf=\"option.value.assetTypeId == 2\"\n                          [assetId]=\"option.value.assetId\"\n                          [assetType]=\"'audio'\"\n                        ></app-media-controls>\n                        <!-- <media-carousel [assetData]=\"option.value\" [assetsPosition]=\"'graphic'\"></media-carousel> -->\n                      </div>\n                      <div\n                        class=\"wkqp-alert-info wkqp-prewrap correct-rationale-section wkqp-prewrap\"\n                        *ngIf=\"checkQuizSubmission == true && option.rationale\"\n                      >\n                        <strong>Rationale: </strong>{{ option.rationale }}\n                      </div>\n                    </td>\n                  </tr>\n                </form>\n              </fieldset>\n            </tbody>\n          </table>\n        </fieldset>\n      </div>\n      <media-carousel\n        *ngIf=\"\n          questionDetails1.assets &&\n          questionDetails1.assets.length != 0 &&\n          assetPosition == 'Bottom' &&\n          assetPosition != 'WithinText'\n        \"\n        [imagePath]=\"imagePath\"\n        [assetData]=\"assetData\"\n        [assetsPosition]=\"assetPosition\"\n      ></media-carousel>\n    </div>\n  </div>\n\n  <!--User response and correct response-->\n  <ng-container *ngIf=\"checkQuizSubmission == true\">\n    <!--Your response-->\n    <p\n      class=\"wkqp-prewrap  \"\n      [ngClass]=\"\n        isUserAnswersCorrect()\n          ? 'wkqp-alert-success wkqp-success'\n          : 'wkqp-alert-danger wkqp-danger'\n      \"\n      *ngIf=\"userAnswer.length != 0\"\n    >\n      <strong>Your Response:</strong>\n    </p>\n    <div *ngIf=\"userAnswer.length != 0\" class=\"wk-row\">\n      <img\n        [src]=\"\n          _DomSanitizationService.bypassSecurityTrustUrl(\n            splitStringForType('image', radioValue.value.assetName) +\n              radioValue.value.assetsContent\n          )\n        \"\n        *ngIf=\"radioValue.value.assetTypeId == 1\"\n        class=\"item-prev-img55  grap-opt-answer\"\n        width=\"300px\"\n        (enter)=\"\n          clickImage(\n            splitStringForType('image', radioValue.value.assetName) +\n              radioValue.value.assetsContent,\n            template\n          )\n        \"\n        (click)=\"\n          clickImage(\n            splitStringForType('image', radioValue.value.assetName) +\n              radioValue.value.assetsContent,\n            template\n          )\n        \"\n      />\n      <video\n        title=\"{{ radioValue.altTitle }}\"\n        name=\"previewVideo\"\n        id=\"previewVideo\"\n        class=\"item-prev-video55 full-width\"\n        *ngIf=\"radioValue.value.assetTypeId == 3\"\n      >\n        <source\n          [src]=\"\n            _DomSanitizationService.bypassSecurityTrustUrl(\n              splitStringForType('video', radioValue.value.assetName) +\n                radioValue.value.assetsContent\n            )\n          \"\n        />\n        <source\n          [src]=\"\n            _DomSanitizationService.bypassSecurityTrustUrl(\n              splitStringForType('video', radioValue.value.assetName) +\n                radioValue.value.assetsContent\n            )\n          \"\n          type='video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"'\n        />\n        <source\n          [src]=\"\n            _DomSanitizationService.bypassSecurityTrustUrl(\n              splitStringForType('video', radioValue.value.assetName) +\n                radioValue.value.assetsContent\n            )\n          \"\n          type='video/ogg; codecs=\"theora, vorbis\"'\n        />\n      </video>\n      <app-media-controls\n        *ngIf=\"radioValue.value.assetTypeId == 3\"\n        [assetId]=\"radioValue.value.assetId\"\n        [assetType]=\"'video'\"\n        [controlsPosition]=\"'graphic'\"\n      ></app-media-controls>\n      <audio\n        title=\"{{ radioValue.value.altTitle }}\"\n        *ngIf=\"radioValue.value.assetTypeId == 2\"\n        name=\"previewAudio\"\n        class=\"item-prev-audio55 full-width\"\n        id=\"previewAudio\"\n      >\n        <source\n          [src]=\"\n            _DomSanitizationService.bypassSecurityTrustUrl(\n              splitStringForType('audio', radioValue.value.assetName) +\n                radioValue.value.assetsContent\n            )\n          \"\n        />\n      </audio>\n      <app-media-controls\n        *ngIf=\"radioValue.value.assetTypeId == 2\"\n        [assetId]=\"radioValue.value.assetId\"\n        [assetType]=\"'audio'\"\n        [controlsPosition]=\"'graphic'\"\n      ></app-media-controls>\n      <!-- <media-carousel [assetData]=\"radioValue.value\" [assetsPosition]=\"'graphic'\"></media-carousel> -->\n    </div>\n\n    <!--Correct response-->\n    <p\n      class=\"wkqp-prewrap wkqp-alert-success wkqp-success \"\n      *ngIf=\"!isUserAnswersCorrect()\"\n    >\n      <strong>Correct Response:</strong>\n    </p>\n    <div *ngIf=\"!isUserAnswersCorrect()\" class=\"wk-row\">\n      <img\n        [src]=\"\n          _DomSanitizationService.bypassSecurityTrustUrl(\n            splitStringForType('image', correctAns.value.assetName) +\n              correctAns.value.assetsContent\n          )\n        \"\n        *ngIf=\"correctAns.value.assetTypeId == 1\"\n        class=\"item-prev-img55  grap-opt-answer\"\n        width=\"300px\"\n        (enter)=\"\n          clickImage(\n            splitStringForType('image', correctAns.value.assetName) +\n              correctAns.value.assetsContent,\n            template\n          )\n        \"\n        (click)=\"\n          clickImage(\n            splitStringForType('image', correctAns.value.assetName) +\n              correctAns.value.assetsContent,\n            template\n          )\n        \"\n      />\n      <video\n        title=\"{{ correctAns.value.altTitle }}\"\n        name=\"previewVideo\"\n        id=\"previewVideo\"\n        class=\"item-prev-video55 full-width\"\n        *ngIf=\"correctAns.value.assetTypeId == 3\"\n      >\n        <source\n          [src]=\"\n            _DomSanitizationService.bypassSecurityTrustUrl(\n              splitStringForType('video', correctAns.value.assetName) +\n                correctAns.value.assetsContent\n            )\n          \"\n        />\n        <source\n          [src]=\"\n            _DomSanitizationService.bypassSecurityTrustUrl(\n              splitStringForType('video', correctAns.value.assetName) +\n                correctAns.value.assetsContent\n            )\n          \"\n          type='video/mp4; codecs=\"avc1.42E01E, mp4a.40.2\"'\n        />\n        <source\n          [src]=\"\n            _DomSanitizationService.bypassSecurityTrustUrl(\n              splitStringForType('video', correctAns.value.assetName) +\n                correctAns.value.assetsContent\n            )\n          \"\n          type='video/ogg; codecs=\"theora, vorbis\"'\n        />\n      </video>\n      <app-media-controls\n        *ngIf=\"correctAns.value.assetTypeId == 3\"\n        [assetId]=\"correctAns.value.assetId\"\n        [assetType]=\"'video'\"\n        [controlsPosition]=\"'graphic'\"\n      ></app-media-controls>\n      <audio\n        title=\"{{ correctAns.value.altTitle }}\"\n        class=\"item-prev-audio55 full-width\"\n        *ngIf=\"correctAns.value.assetTypeId == 2\"\n        name=\"previewAudio\"\n        id=\"previewAudio\"\n      >\n        <source\n          [src]=\"\n            _DomSanitizationService.bypassSecurityTrustUrl(\n              splitStringForType('audio', correctAns.value.assetName) +\n                correctAns.value.assetsContent\n            )\n          \"\n        />\n      </audio>\n      <app-media-controls\n        *ngIf=\"correctAns.value.assetTypeId == 2\"\n        [assetId]=\"correctAns.value.assetId\"\n        [assetType]=\"'audio'\"\n        [controlsPosition]=\"'graphic'\"\n      ></app-media-controls>\n      <!-- <media-carousel [assetData]=\"correctAns.value\" [assetsPosition]=\"'graphic'\"></media-carousel> -->\n    </div>\n\n    <!--Rationale-->\n    <p *ngIf=\"questionDetails1.modelFeedback[0].length !== 0\">\n      <strong>Rationale:</strong>\n      <span>{{ questionDetails1.modelFeedback[0].feedbackText }}</span>\n    </p>\n\n    <!--Remediation-->\n    <div *ngIf=\"questionDetails1.remediationLinks.length !== 0\">\n      <strong>Remediation:</strong>\n      <div\n        *ngFor=\"\n          let Remediation of questionDetails1.remediationLinks;\n          let k = index\n        \"\n      >\n        <span *ngIf=\"Remediation.linkTypeId == 1\">{{\n          Remediation.linkText1\n        }}</span>\n        <span *ngIf=\"Remediation.linkTypeId != 1\">\n          {{ Remediation.linkText1 }}</span\n        >\n      </div>\n    </div>\n  </ng-container>\n</ng-container>\n<ng-template #template>\n  <div class=\"modal-header\">\n    <button\n      type=\"button\"\n      class=\"close pull-right\"\n      aria-label=\"Close\"\n      (click)=\"modalRef.hide()\"\n    >\n      <span aria-hidden=\"true\" class=\"closeIcon\" style=\"font-size:30px;\"\n        >&times;</span\n      >\n    </button>\n  </div>\n  <div class=\"modal-body\">\n    <div class=\"image-center\">\n      <img\n        [src]=\"_DomSanitizationService.bypassSecurityTrustUrl(imageUrl)\"\n        alt=\"No Image\"\n      />\n    </div>\n  </div>\n</ng-template>\n",
            styles: [".modal-content{border-radius:0!important;border:0!important}.modal-header{border-radius:0!important;border:0!important;padding:10px!important;position:relative!important;height:45px!important}button.close{cursor:pointer!important;padding:0!important;margin:0!important;position:absolute!important;right:12px!important;top:7px!important}.close{opacity:1!important}.modal-header button.close:focus,.modal-header button.close:hover{background-color:transparent!important;color:#fff!important;outline:0!important;border:0!important;box-shadow:0 0 0!important}.closeIcon{color:#fff}video::-internal-media-controls-download-button{display:none}video::-webkit-media-controls-enclosure{overflow:hidden}video::-webkit-media-controls-panel{width:calc(100% + 30px)}audio::-internal-media-controls-download-button{display:none}audio::-webkit-media-controls-enclosure{overflow:hidden}audio::-webkit-media-controls-panel{width:calc(100% + 30px)}.full-width{float:left;width:500px;border:1px solid #a3a3a3;background-color:var(--secondary-color)}.graphic-img-text{color:var(--text-color);font-size:.9375rem}.image-center{text-align:center}.media-width400{width:400px;margin-left:0;margin-right:0}"]
        })
    ], GraphicOptionComponent);
    return GraphicOptionComponent;
}());
export { GraphicOptionComponent };
//# sourceMappingURL=data:application/json;base64, 