Skip to content

4. Flashcard Creation

Jump to bottom
lrorpilla edited this page May 7, 2023 · 23 revisions

This page is under construction. Certain sections are yet to be finalized and supplementary images are not yet included.

This section is a brief primer to basic concepts that a user may need to understand in order to create flashcards. Users may refer to Anki documentation in order to get a more in-depth understanding.

Anki

Spaced repetition systems (SRS) are generally used by students to introduce a sense of discipline and routine into their daily schedule. Among these, Anki is a popular choice which lets users create flashcards and decks for personal study, with powerful customization of card content and formatting, and an ecosystem of open source plugins and automated workflows shared and built by many other users and communities.

In order to create and use flashcards with jidoujisho, you will need AnkiDroid alongside the application.

You may download AnkiDroid from the Google Play Store or directly from their project repository. If you do not have AnkiDroid, you will be prompted to install it, and will be unable to use the app's flashcard creation capabilities.

Card Creator

Users may open the Card Creator from the add note icon on the upper-right corner of the main menu, or from dictionary search results via the Card Creator quick action.

The Card Creator will open and its initial values will depend on a selected word or given text and currently playing media.

The following user interface elements can be found when using the Card Creator.

  1. The top bar, with the current profile, and on the right, buttons to Close on Export, Clear All Fields, Edit Enhancements and Change Profiles.
  2. Image and audio to be exported, if present.
  3. A drop-down which shows and remembers the deck to export to.
  4. List of fields that the user has enabled.
  5. A Create Card button.

The left icon of each field may be used to lock the value of the field. This means that upon clicking the Create Card button, the field will not clear. This is useful if for example, exporting the same sentence or word more than once for multiple cards.

Users may customize which fields they choose to show and what order they will appear in. They are also able to hide or collapse these in the Additional fields section instead. The right icons in a field are User Enhancements, which allow users to automate the card creation process with various functions.

See Workflow Setup for more information. For now, go ahead and try creating your first card!

Instant Export

Alternatively, a user may select the Instant Export button, which is to the left of the Card Creation button by default in dictionary search results. Instant Export will not open the Card Creator, and will instead export the word right away along with adjustments from auto enhancements that the user has assigned.

The jidoujisho Note Type

When opening the Card Creator or editing export profiles for the first time, the jidoujisho Yuuna note type will be added to AnkiDroid. This is a standard note type which the Standard profile uses. Deleting or editing this note type is not advised, the app will automatically add it back again if it is found missing.

If you want to fully control your note type, make your own and see the section on Export Profiles instead.

The jidoujisho Yuuna note type is included to provide users with a sane default from the get go.

The front shows only the dictionary term that the user has exported for the card. The back shows the dictionary definitions, sentence information, image and audio and more such as pronunciation and pitch accent information where appropriate. Having only the word in the front tests the user's ability to truly recall the definition without any of the stimuli that are available in the back.

The user is free to adjust their template in AnkiDroid as they desire. They may do so by editing the HTML or CSS that are shown below. The app will not adjust or edit details in the note type after it has been added for the first time.

Front

<div id="word">{{Term}}</div>

Back

<div id="word">{{furigana:Furigana}}</div>{{#Pitch Accent}}{{Pitch Accent}}{{/Pitch Accent}}
{{#Meaning}}<p><small>{{furigana:Meaning}}</small></p>{{/Meaning}}
{{#Expanded Meaning}}<p><small>{{furigana:Expanded Meaning}}</small></p>{{/Expanded Meaning}}{{#Collapsed Meaning}}<details><summary></summary><p><small>{{furigana:Collapsed Meaning}}</small></p></details><br>
{{/Collapsed Meaning}}
{{#Image}}<div class="image">{{Image}}</div>{{/Image}}
{{#Term Audio}}{{Term Audio}}{{/Term Audio}}{{#Sentence Audio}}{{Sentence Audio}}{{/Sentence Audio}}<br><div id="sentence">{{Sentence}}</div>

CSS

.card {
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  text-align: center;
  color: #333333;
  background-color: #F6F6F6;
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  padding: 24px;
  margin: 12px;
  border: 1px solid #D9D9D9;
}

#word {
  font-size: 30px;
  font-weight: bold;
  margin-bottom: 16px;
}

.details-summary {
  cursor: pointer;
  font-size: 16px;
  text-shadow: 1px 1px #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.details-summary:hover {
  color: #6495ED;
}

.details-summary:hover .arrow {
  transform: translateX(4px);
}

.arrow {
  fill: #777777;
  transition: transform 0.2s ease-in-out;
  margin-right: 8px;
}

.image img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
  margin-top: 16px;
  margin-bottom: 16px;
  transition: transform 0.2s ease-in-out;
}

.image:hover img {
  transform: scale(1.05);
}

.furigana {
  font-size: 22px;
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 16px;
  text-shadow: 1px 1px #ffffff;
}

.meaning {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 16px;
  text-shadow: 1px 1px #ffffff;
}

#sentence {
  font-size: 20px;
  line-height: 1.6;
  margin-top: 8px;
  margin-bottom: 8px;
} 

.pitch {
  border-top: solid red 2px;
  padding-top: 1px;
}

.pitch_end {
  border-color: red;
  border-right: solid red 2px;
  border-top: solid red 2px;  
  line-height: 1px;
  margin-right: 1px;
  padding-right: 1px;
  padding-top:1px;
}

Next Steps

These are the very basics of the application's card creation capabilities. In Workflow Setup, you can learn more about how to control card creation even more by making use of enhancements, fields, quick actions and more.

Clone this wiki locally