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

{% block title %}
    The main parts of the study are now finished. Thank you!
{% endblock %}

{% block content %}
<link rel="stylesheet" href='{{ static "style/global_style.css"}}'>
<link rel="stylesheet" href='{{ static "style/cards.css"}}'>
<link rel="stylesheet" href='{{ static "style/boxgraph.css"}}'>
<style>
    .info {
        width:100%;
        background-color: #eee;
        padding: 20px 0;
        text-align: center
    }
</style>


<div>

    <p>
        We would be grateful if you can tell use a bit about how you arrived at your answers to certain parts of this survey. Your answers to the following questions will <b>not</b> affect your payoff. But your thoughtful answers would be very helpful for our study!</p>

    <br>
    <h4>Your Strategy</h4>

    <form>


       <p>When you saw the following type of information</p>
        <div class="info" style="padding:10px;font-size:25px;">
                    <b>N</b> balls are drawn out of the picked box, of which:<br>

            <b>P in every W balls</b>
 are <div style="display: inline-block" id="circle-green"></div>
   and
            <b>Q in every W balls</b>
            are <div style="display: inline-block" id="circle-orange"></div>
        </div>
       <p>what strategies or rules did you follow when you were answering the question "How likely is that the picked box is Box L versus Box R?"? (For example, you can tell us about which pieces of information you relied on the most, what calculations or adjustments you performed, what rules-of-thumb you employed, etc.)<br/>
</p>
        <textarea name="strategy_box2" id="strategy_box2" style="width:500px;height:180px;" placeholder="Enter text here..."></textarea><br/>
        <br>
       <p>When you saw the following type of information</p>
        <div class="info" style="padding:10px;font-size:25px;">
                    <b>N balls</b> are drawn out of the picked box, among which:<br>
         there are <b>A more</b> <div style="display: inline-block" id="circle-orange"></div>
                    than <div style="display: inline-block" id="circle-green"></div>
        </div>
       <p>what strategies or rules did you follow? (For example, you can tell us about which pieces of information you relied on the most, what calculations or adjustments you performed, what rules-of-thumb you employed, etc.)</p>
        <textarea name="strategy_box3" id="strategy_box3" style="width:500px;height:180px;" placeholder="Enter text here..."></textarea><br/>
        <br>
        <p>When you saw the following type of information</p>
        <div class="info" style="padding:10px;font-size:25px;">
                    <b>B balls</b> are <div style="display: inline-block" id="circle-green"></div> and
         <b>C balls</b> are <div style="display: inline-block" id="circle-orange"></div>
        </div>
       <p>what strategies or rules did you follow? (For example, you can tell us about which pieces of information you relied on the most, what calculations or adjustments you performed, what rules-of-thumb you employed, etc.)</p>
         <textarea name="strategy_box4" id="strategy_box4" style="width:500px;height:180px;" placeholder="Enter text here..."></textarea><br/>
        <br>
        <p>When you saw the following type of information</p>
<div class="info" style="padding:10px;font-size:25px">
         <table style="text-align: center;margin-left: auto;margin-right: auto;">
                      <tr>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                         <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                         <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                          <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                         <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>

                      </tr>
                      <tr>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                         <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                         <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                          <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>

                      </tr>
            <tr>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
               <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
               <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>

                      </tr>
            <tr>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
               <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
               <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>

                      </tr>
                        <tr>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                           <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                           <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                            <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>

                      </tr>
             <tr>... ...</tr>
            <tr>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
               <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
            <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
                <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-orange"></div>
                        </td>
                        <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
            <td>
                          <div style="display: inline-block" id="circle-green"></div>
                        </td>
            </tr>

                    </table>
... ...
</div>
     <p>what strategies or rules did you follow? (For example, you can tell us about which pieces of information you relied on the most, what calculations or adjustments you performed, what rules-of-thumb you employed, etc.)</p>
             <textarea name="strategy_box5" id="strategy_box5" style="width:500px;height:180px;" placeholder="Enter text here..."></textarea><br/>

   <br>

        <h4>Your Feedback</h4>

        <p>Do you have any questions or comments about the study? For example, any part of the instructions you find hard to understand, your opinions about the study (e.g., interesting, tedious, understandable, or confusing), etc. <br/>
    </p>
        <textarea name="feedback_box" id="feedback_box" style="width:500px;height:180px;" placeholder="Enter text here..."></textarea><br/>
    <br>
    </form>
</div>
{{next_button}}

{% endblock %}