Javascript+Anki = диктант, возможно ли?
 

Всем привет! Спецы просветите плиз по такому вопросу! Сам с IT не связан поэтому не сильно бум-бум в этом. Учу английский, открыл для себя замечательную прогу Anki, но некоторого функционала для большей эффективности остро не хватет. Увидел в некоторых флеш картах используется джаваскрипты, подумалось может возможно на нем сделать то чего мне хватает.

Нужно чтобы в карточке на стороне вопроса требовалось напечатать проверяемое слово или несколько слов, в случае если печатается неправильная буква то она бы не пропечатывалась и при этом воспроизводился бы звук ошибки. В качестве звука хотелось бы использовать свой который назначу.

Такое в принципе возможно сделать на Javascript для Anki?

Ребята! Маякните хоть - возможно/невозможно такое! Будет/не будет работать в anki?

Да, возможно! Будет работать, там используется webkit!

Такой код выглядит, например, так

oninput = ({ target }) => {
	if(target !== inputField) return;

	const originalValue = target.value.toLowerCase();
	const checkedValue = `${target.value.toLowerCase()}\n${word}`.match(/(.*).*\n(\1)/)[1];

	if(originalValue !== checkedValue) {
		hitSound.play();
	}

	if(originalValue === word) {
		reachedSound.play();
	}

	target.value = checkedValue;	
};

где inputField представляет текстовое поле, word — ответ, hitSound — аудио ошибки, когда введена неправильная буква, reachedSound — звук победы, вы наконец-то ввели слово!

Допустим, носитель языка произносит ряд слов на английском языке, а вам нужно их правильно записать. Программно это может выглядеть так — у вас на экране есть кнопка и текстовое поле. При нажатии на кнопку раздается голос, произносящий английское слово. Ваша задача постараться правильно напечатать это слово. Как вы и говорили, в случае если печатается неправильная буква, то она не пропечатывается и при этом воспроизводится звук ошибки. Я думаю, что когда слово напечатано, то можно открыть промежуточный экран, где можно, смотря на слово, послушать как оно звучит, возможность открыть это слово в стороннем приложении, где например, показан перевод и примеры использования этого слова. Ну и разумеется, кнопка перехода к следующему слову.

Процесс диктанта заключается в последовательном чередовании двух экранов. Снимки экрана приложения, которое я написал, код смотри далее.


Рис. 1. Экран, на котором предлагается ввести озвученное слово.


Рис. 2. Экран, появляющийся после правильно введённого слова, на котором предлагается узнать больше и продолжить диктант.

Самой первой трудностью оказалось найти слова, какие именно слова использовать для диктанта? В итоге остановился на списке из 850 слов английского языка. Все эти слова обозначают простые понятия, обычно используемые в повседневной жизни. https://en.wiktionary.org/wiki/Appen...lish_word_list

Слова были просто скопированы и обработаны в консоли браузера при помощи этого кода(не три слова, а все которые там были, результат, вы увидите в программе между тегами <template>)

[...[...new Set(

`account, act, addition`

.split(/[\s,\n]+/))].sort().join(" ").matchAll(/.{70}\S*/g)].map(l => l[0].trim()).join("\n")

matchAll не является стандартом, но кто тревожится, когда я только один раз у себя на компьютере запустил этот код!

Далее нужно, чтобы эти слова кто-то читал. Есть замечательный ресурс https://forvo.com/, где носители почти всех языков мира произносят всевозможные слова на их родных языках. Но, к сожалению, API для программистов почему-то платное.
Поэтому произношения слов я взял с oxfordlearnersdictionaries.com.(там нет API? но я просто посмотрел, как там устроена кнопка)

Звуки ошибки (не та буква) и победы(наконец-то ввели слово правильно) взял из chrome://dino

Код получился таким широким, поскольку там захардкодены звуки.

<p data-height="700" data-theme-id="0" data-slug-hash="YdgpwK" data-default-tab="result" data-user="Malleys" data-pen-title="Английский диктант" class="codepen">See the Pen <a href="https://codepen.io/Malleys/pen/YdgpwK/">Английский диктант</a> by Malleys (<a href="https://codepen.io/Malleys">@Malleys</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

Код сюда не влез, поэтому сделал через codepen https://codepen.io/Malleys/pen/YdgpwK?editors=1000 Да, вы можете использовать этот код не только в Anki, но прямо тут, чтобы учиться слышать английские слова.

Получилось что-то очень быстрый диктант, введу слово и Enter, введу слово и Enter. Не слишком ли простой набор слов? А как у вас, получается?

Malleys,
:victory: