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



{% block title %}
Twitter News Study
{% endblock %}

{% block content %}
<h1 style="font-size:40px;">Online Research Survey</h1>


<p><b>Thank you for deciding to help us with our research!</b> In the first section, you will be asked some basic questions about yourself, your political interest and political knowledge.</p>

<br>
<h2>Demographics</h2>
<table cellpadding ="5">
<tbody>
<tr> <td>{{ form.yearBirth.label }}</td><td> {{ form.yearBirth }}</td> </tr>
<tr> <td>{{ form.gender.label }}</td><td>{{ form.gender }}</td> </tr>
<tr> <td>{{ form.education.label }}</td><td>{{ form.education }}</td> </tr>
<tr> <td>{{ form.ethnicity.label }}</td><td>{{ form.ethnicity }}</td> </tr>
</tbody>
</table>


<br> <br> <h2>Political interest</h2>

    <table cellpadding ="5">
<tbody>
<tr> <td>{{ form.followsPolitics.label }}</td><td> {{ form.followsPolitics }}</td> </tr>
<tr> <td>{{ form.voteLikely.label }}</td><td>{{ form.voteLikely }}</td> </tr>
</tbody>
</table>



<!--{{form.errors}}-->


<br> <br> <h2>Political beliefs vs ideology of news consumed on Twitter </h2>


<!--We would like to ask you some questions about <b>political beliefs</b>  and the political beliefs that you believe that your average Twitter friends has.
    We hear a lot of talk these days about liberals and conservatives. Here is a scale on which the political views that people might
    hold are arranged from extremely liberal to extremely conservative. Where would you place yourself, the people you follow on Twitter
    and the people who follow you  on this scale?</p>-->

<!--<table class="table">-->
    <p>People do not necessarily consume information that matches their political beliefs. For instance, some people follow
    accounts with a liberal bias on Twitter even though they might feel more identified with a conservative ideology (or vice versa).
    Several reasons can explain this. For example, people could genuinely care about hearing other perspectives. People could
    care about not revealing their true ideology to others, especially in platforms like Twitter where information
    about followed or liked accounts is visible to others.</p>

    <p>First, let me ask you about your <b>political beliefs.</b> Here is a scale arranged from extremely liberal to extremely
        conservative. Where would you place your own political beliefs on this scale? What would be your <em> best guess</em>
        about the political beliefs of the average person that follows you on Twitter? And what about the average person that you follow?</p>


<table class="table" style="width: 100%">
	<col style="width:120%">
	<col style="width:12%">
	<col style="width:12%">
    <col style="width:12%">
    <col style="width:12%">
    <col style="width:12%">
    <col style="width:12%">
    <col style="width:12%">
	<thead>
    <tr>
        <th> </th>
        <td style="text-align:center"> Extremely liberal </td>
        <td style="text-align:center"> Liberal </td>
        <td style="text-align:center"> Slightly liberal </td>
        <td style="text-align:center"> Moderate </td>
        <td style="text-align:center"> Slightly conservative </td>
        <td style="text-align:center"> Conservative </td>
        <td style="text-align:center"> Extremely conservative </td>
    </tr>
	</thead>
	<tbody>


    <tr>
        <th>{{ form.ideology.label }}</th>
        {% for choice in form.ideology %}
            <td style="text-align:center">&nbsp &nbsp &nbsp {{ choice }}</td>
        {% endfor %}
    </tr>


    <tr>
        <th>{{ form.ideologyTwitterFollowers.label }}</th>
        {% for choice in form.ideologyTwitterFollowers %}
            <td style="text-align:center">&nbsp &nbsp &nbsp {{ choice }}</td>
        {% endfor %}
    </tr>

    <tr>
        <th>{{ form.ideologyTwitterFollow.label }}</th>
        {% for choice in form.ideologyTwitterFollow %}
            <td style="text-align:center">&nbsp &nbsp &nbsp {{ choice }}</td>
        {% endfor %}
    </tr>
	</tbody>
</table>



<p>Instead of your political beliefs, let me now ask you about <b>the ideology of the news consumed on Twitter</b>.
    What is your <em>best guess</em> about the average ideology of the newspapers that you follow on Twitter? What about
    the same measure but for the average person that follows you? And what about the average person that you follow?

<!--<table class="table">-->




<table class="table" style="width: 100%">
	<col style="width:120%">
	<col style="width:12%">
	<col style="width:12%">
    <col style="width:12%">
    <col style="width:12%">
    <col style="width:12%">
    <col style="width:12%">
    <col style="width:12%">
	<thead>
    <tr>
        <th> </th>
        <td style="text-align:center"> Extremely liberal </td>
        <td style="text-align:center"> Liberal </td>
        <td style="text-align:center"> Slightly liberal </td>
        <td style="text-align:center"> Moderate </td>
        <td style="text-align:center"> Slightly conservative </td>
        <td style="text-align:center"> Conservative </td>
        <td style="text-align:center"> Extremely conservative </td>
    </tr>
	</thead>
	<tbody>


    <tr>
        <th>{{ form.ideologyNews.label }}</th>
        {% for choice in form.ideologyNews %}

            <td style="text-align:center">&nbsp &nbsp &nbsp {{ choice }}</td>
        {% endfor %}
    </tr>


    <tr>
        <th>{{ form.ideologyTwitterFollowersNews.label }}</th>
        {% for choice in form.ideologyTwitterFollowersNews %}
            <td style="text-align:center">&nbsp &nbsp &nbsp {{ choice }}</td>
        {% endfor %}
    </tr>

    <tr>
        <th>{{ form.ideologyTwitterFollowNews.label }}</th>
        {% for choice in form.ideologyTwitterFollowNews %}
            <td style="text-align:center">&nbsp &nbsp &nbsp {{ choice }}</td>
        {% endfor %}
    </tr>
	</tbody>
