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 /card.svg | |
download | cards-master.zip cards-master.tar.gz cards-master.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]].
Diffstat (limited to 'card.svg')
-rw-r--r-- | card.svg | 57 |
1 files changed, 57 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> |