Chuyển bộ thẻ hiện có sang Langki

Trong hướng dẫn này, tôi sẽ chuyển bộ thẻ 4000 Essential English Words sang Langki. Đây là một nguồn tài liệu tuyệt vời dành cho người học tiếng Anh, bao gồm các định nghĩa rõ ràng, câu ví dụ, âm thanh và hình ảnh. Mặc dù bộ thẻ đã được thiết kế khá tốt, Langki giúp thẻ bộ thẻ có tính tương tác hơn và thêm thông tin khi cần thiết. Ví dụ, với các phản hồi được chuẩn bị sẵn, người học có thể dễ dàng yêu cầu AI hỗ trợ thêm như dịch sang tiếng mẹ đẻ, dịch câu ví dụ, cụm từ thường đi kèm, từ đồng nghĩa, trái nghĩa, thêm câu ví dụ, v.v.

Chỉnh sửa mẫu thẻ (template)

Trước tiên, chúng ta cần sao lưu Front Template, Back Template và Styling của bộ thẻ gốc.

Vì Langki chỉ là một mẫu thẻ, việc sao chép Front Tempalte và Back Template vào một mẫu thẻ khác sẽ tự động nhúng chatbot vào mẫu thẻ đó.

Tiếp theo, ta cần cập nhật các trường trong cả Mặt Trước và Mặt Sau để phù hợp với cấu trúc dữ liệu của bộ thẻ 4000 Essential English Words.

Tương tự, sao chép và dán Front Template từ Langki – Prototype vào.

Vì bộ thẻ 4000 Essential English Words sử dụng nền tối, chúng ta nên bật chế độ nền tối cho phù hợp.

Bây giờ, ta hãy so sánh với phiên bản gốc.

Khắc phục sự cố tự phát âm thanh

Trong Langki, cả mặt trước và mặt sau của thẻ flashcard đều được thiết lập trong Front Template. Tuy nhiên, điều này có thể gây ra vấn đề nếu tính năng tự phát âm thanh được bật và file audio đáng lí ở mặt sau lại được bật ở mặt trước. Vì vậy, chúng ta cần loại bỏ tất cả âm thanh dành cho mặt sau ra khỏi Front Template.

Tuy nhiên, nếu làm vậy thì mặt sau của thẻ sẽ không còn âm thanh nữa.

Vì thế, chúng ta cần một mẹo nhỏ để thêm âm thanh vào phần mặt sau khi lật thẻ. Chúng ta có thể làm điều này bằng cách tạo một phần tử HTML chứa âm thanh trong Back Template, sau đó sử dụng JavaScript để tự động chèn HTML này nếu nó tồn tại.

<div class="back-side">{{FrontSide}}</div>

<div id="audio">
{{Sound_Meaning}}
[sound:_1sec.mp3]
{{Sound_Example}}
</div>

if (document.getElementById("audio")) {
  document.getElementById("back").appendChild(document.getElementById("audio"));
}