Flashcard generation
The idea
One of Anki's greatest strengths is its ability to let users design flashcards using HTML, CSS, and JavaScript. This means we can replicate almost any type of exercise found in other language learning apps. However, one bottleneck that Anki faces is data. Creating content on Anki can be tedious, as users have to manually enter information into individual fields, which are later rendered into flashcards using HTML. What if we could eliminate this intermediate step by using AI to generate the HTML directly?
For example, instead of designing a flashcard template like this:
<div>{{Definition}}</div>
We can guide the AI to generate a flashcard by providing it with a format like this:
<div description="the definition of the vocabulary item">...</div>
Create a note type for learning vocabulary
I will use Langki to create a note type for learning vocabulary through multiple-choice questions. While multiple-choice questions are not encouraged in Anki, they serve as a great example to demonstrate the flexibility of this approach. This is because creating multiple-choice questions can be time-consuming, as it requires coming up with distractors.
First, I will clone the Langki - prototype to create a new note type called Langki - Vocabulary (multiple choice)
This is the prompt I use to guide the AI in generating the flashcard.
The front and back fields are left empty to trigger flashcard generation
And this is the flashcard AI generates
And these are the 'Front' and 'Back' fields after the generation
Back:
The great thing about this approach is that we only need to enter the word, and the AI generates everything we need based on the HTML template we’ve defined. Since the end result is just HTML, we can fully use CSS and JavaScript to style and tweak the flashcard.
Now let's use JavaScript to modify the flashcard, as 10 options seem a lot. A better design would be to randomly select 3 distractors and shuffle them with the correct option. By using JavaScript for this, each review session will be different. I will use chatGPT to help me write the script
However, to use JS on the generated flashcard we need to put them inside a function callded jsCode
The end result. You can download this note type here.
I have to admit that learning vocabulary this way is far from effective, but it demonstrates that by using AI to generate HTML directly, we can theoretically create many flashcards that would otherwise take a lot of time to build manually.