Check Splitter

by dchudz

HTML

<h1> Check "Splitter"</h1>

<p>Everyone gets a bit of the interval proportional to the amount they owe. Each coin flip eliminates half the portion of the interval that's left. I can flip for you, or you can use your own coin by pressing the left/right buttons to eliminate half the interval that's left. Once the remaining interval only overlaps with one person, we know who pays.</p>
<p>This illustrates using coin flips to choose a point uniformly from an interval. You never know your chosen point exactly, but you can know it to arbitrary precision. (Each coin flip halves the range.)
    <div id="form">
        <div>
            <input id="name1" value="Person 1" type="text" />
            <input id="amount1" value="10" type="text" />
        </div>
        <div>
            <input id="name2" value="Person 2" type="text" />
            <input id="amount2" value="20" type="text" />
        </div>
        <div>
            <input id="name3" value="Person 3" type="text" />
            <input id="amount3" value="10" type="text" />
        </div>
        <div>
            <input id="name4" value="Person 4" type="text" />
            <input id="amount4" value="25" type="text" />
        </div>
    </div>
    <div>
        <button id="addPerson">Add Another Person</button>
    </div>
    <div>
        <button id="amountsReady">Reset</button>
    </div>
    <div id="buttons">
        <button id="butt">Flip until we know who pays!</button>
    </div>
    <div>
        <p>We don't trust you so we want to flip our own coin:</p>
        <button id="left">Left</button>
        <button id="right">Right</button>
    </div>
    <div>
        <div id="blackbar"></div>
        <div id="colorline"></div>
        <div id="names"></div>
    </div>
<b id="payer"></b>

JavaScript

numPeople = 4;

function ready() {
    low = 0;
    high = 1;
    targets = {};
    total = 0;
    $("#blackbar").empty();
    blackbar(low, high);
    $("#colorline").empty();
    $("#names").empty();
    for (i = 1; i <= numPeople; i++) {
        amount = $("#amount" + i).val();
        total += parseFloat(amount);
    }
    for (i = 1; i <= numPeople; i++) {
        amount = $("#amount" + i).val();
        targets[($("#name" + i).val())] = 100 * amount / total;
    }
    console.log(targets);
    genTargets();
    $("#payer").html("");

}

$("#amountsReady").click(ready);

$("#addPerson").click(function () {
    numPeople += 1;
    $("#form").append($('<div><input id="name' + numPeople + '" value="Person ' + numPeople + '" type="text" /><input id="amount' + numPeople + '"  value="10" type="text" /></div>'));
    ready();
});


function blackbar(low, high) {

    var lower = low * 100 + '%';
    var middle = (high - low) * 100 + '%';
    var higher = 100 - high * 100 + '%';

    $("#blackbar").append($('<span class="widme">&nbsp</span>').css("width", lower).css("float", "left").css("background-color", "white"));
    $("#blackbar").append($('<span class="widme">&nbsp</span>').css("width", middle).css("float", "left").css("background-color", "black"));
    $("#blackbar").append($('<span class="widme">&nbsp</span>').css("width", higher).css("float", "left").css("background-color", "white"));

}

function genTargets() {
    for (var target in targets) {
        $("#colorline").append($('<span class="widme" id="' + target + '">&nbsp</span>').css("width", '' + targets[target] + '%').css("float", "left").css("background-color", rColor()));
        $("#names").append($("<span>" + target + "</span>").css("width", '' + targets[target] + '%').css("float", "left"));

    }
}

function rColor() {
    var alphabet = '0123456789ABCDEF'.split('');
    return '#' + alphabet[Math.round(Math.random() * 15)] + alphabet[Math.round(Math.random() * 15)] +...