oTree Forum >

Selecting Multiple Options

#1 by Thair_Ahmad

I have questions where players can select multiple answers. I figured through oTree snippets that one way to do this is to display each option as a Boolean with Blank = True. But I have 11 options multiple times. If I don't want to create 11 fields, is it possible to create this in one player field?

#2 by BonnEconLab

Yes, that’s possible. You should keep in mind, though, that it might be easier later (e.g., in the statistical analysis) to have separate true/false fields.

I would suggest the following: You set up the associated player field as a string field. That is, in the __init__.py file, include something like the following:

class Player(BasePlayer):

    true_false_responses = models.StringField()


# PAGES


class MyPage(Page):

    form_model = 'player'
    form_fields = ['true_false_responses']


In the HTML template, you use checkboxes and JavaScript to fill that StringField with “T” for any checked checkbox and with “F” for any unchecked checkbox. 

Here is a minimal working example of the MyPage.html file, including JavaScript code, that implements this:

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

This code assumes that at least one option must be selected. A ZIP archive of the source code is attached.

If all checkboxes are allowed to remain unchecked, change the two respective lines of the JavaScript code. This, however, would allow participants to simply click the “Next” button without even looking at the question. It might, thus, be better to include a separate “None of the above” option.

#3 by Thair_Ahmad

This is very helpful. Thank you so much.

Write a reply

Set forum username