161 lines
4.0 KiB
HTML
161 lines
4.0 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;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
{% extends "global/Page.html" %}
|
|
{% load otree %}
|
|
|
|
{% block title %}
|
|
|
|
Jeu 2 : Choix de votre couleur
|
|
|
|
|
|
|
|
{% 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> Veuillez choisir entre les deux boutons suivants : </p>
|
|
|
|
<p> Une couleur (rouge ou verte) est cachée derrière chaque bouton.
|
|
Lorsque vous cliquez sur l'un des boutons, sa couleur apparaît.
|
|
Si la couleur qui apparaît est verte, vous recevrez les gains verts de la sélection que vous avez faite au début.
|
|
S'il est rouge, vous recevrez les gains rouges. </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" ></p> </FONT>
|
|
|
|
<FONT color="transparent"> <p id="active"></p> </FONT>
|
|
|
|
<FONT color="transparent"> <p id="tc"></p> </FONT>
|
|
<FONT color="transparent"> <p id="l1"></p> </FONT>
|
|
<FONT color="transparent"> <p id="l2"></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 %} |