Кастомизация карточек в AnkiDroid

Если вы студент или изучаете что-то новое, то возможно, вы слышали о карточках для запоминания. Anki — это приложение для создания таких карточек, и я хочу показать его возможности на одном полезном примере. Я использую AnkiDroid для Android, но вы можете найти версию для вашей платформы на официальном сайте.

Новый тип карточек

Если вы учите новый язык, было бы неплохо добавить больше информации о словах, которые вы сохраняете в своих карточках. Базовый тип карточек содержит только два поля: лицевая и обратная стороны.

Чтобы добавить новый вид карточек, выберите «Manage note types» в меню под тремя точками.

Теперь нажмите на кнопку со знаком плюса (+) внизу.

Добавьте столько полей, сколько считаете нужным.

Макет карточки

Чтобы добавить поля на макет карточки, нажмите кнопку для редактирования макета карточки. На скриншоте она отмечена синим цветом.

Здесь вы можете использовать HTML. Нажимая на кнопки внизу, вы можете переключаться между лицевой и обратной стороной карточки. Также можно добавить CSS стили.

<span id="word">{{Front}}</span>

<span id="part-of-speech">({{Part of speech}})</span>

<div id="transcription">{{Transcription}}</div>

{{#Example}}

<hr>

<div id="example">{{Example}}</div>

{{/Example}}

<span id="word">{{Front}}</span>

<span id="part-of-speech">({{Part of speech}})</span>

<div id="transcription">{{Transcription}}</div>

{{#Example}}

<hr>

<div id="example">{{Example}}</div>

{{/Example}}

Используйте двойные фигурные скобки {{}} чтобы вывести значение поля на макете. Условие если записывается, как {{#Example}}{{/Example}}.

Это будет выглядеть так:

Чтобы сделать немного красивее, используйте CSS.

#part-of-speech {
    color: grey;
}

#transcription {
    font-size: 16px;
    color: lightblue;
}

#part-of-speech {
    color: grey;
}

#transcription {
    font-size: 16px;
    color: lightblue;
}

Применение JavaScript

Представьте, что вы хотите подсветить слово в примере. Для этого можно использовать HTML прямо в поле.

Однако, это было бы слишком утомительно писать так каждый раз, особено на смартфоне.

Вместо этого используйте JavaScript. Впишите его прямо в HTML макет внутри тега script.

<script>
  const example = document.getElementById('example');

  const exampleText = example.innerText
    .replace('(', '<mark>')
    .replace(')', '</mark>');

  example.innerHTML = exampleText;
</script>

<script>
  const example = document.getElementById('example');

  const exampleText = example.innerText
    .replace('(', '<mark>')
    .replace(')', '</mark>');

  example.innerHTML = exampleText;
</script>

Здесь я заменяю скобки на тег mark. Конечно, можно было бы просто найти слово с помощью регулярного выражения и обернуть его в тег, но слова могут в разных временах. Код, чтобы учитывать все вариации слов, оказался бы сложнее. Не усложняйте то, что можно сделать простым.

Теперь вы можете обернуть слово в скобки, чтобы подсветить его.

Результат будет таким:

Заключение

Это всего лишь один пример использования JavaScript в Anki, но уверен, что вы сможете придумать больше.