Skip to content

cdmoro/anki-material-flashcard

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

97 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Anki Material flashcard

The goal of this project is to have a supercharged version of the basic Anki flashcards (front and back fields). You can have a very basic card but with a good looking style and then add features like images, emojis, hints, headers, subheader, text blocks, etc. Also, you have several variants to choose.

Features

  • Material style
  • 11 color variants
  • Wide image support (front and back)
  • Header and subhedaer (front)
  • Back sections
  • External link icon
  • Hints
  • Pills
  • Emoji support
  • Audio controls, vertical and horizontal (front and back)

Screenshots

Light Dark
image image
image image

Demo

https://codepen.io/cdmoro/pen/ZEqbOLG

Installation

  1. Create a new card type on Anki (i.e. "Material basic")
  2. Copy the files into the right place (front, back and styles)
  3. Select the desired variant (optional)
  4. Voila!

Variants

Anki Material flashcard comes with several variants: base (default), blue, white, purple, pink, teal, green, and orange. All the colors were taken from the material color specification. Checkout the demo to see the colors in action!

Features

Audio

Audio style is supported out of the box. And the best is that you don't need to create a separate field for the audio, you can put it in the same field as the answer, for example, Water [audio:water.mp3] and voila!

Hints

Hints are supported, by default the display property is set to block and the text is displayed in italics. Add a hint is pretty straight forward, as you can see in the following example:

<div class="flashcard back base">
    {{FrontSide}}

    <hr id="answer">

    <div class="body">
        <div class="text-block">
           <div class="flex">{{Back}}</div>
          {{hint:Translation}}
        </div>
    </div>
</div>

Symbol class

If you are learning Chinese, Greek, and so, you can add the class symbol to the flashcards to get this more appeal style. Bonus tip: if you add a subheader element below the answer you can get this result:

<div class="flashcard front base symbol">
  <div class="body">
    漢字
    <div class="subheader">[kaɲdʑi]</div>
  </div>
</div>

image

Images

Back

<div class="flashcard back base">
  {{FrontSide}}
  <hr id="answer">
  <div class="body">
    <img src="https://picsum.photos/id/154/600/600" />
    <div class="text-block">
      <div class="flex">
        {{Back}}
      </div>
      {{hint:Variants}}
    </div>
  </div>
</div>

image

Header

<div class="flashcard front base">
  <div class="body">
    <div class="header">Greek nouns</div>
    Νερό
  </div>
</div>

image

Emoji

<div class="flashcard front base">
  <div class="body">
    <div class="emoji">🥣</div><br>Το πρωινό
  </div>
</div>

image

image

Examples

These examples were taken from imported decks and applied the Material flashcard (with minor adjustments).

image

image

image

Credits