Anki multiple checkboxes example (frontside)

anki_mch_frontside.html

<div class="question-text">{{Question}}</div>

<div class="all-variants to-split">{{AllVariants}}</div>
<div id="splitted-question"></div>


<script language="javascript">
    var FB_DB_NAME = '...';

    // Renders possible answer variants.
    addCheckboxes(document.querySelector("#splitted-question"), "{{AllVariants}}");


    //=====================================//

    function addCheckboxes(parent, str) {
        var variants = getVariants(str);
        var el;

        for (var i = 0, len = variants.length; i < len; i++) {
            el = document.createElement('div');
            el.innerHTML = checkbox(variants[i], i);
            parent.appendChild(el);

            el.addEventListener('change', processChecking);
        }
    }


    function processChecking(event) {
        var elems = document.querySelectorAll('#splitted-question input[type="checkbox"]:checked');
        var idxs = [];

        for (var i = 0, len = elems.length; i < len; i++) {
            idxs.push(elems[i].value);
        }

        firebaseUpdate({
            'lastcheckboxes': idxs.join(',')
        });
    }


    function getVariants(str) {
        return str.split("{{Splitter}}");
    }


    function checkbox(str, idx) {
        return [
            '<div class="checkbox-item">',
            '<label><input id="checkbox-' + idx + '" type="checkbox" value="' + idx + '"> ' + str +
            '</label>',
            '</div>'
        ].join('');
    }


    function firebaseRead(path, success, error) {
        var request = new XMLHttpRequest();
        error = error || function () {};

        request.open('GET', 'https://' + FB_DB_NAME + '.firebaseio.com/' + path + '.json', true);

        request.onload = function () {
            if (request.status >= 200 && request.status < 400) {
                success(JSON.parse(request.responseText));
            } else {
                error(request.responseText);
            }
        };

        request.onerror = error;
        request.send();
    }

    function firebaseUpdate(data) {
        var request = new XMLHttpRequest();

        request.open('PUT', 'https://' + FB_DB_NAME + '.firebaseio.com/.json', true);
        request.setRequestHeader('Content-Type', 'application/json');
        request.send(JSON.stringify(data));
    }
</script>