Daily Activities Generator

Pulls a random activity and time 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="date"></div>
    <div id="time"></div>
</div>

CSS

#cont {
    width: 720px;
    height: 200px;
    outline: 1px dashed #ccc;
    font: 4em arial;
    text-align: center;
    margin: 100px auto;
    background-color: white;
    line-height: 100px;
}
#action {
    color: #333;
    cursor: none;
}
#time {
    color: #3333cc;
    cursor: none;
}

JavaScript

var dates = [
    'Sunday',
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Friday',
    'Saturday'];

var times = [];
var timewords = [
    'at #pm',
    'at #am',
    'at about #',
    'at around #pm',
    'at around #am'];

for (var i = 0; i < 15; i++) {
    var newtime = timewords[Math.floor(Math.random() * timewords.length)];
    var newh = Math.floor(Math.random() * 11) + 1;
    var newm = (5 * Math.round(Math.random() * 59 / 5));
    newm += '';
    if (newm.length == 1) newm = '0' + newm;
    times[i] = newtime.replace('#', newh+':'+newm);
}

//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
    dates = shuffleArray(dates);
    times = shuffleArray(times);

    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('date').innerHTML = dates[currentToVal % dates.length];
        document.getElementById('time').innerHTML = times[currentToVal % times.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];
 ...