JSFiddle - React, Tailwind, and code Playground
by Emile
HTML
<html>
<head>
<title>Bayes for the Win!</title>
<style type="text/css">
#id1 {
font-size : 2em;
color : red;
}
.class1 { color : blue; }
.bar {
height: 80px;
display: inline-block;
margin: 0px;
padding: 0px;
border: 0px;
}
.inline_block {
display: inline-block;
}
.clickable {
cursor:col-resize
}
.mid {
width: 5px;
}
.blackbg {
background-color: black;
}
.bluebg {
background-color: blue;
}
.greybg {
background-color: grey;
}
.whitebg {
background-color: white;
}
.orangebg {
background-color: orange;
}
.purplebg {
background-color: purple;
}
.blackborder {
border-color: black;
}
.orangeborder {
border-color: orange;
}
.purpleborder {
border-color: purple;
}
.probabar {
border-style: solid;
border-width: 10px;
height: 80px;
width: 205px;
margin: 0;
padding: 0;
}
.vtop {
vertical-align: top;
}
.unselectable {
-webkit-user-select: none; /* Safari, Chrome */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE */
user-select: none; /* CSS3 */
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
var g_mousedown = false;
var g_use_percentage = true;
var g_proba_o = 0.3;
var g_proba_b_o = 0.5;
var g_proba_b_no = 0.9;
var g_proba_b = -1;
function refresh()
{
g_use_percentage = $("#percentages_check").is(':checked');
g_proba_b = g_proba_o * g_proba_b_o + (1.0 - g_proba_o) * g_proba_b_no;
//alert(g_proba_o);
set_proba("#box_o", g_proba_o);
set_proba("#box_b_o", g_proba_b_o);
set_proba("#box_b_no", g_proba_b_no);
set_proba("#box_b", g_proba_b);
}
function format_proba(proba)
{
if...