Added updated version of html visual targets

chrplr · Mar 12, 2024 · 9faff54 · 9faff54
1 parent 03ebb95
commit 9faff54
Show file tree

Hide file tree

Showing 15 changed files with 830 additions and 5 deletions.
diff --git a/docs/html-visual.rst b/docs/html-visual.rst
diff --git a/docs/index.rst b/docs/index.rst
@@ -10,8 +10,7 @@ Git repository on github (contains slides, solutions to exercices, and more)
 Discord (discussion forum)
   https://discord.gg/WEQWWmqZ
 
-
-Self-evaluation quizz (do you need to attend PROG101?): 
+Self-evaluation quizz (do you need to attend PROG101?):
   https://forms.gle/iq7CN41DZMA6XJC59
 
 .. toctree::
@@ -34,8 +33,9 @@ Self-evaluation quizz (do you need to attend PROG101?):
    lexical-decision
    data-analyses
    web-based-experiments
+   html-visual
    regular_expressions
-   simulations          
+   simulations
    hopfield
    web-scraping
    tools-for-reproducible-science
@@ -47,5 +47,3 @@ Self-evaluation quizz (do you need to attend PROG101?):
    cogmaster-lectures
    projects
    resources
-
-
diff --git a/stimuli/html-and-js/Illusions/kanisza-square.html b/stimuli/html-and-js/Illusions/kanisza-square.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<head>
+  <title>Kanisza square</title>
+  <link rel="stylesheet" href ="./shapes.css"></link>
+</head>
+<body style = "background-color: gray">
+
+  <!-- Note: Here we reach the limits of pure HTML... -->
+  <svg
+      id = "top-left-circle"
+      style = "
+      height: 100px; width: 100px;
+      position: absolute;
+      top: calc(50% - 100px); left: calc(50% - 100px);
+      transform: translate(-50%, -50%)">
+    <circle cx="50" cy="50" r="50" fill="black"/>
+  </svg>
+
+  <svg
+    id = "top-right-circle"
+    style = "
+      height: 100px; width: 100px;
+      position: absolute;
+      top: calc(50% - 100px); left: calc(50% + 100px);
+      transform: translate(-50%, -50%)">
+    <circle cx="50" cy="50" r="50" fill="black"/>
+  </svg>
+
+  <svg
+      id = "top-left-circle"
+      style = "
+      height: 100px; width: 100px;
+      position: absolute;
+      top: calc(50% + 100px); left: calc(50% - 100px);
+      transform: translate(-50%, -50%)">
+    <circle cx="50" cy="50" r="50" fill="white"/>
+  </svg>
+
+  <svg
+    id = "top-right-circle"
+    style = "
+      height: 100px; width: 100px;
+      position: absolute;
+      top: calc(50% + 100px); left: calc(50% + 100px);
+      transform: translate(-50%, -50%)">
+    <circle cx="50" cy="50" r="50" fill="white"/>
+  </svg>
+
+  <div
+    id = "square"
+    class = "centered"
+    style = "background: gray">
+  </div>
+
+</body>
diff --git a/stimuli/html-and-js/Illusions/troxler.html b/stimuli/html-and-js/Illusions/troxler.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<head>
+  <title>TroxlerEffect</title>
+  <link rel="stylesheet" href ="./shapes.css"></link>
+</head>
+<body style = "background-color: white">
+
+  <!-- Note: HTML placement may be very sensitive!
+  If you do not update height and width you may have some surprises...
+  Also, notice that altering positions will result on a non square... since your screen isnt! -->
+  <svg
+    id = "top-left-circle"
+    style = "
+      height: 40px; width: 40px;
+      position: absolute; top: 50%; left: 50%;
+      transform: translate(calc(-50% - 100px), calc(-50% - 100px)">
+    <circle cx="20" cy="20" r="20" fill="cyan"/>
+  </svg>
+
+  <svg
+    id = "top-center-circle"
+    style = "
+      height: 40px; width: 40px;
+      position: absolute; top: 50%; left: 50%;
+      transform: translate(calc(-50%), calc(-50% - 100px)">
+    <circle cx="20" cy="20" r="20" fill="purple"/>
+  </svg>
+
+  <svg
+    id = "top-right-circle"
+    style = "
+      height: 40px; width: 40px;
+      position: absolute; top: 50%; left: 50%;
+      transform: translate(calc(-50% + 100px), calc(-50% - 100px)">
+    <circle cx="20" cy="20" r="20" fill="yellow"/>
+  </svg>
+
+  <svg
+    id = "center-left-circle"
+    style = "
+      height: 40px; width: 40px;
+      position: absolute; top: 50%; left: 50%;
+      transform: translate(calc(-50% - 100px), calc(-50%)">
+    <circle cx="20" cy="20" r="20" fill="green"/>
+  </svg>
+
+  <svg
+    id = "center-right-circle"
+    style = "
+      height: 40px; width: 40px;
+      position: absolute; top: 50%; left: 50%;
+      transform: translate(calc(-50% + 100px), calc(-50%)">
+    <circle cx="20" cy="20" r="20" fill="cyan"/>
+  </svg>
+
+  <svg
+    id = "bottom-left-circle"
+    style = "
+      height: 40px; width: 40px;
+      position: absolute; top: 50%; left: 50%;
+      transform: translate(calc(-50% - 100px), calc(-50% + 100px)">
+    <circle cx="20" cy="20" r="20" fill="purple"/>
+  </svg>
+
+  <svg
+    id = "bottom-center-circle"
+    style = "
+      height: 40px; width: 40px;
+      position: absolute; top: 50%; left: 50%;
+      transform: translate(calc(-50%), calc(-50% + 100px)">
+    <circle cx="20" cy="20" r="20" fill="yellow"/>
+  </svg>
+
+  <svg
+    id = "bottom-right-circle"
+    style = "
+      height: 40px; width: 40px;
+      position: absolute; top: 50%; left: 50%;
+      transform: translate(calc(-50% + 100px), calc(-50% + 100px)">
+    <circle cx="20" cy="20" r="20" fill="green"/>
+  </svg>
+
+</body>
diff --git a/stimuli/html-and-js/Illusions/two-circles.html b/stimuli/html-and-js/Illusions/two-circles.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<head>
+  <title>TwoCircles</title>
+  <link rel="stylesheet" href ="./shapes.css"></link>
+</head>
+<body style = "background-color: white">
+
+  <!-- Note: HTML does not make computations, so we can not write 50% + 125px alone
+              However, calc() can do it nicely -->
+  <svg
+      id = "red-circle"
+      style = "
+      height: 200px; width: 200px;
+      position: absolute; top: 50%; left: 50%; transform: translate(calc(-50% - 125px), -50%)">
+    <circle cx="100" cy="100" r="100" fill="red"/>
+  </svg>
+
+  <svg
+    id = "blue-circle"
+    style = "
+      height: 200px; width: 200px;
+      position: absolute; top: 50%; left: 50%; transform: translate(calc(-50% + 125px), -50%)">
+    <circle cx="100" cy="100" r="100" fill="blue"/>
+  </svg>
+
+</body>
diff --git a/stimuli/html-and-js/SimpleShapes/circle-div.html b/stimuli/html-and-js/SimpleShapes/circle-div.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<head>
+  <title>MyCircle</title>
+  <link rel="stylesheet" href ="./shapes.css"></link>
+</head>
+<body style = "background-color: white">
+    <div
+      id = "my-circle"
+      style = "
+        background: red;
+        width: 200px; height: 200px;
+        position: absolute; top: 50vh; left: 50vw; transform: translate(-50%, -50%);
+        border-radius: 50%">
+    </div>
+</body>
diff --git a/stimuli/html-and-js/SimpleShapes/circle-style.html b/stimuli/html-and-js/SimpleShapes/circle-style.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<head>
+  <title>MyCircle</title>
+  <style>
+    .centered {
+      position: absolute;
+      top: 50vh; left: 50vw;
+      transform: translate(-50%, -50%);
+    }
+
+    .circle {
+      border-radius: 50%;
+    }
+
+    div {
+      background-color: red;
+      width: 200px; height: 200px;
+    }
+  </style>
+
+  <link rel="stylesheet" href ="./shapes.css"></link>
+</head>
+<body style = "background-color: white">
+    <div
+      class = "centered circle"
+      id = "my-circle">
+    </div>
+
+
+</body>
diff --git a/stimuli/html-and-js/SimpleShapes/circle-svg.html b/stimuli/html-and-js/SimpleShapes/circle-svg.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<head>
+  <title>MyCircle</title>
+  <link rel="stylesheet" href ="./shapes.css"></link>
+</head>
+<body style = "background-color: white">
+
+    <!-- With stroke parameters (here 0)-->
+    <svg
+      id = "my-circle"
+      style = "
+        height: 200px; width: 200px;
+        position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
+      <circle cx="100" cy="100" r="100" fill="red"
+        stroke="black" stroke-width="0"/>
+    </svg>
+</body>
diff --git a/stimuli/html-and-js/SimpleShapes/square-css.html b/stimuli/html-and-js/SimpleShapes/square-css.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<head>
+  <title>MySquare</title>
+  <link rel="stylesheet" href ="./shapes.css"></link>
+
+</head>
+<body style = "background-color: white">
+    <div
+      id = "my-square"
+      class="centered">
+    </div>
+</body>
diff --git a/stimuli/html-and-js/SimpleShapes/square-div.html b/stimuli/html-and-js/SimpleShapes/square-div.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<head>
+  <title>MySquare</title>
+</head>
+<body style = "background-color: white">
+    <div
+      id = "my-square"
+      style = "
+        background: red;
+        width: 200px; height: 200px;
+        position: absolute; top: 50vh; left: 50vw; transform: translate(-50%, -50%)">
+    </div>
+</body>
diff --git a/stimuli/html-and-js/SimpleShapes/square-style.html b/stimuli/html-and-js/SimpleShapes/square-style.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<head>
+  <title>MySquare</title>
+
+  <style>
+    .centered {
+      position: absolute;
+      top: 50vh; left: 50vw;
+      transform: translate(-50%, -50%);
+    }
+
+    div {
+      background-color: red;
+      width: 200px; height: 200px;
+    }
+  </style>
+</head>
+<body style = "background-color: white">
+    <div
+      id = "my-square"
+      class="centered">
+    </div>
+</body>
diff --git a/stimuli/html-and-js/SimpleShapes/square.css b/stimuli/html-and-js/SimpleShapes/square.css
@@ -0,0 +1,10 @@
+.centered {
+  position: absolute;
+  top: 50vh; left: 50vw;
+  transform: translate(-50%, -50%);
+}
+
+div {
+  background-color: red;
+  width: 200px; height: 200px;
+}
diff --git a/stimuli/html-and-js/SimpleShapes/triangle-style.html b/stimuli/html-and-js/SimpleShapes/triangle-style.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<head>
+  <title>MyTriangle</title>
+  <style>
+    .centered {
+      position: absolute;
+      top: 50vh; left: 50vw;
+      transform: translate(-50%, -50%);
+    }
+  </style>
+</head>
+<body style = "background-color: white">
+    <svg
+      id = "my-triangle"
+      class = "centered"
+      style = "
+        height: 200px; width: 200px;">
+        <polygon points="0, 200, 200, 200, 100, 0" fill="red" />
+    </svg>
+</body>
diff --git a/stimuli/html-and-js/SimpleShapes/triangle-svg.html b/stimuli/html-and-js/SimpleShapes/triangle-svg.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<head>
+  <title>MyTriangle</title>
+</head>
+<body style = "background-color: white">
+    <svg
+      id = "my-triangle"
+      style = "
+        height: 200px; width: 200px;
+        position: absolute; top: 50vh; left: 50vw;
+        transform: translate(-50%, -50%)">
+        <polygon points="0 200, 200 200, 100 0" fill="red" />
+    </svg>
+</body>
diff --git a/stimuli/html-and-js/hello_world.html b/stimuli/html-and-js/hello_world.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>My HTML file</title>
+  </head>
+  <body>Hello, world</body>
+</html>