aptis-practice/writing-typing-practice.html at main · TranHuuDat2004/aptis-practice · GitHub

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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
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
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<!DOCTYPE html>
<html lang="vi">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Writing - Typing Practice</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/typing.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="icon" href="img/favicon.png" type="image/x-icon">

    <!-- 1. Tích hợp CSS của Driver.js -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/driver.css"/>

    <style>
        /* CSS cho nút Help/Tour */
        .tour-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: #fff;
            border: 1px solid #ddd;
            color: #333;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0,0,0,0.1);
            z-index: 999;
            font-size: 24px;
            transition: transform 0.2s, background-color 0.2s;
        }

        .tour-btn:hover {
            transform: scale(1.1);
            background-color: #f8f9fa;
        }

        /* Tùy chỉnh giao diện Driver.js */
        .driver-popover.driverjs-theme {
            background-color: #fff;
            color: #333;
            border-radius: 8px;
            padding: 15px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            max-width: 350px;
        }

        .driver-popover.driverjs-theme .driver-popover-title {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 8px;
            color: var(--primary-blue, #007bff);
        }

        .driver-popover.driverjs-theme .driver-popover-description {
            font-size: 14px;
            line-height: 1.6;
            color: #555;
        }

        .driver-popover.driverjs-theme button {
            background-color: var(--primary-blue, #007bff);
            color: #fff;
            text-shadow: none;
            border: none;
            border-radius: 4px;
            padding: 6px 12px;
        }
    </style>
</head>

<body>
    <header id="header-placeholder"></header>

    <!-- 2. Nút kích hoạt lại Tour -->
    <div class="tour-btn" id="restart-tour" title="Hướng dẫn sử dụng">❓</div>

    <div class="content-pusher">
        <div class="container">
            <div class="page-intro">
                <h1>Writing - Luyện Gõ & Ghi Nhớ Cấu Trúc</h1>
                <p>Cải thiện tốc độ gõ phím và độ chính xác từ vựng cho các cấu trúc câu quan trọng.</p>
            </div>
            <div class="explanation-box">
                <h3>💡 Phương pháp luyện tập</h3>
                <p>Chọn một nhóm câu (ví dụ: Mở bài Thân mật), câu mẫu sẽ tự động hiện ra. Nhiệm vụ của bạn là gõ lại
                    chính xác câu đó vào ô bên dưới. Luyện tập thường xuyên sẽ giúp bạn ghi nhớ cấu trúc và gõ nhanh hơn
                    trong phòng thi.</p>
            </div>

            <main id="typing-practice-container" class="quiz-card">
                <div class="typing-filters">
                    <label for="category-select">Chọn nhóm câu để luyện tập:</label>
                    <select id="category-select">
                        <option value="all">Tất cả các câu</option>

                        <optgroup label="Email Thân mật (Informal)">
                            <option value="informal_greeting">Mở bài</option>
                            <option value="informal_context">Nêu vấn đề & Cảm xúc</option>
                            <option value="informal_suggestion">Gợi ý</option>
                            <option value="informal_closing">Kết bài</option>
                        </optgroup>

                        <optgroup label="Email Trang trọng (Formal)">
                            <option value="formal_opening">Mở bài</option>
                            <option value="formal_context">Nêu vấn đề</option>
                            <option value="formal_suggestion">Thân bài (Gợi ý)</option>
                            <option value="formal_closing">Kết bài</option>
                        </optgroup>

                        <optgroup label="Part 1">
                            <option value="part1_answers_short_responses">Câu trả lời mẫu</option>
                        </optgroup>
                    </select>
                </div>

                <div class="prompt-to-type" id="prompt-to-type">
                    Chọn một nhóm câu để bắt đầu luyện tập...
                </div>
                <textarea id="typing-input" placeholder="Gõ lại câu mẫu vào đây..." rows="3" disabled></textarea>
                <div id="typing-feedback"></div>
                <div class="card-actions" style="justify-content: center; margin-top: 20px;">
                    <button id="next-sentence-btn" class="action-btn">Câu tiếp theo</button>
                </div>
            </main>
        </div>
        <footer id="footer-placeholder"></footer>
    </div>

    <script src="js/data-writing-typing.js"></script>
    <script src="js/main.js"></script>
    <script src="js/writing-typing-logic.js"></script>

    <!-- 3. Tích hợp Script của Driver.js -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/driver.js.iife.js"></script>

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            // --- KÍCH HOẠT TOUR HƯỚNG DẪN ---
            // Gọi sau khi render xong để đảm bảo các element đã tồn tại
            setTimeout(initTypingPracticeTour, 800);

            // Gán sự kiện cho nút ?
            document.getElementById('restart-tour').addEventListener('click', () => {
                initTypingPracticeTour(); // Gọi hàm khởi tạo tour
            });
        });

        // HÀM KHỞI TẠO TOUR
        function initTypingPracticeTour() {
            const driver = window.driver.js.driver;

            const driverObj = driver({
                showProgress: true,
                animate: true,
                doneBtnText: 'Đã hiểu',
                nextBtnText: 'Tiếp theo',
                prevBtnText: 'Quay lại',
                popoverClass: 'driverjs-theme',
                steps: [
                    {
                        element: '.page-intro',
                        popover: {
                            title: 'Luyện Gõ Cấu Trúc',
                            description: 'Trang này giúp bạn luyện gõ chính xác từng ký tự của các câu mẫu quan trọng trong Writing Part 4 và Part 1.',
                            side: "bottom",
                            align: 'center'
                        }
                    },
                    {
                        element: '.typing-filters',
                        popover: {
                            title: 'Chọn nhóm câu',
                            description: 'Hãy bắt đầu bằng việc chọn một nhóm cấu trúc bạn muốn ôn tập (ví dụ: Mở bài trang trọng, Kết bài thân mật...).',
                            side: "bottom",
                            align: 'center'
                        }
                    },
                    {
                        element: '#prompt-to-type',
                        popover: {
                            title: 'Câu mẫu',
                            description: 'Câu mẫu tiếng Anh sẽ hiện ra ở đây. Hãy đọc kỹ và ghi nhớ.',
                            side: "top",
                            align: 'center'
                        }
                    },
                    {
                        element: '#typing-input',
                        popover: {
                            title: 'Vùng luyện gõ',
                            description: 'Gõ lại chính xác câu mẫu vào đây. Nếu gõ sai, hệ thống sẽ báo đỏ để bạn sửa lại ngay lập tức.',
                            side: "top",
                            align: 'center'
                        }
                    },
                    {
                        element: '#next-sentence-btn',
                        popover: {
                            title: 'Tiếp tục',
                            description: 'Sau khi gõ đúng hoàn toàn, bấm nút này để chuyển sang câu tiếp theo trong nhóm.',
                            side: "top",
                            align: 'center'
                        }
                    },
                    {
                        element: '#restart-tour',
                        popover: {
                            title: 'Hỗ trợ',
                            description: 'Bấm vào đây bất cứ lúc nào để xem lại hướng dẫn.',
                            side: "left",
                            align: 'center'
                        }
                    }
                ]
            });

            // Logic tự động chạy lần đầu
            showTourHint('hasSeenTypingPracticeTour', () => driverObj.drive()); else {
                 // Nếu gọi thủ công từ nút ?, chạy luôn
                 driverObj.drive();
            }
        }
    </script>
</body>

</html>