form.component.html 1.94 KB
Newer Older
liujiangnan's avatar
liujiangnan committed
1 2 3 4
<div class="p-box" *ngFor="let word of item.contentObj.wordnum;index as num;">
  <nz-card nzTitle="Word Spelling  [{{num + 1}} / {{item.contentObj.wordnum.length}}]" [nzExtra]="extraTemplate">
    <div>
      <div class="spelling-box" *ngFor="let box of defaultBoxes; index as i">
liujiangnan's avatar
liujiangnan committed
5

liujiangnan's avatar
liujiangnan committed
6
        <div *ngIf="word.words[i]">
limingzhe's avatar
limingzhe committed
7

liujiangnan's avatar
liujiangnan committed
8 9 10 11 12 13 14 15
          <div class="w-radio"
               (click)="select(i,num)">
            <div class="r-radio"
                 [class.green]="word.words[i].selected"></div>
          </div>
          <input class="p-letter-input" name="Input" type="text" maxlength="1" tabindex="0"
                 [(ngModel)]="word.words[i].value"
                 (keyup)="keyup($event,word.words[i].value,num);">
limingzhe's avatar
limingzhe committed
16

liujiangnan's avatar
liujiangnan committed
17
        </div>
limingzhe's avatar
limingzhe committed
18

liujiangnan's avatar
liujiangnan committed
19 20 21 22 23 24 25 26 27 28 29 30 31
      </div>
      <span class="p-hint">
        1. Type letters of word in left <br>
        2. Press Enter to confirm <br>
        3. Click round point to set 'Missing Letter'
      </span>
    </div>
    <div class="mt-3">
      <div class="show" *ngFor="let it of word.words">
        <div *ngIf="it.selected" class="blank"><p></p></div>
        <div *ngIf="!it.selected"><p>{{it.value}}</p></div>
      </div>
    </div>
limingzhe's avatar
limingzhe committed
32

liujiangnan's avatar
liujiangnan committed
33
    <nz-divider></nz-divider>
limingzhe's avatar
limingzhe committed
34

liujiangnan's avatar
liujiangnan committed
35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
    <div class="p-media-box d-flex">
      <div>
        <app-upload-image-with-preview [picUrl]="word.pic_id"
                                       (imageUploaded)="onImageUploadSuccess($event, num)"
        ></app-upload-image-with-preview>
      </div>
      <nz-divider nzType="vertical"></nz-divider>
      <div>
        <app-audio-recorder
          [audioUrl]="word.spelling_audio"
          (audioUploaded)="onVocabularyAudioUploadSuccess($event,num)"
        ></app-audio-recorder>
      </div>
    </div>
  </nz-card>
limingzhe's avatar
limingzhe committed
50

liujiangnan's avatar
liujiangnan committed
51 52 53 54
  <ng-template #extraTemplate>
    <button nz-button nzType="danger" nz-popconfirm nzTitle="Are you sure ?" (nzOnConfirm)="DeletWord(num)">Delete
    </button>
  </ng-template>
limingzhe's avatar
limingzhe committed
55
</div>
liujiangnan's avatar
liujiangnan committed
56 57 58 59 60


<button nz-button nzType="primary" (click)="AddWord()">
  + Add Word
</button>