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}}