Gitlab CSE Unil

Commit 5d8fc9f5 authored by M. Chardon's avatar M. Chardon
Browse files

init alea

parent 814dac5e
/*
* Base structure
*/
/* Move down content because we have a fixed navbar that is 50px tall */
body {
padding-top: 50px;
}
/*
* Global add-ons
*/
.sub-header {
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
/*
* Top navigation
* Hide default border to remove 1px line.
*/
.navbar-fixed-top {
border: 0;
}
/*
* Sidebar
*/
/* Hide for mobile, show later */
.sidebar {
display: none;
}
@media (min-width: 768px) {
.sidebar {
position: fixed;
top: 51px;
bottom: 0;
left: 0;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */
background-color: #f5f5f5;
border-right: 1px solid #eee;
}
}
/* Sidebar navigation */
.nav-sidebar {
margin-right: -21px; /* 20px padding + 1px border */
margin-bottom: 20px;
margin-left: -20px;
}
.nav-sidebar > li > a {
padding-right: 20px;
padding-left: 20px;
}
.nav-sidebar > .active > a,
.nav-sidebar > .active > a:hover,
.nav-sidebar > .active > a:focus {
color: #fff;
background-color: #428bca;
}
/*
* Main content
*/
.main {
padding: 20px;
}
@media (min-width: 768px) {
.main {
padding-right: 40px;
padding-left: 40px;
}
}
.main .page-header {
margin-top: 0;
}
/*
* Placeholder dashboard ideas
*/
.placeholders {
margin-bottom: 30px;
text-align: center;
}
.placeholders h4 {
margin-bottom: 0;
}
.placeholder {
margin-bottom: 20px;
}
.placeholder img {
display: inline-block;
border-radius: 50%;
}
<!DOCTYPE html>
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>@lea</title>
<meta name="author" content="Marion CHARDON for ESC/RISET - University of Lausanne" />
<meta name="description" content="Free Web tool for guess data" />
<meta name="keywords" content="Cipher, Bigdata, Guess" />
<meta charset="UTF-8" />
<link rel="stylesheet" href="js/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="js/bootstrap/dashboard.css" />
<link rel="stylesheet" href="js/bootstrap/font-awesome.min.css" />
<link rel="stylesheet" href="js/bootstrap/logo_unil.css" />
<link rel="stylesheet" href="../css/main.css" />
<script src="js/jquery/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/crypto/asmcrypto.js"></script>
<script src="js/controleur.js"></script>
<script src="js/entities/global.js"></script>
<script src="js/entities/modeleTwo.js"></script>
<script src="js/entities/modeleThree.js"></script>
<script src="js/entities/modeleFour.js"></script>
<script src="js/entities/modeleMaskEight.js"></script>
<script src="js/entities/resultat.js"></script>
<script src="js/graph/d3.v4.min.js"></script>
<script src="js/graph/gauge.js"></script>
<script src="js/graph.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="../index.html"><img src="../img/g3761.png" alt="" style="height:28px;display: inline;"/>Cryptex - @lea</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="help.html">Help</a></li>
</ul>
</div>
</div>
</nav>
<div class="container" style="margin-bottom: 70px; margin-top: 20px;">
<div class="row">
<div class="col-sm-3">
<ul class="nav nav-pills nav-stacked">
<li><a href="index.html">Step 1: test your sequence</a></li>
<li><a href="pasapas.html">Step 2: test the computeur</a></li>
<li><a href="understand.html">Step 3: understand</a></li>
<li class="active"><a href="games.html">Game</a></li>
</ul>
</div>
<div class="col-sm-9" style="padding-left: 20px;">
<div class="row">
<div class="col-sm-12">
<div class="alert alert-info alert-dismissable">
<strong>Info!</strong>
<p>
Here is a game: you against the machine. Will you be
able to deceive it? Or are you predictable?
</p>
</div>
<div class="panel panel-default" id='playerdiv'>
<div class="panel-heading">Game configuration</div>
<div class="panel-body">
<div class="row" >
<div class="col-sm-4">
<b>Play against:</b><br/>
<input class='vs' type="radio" name="vs" value="computer" checked='checked' /> the computer<br/>
<input class='vs' type="radio" name="vs" value="player"/> an other player
</div>
<div class="col-sm-4">
<b>Name:</b><br/>
<input type="text" id="nameplayerA" placeholder="Player A" class='form-control' />
<input type="text" id="nameplayerB" placeholder="Player B" class='form-control' style='display: none;'/>
</div>
<div class="col-sm-offset-1 col-sm-3">
<button class="btn btn-default" onclick="startGame();"><i class="fa fa-play" aria-hidden="true"></i> Let's go!</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" id='gamediv' style='display: none;'>
<div class="row">
<div class="col-sm-offset-9 col-sm-1">
<button class="btn btn-default" onclick="reset();">Restart game</button>
</div>
</div>
<div class="row" style='margin-top: 10px;'>
<div class="col-sm-6">
<div class="panel panel-warning">
<div class="panel-heading">Player A</div>
<div class="panel-body">
<div class="row" style="padding-bottom: 10px;padding-top: 10px;">
<div class="col-sm-10">
<button class="btn btn-info btn-lg btnbre" onclick="insertVal(0, 'A');">0 [s]</button>
<button class="btn btn-primary btn-lg btnbre" onclick="insertVal(1, 'A');">1 [d]</button>
</div>
</div>
<div class="row" style="padding: 10px;">
<div class="col-sm-12">
<textarea class="form-control" readonly="readonly" id="userinputA" style="font-size: large;height: 150px;background-color: papayawhip;"></textarea>
<div id="userinputdivA" style="display: none;"></div>
</div>
</div>
</div>
</div>
<div style="text-align: center;">
<span id="playerAGaugeContainer"></span>
</div>
<div class="row" id='propositionPanelA' style="display:none;">
<div class="col-sm-12">
<div class="panel panel-primary">
<div class="panel-heading">Percent correct answers</div>
<div class="panel-body">
<div class="row">
<ul>
<li><span style="color:orange;">Orange: wrong guess</span></li>
<li><span style="color:blue;">Blue: right guess</span></li>
</ul>
<div class="col-sm-6">
Total of right guesses:
<input class="form-control" readonly="readonly" id="guessValueCorrectA" />
</div>
<div class="col-sm-6">
About the last 10 results:
<input class="form-control" readonly="readonly" id="guessValueCorrect10A" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="panel panel-success">
<div class="panel-heading">Player B</div>
<div class="panel-body">
<div class="row" style="padding-bottom: 10px;padding-top: 10px;">
<div class="col-sm-10">
<button class="btn btn-info btn-lg btnbre" onclick="insertVal(0, 'B');">0 [k]</button>
<button class="btn btn-primary btn-lg btnbre" onclick="insertVal(1, 'B');">1 [l]</button>
</div>
</div>
<div class="row" style="padding-bottom: 42px;display: none;" id="computerplayer"></div>
<div class="row" style="padding: 10px;">
<div class="col-sm-12">
<textarea class="form-control" readonly="readonly" id="userinputB" style="font-size: large;height: 150px;background-color: mintcream;"></textarea>
<div id="userinputdivB" style="display: none;"></div>
</div>
</div>
</div>
</div>
<div style="text-align: center;">
<span id="playerBGaugeContainer"></span>
</div>
<div class="row" id='propositionPanelB' style="display:none;">
<div class="col-sm-12">
<div class="panel panel-primary">
<div class="panel-heading">Percent correct answers</div>
<div class="panel-body">
<div class="row">
<ul>
<li><span style="color:orange;">Orange: wrong guess</span></li>
<li><span style="color:blue;">Blue: right guess</span></li>
</ul>
<div class="col-sm-6">
Total of right guesses:
<input class="form-control" readonly="readonly" id="guessValueCorrectB" />
</div>
<div class="col-sm-6">
About the last 10 results:
<input class="form-control" readonly="readonly" id="guessValueCorrect10B" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--div class="col-sm-6">
<svg id="graphic" width="960" height="500"></svg>
</div-->
</div>
</div>
<div id="contacts" class="modal fade" role="dialog"></div>
<div id="credits" class="modal fade" role="dialog"></div>
<div id="legalInformation" class="modal fade" role="dialog"></div>
<footer class="footer"></footer>
<script>
var controleurA = new Controleur("game");
var controleurB = new Controleur("game");
var limitGame = 200;
var gauges = [];
function createGauge(name, label, min, max)
{
var config =
{
size: 180,
label: label,
min: undefined !== min ? min : 0,
max: undefined !== max ? max : 100,
minorTicks: 5
};
var range = config.max - config.min;
config.yellowZones = [{from: config.min + range * 0.70, to: config.min + range * 0.9}];
config.redZones = [{from: config.min + range * 0.9, to: config.max}];
gauges[name] = new Gauge(name + "GaugeContainer", config);
gauges[name].render();
}
function createGauges()
{
createGauge("playerA", "Divination");
createGauge("playerB", "Divination");
//createGauge("test", "Test", -50, 50 );
}
function updateGaugesVal(key, value)
{
gauges[key].redraw(value);
}
function initialize()
{
createGauges();
updateGaugesVal('playerA', 0);
updateGaugesVal('playerB', 0);
//setInterval(updateGauges, 5000);
}
$(document).ready(function () {
$("input[name='vs']").on('change', function () {
var vs = $('input[name=vs]:checked').val();
if (vs === "computer") {
$("#nameplayerB").hide();
} else {
$("#nameplayerB").show();
}
});
initialize();
});
function trigKeyDownInit(event) {
//event.preventDefault();
if (event.which === 83) {
insertVal(0, 'A');
} else if (event.which === 68) {
insertVal(1, 'A');
}
var vs = $('input[name=vs]:checked').val();
if (vs !== "computer") {
if (event.which === 75) {
insertVal(0, 'B');
} else if (event.which === 76) {
insertVal(1, 'B');
}
}
}
function insertVal(val, player) {
var nbreSaisis = -1;
if (player === "A") {
nbreSaisis = controleurA.suite.length;
} else {
nbreSaisis = controleurB.suite.length;
}
if (nbreSaisis < limitGame) {
$("#userinput" + player).val($("#userinput" + player).val() + val);
nbreSaisis++;
var res = null;
if (player === "A") {
controleurA.registerVal(val);
res = controleurA.guestNextValue();
} else {
controleurB.registerVal(val);
res = controleurB.guestNextValue();
}
if (res) {
$("#guessValue" + player).val(res.valeur);
var controlelastValue = null;
if (player === "A") {
controlelastValue = controleurA.getControlelastValue();
} else {
controlelastValue = controleurB.getControlelastValue();
}
if (controlelastValue !== null) {
if (controlelastValue > 0)
$('#userinputdiv' + player).append('<span style="color:blue;">' + val + '</span> ');
else
$('#userinputdiv' + player).append('<span style="color:orange;">' + val + '</span> ');
} else {
$('#userinputdiv' + player).append(val + ' ');
}
} else {
$('#userinputdiv' + player).append(val + ' ');
}
if (player === "A") {
controleurA.majIndices('A');
if (res && controleurA.global.reponses.length > 0) {
updateGaugesVal('playerA', getNbreBonnesReponses(controleurA.global.reponses) * 100 / (controleurA.global.reponses.length));
}
} else {
controleurB.majIndices('B');
if (res && controleurB.global.reponses.length > 0) {
updateGaugesVal('playerB', getNbreBonnesReponses(controleurB.global.reponses) * 100 / (controleurB.global.reponses.length));
}
}
if (nbreSaisis === limitGame) {
$("#propositionPanel" + player).show();
$(".btnbre").hide();
$("#userinput" + player).hide();
$('#userinputdiv' + player).show();
$("#computerplayer").hide();
//$('body').off('keydown');
}
if (player === "A" && playerB === "computer") {
insertVal(getCharAleatoire(), 'B');
}
}
}
function reset() {
controleurA.resetApi();
controleurB.resetApi();
$("input[name!=vs]").each(function () {
$(this).val("");
});
$("textarea").each(function () {
$(this).val("");
});
$("#propositionPanelA").hide();
$("#propositionPanelB").hide();
$(".btnbre").show();
$("#userinputA").show();
$("#userinputdivA").html("");
$("#userinputdivA").hide();
$("#userinputB").show();
$("#userinputdivB").html("");
$("#userinputdivB").hide();
$('body').off('keydown');
//$('body').on('keydown', trigKeyDownInit);
$("#gamediv").hide();
$("#playerdiv").show();
$("#nameplayerB").hide();
$("input[name=vs][value=computer]").prop('checked', true);
$("#computerplayer").hide();
updateGaugesVal('playerA', 0);
updateGaugesVal('playerB', 0);
}
function startGame() {
if ($("#nameplayerA").val() && $("#nameplayerA").val().length > 0) {
$(".panel-warning > .panel-heading").html($("#nameplayerA").val());
} else
$(".panel-warning > .panel-heading").html("Player A");
var vs = $('input[name=vs]:checked').val();
if (vs === "computer") {
$(".panel-success > .panel-heading").html("Computer");
$(".panel-success button").hide();
playerB = "computer";
$("#computerplayer").show();
} else {
playerB = "player";
if ($("#nameplayerB").val() && $("#nameplayerB").val().length > 0) {
$(".panel-success > .panel-heading").html($("#nameplayerB").val());
} else {
$(".panel-success > .panel-heading").html("Player B");
}
$(".panel-success button").show();
$("#computerplayer").hide();
}
$("#gamediv").show();
$("#playerdiv").hide();
$('body').on('keydown', trigKeyDownInit);
}
</script>
<script src="../js/main.js"></script>
</body>
</html>
<!DOCTYPE html>
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>@lea</title>
<meta name="author" content="Marion CHARDON for ESC/RISET - University of Lausanne" />
<meta name="description" content="Free Web tool for guess data" />
<meta name="keywords" content="Cipher, Bigdata, Guess" />
<meta charset="UTF-8" />
<link rel="stylesheet" href="js/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="js/bootstrap/dashboard.css" />
<link rel="stylesheet" href="js/bootstrap/font-awesome.min.css" />
<link rel="stylesheet" href="js/bootstrap/logo_unil.css" />
<link rel="stylesheet" href="../css/main.css" />
<script src="js/jquery/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="../index.html"><img src="../img/g3761.png" alt="" style="height:28px;display: inline;"/>Cryptex - @lea</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="help.html">Help</a></li>
</ul>
</div>
</div>
</nav>
<div class="container" style="margin-bottom: 70px; margin-top: 20px;">
<div class="row">
<div class="col-sm-3">
<ul class="nav nav-pills nav-stacked">
<li><a href="index.html">Step 1: test your sequence</a></li>
<li><a href="pasapas.html">Step 2: test the computeur</a></li>
<li><a href="understand.html">Step 3: understand</a></li>
<li><a href="games.html">Game</a></li>
</ul>
</div>
<div class="col-sm-9" style="padding-left: 20px;">
<p>
Randomness is a mathematical notion that is used in many
modern life area. It is use in the form of a random sequence
in geolocalisation system, automatic gambling games, cryptology
and others. The mathematical definition of a ransom sequence
is still going under discussions, but certain properties
have been demonstrated and an agreement was found around three approaches:
</p>
<ul>
<li>The frequency, measure-theoretic approach (Martin-Löf, 1966) (No random sequence should have exceptional regularity or be effectively testable).</li>
<li>The complexity, compressibility approach (Chaitin 1975) (A random sequence should be incompressible)</li>
<li>The predictability approach (Schnorr 1971) (A random sequence should be unpredictable)</li>
</ul>
<p>
From there, no random sequence can be generated from an
algorithm. If so, the sequence will be considered as pseudorandom
and its level of randomness will depend from the context.
</p>
<p>
The sources of randomness can be separated into three
categories: unpredictable (dices, random sorting,…),
physical (radioactivity, electromagnetism,…), computational
(mix of physic and algorithms).
</p>
<p>
Another potential way is the human brain. Human decision
have been showed to be influenced by bias, but few studies
have been made on the human capacity to produce a random
sequence. To do so, the experience will ask the user
to write a sequence of numbers and to play with it,
the aim being to fool the computer.
</p>
</div>
</div>
</div>
<div id="contacts" class="modal fade" role="dialog"></div>
<div id="credits" class="modal fade" role="dialog"></div>