Anki. Скрипт для подсказок и озвучки с Goggle Translate
Всем привет!
Думаю что многим людям, изучающим иностранные языки известна программа "Anki" основанная на интервальном повторении слов(понятий и чего угодно).
Я хочу поделиться маленьким скриптом для настройки карточек, который позволяет открывыть по одной букве в слове в качестве подсказки, а также озвучивать аудио при помощи GoogleTranslate.
Большое преимущество такого метода озвучки (по ссылке) в том, что он сразу работает для всех новых карточек. Недостаток в том что для работы нужно подключение к сети.
Обратите внимание, что я использую нестандарные названия полей, так что если Вы хотите что бы скрипт работал без корректировки переименуйте поля следующим образом:
RU поле с русским текстом
ENG поле с английским текстом
Front Template:
{{RU}}
{{type:ENG}}
<hr>
<div id="btn" onclick="reveal()">Click for hint (Ctrl)</div>
<div id="hint"></div>
<hr>
<script>
var i =0
var theDiv = document.getElementById("hint");
document.onkeyup = function(e){
if (e.keyCode == 17) {
reveal();
}
}
function reveal() {
if (i == 0) {
theDiv.innerHTML = "{{ENG}}".charAt(0) + "...";
document.getElementById("btn").innerHTML = "Click for next hint (Ctrl)";
i =1;
}
else if( i == 1) {
theDiv.innerHTML = "{{ENG}}".charAt(0) + "{{ENG}}".charAt(1) + "...";
i = 2;
}
else if( i == 2) {
theDiv.innerHTML = "{{ENG}}".charAt(0) + "{{ENG}}".charAt(1) + "..." + "{{ENG}}".charAt( "{{ENG}}".length - 1) ;
document.getElementById("btn").style.visibility = "hidden";
i =0
}
}
</script>
Styling:
.card {
font-family: arial;
font-size: 20px;
text-align: center;
color: black;
background-color: white;
}
#front {
margin-bottom: 10px;
}
#btn {
display: inline-block;
background-color: hsl(200, 100%, 80%);
padding: 3px 10px;
border: 1px solid black;
border-radius: 5px;
box-shadow: 1px 1px grey;
font-size: 20px;
}
#btn:hover {
background-color: hsl(200, 100%, 50%);
cursor: pointer;
box-shadow: -1px -1px black;
position: relative;
top: 2px;
}
#hint {
margin-top: 10px;
}
.disabled {
background-color: #eee;
}
Back Template:
{{FrontSide}}
<hr id=answer>
<div style='font-family: Liberation Sans; font-size: 20px;'>{{Example}}</div>
<audio id = "audio" src="" controls></audio>
<script>
document.getElementById("btn").style.visibility = "hidden";
document.getElementById("audio").src="https://translate.google.com/translate_tts?ie=UTF-8&tl=e...".replace("audio", "{{ENG}}");
</script>
