{% extends "global/Page.html" %}
{% load staticfiles otree %}
{% block style %}
<style>
.ImageBorder {
  border-width: 2px;
  border-color: Black !important;
}
.column {
  float: left;
  width: 50%;
  padding: 10px;
}

</style>
{% endblock %}

{% block title %}
A Questionnaire

{% endblock %}



{% block content %}
<div class="instructions well well-lg">
    <h3 class="panel-sub-heading"><center> <p> <u>Instructions</u> </center></p></h3>

        <br>         <p align="justify"> For each of the following ten questions, please give the range of answers that you are 90 percent confident contains the correct answer.
        For example, for the first question, you are supposed to fill in the blanks:
        "I am 90 percent confident that Martin Luther King's age at the time of his death was somewhere between XXX years and YYY years."
       Don't worry about not knowing the exact answer.
    Here are the ten questions:</p>
</div>
<div class="instructions well well-lg">

    What was Martin Luther's age at death?
    <div class="row">
   &nbsp;&nbsp;&nbsp;&nbsp;<div class="column"> {% formfield player.Q1a label="Min." %}</div>
        <div class="column">    {% formfield player.Q1b label="Max." %}</div>
    </div>
</div>

<div class="instructions well well-lg">
    What is the length of the Nile river?
    <div class="row">
        &nbsp;&nbsp;&nbsp;&nbsp;<div class="column">{% formfield player.Q2a label="Min." %}</div>
      <div class="column">  {% formfield player.Q2b label="Max." %} </div>
        {% formfield player.Q2c label="Measure used? (km, miles?)" %}</div>
</div>

<div class="instructions well well-lg">
    How many countries are members of OPEC?
     <div class="row">
         &nbsp;&nbsp;&nbsp;&nbsp;<div class="column"> {% formfield player.Q3a label="Min." %}</div>
         <div class="column">     {% formfield player.Q3b label="Max." %}</div>
     </div>
</div>

<div class="instructions well well-lg">
    How many books does the Old Testament consist of?
     <div class="row">
     &nbsp;&nbsp;&nbsp;&nbsp;    <div class="column"> {% formfield player.Q4a label="Min." %} </div>
        {% formfield player.Q4b label="Max." %}
        </div>
</div>

<div class="instructions well well-lg">
    What is the diameter of the moon?
         <div class="row">
             &nbsp;&nbsp;&nbsp;&nbsp;<div class="column"> {% formfield player.Q5a label="Min." %} </div>
          <div class="column">   {% formfield player.Q5b label="Max." %} </div>
             {% formfield player.Q5c label="Measure used? (km, miles?)"%}</div>
</div>

<div class="instructions well well-lg">
    What is the weight of an empty Boeing 747?
         <div class="row">
             &nbsp;&nbsp;&nbsp;&nbsp;<div class="column"> {% formfield player.Q6a label="Min." %}</div>
     <div class="column"> {% formfield player.Q6b label="Max." %}</div>

             {% formfield player.Q6c label="Measure used? (kgs, pounds?)"%}</div>
</div>

<div class="instructions well well-lg">
    Which year was Wolfgang Amadeus Mozart born in?
     <div class="row">
      &nbsp;&nbsp;&nbsp;&nbsp;   <div class="column"> {% formfield player.Q7a label="Min." %}</div>
        {% formfield player.Q7b label="Max." %}
             </div>

</div>

<div class="instructions well well-lg">
    What is the gestation period (in days) of an Asian elephant?
     <div class="row">
     &nbsp;&nbsp;&nbsp;&nbsp;    <div class="column"> {% formfield player.Q8a label="Min." %} </div>
        {% formfield player.Q8b label="Max." %}
             </div>
</div>

<div class="instructions well well-lg">
    What is the air distance between London and Tokyo?
         <div class="row">
             &nbsp;&nbsp;&nbsp;&nbsp;<div class="column">    {% formfield player.Q9a label="Min." %} </div>
             <div class="column"> {% formfield player.Q9b label="Max." %} </div>
    {% formfield player.Q9c label="Measure used? (km, miles?)"%}</div>
</div>

<div class="instructions well well-lg">
   What is the deepest recorded point in the oceans?
         <div class="row">
             &nbsp;&nbsp;&nbsp;&nbsp;    <div class="column"> {% formfield player.Q10a label="Min." %}</div>
             <div class="column"> {% formfield player.Q10b label="Max." %}</div>
    {% formfield player.Q10c label="Measure used? (km, miles?)"%}
         </div>
</div>





    <br>
    {% next_button %}

{% endblock %}

{% block styles %}
   <style>
      input[type=radio] {
        transform: scale(1);
        margin:1px;
        margin-right: 1 !important;
        margin-left: 1px !important;
      }
}




   </style>
{% endblock %}