Do Anki sử dụng HTML, javascript nên khả năng tuỳ chỉnh gần như là vô hạn. và đây là 1 bài như thế dưới dự hỗ trợ từ.. AI 

Kết quả của thiết lập này là bạn có thêm phần phiên âm quốc tế trong Back Template và đặc biệt là click lên phiên âm quốc tế có thể nghe phát âm chính xác của từ

from Viet Chi Go Channel
Bước 1 - Tạo thêm field cho Phonetic, Audio
Bước 2 - Lấy phonetic và file mp3 từ trang https://www.oed.com của Oxford
Bước 3 - Bổ sung code cho Back Template và Styling

Back template

{{type:Front}}
<br>

<div class="phonetic-click" onclick="playAudio()" style="color:#0077bb">
{{Phonetic}}
</div>
<div id="anki-audio-player" style="display:none;">
{{Audio}}
</div>

<script>
function playAudio() {
// Tìm thẻ audio hoặc nút play do Anki tự động sinh ra trong trường Audio
var audioContainer = document.getElementById('anki-audio-player');
 
// Cách 1: Tìm và click vào nút phát âm thanh mặc định của Anki (Dành cho Anki Desktop/AnkiDroid)
var ankiPlayButton = audioContainer.querySelector('.replay-button, .soundLink, audio');
if (ankiPlayButton) {
ankiPlayButton.click();
return;
}
 
// Cách 2: Tìm thẻ audio thuần HTML (Dành cho một số phiên bản AnkiMobile/Web)
var htmlAudio = audioContainer.querySelector('audio');
if (htmlAudio) {
htmlAudio.currentTime = 0;
htmlAudio.play();
}
}
</script>

<br>

{{Back}}
<br>
<br>
<div style='font-family: "Arial"; font-size: 20px;'>{{example}}</div>
<br>
<div style='font-family: "Arial"; font-size: 20px;'>{{synonym}}</div>
<br>
<div style='font-family: "Arial"; font-size: 20px;'>{{antonym}}</div>
 
Styling - Để rê chuột có hình bàn tay

.card {
    font-family: arial;
    font-size: 20px;
    line-height: 1.5;
    text-align: center;
    color: black;
    background-color: white;
}

#typeans {font-size:40px !important}

.phonetic-click {
    font-family: "Arial", sans-serif;
    color: #2196F3; /* Màu xanh dương nổi bật */
    cursor: pointer;
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.phonetic-click:hover {
    background-color: rgba(33, 150, 243, 0.1); /* Hiệu ứng đổi màu nền nhẹ khi di chuột */
}

Comments

No comments

There are no comments yet. Be the first to write one.

Leave a comment
Your email is never shown publicly.