JavaScript/Stroop effect

A stroop effect can be generated in JavaScript by appending random words with random colors, which are picked from an array. The length of the array is detected automatically. Some colors have to be omitted due to poor readability.

Before each word is inserted, the color and the word is compared to prevent the addition of the word with the same color. In case of a match, the word and color are shuffled again.

The function that generates the effect lets the user specify how many words should be added, and a button can regenerate the words.

Since it is not possible to generate a stroop effect on the client side without JavaScript, a message in the stroop container instructs the user to activate JavaScript. If necessary, a stroop effect can initially be generated on the server side using similar code as below.

Code

edit
<!DOCTYPE html>
<html>
<head>
	<title>Stroop effect generator</title>
	<meta name="author" content="Elominius from Wikiversity">
	<style type="text/css">
		body { font-family: ubuntu,'noto sans','open sans', calibri, 'segoe ui', 'trebuchet ms', arial, helvetica, verdana, tahoma, 'Bitstream Vera Sans', 'sans-serif'; }
		stroop > span { margin-right: 0.5em; }
	</style>
</head>

<body>

<button class="stroop_run" onclick="stroop.reset(0); stroop.fn(100);">Generate stroop effect</button>

<div><stroop>
<noscript>
<h2>JavaScript is unavailable</h2>
To generate a stroop effect, please activate JavaScript or use a browser that supports it.</noscript>

</stroop></div>

<script type="text/javascript">
var stroop = {}; // create data object

stroop.container = document.getElementsByTagName("stroop");

stroop.colors = ['red', 'green', 'blue', 'purple', 'orange', 'black' ];
// omitting yellow and pink due to poor visibility

stroop.words = ['red', 'green', 'blue', 'purple', 'orange', 'black', 'yellow', 'pink' ];

stroop.append = function(color_word,color,container_number) {
	if (!container_number) container_number=0; // default container
	stroop.container[container_number].innerHTML += ' <span style="color:'+color+';">'+color_word+'</span>';
};

stroop.reset = function(container_number) {
	if (!container_number) container_number=0; // default container
	stroop.container[container_number].innerHTML = null;
};

stroop.fn /* main function */ = function(repetitions,container_number) {
	if (!container_number) container_number=0; // default container
	if (!repetitions) return false; // don't run if no repetitions specified
	var count; // defeats JSHint "undefined variable" error; no functional difference.
	for (
		count=0; // initialize counter
		count < repetitions; // stop repeating when number of repetitions is reached
		count++ // count up. Same as count=count+1 and count+=1 .
	) {
		stroop.next_word = ""; stroop.next_color = ""; // reset to enter "while" loop
		while(stroop.next_word == stroop.next_color) { 
			/* prevent the word being same as the color by picking random colours until they don't match */
			stroop.next_word = stroop.words[Math.floor(Math.random()*(stroop.words.length))];
			stroop.next_color = stroop.colors[Math.floor(Math.random()*(stroop.colors.length))];
		}
		stroop.append(stroop.next_word,stroop.next_color);
	}
};

stroop.fn(100); // run once automatically
</script>

</body>

</html>


Dark background

edit

To make the words appear readable on dark backgrounds, alternative colors with a higher contrast need to be picked.

<!DOCTYPE html>
<html>
<head>
	<title>Stroop effect generator</title>
	<meta name="author" content="Elominius from Wikiversity">
	<style type="text/css">
		body { background-color: #222; font-family: ubuntu,'noto sans','open sans', calibri, 'segoe ui', 'trebuchet ms', arial, helvetica, verdana, tahoma, 'Bitstream Vera Sans', 'sans-serif'; }
		stroop > span { margin-right: 0.5em; }
	</style>
</head>

<body>

<button class="stroop_run" onclick="stroop.reset(0); stroop.fn(100);">Generate stroop effect</button>

<div><stroop>
<noscript>
<h2>JavaScript is unavailable</h2>
To generate a stroop effect, please activate JavaScript or use a browser that supports it.</noscript>

</stroop></div>

<script type="text/javascript">
var stroop = {}; // create data object

stroop.container = document.getElementsByTagName("stroop");

stroop.colors = ['red', 'lightgreen'/*green*/, '#38F'/*blue*/, 'orange', 'yellow', 'magenta'/*pink*/, 'white', ];
// omitting black and blue and purple due to poor visibility

stroop.words = ['red', 'green', 'blue', 'purple', 'orange', 'black', 'yellow', 'pink', 'white' ];

stroop.append = function(color_word,color,container_number) {
	if (!container_number) container_number=0; // default container
	stroop.container[container_number].innerHTML += ' <span style="color:'+color+';">'+color_word+'</span>';
};

stroop.reset = function(container_number) {
	if (!container_number) container_number=0; // default container
	stroop.container[container_number].innerHTML = null;
};

stroop.fn /* main function */ = function(repetitions,container_number) {
	if (!container_number) container_number=0; // default container
	if (!repetitions) return false; // don't run if no repetitions specified
	var count; // defeats JSHint "undefined variable" error; no functional difference.
	for (
		count=0; // initialize counter
		count < repetitions; // stop repeating when number of repetitions is reached
		count++ // count up. Same as count=count+1 and count+=1 .
	) {
		stroop.next_word = ""; stroop.next_color = ""; // reset to enter "while" loop
		while(stroop.next_word == stroop.next_color) { 
			/* prevent the word being same as the color by picking random colours until they don't match */
			stroop.next_word = stroop.words[Math.floor(Math.random()*(stroop.words.length))];
			stroop.next_color = stroop.colors[Math.floor(Math.random()*(stroop.colors.length))];
		}
		stroop.append(stroop.next_word,stroop.next_color);
	}
};

stroop.fn(100); // run once automatically
</script>

</body>

</html>