{{ 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>

<div class="row">
    <div class="column">
        <p>
        Questions 5-9 of the survey are visual puzzles that involve
        identifying the missing piece in a series of patterns. 
        </p>
        
        <p>
        An example of one such puzzle is shown here. 
        </p>
        
        <p>
          Your goal is to select the correct piece from 
          multiple choices that completes the pattern logically. 
          If you are correct, and the question is selected for payment, 
          you will receive <b>{{ C.RAVEN_BONUS }} points</b>.
        </p>
        
        <p>
          You will have <b>60 seconds</b> to complete each of the puzzles. 
          Click next to begin.
        </p>
        
        {{ formfields }}

</div>
<div class="column">
    <img src="{{ static 'images/survey/raven_Ex.jpg' }}",
    style="height: 350px;"/>
</div>
</div>


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

{{ endblock }}