174 lines
4.2 KiB
HTML
174 lines
4.2 KiB
HTML
|
<head>
|
||
|
|
<style>
|
||
|
|
.button {
|
||
|
|
background-color: #a3a3c2;
|
||
|
|
border: none;
|
||
|
|
color: white;
|
||
|
|
padding: 30px;
|
||
|
|
text-align: center;
|
||
|
|
text-decoration: none;
|
||
|
|
display: inline-block;
|
||
|
|
font-size: 20px;
|
||
|
|
margin: 10px 10px;
|
||
|
|
cursor: pointer;
|
||
|
|
border-radius: 8px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hide {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
{% extends "global/Page.html" %}
|
||
|
|
{% load otree %}
|
||
|
|
|
||
|
|
{% block title %}
|
||
|
|
|
||
|
|
{% if player.id_in_group == 1 %}
|
||
|
|
Choice of your color (game 2)
|
||
|
|
{% endif %}
|
||
|
|
{% if player.id_in_group == 2 %}
|
||
|
|
Choice of your color (game 1)
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
{% block content %}
|
||
|
|
|
||
|
|
|
||
|
|
<div class="card bg-light instructions">
|
||
|
|
<div class="card-body">
|
||
|
|
|
||
|
|
|
||
|
|
<link rel="stylesheet" type="text/css"
|
||
|
|
href="{% static 'global/matrix.css' %}"/>
|
||
|
|
|
||
|
|
<p> Please choose between the following two buttons: </p>
|
||
|
|
|
||
|
|
<p> A color (red or green) is hidden behind each button.
|
||
|
|
When you click on one of the buttons, its color appears.
|
||
|
|
If the color that appears is green, you will receive the green wins
|
||
|
|
from the selection you made at the start.
|
||
|
|
If it is red, you will receive the red winnings. </p>
|
||
|
|
<br> <br>
|
||
|
|
|
||
|
|
<center>
|
||
|
|
<button
|
||
|
|
onclick="setColor1(event); myFunction()"
|
||
|
|
class="button"
|
||
|
|
id="b_left_end"
|
||
|
|
name="tc3"
|
||
|
|
value=""
|
||
|
|
>
|
||
|
|
</button>
|
||
|
|
|
||
|
|
<button
|
||
|
|
onclick="setColor2(event); myFunction()"
|
||
|
|
class="button"
|
||
|
|
id="b_right_end"
|
||
|
|
name="tc3"
|
||
|
|
value=""
|
||
|
|
>
|
||
|
|
</button>
|
||
|
|
</center>
|
||
|
|
|
||
|
|
<br> <br>
|
||
|
|
<FONT color="transparent"> <p id="demo" class="hide" ></p> </FONT>
|
||
|
|
|
||
|
|
<FONT color="transparent"> <p id="active" class="hide"></p> </FONT>
|
||
|
|
|
||
|
|
<FONT color="transparent"> <p id="tc" class="hide"></p> </FONT>
|
||
|
|
<FONT color="transparent"> <p id="l1" class="hide"></p> </FONT>
|
||
|
|
<FONT color="transparent"> <p id="l2" class="hide"></p> </FONT>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
</div> </div>
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
{% endblock %}
|
||
|
|
|
||
|
|
|
||
|
|
{% block scripts %}
|
||
|
|
|
||
|
|
<script>
|
||
|
|
var tiragecolor2= Math.random();
|
||
|
|
tiragecolor2 = tiragecolor2.toFixed(2);
|
||
|
|
document.getElementById("tc").innerHTML = tiragecolor2;
|
||
|
|
let list_l = ['1'];
|
||
|
|
let list_r = ['2'];
|
||
|
|
list_l.push(document.getElementById("tc").innerHTML);
|
||
|
|
list_r.push(document.getElementById("tc").innerHTML);
|
||
|
|
|
||
|
|
list_l2 = list_l.join(';;');
|
||
|
|
list_r2 = list_r.join(';;');
|
||
|
|
document.getElementById("l1").innerHTML = list_l2;
|
||
|
|
document.getElementById("l2").innerHTML = list_r2;
|
||
|
|
document.getElementById('b_left_end').value = list_l2;
|
||
|
|
document.getElementById('b_right_end').value = list_r2;
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
document.getElementById("demo").innerHTML = Math.random();
|
||
|
|
var alpha = document.getElementById("demo").innerHTML;
|
||
|
|
|
||
|
|
document.getElementById("active").innerHTML = 99;
|
||
|
|
var active1 = document.getElementById("active").innerHTML;
|
||
|
|
|
||
|
|
function myFunction() {
|
||
|
|
document.getElementsById('sp1').value = 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
function setColor1(e) {
|
||
|
|
|
||
|
|
if (active1 == 99) {
|
||
|
|
|
||
|
|
if (tiragecolor2 >= 0.5) {
|
||
|
|
var target = e.target,
|
||
|
|
count = +target.dataset.count;
|
||
|
|
target.style.backgroundColor = count === 1 ? '#a3a3c2' : '#00802b';
|
||
|
|
}
|
||
|
|
|
||
|
|
if (tiragecolor2 < 0.5) {
|
||
|
|
var target = e.target,
|
||
|
|
count = +target.dataset.count;
|
||
|
|
target.style.backgroundColor = count === 1 ? '#a3a3c2' : '#e60000';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
active1 = 1;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function setColor2(e) {
|
||
|
|
|
||
|
|
if (active1 == 99) {
|
||
|
|
|
||
|
|
if (tiragecolor2 <= 0.5) {
|
||
|
|
var target = e.target,
|
||
|
|
count = +target.dataset.count;
|
||
|
|
target.style.backgroundColor = count === 1 ? '#a3a3c2' : '#00802b';
|
||
|
|
}
|
||
|
|
|
||
|
|
if (tiragecolor2 > 0.5) {
|
||
|
|
var target = e.target,
|
||
|
|
count = +target.dataset.count;
|
||
|
|
target.style.backgroundColor = count === 1 ? '#a3a3c2' : '#e60000';
|
||
|
|
}
|
||
|
|
}
|
||
|
|
active1 = 2;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
|
||
|
|
<script src="https://code.highcharts.com/highcharts.js"></script>
|
||
|
|
|
||
|
|
{% endblock %}
|