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

{% block styles %}
<link href="{% static 'main_app/style.css' %}" rel="stylesheet">{% endblock %}

{% block title %}Survey #3{% endblock %}

{% block content %}
<div class="card bg-transparent">
    <div class="card-body">
        <h2 style="padding-left: 10px"><b>POST-GAME SURVEY</b></h2><br>

        <div class="form-group">
            <label class="col-form-label" for="id_birth">1. How did you decide how much to conserve in the first round?</label>
            <div class="controls early_conserve">
                <input name="early_conserve" maxlength="5000" minlength="1" required="" id="id_early_conserve" class="form-control"
                    type="text">
                <div class="form-control-errors">{{ form.early_conserve.errors }}</div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-form-label" for="id_birth">2. How did you decide whether or not to alter your
                contribution behavior in the middle of the game?</label>
            <div class="controls middle_conserve">
                <input name="middle_conserve" maxlength="5000" minlength="1" required="" id="id_middle_conserve" class="form-control"
                    type="text">
                <div class="form-control-errors">{{ form.middle_conserve.errors }}</div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-form-label" for="id_end_conserve">3. How did you decide how much to conserve in the last
                round?</label>
            <div class="controls end_conserve">
                <input name="end_conserve" maxlength="5000" minlength="1" required="" id="id_end_conserve" class="form-control"
                    type="text">
                <div class="form-control-errors">{{ form.end_conserve.errors }}</div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-form-label" for="id_individual_conservation_feedback_rank">4. On a scale of 1 (not
                influential at all) to 5 (very
                influential), how influential was the post round feedback on how many tokens other players had
                individually conserved?</label>
            <div class="controls individual_conservation_feedback_rank">
                <input name="individual_conservation_feedback_rank" maxlength="1" minlength="1" required="" id="id_individual_conservation_feedback_rank"
                    class="form-control" type="text">
                <div class="form-control-errors">{{ form.individual_conservation_feedback_rank.errors }}</div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-form-label" for="id_collective_conservation_feedback_rank">5. On a scale of 1 (not
                influential at all) to 5 (very
                influential), how influential was the post round feedback on how many tokens other players had
                collectively conserved?</label>
            <div class="controls collective_conservation_feedback_rank">
                <input name="collective_conservation_feedback_rank" maxlength="1" minlength="1" required="" id="id_collective_conservation_feedback_rank"
                    class="form-control" type="text">
                <div class="form-control-errors">{{ form.collective_conservation_feedback_rank.errors }}</div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-form-label" for="id_carbon_offset_feedback_rank">6. On a scale of 1 (not influential at
                all) to 5 (very
                influential), how influential was the post round feedback on how much carbon the group would help
                offset?</label>
            <div class="controls carbon_offset_feedback_rank">
                <input name="carbon_offset_feedback_rank" maxlength="1" minlength="1" required="" id="id_carbon_offset_feedback_rank"
                    class="form-control" type="text">
                <div class="form-control-errors">{{ form.carbon_offset_feedback_rank.errors }}</div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-form-label" for="id_percent_goal_feedback_rank">7. On a scale of 1 (not influential at
                all) to 5 (very
                influential), how influential was the post round feedback on what percent of the conservation goal had
                the group achieved?</label>
            <div class="controls percent_goal_feedback_rank">
                <input name="percent_goal_feedback_rank" maxlength="1" minlength="1" required="" id="id_percent_goal_feedback_rank"
                    class="form-control" type="text">
                <div class="form-control-errors">{{ form.percent_goal_feedback_rank.errors }}</div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-form-label" for="id_total_contribution_feedback_rank">8. On a scale of 1 (not
                influential at
                all) to 5 (very
                influential), how influential was the post round feedback on the total contribution
                the group had achieved?</label>
            <div class="controls total_contribution_feedback_rank">
                <input name="total_contribution_feedback_rank" maxlength="1" minlength="1" required="" id="id_total_contribution_feedback_rank"
                    class="form-control" type="text">
                <div class="form-control-errors">{{ form.total_contribution_feedback_rank.errors }}</div>
            </div>
        </div>

        <div class="form-group required">
            <label class="col-form-label" for="id_birth">9. What is your year of birth?</label>
            <div class="controls  field-birth">
                <input name="birth" maxlength="4" minlength="4" required="" id="id_birth" class="form-control" type="text">
                <div class="form-control-errors">{{ form.birth.errors }}</div>
            </div>
        </div>

        <div class="form-group required">
            <label class="col-form-label" for="id_gender_0">10. What is your gender?</label>
            <div class="controls  field-gender">
                <div class="custom-control custom-radio custom-control-inline">
                    <input onchange="document.getElementById('id_gender_2').setAttribute('value',this.value)" required=""
                        name="gender" value="Male" type="radio" id="id_gender_0" class="custom-control-input">
                    <label class="custom-control-label" for="id_gender_0">Male</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input required="" name="gender" value="Female" type="radio" id="id_gender_1" class="custom-control-input">
                    <label class="custom-control-label" for="id_gender_1">Female</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input required="" name="gender" value="Other" type="radio" id="id_gender_2" class="custom-control-input">
                    <label class="custom-control-label" for="id_gender_2">Other</label>
                    <input onclick="document.getElementById('id_gender_2').setAttribute('checked',true)" style="margin-bottom: 10px;margin-left: 10px; padding: 0"
                        onchange="document.getElementById('id_gender_2').setAttribute('value',this.value);" maxlength="10"
                        class="form-control" type="text">
                </div>
            </div>
            <div class="form-control-errors">{{ form.gender.errors }}</div>
        </div>

        <div class="form-group required">
            <label class="col-form-label" for="id_eth_0">11. What term best describes your racial identity?</label>
            <div class="controls  field-ethnic_group">
                <div class="custom-control custom-radio custom-control-inline">
                    <input required="" name="ethnic_group" value="African-American" type="radio" id="id_eth_0" class="custom-control-input">
                    <label class="custom-control-label" for="id_eth_0">African-American</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input required="" name="ethnic_group" value="Asian-American" type="radio" id="id_eth_1" class="custom-control-input">
                    <label class="custom-control-label" for="id_eth_1">Asian-American</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input required="" name="ethnic_group" value="Hispanic" type="radio" id="id_eth_2" class="custom-control-input">
                    <label class="custom-control-label" for="id_eth_2">Hispanic</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input required="" name="ethnic_group" value="Caucasian" type="radio" id="id_eth_3" class="custom-control-input">
                    <label class="custom-control-label" for="id_eth_3">Caucasian</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input required="" name="ethnic_group" value="Native American" type="radio" id="id_eth_4" class="custom-control-input">
                    <label class="custom-control-label" for="id_eth_4">Native American</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input required="" name="ethnic_group" value="Other" type="radio" id="id_eth_5" class="custom-control-input">
                    <label class="custom-control-label" for="id_eth_5">Other</label>
                    <input onclick="document.getElementById('id_eth_5').setAttribute('checked',true)" style="margin-bottom: 10px;margin-left: 10px; padding: 0"
                        onchange="document.getElementById('id_eth_5').setAttribute('value',this.value)" maxlength="20"
                        class="form-control" type="text">
                </div>
            </div>
            <div class="form-control-errors">{{ form.ethnic_group.errors }}</div>
        </div>

        <div class="form-group required">
            <label class="col-form-label" for="id_econ_0">12. What is your economic status?</label>
            <div class="controls  field-ethnic_group">
                <div class="custom-control custom-radio custom-control-inline">
                    <input required="" name="economic_status" value="Full time employed" type="radio" id="id_econ_0"
                        class="custom-control-input">
                    <label class="custom-control-label" for="id_econ_0">Full time employed</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input required="" name="economic_status" value="Full time student" type="radio" id="id_econ_1"
                        class="custom-control-input">
                    <label class="custom-control-label" for="id_econ_1">Full time student</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input required="" name="economic_status" value="Part time employed" type="radio" id="id_econ_2"
                        class="custom-control-input">
                    <label class="custom-control-label" for="id_econ_2">Part time employed</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input required="" name="economic_status" value="Part time student" type="radio" id="id_econ_3"
                        class="custom-control-input">
                    <label class="custom-control-label" for="id_econ_3">Part time student</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input required="" name="economic_status" value="Other" type="radio" id="id_econ_4" class="custom-control-input">
                    <label class="custom-control-label" for="id_econ_4">Other</label>
                    <input onclick="document.getElementById('id_econ_4').setAttribute('checked',true)" style="margin-bottom: 10px;margin-left: 10px; padding: 0"
                        onchange="document.getElementById('id_econ_4').setAttribute('value',this.value)" maxlength="20"
                        class="form-control" type="text">
                </div>
            </div>
            <div class="form-control-errors">{{ form.economic_status.errors }}</div>
        </div>

        <div class="form-group required">
            <label class="col-form-label" for="id_exp_0">13. How many multi-player game experiments like the one you
                just played have you participated in before this one?​</label>
            <div class="controls  field-previous_experiments">
                <div class="custom-control custom-radio custom-control-inline">
                    <input required="" name="previous_experiments" value="None" type="radio" id="id_exp_0" class="custom-control-input">
                    <label class="custom-control-label" for="id_exp_0">None</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input required="" name="previous_experiments" value="1-2 previous" type="radio" id="id_exp_1"
                        class="custom-control-input">
                    <label class="custom-control-label" for="id_exp_1">1-2 previous</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input required="" name="previous_experiments" value="3-5 previous" type="radio" id="id_exp_2"
                        class="custom-control-input">
                    <label class="custom-control-label" for="id_exp_2">3-5 previous</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input required="" name="previous_experiments" value="More than 5 previous" type="radio" id="id_exp_3"
                        class="custom-control-input">
                    <label class="custom-control-label" for="id_exp_3">More than 5 previous</label>
                </div>
            </div>
            <div class="form-control-errors">{{ form.previous_experiments.errors }}</div>
        </div>

        <div class="form-group required">
            <label class="col-form-label" for="id_reliability_0">14. Are your responses reliable enough for us to
                include them in our academic research that will have real implications on energy and housing community
                policy making? </label>
            <div class="controls  field-gender">
                <div class="custom-control custom-radio custom-control-inline">
                    <input required="" name="reliability" value="Yes" type="radio" id="id_reliability_0" class="custom-control-input">
                    <label class="custom-control-label" for="id_reliability_0">Yes</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input required="" name="reliability" value="Not really" type="radio" id="id_reliability_1" class="custom-control-input">
                    <label class="custom-control-label" for="id_reliability_1">Not really</label>
                </div>
            </div>
            <div class="form-control-errors">{{ form.reliability.errors }}</div>
        </div>

        <div class="form-group required">
            <label class="col-form-label" for="id_pol_0">15. Which political party do you most identify with?</label>
            <div class="controls  field-ethnic_group">
                <div class="custom-control custom-radio custom-control-inline">
                    <input required="" name="politic_party" value="Democrat" type="radio" id="id_pol_0" class="custom-control-input">
                    <label class="custom-control-label" for="id_pol_0">Democrat</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input required="" name="politic_party" value="Republican" type="radio" id="id_pol_1" class="custom-control-input">
                    <label class="custom-control-label" for="id_pol_1">Republican</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input required="" name="politic_party" value="Independent" type="radio" id="id_pol_2" class="custom-control-input">
                    <label class="custom-control-label" for="id_pol_2">Independent</label>
                </div>
                <div class="custom-control custom-radio custom-control-inline">
                    <input required="" name="politic_party" value="Other" type="radio" id="id_pol_3" class="custom-control-input">
                    <label class="custom-control-label" for="id_pol_3">Other: </label>
                    <input onclick="document.getElementById('id_pol_3').setAttribute('checked',true)" style="margin-bottom: 10px;margin-left: 10px; padding: 0"
                        onchange="document.getElementById('id_pol_3').setAttribute('value',this.value)" maxlength="20"
                        class="form-control" type="text">
                </div>
            </div>
            <div class="form-control-errors">{{ form.politic_party.errors }}</div>
        </div>

        <div class="form-group required">
            <label class="col-form-label" for="id_US">16. How many years have you lived in the U.S.? </label>
            <div class="controls  field-birth">
                <input name="years_in_us" min=0 max=120 required="" id="id_US" class="form-control" type="number">
                <div class="form-control-errors">{{ form.years_in_us.errors }}</div>
            </div>
        </div>

        <button class="otree-btn-next btn btn-outline-success btn-lg btn-block">Submit</button>
    </div>
</div>

{% endblock %}