Anki Minimal Language Learning Template: Grammar Note Type Update

Date: 22 Jun 2021

#post #anki

This post originally appeared on Blog 2.0

Written 26 August 2020… forgot to post for a year

Just an update to the Anki Minimal Language Learning Template created last week. Anki’s SRS is a very powerful tool for vocabulary learning but it doesn’t mean that it’s only useful for memorising words, so why not make an extra note type for grammar that is stylistically consistent with the previous template.

It happens so that the ability to type in answers in cloze deletions can be implemented simply by adding the line {{type:cloze:Text}}.

H2 Preview

H2 Design principles

The idea is that, instead of rote memorising grammar rules, users will be prompted a sentence that demonstrates a grammar rule with a blank that they need to type in as well as an image showing the situation described by the sentence. It is only when the answer is checked will they be able to see the grammar rule reflected in the sentence that they will have completed. This way, learners will be able to build connection between the specific sentences with their corresponding rules and images, which is what I personally prefer over plain rules that evoke little connection.

H2 Code

H3 Front HTML

<p style="text-align: right; font-size: 12px; margin-bottom: -20px; color: #bbb">grammar</p>
<span class="bigbigbig">{{cloze:sentence with blank (cloze)}}</span>

<span class="serif bold bigbigbig black" style="text-aligh: center">{{type:cloze:sentence with blank (cloze)}}</span>
		
{{#image}}
	<div class="section-title bold small verylightcolour">IMAGE</div>
	{{image}}
{{/image}}

H3 Back HTML

<p style="text-align: right; font-size: 12px; margin-bottom: -20px; color: #bbb">grammar</p>
<span class="bigbigbig">{{cloze:sentence with blank (cloze)}}</span>
<div style="height: 10px"></div>
<span class="serif bold bigbigbig black">{{type:cloze:sentence with blank (cloze)}}</span>
		
{{#image}}
	<div class="section-title bold small verylightcolour">IMAGE</div>
	{{image}}
{{/image}}

<!--====-->

<div class="section-title bold small verylightcolour" id=answer>RULE</div>

<span id="rule">{{grammar rule}}</span>

H3 CSS

/* Layout */

.card {
	font-family: "Gill Sans", Helvetica, Arial;
	font-size: 1.4rem;
	text-align: center;
	color: #4B515D;
	background-color: white;
	height: 100%;
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;
	align-self: center;
}

hr.hr-block {
	border: 2px solid #7eb1fc; width:200px; margin-top: 20px; margin-bottom: 20px;
	max-width: 200px
}

.section-title {
	display: flex;
	align-items: center;
	text-align: center;
	font-family: "Futrura", "Gill Sans", Helvetica, Arial;
	letter-spacing: 0.3rem;
	margin-top: 12px;
	margin-bottom: 12px;
/*	max-width: 500px; */
	margin-left: auto;
	margin-right: auto;
}

.section-title::before,
.section-title::after {
	content: "";
	flex: 1;
	border-bottom: 1px solid #dfe8ec;
}

.section-title::before {
	margin-right: 1em;
}

.section-title::after {
	margin-left: 0.7em;
}

img {
	min-width: 350px;
	max-width 500px;
}

input#typeans {
    text-align: center
}

/* Play button */

.replay-button {
    margin: 0px;
}
.replay-button svg {
	width: 16px;
	height: 16px;
}
.replay-button svg circle {
	fill: white;
}
.replay-button svg path {
    stroke: white;
    fill: #0d47a1;
}

/* Typography */

.serif {
	font-family: "Georgia", Times New Romen;
}
.sans {
	font-family: "Futura", "Gill Sans", Helvetica, Arial;
}
.bold {
	font-weight: bold;
}
.light {
	font-weight: light;
}
.italic {
	font-style: italic;
}
.title {
	color: #4285F4;
	font-size: 0.8rem;
}
b {
	color: #0d47a1;
}
u {
}
i {
}
.bigbigbig {
	font-size: 1.6rem
}
.bigbig {
	font-size: 1.4rem
}
.big {
	font-size: 1.2rem
}
.normal {
	font-size 1rem
}
.small {
	font-size: 0.96rem
}
.smallsmall {
	font-size: 0.7rem
}
.smallsmallsmall {
	font-size: 0.5rem
}
.primary, a {
	color: #0d47a1
}
.light-primary {
	color: #4285F4
}
.lightcolour {
	color: #3E4551
}
.verylightcolour {
	color: #90a4ae
}

.text {
	max-width:700px;
	margin-left: auto;
	margin-right: auto;
	align-self: center;
}

.add-top-margin {
	margin-top: 5px
}

.black {
	color: black
}

.cloze {
	font-weight: bold;
	color: #0d47a1;
	text-decoration: underline;
}
span#rule b, span#rule u, span#rule i {
	color: #4285F4;
	text-decoration: underline;
	font-weight: bold;
}

/* type */

.typeGood {
    background: #8af28a;
}
.typeBad {
	background: #fca897
}
.typeMissed {
	background: #d5d5d5
}

input {
	font-family: "Georgia", Times New Romen !important;
}

input:focus, textarea:focus, select:focus{
	outline: none;
	text-align: center;
	font-weight: bold;
	color: #0d47a1;
}

#typeans {
	font-size: 1.9rem;
	margin-top: 10px;
}

zettelkasten