138 lines
8.0 KiB
HTML
138 lines
8.0 KiB
HTML
<!-- Buttons to add to the header. -->
|
|
<core-navbar-buttons slot="end">
|
|
<ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [attr.aria-label]="'core.info' | translate">
|
|
<ion-icon name="fas-info-circle" slot="icon-only" aria-hidden="true"></ion-icon>
|
|
</ion-button>
|
|
</core-navbar-buttons>
|
|
|
|
<!-- Content. -->
|
|
<core-loading [hideUntil]="!showLoading" class="safe-area-padding list-item-limited-width">
|
|
|
|
<!-- Activity info. -->
|
|
<core-course-module-info [module]="module" [description]="survey && !survey.surveydone && !hasOffline && description"
|
|
[component]="component" [componentId]="componentId" [courseId]="courseId" [hasDataToSync]="hasOffline"
|
|
(completionChanged)="onCompletionChange()">
|
|
</core-course-module-info>
|
|
|
|
<!-- Survey already done -->
|
|
<ion-card class="core-success-card" *ngIf="survey && survey.surveydone">
|
|
<ion-item>
|
|
<ion-icon name="fas-check" slot="start" aria-hidden="true"></ion-icon>
|
|
<ion-label>
|
|
{{ 'addon.mod_survey.surveycompletednograph' | translate }}
|
|
</ion-label>
|
|
</ion-item>
|
|
</ion-card>
|
|
|
|
<!-- Survey questions -->
|
|
<form *ngIf="survey && !survey.surveydone && !hasOffline && questions && questions.length">
|
|
|
|
<ion-grid class="ion-no-padding ion-text-wrap">
|
|
<ng-container *ngFor="let question of questions; let questionIndex=index; let isEven=even;"
|
|
class="ion-no-padding ion-text-wrap">
|
|
<!-- Parent question (Category header) -->
|
|
<ng-container *ngIf="question.multiArray?.length">
|
|
<h3 class="ion-padding-horizontal" [class.ion-padding-top]="questionIndex == 1">{{ question.text }}</h3>
|
|
<ion-row class="ion-align-items-center ion-hide-md-down ion-padding">
|
|
<ion-col size="7" class="ion-padding">{{ 'addon.mod_survey.responses' | translate }}</ion-col>
|
|
<ion-col size="1" class="ion-text-center option-name"
|
|
*ngFor="let option of question.optionsArray; let indexOption=index;">
|
|
{{ option }}
|
|
</ion-col>
|
|
</ion-row>
|
|
<ion-item class="ion-text-wrap addon-mod_survey-question" [class.even]="isEven" lines="full">
|
|
<ion-label>
|
|
<p>{{ question.intro }}</p>
|
|
</ion-label>
|
|
</ion-item>
|
|
</ng-container>
|
|
|
|
<!-- Subquestion -->
|
|
<ng-container *ngIf="question.parent !== 0">
|
|
<ion-radio-group [(ngModel)]="answers[question.name]" [required]="question.required" [name]="question.name">
|
|
<ion-row *ngIf="question.parent !== 0" class="ion-align-items-center ion-padding-horizontal" [class.even]="isEven">
|
|
|
|
<ion-col size="7">
|
|
<ion-label id="addon-mod_survey-{{question.id}}">
|
|
<span [core-mark-required]="question.required">
|
|
<strong>{{question.num}}.</strong> {{ question.text }}
|
|
</span>
|
|
</ion-label>
|
|
</ion-col>
|
|
|
|
<!-- Tablet view: radio buttons -->
|
|
<ion-col class="ion-hide-md-down ion-text-center" size="1"
|
|
*ngFor="let option of question.optionsArray; let value=index;">
|
|
<!-- Empty slot to avoid errors on migration tslint checks -->
|
|
<ion-radio [value]="value + 1" [attr.aria-label]="question.num + '. '+question.text + ': ' + option">
|
|
</ion-radio>
|
|
</ion-col>
|
|
<ion-col class="ion-hide-md-up" size="5">
|
|
<ion-select class="ion-padding" [(ngModel)]="answers[question.name]" [required]="question.required"
|
|
[attr.aria-labelledby]="'addon-mod_survey-'+question.id" interface="action-sheet" [name]="question.name"
|
|
[interfaceOptions]="{header: question.text}">
|
|
<ion-select-option value="-1" selected disabled>{{ 'core.choose' | translate }}</ion-select-option>
|
|
<ion-select-option *ngFor="let option of question.optionsArray; let value=index;" [value]="value +1">
|
|
{{option}}
|
|
</ion-select-option>
|
|
</ion-select>
|
|
</ion-col>
|
|
</ion-row>
|
|
</ion-radio-group>
|
|
</ng-container>
|
|
|
|
<!-- Single question (don't belong to a category) -->
|
|
<ng-container *ngIf="(!question.multiArray || question.multiArray.length == 0) && question.parent === 0">
|
|
<ion-row class="ion-align-items-center ion-padding" *ngIf="question.type > 0" [class.even]="isEven">
|
|
<ion-col size="7">
|
|
<ion-label id="addon-mod_survey-{{question.id}}">
|
|
<span [core-mark-required]="question.required">
|
|
<strong>{{question.num}}.</strong> {{ question.text }}
|
|
</span>
|
|
</ion-label>
|
|
</ion-col>
|
|
<ion-col size="5">
|
|
<ion-select class="ion-padding" [(ngModel)]="answers[question.name]" [required]="question.required"
|
|
[attr.aria-labelledby]="'addon-mod_survey-'+question.id" interface="action-sheet" [name]="question.name"
|
|
[interfaceOptions]="{header: question.text}">
|
|
<ion-select-option *ngFor="let option of question.optionsArray; let value=index;" [value]="value">
|
|
{{option}}
|
|
</ion-select-option>
|
|
</ion-select>
|
|
</ion-col>
|
|
</ion-row>
|
|
|
|
<ion-item *ngIf="question.type === 0" class="ion-text-wrap" [class.even]="isEven">
|
|
<ion-label position="floating" id="addon-mod_survey-{{question.id}}">
|
|
<span [core-mark-required]="question.required">
|
|
<strong>{{question.num}}.</strong> {{ question.text }}
|
|
</span>
|
|
</ion-label>
|
|
<ion-textarea [(ngModel)]="answers[question.name]" [name]="question.name"
|
|
[attr.aria-labelledby]="'addon-mod_survey-'+question.id" [required]="question.required">
|
|
</ion-textarea>
|
|
</ion-item>
|
|
</ng-container>
|
|
|
|
</ng-container>
|
|
</ion-grid>
|
|
</form>
|
|
|
|
<div collapsible-footer *ngIf="!showLoading" slot="fixed">
|
|
<div class="list-item-limited-width" *ngIf="survey && (survey.surveydone || (!hasOffline && questions && questions.length))">
|
|
<ion-button class="ion-text-wrap ion-margin" expand="block" [href]="module.url" core-link *ngIf="survey.surveydone">
|
|
{{ 'addon.mod_survey.results' | translate }}
|
|
<ion-icon name="fas-external-link-alt" slot="end" aria-hidden="true"></ion-icon>
|
|
</ion-button>
|
|
|
|
<ion-button expand="block" class="ion-text-wrap ion-margin" (click)="submit()" [disabled]="!isValidResponse()"
|
|
*ngIf="!survey.surveydone && !hasOffline && questions && questions.length">
|
|
{{ 'core.submit' | translate }}
|
|
</ion-button>
|
|
</div>
|
|
|
|
<core-course-module-navigation [courseId]="courseId" [currentModuleId]="module.id">
|
|
</core-course-module-navigation>
|
|
</div>
|
|
</core-loading>
|