Skip to main content

Convert existing decks to Langki

In this tutorial, I will convert 4000 Essential English Words (all books) deck to Langki. This is an excellent resource for English learners, containing clear definitions, sample sentences, audio, and images. While the deck is already well-crafted, Langki adds an extra layer of interactivity and support. For example, with suggested responses, learners can easily ask the AI for additional help, such as translations in their native language, translated examples, collocations, synonyms, antonyms, more example sentences, etc

Modify the template​

First, we need to back up the Front Template, Back Template, and styling of the deck. (just save them somewhere).

Since Langki is just a template, copying its Front and Back templates into another note type will automatically embed the chatbot into that new note type.

Next, update the fields in both the Front and Back of the flashcard to match the schema of the 4000 Essential English Words deck.

Similarly, copy and paste the Back Template from the Langki – Prototype into this note type.

Since the 4000 Essential English Words deck uses a dark background, we should enable dark mode for Langki to match

Now, let’s compare it to the original version.

Fixing the autoplay audio problem​

In Langki, both the front and back of the flashcard are set up within the Front Template. However, this can cause an issue when autoplay audio is enabled and there's audio intended for the back section. In this case, the audio meant to play on the back will instead play on the front. So, we need to remove all audio from the back section in the Front Template.

However, if we do that, the back of the flashcard will no longer include audio.

So, we need a workaround to add audio to the back section when the flashcard turns to the Back template. We can do this by creating an HTML element that contains the audio in the Back Template, and then using custom JavaScript to insert the audio element into the back section only if that element exists.

<div class="back-side">
    {{FrontSide}}
</div>

<div id="audio">
    {{Sound_Meaning}}
    [sound:_1sec.mp3]
    {{Sound_Example}}
</div>
if (document.getElementById("audio")) {
  document.getElementById("back").appendChild(document.getElementById("audio"));
}