Loading...
 

Anki cards code

For the convenience of advanced Anki users who want to know how I set up the conditional links and the hover-overs that have been tested as working on Android, PC, and Mac, here they are. Anki has me gritting my teeth sometimes, but I take my hat off to it for being so wonderfully customisable.

Front Template

{{#Show these pic 1s}}
	{{#Show this pic 1}}
		{{Card 1 pic}} <br>
	{{/Show this pic 1}}
{{/Show these pic 1s}}


Styling

.card {
 font-family: arial;
 font-size: 12px;
 text-align: center;
 color: black;
 background-color: white;
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    font-size: 12px;    
    visibility: hidden;
    width: 240px;
    background-color: #111;
    color: #fff;
    text-align: left;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -120px;
    opacity: 0;
    transition: opacity 0.3s;
}

/* tested as working on Windows 8.1 */
.win .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* tested as working on Ankidroid on Android 6.0.1 */
.mobile .tooltip:active .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* not yet tested */
.linux .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

/* not yet tested */
.mac .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


Back Template

<hr id=answer>

<div style='font-size: 10px;'>
	{{Source ID}}
</div>

<! 
The English name field is shown as a link to the fishbase website only if both the Genus and 
Species fields are non-blank - see the Anki manual's section on 'Conditional Replacment'. 
>
<div style='font-size: 20px;'>
	{{#Genus}}
		{{#Species}}
			<a href="http://www.fishbase.de/summary/{{text:Genus}}-{{text:Species}}.html">
		{{/Species}}
	{{/Genus}}
	{{text:Common name}}
</div>

<div style='font-size: 14px;'>
	<i>
		<a href="https://en.wikipedia.org/wiki/{{text:Genus}}">{{text:Genus}}</a> 
		<a href="https://en.wikipedia.org/wiki/{{text:Genus}}_{{text:Species}}">{{text:Species}}</a>
	</i>
	{{#FishesOfAustralia}}
		<a href="{{text:FishesOfAustralia}}">FoA</a>
	{{/FishesOfAustralia}}
</div>

<div style='font-size: 12px; margin-top: 3px;'>
	{{Higher taxon common name}} {{Higher taxon type}}
 	<i>
		<a href="https://en.wikipedia.org/wiki/{{text:Higher taxon}}">{{text:Higher taxon}}</a> 
	</i> 
</div>

<div style='font-size: 12px; margin-top: 2px;''>
	{{Highest taxon common name}}
	{{Highest taxon type}}
	<i>
		<a href="https://en.wikipedia.org/wiki/{{text:Highest taxon}}">{{text:Highest taxon}}</a>
	</i>  
</div>

<div style='font-size: 14px; margin-top: 3px;'>
	{{Notes}}
</div>


<div style='font-size: 8px;'>

	{{#Show these pic 1s}}
		{{#Show this pic 1}}
			<br>
			{{Card 1 pic}} <br>
			{{#Card 1 pic licence URL}}
				<a href="{{text:Card 1 pic licence URL}}">{{text:Card 1 pic licence link text}}</a>
				{{Card 1 pic licence notes}}
			{{/Card 1 pic licence URL}}
			{{^Card 1 pic licence URL}}
				<div class="tooltip">{{text:Card 1 pic licence link text}}
					<span class="tooltiptext">{{text:Card 1 pic licence notes}}</span>
				</div>
			 {{/Card 1 pic licence URL}}
			<br>
		{{/Show this pic 1}}
	{{/Show these pic 1s}}

	{{#Show these pic 2s}}
		{{#Show this pic 2}}
			<br>
			{{Card 2 pic}} <br>
			{{#Card 2 pic licence URL}}
				<a href="{{text:Card 2 pic licence URL}}">{{text:Card 2 pic licence link text}}</a>
				{{Card 2 pic licence notes}}
			{{/Card 2 pic licence URL}}
			{{^Card 2 pic licence URL}}
				<div class="tooltip">{{text:Card 2 pic licence link text}}
					<span class="tooltiptext">{{text:Card 2 pic licence notes}}</span>
				</div>
			 {{/Card 2 pic licence URL}}
			<br>
		{{/Show this pic 2}}
	{{/Show these pic 2s}}

	{{#Show these pic 3s}}
		{{#Show this pic 3}}
			<br>
			{{Card 3 pic}} <br>
			{{#Card 3 pic licence URL}}
				<a href="{{text:Card 3 pic licence URL}}">{{text:Card 3 pic licence link text}}</a>
				{{Card 3 pic licence notes}}
			{{/Card 3 pic licence URL}}
			{{^Card 3 pic licence URL}}
				<div class="tooltip">{{text:Card 3 pic licence link text}}
					<span class="tooltiptext">{{text:Card 3 pic licence notes}}</span>
				</div>
			 {{/Card 3 pic licence URL}}
			<br>
		{{/Show this pic 3}}
	{{/Show these pic 3s}}

	{{#Show these pic 4s}}
		{{#Show this pic 4}}
			<br>
			{{Card 4 pic}} <br>
			{{#Card 4 pic licence URL}}
				<a href="{{text:Card 4 pic licence URL}}">{{text:Card 4 pic licence link text}}</a>
				{{Card 4 pic licence notes}}
			{{/Card 4 pic licence URL}}
			{{^Card 4 pic licence URL}}
				<div class="tooltip">{{text:Card 4 pic licence link text}}
					<span class="tooltiptext">{{text:Card 4 pic licence notes}}</span>
				</div>
			 {{/Card 4 pic licence URL}}
			<br>
		{{/Show this pic 4}}
	{{/Show these pic 4s}}

	{{#Show these pic 5s}}
		{{#Show this pic 5}}
			<br>
			{{Card 5 pic}} <br>
			{{#Card 5 pic licence URL}}
				<a href="{{text:Card 5 pic licence URL}}">{{text:Card 5 pic licence link text}}</a>
				{{Card 5 pic licence notes}}
			{{/Card 5 pic licence URL}}
			{{^Card 5 pic licence URL}}
				<div class="tooltip">{{text:Card 5 pic licence link text}}
					<span class="tooltiptext">{{text:Card 5 pic licence notes}}</span>
				</div>
			 {{/Card 5 pic licence URL}}
			<br>
		{{/Show this pic 5}}
	{{/Show these pic 5s}}

	{{#Show these pic 6s}}
		{{#Show this pic 6}}
			<br>
			{{Card 6 pic}} <br>
			{{#Card 6 pic licence URL}}
				<a href="{{text:Card 6 pic licence URL}}">{{text:Card 6 pic licence link text}}</a>
				{{Card 6 pic licence notes}}
			{{/Card 6 pic licence URL}}
			{{^Card 6 pic licence URL}}
				<div class="tooltip">{{text:Card 6 pic licence link text}}
					<span class="tooltiptext">{{text:Card 6 pic licence notes}}</span>
				</div>
			 {{/Card 6 pic licence URL}}
			<br>
		{{/Show this pic 6}}
	{{/Show these pic 6s}}

</div>


<! 
A link to Fishbase.de species thumbnails and Google Images is shown depending on 
whether there are non-blank values in the Species, Genus, or Higher Taxon fields. 
The '&tbm=isch' suffix is an undocumented Google feature that limits the 
google search to Images only.

The Fishbase images have the advantage of rigourous checking.
>

{{#Genus}}
	{{#Species}}
		<br>
		<a href="https://www.fishbase.de/photos/ThumbnailsSummary.php?Genus={{text:Genus}}&Species={{text:Species}}">
		View reliable fishbase.de thumbnails for <i>{{text:Species}}</i></a>

		<br>
		<a href="http://www.google.com/search?q={{text:Genus}}+{{text:Species}}&tbm=isch">
		Google <i>{{text:Species}}</i> images</a>
	{{/Species}}
{{/Genus}}

{{#Genus}}
	<br>
	<a href="https://www.fishbase.de/identification/SpeciesList.php?genus={{text:Genus}}&resultPage=1&sortby=species">
	View reliable fishbase.de thumbnails for <i>{{text:Genus}}</i></a>

	<br>
	<a href="http://www.google.com/search?q={{text:Genus}}&tbm=isch">
	Google <i>{{text:Genus}}</i> images</a>
{{/Genus}}

{{#Higher taxon}}
	<br>
	<a href="http://www.google.com/search?q={{text:Higher taxon}}&tbm=isch">
	Google <i>{{text:Higher taxon}}</i> images</a>
{{/Higher taxon}}

Last-Visited Pages

You forgot your Google ad_client number !