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

{% block title %}
    Questionnaire
{% endblock %}

{% block content %}

<p>Please answer the following question on your strategy by clicking on the respective statement.</p>
<p>Which of the following options best describes  your behavior and reasoning?</p>
<button type="button" id="strategy1" class="btn btn-light">I decided my strategy on how to divide the money before I was able to communicate.</button>
<div id="ela1" style="opacity:0.0">
    <input type="text" name="elaborate1" id="elaborate1"/>
</div>
<button type="button" id="strategy2" class="btn btn-light">I decided my strategy before communicating, but it changed once I was able to talk to others.</button>
<div id="ela2" style="opacity:0.0">
    <input type="text" name="elaborate2" id="elaborate2"/>
</div>
<button type="button" id="strategy3" class="btn btn-light">I formed my strategy after I was able to communicate with others.</button>
<div id="ela3" style="opacity:0.0">
    <input type="text" name="elaborate3" id="elaborate3"/>
</div>


<input type="hidden" name="strategy" id="strategy"/>
<p></p>


    {% next_button %}

{% endblock %}

{% block scripts %}

<script>


    $('#strategy1').bind('click', function(e) {
        document.getElementById("strategy").value=1;
        document.getElementById("strategy1").style.backgroundColor = 'DarkGray';
        document.getElementById("strategy2").style.backgroundColor = '';
        document.getElementById("strategy3").style.backgroundColor = '';
        document.getElementById("strategy1").disabled = true;
        document.getElementById("strategy2").disabled = true;
        document.getElementById("strategy3").disabled = true;
        document.getElementById("elaborate2").value='NA';
        document.getElementById("elaborate3").value='NA';
    });

    $('#strategy2').bind('click', function(e) {
        document.getElementById("strategy").value=2;
        document.getElementById("ela2").style = "opacity:1.0";
        document.getElementById("strategy1").style.backgroundColor = '';
        document.getElementById("strategy2").style.backgroundColor = 'DarkGray';
        document.getElementById("strategy3").style.backgroundColor = '';
        document.getElementById("strategy1").disabled = true;
        document.getElementById("strategy2").disabled = true;
        document.getElementById("strategy3").disabled = true;
        document.getElementById("elaborate3").value='NA';
    });

    $('#strategy3').bind('click', function(e) {
        document.getElementById("strategy").value=3;
        document.getElementById("ela3").style = "opacity:1.0";
        document.getElementById("strategy1").style.backgroundColor = '';
        document.getElementById("strategy2").style.backgroundColor = '';
        document.getElementById("strategy3").style.backgroundColor = 'DarkGray';
        document.getElementById("strategy1").disabled = true;
        document.getElementById("strategy2").disabled = true;
        document.getElementById("strategy3").disabled = true;
        document.getElementById("elaborate2").value='NA';
    });

</script>

{% endblock %}