Learning Log

В этой статье я расскажу о создании шаблона для карточек Anki, позволяющего выбрать несколько вариантов ответа (с помощью checkboxes). Материал рассчитан на опытных пользователей Anki, в идеале - с опытом программирования.

Результат будет выглядеть примерно так:

img-1

Для удобства предлагаю создать новую колоду. Добавим в нее первую карточку, попутно создав новый тип. В качестве прототипа выберем самый простой из доступных типов - Basic. На рисунке ниже показано куда и в какой последовательности нужно нажимать для выполнения данной процедуры:

img-2

Более подробную инструкцию можно найти в официальном мануале Anki.

На рисунке также видно какие поля должны быть у нашей карточки:

• Question
• AllVariants
• CorrectVariants
• Splitter

Давайте посмотрим на пример заполненных полей, чтобы стало понятнее что к чему:

img-3

Из скриншота видно, что варианты ответов - как “All”, так и “Correct” - задаются в виде строки с разделителем. Что именно будет являться разделителем - задается в поле “Splitter”.

Важно! После создания карточки не редактируйте значение в поле “Splitter” для этой карточки. Это приведет к её “поломке”. Я предупредил. =)

В поле “CorrectVariants”, используя все тот же разделитель, вводим список правильных ответов. Нумерация ответов начинается с нуля. Т.е. в данном примере правильными будут “Вариант 1” (0-й элемент) и “Вариант 2” (1-й элемент).

Итак, на данном этапе у нас создан новый тип карточек, создана модель карточки и все ее поля заполнены. Теперь перейдем к самой основной части - подготовке шаблона. Эта часть является основной, т.к. весь функционал будет реализован за счет JavaScript-движка встроенного в рендерер карточек.

Сразу скажу, что для реализации нам потребуется аккаунт Firebase (бесплатный). Это связано с необходимостью как-то сохранить выбранные пользователем варианты на карточке с вопросом, и затем получить к ним доступ из карточки с ответом. К сожалению, насколько мне удалось разобраться, каждая сторона Anki-карточки рендерится как независимый DOM-документ, безо всякой возможности коммуникации между ними.

Поэтому нам и потребуется некое внешнее хранилище. В данном случае - Firebase.

Вкратце, для получения Firebase-хранилища нужно сделать следующее:

• зарегистрироваться на сайте https://firebase.google.com/;
• зайти в Firebase Console;
• добавить новый проект;
• в разделе “Database” этого проекта создать новую Realtime Database, в которую добавить поле “lastcheckboxes”.

В результате у вас должно получиться что-то подобное:

img-4

Кроме того, нужно 1) разрешить анонимный доступ к данному хранилищу и 2) убрать проверку авторизации. Второй пункт можно выполнить не выходя из раздела Database. Для этого кликните по кнопке “Правила” (на синей плашке), и замените содержимое следующим:

Для выполнения первого пункта нужно перейти в раздел “Authentication”/“Способы входа” и включить анонимный доступ.

На этом все подготовительные работы считаем законченными, и приступаем к добавлению желанного функционала. Для этого, в шаблоне нашей Anki-карточки заменяем все содержимое секции “Front Template” следующим кодом:

Значение переменной FB_DB_NAME нужно заменить, вставив вместо трех точек ID базы данных, который сгенерировал для вас Firebase (например, “myproject-4321”).

Далее, секцию “Styling” заполняем следущими стилями:

И, наконец, содержимое секции “Back Template”:

Тем, кто разбирается в JavaScript должно быть видно, что “алгоритм” предельно простой:

1. Превращаем строку с вариантами ответов в набор чекбоксов.
2. По клику на чекбокс сохраняем состояние в Firebase.
3. При открытии карточки с ответом - считываем сохраненное состояние из Firebase.
4. Раскрашиваем чекбоксы в “правильно”/“неправильно”.

Для удобства я сделал разные стили для ошибок типа “не выделил правильный ответ” и “выделил неправильный ответ”. В итоге, получаем такое:

img-5

На этом - все!