import { __decorate } from "tslib";
import { Component, Input } from "@angular/core";
import { ItemService } from "../item-service/item-service.service";
import { moveItemInArray, transferArrayItem } from "@angular/cdk/drag-drop";
let DragAndDropComponent = class DragAndDropComponent {
    constructor(itemService) {
        this.itemService = itemService;
        // Declare the variables
        this.userAnswer = [];
        this.orginalArray = [];
        this.correctAns = [];
        this.properArray = [];
        this.shuffledArray = [];
        this.userActions = false;
        this.assetData = [];
        this.questionDetails1 = [];
        this.assetPosition = [];
        this.dropDownValues = [];
        this.choiceDropDown = [];
        this.selectedItem = {
            itemPosition: "",
            index: 0
        };
        this.todo = [];
        this.done = [];
        this.answerRefArr = [];
        this.imagePath = [];
    }
    get questionDetails() {
        return this.questionDetails;
    }
    set questionCurrentData(value) {
        if (value) {
            this.questionDetails1 = value;
            this.createQuestion();
        }
        else {
            this.questionDetails1 = [];
            this.createQuestion();
        }
    }
    /* Init */
    ngOnInit() { }
    ngOnChanges(changes) { }
    /* Do check */
    ngDoCheck() {
        // Clear user req
        if (this.isClearAnswer === true) {
            this.clearUserInputs();
            this.itemService.userAnswerMethod([]);
            this.itemService.clearAnswerMethodFalse(false);
            this.itemService.hideAnswer(false);
        }
        // Show or hide answer request
        if (this.isShowHide === true) {
            this.message = true;
            if (this.message) {
                this.userActions = this.compareOrginalArrayToUserArray();
            }
        }
        else if (this.isShowHide === false) {
            this.message = false;
        }
    }
    /* Comparing the original array to user array */
    compareOrginalArrayToUserArray() {
        if (this.templateType === 1) {
            for (let i = 0, length = this.orginalArray.length; i < length; i++) {
                if (this.shuffledArray[i].choiceId !== this.orginalArray[i].choiceId) {
                    return true;
                }
            }
            return false;
        }
        else {
            if (this.done.length > 0) {
                return true;
            }
            return false;
        }
    }
    /* Checking the order */
    checkingOrder() {
        let userArray = [];
        const userArray1 = [];
        this.userActions = this.compareOrginalArrayToUserArray();
        if (this.userActions === true) {
            this.userAnswer = this.shuffledArray;
            userArray = this.userAnswer;
            userArray.map(element => {
                userArray1.push(element.choiceId);
            });
            const answerObj = userArray1;
            this.itemService.userAnswerMethod(answerObj);
            this.itemService.validateAnswerValueMethod(this.validateUserAnswer());
        }
        else {
            this.userAnswer = [];
            this.itemService.userAnswerMethod([]);
            this.itemService.validateAnswerValueMethod(false);
        }
        for (let i = 0, length = this.correctAns.length; i < length; i++) {
            if (this.userAnswer[i] !== this.correctAns[i]) {
                return false;
            }
        }
        return true;
    }
    /* Clear the user inputs */
    clearUserInputs() {
        if (this.templateType == 2) {
            this.questionDetails1.userAttemptDetails.userAnswer = [];
        }
        this.createQuestion();
        this.shuffledArray = [
            ...this.questionDetails1.choiceInteraction.simpleChoices
        ];
        this.itemService.hideAnswer(false);
    }
    /* Check the value changes */
    valueChanged() {
        let userArray = [];
        const userArray1 = [];
        if (this.templateType === 1) {
            if (this.questionDetails1.userAttemptDetails.userAnswer.length > 0) {
                for (const i of this.questionDetails1.userAttemptDetails.userAnswer) {
                    for (const item of this.questionDetails1.choiceInteraction
                        .simpleChoices) {
                        if (i === item.choiceId) {
                            this.shuffledArray.push(item);
                        }
                    }
                }
                this.userAnswer = this.shuffledArray;
            }
            else {
                this.shuffledArray = [
                    ...this.questionDetails1.choiceInteraction.simpleChoices
                ];
                this.userAnswer = [];
            }
        }
        else {
            if (this.questionDetails1.userAttemptDetails.userAnswer.length !== 0) {
                //set the user answer in done list first
                this.questionDetails1.userAttemptDetails.userAnswer.forEach(answerVal => {
                    const item = this.questionDetails1.choiceInteraction.simpleChoices.find(choice => choice.choiceId == answerVal);
                    if (item) {
                        this.done.push(item);
                    }
                });
                for (const item of this.questionDetails1.choiceInteraction
                    .simpleChoices) {
                    if (this.questionDetails1.userAttemptDetails.userAnswer.indexOf(item.choiceId) < 0) {
                        this.todo.push(item);
                    }
                }
                this.userAnswer = this.done;
            }
            else {
                this.todo = [...this.questionDetails1.choiceInteraction.simpleChoices];
                this.done = [];
                this.userAnswer = [];
            }
        }
        // Call the service to form the user answer
        if (this.userAnswer.length !== 0) {
            userArray = this.userAnswer;
            userArray.map(element => {
                userArray1.push(element.choiceId);
            });
            const answerObj = userArray1;
            this.itemService.userAnswerMethod(answerObj);
            this.itemService.validateAnswerValueMethod(this.validateUserAnswer());
        }
        else {
            this.itemService.userAnswerMethod([]);
            this.itemService.validateAnswerValueMethod(false);
        }
    }
    // Check the empty assets
    checkEmptyAsset() {
        return Object.keys(this.assetData).length === 0;
    }
    createQuestion() {
        this.userAnswer = [];
        this.shuffledArray = [];
        this.orginalArray = [];
        this.correctAns = [];
        this.dropDownValues = [];
        this.choiceDropDown = [];
        this.todo = [];
        this.answerRefArr = [];
        this.done = [];
        this.itemService.userAnswerMethod([]);
        this.itemService.validateAnswerValueMethod(false);
        this.templateType = this.questionDetails1.template;
        /**End Template2 configuration */
        this.itemService.userAnswerState.subscribe(answer => (this.userAnswerService = answer));
        this.assetData = this.questionDetails1.assets;
        if (this.assetData.length !== 0) {
            this.assetPosition = this.questionDetails1.assets[0]["assetsPosition"];
        }
        this.correctAns = [
            ...this.questionDetails1.choiceInteraction.simpleChoices
        ];
        this.correctAns.sort((a, b) => {
            return a.order - b.order;
        });
        this.orginalArray = [
            ...this.questionDetails1.choiceInteraction.simpleChoices
        ];
        for (let i = 0; i < this.orginalArray.length; i++) {
            this.choiceDropDown.push(i + 1);
            this.dropDownValues.push(i + 1);
        }
        this.valueChanged();
    }
    validateUserAnswer() {
        for (let i = 0, length = this.correctAns.length; i < length; i++) {
            if (this.userAnswer[i] !== this.correctAns[i]) {
                return false;
            }
        }
        return true;
    }
    drop(event) {
        if (this.templateType === 1) {
            moveItemInArray(this.shuffledArray, event.previousIndex, event.currentIndex);
        }
        else {
            if (event.previousContainer === event.container) {
                moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
            }
            else {
                transferArrayItem(event.previousContainer.data, event.container.data, event.previousIndex, event.currentIndex);
            }
            this.selectItem("", null);
        }
    }
    sortByDropdown(oldValue, newValue) {
        this.dropDownValues[oldValue] = oldValue + 1;
        moveItemInArray(this.shuffledArray, Number(oldValue), Number(newValue - 1));
    }
    /**Functions for template2 actions */
    selectItem(position, index) {
        this.selectedItem.itemPosition = position;
        this.selectedItem.index = index;
    }
    moveToDoneList() {
        if (this.selectedItem.itemPosition === "LEFT" &&
            this.selectedItem.index >= 0) {
            this.done.push(this.todo[this.selectedItem.index]);
            this.todo.splice(this.selectedItem.index, 1);
        }
        else if (this.selectedItem.itemPosition === "RIGHT" &&
            this.selectedItem.index >= 0) {
            this.todo.push(this.done[this.selectedItem.index]);
            this.done.splice(this.selectedItem.index, 1);
        }
        else {
        }
        this.checkingOrderTemplate2();
        this.selectItem("", null);
    }
    moveSelectedItem(action) {
        if (action === "UP") {
            let temp = this.done[this.selectedItem.index];
            this.done[this.selectedItem.index] = this.done[this.selectedItem.index - 1];
            this.done[this.selectedItem.index - 1] = temp;
        }
        else {
            let temp = this.done[this.selectedItem.index];
            this.done[this.selectedItem.index] = this.done[this.selectedItem.index + 1];
            this.done[this.selectedItem.index + 1] = temp;
        }
        this.checkingOrderTemplate2();
        this.selectItem("", null);
    }
    validateButtons(arrow) {
        if (this.done.length < 2 || !this.selectedItem.itemPosition) {
            return true;
        }
        else {
            if (arrow === "UP") {
                if (this.selectedItem.itemPosition === "LEFT" ||
                    (this.selectedItem.itemPosition === "RIGHT" &&
                        this.selectedItem.index == 0)) {
                    return true;
                }
                else {
                    return false;
                }
            }
            else {
                if (this.selectedItem.itemPosition === "LEFT" ||
                    (this.selectedItem.itemPosition === "RIGHT" &&
                        this.selectedItem.index == this.done.length - 1)) {
                    return true;
                }
                else {
                    return false;
                }
            }
        }
    }
    checkingOrderTemplate2() {
        let userArray = [];
        const userArray1 = [];
        this.userActions = this.compareOrginalArrayToUserArray();
        if (this.userActions === true) {
            this.userAnswer = this.done;
            userArray = this.userAnswer;
            userArray.map(element => {
                userArray1.push(element.choiceId);
            });
            const answerObj = userArray1;
            this.itemService.userAnswerMethod(answerObj);
            this.itemService.validateAnswerValueMethod(this.checkUserAnswer());
        }
        else {
            this.userAnswer = [];
            this.itemService.userAnswerMethod([]);
            this.itemService.validateAnswerValueMethod(false);
        }
        for (let i = 0, length = this.correctAns.length; i < length; i++) {
            if (this.userAnswer[i] !== this.correctAns[i]) {
                return false;
            }
        }
        return true;
    }
    checkUserAnswer() {
        for (let i = 0, length = this.correctAns.length; i < length; i++) {
            if (this.userAnswer[i] !== this.correctAns[i]) {
                return false;
            }
        }
        return true;
    }
};
DragAndDropComponent.ctorParameters = () => [
    { type: ItemService }
];
__decorate([
    Input("questionDetails")
], DragAndDropComponent.prototype, "questionCurrentData", null);
__decorate([
    Input()
], DragAndDropComponent.prototype, "examEngineType", void 0);
__decorate([
    Input()
], DragAndDropComponent.prototype, "canShowMetadata", void 0);
__decorate([
    Input()
], DragAndDropComponent.prototype, "isClearAnswer", void 0);
__decorate([
    Input()
], DragAndDropComponent.prototype, "isShowHide", void 0);
__decorate([
    Input()
], DragAndDropComponent.prototype, "imagePath", void 0);
__decorate([
    Input()
], DragAndDropComponent.prototype, "checkQuizSubmission", void 0);
__decorate([
    Input()
], DragAndDropComponent.prototype, "selectedTheme", void 0);
__decorate([
    Input()
], DragAndDropComponent.prototype, "fontSize", void 0);
__decorate([
    Input()
], DragAndDropComponent.prototype, "preferredTextFormat", void 0);
DragAndDropComponent = __decorate([
    Component({
        selector: "drag-and-drop",
        template: "<!--######################## QP Exam Engine Type ########################s-->\n<ng-container *ngIf=\"examEngineType == 'QP'\">\n  <div class=\"wk-row\">\n    <media-carousel\n      [imagePath]=\"imagePath\"\n      [assetData]=\"questionDetails1.assets\"\n      [assetsPosition]=\"assetPosition\"\n      *ngIf=\"\n        questionDetails1.assets &&\n        questionDetails1.assets.length != 0 &&\n        assetPosition != 'Bottom' &&\n        assetPosition != 'WithinText'\n      \"\n    ></media-carousel>\n    <div\n      style=\"margin-right:0px;\"\n      [ngClass]=\"{\n        'drag-drop-ull-width':\n          questionDetails1.assets.length != undefined &&\n          questionDetails1.assets.length != 0,\n        'wk-col-12':\n          questionDetails1.assets == undefined ||\n          questionDetails1.assets.length == 0 ||\n          assetPosition == 'WithinText',\n        'drag-drop-right-wk-col-8 right-assets-position-question':\n          assetPosition == 'Right',\n        'left-assets-position-question wk-column-8-width ':\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          <media-carousel\n            [imagePath]=\"imagePath\"\n            [assetData]=\"questionDetails1.assets\"\n            [assetsPosition]=\"assetPosition\"\n            *ngIf=\"\n              questionDetails1.assets &&\n              questionDetails1.assets.length != 0 &&\n              assetPosition == 'Bottom' &&\n              assetPosition != 'WithinText'\n            \"\n          ></media-carousel>\n          <!--Question text-->\n          <div class=\"msg-draganddrop\">\n            Arrange the answers into the correct order. Mouse user arrange by\n            clicking and dragging each answer to the desired location. Keyboard\n            user can arrange though drop down by selecting the right order.\n          </div>\n          <br /><br />\n          <div class=\"wkqp-field-header\" *ngIf=\"assetPosition != 'WithinText'\">\n            <div\n              class=\"mb20 normal-font wkqp-prewrap heading-h2\"\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          <!-- <bs-sortable [(ngModel)]=\"shuffledArray\" fieldName=\"label\" itemClass=\"dragdrop-anslabel\" itemActiveClass=\"sortable-item-active\"\n            placeholderItem=\"Drag here\" placeholderClass=\"sortable-item\" wrapperClass=\"sortable-wrapper\" (onChange)=\"checkingOrder();\">\n          </bs-sortable> -->\n          <!-- Template 1 -->\n          <ng-container *ngIf=\"templateType == 1\">\n            <div\n              cdkDropList\n              class=\"example-list\n              bottom-assets-position-question\"\n              (cdkDropListDropped)=\"drop($event); checkingOrder()\"\n            >\n              <ng-container *ngFor=\"let choice of shuffledArray; let i = index\">\n                <div class=\"dragdrop-anslabel\" cdkDrag>\n                  <!-- <span class=\"glyphicon glyphicon-th-list\"></span> {{choice.label}} -->\n                  <div class=\"drag-and-drop-left\">\n                    <span\n                      libGetFormatText\n                      [preferredTextFormat]=\"preferredTextFormat\"\n                      [plainText]=\"choice.label\"\n                      [richText]=\"choice.richLabel\"\n                    ></span>\n                  </div>\n                  <div class=\"wk-select-field dd-jump-order jump-order-select\">\n                    <select\n                      name=\"indexDropDown\"\n                      class=\"form-control\"\n                      [(ngModel)]=\"dropDownValues[i]\"\n                      (change)=\"\n                        sortByDropdown(i, dropDownValues[i]); checkingOrder()\n                      \"\n                    >\n                      <option\n                        [value]=\"item\"\n                        *ngFor=\"let item of choiceDropDown; let j = index\"\n                        >{{ item }}</option\n                      >\n                    </select>\n                  </div>\n                </div>\n                <div\n                  class=\"wkqp-alert-info wkqp-prewrap correct-rationale-section wkqp-prewrap mb-15\"\n                  *ngIf=\"\n                    (checkQuizSubmission == true || message) && choice.rationale\n                  \"\n                >\n                  <strong>Rationale: </strong>\n                  <span\n                    libGetFormatText\n                    [preferredTextFormat]=\"preferredTextFormat\"\n                    [plainText]=\"choice.rationale\"\n                    [richText]=\"choice.richRationale\"\n                  ></span>\n                </div>\n              </ng-container>\n            </div>\n          </ng-container>\n\n          <!-- Template 2 -->\n          <ng-container *ngIf=\"templateType == 2\">\n            <div class=\"wk-row\">\n              <div class=\"slide-left\">\n                <div\n                  cdkDropList\n                  #todoList=\"cdkDropList\"\n                  [cdkDropListData]=\"todo\"\n                  [cdkDropListConnectedTo]=\"[doneList]\"\n                  (cdkDropListDropped)=\"drop($event); checkingOrderTemplate2()\"\n                  class=\"drag-drop-div\"\n                >\n                  <div\n                    class=\"example-box-temp2\"\n                    *ngFor=\"let item of todo; let i = index\"\n                    cdkDrag\n                    (click)=\"selectItem('LEFT', i)\"\n                    [class.selected-box]=\"\n                      selectedItem.itemPosition === 'LEFT' &&\n                      selectedItem.index == i\n                    \"\n                  >\n                    <span\n                      libGetFormatText\n                      [preferredTextFormat]=\"preferredTextFormat\"\n                      [plainText]=\"item.label\"\n                      [richText]=\"item.richLabel\"\n                    ></span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"slide-center\">\n                <div class=\"drag-drop-btn-wrap\">\n                  <button\n                    class=\"drag-drop-right-arrow-btn\"\n                    [disabled]=\"true\"\n                    *ngIf=\"!selectedItem.itemPosition\"\n                  >\n                    <span class=\"wk-icon-angle-right\"></span>\n                  </button>\n                </div>\n                <div class=\"drag-drop-btn-wrap\">\n                  <button\n                    class=\"wkqp-button wk-button-primary drag-drop-select-btn-arrow\"\n                    (click)=\"moveToDoneList()\"\n                    *ngIf=\"selectedItem.itemPosition === 'LEFT'\"\n                  >\n                    <span class=\"wk-icon-angle-right\"></span>\n                  </button>\n                </div>\n                <button\n                  class=\"wkqp-button wk-button-primary\"\n                  (click)=\"moveToDoneList()\"\n                  *ngIf=\"selectedItem.itemPosition === 'RIGHT'\"\n                >\n                  <span class=\"wk-icon-angle-left\"></span>\n                </button>\n              </div>\n              <div class=\"slide-right\">\n                <div\n                  cdkDropList\n                  #doneList=\"cdkDropList\"\n                  [cdkDropListData]=\"done\"\n                  [cdkDropListConnectedTo]=\"[todoList]\"\n                  (cdkDropListDropped)=\"drop($event); checkingOrderTemplate2()\"\n                  class=\"drag-drop-div\"\n                >\n                  <div\n                    class=\"example-box-temp2\"\n                    *ngFor=\"let item of done; let i = index\"\n                    cdkDrag\n                    (click)=\"selectItem('RIGHT', i)\"\n                    [class.selected-box]=\"\n                      selectedItem.itemPosition === 'RIGHT' &&\n                      selectedItem.index == i\n                    \"\n                  >\n                    <span\n                      libGetFormatText\n                      [preferredTextFormat]=\"preferredTextFormat\"\n                      [plainText]=\"item.label\"\n                      [richText]=\"item.richLabel\"\n                    ></span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"slide-upanddown\" *ngIf=\"done.length > 0\">\n                <div class=\"slide-up\">\n                  <button\n                    class=\"up-arrow-btn\"\n                    (click)=\"moveSelectedItem('UP')\"\n                    [hidden]=\"validateButtons('UP')\"\n                  >\n                    <span class=\"wk-icon-angle-up\"></span>\n                  </button>\n                </div>\n                <div class=\"slide-down\">\n                  <button\n                    class=\"down-arrow-btn\"\n                    (click)=\"moveSelectedItem('DOWN')\"\n                    [hidden]=\"validateButtons('DOWN')\"\n                  >\n                    <span class=\"wk-icon-angle-down\"></span>\n                  </button>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n        <div *ngIf=\"canShowMetadata && message != true\">\n          <lib-metadata [itemData]=\"questionDetails1\"></lib-metadata>\n        </div>\n        <!--User answer and correct answer Block-->\n        <ng-container *ngIf=\"message\">\n          <p\n            class=\"wkqp-prewrap  mb20\"\n            [ngClass]=\"\n              checkingOrder()\n                ? 'wkqp-alert-success wkqp-success'\n                : 'wkqp-alert-danger wkqp-danger'\n            \"\n            *ngIf=\"userActions && templateType == 1\"\n          >\n            <strong>Your Response:</strong>\n          </p>\n          <p\n            class=\"wkqp-prewrap  mb20\"\n            [ngClass]=\"\n              checkingOrderTemplate2()\n                ? 'wkqp-alert-success\n            wkqp-success'\n                : 'wkqp-alert-danger wkqp-danger'\n            \"\n            *ngIf=\"userActions && templateType == 2\"\n          >\n            <strong>Your Response:</strong>\n          </p>\n          <div *ngIf=\"userActions\" class=\"mb20\">\n            <div *ngFor=\"let item of userAnswer; let i = index\">\n              <span class=\"pr1rem\">{{ i + 1 }}) </span>\n              <span\n                libGetFormatText\n                [preferredTextFormat]=\"preferredTextFormat\"\n                [plainText]=\"item.label\"\n                [richText]=\"item.richLabel\"\n              ></span>\n            </div>\n          </div>\n          <p\n            class=\"wkqp-prewrap wkqp-alert-success wkqp-success  mb20\"\n            *ngIf=\"\n              templateType == 1 ? !checkingOrder() : !checkingOrderTemplate2()\n            \"\n          >\n            <strong>Correct Response:</strong>\n          </p>\n          <div\n            *ngIf=\"\n              templateType == 1 ? !checkingOrder() : !checkingOrderTemplate2()\n            \"\n            class=\"mb20\"\n          >\n            <div *ngFor=\"let item of correctAns; let i = index\">\n              <span class=\"pr1rem\">{{ i + 1 }}) </span>\n              <span\n                libGetFormatText\n                [preferredTextFormat]=\"preferredTextFormat\"\n                [plainText]=\"item.label\"\n                [richText]=\"item.richLabel\"\n              ></span>\n            </div>\n          </div>\n          <div *ngIf=\"canShowMetadata\">\n            <lib-metadata [itemData]=\"questionDetails1\"></lib-metadata>\n          </div>\n        </ng-container>\n      </div>\n    </div>\n    <div class=\"rationale-remedation-block mb20\" *ngIf=\"message\">\n      <lib-rationale\n        [itemData]=\"questionDetails1.modelFeedback\"\n        [preferredTextFormat]=\"preferredTextFormat\"\n      ></lib-rationale>\n\n      <lib-remediation\n        [itemData]=\"questionDetails1.remediationLinks\"\n        [preferredTextFormat]=\"preferredTextFormat\"\n      ></lib-remediation>\n    </div>\n  </div>\n</ng-container>\n\n<!--######################## USMLE Exam Engine Type ########################s-->\n<ng-container *ngIf=\"examEngineType == 'USMLE'\">\n  <div class=\"wk-row\">\n    <media-carousel\n      [imagePath]=\"imagePath\"\n      [assetData]=\"questionDetails1.assets\"\n      [assetsPosition]=\"assetPosition\"\n      *ngIf=\"\n        questionDetails1.assets &&\n        questionDetails1.assets.length != 0 &&\n        assetPosition != 'Bottom' &&\n        assetPosition != 'WithinText'\n      \"\n    ></media-carousel>\n    <div\n      style=\"margin-right:0px;\"\n      [ngClass]=\"{\n        'wk-col-8':\n          questionDetails1.assets.length != undefined &&\n          questionDetails1.assets.length != 0,\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          <media-carousel\n            [imagePath]=\"imagePath\"\n            [assetData]=\"questionDetails1.assets\"\n            [assetsPosition]=\"assetPosition\"\n            *ngIf=\"\n              questionDetails1.assets &&\n              questionDetails1.assets.length != 0 &&\n              assetPosition == 'Bottom' &&\n              assetPosition != 'WithinText'\n            \"\n          ></media-carousel>\n          <!--Question text-->\n          <div\n            class=\"msg-draganddrop\"\n            [ngStyle]=\"{\n              'background-color': selectedTheme == true ? 'black' : 'white',\n              color: selectedTheme == true ? 'white' : '#474747'\n            }\"\n          >\n            Arrange the answers into the correct order. Mouse user arrange by\n            clicking and dragging each answer to the desired location. Keyboard\n            user can arrange though drop down by selecting the right order.\n          </div>\n          <br /><br />\n          <div class=\"wkqp-field-header\" *ngIf=\"assetPosition != 'WithinText'\">\n            <div class=\"mb20 normal-font wkqp-prewrap heading-h2\">\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\n          <ng-container *ngIf=\"templateType == 1\">\n            <div\n              cdkDropList\n              class=\"example-list bottom-assets-position-question\"\n              (cdkDropListDropped)=\"drop($event); checkingOrder()\"\n            >\n              <ng-container *ngFor=\"let choice of shuffledArray; let i = index\">\n                <div\n                  class=\"dragdrop-anslabel\"\n                  cdkDrag\n                  [ngStyle]=\"{\n                    'background-color':\n                      selectedTheme == true ? 'black' : 'white',\n                    color: selectedTheme == true ? 'white' : '#474747',\n                    'font-size': fontSize\n                  }\"\n                >\n                  <!-- <span class=\"glyphicon glyphicon-th-list\"></span> {{choice.label}} -->\n                  <div class=\"drag-and-drop-left\">\n                    <span>{{ choice.label }}</span>\n                  </div>\n                  <div class=\"wkqp-select-field dd-jump-order\">\n                    <select\n                      name=\"indexDropDown\"\n                      class=\"form-control\"\n                      [(ngModel)]=\"dropDownValues[i]\"\n                      (change)=\"\n                        sortByDropdown(i, dropDownValues[i]); checkingOrder()\n                      \"\n                    >\n                      <option\n                        [value]=\"item\"\n                        *ngFor=\"let item of choiceDropDown; let j = index\"\n                        >{{ item }}</option\n                      >\n                    </select>\n                  </div>\n                </div>\n                <div\n                  class=\"wkqp-alert-info wkqp-prewrap correct-rationale-section wkqp-prewrap mb-10\"\n                  *ngIf=\"\n                    (checkQuizSubmission == true || message) && choice.rationale\n                  \"\n                >\n                  <strong>Rationale: </strong>{{ choice.rationale }}\n                </div>\n              </ng-container>\n            </div>\n          </ng-container>\n\n          <!-- Template 2 -->\n          <ng-container *ngIf=\"templateType == 2\">\n            <div class=\"wk-row\">\n              <div class=\"wk-col-4\">\n                <div class=\"example-container-temp2\">\n                  <div\n                    cdkDropList\n                    #todoList=\"cdkDropList\"\n                    [cdkDropListData]=\"todo\"\n                    [cdkDropListConnectedTo]=\"[doneList]\"\n                    class=\"example-list-temp2\"\n                    (cdkDropListDropped)=\"\n                      drop($event); checkingOrderTemplate2()\n                    \"\n                    [ngStyle]=\"{\n                      'background-color':\n                        selectedTheme == true ? 'black' : 'white',\n                      color: selectedTheme == true ? 'white' : '#474747',\n                      'font-size': fontSize\n                    }\"\n                  >\n                    <div\n                      class=\"example-box-temp2\"\n                      *ngFor=\"let item of todo; let i = index\"\n                      cdkDrag\n                      (click)=\"selectItem('LEFT', i)\"\n                      [class.selected-box]=\"\n                        selectedItem.itemPosition === 'LEFT' &&\n                        selectedItem.index == i\n                      \"\n                    >\n                      {{ item.label }}\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"wk-col-1\">\n                <button\n                  class=\"wkqp-button wk-button-primary\"\n                  [disabled]=\"true\"\n                  *ngIf=\"!selectedItem.itemPosition\"\n                >\n                  <span class=\"wk-icon-angle-right\"></span>\n                </button>\n\n                <button\n                  class=\"wkqp-button wk-button-primary\"\n                  (click)=\"moveToDoneList()\"\n                  *ngIf=\"selectedItem.itemPosition === 'LEFT'\"\n                >\n                  <span class=\"wk-icon-angle-right\"></span>\n                </button>\n\n                <button\n                  class=\"wkqp-button wk-button-primary\"\n                  (click)=\"moveToDoneList()\"\n                  *ngIf=\"selectedItem.itemPosition === 'RIGHT'\"\n                >\n                  <span class=\"wk-icon-angle-left\"></span>\n                </button>\n              </div>\n              <div class=\"wk-col-4\">\n                <div class=\"example-container-temp2\">\n                  <div\n                    cdkDropList\n                    #doneList=\"cdkDropList\"\n                    [cdkDropListData]=\"done\"\n                    [cdkDropListConnectedTo]=\"[todoList]\"\n                    class=\"example-list-temp2\"\n                    (cdkDropListDropped)=\"\n                      drop($event); checkingOrderTemplate2()\n                    \"\n                    [ngStyle]=\"{\n                      'background-color':\n                        selectedTheme == true ? 'black' : 'white',\n                      color: selectedTheme == true ? 'white' : '#474747',\n                      'font-size': fontSize\n                    }\"\n                  >\n                    <div\n                      class=\"example-box-temp2\"\n                      *ngFor=\"let item of done; let i = index\"\n                      cdkDrag\n                      (click)=\"selectItem('RIGHT', i)\"\n                      [class.selected-box]=\"\n                        selectedItem.itemPosition === 'RIGHT' &&\n                        selectedItem.index == i\n                      \"\n                    >\n                      {{ item.label }}\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"wk-col-1 pull-left\" *ngIf=\"done.length > 0\">\n                <button\n                  class=\"wkqp-button wk-button-primary m-1px\"\n                  (click)=\"moveSelectedItem('UP')\"\n                  [disabled]=\"validateButtons('UP')\"\n                >\n                  <span class=\"wk-icon-angle-up\"></span>\n                </button>\n                <button\n                  class=\"wkqp-button wk-button-primary m-1px\"\n                  (click)=\"moveSelectedItem('DOWN')\"\n                  [disabled]=\"validateButtons('DOWN')\"\n                >\n                  <span class=\"wk-icon-angle-down\"></span>\n                </button>\n              </div>\n            </div>\n          </ng-container>\n\n          <!--User answer and correct answer Block-->\n          <ng-container *ngIf=\"checkQuizSubmission == true\">\n            <p\n              class=\"wkqp-prewrap \"\n              [ngClass]=\"\n                checkingOrder()\n                  ? 'wkqp-alert-success wkqp-success'\n                  : 'wkqp-alert-danger\n              wkqp-danger'\n              \"\n              *ngIf=\"userActions && templateType == 1\"\n            >\n              <strong>Your Response:</strong>\n            </p>\n            <p\n              class=\"wkqp-prewrap \"\n              [ngClass]=\"\n                checkingOrderTemplate2()\n                  ? 'wkqp-alert-success\n              wkqp-success'\n                  : 'wkqp-alert-danger wkqp-danger'\n              \"\n              *ngIf=\"userActions && templateType == 2\"\n            >\n              <strong>Your Response:</strong>\n            </p>\n            <div *ngIf=\"userActions\" class=\"pb10\">\n              <div *ngFor=\"let item of userAnswer; let i = index\">\n                <span>{{ i + 1 }}) </span>\n                <span>{{ item.label }}</span>\n              </div>\n            </div>\n            <p\n              class=\"wkqp-prewrap wkqp-alert-success wkqp-success \"\n              *ngIf=\"\n                templateType == 1 ? !checkingOrder() : !checkingOrderTemplate2()\n              \"\n            >\n              <strong>Correct Response:</strong>\n            </p>\n            <div\n              *ngIf=\"\n                templateType == 1 ? !checkingOrder() : !checkingOrderTemplate2()\n              \"\n              class=\"pb10\"\n            >\n              <div *ngFor=\"let item of correctAns; let i = index\">\n                <span>{{ i + 1 }}) </span>\n                <span>{{ item.label }}</span>\n              </div>\n            </div>\n            <p\n              *ngIf=\"\n                questionDetails1.modelFeedback[0] &&\n                questionDetails1.modelFeedback[0].length !== 0\n              \"\n            >\n              <strong>Rationale: </strong>\n              <span>{{ questionDetails1.modelFeedback[0].feedbackText }}</span>\n            </p>\n            <div\n              *ngIf=\"\n                questionDetails1.remediationLinks &&\n                questionDetails1.remediationLinks.length !== 0\n              \"\n            >\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        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n\n<!--DRAG & DROP FOR NCLEX -->\n<ng-container *ngIf=\"examEngineType == 'NCLEX'\">\n  <div class=\"wk-row\">\n    <media-carousel\n      [imagePath]=\"imagePath\"\n      [assetData]=\"questionDetails1.assets\"\n      [assetsPosition]=\"assetPosition\"\n      *ngIf=\"\n        questionDetails1.assets &&\n        questionDetails1.assets.length != 0 &&\n        assetPosition != 'Bottom' &&\n        assetPosition != 'WithinText'\n      \"\n    ></media-carousel>\n    <div\n      style=\"margin-right:0px;\"\n      [ngClass]=\"{\n        'wk-col-8':\n          questionDetails1.assets.length != undefined &&\n          questionDetails1.assets.length != 0,\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            <item-text-assets\n              [promptText]=\"questionDetails1.promptText\"\n              [imagePath]=\"imagePath\"\n              [assetData]=\"assetData\"\n              [assetsPosition]=\"assetPosition\"\n            ></item-text-assets>\n          </div>\n          <div class=\"msg-draganddrop\">\n            Arrange the answers into the correct order. Mouse user arrange by\n            clicking and dragging each answer to the desired location. Keyboard\n            user can arrange though drop down by selecting the right order.\n          </div>\n          <!-- <div class=\"wkqp-field-header\" ng-if=\"assetPosition=='WithinText'\">\n              <item-text-assets prompttext=\"{{questionDetails1.promptText}}\" itemtype=\"questionDetails1.labelText\" assets=\"questionDetails1.assets\"></item-text-assets>\n            </div> -->\n          <media-carousel\n            [imagePath]=\"imagePath\"\n            [assetData]=\"questionDetails1.assets\"\n            [assetsPosition]=\"assetPosition\"\n            *ngIf=\"\n              questionDetails1.assets &&\n              questionDetails1.assets.length != 0 &&\n              assetPosition == 'Bottom' &&\n              assetPosition != 'WithinText'\n            \"\n          ></media-carousel>\n          <!--Question text-->\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          <!-- <bs-sortable [(ngModel)]=\"shuffledArray\" fieldName=\"label\" itemClass=\"dragdrop-anslabel\" itemActiveClass=\"sortable-item-active\"\n              placeholderItem=\"Drag here\" placeholderClass=\"sortable-item\" wrapperClass=\"sortable-wrapper\" (onChange)=\"checkingOrder();\">\n            </bs-sortable> -->\n          <!-- Template 1 -->\n          <ng-container *ngIf=\"templateType == 1\">\n            <div\n              cdkDropList\n              class=\"example-list bottom-assets-position-question\"\n              (cdkDropListDropped)=\"drop($event); checkingOrder()\"\n            >\n              <div\n                class=\"dragdrop-anslabel\"\n                *ngFor=\"let choice of shuffledArray; let i = index\"\n                cdkDrag\n              >\n                <!-- <span class=\"glyphicon glyphicon-th-list\"></span> {{choice.label}} -->\n                <div class=\"drag-and-drop-left\">\n                  <span>{{ choice.label }}</span>\n                </div>\n                <div class=\"wkqp-select-field dd-jump-order\">\n                  <select\n                    name=\"indexDropDown\"\n                    class=\"form-control\"\n                    [(ngModel)]=\"dropDownValues[i]\"\n                    (change)=\"\n                      sortByDropdown(i, dropDownValues[i]); checkingOrder()\n                    \"\n                  >\n                    <option\n                      [value]=\"item\"\n                      *ngFor=\"let item of choiceDropDown; let j = index\"\n                      >{{ item }}</option\n                    >\n                  </select>\n                </div>\n              </div>\n            </div>\n          </ng-container>\n\n          <!-- Template 2 -->\n          <ng-container *ngIf=\"templateType == 2\">\n            <div class=\"wk-row\">\n              <div class=\"wk-col-4\">\n                <div class=\"example-container-temp2\">\n                  <div\n                    cdkDropList\n                    #todoList=\"cdkDropList\"\n                    [cdkDropListData]=\"todo\"\n                    [cdkDropListConnectedTo]=\"[doneList]\"\n                    class=\"example-list-temp2\"\n                    (cdkDropListDropped)=\"\n                      drop($event); checkingOrderTemplate2()\n                    \"\n                  >\n                    <div\n                      class=\"example-box-temp2\"\n                      *ngFor=\"let item of todo; let i = index\"\n                      cdkDrag\n                      (click)=\"selectItem('LEFT', i)\"\n                      [class.selected-box]=\"\n                        selectedItem.itemPosition === 'LEFT' &&\n                        selectedItem.index == i\n                      \"\n                    >\n                      {{ item.label }}\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"wk-col-1\">\n                <button\n                  class=\"wkqp-button wk-button-primary\"\n                  [disabled]=\"true\"\n                  *ngIf=\"!selectedItem.itemPosition\"\n                >\n                  <span class=\"wk-icon-angle-right\"></span>\n                </button>\n\n                <button\n                  class=\"wkqp-button wk-button-primary\"\n                  (click)=\"moveToDoneList()\"\n                  *ngIf=\"selectedItem.itemPosition === 'LEFT'\"\n                >\n                  <span class=\"wk-icon-angle-right\"></span>\n                </button>\n\n                <button\n                  class=\"wkqp-button wk-button-primary\"\n                  (click)=\"moveToDoneList()\"\n                  *ngIf=\"selectedItem.itemPosition === 'RIGHT'\"\n                >\n                  <span class=\"wk-icon-angle-left\"></span>\n                </button>\n              </div>\n              <div class=\"wk-col-4\">\n                <div class=\"example-container-temp2\">\n                  <div\n                    cdkDropList\n                    #doneList=\"cdkDropList\"\n                    [cdkDropListData]=\"done\"\n                    [cdkDropListConnectedTo]=\"[todoList]\"\n                    class=\"example-list-temp2\"\n                    (cdkDropListDropped)=\"\n                      drop($event); checkingOrderTemplate2()\n                    \"\n                  >\n                    <div\n                      class=\"example-box-temp2\"\n                      *ngFor=\"let item of done; let i = index\"\n                      cdkDrag\n                      (click)=\"selectItem('RIGHT', i)\"\n                      [class.selected-box]=\"\n                        selectedItem.itemPosition === 'RIGHT' &&\n                        selectedItem.index == i\n                      \"\n                    >\n                      {{ item.label }}\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"wk-col-1 pull-left\" *ngIf=\"done.length > 0\">\n                <button\n                  class=\"wkqp-button wk-button-primary m-1px\"\n                  (click)=\"moveSelectedItem('UP')\"\n                  [disabled]=\"validateButtons('UP')\"\n                >\n                  <span class=\"wk-icon-angle-up\"></span>\n                </button>\n                <button\n                  class=\"wkqp-button wk-button-primary m-1px\"\n                  (click)=\"moveSelectedItem('DOWN')\"\n                  [disabled]=\"validateButtons('DOWN')\"\n                >\n                  <span class=\"wk-icon-angle-down\"></span>\n                </button>\n              </div>\n            </div>\n          </ng-container>\n        </div>\n      </div>\n      <!--User answer and correct answer Block-->\n      <ng-container *ngIf=\"checkQuizSubmission == true\">\n        <p\n          class=\"wkqp-prewrap \"\n          [ngClass]=\"\n            templateType == 1\n              ? checkingOrder()\n              : checkingOrderTemplate2()\n              ? 'wkqp-alert-success\n          wkqp-success'\n              : 'wkqp-alert-danger wkqp-danger'\n          \"\n          *ngIf=\"userActions\"\n        >\n          <strong>Your Response:</strong>\n        </p>\n        <div *ngIf=\"userActions\" class=\"pb10\">\n          <div *ngFor=\"let item of userAnswer; let i = index\">\n            <span>{{ i + 1 }}) </span>\n            <span>{{ item.label }}</span>\n          </div>\n        </div>\n        <p\n          class=\"wkqp-prewrap wkqp-alert-success wkqp-success \"\n          *ngIf=\"\n            templateType == 1 ? !checkingOrder() : !checkingOrderTemplate2()\n          \"\n        >\n          <strong>Correct Response:</strong>\n        </p>\n        <div\n          *ngIf=\"\n            templateType == 1 ? !checkingOrder() : !checkingOrderTemplate2()\n          \"\n          class=\"pb10\"\n        >\n          <div *ngFor=\"let item of correctAns; let i = index\">\n            <span>{{ i + 1 }}) </span>\n            <span>{{ item.label }}</span>\n          </div>\n        </div>\n        <p\n          *ngIf=\"\n            questionDetails1.modelFeedback[0] &&\n            questionDetails1.modelFeedback[0].length !== 0\n          \"\n        >\n          <strong>Rationale: </strong>\n          <span>{{ questionDetails1.modelFeedback[0].feedbackText }}</span>\n        </p>\n        <div\n          *ngIf=\"\n            questionDetails1.remediationLinks &&\n            questionDetails1.remediationLinks.length !== 0\n          \"\n        >\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    </div>\n  </div>\n</ng-container>\n",
        styles: [".example-container{width:400px;max-width:100%;margin:0 25px 25px 0;display:inline-block;vertical-align:top}.example-list{border:1px solid #ccc;min-height:60px;background:#fff;border-radius:4px;overflow:hidden;display:block}.example-box{padding:20px 10px;border-bottom:1px solid #ccc;color:rgba(0,0,0,.87);display:flex;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.cdk-drag-placeholder{opacity:0}.cdk-drag-animating{transition:transform 250ms cubic-bezier(0,0,.2,1)}.example-box:last-child{border:none}.example-list.cdk-drop-list-dragging .example-box:not(.cdk-drag-placeholder){transition:transform 250ms cubic-bezier(0,0,.2,1)}.sortable-item{padding:6px 12px;margin-bottom:4px;font-size:14px;line-height:1.4em;text-align:center;cursor:-webkit-grab;cursor:grab;border:1px solid #adadad;border-radius:4px}.dragdrop-anslabel{padding:10px 10px 10px 40px;border:1px solid #dadada;float:left;width:100%;font-size:16px;cursor:pointer;margin-bottom:5px}.drag-and-drop-left{padding-top:7px;float:left}.dragdrop-anslabel .wkqp-select-field.dd-jump-order{margin-bottom:0}.wkqp-select-field>select{font-family:'Helvetica Neue',Helvetica,Roboto,Arial,sans-serif!important;color:#000!important}.wkqp-select-field{position:relative}.dd-jump-order{float:right;width:15%}.selected-box{border:2px solid #1d6ea775!important}.m-1px{margin:.25vh!important}.example-container-temp2{width:400px;max-width:100%;margin:0 25px 10px 0;display:inline-block;vertical-align:top}.example-list-temp2{min-height:60px;background:#fff;border-radius:4px;overflow:hidden;display:block;height:54vh}.example-box-temp2{padding:10px 10px 10px 15px;border:1px solid #dadada;float:left;width:100%;font-size:16px;cursor:pointer;margin-bottom:5px}.wkqp-button:disabled{color:#000!important;font-weight:700!important;background-color:#eee!important}.temp-draganddrop{float:left;width:100%;margin:0;padding-bottom:10px;color:#000}.mb-15{margin-bottom:15px}.example-box-temp2:hover{border:1px solid!important;color:var(--text-color);background-color:var(--secondary-color)}.drag-drop-right-wk-col-8{width:64%!important;padding:0}.drag-drop-div{width:100%;min-height:100%}.jump-order-select select{height:2.3rem;line-height:1;padding:.4875rem 1rem;border-radius:0;border:1px solid #dadada;outline:0}.jump-order-select select:focus,.jump-order-select select:hover{border:1px solid #474747;border-radius:0;outline:0}.wk-select-field.jump-order-select::after{top:.5em}"]
    })
], DragAndDropComponent);
export { DragAndDropComponent };
//# sourceMappingURL=data:application/json;base64, 