Dear otree-Experts, 

how can I use Multiple-Checkboxes as Model-Item in oTree?

I tried
from django.forms import ModelForm, MultipleChoiceField, CheckboxSelectMultiple

but it wasn't found bei "otree devserver"...
Should I really usw separat booleans?

Thank you!

Mark

Take a look at https://www.otreehub.com/forum/765/.

Here is an updated version.

Instead of “T” for “true” and “F” for “false,” you can, of course, also use, e.g., “1” and “0.” You might also consider formatting the string in a way so that it can be directly parsed by the statistical software that you use for data analysis (say, enclose the sequence of zeros and ones in square brackets like “[1, 0, 0, 1, ...]”).


#################################
##  Snippets from __init__.py  ##
#################################


class Player(BasePlayer):

    true_false_responses = models.StringField()


class MyPage(Page):

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


###################
##  MyPage.html  ##
###################


{{ 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" class="form-check-input"> You can select me.</li>
    <li><input type="checkbox" class="form-check-input"> You can select me.</li>
    <li><input type="checkbox" class="form-check-input"> You can select me.</li>
    <li><input type="checkbox" class="form-check-input"> You can select me.</li>
    <li><input type="checkbox" class="form-check-input"> You can select me.</li>
    <li><input type="checkbox" class="form-check-input"> You can select me.</li>
    <li><input type="checkbox" class="form-check-input"> You can select me.</li>
    <li><input type="checkbox" class="form-check-input"> You can select me.</li>
    <li><input type="checkbox" class="form-check-input"> You can select me.</li>
    <li><input type="checkbox" class="form-check-input"> You can select me.</li>
    <li><input type="checkbox" class="form-check-input"> You can select me.</li>
  </ol>
</div>
    
<div class="mb-3 _formfield"><!-- Add style="display: none;" to make the input field invisible -->
  <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 allCheckboxes = document.querySelectorAll("input[type=checkbox]");
  var allFalse = "";
  for(let i = 0; i < allCheckboxes.length; i++) {
    allCheckboxes[i].onchange = function() {
      setTrueFalse(i);
    };
    allFalse = allFalse + "F, ";
  };
  allFalse = allFalse.substring(0, allFalse.length - 2);
  //trueFalseString = allFalse;  // Include only if all false should be allowed
  document.getElementById("id_true_false_responses").value = trueFalseString;
  function setTrueFalse(num) {
    if (trueFalseString == "") {
      trueFalseString = allFalse;
    }
    if (allCheckboxes[num].checked == true) {
      trueFalseString = trueFalseString.substring(0, 3 * num) + "T, " + trueFalseString.substring(3 * num + 3, trueFalseString.length);
    } else {
      trueFalseString = trueFalseString.substring(0, 3 * num) + "F, " + trueFalseString.substring(3 * num + 3, trueFalseString.length);
    };
    if (trueFalseString.substring(trueFalseString.length - 2, trueFalseString.length) == ", ") {
      trueFalseString = trueFalseString.substring(0, trueFalseString.length - 2);
    };
    if (trueFalseString == allFalse) {
      trueFalseString = "";  // Remove if all false should be allowed
    };
    document.getElementById("id_true_false_responses").value = trueFalseString;
  };
</script>

{{ endblock }}