4.1.2 Thư mục pages:

Chứa các file html hiển thị của phần mềm:

• home.html: Phần hiển thị ở trang chủ.

Hiển thị:

Hình 4.1.1-Phần hiển thị của trang chủ.

Code:

<h3>Cấp độ 1</h3>
<div id="text">
    <p>{{ soTuDaHoc }}/100 từ</p>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success" style="width: {{ soTuDaHoc }}%;"></div>
</div>
<div class="col-md-3">
    <a href="#/on-lai" class="btn btn-primary btn-info disabled"><span class="glyphicon glyphicon-eye-open"></span> Ôn lại các từ đã học</a>
</div >
<div class="col-md-3" >
    <a href="" class="btn btn-primary btn-warning" ng-click="hoc_lai()"><span class="glyphicon glyphicon-repeat"></span> Học lại từ đầu</a>
</div>    
<div class="col-md-6">
    <a href="#/tu-moi" class="btn btn-primary btn-success pull-right">Học từ mới  <span class="glyphicon glyphicon-circle-arrow-right"></span></a>
</div>
</div><!-- class body-1-->

<div class="body-2 r">
<br>
<br>
    <table class="table table-hover">
        <thead>
            <tr>
                <th>Từ</th>
                <th>Nghĩa</th>    
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>abandon</td>
                <td>bỏ, từ bỏ</td>
            </tr>
            <tr>
                <td>ababdoned</td>
                <td>bị từ rơi</td>
            </tr>
            <tr>
                <td>.......</td>
                <td>.......</td>
            </tr>
            <tr>
                <td>........</td>
                <td>........</td>
            </tr>
            <tr>
                <td>........</td>
                <td>........</td>
            </tr>
        </tbody>
    </table><!--class table-->
    <h3>Cấp độ</h3>
    <ul class="pagination">
        <li class="disabled"><a href="#/">&laquo;</a></li>
        <li class="active"><a href="#/">1</a></li>
        <li class="disabled"><a href="#">2</a></li>
        <li class="disabled"><a href="#/">3</a></li>
        <li class="disabled"><a href="#/">4</a></li>
        <li class="disabled"><a href="#/">...</a></li>
        <li class="disabled"><a href="#/">28</a></li>
        <li class="disabled"><a href="#/">29</a></li>
        <li class="disabled"><a href="#/">30</a></li>

        <li class="disabled"><a href="#/">&raquo;</a></li>
    </ul>

• tu-moi.html : Hiển thị từ mới gồm từ, nghĩa, loại từ, phát âm

Hiển thị:

                                                                                   Hình 4.1.2-Phần hiển thị từ mới

Code: Được lưu trên github.

• trac-nghiem.html:

Hiển thị:

                                                                       Hình 4.1.3-Phần hiển thị bài thi trắc nghiệm

Code: Được lưu trên github.

• dien-tu.html: Hiển thị phần bài diền từ

Hiển thị:

                                                                        Hình 4.1.4-Phần hiển thị bài thi điền từ

Code: Xem code trên github.