Front_Template.html

<h4>{{Title}}</h4>

<div id='text'>{{Text}}</div>

<script>
clozeSequenceEnvironment = {

    /*
     * Configuration
     */
    delimiter: {
        START: "li",
        END: "li",
        type: "tag" // Use "tag" if the cloze is inside an HTML element, 	else "token"
    },


    text: document.querySelector('#text'),


    // Escape RegEx special tokens
    escapeRegEx(str) {
        return str.replace(/([\\^$.|?*+()\[\]{}])/g, "\\$1")
    }
}

csEnv = clozeSequenceEnvironment;

if (csEnv.delimiter.type == "tag") {

    document.querySelectorAll(csEnv.delimiter.START).forEach(
        cloze => {
            cloze.classList.add("cloze", "hidden-cloze");
        }
    )

} else {
    csEnv.delimiter.START = escapeRegEx(csEnv.delimiter.START);
    csEnv.delimiter.END = escapeRegEx(csEnv.delimiter.END);

    // Remove the delimiters and put the content inside a span.
    let re = new RegExp(`${csEnv.delimiter.START}(.+?)${csEnv.delimiter.END}`, "g");
    text.innerHTML = text.innerHTML.replace(re, '<span class="cloze hidden-cloze">$1</span>');
}
</script>