oTree Forum >

ask a question depending on the answer to a previous question (on the same page)

#1 by candresmolina

I would like to incorporate a question in Otree that might or might not be asked depending on the answer to a previous question. Here is a very simple example:

Question 1: What is your main occupation:
A. Work.
B. Student.
C. Unemployed

Question 2 (ONLY ASKED IF the answer to "Question 1" is "A. Work"): Which industry do you work on?
A. Transportation
B. Mining
C. Other

Question 3...

How can I do this if I want to ask both questions 1 and 2 on the same page?

#2 by candresmolina

My question is whether it is possible to have questions 1 and 2 on the same page. Below is how I can do it on different pages (but this is NOT what I need):

from otree.api import *

doc = """
'other' option

class C(BaseConstants):
    NAME_IN_URL = 'option_other'
    NUM_ROUNDS = 1

class Subsession(BaseSubsession):

class Group(BaseGroup):

class Player(BasePlayer):
    occupation = models.StringField(label='main occupation?',choices=['Work', 'Student', 'Unemployment'])
    industry = models.StringField(label='what industry do you work on?', choices=['transportation','mining','others'])

class MyPage(Page):
    form_model = 'player'
    form_fields = ['occupation']

class MyPage2(Page):
    def is_displayed(player: Player):
        return player.occupation == 'Work'

    form_model = 'player'
    form_fields = ['industry']

page_sequence = [MyPage, MyPage2]

#3 by Trontatuma

There may be easier ways directly in Otree (?), but one way would be to do it in HTML. You put two input fields and two buttons for the questions on your html page (the field for the second question should have style="display: none" to be hidden initially) and then write a function in Javscript which gets executed onclick of the first button and includes an if condition that sets the display style of the second field and button to block if the answer was the one you wanted.

#4 by candresmolina

Thanks, Trontatuma. I am not sure how to make this in js but I will give it a try. Thank you so much! If you have any examples or references let me know.

#5 by Trontatuma

Ignoring most of the code, you will find some inspiration on the bargain.html page from here 

They also have the button and then in JS change the display style.

#6 by BonnEconLab

Here is a template for a couple of questions regarding education and occupation that I asked participants of an online study. The template uses JavaScript to hide particular options (in drop-down menus) of subsequent questions depending on the response to the first question.

For instance, if the participant indicated that they are currently a university student, the question asking for their occupation would not be displayed:

{% block content %}

{# Studying/Occupation #}
<div class="questionnaire_header">
    <div class="questionnaire_subheader">
        <b>Studium und Beruf</b>
        {% formfield player.studying_currently %}
        <div id="field_of_study" style="display: none;">
            {% formfield player.study_field %}
        <div id="occupation" style="display: none;">
            {% formfield player.current_occupation %}

{% next_button %}

{% endblock %}

{% block scripts %}


document.getElementById('id_studying_currently-0').onchange = function() { showOccupation(); };
document.getElementById('id_studying_currently-1').onchange = function() { showOccupation(); };
document.getElementById('id_studying_currently-2').onchange = function() { showOccupation(); };
document.getElementById('id_studying_currently-3').onchange = function() { showOccupation(); };
function showOccupation() {
    if (document.getElementById('id_studying_currently-0').checked || document.getElementById('id_studying_currently-1').checked) {
        document.body.querySelector("option[value='Student']").style.display = "block";
        if (document.getElementById('id_studying_currently-1').checked) {
          document.body.querySelector("label[for='id_study_field']").innerHTML = "In welchem Fachgebiet promovieren Sie?";
        } else {
          document.body.querySelector("label[for='id_study_field']").innerHTML = "Welchen Studiengang studieren Sie?";
        document.getElementById('field_of_study').style.display = "block";
        document.getElementById('id_study_field').value = "";
        document.getElementById('occupation').style.display = "none";
        document.getElementById('id_current_occupation').value = "Student";
    } else if (document.getElementById('id_studying_currently-2').checked) {
        document.body.querySelector("option[value='Student']").style.display = "block";
        document.body.querySelector("label[for='id_study_field']").innerHTML = "Welchen Studiengang haben Sie studiert?";
        document.getElementById('field_of_study').style.display = "block";
        document.getElementById('id_study_field').value = "";
        document.getElementById('occupation').style.display = "block";
        document.getElementById('id_current_occupation').value = "";
    } else if (document.getElementById('id_studying_currently-3').checked) {
        document.getElementById('field_of_study').style.display = "none";
        document.getElementById('id_study_field').value = "Other";
        document.getElementById('occupation').style.display = "block";
        document.getElementById('id_current_occupation').value = "";
        document.body.querySelector("option[value='Student']").style.display = "none";


{% endblock %}

Here are the accompanying excerpts from the __init__.py:

class Q20_Education(Page):

    form_model = 'player'
    form_fields = [

class Player(BasePlayer):

    studying_currently = models.StringField(
        label="Studieren Sie derzeit oder haben Sie ein Studium abgeschlossen?",
            ['1 - currently student', "Ich studiere derzeit."],
            ['2 - currently doctoral student', "Ich promoviere."],
            ['3 - has graduated from university', "Ich habe ein Studium abgeschlossen."],
            ['0 - no university education', "Nein."],
    study_field = models.StringField(
        label="Welchen Studiengang studieren Sie bzw. haben Sie studiert?",
            ['Humanities', "Geisteswissenschaften (z. B. Sprachen, Medienwissenschaften, Philosophie, Kunstgeschichte)"],
            ['Art and music', "Kunst und Musik"],
            ['Mathematics', "Mathematik, Informatik, Technik oder Ingenieurwissenschaften"],
            ['Natural sciences', "Naturwissenschaften (z. B. Biologie, Chemie, Physik, Agrarwissenschaften)"],
            ['Medicine', "Medizin"],
            ['Psychology', "Psychologie"],
            ['Law', "Rechtswissenschaft"],
            ['Social sciences', "Sozial- oder Kulturwissenschaften (inkl. z. B. Politikwissenschaft, Anthropologie, Geschichte)"],
            ['Economic sciences', "Wirtschaftswissenschaften (BWL, VWL, Wirtschaftsingenieurwesen, Wirtschaftsmathematik)"],
            ['Other', "Anderer Studiengang"]
    current_occupation = models.StringField(
        label="Welcher Beschäftigung gehen Sie derzeit nach?",
            ['Occupied', "Ich bin erwerbstätig."],
            ['Jobless', "Ich bin arbeitslos."],
            ['Retired', "Ich bin im Ruhestand."],
            ['Parental leave', "Ich befinde mich in Elternzeit."],
            ['Student', "Ich studiere."],
            ['Apprentice', "Ich absolviere eine Ausbildung."],
            ['Sabbatical', "Ich mache ein Sabbatical."],
            ['Other', "Sonstiges."],

#7 by candresmolina

Thanks so much, @BonnEconLab and @Trontatuma!

This definitely solves my question.

#8 by Trontatuma

By the way, models.OptionalField(IF-CONDITION) would be a nice feature. Otherwise how do Otree Studio users deals with such situations?

Write a reply

Set forum username