Yioop - PHP Search Engine

Nov 9 In-Class Exercise Thread.

Please post your solutions to the Nov 9 In-Class Exercise to this thread.

Best,

Chris

Please post your solutions to the Nov 9 In-Class Exercise to this thread. Best, Chris

-- Nov 9 In-Class Exercise Thread

 <!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> <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>

-- Nov 9 In-Class Exercise Thread

 <!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 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>

-- Nov 9 In-Class Exercise Thread

<!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="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>

-- Nov 9 In-Class Exercise Thread

Stroop

Green!

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); }

<nowiki><!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></nowiki>

-- Nov 9 In-Class Exercise Thread

Stroop

Green!

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) }

<nowiki> <!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> </nowiki>

-- Nov 9 In-Class Exercise Thread

<!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> <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>

-- Nov 9 In-Class Exercise Thread

<!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"> <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>

-- Nov 9 In-Class Exercise Thread

<!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> <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>

-- Nov 9 In-Class Exercise Thread

<!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>

<!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>