Added Flipcard functionality (#17)

motionsplan · Dec 9, 2019 · 6dc9556 · 6dc9556
1 parent 5fb57ee
commit 6dc9556
Show file tree

Hide file tree

Showing 5 changed files with 110 additions and 6 deletions.
diff --git a/_includes/flipcard b/_includes/flipcard
@@ -0,0 +1,27 @@
+{% if include.id %}
+  {% assign flipcard = page[include.id] %}
+{% else %}
+  {% assign flipcard = page.flipcard %}
+{% endif %}
+
+<div class="feature__wrapper">
+  {% for f in flipcard %}
+
+    {% if f.url contains "://" %}
+      {% capture f_url %}{{ f.url }}{% endcapture %}
+    {% else %}
+      {% capture f_url %}{{ f.url | relative_url }}{% endcapture %}
+    {% endif %}
+
+    <div class="flip-card">
+      <div class="flip-card-inner">
+        <div class="flip-card-front">
+          {{ f.front | markdownify }}
+        </div>
+        <div class="flip-card-back">
+          {{ f.back | markdownify }}
+        </div>
+      </div>
+    </div>
+  {% endfor %}
+</div>
diff --git a/_posts/2019-11-18-wingate-test.md b/_posts/2019-11-18-wingate-test.md
@@ -13,6 +13,11 @@ tags:
   - anaerob
 last_modified_at: 2019-03-06T23:14:14Z
 toc: true
+quiz:
+  - front: "Hvor lang tid tager Wingate-testen?" 
+    back: "30 sekunder"
+  - front: "Hvad tester Wingate-testen?"
+    back: "Anaerobe kapacitet og power"
 ---
 
 *[PPO]: Peak Power Output (watt)
@@ -30,18 +35,22 @@ Testen er meget tidseffektiv, fordi den normalt kun køres en gang.
 
 - Peak Power Output (watt) (PPO) - Den højeste kraft som gerne skulle måles i løbet af de første 5 sekunder.
 - Relative Peak Power Output (watt/kg) (RPP) - PPO relativt ift. kropsvægt.
-- Anaerobic fatigue / fatigue index (%) (AF) - Det procentvise fald mellem første 5 sekunder og sidste 5 sekunder.
-- Anaerobic Capacity (watt/30 sek) (AC) - Det samlede arbejde - summen af hver af fem sekunders målingerne (PPO).
+- Anaerobic fatigue / fatigue index (%) (AF) - Det procentvise fald mellem de første 5 sekunder og de sidste 5 sekunder.
+- Anaerobic Capacity (watt/30 sek) (AC) - Det samlede arbejde som er summen af alle fem sekunders-målingerne (PPO).
 
 ## Testen på Wattbikes
 
 Hvis du har adgang til en Wattbike, så er der forprogrammeret en 30 sekunders _all out_-test, som du kan bruge.
 
 {% include figure image_path="/assets/images/tests/wattbike-wingate.png" caption="Screen from Wattbike 30 sek Sprint Test" alt="Screen from Wattbike 30 sek Sprint Test" %}
 
-Her kan du umiddelbart aflæse alle værdierne undtagen "Anaerobic Capacity". Den kan du imidlertid hurtigt regne ud ved at tage "Power avg." og gange den med 6 eller lægge de 6 5-sekunders intervaller sammen.
+Her kan du umiddelbart aflæse alle værdierne undtagen "Anaerobic Capacity". "Anaerobic Capacity" kan du imidlertid hurtigt regne ud ved at tage "Power avg." og gange den med 6 eller lægge de seks 5-sekunders intervaller sammen.
 
-[Wattbike 30 Second Test](https://support.wattbike.com/hc/da/articles/115002920669-The-30-Second-Test){: .btn .btn--large .btn--info }
+[Wattbike 30 Second Test](https://support.wattbike.com/hc/da/articles/115002920669-The-30-Second-Test){: .btn .btn--large .btn--warning }
+
+## Quiz
+
+{% include flipcard id="quiz" %}
 
 ## Referencer
 

diff --git a/_posts/2019-11-19-regler-styrkeloft.md b/_posts/2019-11-19-regler-styrkeloft.md
@@ -24,6 +24,15 @@ feature_row:
   - image_path: https://i.ytimg.com/vi/GaXr9aZ2FR4/maxresdefault.jpg
     alt: "Dødløft"
     excerpt: "Dødløft"
+quiz:
+  - front: >
+      ![Squat](https://i.ytimg.com/vi/pSbpl3i3TRI/maxresdefault.jpg)
+      Hvor langt skal man ned i squat for at få godkendt løftet?
+    back: "Hofteleddet skal være under knæleddet."
+  - front: "Må hovedet løftes fra bænken i bænkpres?"
+    back: >
+      Hovedet, skuldrene og ballerne skal røre bænken og fødderne skal være flade i gulvet.
+      ![Bænkpres](https://i.ytimg.com/vi/q3uQE0yugH8/maxresdefault.jpg)
 ---
 
 *[IPF]: International Powerlifting Federation
@@ -65,6 +74,10 @@ Ved løftets afslutning skal løfteren have strakte ben og skuldrene tilbage. De
 
 {% include video provider="youtube" id="WtPdpWnkYV4" %}
 
+## Quiz
+
+{% include flipcard id="quiz" %}
+
 ## Referencer
 
 - [The International Powerlifting Federation. Tekniske Regler 2019](http://filer.styrke.dk/Tekniske_regler_IPF_2019.pdf)
diff --git a/_posts/2019-12-05-hastighed-beregnere.md b/_posts/2019-12-05-hastighed-beregnere.md
@@ -22,8 +22,8 @@ Når jeg træner løb eller cykling, vil jeg typisk gerne kende den hastighed, j
 
 Typisk kan man i angive hastigheden på to forskellige måder:
 
-- **km/t**. Den hastighed kender man også fra sit spedometer i bilen, så den er let at forholde sig til. Typisk er det også den man kan indstille på et løbebånd. Jeg synes den er lidt vanskeligere at bruge, når man er ude på en løbetur.
-- **min/km**. På løbeture synes jeg det er lettere at forholde sig til, hvor mange minutter man bruger for at løbe en kilometer. Det er let at forholde sig til - særligt hvis man kender den distance, man løber.
+- **km/t**. Den hastighed kender du fra sit spedometer i bilen, så den er let at forholde sig til. Typisk er det også den hastighed, man kan indstille på et løbebånd. Jeg synes, at den er lidt vanskeligere at bruge, når man er ude på en løbetur.
+- **min/km**. På løbeture foretrækker jeg at forholde mig til, hvor mange minutter jeg bruger for at løbe en kilometer. Det er let at forholde sig til - særligt hvis man kender den distance, man løber.
 
 ## Udregn din hastighed fra distance og tid
 

diff --git a/assets/css/main.scss b/assets/css/main.scss
@@ -73,3 +73,58 @@ form.calculator {
         }
     }
 }
+
+/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
+.flip-card {
+  font-family: $calisto;
+  background-color: transparent;
+  width: 300px;
+  height: 300px;
+  border: 1px solid $lighter-gray;
+  perspective: 1000px; /* Remove this if you don't want the 3D effect */
+  float: left;
+  margin-right: 0.5em;
+  margin-bottom: 0.5em;
+}
+
+/* This container is needed to position the front and back side */
+.flip-card-inner {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  transition: transform 0.8s;
+  transform-style: preserve-3d;
+}
+
+/* Do an horizontal flip when you move the mouse over the flip box container */
+.flip-card:hover .flip-card-inner {
+  transform: rotateY(180deg);
+}
+
+/* Position the front and back side */
+.flip-card-front, .flip-card-back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  padding: 1em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Style the front side (fallback if image is missing) */
+.flip-card-front {
+  background-color: $info-color;
+  color: white;
+  border: 10px solid $lighter-gray;
+}
+
+/* Style the back side */
+.flip-card-back {
+  background-color: #34557A;
+  color: white;
+  transform: rotateY(180deg);
+  border: 10px solid $lighter-gray;
+}