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?

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'
    PLAYERS_PER_GROUP = None
    NUM_ROUNDS = 1


class Subsession(BaseSubsession):
    pass


class Group(BaseGroup):
    pass


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'])


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


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

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


page_sequence = [MyPage, MyPage2]

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.

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.

Ignoring most of the code, you will find some inspiration on the bargain.html page from here 
https://s3.amazonaws.com/otreehub/browsable_source/d7188187-cdba-4c61-ae3a-d7cc3d6fcde9/live_bargaining/index.html

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

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>
    </div>
    <div>
        {% formfield player.studying_currently %}
        <div id="field_of_study" style="display: none;">
            {% formfield player.study_field %}
        </div>
        <div id="occupation" style="display: none;">
            {% formfield player.current_occupation %}
        </div>
    </div>
</div>

{% next_button %}

{% endblock %}


{% block scripts %}

<script>

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";
    };
};

</script>

{% endblock %}

Here are the accompanying excerpts from the __init__.py:

class Q20_Education(Page):

    form_model = 'player'
    form_fields = [
        'studying_currently',
        'study_field',
        'current_occupation',
    ]


class Player(BasePlayer):

    studying_currently = models.StringField(
        label="Studieren Sie derzeit oder haben Sie ein Studium abgeschlossen?",
        widget=widgets.RadioSelect,
        choices=[
            ['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?",
        choices=[
            ['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?",
        choices=[
            ['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."],
        ]
    )

Thanks so much, @BonnEconLab and @Trontatuma!

This definitely solves my question.

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