summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorAki <please@ignore.pl>2024-07-14 22:24:18 +0200
committerAki <please@ignore.pl>2024-07-14 23:05:47 +0200
commitdd6649ee2d7f80c4a46262de8ef840e6abf2393b (patch)
tree4ed23f2f636a03b963996e7fa0c4d098516f3deb
downloadcards-dd6649ee2d7f80c4a46262de8ef840e6abf2393b.zip
cards-dd6649ee2d7f80c4a46262de8ef840e6abf2393b.tar.gz
cards-dd6649ee2d7f80c4a46262de8ef840e6abf2393b.tar.bz2
A stub flippable cardHEADmaster
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.svg57
-rw-r--r--index.html11
-rw-r--r--style.css31
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;
+}