diff options
| author | Aki <please@ignore.pl> | 2024-07-14 22:24:18 +0200 |
|---|---|---|
| committer | Aki <please@ignore.pl> | 2024-07-14 23:05:47 +0200 |
| commit | dd6649ee2d7f80c4a46262de8ef840e6abf2393b (patch) | |
| tree | 4ed23f2f636a03b963996e7fa0c4d098516f3deb | |
| download | cards-dd6649ee2d7f80c4a46262de8ef840e6abf2393b.zip cards-dd6649ee2d7f80c4a46262de8ef840e6abf2393b.tar.gz cards-dd6649ee2d7f80c4a46262de8ef840e6abf2393b.tar.bz2 | |
The form is not a form and it does not work for obvious reasons. This
could be implemented all in SVG, HTML, JavaScript, or have some actual
backend to generate questions and gather answers to get proper
statistics.
This is intended to recreate experiment performed for "On the
Perception of Incongruity: A Paradigm" [[1949 Bruner and Postman]] as
briefly explained in "The Structure of Scientific Revolutions" [[1962
Kuhn]].
| -rw-r--r-- | card.svg | 57 | ||||
| -rw-r--r-- | index.html | 11 | ||||
| -rw-r--r-- | style.css | 31 |
3 files changed, 99 insertions, 0 deletions
diff --git a/card.svg b/card.svg new file mode 100644 index 0000000..f648df3 --- /dev/null +++ b/card.svg @@ -0,0 +1,57 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 635 889"> + <defs> + <pattern id="Diagonals" width="20" height="20" patternUnits="userSpaceOnUse"> + <path d="M0 0 L20 20" class="inner"/> + <path d="M20 0 L0 20" class="inner"/> + </pattern> + <style type="text/css"><![CDATA[ + .scene { perspective: 100cm; } + .card { + transform: translateZ(-10cm) rotateY(0); + transform-origin: center center; + transform-style: preserve-3d; + transition: 300ms transform; + cursor: pointer; + user-select: none; + perspective: inherit; + font-family: sans-serif; + font-weight: bold; + } + .card.flipped { transform: translateZ(-10cm) rotateY(180deg); } + .side { backface-visibility: hidden; transform-origin: center center; } + .front { transform: rotateY(180deg); } + .back { transform: rotateY(0deg); } + .corner { font-size: 64px; text-anchor: middle; } + .corner.top-left { dominant-baseline: hanging; } + .corner.bottom-right {} + .center { font-size: 180px; text-anchor: middle; dominant-baseline: middle; } + .inner { stroke: #cef3be; stroke-width: 2; } + .outer { fill: url(#Diagonals); stroke: #3e632f; stroke-width: 4; } + ]]></style> + </defs> + <g class="scene"> + <g class="card" onclick="flip(this)"> + <g class="side front"> + <!-- ♠ ♥ ♦ ♣ --> + <rect width="635" height="889" rx="35" fill="white"/> + <text class="corner top-left" x="50" y="40">5</text> + <text class="corner top-left" x="50" y="104">♣</text> + <text class="corner bottom-right" x="585" y="785">♣</text> + <text class="corner bottom-right" x="585" y="849">5</text> + <text class="center" x="177.5" y="130">♣</text> + <text class="center" x="177.5" y="789">♣</text> + <text class="center" x="317.5" y="450">♣</text> + <text class="center" x="457.5" y="130">♣</text> + <text class="center" x="457.5" y="789">♣</text> + </g> + <g class="side back"> + <rect width="635" height="889" rx="35" fill="white"/> + <rect width="595" height="849" rx="25" x="20" y="20" class="outer"/> + </g> + </g> + </g> + <script><![CDATA[ + function flip(element) { element.classList.toggle("flipped"); } + ]]></script> +</svg> diff --git a/index.html b/index.html new file mode 100644 index 0000000..bab0463 --- /dev/null +++ b/index.html @@ -0,0 +1,11 @@ +<!doctype html> +<html lang="en"> +<meta charset="utf-8"> +<link rel="stylesheet" href="style.css"> +<title>What Is This Card?</title> +<main> +<h1>What Is This Card?</h1> +<object type="image/svg+xml" data="card.svg"></object> +<p>Answer the question in the shortest exposition time.<br>Click the card to flip it.</p> +<label for="answer">This card is </label><input id="answer" type="text" autofocus><input type="submit" value="→"> +</main> diff --git a/style.css b/style.css new file mode 100644 index 0000000..641b380 --- /dev/null +++ b/style.css @@ -0,0 +1,31 @@ +body { + background-color: #293e28; +} + +body, input { + color: #e6fee5; + font-family: monospace; + font-size: 16px; +} + +main { + max-width: 32em; + width: 100%; + margin: 0 auto; + text-align: center; +} + +img, object { + max-width: 50%; +} + +input[type=text] { + background: none; + border: none; + border-bottom: 1px solid #e6fee5; +} + +input[type=submit] { + background: none; + border: 1px solid #e6fee5; +} |
