exercise-parameters.page.html 9.55 KB
Newer Older
1 2 3 4 5 6 7 8
<!--
  Generated template for the ExerciseParametersPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>
    <ion-toolbar>
9 10
        <ion-buttons slot="start">
            <div class="home-logo">
11
                <a (click)="HelperService.goToHomePage(navCtrl)">
12 13 14 15
                    <img src="assets/imgs/logo.png" width="32px" height="32px" alt="CALLIDUS Logo">
                </a>
            </div>
        </ion-buttons>
16 17
        <ion-spinner *ngIf="HelperService.isLoading"></ion-spinner>
        <ion-title>{{ 'EXERCISE_PARAMETERS' | translate }}</ion-title>
18
        <ion-buttons slot="end">
19
            <ion-menu-button autoHide="false">
20
                <ion-icon name="menu"></ion-icon>
21
            </ion-menu-button>
22
        </ion-buttons>
23 24 25 26
    </ion-toolbar>
</ion-header>


27
<ion-content class="ion-padding">
28 29 30
    <ion-grid>
        <ion-row>
            <ion-col>
Konstantin Schulz's avatar
Konstantin Schulz committed
31
                <!-- don't use ion-select because the font-size for ion-option cannot be changed -->
32
                <label>
33
                    <h2 class="label">{{ 'EXERCISE_TYPE' | translate }}</h2>
34
                    <select [(ngModel)]="corpusService.exercise.type" name="exerciseType"
35
                            (change)="corpusService.adjustTranslations()">
36 37 38 39 40 41 42
                        <option *ngFor="let key of ObjectKeys(ExerciseType)" [value]=ExerciseType[key]>
                            {{ ExerciseTypeTranslation[key] | translate }}
                        </option>
                    </select>
                </label>
            </ion-col>
        </ion-row>
43
        <ion-row *ngFor="let query of corpusService.exercise.queryItems; let i = index">
44 45
            <ion-col>
                <ion-grid [class.matching]="corpusService.exercise.type === ExerciseType.matching" style="padding: 0;">
46
                    <ion-row *ngIf="corpusService.exercise.type === ExerciseType.matching">
47 48
                        <ion-col>
                            <h4>{{ (i === 0 ? 'HEAD_WORD' : 'DEPENDENT_WORD') | translate }}</h4>
49 50
                        </ion-col>
                    </ion-row>
51
                    <ion-row style="padding: 0 0 1em 0">
52 53
                        <ion-col>
                            <label>
54
                                <h2 class="label">{{ 'QUERY_PHENOMENON' | translate }}</h2>
55
                                <select [(ngModel)]="query.phenomenon" name="queryPhenomenon"
56
                                        (change)="corpusService.adjustQueryValue(query, i)">
57 58 59 60 61 62 63
                                    <option *ngFor="let phenomenon of ObjectKeys(Phenomenon)" [value]=phenomenon>
                                        {{ PhenomenonTranslation[phenomenon] | translate }}
                                    </option>
                                </select>
                            </label>
                        </ion-col>
                        <ion-col>
Konstantin Schulz's avatar
Konstantin Schulz committed
64
                            <ng-container
65
                                    *ngIf="corpusService.exercise.type === ExerciseType.matching; else notMatching">
Konstantin Schulz's avatar
Konstantin Schulz committed
66
                                <label>
67
                                    <h2 class="label">{{ 'QUERY_VALUE' | translate }}</h2>
68 69
                                    <select [(ngModel)]="query.values[0]" name="queryValue"
                                            (change)="corpusService.updateBaseWord(query, i)">
70
                                        <option *ngFor="let key of corpusService.getSortedQueryValues(query, i)"
71
                                                [value]=key>{{ getDisplayValue(query, key, i) }}
Konstantin Schulz's avatar
Konstantin Schulz committed
72 73 74 75
                                        </option>
                                    </select>
                                </label>
                            </ng-container>
76
                            <ng-template #notMatching>
77
                                <label>
78 79 80
                                    <h2 class="label">{{ 'QUERY_VALUE' | translate }}</h2>
                                    <select [(ngModel)]="query.values" name="queryValue" multiple
                                            size="{{Math.min(corpusService.getSortedQueryValues(query, i).length, 20)}}">
