# Anki Guide for Studying
## Overview
1) Download the [Obsidian to Anki](https://github.com/Pseudonium/Obsidian_to_Anki/wiki) plugin for Obsidian, and the [Anki desktop](https://apps.ankiweb.net/) app.
2) Follow the instructions for [setup](https://github.com/Pseudonium/Obsidian_to_Anki/wiki/Setup) of AnkiConnect, which will parse your Obsidian notes that are formatted to Anki.
3) Setup Obsidian notes
4) Style cards in Obsidian for code
## Obsidian Setup
Pick a format to use for Obsidian. There are a few but I've included examples of what worked best for me below, though any format should work.
**How the template works**
- Any template that includes `TARGET DECK` followed by a line with your Topic::SubTopic (can be any words with `::` in between) will generate Anki decks once the plugin is run.
- A Question can be anything in between `Start` and `Obsidian-basic`
- An Answer is anyting between `Back:` and `END`
- These keywords have to be exact and are case sensitive.
After some trial and error, I found that worked best for me was to write front/back programming questions and then just compare my typed solution rather than mess with Regex. Too much complexity limited how many cards I'd create.
Here's my basic template, an example with text, and example with code blocks or screen grabs of code if it's very verbose..
### Anki Template
```markdown
TARGET DECK
Topic::Subtopic
START
Obsidian-basic
Back:
END
```
### Text Only Example
```markdown
TARGET DECK
Trivia::Cat Facts
START
What do you call a group of cats?
Obsidian-basic
Back:
A group of cats is called a **clowder**
END
```
### Example with Code
START
Obsidian-basic
**Problem:**
Provide a concise alternative to a switch statement.
Back:
Using an object with key-value pairs and `??` (nullish coalescing) operator
```js
function getTranslationMap(rhyme) {
const rhymes = {
"apples and pears": "Stairs",
"hampstead heath": "Teeth",
"loaf of bread": "Head",
"pork pies": "Lies",
"whistle and flute": "Suit",
}
return rhymes[rhyme.toLowerCase()] ?? "Not found";
}
```
```js
getTranslationMap("loaf of bread") // 'Head'
getTranslationMap("Butts and buns") //'Not found'
```
<!--ID: 1714976888172-->
END
### Plugin Settings
## Anki Setup
In the Anki Desktop program, I also added structure and styling (see below) to make the cards look nicer. This is for a Mac, it may be different on a PC, but you porbably want to find:
- Decks > Cards > Choose a front/back card template
- Add HTML/CSS and variables
Looks something like this:
### HTML / CSS for Cards
Front
```html
<link href="https://cdn.jsdelivr.net/npm/
[email protected]/arta.css" rel="stylesheet"><h4 id="q13whatistheresultintheconsoleofrunningthiscode">
<div class="card">
<div class="front">{{Front}}<hr width="90%"></div>
<div>
```
Back
```html
<div class="card">
<div class="front">{{Front}}<hr width="90%"></div>
<div>
<div class="back">
<br />
{{Back}}
</div>
</div>
```
```css
.card {
font-family: inherit;
font-weight: 400;
margin: 0 auto;
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: left;
color: inherit;
width: 80%;
}
code {
text-align:left;
font-size: 18px;
display: inline-block;
padding: 4px;
margin: 4px auto;
max-width: 600px;
background-color: #222;
color: #ccc;
}
em, strong {
color: #bd6486;
}
.front, .back {
font-size: 20px;
}
.front {
text-align:center;
}
ul {
width: 90%;
margin: 0 auto;
}
ul li, ol li {
text-align: left;
}
input[*='checkbox']:enabled {
background-color: white !important;
}
```
### Anki Example
Here's my final product, feel free to style the cards however you think is best. My CSS template is pretty old so I'm sure it could be improved.
Front
Back:
## That's it!
I hope that helps. Email me if you have any questions!