{{ block title }}

Select multiple options

{{ endblock }}


{{ block content }}

<div class="mb-3 _formfield">
    <p>You have to select at least one option (and you can select multiple options).</p>
    <ol>
        <li><input type="checkbox" /> You can select me.</li>
        <li><input type="checkbox" /> You can select me.</li>
        <li><input type="checkbox" /> You can select me.</li>
        <li><input type="checkbox" /> You can select me.</li>
        <li><input type="checkbox" /> You can select me.</li>
        <li><input type="checkbox" /> You can select me.</li>
        <li><input type="checkbox" /> You can select me.</li>
        <li><input type="checkbox" /> You can select me.</li>
        <li><input type="checkbox" /> You can select me.</li>
        <li><input type="checkbox" /> You can select me.</li>
        <li><input type="checkbox" /> You can select me.</li>
    </ol>
</div>
    
<div class="mb-3 _formfield">
    <div class="controls">
        <input type="text" class="form-control" id="id_true_false_responses" name="true_false_responses" value="" required readonly style="font-family: monospace;" />
    </div>
</div>

{{ next_button }}

{{ endblock }}


{{ block scripts }}

<script>
    var trueFalseString = "";
    var allInputs = document.getElementsByTagName("input");
    var allFalse = "";
    for(let i = 0; i < allInputs.length; i++) {
        if(allInputs[i].type == "checkbox") {
            allInputs[i].onchange = function() {
                setTrueFalse(i);
            };
            allFalse = allFalse + "F";
            //trueFalseString = allFalse;  // Include if all false should be allowed
        }
    };
    document.getElementById("id_true_false_responses").value = trueFalseString;
    function setTrueFalse(num) {
        if (trueFalseString == "") {
            trueFalseString = allFalse;
        }
        if (allInputs[num].checked == true) {
            trueFalseString = trueFalseString.substring(0, num) + "T" + trueFalseString.substring(num + 1, trueFalseString.length);
        } else {
            trueFalseString = trueFalseString.substring(0, num) + "F" + trueFalseString.substring(num + 1, trueFalseString.length);
        }
        if (trueFalseString == allFalse) {
            trueFalseString = "";  // Remove if all false should be allowed
        }
        document.getElementById("id_true_false_responses").value = trueFalseString;
    };
</script>

{{ endblock }}