This

Page for experiment

by Jason Sprinkle

HTML

<div id="card_area">
    <div id="card1">
        <p class="shadow 1"></p>
        <p class="shadow 2"></p>
        <p class="shadow 3"></p>
        <p>Card 1</p>
    </div>
    <div id="card2">
        <p class="shadow 1"></p>
        <p class="shadow 2"></p>
        <p class="shadow 3"></p>
        <p>Card 2</p>
    </div>
</div>
<div class="token 1">
    <p>1</p>
</div>
<div class="token 2">
    <p>2</p>
</div>
<div class="token 3">
    <p>3</p>
</div>
<div id="number_area">
    <p class="fading 1"><u>2</u>

    </p>
    <p class="fading 2">x</p>
    <p class="fading 2"><u>2</u>

    </p>
    <p class="fading 3">x</p>
    <p class="fading 3"><u>2</u>

    </p>
    <p class="fading 4">=</p>
    <p class="fading 4">8</p>
</div>
<ul>
    <li>There are two card options for the first token.</li>
    <li class="expl 2">For <b>each</b> of the previous possibilities, we have two options for the second token. So we multipy the number of previous possible arrangements by two.</li>
    <li class="expl 3">Again, for <b>each</b> of the previous possibilities we have two options for the third token. So we multipey the number of previous possible arrangements by two.</li>
    <li class='expl 4'>Finally, we have eight possible outcomes, one of which was chosen by you!</li>
</ul>

CSS

#card_area {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}
#card1 {
    height: 150px;
    width: 75px;
    border: 3px solid #000;
    float: left;
    margin-bottom: 44px;
}
#card2 {
    height: 150px;
    width: 75px;
    border: 3px solid #000;
    float:right;
    margin-bottom: 44px;
}
.shadow {
    margin-left: 12.5px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px dotted #000;
}
.token {
    clear: both;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid #000;
    text-align: center;
    position: relative;
    cursor: pointer;
}
.token p {
    font-size: 25px;
    position: inherit;
    top: 26%;
}
#number_area {
    height: 30px;
    width: 60%;
    padding-top: 20px;
    margin-left: auto;
    margin-right: auto;
    font-size: 30px;
}
.fading {
    width: 14%;
    float: left;
    color: #cc66ff;
}
ul {
    list-style-type: circle;
    font-size: 20px;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
li {
    float: left;
    margin-top: 5px;
}
.hover {
    background-color: #cc66ff;
}

JavaScript

$(document).ready(function () {
    // renaming tokens, shadow tokens, parts of the equation and the last paragraph
    var token1 = $('.token.1');
    var token2 = $('.token.2');
    var token3 = $('.token.3');

    var shadow1 = $('.shadow.1');
    var shadow2 = $('.shadow.2');
    var shadow3 = $('.shadow.3');

    var fading1 = $('.fading.1');
    var fading2 = $('.fading.2');
    var fading3 = $('.fading.3');
    var fading4 = $('.fading.4');

    var expl2 = $('.expl.2');
    var expl3 = $('.expl.3');
    var expl4 = $('.expl.4');

    // hiding the mathematical equation and explanation
    $('.fading').css('visibility', 'hidden');
    $('.expl').css('visibility', 'hidden');

    // This makes the shadows droppable and tells the computer what to do once the numbered tokens are dropped in the shadow tokens
    $('.shadow.1, .shadow.2, .shadow.3').droppable({
        drop: function (event, ui) {
            i++;
            do_everything(i);
            $(this).append($(ui));
        },
        hoverClass: 'hover'
    });

    // This is a longwinded switch function. So depending on the value of n, certain tokens are draggable, certain shadow tokens are visable and droppable, and certain parts of the equation are visible 

    var i = 0;

    do_everything(0);

    function do_everything(n) {
        switch (n) {
            case 0:
                shadow1.css('visibility', 'hidden').droppable("disable");
                shadow2.css('visibility', 'hidden').droppable("disable");
                token1.draggable({
                    snap: '.shadow.3',
                    snapMode: 'inner',
                    snapTolerance: 25
                });
                fading1.css('visibility', 'visible');
                break;
            case 1:
                shadow2.css('visibility', 'visible').droppable("enable");
                shadow3.css('visibility', 'hidden').droppable("disable");
                token2.draggable({
                    snap: '.shadow.2',
...