Nov 9 In-Class Exercise Thread .
Please post your solutions to the Nov 9 In-Class Exercise to this thread.
Best,
Chris
<!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>
<!Doctype 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>
<!doctype html> <html> <head> <title>Stroop</title> </head> <body> <div id="greenDiv" style="color: red; font-size: 32pt; position: absolute; top: 1in" onClick="move();"><p>Green!</p></div> <script> function move() { element = document.getElementById('greenDiv'); element.style.top = 0.25 + 'in'; element.style.color = "green"; setTimeout(()=> { element.style.color = "red"; element.style.top = 1 + 'in'; }, 5000); } </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Stroop</title> </head> <body> <div id="text" onclick="doTheThing()" style="font-size:32pt;color:red;position:absolute;top:1in;">Green!</div> </body> <script type="text/javascript"> function doTheThing() { text = document.getElementById('text') text.style.color = 'green' text.style.top = '.25in' console.log(text.style.top) setTimeout(() => { text.style.color = "red" text.style.top = "1in" }, 5000) } </script> </html>
<!Doctype html>
<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>
<!DOCTYPE html> <html lang="en">
<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>
<!DOCTYPE html> <html lang="en-US">
<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>
<!Doctype html> <head>
<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>