</table>

<!--To complete this section we will briefly ask you a few questions about your relationship with others.!-->
  <!--  <h2>Section II. Political Interest, Polarization and Knowledge</h2>-->
<!--<p>Next, we would like to ask you some additional questions about your political views.</p>-->

 <br> <br> <h2>Feeling towards parties and recent presidents</h2>
<p>We would like to get your feelings toward the two major political parties in the U.S. and towards recent U.S. presidents.
    After you read the name of a political party or person, please rate it on a scale from 0 to 10, where 0 means you
    strongly dislike that party or person and 10 means that you strongly like that party or person.
    Ratings between 5 and 10 mean that you like the party or person. Ratings between 0 and 5  mean that you dislike the party or person.
    You would rate the party or person at the 5 degree mark if you don't feel particularly warm or cold toward the party or person.</p>

    <table class="table" style="width: 100%">
    <col style="width:23%">
    <col style="width:7%">
    <col style="width:7%">
    <col style="width:7%">
    <col style="width:7%">
    <col style="width:7%">
    <col style="width:7%">
    <col style="width:7%">
    <col style="width:7%">
    <col style="width:7%">
    <col style="width:7%">
    <col style="width:7%">

    <tr>
        <td style="text-align:center"></td>
        <td style="text-align:center">0</td>
        <td style="text-align:center">1</td>
        <td style="text-align:center">2</td>
        <td style="text-align:center">3</td>
        <td style="text-align:center">4</td>
        <td style="text-align:center">5</td>
        <td style="text-align:center">6</td>
        <td style="text-align:center">7</td>
        <td style="text-align:center">8</td>
        <td style="text-align:center">9</td>
        <td style="text-align:center">10</td>
    </tr>
    <tr>
        <th>{{ form.thermometerDemocratic.label }}</th>
        {% for choice in form.thermometerDemocratic %}
            <td style="text-align:center">&nbsp &nbsp &nbsp {{ choice }}</td>
        {% endfor %}
    </tr>

    <tr>
        <th>{{ form.thermometerRepublican.label }}</th>
        {% for choice in form.thermometerRepublican %}
            <td style="text-align:center">&nbsp &nbsp &nbsp {{ choice }}</td>
        {% endfor %}
    </tr>

    <tr>
        <th>{{ form.thermometerBiden.label }}</th>
        {% for choice in form.thermometerBiden %}
            <td style="text-align:center">&nbsp &nbsp &nbsp {{ choice }}</td>
        {% endfor %}
    </tr>

    <tr>
        <th>{{ form.thermometerTrump.label }}</th>
        {% for choice in form.thermometerTrump %}
            <td style="text-align:center">&nbsp &nbsp &nbsp {{ choice }}</td>
        {% endfor %}
    </tr>

</table>


<br>
<br>
    <h2>Political knowledge</h2>

<p>Of the following news events, which ones do you think are true, and which ones do you think are false?</p>


<table class="table" style="width: 100%">
       <tr>
        <td style="width:120%"></td>
        <td style="text-align:center">True</td>
        <td style="text-align:center">False</td>
        <td style="text-align:center">Don't know</td>

    </tr>
    <tr>
        <th>{{ form.trueBidenCovid.label }}</th>
        {% for choice in form.trueBidenCovid %}
            <td style="text-align:center">&nbsp &nbsp &nbsp {{ choice }}</td>
        {% endfor %}
    </tr>


    <tr>
        <th>{{ form.trueBeatty.label }}</th>
        {% for choice in form.trueBeatty %}
            <td style="text-align:center">&nbsp &nbsp &nbsp {{ choice }}</td>
        {% endfor %}
    </tr>

    <tr>
        <th>{{ form.trueMerkel.label }}</th>
        {% for choice in form.trueMerkel %}
            <td style="text-align:center">&nbsp &nbsp &nbsp {{ choice }}</td>
        {% endfor %}
    </tr>

    <tr>
        <th>{{ form.trueShooting.label }}</th>
        {% for choice in form.trueShooting %}
            <td style="text-align:center">&nbsp &nbsp &nbsp {{ choice }}</td>
        {% endfor %}
    </tr>
</table>


    {% next_button %}

<br><br>
<footer class="text-muted">
     <div class="container">
        <p>This study is conducted by researchers at MIT. For help please contact <a href="mailto:NewsConsumptionProject@mit.edu" style="color: blue">NewsConsumptionProject@mit.edu</a></p>
    </div>
</footer>


{% endblock %}


{% block scripts %}
<style>
table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: center;
  padding: 8px;

}
tr:nth-child(even){background-color: #f2f2f2}
</style>

{% endblock %}