{{ block content }}
<b>Indicate which is the best answer to complete each figure:</b>
<br>
<br>

<div class="card">
    <div class=card-header><b>Figure 1/11</b></div>
    <div class="card-body">
    <p>
        <img src="https://i.imgur.com/zR87SGO.png" width="500px" />
        <div {{ if 'icar_q1' in form.errors }} class="border border-danger px-3 rounded" {{ endif }}>
        {{ formfield 'icar_q1' label=''}}
        </div> 
    </p>
    </div>
</div>
<br>

<div class="card">
    <div class=card-header><b>Figure 2/11</b></div>
    <div class="card-body">
    <p>
        <img src="https://i.imgur.com/dzr9O42.png" width="500px" />
        <div {{ if 'icar_q2' in form.errors }} class="border border-danger px-3 rounded" {{ endif }}>
        {{ formfield 'icar_q2' label=''}}
        </div>
    </p>
    </div>
</div>
<br>

<div class="card">
    <div class=card-header><b>Figure 3/11</b></div>
    <div class="card-body">
    <p>
        <img src="https://imgur.com/6Zq9Dmm.png" width="500px" />
        <div {{ if 'icar_q3' in form.errors }} class="border border-danger px-3 rounded" {{ endif }}>
        {{ formfield 'icar_q3' label=''}}
        </div>
    </p>
    </div>
</div>
<br>

<div class="card">
    <div class=card-header><b>Figure 4/11</b></div>
    <div class="card-body">
    <p>
        <img src="https://imgur.com/MXqK0V1.png" width="500px" />
        <div {{ if 'icar_q4' in form.errors }} class="border border-danger px-3 rounded" {{ endif }}>
        {{ formfield 'icar_q4' label=''}}
        </div>
    </p>
    </div>
</div>
<br>

<div class="card">
    <div class=card-header><b>Figure 5/11</b></div>
    <div class="card-body">
    <p>
        <img src="https://imgur.com/Qsjcl6n.png" width="500px" />
        <div {{ if 'icar_q5' in form.errors }} class="border border-danger px-3 rounded" {{ endif }}>
        {{ formfield 'icar_q5' label=''}}
        </div>
    </p>
    </div>
</div>
<br>

<div class="card">
    <div class=card-header><b>Figure 6/11</b></div>
    <div class="card-body">
    <p>
        <img src="https://imgur.com/67VLHNK.png" width="500px" />
        <div {{ if 'icar_q6' in form.errors }} class="border border-danger px-3 rounded" {{ endif }}>
        {{ formfield 'icar_q6' label=''}}
        </div>
    </p>
    </div>
</div>
<br>

<div class="card">
    <div class=card-header><b>Figure 7/11</b></div>
    <div class="card-body">
    <p>
        <img src="https://imgur.com/bM5K7X6.png" width="500px" />
        <div {{ if 'icar_q7' in form.errors }} class="border border-danger px-3 rounded" {{ endif }}>
        {{ formfield 'icar_q7' label=''}}
        </div>
    </p>
    </div>
</div>
<br>

<div class="card">
    <div class=card-header><b>Figure 8/11</b></div>
    <div class="card-body">
    <p>
        <img src="https://imgur.com/GYBTATF.png" width="500px" />
        <div {{ if 'icar_q8' in form.errors }} class="border border-danger px-3 rounded" {{ endif }}>
        {{ formfield 'icar_q8' label=''}}
        </div>
    </p>
    </div>
</div>
<br>

<div class="card">
    <div class=card-header><b>Figure 9/11</b></div>
    <div class="card-body">
    <p>
        <img src="https://imgur.com/VlV773m.png" width="500px" />
        <div {{ if 'icar_q9' in form.errors }} class="border border-danger px-3 rounded" {{ endif }}>
        {{ formfield 'icar_q9' label=''}}
        </div>
    </p>
    </div>
</div>
<br>

<div class="card">
    <div class=card-header><b>Figure 10/11</b></div>
    <div class="card-body">
    <p>
        <img src="https://imgur.com/G3haQjd.png" width="500px" />
        <div {{ if 'icar_q10' in form.errors }} class="border border-danger px-3 rounded" {{ endif }}>
        {{ formfield 'icar_q10' label=''}}
        </div>
    </p>
    </div>
</div>
<br>

<div class="card">
    <div class=card-header><b>Figure 11/11</b></div>
    <div class="card-body">
    <p>
        <img src="https://imgur.com/5BYDU31.png" width="500px" />
        <div {{ if 'icar_q11' in form.errors }} class="border border-danger px-3 rounded" {{ endif }}>
        {{ formfield 'icar_q11' label=''}}
        </div>
    </p>
    </div>
</div>
<br>
<br>

<button class="otree-btn-next btn btn-dark btn-primary">Next</button>

{{ endblock }}

{{ block style }}
    <style>
        .otree-timer {
            position: sticky;
            top: 0px;
            z-index: 1;
        }
        .image13-rotate {
            transform: rotate(0.7deg); /* Replace 45deg with the desired angle in degrees */
        }
        .image14-rotate {
            transform: rotate(0.9deg); /* Replace 45deg with the desired angle in degrees */
        }
        .image15-rotate {
            transform: rotate(1.0deg); /* Replace 45deg with the desired angle in degrees */
        }
        .image16-rotate {
            transform: rotate(0.3deg); /* Replace 45deg with the desired angle in degrees */
        }
        .box {
            width: 150px;
            height: 100px; /* Optional: Set height if needed */
            }
        .otree-form-errors {
            display: none;  /* Hide the global error message */
        }
    </style>
{{ endblock }}