<ion-list *ngIf="ddQuestion && (ddQuestion.text || ddQuestion.text === '')" class="addon-qtype-ddwtos-container">
    <!-- Content is outside the core-loading to let the script calculate drag items position -->
    <core-loading [hideUntil]="ddQuestion.loaded"></core-loading>

    <ion-item class="ion-text-wrap addon-qtype-ddwtos-container" [hidden]="!ddQuestion.loaded">
        <ion-label>
            <ion-card *ngIf="!ddQuestion.readOnly" class="core-info-card">
                <ion-item>
                    <ion-icon name="fas-info-circle" slot="start" aria-hidden="true"></ion-icon>
                    <ion-label>{{ 'core.question.howtodraganddrop' | translate }}</ion-label>
                </ion-item>
            </ion-card>
            <core-format-text [component]="component" [componentId]="componentId" [text]="ddQuestion.text"
                [contextLevel]="contextLevel" [contextInstanceId]="contextInstanceId" [courseId]="courseId" #questiontext
                (afterRender)="textRendered()">
            </core-format-text>
            <core-format-text *ngIf="ddQuestion.answers" [component]="component" [componentId]="componentId"
                [text]="ddQuestion.answers" [filter]="false" (afterRender)="answersRendered()">
            </core-format-text>
            <div class="drags"></div>
        </ion-label>
    </ion-item>
</ion-list>
