JavaScript/Stroop effect
Jump to navigation
Jump to search
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 | edit source]
<!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 | edit source]
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>