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>
    </div>
    <div id="card2">
        <p class="shadow 1"></p>
        <p class="shadow 2"></p>
        <p class="shadow 3"></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 3">=</p>
    <p class="fading 3">8</p>
</div>

CSS

#explanation {
    width: 80%;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
    font-size: 20px;
}
#card_area {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
}
#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;
    margin-left: auto;
    margin-right: auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 3px solid #000;
    text-align: center;
    position: relative;
}
.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;
}
.hover {
    background-color: pink;
}
#multiplication {
    width: 80%;
    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    font-size: 20px;
}

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 part1 = $('.fading.1');
    var part2 = $('.fading.2');
    var part3 = $('.fading.3');

    var mult = $('#multiplication');

    // hiding the mathematical equation and mul
    $('.fading').css('visibility', 'hidden');
    mult.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) {
            event.preventDefault();
            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();
                break;
            case 1:
                shadow2.css('visibility', 'visible').droppable("enable");
                shadow3.css('visibility', 'hidden').droppable("disable");
                token2.draggable().animate({
                    top: "-=44px"
                });
                token3.animate({
                    top: "-=44px"
                });
                part1.css('visibility', 'visible');
                break;
            case 2:
                shadow1.css('visibility',...