Hey oTree community!

I am a PhD student trying to create a simple, interactive prisoner's dilemma. In order to sort my participants into the correct experimental groups, I need to collect their ethnicity information. I tried to follow the online documentation and tutorials, but for some reasons, my Form Fields never show up as Form Field in my HTML code but as simple, uncoded text. Does anyone know what I did wrong or how to fix this? Please see screenshots for more detail.

In my models.py page, I specified: 
class Player(BasePlayer):
    age = models.IntegerField(label="Please enter your age")

    ethnicity = models.IntegerField(label="Please select your ethnicity"
                                    choices=[
                                        [1, 'Black'],
                                        [2, 'White'],
                                        [3, 'Other'],
                                    ]
                                    widgets=widgets.RadioSelect )
 
 On my pages.py I have:
 class ScreeningDemographics(Page):
        form_model = 'player'
        form_fields = ['age', 'ethnicity', 'sex']


But for my HTML page, where I start with (as shown here, https://otree.readthedocs.io/en/self/tutorial/part1_texteditor.html):

{% extends "global/Page.html" %}
{% load otree %}

{% formfields %}

<script>
    Please enter the following information.

    {% formfields %}
</script>

But for some reason, when I am opening the website, all of the code that uses {% simply appears as text. 

Any help is greatly appreciated!

I think it should work if you use {% block title %} and {% block content %} like in the tutorial.

Also you need commas behind the different features of the sex and ethnicity variables in models. Pycharm is raising an error.

Hey Victor. Thank you so much for replying, I really appreciate it. I tried that too, it does not change anything. I am attachign a screenshot which shows that it will also show block title and block content on the website

I also tried to do this simpler by only including age, exactly like it is on the tutorial, and still I get the same problem.

Ok :-(. Can you show us the html again?

In any regard, I personally always use these blocks when using "{% formfields %}"



{% extends "global/Page.html" %}
{% load otree %}

{% block title %}
    Enter title
{% endblock %}

{% block content %}

    Please enter the following information.

    {% formfields %}

    {% next_button %}

{% endblock %}
{% block scripts %}
    <script>
    </script>
{% endblock %}

Of course, again, thank you so much for trying to help, Viktor!

I am attaching the HTML code. I basically copy & pasted what you just posted and to show how much oTree hates me, I only edited the formfields in HTML code.

This seems to be such a strange error and I absolutely have no idea why it happens. In situations like these, would you recommend switching to otree Studio? I found it a lot less "clean" and structured than PyCharm. 

Please see the screenshots.

I prefer Pycharm for the control, but it depends how much time you want to put in it.

We are almost there, I think. So, the blocks have a purpose. Everything that is the body should be between the content block. Scripts should be in the scripts block etc. Thus, the stuff you have below at the bottom should be sorted into the blocks.

Good morning Victor,

I tried to follow your advice and still, I do have the same problems. I noticed something else, though, so I believe I might have missed another step. When I open one of the demo experiments, I can see that it accepts the "extends" and "load" and "block" as code and highlights them as yellow. However, for my experiment that is not the case (see Screenshot 1). Do you know why this could happen?


However, when I try to open the Demo of the repeated prisoners dilemma in any browser, I am getting the same problem, that all the text of {% extends "global/Page.html" %} {% load otree %} is showing up on top of the HTML/CSS code.

I assume this is not normal, is it? Have I missed an important step somewhere?

Odd. Im not completely sure. If you cant find the issue im happy to quickly check your otree file. Perhaps i see it when i test it locally. You can send the package at victor.vanpelt@whu.edu

Is there any particular reason why you use this ancient syntax?

I always use

    {{ block title }}
        Page title
    {{ endblock }}
    {{ block content }}
    
        {{ formfields }}
        {{ next_button }}
    
    {{ endblock }}

for a basic page. Note how I use {{ }} instead of {% %}.

And all this extends/load stuff is also not necessary at all anymore. Perhaps the tutorial should be updated.