Common Activities Generator I

Pulls a random activity out of an array. For use in the classroom, to help with switching up role play scenarios.

by djwelsh

HTML

<div id="cont">
    <div id="action"></div>
</div>

CSS

#cont {
    width: 720px;
    height: 200px;
    outline: 1px dashed #ccc;
    font: 4em arial;
    text-align: center;
    margin: 40px auto;
    background-color: white;
    line-height: 200px;
}

JavaScript

var actions = [
    'play basketball',
    'go running',
    'go swimming',
    'play soccer',
    'go bike riding',
    'do aerobics',
    'play golf',
    'go dancing',
    'go walking',
    'take a shower',
    'cook dinner',
    'clean the house',
    'go shopping',
    'study English',
    'play tennis',
    'go to the movies',
    'go get some food',
    'talk on the phone',
    'watch TV',
    'exercise',
    'take a nap',
    'listen to music',
    'go to a concert',
    'go out for dinner',
    'read the newspaper',
    'read a book',
    'check e-mail',
    'go to a hot spring',
    'drink with your boss',
    'talk to customers'
];


//Values we use for timeouts
var toVals = [10, 15, 20, 25, 30, 40, 50, 60, 80, 100, 120, 150, 180, 220, 260];

var cont = document.getElementById('cont');
cont.onclick = function (event) {
    if (!event) event = window.event;

    //Kill any current timeouts and start afresh if it is already in motion.
    if (timer) {
        clearTimeout(timer);
        currentToVal = -1;
    }
    //Start the motion
    actions = shuffleArray(actions);
    
    flip();

}

var timer = null;
var currentToVal = -1;

function flip() {
    currentToVal++;
    //If there are no more toVals we have reached the last interval.
    if (!toVals[currentToVal]) {
        currentToVal = -1;
        timer = null;
    }
    //Otherwise call the timeout again with the next timeout value from toVals.
    else {
        timer = setTimeout(function () {
            flip();
        }, toVals[currentToVal]);
        document.getElementById('action').innerHTML = actions[currentToVal % actions.length];
    }
}

/**
 * Randomize array element order in-place.
 * Using Fisher-Yates shuffle algorithm.
 * http://stackoverflow.com/a/12646864
 */
function shuffleArray(array) {
    for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
    }
...