Random Topic Generator
For conversation
by djwelsh
HTML
<div id="cont">
<div id="words"></div>
</div>
CSS
#cont {
width: 1160px;
height: 400px;
outline: 1px dashed #ccc;
font: 5.4em arial;
text-align: center;
margin: 40px auto;
background-color: white;
line-height: 400px;
cursor: none;
}
JavaScript
var words_original = [
'the current trip',
'past trips',
'future travel plans',
'the price of travel',
'airport security',
'recent weather',
'climate change',
'pollution',
'favorite weather',
'young people\'s behaviour',
'recent news stories',
'crime and punishment'
];
var words_garbled = [
'o0O0o0O0o0O0o',
'0O0o0O0O0o0O0',
'O0o0O0o0O0o0O',
'0o0O0o0o0O0o0',
'o0O0o0O0o0O0o',
'0O0o0O0O0o0O0',
'O0o0O0o0O0o0O',
'0o0O0o0o0O0o0',
'o0O0o0O0o0O0o',
'0O0o0O0O0o0O0',
'O0o0O0o0O0o0O',
'0o0O0o0o0O0o0'
];
var words = words_original.slice(0);
var ctr = 0;
//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
words = shuffleArray(words);
flip();
}
var timer = null;
var currentToVal = -1;
var currentNum = 0;
var checker = 0;
function flip() {
currentToVal++;
//If there are no more toVals we have reached the last interval.
if (!toVals[currentToVal]) {
var words2 = [];
for (var n = 0; n < words.length; n++) {
if (words[n] != currentNum) words2.push(words[n]);
}
words = words2;
currentToVal = -1;
timer = null;
if (ctr < words.length) {
document.getElementById('words').innerHTML = words_original[ctr];
ctr++;
}
}
//Otherwise call the timeout again with the next timeout value from toVals.
else {
timer = setTimeout(function () {
flip();
}, toVals[currentToVal]);
currentNum = words_garbled[currentToVal % words.length];
checker = words[currentToVal %...