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

140 lines
8.0 KiB
HTML

<!-- Buttons to add to the header. -->
<core-navbar-buttons slot="end">
@if (!courseContentsPage) {
<ion-button fill="clear" (click)="openModuleSummary()" aria-haspopup="true" [ariaLabel]="'core.info' | translate">
<ion-icon name="fas-circle-info" slot="icon-only" aria-hidden="true" />
</ion-button>
} @else {
<core-context-menu>
<core-context-menu-item [priority]="5000" [content]="'core.info' | translate" (action)="openModuleSummary()"
iconAction="fas-circle-info" />
</core-context-menu>
}
</core-navbar-buttons>
<!-- Content. -->
<core-loading [hideUntil]="!showLoading">
<!-- Activity info. -->
<core-course-module-info [module]="module" [description]="survey && !survey.surveydone && !hasOffline && description"
[component]="component" [componentId]="componentId" [courseId]="courseId" [hasDataToSync]="hasOffline"
(completionChanged)="onCompletionChange()" />
<!-- 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-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 class="ion-align-items-center ion-padding-horizontal" [class.even]="isEven">
<ion-col size="7">
<span id="addon-mod_survey-{{question.name}}" [core-mark-required]="question.required">
<strong>{{question.num}}.</strong> {{ question.text }}
</span>
</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-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.name" interface="action-sheet"
[name]="question.name" [cancelText]="'core.cancel' | translate"
[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">
<span id="addon-mod_survey-{{question.name}}" [core-mark-required]="question.required">
<strong>{{question.num}}.</strong> {{ question.text }}
</span>
</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.name" interface="action-sheet" [name]="question.name"
[cancelText]="'core.cancel' | translate" [interfaceOptions]="{header: question.text}">
<ion-select-option [value]="question.required ? '-1' : '0'" selected [disabled]="question.required">
{{ '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-item *ngIf="question.type === 0" class="ion-text-wrap" [class.even]="isEven">
<ion-textarea labelPlacement="floating" [(ngModel)]="answers[question.name]" [name]="question.name"
[required]="question.required">
<p slot="label" [core-mark-required]="question.required">
<strong>{{question.num}}.</strong> {{ question.text }}
</p>
</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-up-right-from-square" slot="end" aria-hidden="true" />
</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" />
</div>
</core-loading>