{{block style}}
<link rel="stylesheet" href="/static/global/style.css">

{{endblock}}

{{ block title }}
    Comprehension quiz
{{ endblock }}

{{ block content }}
<!-- <div id="instructions"> -->

    <!-- <h4> General Instructions </h4> -->





<p class="left">
	To make sure that you understand the instructions, you must pass a short comprehension quiz. You have a maximum of {{C.NUM_ROUNDS}} attempts to pass the quiz. If you fail to pass the quiz, you will not be able to participate in the study.
</p>
<br>

<h4>Consider this lottery:</h4>

<div class="flex-container">
	<div class="row">
    <div id="example-child" class="flex-child boxed center magenta">
      <div class="valueup">
        £X
      </div>
      <div class="square">
        <div id="example" class="pie"></div>
      </div>
      <div class="valuebelow">
        £Y
      </div>
    </div>
</div>
</div>


{{ if subsession.round_number > 1 }}
    <p style="color: red; font-weight:bold;">
        At least one of you answers were wrong, please try again. This is attempt {{subsession.round_number}} out of {{C.NUM_ROUNDS}}.
    </p>
{{ endif }}

<div class="left">

{% formfield player.q1 label="Is it more likely that you will receive £X or £Y from the lottery above?" %}

{% formfield player.q2 label="You will choose which political party you would vote for in the next election, if you had to vote for one of two parties shown. Which country will these parties be from?" %}

{% formfield player.q3 label="Is the following statement true or false: after you have finished the experiment, one of the lotteries you chose will be randomly selected and played for real. Any winnings from that lottery will be yours to keep as a bonus." %}

{% formfield player.q4 label="This is a filler question to catch potential bots that select options randomly. Please select the last option in the list below (the final month of the year). You must select the last option to pass the quiz." %}
</div>

<!-- <div class="centered"> -->
    {{ next_button }}
<!-- </div> -->



<style>
	body {
		text-align: center;
	}

	.price {
		color: red;
	}

	.xvar {
		color: blue;
	}

	.left {
		text-align: left;
		padding:2em;
	}

	ol, ul, li {
		text-align: left;
	}

	p {
		margin: auto;
		text-align: center;
	}

	canvas {
		border: 1px solid #dee2e6;
	}

	.table th, .table th{
		vertical-align: middle;
		font-weight: bold;
	}

	#row_2 {
		border-bottom: 1px solid #dee2e6;
	}

    #example-child {
    margin: auto;
    margin-bottom: 1rem;
    }

    .col-form-label {
        font-weight: bold;
    }

	</style>



<!--
	Här försökte jag ändra så att vi ritar ett pajdiagram med 60% chans på vinst.
	Jag får ett fel på linje 133 som jag inte förstår. Trodde jag definierade P på linje 160?
-->
<script type="text/javascript">
	//   $(document).keyup((evt) => {
	//   if (evt.key === 'ArrowLeft')
	//     document.getElementById('left-button').click();
	//   if (evt.key === 'ArrowRight')
	//     document.getElementById('right-button').click();
	// });

	function drawProb(id, p) {
	  var P = p*360;
	  gR = P/2;
	  lR = 360 - gR;
	  document.getElementById(id).style.background = `conic-gradient(black 1deg ${gR}deg, white ${gR}deg ${lR}deg, black ${lR +1}deg 360deg)`;
	  };


	document.addEventListener('DOMContentLoaded', (event) => {
			drawProb('example', 0.6);
		});

	</script>

{{ endblock }}