{{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 you understood the instructions, you must pass the following 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>

{{ 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="square center">
    <canvas id="myCanvas2" width="600" height="485"></canvas>
</div>

<div class="left">

{{ formfield player.q1 label="Will you play with the same partner in all 40 rounds of each game?" }}

{{ formfield player.q2 label="Assume that in one of the rounds, Player 1 chooses TAILS. What will be the payoff of Player 2? " }}

{{ formfield player.q3 label="Assume that in one of the rounds, Player 1 chooses HEADS, and Player 2 chooses RIGHT. What will be the payoff of Player 2?" }}




</div>

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

<div class="center">
<label class="btn btn-info center" id="show-instructions">Show Instructions</label>
</div>
<div id="instructions" class="left" style="display: none;"> 
	{{ include "instructions/instructions_part.html"}}
</div>

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

	.price {
		color: red;
	}

	.xvar {
		color: blue;
	}

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

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

	.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;
    }

	#instructions {
		background-color: #ddd;
		border-radius: 1rem;
		margin-top: 2rem;
	}

	</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 src="/static/global/functions.js"></script>
<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();
	// });



	document.addEventListener('DOMContentLoaded', (event) => {
		const label = document.querySelector('label[for="id_q2"]');
		label.innerHTML = 'Assume that in one of the rounds, <font class="player1">Player 1</font> chooses TAILS. What will be the payoff of <font class="player2">Player 2</font>? ';
		const label3 = document.querySelector('label[for="id_q3"]');
		label3.innerHTML = 'Assume that in one of the rounds, <font class="player1">Player 1</font> chooses HEADS, and <font class="player2">Player 2</font> chooses RIGHT. What will be the payoff of <font class="player2">Player 2</font>?';
		var p1_tails = formatNumber({{ session.config.p1_tails | json}});
        var p2_tails = formatNumber({{ session.config.p2_tails | json}});
        var p1_left = formatNumber({{ session.config.p1_left | json}});
        var p1_left_prob = {{ session.config.p1_left_prob | json}};
        var p1_left_otherwise = formatNumber({{ session.config.p1_left_otherwise | json}});
        var p2_left = formatNumber({{ session.config.p2_left | json}});
        var p1_right = formatNumber({{ session.config.p1_right | json}});
        var p2_right =  formatNumber({{ session.config.p2_right | json}});
        drawTree(p1_tails=p1_tails, p2_tails=p2_tails, p1_left=p1_left, p1_left_prob=p1_left_prob, p1_left_otherwise=p1_left_otherwise, p2_left=p2_left, p1_right=p1_right, p2_right=p2_right);
		drawTree(p1_tails=p1_tails, p2_tails=p2_tails, p1_left=p1_left, p1_left_prob=p1_left_prob, p1_left_otherwise=p1_left_otherwise, p2_left=p2_left, p1_right=p1_right, p2_right=p2_right, canvasid="myCanvas2");
		});
	
		document.getElementById('show-instructions').addEventListener('click', function () {
		const instructions = document.getElementById('instructions');

		if (instructions.style.display === 'none') {
			instructions.style.display = 'block';
		} else {
			instructions.style.display = 'none';
		}
	});	
	</script>

{{ endblock }}