Vmeda.Online/src/addons/mod/feedback/pages/form/form.html

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="'core.back' | translate"></ion-back-button>
        </ion-buttons>
        <h1>
            <core-format-text [text]="title" contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId">
            </core-format-text>
        </h1>
    </ion-toolbar>
</ion-header>
<ion-content>
    <core-loading [hideUntil]="feedbackLoaded">
        <ng-container *ngIf="items && items.length">
            <ion-list class="ion-no-margin">
                <ion-item class="ion-text-wrap">
                    <ion-label>
                        <h2>{{ 'addon.mod_feedback.mode' | translate }}</h2>
                        <p *ngIf="access!.isanonymous">{{ 'addon.mod_feedback.anonymous' | translate }}</p>
                        <p *ngIf="!access!.isanonymous">{{ 'addon.mod_feedback.non_anonymous' | translate }}</p>
                    </ion-label>
                </ion-item>
                <ng-container *ngFor="let item of items">
                    <core-spacer *ngIf="item.typ == 'pagebreak'"></core-spacer>
                    <ng-container *ngIf="item.typ != 'pagebreak'">
                        <ion-item class="ion-text-wrap addon-mod_feedback-item" [color]="item.dependitem > 0 ? 'light' : ''"
                            [class.core-danger-item]="item.isEmpty || item.hasError">
                            <ion-label [position]="item.hasTextInput ? 'stacked' : undefined">
                                <p *ngIf="item.name" [core-mark-required]="item.required">
                                    <span *ngIf="feedback!.autonumbering && item.itemnumber">{{item.itemnumber}}. </span>
                                    <core-format-text [component]="component" [componentId]="cmId" [text]="item.name"
                                        contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId" [wsNotFiltered]="true">
                                    </core-format-text>
                                    <span *ngIf="item.postfix" class="addon-mod_feedback-postfix">{{item.postfix}}</span>
                                </p>
                                <p *ngIf="item.templateName == 'label'">
                                    <core-format-text [component]="component" [componentId]="cmId"
                                        [text]="item.presentation" contextLevel="module" [contextInstanceId]="cmId"
                                        [wsNotFiltered]="true" [courseId]="courseId">
                                    </core-format-text>
                                </p>
                            </ion-label>

                            <ion-input *ngIf="item.templateName == 'textfield'" type="text" [(ngModel)]="item.value"
                                autocorrect="off" name="{{item.typ}}_{{item.id}}" maxlength="{{item.length}}"
                                [required]="item.required">
                            </ion-input>

                            <ng-container *ngIf="item.templateName == 'numeric'">
                                <ion-input type="number" [(ngModel)]="item.value" name="{{item.typ}}_{{item.id}}"
                                    [required]="item.required">
                                </ion-input>
                                <ion-text *ngIf="item.hasError" color="danger" class="addon-mod_feedback-item-error">
                                    {{ 'addon.mod_feedback.numberoutofrange' | translate }} [{{item.rangefrom}}
                                    <span *ngIf="item.rangefrom && item.rangeto">, </span>{{item.rangeto}}]
                                </ion-text>
                            </ng-container>

                            <ion-textarea *ngIf="item.templateName == 'textarea'" [required]="item.required"
                                name="{{item.typ}}_{{item.id}}" [(ngModel)]="item.value">
                            </ion-textarea>

                            <ion-select *ngIf="item.templateName == 'multichoice-d'" [required]="item.required"
                                name="{{item.typ}}_{{item.id}}" [(ngModel)]="item.value" interface="action-sheet">
                                <ion-select-option *ngFor="let option of item.choices" [value]="option.value">
                                    <core-format-text [component]="component" [componentId]="cmId" [text]="option.label"
                                        contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true"
                                        [courseId]="courseId">
                                    </core-format-text>
                                </ion-select-option>
                            </ion-select>
                        </ion-item>

                        <ion-radio-group *ngIf="item.templateName == 'multichoice-r'" [(ngModel)]="item.value"
                            [required]="item.required" name="{{item.typ}}_{{item.id}}">
                            <ion-item *ngFor="let option of item.choices">
                                <ion-label>
                                    <core-format-text [component]="component" [componentId]="cmId"
                                        [text]="option.label" contextLevel="module" [contextInstanceId]="cmId"
                                        [wsNotFiltered]="true" [courseId]="courseId">
                                    </core-format-text>
                                </ion-label>
                                <ion-radio slot="start" [value]="option.value"></ion-radio>
                            </ion-item>
                        </ion-radio-group>

                        <ng-container *ngIf="item.templateName == 'multichoice-c'">
                            <ion-item *ngFor="let option of item.choices">
                                <ion-label>
                                    <core-format-text [component]="component" [componentId]="cmId" [text]="option.label"
                                        contextLevel="module" [contextInstanceId]="cmId" [wsNotFiltered]="true"
                                        [courseId]="courseId">
                                    </core-format-text>
                                </ion-label>
                                <ion-checkbox [required]="item.required" name="{{item.typ}}_{{item.id}}"
                                    [(ngModel)]="option.checked" value="option.value">
                                </ion-checkbox>
                            </ion-item>
                        </ng-container>

                        <ng-container *ngIf="item.templateName == 'captcha'">
                            <core-recaptcha *ngIf="!preview && !offline" [publicKey]="item.captcha.recaptchapublickey"
                                [model]="item" modelValueName="value">
                            </core-recaptcha>
                            <div *ngIf="!preview && (!item.captcha || offline)" class="core-warning-card">
                                <ion-item>
                                    <ion-icon name="fas-exclamation-triangle" slot="start" aria-hidden="true"></ion-icon>
                                    <ion-label>{{ 'addon.mod_feedback.captchaofflinewarning' | translate }}</ion-label>
                                </ion-item>
                            </div>
                        </ng-container>
                    </ng-container>
                </ng-container>
                <ion-grid *ngIf="!preview">
                    <ion-row class="ion-align-items-center">
                        <ion-col *ngIf="hasPrevPage">
                            <ion-button expand="block" fill="outline" (click)="gotoPage(true)" class="ion-text-wrap">
                                <ion-icon name="fas-chevron-left" slot="start" aria-hidden="true"></ion-icon>
                                {{ 'addon.mod_feedback.previous_page' | translate }}
                            </ion-button>
                        </ion-col>
                        <ion-col *ngIf="hasNextPage">
                            <ion-button expand="block" (click)="gotoPage(false)" class="ion-text-wrap">
                                {{ 'addon.mod_feedback.next_page' | translate }}
                                <ion-icon name="fas-chevron-right" slot="end" aria-hidden="true"></ion-icon>
                            </ion-button>
                        </ion-col>
                        <ion-col *ngIf="!hasNextPage">
                            <ion-button expand="block" (click)="gotoPage(false)" class="ion-text-wrap">
                                {{ 'addon.mod_feedback.save_entries' | translate }}
                            </ion-button>
                        </ion-col>
                    </ion-row>
                </ion-grid>
            </ion-list>
        </ng-container>

        <ion-card class="core-success-card" *ngIf="completed">
            <ion-item>
                <ion-icon name="fas-check" slot="start" aria-hidden="true"></ion-icon>
                <ion-label>
                    <p *ngIf="!completionPageContents && !completedOffline">
                        {{ 'addon.mod_feedback.this_feedback_is_already_submitted' | translate }}
                    </p>
                    <p *ngIf="!completionPageContents && completedOffline">
                        {{ 'addon.mod_feedback.feedback_submitted_offline' | translate }}
                    </p>
                    <p *ngIf="completionPageContents">
                        <core-format-text [component]="component" componentId="componentId" [text]="completionPageContents"
                            contextLevel="module" [contextInstanceId]="cmId" [courseId]="courseId">
                        </core-format-text>
                    </p>
                </ion-label>
            </ion-item>
        </ion-card>

        <ion-card *ngIf="completed">
            <ion-grid>
                <ion-row class="ion-align-items-center">
                    <ion-col *ngIf="access!.canviewanalysis">
                        <ion-button expand="block" fill="outline" (click)="showAnalysis()" class="ion-text-wrap">
                            <ion-icon name="fas-chart-bar" slot="start" aria-hidden="true"></ion-icon>
                            {{ 'addon.mod_feedback.completed_feedbacks' | translate }}
                        </ion-button>
                    </ion-col>
                    <ion-col *ngIf="hasNextPage">
                        <ion-button expand="block" (click)="continue()" class="ion-text-wrap">
                            {{ 'core.continue' | translate }}
                            <ion-icon name="fas-chevron-right" slot="end" aria-hidden="true"></ion-icon>
                        </ion-button>
                    </ion-col>
                </ion-row>
            </ion-grid>
        </ion-card>
    </core-loading>
</ion-content>