{{ block app_styles }}
   <style>
       .taskcontainer{
           /*border: 2px solid black;*/
           border:none;
           width: 110%;
           margin-left: -5%; /* negative half of the extra width */
           display: flex;
       }
       table {
           border-collapse: collapse;
           border-spacing: 30px;
           border: none;
           font-size: 16px;
           width: 100%;
           padding: 10px;
       }

       td{
           text-align: center;
       }
       p, ul{
           font-size: 20px;
       }
   </style>
{{ endblock }}
{{ block content }}
<ul>

        <li>
            To determine <b>which method</b> will be used for <b>this task</b>, you should answer the following questions which ask you to choose <b>which procedure you prefer</b>.
        </li>

</ul>

<p><b><u>Question 1</u></b>:  Which one do you prefer?</p>

    <table>
        <colgroup>
            <col span="1" style="width: 50%;">
            <col span="1" style="width: 50%;">
        </colgroup>
        <tr>
            <td style="border: 2px solid black;">
                <img src="{{static 'global/CM.png'}}" style="width: 90%;"/>
            </td>
            <td style="border: 2px solid black;">
                <img src="{{static 'global/DBM.png'}}" style="width: 90%;"/>
            </td>
        </tr>
    </table>
<br>
<table>
    <colgroup>
        <col span="1" style="width: 50%;">
        <col span="1" style="width: 50%;">
    </colgroup>
    <tr>
        <td>
            <button class="btn btn-outline-success" onclick="choice_1()" id="choice1"><span>Pick-One-on-the-Slider-Bar</span></button>
        </td>
        <td>
            <button class="btn btn-outline-success" onclick="choice_2()" id="choice2"><span>Which-Range-is-More-Likely</span></button>
        </td>
    </tr>
</table>
<br>
<div style="text-align: right">
<button type="button" id="nextQ2" class="btn-success" style="visibility: hidden" onclick="next_question()">Submit</button>
</div>
<br>
<div id="Q2" style="visibility: hidden">
    <p><b><u>Question 2</u></b>: You indicated that you like <span id="prefer" style="color: #4c6baf"></span> more than <span id="notprefer" style="color: #4c6baf"></span>. Please indicate the strength of your preference for the former over the latter below.
    (The higher the number, the more you preferred the option you selected over the alternative.)
</p>

<table class="taskcontainer">
    <tr>
        <td style="width: 15%">
            Completely indifferent between the two
        </td>
        <td>
            {{formfield 'preference'}}
        </td>
        <td style="width: 15%">
            Very strong preference for the <span id="preference" style="color: #4c6baf"></span>
        </td>
    </tr>
    <tr>
     <br>
        <td colspan="3" style="text-align: right">
            <button type="submit" id="next" class="btn-success">Submit</button>
        </td>
    </tr>
</table>
</div>


<input type="hidden" name="choice" id="choice"/>
<input type="hidden" name="preference" id="like"/>
{{ formfield_errors 'choice' }}
{{ formfield_errors 'preference' }}

{{ endblock }}
{% block scripts %}

<script>

    choice_1 = function(){
        document.getElementById("choice").value = "CM";
        document.getElementById("nextQ2").style.visibility = "visible";
        document.getElementById("prefer").innerHTML = "Pick-One-on-the-Slider-Bar";
        document.getElementById("notprefer").innerHTML = "Which-Range-is-More-Likely";
        document.getElementById("preference").innerHTML = "Pick-One-on-the-Slider-Bar";
    }
    choice_2 = function(){
        document.getElementById("choice").value = "DBM";
        document.getElementById("nextQ2").style.visibility = "visible";
        document.getElementById("prefer").innerHTML = "Which-Range-is-More-Likely";
        document.getElementById("notprefer").innerHTML = "Pick-One-on-the-Slider-Bar";
        document.getElementById("preference").innerHTML = "Which-Range-is-More-Likely";
    }

    next_question = function(){
        document.getElementById("choice1").disabled = true;
        document.getElementById("choice2").disabled = true;
        document.getElementById("nextQ2").disabled = true;
        document.getElementById("Q2").style.visibility = "visible";
    }
</script>

{% endblock %}