A Multiple Choice Template for Anki Cards

AnkiMultipleChoiceTemplate.html

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

AnkiMultipleChoiceTemplateMinified.html

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