add binary card trick webpage

1 files changed, 181 insertions, 0 deletions

diff --git a/Info/Binaersystem/binaer_cards.html b/Info/Binaersystem/binaer_cards.html
new file mode 100644
index 00000000..e9e6dad8
--- /dev/null
+++ b/Info/Binaersystem/binaer_cards.html
@@ -0,0 +1,181 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Guess your number!</title>
+  <meta charset="utf8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta name="author" content="Florian Fischer">
+
+  <style>
+    :root {
+      /* define applied colors */
+      --bg: #fdfdfd;
+      --fg: #1a1a1a;
+    }
+    @media (prefers-color-scheme: dark) {
+      /* change apllied colors to the dark gruvbox pallet
+       * https://github.com/morhetz/gruvbox
+       */
+      :root {
+        --bg: #282828; /* dark bg */
+        --fg: #ebdbb2; /* dark fg */
+      }
+    }
+    
+    html {
+      line-height: 1.5;
+      font-family: Georgia, serif;
+      font-size: 20px;
+      color: var(--fg);
+      background-color: var(--bg);
+    }
+
+    .card {
+      border-radius: 25px;
+      border: 2px solid;
+      padding: 20px;
+      max-width: 25em;
+    }
+    .wrapper {
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .content {
+      flex: 1;
+      overflow: auto;
+    }
+    
+    body {
+      height: 100%;
+      margin: 0 auto;
+      max-width: 46em;
+      padding-left: 50px;
+      padding-right: 50px;
+      padding-top: 50px;
+      padding-bottom: 50px;
+      hyphens: auto;
+      word-wrap: break-word;
+      text-rendering: optimizeLegibility;
+      font-kerning: normal;
+    }
+    
+    @media (max-width: 600px) {
+      body {
+        font-size: 0.9em;
+        padding: 1em;
+      }
+    }
+  </style>
+
+  <script language="javascript" type="text/javascript">
+    /*
+    @licstart  The following is the entire license notice for the
+    JavaScript code in this page.
+
+    Copyright (C) 2024 Florian Fischer
+
+    The JavaScript code in this page is free software: you can
+    redistribute it and/or modify it under the terms of the GNU
+    General Public License (GNU GPL) as published by the Free Software
+    Foundation, either version 3 of the License, or any later version.
+    The code is distributed WITHOUT ANY WARRANTY;
+    without even the implied warranty of MERCHANTABILITY or FITNESS
+    FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
+
+    As additional permission under GNU GPL version 3 section 7, you
+    may distribute non-source (e.g., minimized or compacted) forms of
+    that code without the copy of the GNU GPL normally required by
+    section 4, provided you include this license notice and a URL
+    through which recipients can access the Corresponding Source.
+
+    @licend  The above is the entire license notice
+    for the JavaScript code in this page.
+    */
+
+    let marked = [false, false, false, false, false, false, false];
+    let lastNumber = 80;
+    let positions = 7;
+
+    function updateGuess() {
+      let guessDiv = document.getElementById("guess");
+
+      let guessExplDiv = document.getElementById("guess_explanation");
+      guessExplDiv.innerHTML = "";
+
+      var guess = 0;
+
+      for (var pos = 0; pos < positions; pos++) {
+        let posSpan =  document.createElement("span");
+
+        if (marked[pos]) {
+          guess += (1 << pos);
+          posSpan.innerHTML = "" + (1 << pos);
+        } else {
+          posSpan.innerHTML = "0";
+        }
+
+        if (pos != 0) {
+            posSpan.innerHTML += " + ";
+        }
+
+        guessExplDiv.prepend(posSpan);
+      }
+
+      guessDiv.innerHTML = "Die Zahl ist: " + guess;
+    }
+
+    document.addEventListener('DOMContentLoaded', function() {
+      let cardsDiv = document.getElementById("cards");
+
+      for (let pos = 0; pos < positions; pos++) {
+        let card = document.createElement("p");
+        card.classList.add("card");
+        for (var n = 0; n < lastNumber; n++) {
+          if (n & (1 << pos)) {
+            card.innerHTML += n + " ";
+          }
+        }
+
+        card.onclick = function() {
+          if (!marked[pos]) {
+            card.style.background = "green";
+          } else {
+            card.style.background = "";
+          }
+          marked[pos] = !marked[pos]
+          updateGuess();
+        }
+        cardsDiv.appendChild(card);
+      }
+    });
+  </script>
+</head>
+<body>
+<div class="wrapper">
+<div class="content">
+<h1>Guess your number</h1>
+<ul>
+<li>Denk Dir eine Zahl zwischen 1 und 79.</li>
+<li>Klicke auf jede Kachel, die deine Zahl enthält.</li>
+</ul>
+
+<div id="cards"></div>
+
+<details>
+  <summary>Erratene Nummer</summary>
+  <div id="guess">Vergiss nicht die Kacheln mit deiner Zahl anzuklicken.</div>
+  <details>
+      <summary>Erklärung</summary>
+      <div id="guess_explanation"></div>
+  </details>
+</details>
+
+</div>
+<footer>
+<p xmlns:cc="http://creativecommons.org/ns#">Diese Seite von <span property="cc:attributionName">Florian Fischer</span> ist unter folgender Lizenz veröffentlicht: <a href="https://creativecommons.org/licenses/by-sa/4.0/?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">CC BY-SA 4.0<img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1" alt=""><img style="height:22px!important;margin-left:3px;vertical-align:text-bottom;" src="https://mirrors.creativecommons.org/presskit/icons/sa.svg?ref=chooser-v1" alt=""></a></p>
+</footer>
+</div>
+</body>
+</html>