Added process of minifying via KV

3 files changed, 539 insertions, 0 deletions

diff --git a/assets/css/main.css b/assets/css/main.css
index e69de29..017f084 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -0,0 +1,184 @@
+/*
+    Variable declarations
+ */
+:root {
+    --green: #296431;
+    --light-grey: #6a6a6a;
+    --grey: #3d3d3d;
+}
+
+/*
+    Set global configuration
+ */
+* {
+    transition: background-color .5s;
+}
+
+html, body {
+    font-family: sans-serif;
+    min-height: 100vh;
+    max-width: 100vw;
+    overflow-x: hidden;
+    padding: 0;
+    margin: 0;
+}
+
+pre {
+    float: right;
+}
+
+/*
+    Navigation bar
+ */
+.navbar {
+    width: 100vw;
+    background: var(--grey);
+    overflow: hidden;
+}
+
+.navbar a {
+    display: block;
+    color: white;
+    float: left;
+    text-align: center;
+    padding: 15px;
+    text-decoration: none;
+}
+
+.navbar a[data-current] {
+    background: var(--green)
+}
+
+.navbar a:hover {
+    background: var(--light-grey)
+}
+
+.navbar a:first-child:hover {
+    background: var(--grey)
+}
+
+.navbar a[data-current]:hover {
+    background: var(--green)
+}
+
+/*
+    Content
+ */
+.content {
+    padding: 20px;
+}
+
+.content .heading {
+    font: normal small-caps normal 24px/1.4 sans-serif;
+}
+
+button {
+    border: none;
+    padding: 10px;
+    color: white;
+    background: var(--green);
+}
+
+a {
+    color: var(--green);
+    text-decoration: none;
+}
+
+p {
+    margin-bottom: 10px;
+}
+
+li[data-contrast] {
+    font-size: 24px;
+    text-shadow: -.5px 0 black, 0 .5px black, 1px 0 black, 0 -.5px black;
+}
+
+.content figure {
+    text-align: center;
+    margin: 10px auto;
+}
+
+.content figcaption {
+    font-size: 12px;
+}
+
+.content .not {
+    border-top: 1px solid black;
+}
+
+footer {
+    margin: 10px;
+}
+
+/*
+    KV-Diagram layout
+ */
+.true {
+    color: green;
+}
+
+.false {
+    color: red;
+}
+
+table * {
+    text-align: center;
+}
+
+td, th {
+    border: 1px solid black;
+    padding: 5px;
+}
+
+td.output {
+    background-color: lightgrey;
+}
+
+.kv-grid {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    justify-items: center;
+    align-items: center;
+    width: calc(50px * 6);
+    height: calc(50px * 6);
+}
+
+.kv-grid div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 50px;
+    height: 50px;
+    text-align: center;
+    border-left: 1px solid black;
+    border-bottom: 1px solid black;
+}
+
+.grid-child:nth-child(1), .grid-child:nth-child(6), .grid-child:nth-child(31), .grid-child:nth-child(36),
+.grid-child:nth-child(2), .grid-child:nth-child(5), .grid-child:nth-child(7), .grid-child:nth-child(25) {
+    border: 0;
+}
+
+.grid-child:nth-child(4), .grid-child:nth-child(12), .grid-child:nth-child(24) {
+    border-top: 0;
+    border-right: 0;
+}
+
+.grid-child:nth-child(18), .grid-child:nth-child(30), .grid-child:nth-child(33), .grid-child:nth-child(35) {
+    border-bottom: 0;
+    border-right: 0;
+}
+
+.grid-child:nth-child(3), .grid-child:nth-child(13) {
+    border-top: 0;
+    border-left: 0;
+}
+
+.grid-child:nth-child(19), .grid-child:nth-child(34), .grid-child:nth-child(32) {
+    border-bottom: 0;
+    border-left: 0;
+}
+
+.grid-child:nth-child(2), .grid-child:nth-child(5) {
+    border-bottom: 1px solid black;
+}
diff --git a/assets/js/process.js b/assets/js/process.js
new file mode 100644
index 0000000..988d9bf
--- /dev/null
+++ b/assets/js/process.js
@@ -0,0 +1,84 @@
+/**
+ * Fill the diagram with 1s and 0s (animated)
+ */
+document.getElementById('fill').onclick = () => {
+  document.getElementById('combine').style.display = 'block';
+  const elements = document.getElementsByClassName('output');
+
+  // reset diagram
+  for (let i = 0; i < elements.length; i++) {
+    document.getElementById(i + 1).innerText = '';
+  }
+
+  // fill diagram
+  for (let i = 0; i < elements.length; i++) {
+    ((ind) => { // awesome animation
+      setTimeout(() => {
+        document.getElementById(i + 1).innerText = elements[i].classList.contains('true') ? '1' : '0';
+      }, 150 * ind)
+    })(i)
+  }
+};
+
+/**
+ * Combining fields to blocks (animated)
+ */
+document.getElementById('combine').onclick = () => {
+  document.getElementById('fill').style.display = 'none';
+  document.getElementById('combine').innerText = 'Weiter';
+  const steps = document.getElementById('steps');
+  const elements = document.getElementsByClassName('grid-child');
+
+  // mark truthy values
+  steps.insertAdjacentHTML('beforeend', '<li>Finden von wahren Werten (grün markiert)</li>');
+  for (let i = 0; i < elements.length; i++) {
+    if (elements[i].getAttribute('id') !== null && elements[i].innerText === '1') {
+      elements[i].style.background = 'lightgreen'
+    }
+  }
+
+  // combine fields - stage 1
+  document.getElementById('combine').onclick = () => {
+    steps.insertAdjacentHTML('beforeend', '<li>Felder zu Blöcken zusammenfassen <ul id="field_dnf"></ul></li>');
+    const fieldDnf = document.getElementById('field_dnf');
+
+    // reset field color
+    for (let i = 0; i < elements.length; i++) {
+      elements[i].style.background = 'white'
+    }
+
+    document.getElementById('3').style.background = 'green';
+    document.getElementById('4').style.background = 'green';
+    document.getElementById('11').style.background = 'green';
+    document.getElementById('12').style.background = 'green';
+
+    fieldDnf.insertAdjacentHTML('beforeend', '<li data-contrast style="color: green">(E<sub>2</sub>&and;<span class="not">E<sub>3</sub></span>)</li>');
+
+    // combine fields - stage 2
+    document.getElementById('combine').onclick = () => {
+      document.getElementById('11').style.background = 'linear-gradient(to top right, blue, green)';
+      document.getElementById('15').style.background = 'blue';
+
+      fieldDnf.insertAdjacentHTML('beforeend', '<li data-contrast style="color: blue">(<span class="not">E<sub>1</sub></span>&and;E<sub>2</sub>&and;E<sub>4</sub>)</li>');
+
+      // combine fields - stage 3
+      document.getElementById('combine').onclick = () => {
+        document.getElementById('6').style.background = 'orange';
+
+        fieldDnf.insertAdjacentHTML('beforeend',
+          '<li data-contrast style="color: orange">(E<sub>1</sub>&and;<span class="not">E<sub>2</sub></span>&and;E<sub>3</sub><span class="not">E<sub>4</sub></span>)</li>');
+
+        document.getElementById('combine').style.display = "none";
+      }
+    };
+  };
+};
+
+/**
+ * Scroll up magic
+ */
+const button = document.getElementById('up');
+const options = {top: 0, left: 0, behavior: 'smooth'};
+button.addEventListener('click', () => {
+  window.scroll(options)
+});
diff --git a/process.html b/process.html
new file mode 100644
index 0000000..7b0135b
--- /dev/null
+++ b/process.html
@@ -0,0 +1,271 @@
+<!doctype html>
+<html lang="de">
+<head>
+    <meta charset="UTF-8">
+    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+          name="viewport">
+    <meta content="ie=edge" http-equiv="X-UA-Compatible">
+    <link href="assets/css/main.css" rel="stylesheet">
+    <title>KV-Diagramme</title>
+</head>
+<body>
+<nav class="navbar" id="navbar">
+    <a href="#">KV-Diagramme</a>
+    <a href="overview.html">Allgemeines</a>
+    <a data-current href="process.html">Ablauf</a>
+    <a href="rules.html">Regeln</a>
+    <a href="usecase.html">Verwendungshinweise</a>
+    <a href="generator.html">Generator</a>
+</nav>
+
+<div class="content">
+    <p class="heading">Ablauf</p>
+    <p>
+        Das Minimieren eines booleschen Ausdrucks beginnt mit einer ausgefüllten Wahrheitstabelle,
+        mit deren Ausgangswerten daraufhin eine KV-Tafel erstellt wird und wie im folgenden
+        Beispiel erklärt, die disjunktive Normalform ausgelesen wird.
+    </p>
+
+    <p><u>Beispielsablauf</u>:</p>
+    <ol>
+        <li>
+            <p>Wahrheitstabelle:</p>
+            <table>
+                <thead>
+                <tr>
+                    <th>E<sub>4</sub></th>
+                    <th>E<sub>3</sub></th>
+                    <th>E<sub>2</sub></th>
+                    <th>E<sub>1</sub></th>
+                    <th>Z</th>
+                    <th>DNF</th>
+                </tr>
+                </thead>
+                <tbody>
+                <tr>
+                    <td class="false">0</td>
+                    <td class="false">0</td>
+                    <td class="false">0</td>
+                    <td class="false">0</td>
+                    <td class="output false">0</td>
+                </tr>
+                <tr>
+                    <td class="false">0</td>
+                    <td class="false">0</td>
+                    <td class="false">0</td>
+                    <td class="true">1</td>
+                    <td class="output false">0</td>
+                </tr>
+                <tr>
+                    <td class="false">0</td>
+                    <td class="false">0</td>
+                    <td class="true">1</td>
+                    <td class="false">0</td>
+                    <td class="output true">1</td>
+                    <td>(<span class="not">E<sub>1</sub></span>&and;E<sub>2</sub>&and;<span
+                            class="not">E<sub>3</sub></span>&and;<span
+                            class="not">E<sub>4</sub></span>)
+                    </td>
+                </tr>
+                <tr>
+                    <td class="false">0</td>
+                    <td class="false">0</td>
+                    <td class="true">1</td>
+                    <td class="true">1</td>
+                    <td class="output true">1</td>
+                    <td>(E<sub>1</sub>&and;E<sub>2</sub>&and;<span class="not">E<sub>3</sub></span>&and;<span
+                            class="not">E<sub>4</sub></span>)
+                    </td>
+                </tr>
+                <tr>
+                    <td class="false">0</td>
+                    <td class="true">1</td>
+                    <td class="false">0</td>
+                    <td class="false">0</td>
+                    <td class="output false">0</td>
+                </tr>
+                <tr>
+                    <td class="false">0</td>
+                    <td class="true">1</td>
+                    <td class="false">0</td>
+                    <td class="true">1</td>
+                    <td class="output true">1</td>
+                    <td>(E<sub>1</sub>&and;<span class="not">E<sub>2</sub></span>&and;E<sub>3</sub>&and;<span
+                            class="not">E<sub>4</sub></span>)
+                    </td>
+                </tr>
+                <tr>
+                    <td class="false">0</td>
+                    <td class="true">1</td>
+                    <td class="true">1</td>
+                    <td class="false">0</td>
+                    <td class="output false">0</td>
+                </tr>
+                <tr>
+                    <td class="false">0</td>
+                    <td class="true">1</td>
+                    <td class="true">1</td>
+                    <td class="true">1</td>
+                    <td class="output false">0</td>
+                </tr>
+                <tr>
+                    <td class="true">1</td>
+                    <td class="false">0</td>
+                    <td class="false">0</td>
+                    <td class="false">0</td>
+                    <td class="output false">0</td>
+                </tr>
+                <tr>
+                    <td class="true">1</td>
+                    <td class="false">0</td>
+                    <td class="false">0</td>
+                    <td class="true">1</td>
+                    <td class="output false">0</td>
+                </tr>
+                <tr>
+                    <td class="true">1</td>
+                    <td class="false">0</td>
+                    <td class="true">1</td>
+                    <td class="false">0</td>
+                    <td class="output true">1</td>
+                    <td>(<span class="not">E<sub>1</sub></span>&and;E<sub>2</sub>&and;<span
+                            class="not">E<sub>3</sub></span>&and;E<sub>4</sub>)
+                    </td>
+                </tr>
+                <tr>
+                    <td class="true">1</td>
+                    <td class="false">0</td>
+                    <td class="true">1</td>
+                    <td class="true">1</td>
+                    <td class="output true">1</td>
+                    <td>(E<sub>1</sub>&and;E<sub>2</sub>&and;<span class="not">E<sub>3</sub></span>&and;E<sub>4</sub>)
+                    </td>
+                </tr>
+                <tr>
+                    <td class="true">1</td>
+                    <td class="true">1</td>
+                    <td class="false">0</td>
+                    <td class="false">0</td>
+                    <td class="output false">0</td>
+                </tr>
+                <tr>
+                    <td class="true">1</td>
+                    <td class="true">1</td>
+                    <td class="false">0</td>
+                    <td class="true">1</td>
+                    <td class="output false">0</td>
+                </tr>
+                <tr>
+                    <td class="true">1</td>
+                    <td class="true">1</td>
+                    <td class="true">1</td>
+                    <td class="false">0</td>
+                    <td class="output true">1</td>
+                    <td>(<span class="not">E<sub>1</sub></span>&and;E<sub>2</sub>&and;E<sub>3</sub>&and;E<sub>4</sub>)
+                    </td>
+                </tr>
+                <tr>
+                    <td class="true">1</td>
+                    <td class="true">1</td>
+                    <td class="true">1</td>
+                    <td class="true">1</td>
+                    <td class="output false">0</td>
+                </tr>
+                </tbody>
+            </table>
+        </li>
+
+        <li>
+            <p>Disjunktive Normalform ablesen (zum vergleichen):</p>
+            <p>
+                Z =
+                (<span class="not">E<sub>1</sub></span>&and;E<sub>2</sub>&and;<span
+                    class="not">E<sub>3</sub></span>&and;<span class="not">E<sub>4</sub></span>)&or;
+                (E<sub>1</sub>&and;E<sub>2</sub>&and;<span
+                    class="not">E<sub>3</sub></span>&and;<span class="not">E<sub>4</sub></span>)&or;
+                (E<sub>1</sub>&and;<span
+                    class="not">E<sub>2</sub></span>&and;E<sub>3</sub>&and;<span
+                    class="not">E<sub>4</sub></span>)&or;
+                (<span class="not">E<sub>1</sub></span>&and;E<sub>2</sub>&and;<span
+                    class="not">E<sub>3</sub></span>&and;E<sub>4</sub>)&or;
+                (E<sub>1</sub>&and;E<sub>2</sub>&and;<span
+                    class="not">E<sub>3</sub></span>&and;E<sub>4</sub>)&or;
+                (<span
+                    class="not">E<sub>1</sub></span>&and;E<sub>2</sub>&and;E<sub>3</sub>&and;E<sub>4</sub>)
+            </p>
+        </li>
+
+        <li>
+            <p>KV-Diagramm zeichnen und mit den <i>Z Werten</i> aus der Wahrheitstabelle
+                füllen:</p>
+            <button id="fill">Ausfüllen</button>
+            <div class="kv-grid">
+                <div class="grid-child"></div>
+                <div class="grid-child">E<sub>1</sub></div>
+                <div class="grid-child">E<sub>1</sub></div>
+                <div class="grid-child">!E<sub>1</sub></div>
+                <div class="grid-child">!E<sub>1</sub></div>
+                <div class="grid-child"></div>
+                <div class="grid-child">E<sub>2</sub></div>
+                <div class="grid-child" id="4"></div>
+                <div class="grid-child" id="8"></div>
+                <div class="grid-child" id="7"></div>
+                <div class="grid-child" id="3"></div>
+                <div class="grid-child">!E<sub>4</sub></div>
+                <div class="grid-child">E<sub>2</sub></div>
+                <div class="grid-child" id="12"></div>
+                <div class="grid-child" id="16"></div>
+                <div class="grid-child" id="15"></div>
+                <div class="grid-child" id="11"></div>
+                <div class="grid-child">E<sub>4</sub></div>
+                <div class="grid-child">!E<sub>2</sub></div>
+                <div class="grid-child" id="10"></div>
+                <div class="grid-child" id="14"></div>
+                <div class="grid-child" id="13"></div>
+                <div class="grid-child" id="9"></div>
+                <div class="grid-child">E<sub>4</sub></div>
+                <div class="grid-child">!E<sub>2</sub></div>
+                <div class="grid-child" id="2"></div>
+                <div class="grid-child" id="6"></div>
+                <div class="grid-child" id="5"></div>
+                <div class="grid-child" id="1"></div>
+                <div class="grid-child">!E<sub>4</sub></div>
+                <div class="grid-child"></div>
+                <div class="grid-child">!E<sub>3</sub></div>
+                <div class="grid-child">E<sub>3</sub></div>
+                <div class="grid-child">E<sub>3</sub></div>
+                <div class="grid-child">!E<sub>3</sub></div>
+                <div class="grid-child"></div>
+            </div>
+        </li>
+
+        <li>
+            <p>Felder mit Beachtung der <a href="rules.html">Regeln</a> zusammenfassen:</p>
+            <ol id="steps"></ol>
+            <button id="combine" style="display: none;">Starten</button>
+        </li>
+
+        <li>
+            <p>Disjunktive Normalform erstellen:</p>
+            <p>
+                Z = (E<sub>2</sub>&and;<span class="not">E<sub>3</sub></span>)&or;
+                (<span class="not">E<sub>1</sub></span>&and;E<sub>2</sub>&and;E<sub>4</sub>)&or;
+                (E<sub>1</sub>&and;<span class="not">E<sub>2</sub></span>&and;E<sub>3</sub>
+                <span class="not">E<sub>4</sub></span>)
+            </p>
+        </li>
+    </ol>
+
+    <button id="up">Nach oben</button>
+    <a href="usecase.html">> Hinweise</a>
+</div>
+
+<footer>
+    <hr>
+    Erstellt von <a href="https://marvinborner.de" target="_blank">Marvin Borner</a> TGI 11.1 RBS
+    Ulm
+</footer>
+
+<script src="assets/js/process.js"></script>
+</body>
+</html>