<!Doctype html> <html> <head> <title>Stroop</title> </head> <body> <div id="green" style="position: absolute; top: 1in; color:red; font- size:32pt;" onclick="animateGreen();"> <p>Green!</p> </div> <script> function animateGreen(){ element = document.getElementById("green"); element.style.color = "green"; element.style.top = "0.25in"; setTimeout(() => { element.style.color = "red"; element.style.top = "1in"; }, 5000) } </script> </body> </html>
<!DOCTYPE html> <html lang="en-US"> <head> <title>Stroop</title> <meta charset="utf-8" /> <style> #text { position: absolute; font-size: 32pt; color: red; top: 0.75in; } </style> <script> const handleClick = () => { let textStyle = document.getElementById("text").style; textStyle.top = "0in"; textStyle.color = "green"; setTimeout(() => { textStyle.top = "0.75in"; textStyle.color = "red"; }, 5000); }; </script> </head> <body> <div id="text" onclick="handleClick()">Green!</div> </body> </html>
<html> <head> <title>Stroop</title> </head> <body> <div id="green" style="position: absolute; top: 2in; color:red; font-size:32pt;" onclick="turnGreen();"> <p>Green!</p> </div> <script> function turnGreen(){ text = document.getElementById("green"); text.style.top = "1.25in"; text.style.color = "green"; setTimeout(() => { text.style.top = "2in"; text.style.color = "red"; }, 5000) } </script> </body> </html>
Green!
<html> <head> <title>Stroop</title> </head> <body> <div id="text" style="position: absolute; top: 20px; color:red; font-size:32pt;" onclick="change();"> <p>Green!</p> </div> <script> function change(){ data = document.getElementById("text"); data.style.top = "1.25in"; data.style.color = "green"; setTimeout(() => { data.style.top = "2in"; data.style.color = "red"; }, 5000) } </script> </body> </html>
<head> <meta charset="utf-8"> <title>Stroop</title> </head> <body> <div id="green_div" style="top:1in; color:red; font-size:32pt; position:absolute;" onclick="animateDiv();">Green!</div> <script> function animateDiv(){ greenDiv = document.getElementById('green_div'); let currentVal = greenDiv.style.top.match(/\d/); newPosition = currentVal - 0.75; greenDiv.style.top = newPosition + "in"; greenDiv.style.color = "green"; setTimeout(() => { greenDiv.style.top = currentVal+"in"; greenDiv.style.color = "red"; }, 5000) } </script> </body></html>
<head> <title>Stroop</title> <meta charset="utf-8"> </head> <body> <div id="word" style="font-size:32pt; color:red; top:1in; position:absolute;" onclick='stroopEffect("word", 0.75)'>Green!</div> <script> function stroopEffect(id, displacement) { myStyle = document.getElementById(id).style; myStyle.color = "green"; let ogTop = myStyle.top.split("in")[0]; myStyle.top = parseFloat(ogTop) - displacement + "in"; setTimeout(() => { myStyle.color = "red"; let newTop = myStyle.top.split("in")[0]; myStyle.top = parseFloat(newTop) + displacement + "in"; }, 5000) } </script> </body></html>
<title>Stroop</title></head> <body>
<div id="green" style="color: red;font: size 32in; position: absolute; top:1in;" onclick="shift()"> <p>Green</p> </div> <script> function shift(){ elem = document.getElementById("green") elem.style.top="0.25in" elem.style.color="green" setTimeout(() => { elem.style.color = "red" elem.style.top = "1in" }, 5000) } </script></body> <html>