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

<style media="screen">
#example-child {
  margin: auto;
  margin-bottom: 1rem;
}

</style>

{{endblock}}

{{ block title }}
    Welcome to our study
{{ endblock }}

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

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

    <p class="left">
		Thank you very much for participating in our study. We hope that you will pay close attention to the questions. The thoughtful responses you provide to our questions are essential for advancing our scientific research, and all respondents can help us reach our goal. We would not be able to conduct our research without your thoughtful and careful answers to our questions. We know you are busy and greatly appreciate your time.
	</p>



<h3>Instructions</h3>
<p class="left">
	You will be choosing between a series of options, presented two at a time. You must always choose one of the two options displayed on the screen. There will be three different kinds of options:
</p>

<ul>
	<li> <strong>Confectioneries.</strong> Please choose the confectionery which you would pick if we had offered you the same alternatives in real life.</li>
	<br /> 
	<li> <strong>Political parties of the United Kingdom.</strong> Please choose the political party which you would vote for in the next election to the Parliament of the United Kingdom if you had to vote for one of the two in real life.</li>
	<br /> 
	<li> <strong>Spin-the-wheel lotteries.</strong> Please choose the lottery which you would pick if we had offered you the same alternatives in real life.</li>
</ul>

<p class="left">
	The lotteries will be displayed like the example below.
</p>

	<!-- <figure class="highcharts-figure">
  <div id="container"></div>
  <p class="highcharts-description">

	Här ska det vara ett pajdiagram som illustrerar hur alternativen kommer se ut.

  </p>
</figure> -->

<h4>Example</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>

<p class="left"> Imagine that you could spin the wheel in the example. If the wheel stops on the black area, you win the amount displayed above the wheel. If the wheel stops on the white area, you win the amount displayed below the wheel. 
	The black area thus represents the probability of winning X British pounds (£). The white area represents the probability of winning Y British pounds (£).
	The potential winnings (X and Y) and their respective probabilities (the black and white proportions of the wheel) will vary from option to option.
    After you have finished with the task, one of the gambles you picked will be played for real. You will receive the outcome of that gamble as a bonus reward.</p> <br /> 
	<br /> 


	<p class="left"> When you are sure that you have understood these instructions, please click "Next" below to start the experiment.</p> <br /> 
	<br /> 



<!-- <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;
	}
	</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 }}