Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
HTML used by AnkiMobile 2.0.63 to render card templates; a reference for creating advanced Anki card templates with special HTML/CSS. When used by AnkiMobile, the card's HTML replaces the `<!-- (Card contents) -->` comment in this gist, with the shared styles dropped inline inside a `<style>` tag.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" class=" webkit safari mobile iphone js">
<head>
<meta name="viewport" id="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=10,user-scalable=1" />
<script src="res/jquery-2.2.2.min.js"></script>
<script src="res/browsersel.min.js"></script>
<script type="text/x-mathjax-config;executed=true">
MathJax.Hub.processSectionDelay = 0;
MathJax.Hub.processUpdateTime = 0;
MathJax.Hub.processUpdateDelay = 0;
MathJax.Hub.Config({
jax: ["input/TeX","output/CommonHTML"],
extensions: ["tex2jax.js"],
TeX: {
extensions: ["AMSmath.js","AMSsymbols.js","noErrors.js","noUndefined.js","mhchem.js"]
},
tex2jax: {
displayMath: [ ["\\[","\\]"] ],
},
messageStyle: "none",
skipStartupTypeset: true,
showMathMenu: false
});
</script>
<script type="text/javascript" src="res/mathjax/MathJax.js"></script>
<style type="text/css">
.MathJax_Preview {color: #888}
#MathJax_Message {position: fixed; left: 1px; bottom: 2px; background-color: #E6E6E6; border: 1px solid #959595; margin: 0px; padding: 2px 8px; z-index: 102; color: black; font-size: 80%; width: auto; white-space: nowrap}
#MathJax_MSIE_Frame {position: absolute; top: 0; left: 0; width: 0px; z-index: 101; border: 0px; margin: 0px; padding: 0px}
.MathJax_Error {color: #CC0000; font-style: italic}
</style>
<style id="ss"></style>
<style>
div { overflow-wrap: break-word; }
body {
text-align: center;
font-size: 1em;
-webkit-transform: translate3d(0,0,0);
-webkit-font-smoothing:antialiased;
font: -apple-system-body;
margin: 15px;
margin-left: max(15px, env(safe-area-inset-left));
margin-right: max(15px, env(safe-area-inset-right));
}
img {
max-width: 95%;
}
.drawing { zoom: 50%; }
.nightMode img.drawing {
filter: invert() hue-rotate(180deg)
}
.nightMode .latex {
filter: invert() hue-rotate(180deg)
}
#typeans {
width: 95%;
margin-top: 5px;
}
.invis { visibility:hidden; }
.playImage {
-webkit-user-drag: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
.soundLink {
-webkit-user-drag: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
a.soundLink:active {
-webkit-tap-highlight-color: #00000000:
}
.soundLink {
text-decoration: none;
}
.replay-button svg {
width: 64px;
height: 64px;
}
.replay-button svg circle {
fill: #fff;
stroke: #414141;
}
.replay-button svg path {
fill: #414141;
}
.typeGood { background: #0f0; }
.typeBad { background: #f00; }
.typeMissed { background: #ccc; }
body.nightMode {
background-color: black;
color: white;
}
.nightMode a { color: #77ccff; }
</style>
</head>
<body class="card card1 " style="-webkit-text-size-adjust: 120%;">
<div id="MathJax_Message" style="display: none;"></div>
<div id="qa" style="opacity: 0;">
<style> /* Inline style */ </style>
<!-- (Card contents) -->
</div>
<script src="res/reviewer.min.js"></script>
</body>
</html>
var anki=Object();anki.answerScrollTime=200;anki.constrainViewport=function(){document.getElementById("viewport").setAttribute("content","width=device-width,initial-scale=1.0,maximum-scale=1")};anki.resetViewport=function(){document.getElementById("viewport").setAttribute("content","width=device-width,initial-scale=1.0,maximum-scale=10,user-scalable=1")};anki.scrollToTop=function(){window.scrollTo(0,0)};anki.queueScrollToAnswer=function(){setTimeout(anki.scrollToAnswer,100)};anki.scrollToAnswer=function(){var n=document.getElementById("answer");if(!n){return}$("html,body").animate({scrollTop:$("#answer").offset().top},anki.answerScrollTime)};anki.latexError=function(n){var e=document.createElement("div");e.innerHTML="Missing LaTeX image <a href='http://ankisrs.net/docs/manual.html#latex-on-web/mobile'>(help)</a>";n.parentNode.replaceChild(e,n)};var setInnerHTML=function(n,e){n.innerHTML=e;for(var i=0,a=n.querySelectorAll("script");i<a.length;i++){var t=a[i];var o=document.createElement("script");var r=t.attributes;for(var u=0;u<r.length;u++){var c=r[u];o.setAttribute(c.name,c.value)}o.appendChild(document.createTextNode(t.innerHTML));t.parentNode.replaceChild(o,t)}};var _updatingQA=false;anki.qFade=100;anki.aFade=0;anki.onUpdateHook=[];anki.onShownHook=[];function _runHook(n){for(var e=0;e<n.length;e++){n[e]()}}function _updateQA(i,n,e,a){if(_updatingQA){setTimeout(function(){_updateQA(i,n,e,a)},50);return}_updatingQA=true;anki.fontsMadeRelative=false;anki.onUpdateHook=[e];anki.onShownHook=[a];var t=$("#qa");t.fadeTo(n,0,function(){anki.resetViewport();try{setInnerHTML(t[0],i)}catch(n){var e=i;e+="<div style='font-size: 14px;'>";e+="This card contains a JS error: "+n;e+="<br><br>Please report the problem to the author of the deck.</div>";t[0].innerHTML=e}anki.rescaleText(_currentScale);_runHook(anki.onUpdateHook);MathJax.Hub.Queue(["Typeset",MathJax.Hub]);MathJax.Hub.Queue(function(){t.fadeTo(n,1,function(){_runHook(anki.onShownHook);_updatingQA=false})})})}anki.showQuestion=function(n,e,i){document.body.className=e;_currentScale=i;_updateQA(n,anki.qFade,function(){window.scrollTo({top:0,left:0,behavior:"smooth"})},function(){})};anki.showAnswer=function(n,e){_updateQA(n,anki.aFade,function(){if(e){document.body.className=e}anki.scrollToAnswer()},function(){})};function makeFontsRelative(n){if(!n){return}if(typeof n.childNodes!=="undefined"){for(var e=0;e<n.childNodes.length;e++){makeFontsRelative(n.childNodes[e])}}if(typeof n.style!=="undefined"){var i=computedFontSize(n);if(!i){return}n.style.fontSize=i/10+"rem"}}function computedFontSize(n){var e=window.getComputedStyle(n).fontSize;var i=e.match(/(\d+(.\d+)?)px/);if(i){return parseFloat(i[1])}else{console.log("couldn't get computed size");return 16}}anki.fontsMadeRelative=false;anki.rescaleForIpad=function(n){var e=n.toFixed(2);if(e==="1.00"&&!anki.fontsMadeRelative){return}if(!anki.fontsMadeRelative){document.documentElement.style.fontSize="62.5%";document.body.style.removeProperty("font-size");document.getElementById("qa").style.removeProperty("font-size");makeFontsRelative(document.body);anki.fontsMadeRelative=true}var i=62.5*n;document.documentElement.style.fontSize=i+"%"};anki.rescaleForIphone=function(n){n=(n*100).toFixed(0);document.getElementsByTagName("body")[0].style.webkitTextSizeAdjust=n+"%"};var isIpad=navigator.userAgent.includes("iPad");var _currentScale;anki.rescaleText=function(n){if(!n){n=_currentScale}else{_currentScale=n}if(isIpad){anki.rescaleForIpad(n)}else{anki.rescaleForIphone(n)}};anki.i=0;document.ontouchstart=function(n){anki.t=n.touches[0].clientX;anki.o=n.touches[0].clientY;anki.u=(new Date).getTime()};anki.s=function(){var n=(new Date).getTime();if(n-anki.i>100){anki.i=n;return false}return true};document.ontouchend=function(n){if(anki.s()){n.preventDefault();return}anki.k(n)};anki.k=function(n){if(anki.v(n)){return}if((new Date).getTime()-anki.u>300){return}if(anki.l()){return}var e=n.changedTouches[0].clientX;var i=n.changedTouches[0].clientY;var a=Math.abs(e-anki.t);var t=Math.abs(i-anki.o);var o=30;if(a>o||t>o){return}var r;var u=window.innerHeight/3;var c=window.innerWidth/3;e=Math.floor(e/c);i=Math.floor(i/u);if(e<0||e>2||i<0||i>2){return}e=["Left","Center","Right"][e];i=["top","mid","bottom"][i];r=i+e;sendMessage("ankitap",r);n.preventDefault()};anki.v=function(n){var e=n.srcElement;while(e&&e!=document){var i=e.nodeName=="A"||e.onclick||e.nodeName=="BUTTON"||e.nodeName=="VIDEO"||e.nodeName=="SUMMARY";if(i){return true}if(e.classList&&e.classList.contains("tappable")){return true}e=e.parentNode}return i};anki.l=function(){return!document.getSelection().isCollapsed};var console={log:function(n){sendMessage("ankilog",n)}};var sendMessage=function(n,e){if(typeof webkit==="undefined"||webkit==null){var i=n+"://"+e;var a=document.createElement("IFRAME");a.style.visibility="hidden";a.setAttribute("src",i);document.documentElement.appendChild(a);a.parentNode.removeChild(a);a=null;return}var t={scheme:n,msg:e};try{webkit.messageHandlers.cb.postMessage(JSON.stringify(t))}catch(n){console.log("error sending message: "+n)}};anki.playSound=function(n,e){var i={idx:n,questionSide:e};sendMessage("playsound",i)};$(document).ready(function(){sendMessage("ankiinternal","DOMIsReady")});anki.pageUp=function(){var n=window.scrollY+window.innerHeight*.9;window.scrollBy({top:-n,behavior:"smooth"})};anki.pageDown=function(){var n=window.scrollY+window.innerHeight*.9;window.scrollBy({top:n,behavior:"smooth"})};
var anki = Object();
anki.answerScrollTime = 200;
anki.constrainViewport = function () {
document
.getElementById("viewport")
.setAttribute(
"content",
"width=device-width,initial-scale=1.0,maximum-scale=1"
);
};
anki.resetViewport = function () {
document
.getElementById("viewport")
.setAttribute(
"content",
"width=device-width,initial-scale=1.0,maximum-scale=10,user-scalable=1"
);
};
anki.scrollToTop = function () {
window.scrollTo(0, 0);
};
anki.queueScrollToAnswer = function () {
setTimeout(anki.scrollToAnswer, 100);
};
anki.scrollToAnswer = function () {
var n = document.getElementById("answer");
if (!n) {
return;
}
$("html,body").animate(
{
scrollTop: $("#answer").offset().top,
},
anki.answerScrollTime
);
};
anki.latexError = function (n) {
var e = document.createElement("div");
e.innerHTML =
"Missing LaTeX image <a href='http://ankisrs.net/docs/manual.html#latex-on-web/mobile'>(help)</a>";
n.parentNode.replaceChild(e, n);
};
var setInnerHTML = function (n, e) {
n.innerHTML = e;
for (var i = 0, a = n.querySelectorAll("script"); i < a.length; i++) {
var t = a[i];
var o = document.createElement("script");
var r = t.attributes;
for (var u = 0; u < r.length; u++) {
var c = r[u];
o.setAttribute(c.name, c.value);
}
o.appendChild(document.createTextNode(t.innerHTML));
t.parentNode.replaceChild(o, t);
}
};
var _updatingQA = false;
anki.qFade = 100;
anki.aFade = 0;
anki.onUpdateHook = [];
anki.onShownHook = [];
function _runHook(n) {
for (var e = 0; e < n.length; e++) {
n[e]();
}
}
function _updateQA(i, n, e, a) {
if (_updatingQA) {
setTimeout(function () {
_updateQA(i, n, e, a);
}, 50);
return;
}
_updatingQA = true;
anki.fontsMadeRelative = false;
anki.onUpdateHook = [e];
anki.onShownHook = [a];
var t = $("#qa");
t.fadeTo(n, 0, function () {
anki.resetViewport();
try {
setInnerHTML(t[0], i);
} catch (n) {
var e = i;
e += "<div style='font-size: 14px;'>";
e += "This card contains a JS error: " + n;
e += "<br><br>Please report the problem to the author of the deck.</div>";
t[0].innerHTML = e;
}
anki.rescaleText(_currentScale);
_runHook(anki.onUpdateHook);
MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
MathJax.Hub.Queue(function () {
t.fadeTo(n, 1, function () {
_runHook(anki.onShownHook);
_updatingQA = false;
});
});
});
}
anki.showQuestion = function (n, e, i) {
document.body.className = e;
_currentScale = i;
_updateQA(
n,
anki.qFade,
function () {
window.scrollTo({
top: 0,
left: 0,
behavior: "smooth",
});
},
function () {}
);
};
anki.showAnswer = function (n, e) {
_updateQA(
n,
anki.aFade,
function () {
if (e) {
document.body.className = e;
}
anki.scrollToAnswer();
},
function () {}
);
};
function makeFontsRelative(n) {
if (!n) {
return;
}
if (typeof n.childNodes !== "undefined") {
for (var e = 0; e < n.childNodes.length; e++) {
makeFontsRelative(n.childNodes[e]);
}
}
if (typeof n.style !== "undefined") {
var i = computedFontSize(n);
if (!i) {
return;
}
n.style.fontSize = i / 10 + "rem";
}
}
function computedFontSize(n) {
var e = window.getComputedStyle(n).fontSize;
var i = e.match(/(\d+(.\d+)?)px/);
if (i) {
return parseFloat(i[1]);
} else {
console.log("couldn't get computed size");
return 16;
}
}
anki.fontsMadeRelative = false;
anki.rescaleForIpad = function (n) {
var e = n.toFixed(2);
if (e === "1.00" && !anki.fontsMadeRelative) {
return;
}
if (!anki.fontsMadeRelative) {
document.documentElement.style.fontSize = "62.5%";
document.body.style.removeProperty("font-size");
document.getElementById("qa").style.removeProperty("font-size");
makeFontsRelative(document.body);
anki.fontsMadeRelative = true;
}
var i = 62.5 * n;
document.documentElement.style.fontSize = i + "%";
};
anki.rescaleForIphone = function (n) {
n = (n * 100).toFixed(0);
document.getElementsByTagName("body")[0].style.webkitTextSizeAdjust = n + "%";
};
var isIpad = navigator.userAgent.includes("iPad");
var _currentScale;
anki.rescaleText = function (n) {
if (!n) {
n = _currentScale;
} else {
_currentScale = n;
}
if (isIpad) {
anki.rescaleForIpad(n);
} else {
anki.rescaleForIphone(n);
}
};
anki.i = 0;
document.ontouchstart = function (n) {
anki.t = n.touches[0].clientX;
anki.o = n.touches[0].clientY;
anki.u = new Date().getTime();
};
anki.s = function () {
var n = new Date().getTime();
if (n - anki.i > 100) {
anki.i = n;
return false;
}
return true;
};
document.ontouchend = function (n) {
if (anki.s()) {
n.preventDefault();
return;
}
anki.k(n);
};
anki.k = function (n) {
if (anki.v(n)) {
return;
}
if (new Date().getTime() - anki.u > 300) {
return;
}
if (anki.l()) {
return;
}
var e = n.changedTouches[0].clientX;
var i = n.changedTouches[0].clientY;
var a = Math.abs(e - anki.t);
var t = Math.abs(i - anki.o);
var o = 30;
if (a > o || t > o) {
return;
}
var r;
var u = window.innerHeight / 3;
var c = window.innerWidth / 3;
e = Math.floor(e / c);
i = Math.floor(i / u);
if (e < 0 || e > 2 || i < 0 || i > 2) {
return;
}
e = ["Left", "Center", "Right"][e];
i = ["top", "mid", "bottom"][i];
r = i + e;
sendMessage("ankitap", r);
n.preventDefault();
};
anki.v = function (n) {
var e = n.srcElement;
while (e && e != document) {
var i =
e.nodeName == "A" ||
e.onclick ||
e.nodeName == "BUTTON" ||
e.nodeName == "VIDEO" ||
e.nodeName == "SUMMARY";
if (i) {
return true;
}
if (e.classList && e.classList.contains("tappable")) {
return true;
}
e = e.parentNode;
}
return i;
};
anki.l = function () {
return !document.getSelection().isCollapsed;
};
var console = {
log: function (n) {
sendMessage("ankilog", n);
},
};
var sendMessage = function (n, e) {
if (typeof webkit === "undefined" || webkit == null) {
var i = n + "://" + e;
var a = document.createElement("IFRAME");
a.style.visibility = "hidden";
a.setAttribute("src", i);
document.documentElement.appendChild(a);
a.parentNode.removeChild(a);
a = null;
return;
}
var t = {
scheme: n,
msg: e,
};
try {
webkit.messageHandlers.cb.postMessage(JSON.stringify(t));
} catch (n) {
console.log("error sending message: " + n);
}
};
anki.playSound = function (n, e) {
var i = {
idx: n,
questionSide: e,
};
sendMessage("playsound", i);
};
$(document).ready(function () {
sendMessage("ankiinternal", "DOMIsReady");
});
anki.pageUp = function () {
var n = window.scrollY + window.innerHeight * 0.9;
window.scrollBy({
top: -n,
behavior: "smooth",
});
};
anki.pageDown = function () {
var n = window.scrollY + window.innerHeight * 0.9;
window.scrollBy({
top: n,
behavior: "smooth",
});
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment