manastungare · May 7, 2012 02:15
diff --git a/stroop.css b/stroop.css
 * {
  font-family: Helvetica, sans-serif;
  box-sizing: border-box;
 }

 body {
  height: 100%;
  background-color: black;
  color: white;
 }

 #startstop,
 input {
  font-size: 36pt;
 }

 #startstop,
 #content {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: block;
  vertical-align: middle;
  text-align: center;
 }

 #start {
  font-size: 48pt;
  border: 3px solid silver;
  border-radius: 12px;
  -moz-border-radius: 12px;
  -webkit-border-radius: 12px;
  padding: 24px;
  cursor: pointer;
 }

 #content {
  padding: 2in;
  cursor: pointer;
  font-size: 120pt;
  font-weight: bold;
 }

 #credit {
  font-size: 10pt;
  position: absolute;
  bottom: 24px;
  width: 100%;
 }

 #credit a,
 #credit a:hover,
 #credit a:link,
 #credit a:active {
  color: white;
  text-decoration: none;
 }

 a.credit:hover {
  text-decoration: underline;
 }
diff --git a/stroop.html b/stroop.html
 <!DOCTYPE html>
 <html>
  <head>
    <title>Stroop Task</title>
    <link rel="stylesheet" href="stroop.css">
  </head>
  <body>
    <div id="startstop">
      <form>
        <p>Repeat <input size="5" type="text" name="maxCount" value="30" id="maxCount"/> times.</p>
        <p>Change every <input size="5" type="text" name="intervalMillisec" value="750" id="intervalMillisec"/> milliseconds.</p>
        <p><input id="start" type="button" value="Start"/>
      </form>
      <div id="credit"><a href="http://manas.tungare.name">Script by Manas Tungare</a></div>
    </div>
    <div id="content"></div>
  </body>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script src="stroop.js"></script>
 </html>
