{{ extends 'global/Page.html' }}
{{ block title }}Post-Experiment Survey{{ endblock }}

{{ block content }}

<style>
/* Create two equal columns that floats next to each other */
.column {
  float: left;
  width: 50%;
  padding: 10px;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}
</style>

<p><b>Question 8</b></p>

<div class="row">
    <div class="column">
        <p>
        This image is a visual puzzle that involves 
        identifying the missing piece in a series of patterns.
        </p>
        
        <p>
          Your goal is to select the correct piece from 
          multiple choices that completes the pattern logically. 
          If you are correct and this question is selected for payment, 
          you will receive {{ C.RAVEN_BONUS }} points.
        </p>
        
        {{ formfields }}
        
</div>
<div class="column">
    <img src="{{ static 'images/survey/raven4.jpg' }}",
    style="height: 350px;"/>
</div>
</div>


<div style = "text-align: center;">
      {{ next_button }}</div>

{{ endblock }}