-
Notifications
You must be signed in to change notification settings - Fork 0
/
grammar.component.html
49 lines (38 loc) · 2.3 KB
/
grammar.component.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<div class="carousel">
<app-progressbar [array]="questions" class="w-full" [currentIndex]="currentIndex"></app-progressbar>
<ng-template ngFor let-item [ngForOf]="questions" let-i="index">
<div class="flex flex-col items-center pt-32 slide"
[ngClass]="{'active': i === currentIndex, 'previous': i < currentIndex}">
<!-- <fa-icon [icon]="faVolumeHigh" (click)="item.timesHeard != 2 ? speak(i) : 0" class="text-6xl mb-3" [ngClass]="{'cursor-pointer': item.timesHeard != 2}"></fa-icon> -->
<!-- <div class="grid grid-flow-col gap-3 ">
<fa-icon [icon]="faHeart" [ngClass]="{'text-red-600': item.timesHeard == null || item.timesHeard == 1}"></fa-icon>
<fa-icon [icon]="faHeart" [ngClass]="{'text-red-600': item.timesHeard == null}"></fa-icon>
</div> -->
<p class="text-2xl sentence">
<span *ngFor="let word of item.question.split(' ')" (click)="speak(word)">{{word}}</span>
</p>
<div class="options mt-10">
<div class="mb-4">
<!-- <button [ngClass]="{'active': item.answered === 1}" (click)="answer(i, 1)" class="mr-4">Yes</button>
<button [ngClass]="{'active': item.answered === 0}" (click)="answer(i, 0)">No</button>
-->
<button (click)="answer(i, item.right); speak(item.right)" [ngClass]="{'active': item.answered === item.right}" class="mr-4">{{item.right}}</button>
<button (click)="answer(i, item.wrong); speak(item.wrong)" [ngClass]="{'active': item.answered === item.wrong}">{{item.wrong}}</button>
</div>
<button class="w-full" (click)="continue()" *ngIf="item.answered">
<span>Continue</span> <fa-icon [icon]="faArrowRight" class="ml-3"></fa-icon>
</button>
</div>
</div>
</ng-template>
</div>
<!--
<ng-template ngFor let-item [ngForOf]="questions" let-i="index">
<div>
<p>
<span *ngFor="let word of item.question.split(' ')" (click)="speak(word)">{{word}} </span>
</p>
<button (click)="speak(item.right)">{{item.right}}</button>
<button (click)="speak(item.wrong)">{{item.wrong}}</button>
</div>
</ng-template> -->