81
                                        <option *ngFor="let key of corpusService.getSortedQueryValues(query, i)"
82
                                                [value]=key>{{ getDisplayValue(query, key, i) }}
83 84 85 86 87 88 89 90 91
                                        </option>
                                    </select>
                                </label>
                            </ng-template>
                        </ion-col>
                    </ion-row>
                </ion-grid>
            </ion-col>
        </ion-row>
92
        <ion-row *ngIf="corpusService.exercise.type !== ExerciseType.kwic">
93 94 95
            <ion-col style="display: inline-grid">
                <ion-grid style="text-align: left">
                    <ion-row>
96
                        <ion-col class="toggle-menu" style="padding: 0">
97
                            <button *ngIf="showFeedback; else dropright" (click)="showFeedback = !showFeedback">
98
                                <ion-icon name="caret-down"></ion-icon>
99
                            </button>
100 101
                            <ng-template #dropright>
                                <button (click)="showFeedback = !showFeedback">
102
                                    <ion-icon name="caret-forward"></ion-icon>
103 104 105 106 107 108 109 110 111 112
                                </button>
                            </ng-template>
                            <div>
                                <h4 class="label" (click)="showFeedback = !showFeedback" style="padding:0.5em;">
                                    {{ 'INSTRUCTIONS' | translate }}
                                    + {{ 'EXERCISE_FEEDBACK' | translate }}</h4>
                            </div>
                        </ion-col>
                    </ion-row>
                    <ion-row *ngIf="showFeedback">
113 114
                        <ion-col style="padding: 0;">
                            <ion-grid style="text-align: left; font-size: 1.2em;">
115 116 117 118
                                <ion-row>
                                    <ion-col>
                                        <label>
                                            <input [(ngModel)]="corpusService.exercise.instructionsTranslation"
119
                                                   type="text" name="instructionsTranslation"/>
120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169
                                        </label>
                                    </ion-col>
                                </ion-row>
                                <ion-row>
                                    <ion-col>
                                        <b>{{ 'EXERCISE_FEEDBACK' | translate }}:</b>
                                    </ion-col>
                                </ion-row>
                                <ion-row>
                                    <ion-col>
                                        <label>
                                            {{ 'EXERCISE_FEEDBACK_GENERAL' | translate }}:
                                            <input type="text" [(ngModel)]="corpusService.exercise.feedback.general"
                                                   name="feedbackGeneral"/>
                                        </label>
                                    </ion-col>
                                </ion-row>
                                <ion-row>
                                    <ion-col>
                                        <label>
                                            {{ 'EXERCISE_FEEDBACK_CORRECT' | translate }}:
                                            <input type="text" [(ngModel)]="corpusService.exercise.feedback.correct"
                                                   name="feedbackCorrect"/>
                                        </label>
                                    </ion-col>
                                </ion-row>
                                <ion-row>
                                    <ion-col>
                                        <label>
                                            {{ 'EXERCISE_FEEDBACK_PARTIALLY_CORRECT' | translate }}:
                                            <input type="text"
                                                   [(ngModel)]="corpusService.exercise.feedback.partiallyCorrect"
                                                   name="feedbackPartiallyCorrect"/>
                                        </label>
                                    </ion-col>
                                </ion-row>
                                <ion-row>
                                    <ion-col>
                                        <label>
                                            {{ 'EXERCISE_FEEDBACK_INCORRECT' | translate }}:
                                            <input type="text" [(ngModel)]="corpusService.exercise.feedback.incorrect"
                                                   name="feedbackIncorrect"/>
                                        </label>
                                    </ion-col>
                                </ion-row>
                            </ion-grid>
                        </ion-col>
                    </ion-row>
                </ion-grid>
            </ion-col>
170
        </ion-row>
171 172 173 174 175
        <ion-row>
            <ion-col>
                <ion-button (click)="generateExercise().then()">{{ 'PREVIEW' | translate }}</ion-button>
            </ion-col>
        </ion-row>
176 177
        <ion-row>
            <ion-col>
178
                <ion-button (click)="navCtrl.pop()">{{ 'BACK' | translate }}</ion-button>
179 180
            </ion-col>
        </ion-row>
181
    </ion-grid>
182
</ion-content>