4. Cài đặt và kiểm thử hệ thống

4.1. Ảnh giao diện và mã nguồn

• Chọn chủ đề:

  • <div class="container text-center">
        <h2><b>CHỌN CHỦ ĐỀ</b></h2><br>
        <div class="row">
            <div *ngFor="let cd of chudes" class=" col-xs-12 col-sm-6 col-md-4 col-lg-3">
                <a [routerLink]="['/chu-de',cd.Id]" (click)="OnClick(cd.Id)" class="btn btn-default nut" style="margin: 10px 0px">
                    <img src= class="img-circle" style="width:150px; height: 150px; margin: 10px" alt="Image">
                    <h4></h4>
                </a>
            </div>
        </div>
    </div>
    

• Làm bài kiểm tra
  

  • <div class="container">
      <div class="row">
        <div class="col-xs-2">
          <a routerLink="/" class="btn btn-default"><span class="glyphicon glyphicon-menu-left" aria-hidden="true"></span></a>
        </div>
        <div class="col-xs-8 text-center">
          <h4><b></b></h4>
        </div>
      </div>
      <div class=" container jumbotron">
        <div class="row text-center">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <label>/</label>
          </div>
        </div>
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            <div style="height: 10px; background-color: #69dc42;">
              <div [style.width]="tile" style="height: 100%; background-color: #123">
    
              </div>
            </div>
            <h4><b>Dịch nội dung này</b></h4>
            <p>
              <a (click)='speech()' class="btn btn-info">
                <span class="glyphicon glyphicon-volume-up"></span>
              </a> </p>
            <textarea [(ngModel)]="str" class="form-control" style="height: 150px; resize: none" placeholder="Gõ tiếng Việt"></textarea>
          </div>
        </div>
        <br>
      </div>
      <div class="container">
        <div class="row" *ngIf="!showCheck">
          <div class="col-xs-6">
            <button (click)="cancelClick()" type="button" class="btn btn-default">Bỏ qua</button>
          </div>
          <div class="col-xs-6 text-right">
            <button (click)="checkClick()" type="button" class="btn btn-success">Kiểm tra</button>
          </div>
        </div>
        <div class="row" *ngIf="showCheck">
          <div class="col-xs-12 alert alert-success" *ngIf="checkDapan">
            <div class="row">
              <h4 class="col-xs-6"> Đúng rồi ^^</h4>
              <div class="col-xs-6 text-right">
                <button (click)="nextClick()" type="button" class="btn btn-success">Tiếp tục</button>
              </div>
            </div>
          </div>
           <div class="col-xs-12 alert alert-danger" *ngIf="!checkDapan">
            <div class="row">
              <h4 class="col-xs-6"> Sai rồi :( Đáp án đúng là  cơ!</h4>
              <div class="col-xs-6 text-right">
                <button (click)="nextClick()" type="button" class="btn btn-success">Tiếp tục</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    

• Kết quả

  • <div class="container jumbotron">
        <div class="row">
            <div class="col-xs-12 text-center">
                <h3>
                    Kết quả
                </h3>
                <h2>Chính xác / câu</h2>
                <a [routerLink]="['']" class="btn btn-default">
                 Về trang chủ
                </a>
            </div>
        </div>
    </div>
    

4.2. Kiểm thử

Chưa cài được kiểm thử tự động tuy nhiên kiểm thử bằng tay các chức năng của ứng dụng đề chạy tốt.