diff --git a/stroop.js b/stroop.js
 /**
 * Stroop Task Script
 * Copyright (c) 2009, Manas Tungare.
 * Licensed under the Creative Commons Attribution Non-commercial Share-Alike license 3.0
 * You retain the freedom to examine and modify this script, subject to the condition
 * that you must attribute it to the original author, and all modifications must be
 * shared under the same license.
 *
 * Thanks to the jQuery developers for sharing their library for public use!
 */

 // All colors in this list should be HTML colors.
 // http://en.wikipedia.org/wiki/Web_colors
 var COLORS = new Array(
  "red",
  "blue",
  "green",
  "yellow",
  "white",
  "pink",
  "brown",
  "orange",
  "purple",
  "gray"
 );

 // Text can be anything.
 var TEXT = new Array(
  "RED",
  "BLUE",
  "GREEN",
  "YELLOW",
  "WHITE",
  "PINK",
  "BROWN",
  "ORANGE",
  "PURPLE",
  "GRAY"
 );

 var countSoFar = 0;
 var maxCount = 0;
 var intervalMillisec = 0;
 var timeoutId;

 var lastColorIndex = -1;
 var lastTextIndex = -1;

 $(document).ready(function(){
  $('#start').click(start);
  $('#content').click(reset);
  $('#content').hide();
 });

 function start() {
  maxCount = $('#maxCount').val();
  intervalMillisec = $('#intervalMillisec').val();
  $('#content').show();
  $('#startstop').hide();
  next();
 }

 function next() {
  countSoFar++;

  // Do not repeat last color.
  var colorIndex = Math.floor(COLORS.length * Math.random());
  while (colorIndex == lastColorIndex) {
    colorIndex = Math.floor(COLORS.length * Math.random());
  }

  // Do not repeat last text.
  var textIndex = Math.floor(TEXT.length * Math.random());
  while (textIndex == lastTextIndex) {
    textIndex = Math.floor(TEXT.length * Math.random());
  }

  $('#content').css('color', COLORS[colorIndex]);
  $('#content').html(TEXT[textIndex]);

  // Save these values globally so they aren't repeated next time.
  var lastColorIndex = colorIndex;
  var lastTextIndex = textIndex;

  if (countSoFar <= maxCount) {
    timeoutId = window.setTimeout(next, intervalMillisec);
  } else {
    end();
  }
 }

 function end() {
  $('#content').html("");
 }

 function reset() {
  $('#content').hide();
  $('#startstop').show();
  countSoFar = 0;
  clearTimeout(timeoutId);
 }
	* {
	font-family: Helvetica, sans-serif;
	box-sizing: border-box;
	}

	body {
	height: 100%;
	background-color: black;
	color: white;
	}

	#startstop,
	input {
	font-size: 36pt;
	}

	#startstop,
	#content {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	display: block;
	vertical-align: middle;
	text-align: center;
	}

	#start {
	font-size: 48pt;
	border: 3px solid silver;
	border-radius: 12px;
	-moz-border-radius: 12px;
	-webkit-border-radius: 12px;
	padding: 24px;
	cursor: pointer;
	}

	#content {
	padding: 2in;
	cursor: pointer;
	font-size: 120pt;
	font-weight: bold;
	}

	#credit {
	font-size: 10pt;
	position: absolute;
	bottom: 24px;
	width: 100%;
	}

	#credit a,
	#credit a:hover,
	#credit a:link,
	#credit a:active {
	color: white;
	text-decoration: none;
	}

	a.credit:hover {
	text-decoration: underline;
	}
	<!DOCTYPE html>
	<html>
	<head>
	<title>Stroop Task</title>
	<link rel="stylesheet" href="stroop.css">
	</head>
	<body>
	<div id="startstop">
	<form>
	<p>Repeat <input size="5" type="text" name="maxCount" value="30" id="maxCount"/> times.</p>
	<p>Change every <input size="5" type="text" name="intervalMillisec" value="750" id="intervalMillisec"/> milliseconds.</p>
	<p><input id="start" type="button" value="Start"/>
	</form>
	<div id="credit"><a href="http://manas.tungare.name">Script by Manas Tungare</a></div>
	</div>
	<div id="content"></div>
	</body>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script src="stroop.js"></script>
	</html>
	/**
	* Stroop Task Script
	* Copyright (c) 2009, Manas Tungare.
	* Licensed under the Creative Commons Attribution Non-commercial Share-Alike license 3.0
	* You retain the freedom to examine and modify this script, subject to the condition
	* that you must attribute it to the original author, and all modifications must be
	* shared under the same license.
	*
	* Thanks to the jQuery developers for sharing their library for public use!
	*/

	// All colors in this list should be HTML colors.
	// http://en.wikipedia.org/wiki/Web_colors
	var COLORS = new Array(
	"red",
	"blue",
	"green",
	"yellow",
	"white",
	"pink",
	"brown",
	"orange",
	"purple",
	"gray"
	);

	// Text can be anything.
	var TEXT = new Array(
	"RED",
	"BLUE",
	"GREEN",
	"YELLOW",
	"WHITE",
	"PINK",
	"BROWN",
	"ORANGE",
	"PURPLE",
	"GRAY"
	);

	var countSoFar = 0;
	var maxCount = 0;
	var intervalMillisec = 0;
	var timeoutId;

	var lastColorIndex = -1;
	var lastTextIndex = -1;

	$(document).ready(function(){
	$('#start').click(start);
	$('#content').click(reset);
	$('#content').hide();
	});

	function start() {
	maxCount = $('#maxCount').val();
	intervalMillisec = $('#intervalMillisec').val();
	$('#content').show();
	$('#startstop').hide();
	next();
	}

	function next() {
	countSoFar++;

	// Do not repeat last color.
	var colorIndex = Math.floor(COLORS.length * Math.random());
	while (colorIndex == lastColorIndex) {
	colorIndex = Math.floor(COLORS.length * Math.random());
	}

	// Do not repeat last text.
	var textIndex = Math.floor(TEXT.length * Math.random());
	while (textIndex == lastTextIndex) {
	textIndex = Math.floor(TEXT.length * Math.random());
	}

	$('#content').css('color', COLORS[colorIndex]);
	$('#content').html(TEXT[textIndex]);

	// Save these values globally so they aren't repeated next time.
	var lastColorIndex = colorIndex;
	var lastTextIndex = textIndex;

	if (countSoFar <= maxCount) {
	timeoutId = window.setTimeout(next, intervalMillisec);
	} else {
	end();
	}
	}

	function end() {
	$('#content').html("");
	}

	function reset() {
	$('#content').hide();
	$('#startstop').show();
	countSoFar = 0;
	clearTimeout(timeoutId);
	}