Vmeda.Online/src/addon/mod/survey/components/index/addon-mod-survey-index.html

<!-- Buttons to add to the header. -->
<core-navbar-buttons end>
    <core-context-menu>
        <core-context-menu-item *ngIf="externalUrl" [priority]="900" [content]="'core.openinbrowser' | translate" [href]="externalUrl" [iconAction]="'open'"></core-context-menu-item>
        <core-context-menu-item *ngIf="description" [priority]="800" [content]="'core.moduleintro' | translate" (action)="expandDescription()" [iconAction]="'arrow-forward'"></core-context-menu-item>
        <core-context-menu-item *ngIf="blog" [priority]="750" content="{{'addon.blog.blog' | translate}}" [iconAction]="'fa-newspaper-o'" (action)="gotoBlog($event)"></core-context-menu-item>
        <core-context-menu-item *ngIf="loaded && !hasOffline && isOnline" [priority]="700" [content]="'core.refresh' | translate" (action)="doRefresh(null, $event)" [iconAction]="refreshIcon" [closeOnClick]="false"></core-context-menu-item>
        <core-context-menu-item *ngIf="loaded && hasOffline && isOnline"  [priority]="600" [content]="'core.settings.synchronizenow' | translate" (action)="doRefresh(null, $event, true)" [iconAction]="syncIcon" [closeOnClick]="false"></core-context-menu-item>
        <core-context-menu-item *ngIf="prefetchStatusIcon" [priority]="500" [content]="prefetchText" (action)="prefetch($event)" [iconAction]="prefetchStatusIcon" [closeOnClick]="false"></core-context-menu-item>
        <core-context-menu-item *ngIf="size" [priority]="400" [content]="size" [iconDescription]="'cube'" (action)="removeFiles()" [iconAction]="'trash'"></core-context-menu-item>
    </core-context-menu>
</core-navbar-buttons>

<!-- Content. -->
<core-loading [hideUntil]="loaded" class="core-loading-center safe-area-page">

    <core-course-module-description *ngIf="survey && !survey.surveydone && !hasOffline" [description]="description" [component]="component" [componentId]="componentId"></core-course-module-description>

    <!-- Survey already done -->
    <ion-card padding *ngIf="survey && survey.surveydone">  
        <p padding>{{ 'addon.mod_survey.surveycompletednograph' | translate }}</p>
        <a ion-button block icon-start [href]="externalUrl" core-link>
            <ion-icon name="open" start></ion-icon>
            {{ 'addon.mod_survey.results' | translate }}
        </a>
    </ion-card>

    <!-- Survey done in offline but not synchronized -->
    <div class="core-warning-card" icon-start *ngIf="hasOffline">
        <ion-icon name="warning"></ion-icon>
        {{ 'core.hasdatatosync' | translate: {$a: moduleName} }}
    </div>

    <!-- Survey questions -->
    <section *ngIf="survey && !survey.surveydone && !hasOffline && questions && questions.length">

        <ng-container *ngFor="let question of questions; let index=index; let isEven=even;">
            <!-- Parent question (Category header) -->
            <div *ngIf="question.multiArray && question.multiArray.length" [attr.padding-top]="index == 1">
                <h3 padding-horizontal>{{ question.text }}</h3>
                <ion-grid no-padding>
                    <ion-row no-padding align-items-center class="hidden-phone">
                        <ion-col col-7>
                            <div padding>{{ 'addon.mod_survey.responses' | translate }}</div>
                        </ion-col>
                        <ion-col text-center *ngFor="let option of question.optionsArray">
                            <div padding>{{ option }}</div>
                        </ion-col>
                    </ion-row>
                </ion-grid>
                <ion-item text-wrap [class.even]="isEven" class="addon-mod_survey-question">
                    <p>{{ question.intro }}</p>
                </ion-item>
            </div>

            <!-- Subquestion -->
            <ion-grid no-padding *ngIf="question.parent !== 0" text-wrap [class.even]="isEven">
                <ion-row no-padding nowrap align-items-center radio-group [(ngModel)]="answers[question.name]" [required]="question.required">
                    <ion-col col-7>
                        <ion-label padding-horizontal [core-mark-required]="question.required" id="addon-mod_survey-{{question.name}}"><strong>{{question.num}}.</strong> {{ question.text }}</ion-label>
                    </ion-col>

                    <!-- Tablet view: radio buttons -->
                    <ion-col class="hidden-phone" text-center *ngFor="let option of question.optionsArray; let value=index;">
                        <ion-radio [value]="value + 1" [attr.aria-labelledby]="'addon-mod_survey-'+question.name"></ion-radio>
                    </ion-col>
                    <ion-col class="hidden-tablet">
                        <ion-select padding [(ngModel)]="answers[question.name]" [attr.aria-labelledby]="'addon-mod_survey-'+question.name" interface="action-sheet" [required]="question.required">
                            <ion-option value="-1" selected disabled>{{ 'core.choose' | translate }}</ion-option>
                            <ion-option *ngFor="let option of question.optionsArray; let value=index;" [value]="value +1">{{option}}</ion-option>
                        </ion-select>
                    </ion-col>
                </ion-row>
            </ion-grid>

            <!-- Single question (don't belong to a category) -->
            <ng-container *ngIf="(!question.multiArray || question.multiArray.length == 0) && question.parent === 0">
                <ion-grid no-padding text-wrap *ngIf="question.type > 0" [class.even]="isEven">
                    <ion-row no-padding align-items-center>
                        <ion-col col-7>
                            <ion-label [core-mark-required]="question.required" padding-horizontal id="addon-mod_survey-{{question.name}}"><strong>{{question.num}}.</strong> {{ question.text }}</ion-label>
                        </ion-col>
                        <ion-col col-5>
                            <ion-select padding [(ngModel)]="answers[question.name]" [attr.aria-labelledby]="'addon-mod_survey-'+question.name" interface="action-sheet" [required]="question.required">
                            <ion-option *ngFor="let option of question.optionsArray; let value=index;" [value]="value">{{option}}</ion-option>
                        </ion-select>
                        </ion-col>
                    </ion-row>
                </ion-grid>

                <ion-item *ngIf="question.type === 0" text-wrap [class.even]="isEven">
                    <ion-label stacked [core-mark-required]="question.required" id="addon-mod_survey-{{question.name}}">
                        <strong>{{question.num}}.</strong> {{ question.text }}
                    </ion-label>
                    <ion-textarea [(ngModel)]="answers[question.name]" class="addon-mod_survey-textarea" [attr.aria-label]="question.text" [required]="question.required"></ion-textarea>
                </ion-item>
            </ng-container>

        </ng-container>

        <ion-item>
            <button ion-button block (click)="submit()" [disabled]="!isValidResponse()">{{ 'core.submit' | translate }}</button>
        </ion-item>
    </section>

</core-loading>