Definitions for anki cards

anki_def.js

<div class="row">
	{{Front}}
	<span id="playa" class="hooks hooks-l">{{Playability}}</span>
	<span id="number" class="hooks hooks-r hooks-u">{{Number}}</span>
</div>

<script>
function $$(id) { return document.getElementById(id); }

$$('playa').innerText |= 0;

front = '{{Front}}';
q = $$("number");
num = q.innerText | 0;
q.innerText = front.length > 3 ? num > 1 ? num : '' : '?';
</script>

----
.card {
 font-family: arial;
 font-size: 32px;
 text-align: center;
 color: #002255;
 background-color: #fffffa;
}

.row {
position: relative;
display: inline-block;
//background-color: #eeeeee;
}

.def {
font-size: 18px;
//background-color: red;
margin-bottom: 5px;
color: #666666;
display: none;
}

.hooks {
font-size: 22px;
color: #33dd77;
position:absolute;
top: 9px;
}

.hooks-l {right: 102%;}
.hooks-r {left: 102%;}
.hooks-u {top: 1px;}

#playa {color: #dddddd;}
#number {color: #aa77ee;}

.dela {color: #dd2200;}
.delb {color: #5533ee;}

br {height: 0px;}

#defs {display: none;}

----

{{FrontSide}}

<hr id=answer>
<div id=grams>{{Back}}</div>
<div id=defs>{{Definition}}</div>

<script>
defs = $$("defs").innerHTML.split('<br>');

function fetch(el) {
	el.parentNode.getElementsByClassName('def')[0].style.display = 'block';
}

e = $$("grams");

l = e.innerHTML.match(/[{}A-Z0-9]+/g);
m = [];

for(i = 0; i< l.length; i++) {
	p = l[i].match(/([A-Z]*)([0-9]*){([A-Z]+)}([0-9]*)([A-Z]*)/);

	kl = new Array(L = p[3].length);

	if(p[2].match(2)){kl[0]=kl[1]='delb';}
	if(p[2].match(1)){kl[0]='dela';}

	if(p[4].match(2)){kl[L-1]=kl[L-2]='delb';}
	if(p[4].match(1)){kl[L-1]='dela';}

	row = '<div><div class=row onclick=fetch(this)>';
	for(j = 0; j < L; j++){
		row += '<span class=' + kl[j] + '>' + p[3][j] + '</span>';
	}
	row +=
		'<span class="hooks hooks-l">' + p[1] + '</span>' +
		'<span class="hooks hooks-r">' + p[5] + '</span>' +
		'</div> <div class=def>' + defs[i] + '</div> </div>';
	m.push(row);
}
e.innerHTML = m.join('');

</script>