Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 12.01.2019, 00:48
Новичок на форуме
Отправить личное сообщение для Student_000 Посмотреть профиль Найти все сообщения от Student_000
 
Регистрация: 12.01.2019
Сообщений: 2

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

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

Такое в принципе возможно сделать на Javascript для Anki?
Ответить с цитированием
  #2 (permalink)  
Старый 13.01.2019, 02:09
Новичок на форуме
Отправить личное сообщение для Student_000 Посмотреть профиль Найти все сообщения от Student_000
 
Регистрация: 12.01.2019
Сообщений: 2

Ребята! Маякните хоть - возможно/невозможно такое! Будет/не будет работать в anki?
Ответить с цитированием
  #3 (permalink)  
Старый 15.01.2019, 21:38
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 542

Цитата:
возможно/невозможно такое! Будет/не будет работать в 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. Не слишком ли простой набор слов? А как у вас, получается?
Изображения:
Тип файла: jpg pic1.jpg (7.6 Кб, 2 просмотров)
Тип файла: jpg pic2.jpg (8.2 Кб, 2 просмотров)

Последний раз редактировалось Malleys, 15.01.2019 в 22:10.
Ответить с цитированием
  #4 (permalink)  
Старый 15.01.2019, 22:45
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 25,430

Malleys,
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
frontend разработчик JavaScript Москва Михаил2016 Работа 4 21.08.2016 14:30
Несколько проектов на JavaScript которые возможно вас заинтересует acterhd Ваши сайты и скрипты 6 30.10.2015 15:50
Требуется javascript ninja для небольшой задачи Achilles_sm Работа 7 01.07.2015 18:33
Как сохранить данные в файл? Возможно такое на JavaScript? Forgott Общие вопросы Javascript 35 26.06.2015 20:11
javascript вставки в vrml сцены. Передать событие из броузера Proletariy Javascript под браузер 0 10.05.2011 12:26