Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save josephmisiti/b744912fa33582b1234751e887226270 to your computer and use it in GitHub Desktop.
Save josephmisiti/b744912fa33582b1234751e887226270 to your computer and use it in GitHub Desktop.
A Multiple Choice Template for Anki Cards
<script>
// MULTIPLE CHOICE TEMPLATE v1.2 {{{
// https://gist.github.com/hgiesel/2e8361afccca5713414a6a4ee66b7ece
const query = 'div#thecard'
const colors = ['orange', 'olive', 'maroon', 'aqua', 'fuchsia', 'navy', 'lime']
const fieldPadding = '4px'
const syntax = {
openDelim: '(^',
closeDelim: '^)',
fieldSeparator: '::',
}
const output = {
openDelim: '〔',
closeDelim: '〕',
fieldSeparator: '',
}
////
function escapeString(str) {
return str.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');
}
const exprRegex = RegExp(`(?:${escapeString(syntax.openDelim)})(.*?)(?:${escapeString(syntax.closeDelim)})`, 'gm')
const refRegex = /^\^\d$/
function shuffle(array) {
let currentIndex = array.length, temporaryValue, randomIndex
// While there remain elements to shuffle...
while (0 !== currentIndex) {
// Pick a remaining element...
randomIndex = Math.floor(Math.random() * currentIndex)
currentIndex -= 1
// And swap it with the current element.
temporaryValue = array[currentIndex]
array[currentIndex] = array[randomIndex]
array[randomIndex] = temporaryValue
}
return array;
}
let results = []
const theBody = document.querySelector(query).innerHTML
let m = exprRegex.exec(theBody)
while (m) {
results.push(m[1])
m = exprRegex.exec(theBody)
}
if (results.length > 0) {
let stylizedResults = []
if (window.Persistence && Persistence.isAvailable() && Persistence.getItem("stylizedMultipleChoice")) {
stylizedResults = Persistence.getItem("stylizedMultipleChoice")
}
else {
let shuffledResults = []
for (r of results) {
shuffledResults.push(shuffle(r.split(syntax.fieldSeparator)))
}
for (r of shuffledResults) {
if (r.length === 1 && refRegex.test(r[0])) {
stylizedResults.push(stylizedResults[r[0].match(/\d+/)[0]])
}
else {
let actualvalues = []
for ([i, v] of r.entries()) {
let theIndex = i % colors.length
actualvalues.push(`<span style="color: ${colors[theIndex]}; padding: 0px ${fieldPadding};">${v}</span>`)
}
stylizedResults.push(actualvalues.join(output.fieldSeparator))
}
}
}
for ([i, v] of results.entries()) {
document.querySelector(query).innerHTML = document.querySelector(query).innerHTML
.replace(`${syntax.openDelim}${v}${syntax.closeDelim}`, `${output.openDelim}${stylizedResults[i]}${output.closeDelim}`)
}
////
// FRONT SIDE ONLY
if (window.Persistence && Persistence.isAvailable()) {
Persistence.setItem("stylizedMultipleChoice", stylizedResults)
}
// BACK SIDE ONLY
if (window.Persistence && Persistence.isAvailable()) {
Persistence.removeItem("stylizedMultipleChoice")
}
}
// https://gist.github.com/hgiesel/2e8361afccca5713414a6a4ee66b7ece
// MULTIPLE CHOICE TEMPLATE v1.2 }}}
</script>
<script>
// MULTIPLE CHOICE TEMPLATE v1.2 {{{
// https://gist.github.com/hgiesel/2e8361afccca5713414a6a4ee66b7ece
const query = 'div#thecard'
const colors = ['orange', 'olive', 'maroon', 'aqua', 'fuchsia', 'navy', 'lime']
const fieldPadding = '4px'
const syntax = {
openDelim: '(^',
closeDelim: '^)',
fieldSeparator: '::',
}
const output = {
openDelim: '〔',
closeDelim: '〕',
fieldSeparator: '',
}
////
function escapeString(e){return e.replace(/[-\/\\^$*+?.()|[\]{}]/g,"\\$&")}const exprRegex=RegExp(`(?:${escapeString(syntax.openDelim)})(.*?)(?:${escapeString(syntax.closeDelim)})`,"gm"),refRegex=/^\^\d$/;function shuffle(e){let t,r,s=e.length;for(;0!==s;)r=Math.floor(Math.random()*s),t=e[s-=1],e[s]=e[r],e[r]=t;return e}let results=[];const theBody=document.querySelector(query).innerHTML;let m=exprRegex.exec(theBody);for(;m;)results.push(m[1]),m=exprRegex.exec(theBody);if(results.length>0){let e=[];if(window.Persistence&&Persistence.isAvailable()&&Persistence.getItem("stylizedMultipleChoice"))e=Persistence.getItem("stylizedMultipleChoice");else{let t=[];for(r of results)t.push(shuffle(r.split(syntax.fieldSeparator)));for(r of t)if(1===r.length&&refRegex.test(r[0]))e.push(e[r[0].match(/\d+/)[0]]);else{let t=[];for([i,v]of r.entries()){let e=i%colors.length;t.push(`<span style="color: ${colors[e]}; padding: 0px ${fieldPadding};">${v}</span>`)}e.push(t.join(output.fieldSeparator))}}for([i,v]of results.entries())document.querySelector(query).innerHTML=document.querySelector(query).innerHTML.replace(`${syntax.openDelim}${v}${syntax.closeDelim}`,`${output.openDelim}${e[i]}${output.closeDelim}`)
////
// FRONT SIDE ONLY
if (window.Persistence && Persistence.isAvailable()) {
Persistence.setItem("stylizedMultipleChoice", e)
}
// BACK SIDE ONLY
if (window.Persistence && Persistence.isAvailable()) {
Persistence.removeItem("stylizedMultipleChoice")
}
}
// https://gist.github.com/hgiesel/2e8361afccca5713414a6a4ee66b7ece
// MULTIPLE CHOICE TEMPLATE v1.2 }}}
</script>
@hibiarata
Copy link

I need sample..
Please teach me how to use it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment