diff --git a/src/main/webapp/com/ardublock/reference/404.html b/src/main/webapp/com/ardublock/reference/404.html
deleted file mode 100644
index 643ff52ed36f20311dba4907ec8fe40548f74ee5..0000000000000000000000000000000000000000
--- a/src/main/webapp/com/ardublock/reference/404.html
+++ /dev/null
@@ -1,4 +0,0 @@
-<html>
-<font  size=+3 color=red>not found</font>
-</html>
-
diff --git a/src/main/webapp/com/ardublock/reference/_Logo_LGI_page.png b/src/main/webapp/com/ardublock/reference/_Logo_LGI_page.png
new file mode 100644
index 0000000000000000000000000000000000000000..b4b126d674146043aa588bdae06bc3118d1c7ba2
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/_Logo_LGI_page.png differ
diff --git a/src/main/webapp/com/ardublock/reference/_inhaltsverzeichnis.html b/src/main/webapp/com/ardublock/reference/_inhaltsverzeichnis.html
new file mode 100644
index 0000000000000000000000000000000000000000..49ec529ce9e42290d58d88565aaf3380a44936ea
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/_inhaltsverzeichnis.html
@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html>
+
+<link rel="stylesheet" href="_seitenformatierung.css">
+
+
+<body style="margin: 0px;">
+
+<div style="border: #284a66; border-style: solid; border-width: 5px;">
+    <nav>
+    <li id="beschreibung">Block-Referenz</li>
+    <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+    <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+    </nav>
+</div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <h1 style="font-size: 220%;">Blockverzeichnis</h1>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+
+        <table cellspacing="60">
+            <td style="vertical-align: top;">
+                <h2 class="unterueberschrift"><br> Steuerung</h2>
+                <h3>Hauptschleifen</h3>
+                <a href="https://blockreferenz.letsgoing.org/loop">wiederhole fortlaufend</a><br>
+                <a href="https://blockreferenz.letsgoing.org/sketch">Programm</a><br>
+                <h3>Verzweigungen</h3>
+                <a href="https://blockreferenz.letsgoing.org/if">falls</a><br>
+                <a href="https://blockreferenz.letsgoing.org/elseif">sonst falls</a><br>
+                <a href="https://blockreferenz.letsgoing.org/else">sonst</a><br>
+                <h3>Schleifen</h3>
+                <a href="https://blockreferenz.letsgoing.org/while">solange</a><br>
+                <a href="https://blockreferenz.letsgoing.org/repeat_times">wiederhole</a><br>
+                <a href="https://blockreferenz.letsgoing.org/repeat">wiederhole und zaehle</a><br>
+                <h3>Warten</h3>
+                <a href="https://blockreferenz.letsgoing.org/delay">warte Millisekunden</a><br>
+                <a href="https://blockreferenz.letsgoing.org/wait">solange (millis)</a><br>
+                <h2 class="unterueberschrift"><br> Unterprogramme</h2>
+                <a href="https://blockreferenz.letsgoing.org/subroutine_com">Unterprogramm erstellen</a><br>
+                <a href="https://blockreferenz.letsgoing.org/subroutine-ref">Unterprogramm ausführen</a><br>
+                <h2 class="unterueberschrift"><br> Output</h2>
+                <a href="https://blockreferenz.letsgoing.org/pin-write-digital">digitalWrite</a><br>
+                <a href="https://blockreferenz.letsgoing.org/pin-write-analog">analogWrite</a><br>
+                <h2 class="unterueberschrift"><br> Input</h2>
+                <a href="https://blockreferenz.letsgoing.org/pin-read-digital">digitalRead</a><br>
+                <a href="https://blockreferenz.letsgoing.org/pin-read-analog">analogRead</a><br>
+                <a href="https://blockreferenz.letsgoing.org/pin-read-digital-pullup">inputPullup</a><br>
+            </td>
+            <td style="vertical-align: top;">
+                <h2 class="unterueberschrift"><br> Log. Operatoren</h2>
+                <h3>Logische Verknüpfungen</h3>
+                <a href="https://blockreferenz.letsgoing.org/and">UND</a><br>
+                <a href="https://blockreferenz.letsgoing.org/or">ODER</a><br>
+                <a href="https://blockreferenz.letsgoing.org/not">NICHT</a><br>
+                <h3>Vergleiche</h3>
+                <a href="https://blockreferenz.letsgoing.org/equal_digital">== (digital)</a><br>
+                <a href="https://blockreferenz.letsgoing.org/not_equal_digital">!= (digital)</a><br>
+                <a href="https://blockreferenz.letsgoing.org/greater">&gt;</a><br>
+                <a href="https://blockreferenz.letsgoing.org/less">&lt;</a><br>
+                <a href="https://blockreferenz.letsgoing.org/equal">== (analog)</a><br>
+                <a href="https://blockreferenz.letsgoing.org/greater_equal">&gt;=</a><br>
+                <a href="https://blockreferenz.letsgoing.org/less_equal">&lt;=</a><br>
+                <a href="https://blockreferenz.letsgoing.org/not_equal">!= (analog)</a><br>
+                <h2 class="unterueberschrift"><br> Math. Operatoren</h2>
+                <h3>Operatoren</h3>
+                <a href="https://blockreferenz.letsgoing.org/addition">+</a><br>
+                <a href="https://blockreferenz.letsgoing.org/subtraction">-</a><br>
+                <a href="https://blockreferenz.letsgoing.org/multiplication">x</a><br>
+                <a href="https://blockreferenz.letsgoing.org/division">/</a><br>
+                <a href="https://blockreferenz.letsgoing.org/modulo">%</a><br>
+                <a href="https://blockreferenz.letsgoing.org/abs">abs</a><br>
+                <a href="https://blockreferenz.letsgoing.org/min">min</a><br>
+                <a href="https://blockreferenz.letsgoing.org/max">max</a><br>
+                <h3>Signalanpassung</h3>
+                <a href="https://blockreferenz.letsgoing.org/map_common">map [0, 1023] to [0, 255]</a><br>
+                <a href="https://blockreferenz.letsgoing.org/map">zuordnen</a><br>
+                <a href="https://blockreferenz.letsgoing.org/constrain">einschränken</a><br>
+                <h3>Zufallszahl</h3>
+                <a href="https://blockreferenz.letsgoing.org/">Zufallszahl (max)</a><br>
+                <a href="https://blockreferenz.letsgoing.org/">Zufallszahl (max, min)</a><br>     
+            </td>
+            <td style="vertical-align: top;">
+                <h2 class="unterueberschrift"><br> Variablen/Konstanten</h2>
+                <h3>Zeit ab Start</h3>
+                <a href="https://blockreferenz.letsgoing.org/millis">Millis</a><br>
+                <h3>Vergleiche</h3>
+                <a href="https://blockreferenz.letsgoing.org/setter_variable_digital">Setze digitale Variable</a><br>
+                <a href="https://blockreferenz.letsgoing.org/variable_digital">digitale_Variable</a><br>
+                <a href="https://blockreferenz.letsgoing.org/local_variable_digital">lokale_digitale_Variable</a><br>
+                <a href="https://blockreferenz.letsgoing.org/digital-high">HIGH</a><br>
+                <a href="https://blockreferenz.letsgoing.org/digital-low">LOW</a><br>
+                <a href="https://blockreferenz.letsgoing.org/true">true</a><br>
+                <a href="https://blockreferenz.letsgoing.org/false">false</a><br>
+                <h3>Analog</h3>
+                <a href="https://blockreferenz.letsgoing.org/setter_variable_number">Setze analoge Variable</a><br>
+                <a href="https://blockreferenz.letsgoing.org/variable_number">analoge_Variable</a><br>
+                <a href="https://blockreferenz.letsgoing.org/local_variable_number">lokale_analoge_Variable</a><br>
+                <a href="https://blockreferenz.letsgoing.org/number">Zahl</a><br>
+                <h3>Zeichen/Text</h3>
+                <a href="https://blockreferenz.letsgoing.org/string">String</a><br>
+                <h2 class="unterueberschrift"><br> Kommunikation</h2>
+                <h3>Seriell</h3>
+                <a href="https://blockreferenz.letsgoing.org/serial_print">Serial print</a><br>
+                <a href="https://blockreferenz.letsgoing.org/soft_serial_print">softSerial print</a><br>
+                <h3>Verbinder</h3>
+                <a href="https://blockreferenz.letsgoing.org/glue_digital">Verbinder (String & Digital)</a><br>
+                <a href="https://blockreferenz.letsgoing.org/glue_number">Verbinder (String & Analog)</a><br>
+                <a href="https://blockreferenz.letsgoing.org/glue_string">Verbinder (String & String)</a><br>
+
+
+                <h2 class="unterueberschrift"><br> Kommentare/Code</h2>
+                <h3>Seriell</h3>
+                <a href="https://blockreferenz.letsgoing.org/program_comment">Serial print</a><br>
+                <a href="https://blockreferenz.letsgoing.org/code_comment">//Kommentar einfuegen</a><br>
+                <a href="https://blockreferenz.letsgoing.org/code_comment_head">//Kommentar im globalen Bereich einfuegen</a><br>
+            </td>
+        </table>
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/_seitenformatierung.css b/src/main/webapp/com/ardublock/reference/_seitenformatierung.css
new file mode 100644
index 0000000000000000000000000000000000000000..d1f4893b39c2bb600d3cd26975e52f9bbe2faaae
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/_seitenformatierung.css
@@ -0,0 +1,105 @@
+
+    nav {
+        list-style-type: none;
+        margin: 0px;
+        padding: 0px;
+        overflow: hidden;
+        background-color: #3cb371;
+        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+        font-size: 120%;
+        height: 60px;
+    }
+    
+    li {
+        float: left;
+        font-weight: 200;
+    }
+    
+    #uebersichtbutton{
+        float: left;
+        font-weight: 200;
+        display: block;
+        color: white;
+        text-align: center;
+        padding: 20px;
+        text-decoration: none;
+        font-size: 120%;
+    }
+
+    #uebersichtbutton:hover {
+        background-color: #2f8b59;
+        transition: 0.3s;
+        border-radius: 10px 10px 10px 10px;
+    }
+    
+    #letsgoing_logo{
+        background-color: white;
+        height: 60px;
+        width: 210px;
+    }
+    
+    #ueberschrift{
+        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+        text-align: left;
+        padding-left: 14%;
+        margin-top: 2%;
+        font-size: 120%;
+        color: rgb(105, 105, 105);
+    }
+    
+    #beschreibung{
+        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+        text-align: left;
+        font-size: 120%;
+    }
+    
+    #block_bild{
+        margin-left: 14%;
+    }
+    
+    article{
+        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+        text-align: left;
+        font-size: 140%;
+        color: rgb(105, 105, 105);
+        padding-left: 14%;
+        padding-right: 14%;
+        padding-bottom: 10%
+        ;
+    }
+    
+    #beschreibung{
+        padding: 18px;
+        background-color: #284a66;
+        color: white;
+        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+    
+    }
+    
+    .unterueberschrift{
+        color: orange;
+        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+        font-size: 150%;
+    
+    }
+    
+    #caption{
+        margin-left: 14%;
+        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
+        font-size: 110%;
+        color: rgb(105, 105, 105);
+    }
+    
+    .fraction, .top, .bottom {
+        padding: 0 5px;    
+    }
+    
+    .fraction {
+        display: inline-block;
+        text-align: center;    
+    }
+    
+    .bottom{
+        border-top: 1px solid #000;
+        display: block;
+    }
diff --git a/src/main/webapp/com/ardublock/reference/abs-beispiel.png b/src/main/webapp/com/ardublock/reference/abs-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..0a506633b44efc0300ce0b98c1aa566dc2fc9fac
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/abs-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/abs.html b/src/main/webapp/com/ardublock/reference/abs.html
new file mode 100644
index 0000000000000000000000000000000000000000..35ebfb876e53f6c0915dd3fd77acf0d6da93ffaa
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/abs.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+
+<link rel="stylesheet" href="_seitenformatierung.css">
+
+<body style="margin: 0px;">
+
+<div style="border: #284a66; border-style: solid; border-width: 5px;">
+    <nav>
+    <li id="beschreibung">Block-Referenz</li>
+    <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+    <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+    </nav>
+</div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Math. Operatoren / Operatoren</p>
+        <h1 style="font-size: 220%;">abs</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "abs.png" alt="abs-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>abs</code> Block ist ein mathematischer Operator, der den Betrag einer Zahl oder einer analogen Variable ausgibt. 
+            Es können fest programmierte Zahlenwerte, analoge Eingänge oder analoge Variablen als Parameter eingesetzt werden. 
+            Der <code>abs</code> Block selbst kann dann als analoge Variable in anderen Blöcken verwendet werden. 
+        </p>
+        <h2 class="unterueberschrift" id="block_beschreibung">Erklärung</h2>
+        <p>
+           Der Betrag einer Zahl ist der "Wert" der Zahl ohne die Berücksichtigung des Vorzeichens. 
+           Er ist sozusagen der "Abstand" der Zahl zur 0. 
+           Wenn also eine Variable <code>var</code> in den <code>abs</code> Block eingesetzt wird, die den Wert -200 hat, dann ist der Betrag der Variable, die der <code>abs</code> 
+           Block ausgeben wird 200. 
+           Negative Vorzeichen werden also zu positiven und positive Vorzeichen bleiben positiv. 
+        </p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code kann der <code>abs</code> Block mit dem Befehl (<code>abs()</code>) realisiert werden. 
+            Wobei zwischen die Klammern hier die entsprechende Größe eingefügt wird, auf die der Befehl angewendet werden soll. 
+            <br>
+            <b>Beispiel:</b> Es soll der Betrag der Variable <code>var</code> im seriellen Monitor ausgegeben werden. 
+            <br><br>
+            In ArduBlock: 
+            <br><br>
+            <img src="abs-beispiel.png" alt="beispiel-absolut">
+            <br><br>
+            Im Code: 
+            <br><br>
+            <code> 
+                var_betrag = abs( var ); <br>
+                Serial.print("Der Betrag der Variable var ist: "); <br>
+                Serial.print(var_betrag ); <br>
+            </code>
+            
+
+        <p>
+
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/abs.png b/src/main/webapp/com/ardublock/reference/abs.png
new file mode 100644
index 0000000000000000000000000000000000000000..b99b7fa1ec2d208bdf5005ad56ae3385bfbebe2d
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/abs.png differ
diff --git a/src/main/webapp/com/ardublock/reference/addition-beispiel.png b/src/main/webapp/com/ardublock/reference/addition-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..5583cbac3dc20188f7e7cfcc1013dc3653f8d647
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/addition-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/addition.html b/src/main/webapp/com/ardublock/reference/addition.html
new file mode 100644
index 0000000000000000000000000000000000000000..41a95004fa4fca4d6516d7bcdfa3b7ed1f839cf1
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/addition.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+
+<link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+    
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Math. Operatoren / Operatoren</p>
+        <h1 style="font-size: 220%;">+</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "addition.png" alt="addition-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>+</code> Block ist ein mathematischer Operator, der zwei analoge Größen miteinander addiert und selbst einen analogen Wert annimmt. 
+            Es können fest programmierte Zahlenwerte, analoge Eingänge oder analoge Variablen miteinander verrechnet werden. 
+            Jedoch können pro <code>+</code> Block immer nur zwei Größen auf einmal addiert werden. 
+            Der <code>+</code> Block selbst kann dann als analoge Variable in anderen Blöcken verwendet werden. 
+            <br><br>
+            Wenn man mit der Maus über dem Block schwebt, dann erscheint ein kleiner Pfeil nach unten. 
+            Klickt man diesen mit der linken Maustaste, dann öffnet sich ein dropdown Menü und der <code>+</code> Block kann folgende Blöcke umgewandelt werden: 
+            <br><br>
+            <code>
+                &emsp;&emsp;- <br>
+                &emsp;&emsp;x <br>
+                &emsp;&emsp;/ <br>
+                &emsp;&emsp;% <br>
+            </code>
+            
+            <br><br>
+            Auf diese wird allerdings in der entsprechen eigenen Block-Referenz eingegangen. 
+        </p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code kann der <code>+</code> Block mit einem einfachen Plus-Zeichen (<code>+</code>) realisiert werden. 
+            Die beiden zu verrechnenden analogen Größen werden jeweils vor und nach dem Operator eingefügt. 
+            <br>
+            <b>Beispiel:</b> Die Variable <code>var</code> soll mit 100 addiert werden und es soll eine Nachricht im seriellen Monitor über den neuen Wert ausgegeben werden.  
+            <br><br>
+            In ArduBlock: 
+            <br><br>
+            <img src="addition-beispiel.png" alt="beispiel-addition">
+            <br><br>
+            Im Code: 
+            <br><br>
+            <code>
+                var = ( var <b style="color: red;">+</b> 100 ); <br>
+                Serial.print("Der neue Wert der Variable var ist: "); <br>
+                Serial.print(var ); <br>
+            } <br>
+            <br>
+            </code>
+            
+
+        <p>
+
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/addition.png b/src/main/webapp/com/ardublock/reference/addition.png
new file mode 100644
index 0000000000000000000000000000000000000000..47ef974dbb0333bc2854f5f8b596d1510ebadc4a
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/addition.png differ
diff --git a/src/main/webapp/com/ardublock/reference/and-beispiel.png b/src/main/webapp/com/ardublock/reference/and-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..77310c7850d2f3471dd612a4fe75dcfa10df6b4e
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/and-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/and.html b/src/main/webapp/com/ardublock/reference/and.html
new file mode 100644
index 0000000000000000000000000000000000000000..4ce3429734a878ba54cdc1e479dfa29f7495cac0
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/and.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+
+<link rel="stylesheet" href="_seitenformatierung.css">
+
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Log. Operatoren / Logische Verknüpfungen</p>
+        <h1 style="font-size: 220%;">Und</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "and.png" alt="und-Block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>UND</code> Block ist eine logische Verknüpfung von zwei digitalen Variablen, wobei diese auch beispielsweise digitale Eingänge sein könnten. 
+            Wenn beide Eingänge des <code>UND</code> Blocks wahr sind, dann ist auch der <code>UND</code> Block selbst wahr bzw. <code>TRUE</code>. 
+            Wenn man mit der Maus über den Block schwebt, dann erscheint ein kleiner Pfeil. 
+            Wenn man diesen anklickt, dann öffnet sich ein dropdown Menü, mit welchem man den <code>UND</code> Block in einen <code>ODER</code> Block umwandeln kann. 
+        </p>
+        <h2 class="unterueberschrift" id="beispiel">Beispiele</h2>
+        <p>
+            Hier ist eine Übersicht wie sich der <code>ODER</code> Block verhält, wenn man verschiedene logische Kombinationen an seinen Eingängen anlegt. 
+            Für <code>true</code> und <code>false</code> könnte hier auch <code>HIGH</code> oder <code>LOW</code> eingetragen werden. 
+            Diese haben dieselbe Bedeutung. 
+            Ein Verwenden von digitalen Variablen oder digitalen Eingängen des Arduinos ist natürlich ebenso möglich. 
+            <br><br>
+            <img src="and-beispiel.png" alt="Beispiel zum und Block" style="border:grey solid 2px;">
+        <p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code wird die <code>UND</code> Funktion mit zwei "und-Zeichen" (<code>&&</code>) zwischen den beiden Variablen realisiert. 
+            Alternativ kann das englische Wort <code>and</code> statt der beiden Symbole verwendet werden.
+            <br><br>
+            <b>Beispiel:</b>
+            <br>
+            Wenn am digitalen Pin 2 <b>und</b> am digitalen Pin 4 eine Spannung von 5 Volt anliegt, dann soll auf dem seriellen Monitor eine Mitteilung erscheinen. 
+            Dazu wird der <code>falls</code>, der <code>digitalRead</code> und der <code>Serial print</code> Befehl verwendet. 
+            <br><br>
+            Im Code sieht das dann folgendermaßen aus (der <code>UND</code> Teil ist rot markiert):
+            <br><br>
+            <code>
+                if (( digitalRead(2) <b style="color: red;">&&</b> digitalRead(4) )) { <br>
+                &emsp;&emsp;Serial.print("An Pin 2 und 4 liegt Spannung an! "); <br>
+              } <br>
+            </code>
+            
+              <br>
+            Alternativ:
+            <br><br>
+            <code>
+                if (( digitalRead(2) <b style="color: red;">and</b> digitalRead(4) )) { <br>
+                &emsp;&emsp;Serial.print("An Pin 2 und 4 liegt Spannung an! "); <br>
+              } <br>
+            </code>
+            
+              <br>
+        <p>
+
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/and.png b/src/main/webapp/com/ardublock/reference/and.png
new file mode 100644
index 0000000000000000000000000000000000000000..ca25200b8ea9245c98ae8ef1252eb4335a61b801
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/and.png differ
diff --git a/src/main/webapp/com/ardublock/reference/code_comment.html b/src/main/webapp/com/ardublock/reference/code_comment.html
new file mode 100644
index 0000000000000000000000000000000000000000..cab7496c6661b0512c2dd1b9ec834f39080ae4c3
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/code_comment.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+<link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Kommentare/Code</p>
+        <h1 style="font-size: 220%;">//Kommentar einfuegen</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "code_comment.png" alt="kommentar-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>//Kommentar einfuegen</code> Block hat keine Auswirkungen auf den Ablauf des Programmes. 
+            Seine Funktion ist es lediglich eine Information über eine bestimmte Stelle im Programm zu geben. 
+            Die Kommentarfunktion ist daher eine sehr nützliche Funktion und wird in der Softwareentwicklung überall eingesetzt. 
+            <br><br>
+            Der Kommentar, der mit diesem Block geschrieben wird, kann zwischen zwei Blocke eingefügt werden. 
+            Im generierten Code werden diese Informationen dann auch zwischen den Befehlen eingefügt. 
+            Es kann alles mögliche in Textform in den Kommentar eingefügt werden. 
+            <br>
+            Mit einem linken Mausklick auf den Text wird der Bearbeitungsmodus aktiviert und dieser kann geändert werden.
+            Mit einem Druck auf die Enter-Taste wird dieser wieder verlassen. 
+            Wenn man mit der Maus über dem Block schwebt, dann erscheint auf diesem ein Pfeil nach unten. 
+            Klickt man diesen, dann öffnet sich ein Dropdown-Menü in dem der Block in einen <code>//Kommentar im globalen Bereich einfügen</code> Block umgewandelt werden kann. 
+        </p>
+        <h2 class="unterueberschrift" id="">Code</h2>
+        <p>
+            Obwohl der <code>//Kommentar einfuegen</code> Block keine direkte logische Funktion im Code besitzt, kommt er darin 
+            jedoch sehr wohl vor. 
+            <br><br>
+            Kommentare in der Arduino IDE, die in einer Zeile eingefügt werden sollen beginnen mit zwei "Slashs" (<code>//</code>).
+            Die ganze Zeile, die rechts von diesen Symbolen steht wird in grauer Farbe dargestellt und beim Programmablauf ignoriert. 
+            Sie dient nur als Hinweis für den Programmierer oder die Programmiererin. 
+            Als Kommentar kann alles Denkbare in Textform eingetragen werden. 
+            <br><br>
+            <b>Beispiel:</b> In einer Zeile soll der Kommentar "Hier wird die Variable xy um 1 hochgezählt" eingefügt werden. 
+            Das würde im Code so aussehen:
+            <br><br>
+            <code>
+                //Hier wird die Variable xy um 1 hochgezählt
+            </code>
+        <p>
+    </div>
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/code_comment.png b/src/main/webapp/com/ardublock/reference/code_comment.png
new file mode 100644
index 0000000000000000000000000000000000000000..04d28cab5387afd56ab696da7bfcae891b2bf120
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/code_comment.png differ
diff --git a/src/main/webapp/com/ardublock/reference/code_comment_head.html b/src/main/webapp/com/ardublock/reference/code_comment_head.html
new file mode 100644
index 0000000000000000000000000000000000000000..19ffa05717c07c497c1d8219cc1196712464439d
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/code_comment_head.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+<link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Kommentare/Code</p>
+        <h1 style="font-size: 220%;">//Kommentar im globalen Bereich einfügen</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "code_comment_head.png" alt="kommentar-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>//Kommentar im globalen Bereich einfügen</code> Block hat keine Auswirkungen auf den Ablauf des Programmes. 
+            Seine Funktion ist es lediglich eine Information über das Programm zu geben. 
+            Die Kommentarfunktion ist daher eine sehr nützliche Funktion und wird in der Softwareentwicklung überall eingesetzt. 
+            <br><br>
+            Der Kommentar, der mit diesem Block geschrieben wird, kann zwischen zwei Blocke eingefügt werden. 
+            Im generierten Code werden diese Informationen dann allerdings am Anfang des Codes eingefügt. 
+            Es kann alles mögliche in Textform in den Kommentarblock eingefügt werden. 
+            <br>
+            Mit einem linken Mausklick auf den Text wird der Bearbeitungsmodus aktiviert und dieser kann geändert werden.
+            Mit einem Druck auf die Enter-Taste wird dieser wieder verlassen.  
+            Wenn man mit der Maus über dem Block schwebt, dann erscheint auf diesem ein Pfeil nach unten. 
+            Klickt man diesen, dann öffnet sich ein Dropdown-Menü in dem der Block in einen <code>//Kommentar einfügen</code> Block umgewandelt werden kann. 
+            Auf diesen wird in einer eigenen Referenz eingegangen. 
+        </p>
+        <h2 class="unterueberschrift" id="">Code</h2>
+        <p>
+            Obwohl der <code>//Kommentar im globalen Bereich einfügen</code> Block keine direkte logische Funktion im Code besitzt, kommt er darin 
+            jedoch sehr wohl vor. 
+            <br><br>
+            Kommentare in der Arduino IDE, die in einer Zeile eingefügt werden sollen beginnen mit zwei "Slashs" (<code>//</code>).
+            Die ganze Zeile, die rechts von diesen Symbolen steht wird in grauer Farbe dargestellt und beim Programmablauf ignoriert. 
+            Sie dient nur als Hinweis für den Programmierer oder die Programmiererin. 
+            Als Kommentar kann alles Denkbare in Textform eingetragen werden. 
+            <br><br>
+            <b>Beispiel:</b> In einer Zeile soll der Kommentar "Hier wird die Variable xy um 1 hochgezählt" eingefügt werden. 
+            Das würde im Code so aussehen:
+            <br><br>
+            <code>
+                //Hier wird die Variable xy um 1 hochgezählt
+            </code>
+        <p>
+    </div>
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/code_comment_head.png b/src/main/webapp/com/ardublock/reference/code_comment_head.png
new file mode 100644
index 0000000000000000000000000000000000000000..07b09aee592e3fefab666cbf09657cb74e768fae
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/code_comment_head.png differ
diff --git a/src/main/webapp/com/ardublock/reference/constrain-beispiel.png b/src/main/webapp/com/ardublock/reference/constrain-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..f3d2a17c54ad18fd65ac98347c9fe4608d654b8d
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/constrain-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/constrain.html b/src/main/webapp/com/ardublock/reference/constrain.html
new file mode 100644
index 0000000000000000000000000000000000000000..84ab126abb6a15fe8059a84060ab7a0e5463e926
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/constrain.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+    <link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Math. Operatoren / Signalanpassung</p>
+        <h1 style="font-size: 220%;">einschränken</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "constrain.png" alt="addition-block" usemap="#blockmap"></img>
+            <figcaption id="caption">Für Erklärung auf einzelne Komponenten klicken.</figcaption>
+            </figure> 
+        </div>
+
+        <map name="blockmap">
+            <area shape="rect" coords="20, 20, 180, 128" href="#block_beschreibung" title="Block"></area>
+            <area shape="rect" coords="192, 20, 276, 55" href="#wert" title="Wert, der eingeschränkt werden soll"></area>
+            <area shape="rect" coords="185, 58, 344, 127" href="#unterer_oberer" title="Werte, auf die der Wert beschränkt werden soll"></area>
+        </map>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>einschränken</code> Block ist ein Block, der zur Signalanpassing dient. 
+            Mit ihm lassen sich Variablen in einen bestimmten Zahlenbereich limitieren. 
+            Die eingeschränkte Variable kann dann selbst nicht mehr über bzw. unter die angegebenen Werte gehen. 
+            Der <code>einschränken</code> Block kann selbst wie eine analoge Variable eingesetzt werden. 
+        </p>
+        <h2 class="unterueberschrift" id="wert">Wert</h2>
+        <p>
+            In den <code>Wert</code> Parameter wird die entsprechende Variable eingesetzt, die eingeschränkt werden soll. 
+            Hier kann man auch analoge Eingänge einsetzen. 
+            Auch fest programmierte Werte können eingesetzt werden, was allerdings nicht eine sehr sinnvolle Lösung wäre. 
+        </p>
+        <h2 class="unterueberschrift" id="unterer_oberer">unterer/ oberer</h2>
+        <p>
+            Der <code>unterer</code> Parameter gibt die untere Grenze für die angegebene Variable an. 
+            Unterschreitet diese den unter <code>unterer</code> angegebenen Wert, dann gibt der <code>einschränken</code> Block den Wert aus, der unter <code>unterer</code> eingetragen wurde. 
+            Der <code>oberer</code> Parameter gibt die obere Grenze für die angegebene Variable an. 
+            Übersteigt diese den unter <code>oberer</code> angegebenen Wert, dann gibt der <code>einschränken</code> Block den Wert aus, der unter <code>oberer</code> eingetragen wurde.
+        </p>
+        <h2 class="unterueberschrift" id="block_beschreibung">Beispiel</h2>
+        <p>
+            Die Variable <code>winkel</code> gibt den Winkel einer Plattform in Grad an. 
+            Dieser soll mechanisch bedingt allerdings einen Wert von -90° nicht unterschreiten und einen Winkel von 90° nicht überschreiten, also verwendet man den <code>einschränken</code> Block. 
+            <br><br>
+            In ArduBlock:
+            <br><br>
+            <img src="constrain-beispiel.png" alt="beispiel-einschränken">
+        </p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code kann der <code>zuordnen</code> Block mit dem Befehl <code>constrain( Wert , untere , obere )</code> realisiert werden. 
+            Wobei für den die entsprechenden Parameter natürlich eingetragen werden müssen. 
+            <br><br>
+            Das Beispiel von oben würde im Code dann folgendermaßen aussehen: 
+            <br><br>
+            <code>
+                &emsp;&emsp;constrain(winkel, -90, 90);
+            </code>
+        <p>
+    </div>
+</article>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/constrain.png b/src/main/webapp/com/ardublock/reference/constrain.png
new file mode 100644
index 0000000000000000000000000000000000000000..b54185c744024f65638771e6fa8ddaea27b02c67
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/constrain.png differ
diff --git a/src/main/webapp/com/ardublock/reference/delay-beispiel.png b/src/main/webapp/com/ardublock/reference/delay-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..dff6fecc45adf5981233b25c38e38a3130114fd0
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/delay-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/delay.html b/src/main/webapp/com/ardublock/reference/delay.html
new file mode 100644
index 0000000000000000000000000000000000000000..ed6c05da8b52d0342c2547b52496cca9ce1e8194
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/delay.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+
+<link rel="stylesheet" href="_seitenformatierung.css">
+
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Steuerung / Warten</p>
+        <h1 style="font-size: 220%;">warte Millisekunden</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "delay.png" alt="warte" usemap="#blockmap"></img>
+            <figcaption id="caption">Für Erklärung auf einzelne Komponenten klicken.</figcaption>
+            </figure> 
+        </div>
+        <map name="blockmap">
+            <area shape="rect" coords="20, 20, 260, 66" href="#block_beschreibung" title="Auszuführende Operation"></area>
+            <area shape="rect" coords="263, 16, 505, 64" href="#millisekunden" title="Anzahl der zu wartenden Millisekunden"></area>
+        </map>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>warte Millisekunden</code> Block ist recht simpel. Wenn er im Programm erreicht wird, dann werden keine weiteren Befehle ausgeführt, bis die angegebene Zeit abgelaufen ist.
+            <br>
+            1000 Millisekunden entsprechen einer Sekunde. Will man also beispielsweise das Programm an einer Stelle 5 Sekunden warten lassen, dann müsste man in dem 
+            <code>Millisekunden</code> Parameter einen analogen Wert von 5000 übergeben.
+        </p>
+        <h2 class="unterueberschrift" id="millisekunden">Millisekunden</h2>
+        <p>
+            Der <code>Millisekunden</code> Parameter gibt die Wartezeit in Millisekunden vor. Hier kann ein fester Wert oder eine Variable eingesetzt werden. 
+            Es muss sich allerdings um eine <b>ganze</b> Zahl handeln.
+        </p>
+        
+        
+        <h2 class="unterueberschrift">Beispiel</h2>
+        <p>
+            Als Beispiel kann man hier ein kleines Programm bauen, das in einer Endlosschleife alle 2 Sekunden einen analogen Eingang (hier A0) auswertet und dessen Wert dann auf dem seriellen Monitor ausgibt. 
+            Die Verzögerung um 2 Sekunden wird durch einen <code>warte Millisekunden</code> Block realisiert.
+            <br><br>
+            In ArduBlock könnte das so aussehen:
+            <br><br>
+            <img src="delay-beispiel.png" alt="beispiel-zum-warte-millisekunden-block">
+            
+        </p>
+        <h2 class="unterueberschrift">Code</h2>
+        <p>
+            Im Code wird der <code>Millisekunden</code> Block mit dem Befehl <code>delay(Millisekunden)</code> realisiert. Delay ist Englisch und heißt so viel wie "warten" oder "verzögern".
+            In die runden Klammern wird einfach die zu verzögernde Zeit in Millisekunden eingetragen.
+            <br><br>
+            Im Code würde das Beispiel dann folgendermaßen aussehen:
+            <br><br>
+            <code>
+                void loop() { <br>
+                    &emsp;&emsp;Serial.print("Wert: "); <br>
+                    &emsp;&emsp;Serial.print(analogRead(0) ); <br>
+                    &emsp;&emsp;Serial.println(); <br>
+                    &emsp;&emsp;delay( 2000 ); <br>
+                } <br>
+            </code> <br>
+        </p>
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/delay.png b/src/main/webapp/com/ardublock/reference/delay.png
new file mode 100644
index 0000000000000000000000000000000000000000..f6967aa3cdc1d5e381c9ce6da8344e1c3df3daf8
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/delay.png differ
diff --git a/src/main/webapp/com/ardublock/reference/digital-high.html b/src/main/webapp/com/ardublock/reference/digital-high.html
new file mode 100644
index 0000000000000000000000000000000000000000..3ea390cdedfc9b4746baf389f05027d6b5b1df24
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/digital-high.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+
+<link rel="stylesheet" href="_seitenformatierung.css">
+
+<body style="margin: 0px;">
+
+<div style="border: #284a66; border-style: solid; border-width: 5px;">
+    <nav>
+    <li id="beschreibung">Block-Referenz</li>
+    <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+    <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+    </nav>
+</div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Math. Operatoren / Digital</p>
+        <h1 style="font-size: 220%;">HIGH</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "digital-high.png" alt="digital-high-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>HIGH</code> Block beschreibt einen von zwei <b>digitalen Zuständen</b>. 
+            Er kann überall eingesetzt werden, wo eine digitale Größe eingesetzt werden kann (runde Form). 
+            Zum Beispiel beim Setzen von lokalen oder globalen digitalen Variablen, als <code>teste</code> Bedingung in <code>falls</code> 
+            oder <code>sonst falls</code> Blöcken oder in Blöcken zum Vergleich digitaler Größen z.B.( <code>UND / ODER / == / != </code>).
+            <br>
+            Der <code>HIGH</code> Block ist gleichbedeutend mit dem <code>true</code> Block.
+            <br><br>
+            Wenn man mit der Maus über dem Block schwebt, dann erscheint darauf ein kleiner Pfeil, der nach unten zeigt. 
+            Klickt man mit der linken Maustaste auf diesen, dann öffnet sich ein Dropdown Menü mit welchem man den 
+            <code>HIGH</code> Block in einen <code>LOW</code> Block umwandeln kann.
+            <br>
+            Dieser wird in einer eigenen Referenz erklärt. 
+         </p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>          
+            Im Code wird der <code>HIGH</code> Block mit dem Befehl <code>HIGH</code> realisiert. 
+            Dieser kann in anderen Funktionen wie eine digitale Variable verwendet werden, allerdings ist diese dann immer wahr. 
+            <br><br>
+            Man kann damit zum Beispiel die Funktion von <code>falls</code> Blöcken testen, da diese immer ausgeführt werden, wenn ein 
+            <code>HIGH</code> Block in die Teste-Bedingung eingesetzt wird. 
+        <p>
+</div>
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/digital-high.png b/src/main/webapp/com/ardublock/reference/digital-high.png
new file mode 100644
index 0000000000000000000000000000000000000000..abd395bb631f73d90e4e4bc21cb34fefff2a9c20
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/digital-high.png differ
diff --git a/src/main/webapp/com/ardublock/reference/digital-low.html b/src/main/webapp/com/ardublock/reference/digital-low.html
new file mode 100644
index 0000000000000000000000000000000000000000..b1e8a77c4f92ab287259df32e8f8a25f4b044e1c
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/digital-low.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+
+<link rel="stylesheet" href="_seitenformatierung.css">
+
+<body style="margin: 0px;">
+
+<div style="border: #284a66; border-style: solid; border-width: 5px;">
+    <nav>
+    <li id="beschreibung">Block-Referenz</li>
+    <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+    <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+    </nav>
+</div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Math. Operatoren / Digital</p>
+        <h1 style="font-size: 220%;">LOW</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "digital-low.png" alt="digital-low-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>LOW</code> Block beschreibt einen von zwei <b>digitalen Zuständen</b>. 
+            Er kann überall eingesetzt werden, wo eine digitale Größe eingesetzt werden kann (runde Form). 
+            Zum Beispiel beim Setzen von lokalen oder globalen digitalen Variablen, als <code>teste</code> Bedingung in <code>falls</code> 
+            oder <code>sonst falls</code> Blöcken oder in Blöcken zum Vergleich digitaler Größen z.B.( <code>UND / ODER / == / != </code>).
+            <br>
+            Der <code>LOW</code> Block ist gleichbedeutend mit dem <code>false</code> Block.
+            <br><br>
+            Wenn man mit der Maus über dem Block schwebt, dann erscheint darauf ein kleiner Pfeil, der nach unten zeigt. 
+            Klickt man mit der linken Maustaste auf diesen, dann öffnet sich ein Dropdown Menü mit welchem man den 
+            <code>LOW</code> Block in einen <code>HIGH</code> Block umwandeln kann.
+            <br>
+            Dieser wird in einer eigenen Referenz erklärt. 
+         </p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>          
+            Im Code wird der <code>LOW</code> Block mit dem Befehl <code>LOW</code> realisiert. 
+            Dieser kann in anderen Funktionen wie eine digitale Variable verwendet werden, allerdings ist diese dann immer falsch. 
+            <br><br>
+            Man kann damit zum Beispiel die Funktion von <code>sonst</code> Blöcken testen, da diese immer ausgeführt werden, wenn im 
+            <code>falls</code> Block ein <code>LOW</code> Block in der Teste-Bedingung steht. 
+        <p>
+</div>
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/digital-low.png b/src/main/webapp/com/ardublock/reference/digital-low.png
new file mode 100644
index 0000000000000000000000000000000000000000..0ee4ebf1cc34bb8d9633373ebf9d4ac5a5058f8e
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/digital-low.png differ
diff --git a/src/main/webapp/com/ardublock/reference/division-beispiel.png b/src/main/webapp/com/ardublock/reference/division-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..c3f857047385e9f6f6099f92e976ad940e4e7b38
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/division-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/division.html b/src/main/webapp/com/ardublock/reference/division.html
new file mode 100644
index 0000000000000000000000000000000000000000..638d65dacae0931ea4f6ef76acf6c50cfc344901
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/division.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+
+<link rel="stylesheet" href="_seitenformatierung.css">
+
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Math. Operatoren / Operatoren</p>
+        <h1 style="font-size: 220%;">/</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "division.png" alt="teile-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>/</code> Block ist ein mathematischer Operator, der eine analoge Größe durch die andere dividiert und selbst einen analogen Wert annimmt. 
+            Es können fest Programmierte Zahlenwerte, analoge Eingänge oder analoge Variablen miteinander verrechnet werden. 
+            Jedoch können pro <code>/</code> Block immer nur eine Größe durch eine andere geteilt werden. 
+            Der <code>/</code> Block selbst kann dann als analoge Variable in anderen Blöcken verwendet werden. 
+            <br><br>
+            Wenn man mit der Maus über dem Block schwebt, dann erscheint ein kleiner Pfeil nach unten. 
+            Klickt man diesen mit der linken Maustaste, dann öffnet sich ein Dropdown Menü und der <code>/</code> Block kann folgende Blöcke umgewandelt werden: 
+            <br><br>
+            <code>
+                &emsp;&emsp;+ <br>
+                &emsp;&emsp;- <br>
+                &emsp;&emsp;x <br>
+                &emsp;&emsp;/ <br>
+                &emsp;&emsp;% <br>
+            </code>
+            
+            <br><br>
+            Auf diese wird allerdings in der entsprechen eigenen Block-Referenz eingegangen. 
+        </p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code kann der <code>/</code> Block mit einem einfachen Slash (<code>/</code>) realisiert werden. 
+            Die beiden zu verrechnenden analogen Größen werden jeweils vor und nach dem Operator eingefügt. 
+            <br>
+            <b>Beispiel:</b> Variable <code>var</code> soll durch 2 geteilt werden und es soll eine Nachricht im seriellen Monitor über den neuen Wert ausgegeben werden.  
+            <br><br>
+            In ArduBlock: 
+            <br><br>
+            <img src="division-beispiel.png" alt="beispiel-addition">
+            <br><br>
+            Im Code: 
+            <br><br>
+            <code>
+                var = ( var <b style="color: red;">/</b> 2 ); <br>
+                Serial.print("Der neue Wert der Variable var ist: "); <br>
+                Serial.print(var ); <br>
+            } <br>
+            <br>
+            </code>
+            
+
+        <p>
+
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/division.png b/src/main/webapp/com/ardublock/reference/division.png
new file mode 100644
index 0000000000000000000000000000000000000000..346453596bb4e19762cf6e115b77144798de27dc
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/division.png differ
diff --git a/src/main/webapp/com/ardublock/reference/else-beispiel.png b/src/main/webapp/com/ardublock/reference/else-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..f9a6073a45e504cf57578af8d0a45dc9eed7e059
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/else-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/else.html b/src/main/webapp/com/ardublock/reference/else.html
new file mode 100644
index 0000000000000000000000000000000000000000..68a8f2e1c5998aa2a69977aa8f6fe3a96c37b0f0
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/else.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+
+<link rel="stylesheet" href="_seitenformatierung.css">
+
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Steuerung / Verzweigung</p>
+        <h1 style="font-size: 220%;">sonst</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+             <a href="#block_beschreibung"><img id="block_bild" src = "else.png" alt="sonst-Block"></img></a>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>sonst</code> Block kann als Ergänzung des <code>falls</code> Blocks gesehen werden. Er kann <b>nur</b> direkt im Anschluss an einen zuvor gesetzten <code>falls</code> oder <code>sonst falls</code> 
+            Block gesetzt werden. Die Positionierung unter anderen Blöcken ist in ArduBlock zwar grundsätzlich möglich, jedoch wird der Compiler der Arduino IDE hier einen Fehler melden 
+            und den Code nicht auf den Microcontroller laden können.
+            <br>
+            Der <code>sonst</code> Block ist mit den <code>falls</code> und <code>sonst falls</code> Blöcken verwandt. Auch mit ihm lässt sich eine Verzweigung erstellen.
+            <br>
+            Allerdings ist diese Verzweigung nicht an eine <code>teste</code> Bedingung geknüpft.
+            <br><br>
+            Für den folgenden Abschnitt wird davon ausgegangen, dass der <code>falls</code> bzw. <code>sonst falls</code> Block verstanden wurde.
+            Diese Blöcke prüfen Bedingungen darauf ob sie wahr oder falsch sind und führen dann bei einer wahren Bedingung ein vorgegebenes Stück Code aus.
+            Falls die Bedingungen eines <code>falls</code> Blocks und eventuell noch darauffolgenden <code>sonst falls</code> Blöcken alle nicht erfüllt, also <code>FALSE</code> sind, wird keine der 
+            unter <code>dann</code> eingegebenden Codeabschnitte ausgeführt.
+            <br>
+            Hier kommt nun der <code>sonst</code> Block ins Spiel. 
+            Dieser kann zum Absichern von Verzweigungen verwendet werden, so dass das Programm gezwungen ist einen Zweig zu gehen auch wenn alle anderen Bedingungen nicht erfüllt sind.
+            Darum besitzt der <code>sonst</code> Block auch keine <code>teste</code> Bedingung, denn seine Bedingung ist, dass die Bedingungen der <code>falls</code> und <code>sonst falls</code> 
+            Blöcke an die er angehängt ist alle nicht erfüllt sind. Im <a href="#else-beispiel">Beispiel</a> wird dies klarer.
+        </p>
+        <h2 class="unterueberschrift">dann</h2>
+        <p>
+            In den <code>dann</code> Abschnitt kann eine Folge von weiteren Blöcken zu Anweisung von Befehlen eingefügt werden. 
+            Dies kann zum Beispiel ein <code>digitalWrite</code> Block sein, der einen Pin <code>HIGH</code> oder <code>LOW</code> schält oder eine Variable, die auf einen bestimmten Wert gesetzt werden soll und so weiter.
+        </p>
+        
+        <h2 class="unterueberschrift" id="else-beispiel">Beispiel</h2>
+        <p>
+            Nun soll das Beispiel aus der <code>falls</code> Block-Referenz wieder herangezogen werden. Wir gehen davon aus, dass eine Variable namens <code>temperatur</code> angelegt wurde, die die 
+            aktuelle Temperatur in °C angibt. Der Ausgang des Pin 2 kontrolliert einen Ventilator.
+            Wenn die Temperatur größer als 28°C ist soll der Ventilator eingeschaltet werden. Andernfalls soll er ausgeschaltet werden, indem der Pin 2 auf <code>LOW</code> geschaltet wird.
+            <br><br>
+            Für die zweite Bedingung soll ein <code>sonst</code> Block verwendet werden.
+            <br><br>
+            So könnte das Beispiel in ArduBlock aussehen:
+            <br><br>
+            <img src="else-beispiel.png" alt="else-besipiel" style="padding-left: 2px;">
+            
+        </p>
+        <h2 class="unterueberschrift">Code</h2>
+        <p>
+            Im Code für den Arduino wird der Baustein mit der Funktion <code>else{dann}</code> umgesetzt. ("else" ist Englisch und heißt übersetzt "sonst" oder "andernfalls")
+            Der auszuführende Code wird in die geschweiften Klammern {} geschrieben.
+            <br><br>
+            Im Code würde das Beispiel dann folgendermaßen aussehen:
+            
+            <br><br>
+            <code>
+                if (( temperatur > 28 )) { <br>
+                &emsp;&emsp;digitalWrite( 2 , HIGH ); <br>
+                } <br>
+                else { <br>
+                &emsp;&emsp;digitalWrite( 2 , LOW ); <br>
+                } <br>
+              </code> <br>
+        </p>
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/else.png b/src/main/webapp/com/ardublock/reference/else.png
new file mode 100644
index 0000000000000000000000000000000000000000..776eed5e5deb35f19c6171c8fa5a569dbb816ae7
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/else.png differ
diff --git a/src/main/webapp/com/ardublock/reference/elseif-beispiel.png b/src/main/webapp/com/ardublock/reference/elseif-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..b5fcdc96bd2e8c7a8c1b56df57517a093940f830
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/elseif-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/elseif.html b/src/main/webapp/com/ardublock/reference/elseif.html
new file mode 100644
index 0000000000000000000000000000000000000000..e03ebe2cf18f0d0d4f8b3cc9e896ea6e06a3d84a
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/elseif.html
@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html>
+<link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Steuerung / Verzweigung</p>
+        <h1 style="font-size: 220%;">sonst falls</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "elseif.png" alt="sonst-falls-Block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>sonst falls</code> Block kann als Erweiterung des <code>falls</code> Blocks gesehen werden. Er kann <b>nur</b> direkt im Anschluss an einen zuvor gesetzten <code>falls</code> oder <code>sonst falls</code> 
+            Block gesetzt werden. Die Positionierung unnter anderen Blöcken ist in ArduBlock zwar grundsätzlich möglich, jedoch wird der Compiler der Arduino IDE hier einen Fehler melden 
+            und den Code nicht auf den Microcontroller laden können.
+            <br>
+            Der <code>sonst falls</code> Block funktioniert im Prinzip genau wie der <code>falls</code> Block.
+            Daher ist es hilfreich sich, falls noch nicht geschehen, zuerst mit diesem auseinander zu setzen. 
+            Auch der <code>sonst falls</code> Block hat eine Bedingung, die im <code>teste</code> Parameter vorgegeben werden kann und die entweder wahr (<code>true</code>) oder falsch (<code>false</code>) sein kann. 
+            Wenn die Bedingung wahr ist, dann werden Befehle, die im <code>dann</code> Feld eingetragen wurden ausgeführt, wenn die Bedingung jedoch falsch ist werden diese Befehle übersprungen.
+            <br><br>
+            Es können beliebig viele <code>sonst falls</code> Blöcke unter einen <code>falls</code> Block gehängt werden.
+            Die Blöcke werden dann von oben nach unten abgearbeitet. Wenn eine Bedingung nicht erfüllt ist, dann wird die nächste Bedingung getestet und so weiter.
+            <br><br>
+            <b style="color: red;">Achtung:</b> Wenn eine Bedingung erfüllt ist, dann werden die angehängten <code>sonst falls</code> Blöcke übersprungen. Aus einer Kette eines <code>falls</code> und 
+            einem oder mehreren <code>sonst falls</code> Blöcken kann immer nur <b>höchstens</b> ein <code>dann</code> ausgeführt werden.
+
+        </p>
+        <h2 class="unterueberschrift">teste</h2>
+        <p>
+            In den <code>teste</code> Parameter wird eine Bedingung eingesetzt. Diese kann nur zwei mögliche Zustände haben. Entweder die Bedingung ist wahr (<code>true</code>) oder falsch (<code>false</code>). 
+            Es kann ein digitaler Eingang abgefragt, an dem entweder ein Signal anliegt, dann ist dieser wahr und der Code wird ausgeführt oder wenn kein Signal anliegt und die Bedingung nicht erfüllt ist 
+            der Code dann eben übersprungen wird.
+            <br><br>
+            Es können auch zwei Variablen oder eine Variable mit einem festen Wert verglichen werden. Zum Beispiel, dass die Temperatur eines Sensors über 28°C liegen muss um einen Pin umzuschalten, der dann einen 
+            Ventilator steuert. Weiter unten wird dies in einem <a href="#elseif-besipiel">Beispiel</a> erklärt.
+        </p>
+        <h2 class="unterueberschrift">dann</h2>
+        <p>
+            In den <code>dann</code> Abschnitt kann eine Folge von weiteren Blöcken zu Anweisung von Befehlen eingefügt werden. 
+            Dies kann zum Beispiel ein <code>digitalWrite</code> Block sein, der einen Pin <code>HIGH</code> oder <code>LOW</code> schält oder eine Variable, die gesetzt werden soll 
+            oder sogar weitere <code>falls</code> Blöcke, wobei sich hier auch die Verwendung eines <code>sonst falls</code> Blocks anbietet. 
+        </p>
+        
+        <h2 class="unterueberschrift" id="elseif-besipiel">Beispiel</h2>
+        <p>
+            Für dieses Beispiel ist es hilfreich den <code>analogWrite</code> Block und den <code>sonst</code> Block bereits zu kennen.
+            <br>
+            Nun soll das Beispiel aus der <code>falls</code> Block-Referenz wieder heran gezogen werden. Wir gehen davon aus, dass eine Variable namens <code>temperatur</code> angelegt wurde, die die 
+            aktuelle Temperatur in °C angibt.
+            Es soll ein Ventilator über die Temperatur gesteuert werden.
+            <br><br>
+            Der Pin 3 steuert den Ventilator. Dieser soll als <b>analoger Ausgang</b> verwendet werden. Wenn der Pin 3 auf einen Wert von 50 gesetzt wird läuft der Ventilator auf der Stufe 1, 
+            wenn er auf 100 gesetzt wird dann läuft der Ventilator auf der Stufe 2. Wenn der Ausgang auf 0 gesetzt wird ist der Ventilator aus.
+            <br>
+            Nun hat der Ventilator drei Zustände. Stufe 1, Stufe 2 und aus.
+            Bei einer Temperatur von über 28°C soll der Ventilator auf der Stufe 2 laufen. Bei einer Temperatur von 24°C bis einschließlich 28°C soll der Ventilator auf der Stufe 1 laufen und 
+            bei einer Temperatur von unter 24°C soll er aus sein.
+            <br>
+            Für die Zweite Bedingung wird ein <code>sonst falls</code> Block verwendet.
+            <br>
+            So könnte das Beispiel in ArduBlock aussehen:
+            <br><br>
+            <img src="elseif-beispiel.png" alt="elseif-besipiel" style="padding-left: 20px;">
+            
+        </p>
+        <h2 class="unterueberschrift">Code</h2>
+        <p>
+            Im Code für den Arduino wird der Baustein mit der Funktion <code>else if(teste){dann}</code> umgesetzt. ("else if" ist Englisch und heißt übersetzt "sonst wenn" oder "sonst falls").
+            Wo hier <code>teste</code> eingetragen wurde müsste dann natürlich die zu überprüfende Bedingung eingetragen werden.
+            Wo hier <code>dann</code> eingetragen ist müssen dann natürlich die auszuführenden Befehle eingetragen werden.
+            <br><br>
+            Im Code würde das Beispiel dann folgendermaßen aussehen:
+            
+            <br><br>
+            <code>
+                if (( temperatur  > 28 )) { <br>
+                    &emsp;&emsp;analogWrite(3 , 100); <br>
+                  } <br>
+                else if(( ( temperatur &lt;= 28 ) && ( temperatur >= 24 ) )) { <br>
+                    &emsp;&emsp;analogWrite(3 , 50); <br>
+                  } <br>
+                  else { <br>
+                    &emsp;&emsp;analogWrite(3 , 0); <br>
+                  } <br>
+              </code> <br>
+        </p>
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/elseif.png b/src/main/webapp/com/ardublock/reference/elseif.png
new file mode 100644
index 0000000000000000000000000000000000000000..8de7c52f1f5080a732220774405c56e877dbc3b8
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/elseif.png differ
diff --git a/src/main/webapp/com/ardublock/reference/equal-beispiel.png b/src/main/webapp/com/ardublock/reference/equal-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..d475e8eb319685bdd91c26de23d45f06b4d85671
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/equal-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/equal.html b/src/main/webapp/com/ardublock/reference/equal.html
new file mode 100644
index 0000000000000000000000000000000000000000..ceda805cc4aabc1faac0217e198b8636e83a8bdc
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/equal.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+<link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Log. Operatoren / Vergleiche</p>
+        <h1 style="font-size: 220%;">== (analog)</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "equal.png" alt="analog-gleich-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der analoge <code>==</code> Block ist ein Logik-Block, der zwei analoge Größen miteinander vergleicht, selbst aber nur einen digitalen Zustand (entweder <code>true</code> oder <code>false</code>) annehmen kann. 
+            Es können fest Programmierte Zahlenwerte, analoge Eingänge oder analoge Variablen miteinander verglichen werden. 
+            Jedoch können pro analogem <code>==</code> Block immer nur zwei Größen auf einmal verglichen werden. 
+            Der analoge <code>==</code> Block ist <code>true</code>, wenn die beiden zu vergleichenden Größen den gleichen Wert haben. 
+            <br>
+            Ist die Größe im linken Feld größer, als die im rechten Feld, dann ist der Block an sich <code>false</code>. 
+            Ist die Größe im rechten Feld größer, als die im linken Feld, dann ist der Block an sich <code>false</code>. 
+            Haben beide Größen den gleichen Wert, dann ist der Block an sich <code>true</code>. 
+            <br><br>
+            Wenn man mit der Maus über dem Block schwebt, dann erscheint ein kleiner Pfeil nach unten. 
+            Klickt man diesen mit der linken Maustaste, dann öffnet sich ein Dropdown Menü und der <code>==</code> Block kann folgende Blöcke umgewandelt werden: 
+            <br><br>
+            <code>
+                &emsp;&emsp;&gt; <br>
+                &emsp;&emsp;&lt; <br>
+                &emsp;&emsp;&gt;= <br>
+                &emsp;&emsp;&lt;= <br>
+                &emsp;&emsp;!= (analog) <br>
+            </code>
+            
+            <br><br>
+            Auf diese wird allerdings in der entsprechen eigenen Block-Referenz eingegangen.
+        </p>
+        <h2 class="unterueberschrift" id="beispiel">Beispiel</h2>
+        <p>
+            Hier sind drei Beispiele, wie sich der analoge <code>==</code> Block verhält, wenn man verschiedene, beispielhafte Werte an seinen Eingängen anlegt. 
+            <br>
+            Für die fest eingesetzten Zahlenwerte können hier auch analoge Variablen oder analoge Eingänge verwendet werden:
+            <br><br>
+            <img src="equal-beispiel.png" alt="analog-gleich-beispiel" style="border:grey solid 2px">
+        <p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code kann der analoge <code>==</code> Block mit zwei Gleich-Zeichen (<code>==</code>) realisiert werden. 
+            Die beiden zu vergleichenden analogen Größen werden jeweils vor und nach dem Operator eingefügt. 
+            <br>
+            <b>Beispiel:</b> Wenn die Variable <code>var</code> gleich 100 ist, soll eine Nachricht im seriellen Monitor ausgegeben werden.  
+            <br><br>
+            Im Code: 
+            <br><br>
+            <code>
+                if( var <b style="color: red;">==</b> 100 ){ <br>
+                &emsp;&emsp;Serial.print("Die Variable var ist gleich 100!"); <br>
+            } <br>
+            <br>
+            </code>
+            
+
+        <p>
+
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/equal.png b/src/main/webapp/com/ardublock/reference/equal.png
new file mode 100644
index 0000000000000000000000000000000000000000..a88393510724af46770e0d057b4d7e529d84a07b
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/equal.png differ
diff --git a/src/main/webapp/com/ardublock/reference/equal_digital-beispiel.png b/src/main/webapp/com/ardublock/reference/equal_digital-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..f44c6523b1734eee2d89cd6c0b6842cfc116e619
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/equal_digital-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/equal_digital.html b/src/main/webapp/com/ardublock/reference/equal_digital.html
new file mode 100644
index 0000000000000000000000000000000000000000..6573ede35cdf9cf783600150e8e0d15a53c8feb9
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/equal_digital.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+<link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Log. Operatoren / Vergleiche</p>
+        <h1 style="font-size: 220%;">== (digital)</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "equal_digital.png" alt="digitaler-gleich-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der digitale <code>==</code> Block ist ein Logik-Block, der zwei digitale Größen miteinander vergleicht und selbst auch einen digitalen Zustand (<code>HIGH</code> oder <code>LOW</code>) annehmen kann. 
+            Es können fest Programmierte <code>true</code> und <code>false</code> Blöcke, sowie digitale Variablen oder digitale Eingänge miteinander verglichen werden. 
+            Jedoch können pro digitalem <code>==</code> Block zwei Variablen auf einmal verglichen werden.  
+            <br>
+            Wenn die beiden digitalen Eingänge den gleichen Wert haben, dann ist der <code>==</code> Block selbst <code>true</code>. Dabei spielt es keine Rolle ob die beiden Signale beide 
+            <code>true</code> oder beide <code>false</code> sind. 
+            Wenn die beiden Eingänge jedoch einen unterschiedlichen Wert haben, dann ist der <code>==</code> Block selbst <code>false</code>. 
+            <br><br>
+            Wenn man mit der Maus über dem Block schwebt, dann erscheint ein kleiner Pfeil nach unten. 
+            Klickt man diesen mit der linken Maustaste, dann öffnet sich ein Dropdown Menü und der digitale <code>==</code> Block kann in einen <code>!=</code> Block umgewandelt werden. 
+            Dieser hat genau die umgekehrte Funktion. 
+            Auf diese wird allerdings in der entsprechen eigenen Block-Referenz erklärt.
+        </p>
+        <h2 class="unterueberschrift" id="beispiel">Beispiel</h2>
+        <p>
+            Hier ist eine Übersicht, wie sich der digitale <code>==</code> Block verhält, wenn man verschiedene logische Kombinationen an seinen Eingängen anlegt. 
+            Für <code>true</code> und <code>false</code> könnte hier auch <code>HIGH</code> oder <code>LOW</code> eingetragen werden. 
+            Diese haben dieselbe Bedeutung. 
+            Ein Verwenden von digitalen Variablen oder digitalen Eingängen des Arduinos ist natürlich ebenso möglich. 
+            <br><br>
+            <img src="equal_digital-beispiel.png" alt="nicht-block-beispiel" style="border:grey solid 2px">
+        <p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code kann der digitale <code>==</code> Block mit zwei Gleich-Zeichen (<code>==</code>) realisiert werden. 
+            Die beiden zu vergleichenden digitalen Größen werden jeweils vor und nach dem Operator eingefügt. 
+            <br>
+            <b>Beispiel:</b> Wenn am Pin 3 eine Spannung anliegt und dieser <code>HIGH</code> wird, soll eine Nachricht ausgegeben werden. 
+            <br><br>
+            Im Code: 
+            <br><br>
+            <code>
+                if( digitalRead(3) <b style="color: red;">==</b> true ){ <br>
+                &emsp;&emsp;Serial.print("An Pin 3 liegt Spannung an!"); <br>
+            } <br>
+            <br>
+            </code>
+            
+
+        <p>
+
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/equal_digital.png b/src/main/webapp/com/ardublock/reference/equal_digital.png
new file mode 100644
index 0000000000000000000000000000000000000000..094d1a7ff42615db83eb7b1ea63e91afb163a316
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/equal_digital.png differ
diff --git a/src/main/webapp/com/ardublock/reference/false.html b/src/main/webapp/com/ardublock/reference/false.html
new file mode 100644
index 0000000000000000000000000000000000000000..93f5f6ebd96ec40aa53119f7039ae16414bd9fa8
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/false.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+
+<link rel="stylesheet" href="_seitenformatierung.css">
+
+<body style="margin: 0px;">
+
+<div style="border: #284a66; border-style: solid; border-width: 5px;">
+    <nav>
+    <li id="beschreibung">Block-Referenz</li>
+    <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+    <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+    </nav>
+</div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Math. Operatoren / Digital</p>
+        <h1 style="font-size: 220%;">false</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "false.png" alt="false-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>false</code> Block beschreibt einen von zwei <b>digitalen Zuständen</b>. 
+            Er kann überall eingesetzt werden, wo eine digitale Größe eingesetzt werden kann (runde Form). 
+            Zum Beispiel beim Setzen von lokalen oder globalen digitalen Variablen, als <code>teste</code> Bedingung in <code>falls</code> 
+            oder <code>sonst falls</code> Blöcken oder in Blöcken zum Vergleich digitaler Größen z.B.( <code>UND / ODER / == / != </code>).
+            <br>
+            Der <code>false</code> Block ist gleichbedeutend mit dem <code>LOW</code> Block.
+            <br><br>
+            Wenn man mit der Maus über dem Block schwebt, dann erscheint darauf ein kleiner Pfeil, der nach unten zeigt. 
+            Klickt man mit der linken Maustaste auf diesen, dann öffnet sich ein Dropdown Menü mit welchem man den 
+            <code>false</code> Block in einen <code>true</code> Block umwandeln kann.
+            <br>
+            Dieser wird in einer eigenen Referenz erklärt. 
+         </p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>          
+            Im Code wird der <code>false</code> Block mit dem Befehl <code>false</code> realisiert. 
+            Dieser kann in anderen Funktionen wie eine digitale Variable verwendet werden, allerdings ist dieser dann immer falsch. 
+            <br><br>
+            Man kann damit zum Beispiel die Funktion von <code>sonst</code> Blöcken testen, da diese immer ausgeführt werden, wenn im 
+            <code>falls</code> Block ein <code>false</code> Block in der Teste-Bedingung steht. 
+        <p>
+</div>
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/false.png b/src/main/webapp/com/ardublock/reference/false.png
new file mode 100644
index 0000000000000000000000000000000000000000..b82930346b5bd8ca8dd65085345982d325d2837b
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/false.png differ
diff --git a/src/main/webapp/com/ardublock/reference/glue_digital-beispiel.png b/src/main/webapp/com/ardublock/reference/glue_digital-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..29691ceca7a76c7cdd6b70d27e4c10261e82f591
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/glue_digital-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/glue_digital.html b/src/main/webapp/com/ardublock/reference/glue_digital.html
new file mode 100644
index 0000000000000000000000000000000000000000..f137179a07a472300100e1fd81b87bd5ecf0a73f
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/glue_digital.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+
+<link rel="stylesheet" href="_seitenformatierung.css">
+
+<body style="margin: 0px;">
+
+<div style="border: #284a66; border-style: solid; border-width: 5px;">
+    <nav>
+    <li id="beschreibung">Block-Referenz</li>
+    <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+    <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+    </nav>
+</div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Kommunikation / Verbinder</p>
+        <h1 style="font-size: 220%;">Verbinde String und digitale Größe</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "glue_digital.png" usemap="#blockmap" alt="verbinde"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Mit diesem Block lässt sich eine Zeichenkette (String) mit einer digitalen Größe verbinden. 
+            Der <code>verbinde</code> Block lässt sich dann wie ein String in anderen Blöcken verwenden (rechteckig mit ausgeschnittenen Ecken). 
+            So können zum Beispiel Werte von Variablen im seriellen Monitor ausgegeben werden. 
+            <br><br>
+            Für die linke Komponente in dem Block wird ein String eingesetzt. 
+            In diesen kann jeder mögliche Text geschrieben werden. 
+            In das rechte Feld des <code>verbinde</code> Blocks kann eine digitale Variable eingesetzt werden. 
+            Der gesamte Block wird dann in einen zusammenhängenden String umgewandelt. 
+            Wenn dieser dann im seriellen Monitor ausgegeben wird, dann wird der Wert der digitalen Variable ausgegeben. 
+            Im Text steht dann entweder "true" oder "false" anstelle der Variable. 
+        </p>
+        <h2 class="unterueberschrift" id="block_beschreibung">Beispiel</h2>
+        <p>
+            <b>Beispiel:</b> Es soll eine Information über den Status eines Tür-Sensors auf dem seriellen Monitor ausgegeben werden. 
+            Der Wert dieses Sensors ist in der digitalen Variable <code>tuer_sens</code> gespeichert.
+            Es soll der Text "Der Wert des Tür-Sensors ist: " und dann der aktuelle Status ausgegeben werden. 
+            <br>
+            Die Ausgabe wird mit dem <code>Serial print</code> Block realisiert. 
+            <br><br>
+            In ArduBlock: 
+            <br><br>
+            <img src="glue_digital-beispiel.png" alt="">
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code wird der Block durch den Befehl einfach dadurch realisiert, dass zwei <code>Serial.print()</code> Befehle 
+            ohne einen Zeilenumbruch direkt hintereinander im Code geschrieben werden. 
+            <br>
+            In den einen Befehl wird der auszugebende String eingefügt und in den anderen der Name der auszugebenden digitalen Variable. 
+            <br>
+            <b style="color: red;">Achtung: </b>Wenn zwischen String und Variable ein Leerzeichen sein soll, dann muss dieses 
+            im String als normales Zeichen angehängt werden. 
+            <br><br>
+            Im Code würde das dann folgendermaßen aussehen (ohne <code>Serial.begin(9600)</code>): 
+            <br><br>
+            <code>
+                &emsp;&emsp;Serial.print("Der Wert des Tür-Sensors ist: "); <br>
+                &emsp;&emsp;Serial.print("tuer_sens"); <br>
+                &emsp;&emsp;Serial.print(); <br>
+            </code>
+            
+        <p>
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/glue_digital.png b/src/main/webapp/com/ardublock/reference/glue_digital.png
new file mode 100644
index 0000000000000000000000000000000000000000..b5a85c5e5997ea1b0fae7927063e32a3657d218f
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/glue_digital.png differ
diff --git a/src/main/webapp/com/ardublock/reference/glue_number-beispiel.png b/src/main/webapp/com/ardublock/reference/glue_number-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..e79fdd81dc1c4ae3d4fde2a53a3a7c8973dcd97e
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/glue_number-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/glue_number.html b/src/main/webapp/com/ardublock/reference/glue_number.html
new file mode 100644
index 0000000000000000000000000000000000000000..2b92519644325d793aac7cc318c0714ca538388a
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/glue_number.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+
+<link rel="stylesheet" href="_seitenformatierung.css">
+
+<body style="margin: 0px;">
+
+<div style="border: #284a66; border-style: solid; border-width: 5px;">
+    <nav>
+    <li id="beschreibung">Block-Referenz</li>
+    <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+    <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+    </nav>
+</div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Kommunikation / Verbinder</p>
+        <h1 style="font-size: 220%;">Verbinde String und digitale Größe</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "glue_number.png" usemap="#blockmap" alt="verbinde-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Mit diesem Block lässt sich eine Zeichenkette (String) mit einer analogen Größe verbinden. 
+            Der <code>verbinde</code> Block lässt sich dann wie ein String in anderen Blöcken verwenden (rechteckig mit ausgeschnittenen Ecken). 
+            So können zum Beispiel Werte von analogen Variablen im seriellen Monitor ausgegeben werden. 
+            <br><br>
+            Für die linke Komponente in dem Block wird ein String eingesetzt. 
+            In diesen kann jeder mögliche Text geschrieben werden. 
+            In das rechte Feld des <code>verbinde</code> Blocks kann eine analoge Variable eingesetzt werden. 
+            Der gesamte Block wird dann in einen zusammenhängenden String umgewandelt. 
+            Wenn dieser dann im seriellen Monitor ausgegeben wird, dann wird der Wert der analogen Variable ausgegeben. 
+            
+        </p>
+        <h2 class="unterueberschrift" id="block_beschreibung">Beispiel</h2>
+        <p>
+            <b>Beispiel:</b> Es soll eine Information über den Status eines Zählers auf dem seriellen Monitor ausgegeben werden. 
+            Der Wert dieses Zählers ist in der analogen Variable <code>zaehler</code> gespeichert. 
+            Es soll der Text "Der Wert des Zählers ist: " und dann der aktuelle Wert ausgegeben werden. 
+            <br>
+            Die Ausgabe wird mit dem <code>Serial print</code> Block realisiert. 
+            <br><br>
+            In ArduBlock: 
+            <br><br>
+            <img src="glue_number-beispiel.png" alt="">
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code wird der Block durch den Befehl einfach dadurch realisiert, dass zwei <code>Serial.print()</code> Befehle 
+            ohne einen Zeilenumbruch direkt hintereinander im Code geschrieben werden. 
+            <br>
+            In den einen Befehl wird der auszugebende String eingefügt und in den anderen der Name der auszugebenden digitalen Variable. 
+            <br>
+            <b style="color: red;">Achtung: </b>Wenn zwischen String und Variable ein Leerzeichen sein soll, dann muss dieses 
+            im String als normales Zeichen angehängt werden. 
+            <br><br>
+            Im Code würde das dann folgendermaßen aussehen (ohne <code>Serial.begin(9600)</code>): 
+            <br><br>
+            <code>
+                &emsp;&emsp;Serial.print("Der Wert des Zählers ist: "); <br>
+                &emsp;&emsp;Serial.print("zaehler"); <br>
+            </code>
+            
+        <p>
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/glue_number.png b/src/main/webapp/com/ardublock/reference/glue_number.png
new file mode 100644
index 0000000000000000000000000000000000000000..7d9f81682c9d32c6106708bd8ff3d6d9a48c681e
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/glue_number.png differ
diff --git a/src/main/webapp/com/ardublock/reference/glue_string-beispiel.png b/src/main/webapp/com/ardublock/reference/glue_string-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..7846a7a033863f3d61fffbdde6966677b5245385
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/glue_string-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/glue_string.html b/src/main/webapp/com/ardublock/reference/glue_string.html
new file mode 100644
index 0000000000000000000000000000000000000000..caad6bf35f17b310eb3dcf3880fa52a4b8f3c33a
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/glue_string.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+
+<link rel="stylesheet" href="_seitenformatierung.css">
+
+<body style="margin: 0px;">
+
+<div style="border: #284a66; border-style: solid; border-width: 5px;">
+    <nav>
+    <li id="beschreibung">Block-Referenz</li>
+    <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+    <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+    </nav>
+</div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Kommunikation / Verbinder</p>
+        <h1 style="font-size: 220%;">Verbinde String und digitale Größe</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "glue_string.png" usemap="#blockmap" alt="serial-print-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Mit diesem Block lässt sich eine Zeichenkette (String) mit einer weiteren Zeichenkette verbinden. 
+            Der <code>verbinde</code> Block lässt sich dann wie ein einzelner String in anderen Blöcken verwenden (rechteckig mit ausgeschnittenen Ecken). 
+            So können zwei verschiedene Strings in einem Block verwendet werden. 
+            <br><br>
+            Für die rechte Komponente und die linke Komponente in dem Block wird ein String eingesetzt. 
+            In diesen kann jeder mögliche Text geschrieben werden. 
+            Wenn der gesamte Block wird dann in einen zusammenhängenden String umgewandelt. 
+            Wenn dieser dann im seriellen Monitor ausgegeben wird, dann werden beide Strings auf einmal ausgegeben. 
+            <br>
+            Im "Basic"-Modus ist die Anwendung jedoch wenig hilfreich, da man nur im "Pro"-Modus Strings als Variablen erstellen kann. 
+            
+        </p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code wird der Block durch den Befehl einfach dadurch realisiert, dass zwei <code>Serial.print()</code> Befehle 
+            ohne einen Zeilenumbruch direkt hintereinander im Code geschrieben werden. 
+            <br>
+            In den einen Befehl wird der erste auszugebende String eingefügt und in den anderen der zweite. 
+            <br>
+            <b style="color: red;">Achtung: </b>Wenn zwischen den beiden Strings ein Leerzeichen sein soll, dann muss dieses 
+            im String als normales Zeichen angehängt werden. 
+            <br><br>
+            <img src="glue_string-beispiel.png" alt="">
+            <br><br>
+            Im Code würde das dann folgendermaßen aussehen (ohne <code>Serial.begin(9600)</code>): 
+            <br><br>
+            <code>
+                &emsp;&emsp;Serial.print("Das ist der String 1 "); <br>
+                &emsp;&emsp;Serial.print("und das ist der String 2"); <br>
+            </code>
+            
+        <p>
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/glue_string.png b/src/main/webapp/com/ardublock/reference/glue_string.png
new file mode 100644
index 0000000000000000000000000000000000000000..1fcd930280090c2ab8bfcbc9dd0efb7401cd463e
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/glue_string.png differ
diff --git a/src/main/webapp/com/ardublock/reference/greater-beispiel.png b/src/main/webapp/com/ardublock/reference/greater-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..891bb2a2a74eaed696db2361f60a4bb80e7d9acc
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/greater-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/greater.html b/src/main/webapp/com/ardublock/reference/greater.html
new file mode 100644
index 0000000000000000000000000000000000000000..e96465655d8c40270c37cdf93870dc900d1ca196
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/greater.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+<link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Log. Operatoren / Vergleiche</p>
+        <h1 style="font-size: 220%;">&gt;</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "greater.png" alt="größer-als-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>&gt;</code> Block ist ein Logik-Block, der zwei analoge Größen miteinander vergleicht, selbst aber nur einen digitalen Zustand (entweder <code>true</code> oder <code>false</code>) annehmen kann. 
+            Es können fest Programmierte Zahlenwerte, analoge Eingänge oder analoge Variablen miteinander verglichen werden. 
+            Jedoch können pro <code>&gt;</code> Block immer nur zwei Größen auf einmal verglichen werden. 
+            Der <code>&gt;</code> Block ist <code>true</code>, wenn die Größe im linken Feld größer als die im rechten Feld des Blocks ist. 
+            <br>
+            Ist die Größe im rechten Feld größer, als die im linken Feld, dann ist der Block an sich <code>false</code>. 
+            Ist die Größe im linken Feld größer, als die im rechten Feld, dann ist der Block an sich <code>true</code>. 
+            Haben beide Größen den gleichen Wert, dann ist der Block an sich <code>false</code>. 
+            <br><br>
+            Wenn man mit der Maus über dem Block schwebt, dann erscheint ein kleiner Pfeil nach unten. 
+            Klickt man diesen mit der linken Maustaste, dann öffnet sich ein Dropdown Menü und der <code>&gt;</code> Block kann folgende Blöcke umgewandelt werden: 
+            <br><br>
+            <code>
+                &emsp;&emsp;&lt; <br>
+                &emsp;&emsp;== (analog) <br>
+                &emsp;&emsp;&gt;= <br>
+                &emsp;&emsp;&lt;= <br>
+                &emsp;&emsp;!= (analog) <br>
+            </code>
+            
+            <br><br>
+            Auf diese wird allerdings in der entsprechen eigenen Block-Referenz eingegangen.
+        </p>
+        <h2 class="unterueberschrift" id="beispiel">Beispiel</h2>
+        <p>
+            Hier sind drei Beispiele, wie sich der <code>&gt;</code> Block verhält, wenn man verschiedene, beispielhafte Werte an seinen Eingängen anlegt. 
+            <br>
+            Für die fest eingesetzten Zahlenwerte können hier auch analoge Variablen oder analoge Eingänge verwendet werden:
+            <br><br>
+            <img src="greater-beispiel.png" alt="größer-analog-beispiel" >
+        <p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code kann der <code>&gt;</code> Block mit einem einfachen größer-als-Zeichen (<code>&gt;</code>) realisiert werden. 
+            Die beiden zu vergleichenden analogen Größen werden jeweils vor und nach dem Operator eingefügt. 
+            <br>
+            <b>Beispiel:</b> Wenn die Variable <code>var</code> größer als 100 ist, soll eine Nachricht im seriellen Monitor ausgegeben werden.  
+            <br><br>
+            Im Code: 
+            <br><br>
+            <code>
+                if( var <b style="color: red;">&gt;</b> 100 ){ <br>
+                &emsp;&emsp;Serial.print("Die Variable var ist groeßer als 100!"); <br>
+            } <br>
+            </code>
+            
+            <br>
+
+        <p>
+
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/greater.png b/src/main/webapp/com/ardublock/reference/greater.png
new file mode 100644
index 0000000000000000000000000000000000000000..f0beaaf50605f4d8e222e1c6f0c9e6f3202bc94e
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/greater.png differ
diff --git a/src/main/webapp/com/ardublock/reference/greater_equal-beispiel.png b/src/main/webapp/com/ardublock/reference/greater_equal-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..c74971ee8e61b37e9629deed9e0e9a0537451fe3
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/greater_equal-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/greater_equal.html b/src/main/webapp/com/ardublock/reference/greater_equal.html
new file mode 100644
index 0000000000000000000000000000000000000000..3f1c5c84c28006028b5673637250960881eb47a0
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/greater_equal.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+<link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Log. Operatoren / Vergleiche</p>
+        <h1 style="font-size: 220%;">&gt;=</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "greater_equal.png" alt="größer-gleich-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der analoge <code>&gt;=</code> Block ist ein Logik-Block, der zwei analoge Größen miteinander vergleicht, selbst aber nur einen digitalen Zustand (entweder <code>true</code> oder <code>false</code>) annehmen kann. 
+            Es können fest Programmierte Zahlenwerte, analoge Eingänge oder analoge Variablen miteinander verglichen werden. 
+            Jedoch können pro <code>&gt;=</code> Block immer nur zwei Größen auf einmal verglichen werden. 
+            Der <code>&gt;=</code> Block ist <code>true</code>, wenn die Größe im rechten Feld größer <b>oder gleich</b> wie die Größe im linken Feld des Blocks ist. 
+            <br>
+            Ist die Größe im linken Feld größer, als die im rechten Feld, dann ist der Block an sich <code>false</code>. 
+            Ist die Größe im rechten Feld größer, als die im linken Feld, dann ist der Block an sich <code>true</code>. 
+            Haben beide Größen den gleichen Wert, dann ist der Block an sich <code>true</code>. 
+            <br><br>
+            Wenn man mit der Maus über dem Block schwebt, dann erscheint ein kleiner Pfeil nach unten. 
+            Klickt man diesen mit der linken Maustaste, dann öffnet sich ein Dropdown Menü und der <code>&gt;=</code> Block kann folgende Blöcke umgewandelt werden: 
+            <br><br>
+            <code>
+                &emsp;&emsp;&gt; <br>
+                &emsp;&emsp;&lt; <br>
+                &emsp;&emsp;!= (analog) <br>
+                &emsp;&emsp;&lt;= <br>
+                &emsp;&emsp;== (analog) <br>
+            </code>
+            
+            <br><br>
+            Auf diese wird allerdings in der entsprechen eigenen Block-Referenz eingegangen.
+        </p>
+        <h2 class="unterueberschrift" id="beispiel">Beispiel</h2>
+        <p>
+            Hier sind drei Beispiele, wie sich der <code>&gt;=</code> Block verhält, wenn man verschiedene, beispielhafte Werte an seinen Eingängen anlegt. 
+            <br>
+            Für die fest eingesetzten Zahlenwerte können hier auch analoge Variablen oder analoge Eingänge verwendet werden:
+            <br><br>
+            <img src="greater_equal-beispiel.png" alt="analog-nicht-gleich-beispiel" style="border:grey solid 2px">
+        <p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code kann der analoge <code>&gt;=</code> Block mit einem größer-als-Zeichen und einem Gleich-Zeichen (<code>&gt;=</code>) realisiert werden. 
+            Die beiden zu vergleichenden analogen Größen werden jeweils vor und nach dem Operator eingefügt. 
+            <br>
+            <b>Beispiel:</b> Wenn die Variable <code>var</code> größer oder gleich 100 ist, soll eine Nachricht im seriellen Monitor ausgegeben werden.  
+            <br><br>
+            Im Code: 
+            <br><br>
+            <code>
+                if( var <b style="color: red;">&gt;=</b> 100 ){ <br>
+                &emsp;&emsp;Serial.print("Die Variable var ist größer oder gleich 100!"); <br>
+            } <br>
+            <br>
+            </code>
+        <p>
+    </div>
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/greater_equal.png b/src/main/webapp/com/ardublock/reference/greater_equal.png
new file mode 100644
index 0000000000000000000000000000000000000000..589bc7919b57d45c04ff707343556fab9699f84c
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/greater_equal.png differ
diff --git a/src/main/webapp/com/ardublock/reference/if-beispiel.png b/src/main/webapp/com/ardublock/reference/if-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..1e8da80a410a11cd2f5435dcb7f2eafd59013d8c
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/if-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/if.html b/src/main/webapp/com/ardublock/reference/if.html
new file mode 100644
index 0000000000000000000000000000000000000000..c6c9fa9f0b3a5ff7079f5a497b2bc5289e7814f7
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/if.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html>
+<link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Steuerung / Verzweigung</p>
+        <h1 style="font-size: 220%;">falls</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "if.png" alt="wiederholeFortlaufend-Block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>falls</code> Block hat eine wichtige Funktion, wenn es darum geht komplexere Programme zu erstellen. Dann reicht es nämlich nicht aus einfach 
+            nur einen fest programmierten Ablauf auszuführen. Durch den <code>falls</code> Block lassen sich Verzweigungen erstellen, sodass der Programmablauf bei geänderten Verhältnissen variiert.
+            <br>
+            Es geht konret darum eine vorgegebene Bedingung zu überprüfen und daraufhin zu entscheiden, ob der darin eingefügte Code ausgeführt oder übersprungen werden soll.
+            Dieses Verfahren wird nahezu überall in der Programmentwicklung eingesetzt.
+        </p>
+        <h2 class="unterueberschrift">teste</h2>
+        <p>
+            In den <code>teste</code> Parameter wird eine Bedingung eingesetzt. Diese kann nur zwei mögliche Zustände haben. Entweder die Bedingung ist wahr (<code>true</code>) oder falsch (<code>false</code>). 
+            Es kann ein digitaler Eingang eingesetzt werden, an dem entweder ein Signal anliegt, dann ist dieser wahr und der Code wird ausgeführt oder wenn kein Signal anliegt und die Bedingung nicht erfüllt ist 
+            der Code dann eben nicht ausgeführt wird.
+            <br><br>
+            Es können auch zwei Variablen oder eine Variable mit einem festen Wert verglichen werden. Zum Beispiel, dass die Temperatur eines Sensors über 28°C liegen muss um einen Pin umzuschalten, der dann einen 
+            Ventilator aktiviert. Weiter unten wird dies in einem <a href="#if-besipiel">Beispiel</a> erklärt.
+        </p>
+        <h2 class="unterueberschrift">dann</h2>
+        <p>
+            In den <code>dann</code> Abschnitt kann eine Folge von weiteren Blöcken zu Anweisung von Befehlen eingefügt werden. 
+            Dies kann zum Beispiel ein <code>digitalWrite</code> Block sein, der einen Pin <code>HIGH</code> oder <code>LOW</code> schält oder eine Variable, die gesetzt werden soll 
+            oder sogar weitere <code>falls</code> Blöcke, wobei sich hier auch die Verwendung eines <code>falls-sonst</code> Blocks anbietet.
+        </p>
+        <h2 class="unterueberschrift" id="if-besipiel">Beispiel</h2>
+        <p>
+            Um das Beispiel von oben noch einmal aufzugreifen gehen wir wieder davon aus, dass eine <code>temperatur</code> Variable angelegt wurde, welche den Wert der Temperatur 
+            in °C annimmt und mit dem Pin 2 ein Ventilator kontrolliert werden kann, der den Benutzer bei einer Temperatur über 28°C kühlen soll.
+            <br>
+            Wenn der Pin 2 auf <code>HIGH</code> gesetzt wird, dann wird damit der Ventilator aktiviert.
+            <br><br>
+            <img src="if-beispiel.png" alt="if_beispiel" style="padding-left: 20px;">
+            <br><br>
+        </p>
+        
+        <h2 class="unterueberschrift">Code</h2>
+        <p>
+            Im Code für den Arduino wird der Baustein mit der Funktion <code>if(teste){dann}</code> umgesetzt. ("if" ist Englisch und heißt übersetzt "wenn" oder "falls")
+            Wo hier <code>teste</code> eingetragen wurde müsste dann natürlich die zu überprüfende Bedingung eingetragen werden.
+            Wenn das oben genannte Beispiel wieder herangezogen wird und davon ausgegangen wird, dass eine anloge Variable mit dem Namen <code>temperatur</code> angelegt wurde, die den 
+            Temperaturwert in °C angibt, dann müsste für <code>teste</code> hier <code>temperatur > 28</code> eingesetzt werden.
+            Die auszuführenden Operationen werden dann zwischen die beiden geschweiften Klammern <i>{}</i> geschrieben, wo hier <code>dann</code> steht.
+            <br><br>
+            Im Code würde das Beispiel dann folgendermaßen aussehen:
+            <br><br>
+            <code>
+                if ( temperatur > 28 ) { <br>
+                &emsp;&emsp;digitalWrite( 2 , HIGH ); <br>
+                  } <br>
+            </code> <br>
+        </p>
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/if.png b/src/main/webapp/com/ardublock/reference/if.png
new file mode 100644
index 0000000000000000000000000000000000000000..dae579667f861eb0e426152c209f31edd7390b19
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/if.png differ
diff --git a/src/main/webapp/com/ardublock/reference/less-beispiel.png b/src/main/webapp/com/ardublock/reference/less-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..b8a0a40eb9f1722c7770b0930086eba17575efc9
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/less-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/less.html b/src/main/webapp/com/ardublock/reference/less.html
new file mode 100644
index 0000000000000000000000000000000000000000..cd6b55f9168a2c5319c1af4ad19ba5bd7d0ccca0
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/less.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+    <link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Log. Operatoren / Vergleiche</p>
+        <h1 style="font-size: 220%;">&lt;</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "less.png" alt="kleiner-also-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>&lt;</code> Block ist ein Logik-Block, der zwei analoge Größen miteinander vergleicht, selbst aber nur einen digitalen Zustand (entweder <code>true</code> oder <code>false</code>) annehmen kann. 
+            Es können fest Programmierte Zahlenwerte, analoge Eingänge oder analoge Variablen miteinander verglichen werden. 
+            Jedoch können pro <code>&lt;</code> Block immer nur zwei Größen auf einmal verglichen werden. 
+            Der <code>&lt;</code> Block ist <code>true</code>, wenn die Größe im rechten Feld größer als die im linken Feld des Blocks ist. 
+            <br>
+            Ist die Größe im linken Feld größer, als die im rechten Feld, dann ist der Block an sich <code>false</code>. 
+            Ist die Größe im rechten Feld größer, als die im linken Feld, dann ist der Block an sich <code>true</code>. 
+            Haben beide Größen den gleichen Wert, dann ist der Block an sich <code>false</code>. 
+            <br><br>
+            Wenn man mit der Maus über dem Block schwebt, dann erscheint ein kleiner Pfeil nach unten. 
+            Klickt man diesen mit der linken Maustaste, dann öffnet sich ein Dropdown Menü und der <code>&lt;</code> Block kann folgende Blöcke umgewandelt werden: 
+            <br><br>
+            <code>
+                &emsp;&emsp;&gt; <br>
+                &emsp;&emsp;== (analog) <br>
+                &emsp;&emsp;&gt;= <br>
+                &emsp;&emsp;&lt;= <br>
+                &emsp;&emsp;!= (analog) <br>
+            </code>
+            
+            <br><br>
+            Auf diese wird allerdings in der entsprechen eigenen Block-Referenz eingegangen.
+        </p>
+        <h2 class="unterueberschrift" id="beispiel">Beispiel</h2>
+        <p>
+            Hier sind drei Beispiele, wie sich der <code>&lt;</code> Block verhält, wenn man verschiedene, beispielhafte Werte an seinen Eingängen anlegt. 
+            <br>
+            Für die fest eingesetzten Zahlenwerte können hier auch analoge Variablen oder analoge Eingänge verwendet werden:
+            <br><br>
+            <img src="less-beispiel.png" alt="kleiner-beispiel" style="border:grey solid 2px">
+        <p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code kann der <code>&lt;</code> Block mit einem einfachen kleiner-als-Zeichen (<code>&lt;</code>) realisiert werden. 
+            Die beiden zu vergleichenden analogen Größen werden jeweils vor und nach dem Operator eingefügt. 
+            <br>
+            <b>Beispiel:</b> Wenn die Variable <code>var</code> kleiner als 100 ist, soll eine Nachricht im seriellen Monitor ausgegeben werden.  
+            <br><br>
+            Im Code: 
+            <br><br>
+            <code>
+                if( var <b style="color: red;">&lt;</b> 100 ){ <br>
+                &emsp;&emsp;Serial.print("Die Variable var ist kleiner als 100!"); <br>
+            } <br>
+            <br>
+            </code>
+            
+
+        <p>
+
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/less.png b/src/main/webapp/com/ardublock/reference/less.png
new file mode 100644
index 0000000000000000000000000000000000000000..83316b3b9d2d10365a52722dd6cf8cee42ce272a
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/less.png differ
diff --git a/src/main/webapp/com/ardublock/reference/less_equal-beispiel.png b/src/main/webapp/com/ardublock/reference/less_equal-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..c0ef6273d9317f6162eca27e45a8c9560912f2d3
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/less_equal-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/less_equal.html b/src/main/webapp/com/ardublock/reference/less_equal.html
new file mode 100644
index 0000000000000000000000000000000000000000..b6b74a373bbe3e4f6ee5ed45e413b754fa1e3bce
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/less_equal.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html>
+    <link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Log. Operatoren / Vergleiche</p>
+        <h1 style="font-size: 220%;">&lt;=</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "less_equal.png" alt="analog-gleich-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der analoge <code>&lt;=</code> Block ist ein Logik-Block, der zwei analoge Größen miteinander vergleicht, selbst aber nur einen digitalen Zustand (entweder <code>true</code> oder <code>false</code>) annehmen kann. 
+            Es können fest Programmierte Zahlenwerte, analoge Eingänge oder analoge Variablen miteinander verglichen werden. 
+            Jedoch können pro <code>&lt;=</code> Block immer nur zwei Größen auf einmal verglichen werden. 
+            Der <code>&lt;=</code> Block ist <code>true</code>, wenn die Größe im rechten Feld kleiner <b>oder gleich</b> wie die Größe im linken Feld des Blocks ist. 
+            <br>
+            Ist die Größe im rechten Feld größer, als die im linken Feld, dann ist der Block an sich <code>false</code>. 
+            Ist die Größe im linken Feld größer, als die im rechten Feld, dann ist der Block an sich <code>true</code>. 
+            Haben beide Größen den gleichen Wert, dann ist der Block an sich <code>true</code>. 
+            <br><br>
+            Wenn man mit der Maus über dem Block schwebt, dann erscheint ein kleiner Pfeil nach unten. 
+            Klickt man diesen mit der linken Maustaste, dann öffnet sich ein Dropdown Menü und der <code>&lt;=</code> Block kann folgende Blöcke umgewandelt werden: 
+            <br><br>
+            <code>
+                &emsp;&emsp;&gt; <br>
+                &emsp;&emsp;&lt; <br>
+                &emsp;&emsp;!= (analog) <br>
+                &emsp;&emsp;&gt;= <br>
+                &emsp;&emsp;== (analog) <br>
+            </code>
+            
+            <br><br>
+            Auf diese wird allerdings in der entsprechen eigenen Block-Referenz eingegangen.
+        </p>
+        <h2 class="unterueberschrift" id="beispiel">Beispiel</h2>
+        <p>
+            Hier sind drei Beispiele, wie sich der <code>&lt;=</code> Block verhält, wenn man verschiedene, beispielhafte Werte an seinen Eingängen anlegt. 
+            <br>
+            Für die fest eingesetzten Zahlenwerte können hier auch analoge Variablen oder analoge Eingänge verwendet werden:
+            <br><br>
+            <img src="less_equal-beispiel.png" alt="kleiner-gleich-beispiel" style="border:grey solid 2px">
+        <p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code kann der analoge <code>&lt;=</code> Block mit einem kleiner-als-Zeichen und einem Gleich-Zeichen (<code>&lt;=</code>) realisiert werden. 
+            Die beiden zu vergleichenden analogen Größen werden jeweils vor und nach dem Operator eingefügt. 
+            <br>
+            <b>Beispiel:</b> Wenn die Variable <code>var</code> kleiner oder gleich 100 ist, soll eine Nachricht im seriellen Monitor ausgegeben werden.  
+            <br><br>
+            Im Code: 
+            <br><br>
+            <code>
+                if( var <b style="color: red;">&lt;=</b> 100 ){ <br>
+                &emsp;&emsp;Serial.print("Die Variable var ist kleiner oder gleich 100!"); <br>
+            } <br>
+            <br>
+            </code>
+        <p>
+    </div>
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/less_equal.png b/src/main/webapp/com/ardublock/reference/less_equal.png
new file mode 100644
index 0000000000000000000000000000000000000000..cd31ac2b8bb49005f0f5bb11a74857137aff7ac1
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/less_equal.png differ
diff --git a/src/main/webapp/com/ardublock/reference/local_variable_digital.html b/src/main/webapp/com/ardublock/reference/local_variable_digital.html
new file mode 100644
index 0000000000000000000000000000000000000000..e87adb13f88cbb20041bc5623b638b708190e817
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/local_variable_digital.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html>
+
+<link rel="stylesheet" href="_seitenformatierung.css">
+
+<body style="margin: 0px;">
+
+<div style="border: #284a66; border-style: solid; border-width: 5px;">
+    <nav>
+    <li id="beschreibung">Block-Referenz</li>
+    <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+    <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+    </nav>
+</div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Math. Operatoren / Digital</p>
+        <h1 style="font-size: 220%;">lokale digitale Variable</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "local_variable_digital.png" alt="setze-digitale-variable-lokal-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+           Digitale Variablen sind in der Arduino Programmierung sehr nützlich. 
+           Mit ihnen lassen sich verschiedene Zustände abbilden. 
+           Eine digitale Variable kann nur zwei Zustände annehmen. 
+           Entweder ist sie wahr (<code>true / HIGH</code>) oder falsch (<code>false / LOW</code>).
+           <br>
+           
+           Der Block in dieser Referenz ist für eine <b>lokale</b> digitale Variable. 
+           Sie kann also nicht im gesamten Code an unterschiedlichen Stellen verwendet werden. 
+           Wenn die lokale digitale Variable beispielsweise innerhalb einer <code>solange</code> Schleife das erste mal auftaucht und gesetzt wird, 
+           dann kann sie auch nur dort verwendet werden. 
+           <br>
+           Sobald der Block, in dem die lokale Variable das erste mal auftaucht abgearbeitet wurde, hört diese auf zu existieren. 
+           Der <code>lokale digitale Variable</code> Block kann in verschiedenen anderen Blöcken eingesetzt werden. 
+           Zum Beispiel als <code>teste</code> Bedingung in <code>falls</code> Blöcken oder in Blöcken zum Vergleich digitaler Größen. ( <code>UND / ODER / == / != </code>).
+           <br><br>
+           Der Name der Variable kann verändert werden. 
+           Der Standardname nach dem Platzieren des Block lautet <code>lokale_digitale_Variable</code>. 
+           Wenn man mit einem Linksklick auf den Block klickt, dann wird der Bearbeitungsmodus aktiviert und der Name kann geändert werden. 
+           Mit der Enter-Taste kann der Bearbeitungsmodus wieder verlassen werden. 
+           <br>
+           Wenn die Variable später im Code noch einmal verwendet werden soll, dann muss der Block gleich benannt werden. 
+           <br><br>
+           <b style="color: red;">Achtung: </b>Der Variablenname darf keine Umlaute (ä, ö, ü) enthalten, da die Arduino IDE den Code sonst nicht auf das Board hochlöaden kann. 
+         </p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>          
+            Wenn im Code mit einer lokalen digitalen Variable gearbeitet wird, dann wird einfach nur ihr Name in der entsprechenden Funktion verwendet. 
+            Da es sich hier um eine lokale Variable handelt, wird diese innerhalb der <code>loop</code> Funktion initalisiert. 
+            Gegebenenfalls sogar innerhalb anderer Unterunktionen innerhalb der <code>loop</code> Funktion. 
+            <br><br>
+            Eine neue Variable kann initialisiert werden, indem ihr Datentyp zusammen mit dem Namen in das Programm eingefügt wird. 
+            Digitale Variablen haben den Datentyp <code>bool</code>. 
+            Bei der Initialisierung kann auch gleich ein Wert mit eingegeben werden. 
+            Die Initialisierung von <code>dig_var</code>, wenn sie als <code>LOW</code> initialisiert wird, würde so aussehen:
+            <br>
+            <code>bool dig_var = LOW;</code>
+        <p>
+</div>
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/local_variable_digital.png b/src/main/webapp/com/ardublock/reference/local_variable_digital.png
new file mode 100644
index 0000000000000000000000000000000000000000..69326f01690ebaafb5395ff34f9e0edfdec3c14c
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/local_variable_digital.png differ
diff --git a/src/main/webapp/com/ardublock/reference/local_variable_number.html b/src/main/webapp/com/ardublock/reference/local_variable_number.html
new file mode 100644
index 0000000000000000000000000000000000000000..16a3888186b0219a94164911e5315dce5d827a26
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/local_variable_number.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+
+<link rel="stylesheet" href="_seitenformatierung.css">
+
+<body style="margin: 0px;">
+
+<div style="border: #284a66; border-style: solid; border-width: 5px;">
+    <nav>
+    <li id="beschreibung">Block-Referenz</li>
+    <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+    <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+    </nav>
+</div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Math. Operatoren / Analog</p>
+        <h1 style="font-size: 220%;">lokale analoge Variable</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "local_variable_number.png" alt="true-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+        
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>lokale analoge Variable</code> Block kann jeden <b>ganzen</b> Wert zwischen -32,768 und 32,768 annehmen. 
+            Er kann überall eingesetzt werden, wo eine analoge Größe eingesetzt werden kann (hexagonale Form). 
+            Zum Beispiel beim Setzen von lokalen oder globalen analogen Variablen, in Blöcken zum Vergleich analoger Größen 
+            z.B.( <code>UND / ODER / == / != / &lt; / &gt;</code> usw...), 
+            beim Setzen von analogen Ausgängen oder beim Speichern und Verarbeiten von analogen Eingangssignalen. 
+            <br><br>
+            Der Name der Variable kann verändert werden. Der Standardname nach dem Platzieren des Block lautet <code>lokale_analoge_Variable</code>. 
+            Wenn man mit der linken Maustaste auf den Block klickt, dann wird der Bearbeitungsmodus aktiviert und der Name kann geändert werden. 
+            Mit der Enter-Taste kann der Bearbeitungsmodus wieder verlassen werden.
+            <br>
+            Wenn die Variable später im Code noch einmal verwendet werden soll, dann muss der Block an der zweiten Stelle gleich benannt werden. 
+            Die Variable ist allerdings eine lokale. 
+            Das heißt sie kann nicht überall im Code verwendet werden. 
+            Sie kann nur in dem Bereich/ der Schleife/ dem Block verwendet werden, in dem sie zum ersten mal angelegt wurde. 
+            <br> <br>
+            <b>Beispiel:</b> Eine lokale Variable wird innerhalb einer <code>solange</code> Schleife zum ersten mal verwendet. 
+            Dann kann die lokale Variable nur innerhalb der <code>solange</code> Schleife verwendet werden. 
+            Bei jedem mal, wenn die Schleife einen neuen Durchlauf startet wird die Variable neu erschaffen und auf den entsprechenden Wert 
+            gesetzt. 
+            <br><br>
+            Auf den ersten Blick scheinen lokale Variablen recht ungeschickt. 
+            Warum sollte man sie verwenden?
+            <br>
+            Sie haben auch Vorteile. 
+            Zum Beispiel erhöhen sie die Übersichtlichkeit in größeren Programmen, in dem viele Variablen benötigt werden, 
+            da nicht alle Variablen außerhalb der <code>loop</code> Funktion initialisiert werden müssen. 
+            Es können auch mehrere lokale Variablen mit den gleichen Namen verwendet werden, wenn sie sich nicht in die 
+            quere kommen. So muss sich nicht für jede Variable in größeren Programmen ein individueller Name ausgedacht werden. 
+            Es wird auch der Programmspeicher entlastet. 
+         </p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>          
+            Wenn im Code mit einer lokalen analogen Variable gearbeitet wird, dann wird einfach nur ihr Name in der entsprechenden Funktion verwendet. 
+            Da es sich hier um eine lokale Variable handelt, wird diese innerhalb der <code>loop</code> Funktion und 
+            ggf. innerhalb von Funktionen in der <code>loop</code> Funktion initalisiert.
+            Eine neue Variable kann initialisiert werden, indem ihr Datentyp zusammen mit dem Namen in das Programm eingefügt wird. 
+            Lokale analoge Variablen haben hier den Datentyp <code>int</code>. Bei der Initialisierung kann auch gleich ein Wert mit eingegeben werden. 
+            <br>
+            Die Initialisierung von <code>var</code>, wenn sie mit dem Wert 12 initialisiert wird, würde so aussehen:
+            <br>
+            <code>int var = 12;</code>
+        <p>
+</div>
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/local_variable_number.png b/src/main/webapp/com/ardublock/reference/local_variable_number.png
new file mode 100644
index 0000000000000000000000000000000000000000..1e51c102ea8ec907aa5658be3c4b008c23a1acbb
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/local_variable_number.png differ
diff --git a/src/main/webapp/com/ardublock/reference/loop-beispiel.png b/src/main/webapp/com/ardublock/reference/loop-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..da1e206406bc97ac224da33652fad206615dee78
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/loop-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/map-beispiel.png b/src/main/webapp/com/ardublock/reference/map-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..50908c01828d65d39268ea37b69a7f9827f06302
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/map-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/map.html b/src/main/webapp/com/ardublock/reference/map.html
new file mode 100644
index 0000000000000000000000000000000000000000..1cc5458313814aab538eef9841e6ce38cc9ce95e
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/map.html
@@ -0,0 +1,145 @@
+<!DOCTYPE html>
+<html>
+    <link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Math. Operatoren / Signalanpassung</p>
+        <h1 style="font-size: 220%;">zuordnen</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "map.png" alt="addition-block" usemap="#blockmap"></img>
+            <figcaption id="caption">Für Erklärung auf einzelne Komponenten klicken.</figcaption>
+            </figure> 
+        </div>
+
+        <map name="blockmap">
+            <area shape="rect" coords="29, 20, 133, 200" href="#block_beschreibung" title="Block"></area>
+            <area shape="rect" coords="174, 21, 264, 54" href="#wert" title="Wert"></area>
+            <area shape="rect" coords="146, 96, 290, 90" href="#von_low" title="von Low"></area>
+            <area shape="rect" coords="144, 96, 324, 130" href="#von_high" title="von High"></area>
+            <area shape="rect" coords="148, 133, 300, 162" href="#nach_low" title="nach Low"></area>
+            <area shape="rect" coords="140, 170, 318, 200" href="#nach_high" title="nach High"></area>
+        </map>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>zuordnen</code> Block ist ein Block, der zur Signalanpassing dient. 
+            Mit ihm lassen sich Werte aus einem Zahlenbereich in einen anderen Zahlenbereich übertragen. 
+            Beim Übertragen werden nur ganze Zahlen generiert. 
+            Es gibt keine Kommazahlen oder Brüche. 
+            Wenn ein Wert hinter dem Komma entsteht, dann wird dieser abgeschnitten. 
+        </p>
+        <h2 class="unterueberschrift" id="block_beschreibung">Erklärung</h2>
+        <p>
+            <b>Einfaches Beispiel: </b>Eine Zahl aus dem Zahlenraum 0 bis 10 soll in eine Zahl aus dem Zahlenraum von 0 bis 100 übertragen werden. 
+            Zahl 2 aus dem Zahlenraum [0, 10] entspricht der Zahl 20 im Zahlenraum [0, 100]. 
+            <br>
+            Rechnung: 
+            <div class="fraction">
+                <span class="top">100</span> &#xb7; <b style="color: red;">2</b>
+                <span class="bottom">10</span>
+                <p>
+                    = 20
+                </p>
+            </div>
+            <br><br>
+            Wenn eine Zahl übertragen wird, dann verändert sich diese zwar, jedoch ist das Verhältnis des Abstandes zur 
+            untersten Zahl und dieses zur oberen Zahl gleich, wie bei der zu übertragenden Zahl und der untersten bzw. obersten Zahl 
+            ihres Zahlensystems. 
+            <br>
+            Eine Formel hierfür lautet:
+            <br><br>
+            <div class="fraction">
+                <span class="top">alte_Zahl * neuer_höchstwert</b>
+                <span class="bottom">alter_höchstwert</span>
+                <p>
+                    = neue_zahl
+                </p>
+                <br>
+
+            </div>
+            <br>
+            Oder: 
+            <br><br>
+            <div class="fraction">
+                <span class="top">alte_Zahl * neuer_niedrigstwer</b>
+                <span class="bottom">alter_niedrigstwert</span>
+                <p>
+                    = neue_zahl
+                </p>
+            </div>
+            <br>
+            <b>Weiteres Beispiel: </b>Die Zahl 50 aus dem Zahlenraum [0, 100] soll in den Zahlenraum [-50, 50] übertragen werden. 
+            Die übertragene Zahl ist 0.
+            <br><br>
+            Anwendung mit dem Beispiel von <code>analogWrite</code>. 
+            Mit dem <code>analogWrite</code> Befehl kann eine Ausgangsspannung zwischen 0 und 5 Volt an bestimmten digitalen Pins simuliert werden. 
+            Dazu wird dem <code>analogWrite</code> Block eine Zahl zwischen 0 und 255 übergeben. 
+            0 entspräche einer mittleren simulierten Ausgangsspannung von 0 Volt und 255 einer mittleren Ausgangsspannung von 5 Volt. 
+            <br>
+            Nun kann man mit dem <code>zuordnen</code> Block eine Spannung mit einem Wert zwischen 0 und 5 angeben und sich daraus dann den erforderlichen Wert für den <code>analogWrite</code> 
+            Befehl bestimmen lassen. 
+            <br><br>
+            <b>Beispiel: </b> Eine Spannung von 4,2 Volt soll am Pin 3 simuliert werden. 
+            <br>
+            <b style="color: red;">Wichtig: </b> Wenn eine Kommazahl eingesetzt wird, dann darf kein Komma verwendet werden. 
+            Für das Komma wird stattdessen ein Punkt eingesetzt. 
+            <br><br>
+            In ArduBlock:
+            <br><br>
+            <img src="map-beispiel.png" alt="beispiel-zum-zuordnen-block">
+        </p>
+        <h2 class="unterueberschrift" id="wert">Wert</h2>
+        <p>
+            Der <code>Wert</code> Parameter ist einfach dazu da, um den Zahlenwert aus dem Zahlenbereich <code>von Low</code> bis <code>von HIGH</code> einzutragen, der in den 
+            Zahlenbereich von <code>nach Low</code> bis <code>nach High</code> übertragen werden soll. 
+            Als <code>Wert</code> Parameter kann auch eine analoge Variable oder ein analoger Eingang des Arduinos verwendet werden. 
+            Es kann sich auch um eine Kommazahl handeln. 
+            <br>
+            <b style="color: red;">Achtung: </b>Natürlich muss der <code>Wert</code> Parameter zwischen <code>von Low</code> und <code>von High</code> liegen. 
+        </p>
+        <h2 class="unterueberschrift" id="von_low" id="von_high">von Low/ von High</h2>
+        <p>
+            Der <code>von Low</code> Parameter ist die untere Grenze des aktuellen Zahlenbereichs. 
+            <br>
+            Der <code>von High</code> Parameter ist die obere Grenze des aktuellen Zahlenbereichs. 
+        </p>
+        <h2 class="unterueberschrift" id="nach_low" id="nach_low">nach Low/ nach High</h2>
+        <p>
+            Der <code>nach Low</code> Parameter ist die untere Grenze des Zahlenbereichs in den die Größe unter <code>Wert</code> übertragen werden soll. 
+            <br>
+            Der <code>nach High</code> Parameter ist die obere Grenze des Zahlenbereichs in den die Größe unter <code>Wert</code> übertragen werden soll.
+        </p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code kann der <code>zuordnen</code> Block mit dem Befehl <code>map(Wert, von Low, von High, nach Low, nach High)</code> realisiert werden. 
+            Wobei für den die entsprechenden Parameter natürlich eingetragen werden müssen. 
+            <br><br>
+            Das Beispiel von oben würde im Code dann folgendermaßen aussehen: 
+            <br><br>
+            <code>
+                &emsp;&emsp;map(4.2, 0, 5, 0, 255);
+            </code>
+        <p>
+    </div>
+</article>
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/map.png b/src/main/webapp/com/ardublock/reference/map.png
new file mode 100644
index 0000000000000000000000000000000000000000..a0a108c84585d528491fab7a5966f502fd33a50e
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/map.png differ
diff --git a/src/main/webapp/com/ardublock/reference/map_common-beispiel.png b/src/main/webapp/com/ardublock/reference/map_common-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..6909d1a56bfcbe50444890c74ea7b85ad1cc650e
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/map_common-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/map_common.html b/src/main/webapp/com/ardublock/reference/map_common.html
new file mode 100644
index 0000000000000000000000000000000000000000..cc5f1d8d6d8a1b76b71f111bf2b0ff404d13a78c
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/map_common.html
@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html>
+    <link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Math. Operatoren / Signalanpassung</p>
+        <h1 style="font-size: 220%;">map [0, 1023] to [0, 255]</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "map_common.png" alt="addition-block"></img>
+            <figcaption id="caption">Für Erklärung auf einzelne Komponenten klicken.</figcaption>
+            </figure> 
+        </div>
+
+        <map name="blockmap">
+            <area shape="rect" coords="25, 20, 317, 56" href="#block_beschreibung" title="Block"></area>
+            <area shape="rect" coords="322, 20, 436, 56" href="#wert" title="Wert"></area>
+        </map>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>map [0, 1023] to [0, 255]</code> Block ist ein Block, der zur Signalanpassing dient. 
+            Mit ihm lassen sich Werte aus dem Zahlenbereich von 0 bis 1023 in den Zahlenbereich von 0 bis 255 übertragen. 
+            Beim Übertragen werden nur ganze Zahlen generiert. 
+            Es gibt keine Kommazahlen oder Brüche. 
+            Wenn ein Wert hintzer dem Komma entsteht, dann wird dieser abgeschnitten. 
+        </p>
+        <h2 class="unterueberschrift" id="block_beschreibung">Erklärung</h2>
+        <p>
+            In der Informatik wird oft mit bestimmten Zahlenbereichen gearbeitet. 
+            Dabei sind häufig Potenzen von 2 verwendet. 
+            <br>
+            Hier: Von 0 bis 1023 sind es 1024 Werte. 
+            1024 ist 2 hoch 10. 
+            <br>
+            Oder: Von 0 bis 255 sind es 256 Werte. 
+            256 ist 2 hoch 8.
+            <br><br>
+            <b>Beispiel: </b>Beim Befehl <code>analogRead</code> kann der Eingang an einem analogen Pin gemessen werden. 
+            Dabei wird keine Spannung direkt gemessen, sondern man bekommt nur Werte von 0 bis 1023. 
+            Diesen analogen Eingang kann man nun in den <code>map [0, 1023] to [0, 255]</code> Block einsetzen um den Eingangswert in aus dem Zahlenbereich von 0 bis 1023 in den 
+            Zahlenbereich von 0 bis 255 zu transferieren. 
+            <br>
+            Diese Anwendung ist allerdings sehr spezifisch, kommt jedoch häufig zum einsatz, wenn Sensoren ausgelesen oder Aktoren (z.B. ein Motor) angesteuert werden sollen. 
+            <br><br>
+            <b>Berechnung: </b>Hier noch eine Erklärung, wie man den Wert von Hand berechnen könnte. 
+            Hier: Es soll die Zahl <b style="color: red;">350</b> vom Zahlenbereich [0, 1023] in den Zahlenbereich [0, 255] transferiert werden. 
+            <br>
+            <div class="fraction">
+                <span class="top">255</span> &#xb7; <b style="color: red;">350</b>
+                <span class="bottom">1023</span>
+                <p>
+                    = 87,24 &rarr; 87
+                </p>
+            </div>
+            <br><br>
+            In ArduBlock: 
+            <br><br>
+            <img src="map_common-beispiel.png" alt="beispiel-zum-map-common-block">
+        </p>
+        <h2 class="unterueberschrift" id="wert">Wert</h2>
+        <p>
+            Der <code>Wert</code> Parameter ist einfach dazu da, um den Zahlenwert aus dem Zahlenbereich 0 bis 1024 einzutragen, der in den Zahlenbereich von 0 bis 255 übertragen werden soll. 
+            Als <code>Wert</code> Parameter kann auch eine analoge Variable oder ein analoger Eingang des Arduinos verwendet werden. 
+            <b style="color: red;">Achtung: </b>Natürlich muss der <code>Wert</code> Parameter zwischen 0 und 1024 liegen. 
+            Es kann sich auch um eine Kommazahl handeln. 
+        </p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code kann der <code>map [0, 1023] to [0, 255]</code> Block mit dem Befehl <code>map(Wert, 0, 1023, 0, 255)</code> realisiert werden. 
+            Wobei für den <code>Wert</code> Parameter natürlich die entsprechende zu Übertragende Größe eingetragen wird. 
+        <p>
+
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/map_common.png b/src/main/webapp/com/ardublock/reference/map_common.png
new file mode 100644
index 0000000000000000000000000000000000000000..01268fdd1ea439e7d075c6c8ae84d5a2da7fefc8
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/map_common.png differ
diff --git a/src/main/webapp/com/ardublock/reference/max-beispiel.png b/src/main/webapp/com/ardublock/reference/max-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..f809df51fd074a270d4873139eb83b7517f5f537
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/max-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/max.html b/src/main/webapp/com/ardublock/reference/max.html
new file mode 100644
index 0000000000000000000000000000000000000000..28c0a1112315102c8e86d77474c61f7ce57d81e9
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/max.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html>
+    <link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Math. Operatoren / Operatoren</p>
+        <h1 style="font-size: 220%;">max</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "max.png" alt="max-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>max</code> Block ist ein mathematischer Operator, der zwei Größen miteinander vergleicht und immer die größere Größe zurückgibt. 
+            Es können fest programmierte Zahlenwerte, analoge Eingänge oder analoge Variablen miteinander verglichen werden. 
+            Der <code>max</code> Block selbst kann dann als analoge Variable in anderen Blöcken verwendet werden. 
+            <br><br>
+            Wenn man mit der Maus über dem Block schwebt, dann erscheint ein kleiner Pfeil nach unten. 
+            Klickt man diesen mit der linken Maustaste, dann öffnet sich ein dropdown Menü und der <code>max</code> Block kann in einen <code>min</code> Block umgewandelt werden. 
+            Auf diesen wird allerdings in der entsprechenden eigenen Block-Referenz eingegangen. 
+        </p>
+        
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code kann der <code>max</code> Block mit dem Befehl <code>max(x, y)</code> realisiert werden. 
+            <code>x</code> und <code>y</code> stellen hier die beiden zu vergleichenden Größen dar. 
+            <br>
+            <b>Beispiel:</b> Der Wert eines Höhensensors soll auf einen Wert von 0 Meter nach unten begrenzt werden. 
+            Die Variable <code>hoehe</code> gibt die aktuelle Höhe in Meter an. 
+            Diese Variable wird nun zusammen mit dem fest Programmierten Wert 0 in den <code>max</code> Block eingesetzt. 
+            Wenn die Höhe über 0m liegt, dann wird der Wert der <code>hoehe</code> Variable ausgegeben. 
+            Hat die Variable einen Wert von unter 0, dann wird der Zahlenwert 0 zurückgegeben. 
+            <br><br>
+            In ArduBlock würde das so aussehen: 
+            <br><br>
+            <img src="max-beispiel.png" alt="beispiel-max">
+            <br><br>
+            Im Code: 
+            <br><br>
+            <code>
+                <b style="color: red;">max(</b>hoehe, 0<b style="color: red;">)</b>;
+            </code>
+            
+
+        <p>
+
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/max.png b/src/main/webapp/com/ardublock/reference/max.png
new file mode 100644
index 0000000000000000000000000000000000000000..e1a91dd58576da50ae585cf539e4b2f5630690bf
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/max.png differ
diff --git a/src/main/webapp/com/ardublock/reference/millis.html b/src/main/webapp/com/ardublock/reference/millis.html
new file mode 100644
index 0000000000000000000000000000000000000000..ed520e8dffdec0c13536c3c1a45bec77122fc328
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/millis.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+
+<link rel="stylesheet" href="_seitenformatierung.css">
+
+<body style="margin: 0px;">
+
+<div style="border: #284a66; border-style: solid; border-width: 5px;">
+    <nav>
+    <li id="beschreibung">Block-Referenz</li>
+    <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+    <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+    </nav>
+</div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Variablen/Konstanten / Zeit ab Start</p>
+        <h1 style="font-size: 220%;">Millis</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "millis.png" alt="millis-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Mit dem <code>Millis</code> Block kann man sich Anzahl der Millisekunden ausgeben lassen, die seit dem Beginn der Ausführung des 
+            Programms abgelaufen sind. 
+            Der <code>Millis</code> Block selbst kann dann als analoge Variable in anderen Blöcken verwendet werden. 
+            Man kann den Block jedoch auch für Timer-Funktionen nutzen, da er ja immer weiter läuft. 
+            Jedoch stehen hier auch die <code>warte Millisekunden</code> 
+            und der <code>solange(millis)</code> Block zur Verfügung.
+        </p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code kann der <code>Millis</code> Block mit dem Befehl <code>millis()</code> realisiert werden. 
+            Die Klammern bleiben dabei leer. 
+            Der Ausdruck kann dann wie jede andere Zahl oder Variable verwendet werden. 
+
+        <p>
+
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/millis.png b/src/main/webapp/com/ardublock/reference/millis.png
new file mode 100644
index 0000000000000000000000000000000000000000..0dcd296216e514799de9270b1378508bc082ad36
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/millis.png differ
diff --git a/src/main/webapp/com/ardublock/reference/min-beispiel.png b/src/main/webapp/com/ardublock/reference/min-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..56240d8311094842a7c659a53d839ce3378a81bb
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/min-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/min.html b/src/main/webapp/com/ardublock/reference/min.html
new file mode 100644
index 0000000000000000000000000000000000000000..9edcb9561281b099851e81c9466fcae13ba9c6e6
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/min.html
@@ -0,0 +1,75 @@
+
+<!DOCTYPE html>
+<html>
+    <link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Math. Operatoren / Operatoren</p>
+        <h1 style="font-size: 220%;">min</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "min.png" alt="addition-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>min</code> Block ist ein mathematischer Operator, der zwei Größen miteinander vergleicht und immer die kleinere Größe zurückgibt. 
+            Es können fest programmierte Zahlenwerte, analoge Eingänge oder analoge Variablen miteinander verglichen werden. 
+            Der <code>min</code> Block selbst kann dann als analoge Variable in anderen Blöcken verwendet werden. 
+            <br><br>
+            Wenn man mit der Maus über dem Block schwebt, dann erscheint ein kleiner Pfeil nach unten. 
+            Klickt man diesen mit der linken Maustaste, dann öffnet sich ein dropdown Menü und der <code>min</code> Block kann in einen <code>max</code> Block umgewandelt werden. 
+            Auf diesen wird allerdings in der entsprechenden eigenen Block-Referenz eingegangen. 
+        </p>
+        
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code kann der <code>min</code> Block mit dem Befehl <code>min(x, y)</code> realisiert werden. 
+            <code>x</code> und <code>y</code> stellen hier die beiden zu vergleichenden Größen dar. 
+            Die beiden zu vergleichenden analogen Größen werden jeweils vor und nach dem Operator eingefügt. 
+            <br>
+            <b>Beispiel:</b> Ein Temperaurwert soll auf eine Temperatur von 100 Grad nach oben begrenzt werden. 
+            Die Variable <code>temperatur</code> gibt den Wert der Temperatur in Grad Celsius an. 
+            Diese Variable wird nun zusammen mit dem Fest Programmierten Wert 100 in den <code>min</code> Block eingesetzt. 
+            Wenn die Temperaur unter 100 °C liegt, dann wird der Wert der <code>temperatur</code> Variable ausgegeben. 
+            Hat die Variable einen Wert von über 100, dann wird der Zahlenwert 100 zurückgegeben. 
+            <br><br>
+            In ArduBlock würde das so aussehen: 
+            <br><br>
+            <img src="min-beispiel.png" alt="beispiel-min">
+            <br><br>
+            Im Code: 
+            <br><br>
+            <code>
+                <b style="color: red;">min(</b>temperatur, 100<b style="color: red;">)</b>;
+            </code>
+            
+
+        <p>
+
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/min.png b/src/main/webapp/com/ardublock/reference/min.png
new file mode 100644
index 0000000000000000000000000000000000000000..f07950e615df9423a5c11fe239e9f0f8a8f54665
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/min.png differ
diff --git a/src/main/webapp/com/ardublock/reference/modulo-beispiel.png b/src/main/webapp/com/ardublock/reference/modulo-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..348346a7711cbf0bb4f635d3d6f28627a5389df2
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/modulo-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/modulo.html b/src/main/webapp/com/ardublock/reference/modulo.html
new file mode 100644
index 0000000000000000000000000000000000000000..e9e26dc7fb8d6880bde63ecf12a548c53c63cebb
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/modulo.html
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html>
+    <link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Math. Operatoren / Operatoren</p>
+        <h1 style="font-size: 220%;">%</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "modulo.png" alt="addition-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>%</code> Block ist ein mathematischer Operator, der den Rest der Division von zwei Zahlen ausgibt. 
+            Es können fest Programmierte Zahlenwerte, analoge Eingänge oder analoge Variablen miteinander verrechnet werden. 
+            Der <code>%</code> Block selbst kann dann als analoge Variable in anderen Blöcken verwendet werden. 
+            <br><br>
+            Wenn man mit der Maus über dem Block schwebt, dann erscheint ein kleiner Pfeil nach unten. 
+            Klickt man diesen mit der linken Maustaste, dann öffnet sich ein Dropdown Menü und der <code>%</code> Block kann folgende Blöcke umgewandelt werden: 
+            <br><br>
+            <code>
+                &emsp;&emsp;+ <br>
+                &emsp;&emsp;- <br>
+                &emsp;&emsp;x <br>
+                &emsp;&emsp;/ <br>
+                &emsp;&emsp;% <br>
+            </code>
+            
+            <br><br>
+            Auf diese wird allerdings in der entsprechen eigenen Block-Referenz eingegangen. 
+        </p>
+        <h2 class="unterueberschrift" id="block_beschreibung">Erklärung</h2>
+        <p>
+           Wenn eine Zahl durch eine andere geteilt wird dann kann dabei ein Rest entstehen. 
+           Man sagt auch die Division "geht nicht auf". 
+           Normalerweise kann man sich dabei mit Kommazahlen und Brüchen helfen das korrekte Ergebnis zu ermitteln. 
+           Bei dem Modulo Operator geht es allerdings um den Rest. 
+           Damit kann zum Beispiel ermittelt werden ob eine Variable gerade oder ungerade ist.
+           Wenn man eine gerade Variable durch 2 teilt dann bleibt kein Rest übrig. 
+           Der Modulo-Block wird dann 0. 
+           Wenn jedoch eine ungerade Zahl duch 2 geteilt wird, dann wird der Modulo Block 1. 
+           <br><br>
+           <b>Beispiel: </b>12 % 5 = 2
+           <br>
+           Erklärung: Man schaut welches Vielfache der rechten Zahl noch in die linke Zahl passt. 
+           In diesem Fall wäre das 10 (5 mal 2). 
+           <br>
+           Dann schaut man welche Differenz noch zur linken Zahl ist. 
+           In diesem Fall 2 (von 10 zu 12 fehlen 2). 
+           Diese Zahl ist dann das Ergebnis der Modulo Operation. 
+           <br><br>
+           <b>Weiteres Beispiel: </b>27 % 8 = 3 
+           <br>
+           Erklärung: 8 mal 3 sind 24. Von 24 zu 27 fehlen 3.
+
+        </p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code kann der <code>%</code> Block mit einem einfachen Prozent-Zeichen (<code>%</code>) realisiert werden. 
+            Die beiden zu verrechnenden analogen Größen werden jeweils vor und nach dem Operator eingefügt. 
+            <br>
+            <b>Beispiel:</b> Es soll geprüft werden ob die Variable <code>var</code> durch 5 teilbar ist oder nicht. 
+            Das Ergebnis soll dann im seriellen Monitor ausgegeben werden. 
+            Logik: Wenn <code>var</code> durch 5 teilbar ist, dann würde die Operation <code>var % 5</code> Null ergeben. 
+            Diese Bedingung wird hier geprüft. 
+            <br><br>
+            In ArduBlock: 
+            <br><br>
+            <img src="modulo-beispiel.png" alt="beispiel-modulo">
+            <br><br>
+            Im Code: 
+            <br><br>
+            <code>
+                if (( ( var % 5 ) == 0 )) { <br>
+                    &emsp;&emsp;Serial.print("Die Variable var ist durch 5 teilbar! "); <br>
+                    &emsp;&emsp;} <br>
+                  else { <br>
+                    &emsp;&emsp;Serial.print("Die Variable var ist NICHT durch 5 teilbar! "); <br>
+                    &emsp;&emsp;} <br>
+            } <br>
+            <br>
+            </code>
+            
+
+        <p>
+
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/modulo.png b/src/main/webapp/com/ardublock/reference/modulo.png
new file mode 100644
index 0000000000000000000000000000000000000000..fafd3af244c6dd2d04149de74011517192348ae1
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/modulo.png differ
diff --git a/src/main/webapp/com/ardublock/reference/multiplication-beispiel.png b/src/main/webapp/com/ardublock/reference/multiplication-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..f566139331eae9c05f47deba66703550d3b031f3
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/multiplication-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/multiplication.html b/src/main/webapp/com/ardublock/reference/multiplication.html
new file mode 100644
index 0000000000000000000000000000000000000000..1cbf184cca867d67e204240087c9a5c3d36ec3df
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/multiplication.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+    <link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Math. Operatoren / Operatoren</p>
+        <h1 style="font-size: 220%;">x</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "multiplication.png" alt="addition-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>x</code> Block ist ein mathematischer Operator, der zwei analoge Größen miteinander mulipliziert und selbst einen analogen Wert annehmen kann. 
+            Es können fest programmierte Zahlenwerte, analoge Eingänge oder analoge Variablen miteinander verrechnet werden. 
+            Jedoch können pro <code>x</code> Block immer nur zwei Größen auf einmal mulipliziert werden. 
+            Der <code>x</code> Block selbst kann dann als analoge Variable in anderen Blöcken verwendet werden. 
+            <br><br>
+            Wenn man mit der Maus über dem Block schwebt, dann erscheint ein kleiner Pfeil nach unten. 
+            Klickt man diesen mit der linken Maustaste, dann öffnet sich ein Dropdown Menü und der <code>x</code> Block kann folgende Blöcke umgewandelt werden: 
+            <br><br>
+            <code>
+                &emsp;&emsp;+ <br>
+                &emsp;&emsp;- <br>
+                &emsp;&emsp;x <br>
+                &emsp;&emsp;/ <br>
+                &emsp;&emsp;% <br>
+            </code>
+            
+            <br><br>
+            Auf diese wird allerdings in der entsprechen eigenen Block-Referenz eingegangen. 
+        </p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code kann der <code>x</code> Block mit einem Stern-Zeichen (<code>*</code>) realisiert werden. 
+            Die beiden zu verrechnenden analogen Größen werden jeweils vor und nach dem Operator eingefügt. 
+            <br>
+            <b>Beispiel:</b> Wenn Variable <code>var</code> soll mit 3 multipliziert werden und es soll eine Nachricht im seriellen Monitor über den neuen Wert ausgegeben werden.  
+            <br><br>
+            In ArduBlock: 
+            <br><br>
+            <img src="multiplication-beispiel.png" alt="beispiel-multiplikation">
+            <br><br>
+            Im Code: 
+            <br><br>
+            <code>
+                var = ( var <b style="color: red;">*</b> 3 ); <br>
+                Serial.print("Der neue Wert der Variable var ist: "); <br>
+                Serial.print(var ); <br>
+            } <br>
+            <br>
+            </code>
+            
+
+        <p>
+
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/multiplication.png b/src/main/webapp/com/ardublock/reference/multiplication.png
new file mode 100644
index 0000000000000000000000000000000000000000..7b3179d6b733759063dc2c8247fffeb99ba488bd
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/multiplication.png differ
diff --git a/src/main/webapp/com/ardublock/reference/not-beispiel.png b/src/main/webapp/com/ardublock/reference/not-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..0107bcc0a956d68b512ebe8cbbf477ff93d27eed
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/not-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/not.html b/src/main/webapp/com/ardublock/reference/not.html
new file mode 100644
index 0000000000000000000000000000000000000000..642d882cbac9e1eb819d4b25edaff2382a852927
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/not.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+    <link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Log. Operatoren / Logische Verknüpfungen</p>
+        <h1 style="font-size: 220%;">Nicht</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "not.png" alt="nicht-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>NICHT</code> Block ist ein Logik-Block, der das Signal eines digitalen Blocks umkehren kann. 
+            Ein digitaler Block kann entweder wahr (<code>true</code>) oder falsch (<code>false</code>) sein. 
+            Durch den <code>NICHT</code> Block wird diese Eigenschaft umgekehrt. 
+            Wenn der Pin 2 normalerweise als digitaler Eingang festgelegt wird, dann ist dieser wahr, wenn eine Spannung von 5 Volt an ihm anliegt und falsch, wenn keine Spannung anliegt. 
+            Ist der <code>digitalRead</code> Block allerdings mit dem <code>NICHT</code> Block verknüpft, dann kehrt sich diese Eigenschft genau um. 
+            Es können auch die logischen Vergleich <code>UND</code> und <code>ODER</code> mit einem <code>NICHT</code> Block verknüpft werden. 
+            Genau so wie alle Vergleichsoperatoren (==, !=, &lt;, &gt;... usw.). 
+            Auch bei diesen ist die Logik dann genau umgekehrt. 
+            Ist der Block <code>false</code>, dann ändert der <code>NICHT</code> Block das Signal zu <code>true</code>. 
+            Ist der Block <code>true</code>, dann ändert der <code>NICHT</code> Block das Signal zu <code>false</code>. 
+        </p>
+        <h2 class="unterueberschrift" id="beispiel">Beispiel</h2>
+        <p>
+            Der Pin 2 ist als digitaler Eingang definiert. Nun soll bei jedem Durchlauf der Hauptschleife eine Nachricht auf dem seriellen Monoitor ausgegeben werden, wenn der Pin <code>LOW</code> ist. 
+            Dazu wird der <code>digitalRead</code>, der <code>falls</code> und der <code>Serial print</code> Block verwendet. 
+            <br><br>
+            In ArduBlock kann diese Funktion folgendermaßen mit einem <code>NICHT</code> Block realisiert werden: 
+            <br><br>
+            <img src="not-beispiel.png" alt="nicht-block-beispiel">
+        <p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code kann der <code>NICHT</code> Block auf zwei verschiedene Weisen realisiert werden. 
+            Zum einen kann vor das Statement, welches negiert werden soll ein Ausrifezeichen (<code>!</code>) gesetzt werden. 
+            <br>
+            <b>Beispiel: </b>Wenn Variable <code>var</code> größer als 10 ist, dann soll das Statement falsch sein: 
+            <br>
+            <code>!(var &gt; 10)</code>
+            Alternativ kann der Befehl <code>not()</code> verwendet werden, wobei zwischen die Klammern dann der Ausdruck geschrieben wird, auf den der "nicht" Befehl angewendet werden soll. 
+            <br>
+            <b>Beispiel von oben:</b>
+            <br>
+            <code>not(var &gt; 10)</code>
+            <br><br>
+            Das <a href="#beispiel">Beispiel</a> mit dem digitalen Eingang von oben würde im Code folgendermaßen aussehen: 
+            <br><br>
+            <code>
+                void loop() { <br>
+                &emsp;&emsp;if (<b style="color: red;">!</b>( digitalRead(2) )) { <br>
+                    &emsp;&emsp;&emsp;&emsp;Serial.print("Der digitale Pin 2 ist LOW "); <br>
+                    &emsp;&emsp;&emsp;&emsp;Serial.println(); <br>
+                    &emsp;&emsp;} <br>
+            } <br>
+            </code>
+            
+            <br>
+            Alternativ:
+            <br><br>
+            <code>
+                void loop() { <br>
+                &emsp;&emsp;if (<b style="color: red;">not</b>( digitalRead(2) )) { <br>
+                    &emsp;&emsp;&emsp;&emsp;Serial.print("Der digitale Pin 2 ist LOW "); <br>
+                    &emsp;&emsp;&emsp;&emsp;Serial.println(); <br>
+                    &emsp;&emsp;} <br>
+            } <br>
+            </code>
+            
+        <p>
+
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/not.png b/src/main/webapp/com/ardublock/reference/not.png
new file mode 100644
index 0000000000000000000000000000000000000000..81adc9d5a0e530625ff7598c79c2143bc51fbe90
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/not.png differ
diff --git a/src/main/webapp/com/ardublock/reference/not_equal-beispiel.png b/src/main/webapp/com/ardublock/reference/not_equal-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..402b9e59b1f74283ec568127ea51d0f594d9e411
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/not_equal-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/not_equal.html b/src/main/webapp/com/ardublock/reference/not_equal.html
new file mode 100644
index 0000000000000000000000000000000000000000..7132f99579c73bfab3ce3eca80202a90561ec941
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/not_equal.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html>
+    <link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Log. Operatoren / Vergleiche</p>
+        <h1 style="font-size: 220%;">!= (analog)</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "not_equal.png" alt="analog-gleich-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der analoge <code>!=</code> Block ist ein Logik-Block, der zwei analoge Größen miteinander vergleicht, selbst aber nur einen digitalen Zustand (entweder <code>true</code> oder <code>false</code>) annehmen kann. 
+            Es können fest Programmierte Zahlenwerte, analoge Eingänge oder analoge Variablen miteinander verglichen werden. 
+            Jedoch können pro analogem <code>!=</code> Block immer nur zwei Größen auf einmal verglichen werden. 
+            Der analoge <code>!=</code> Block ist <code>true</code>, wenn die beiden analogen Größen nicht den gleichen Wert haben. 
+            <br>
+            Ist die Größe im linken Feld größer, als die im rechten Feld, dann ist der Block an sich <code>true</code>. 
+            Ist die Größe im rechten Feld größer, als die im linken Feld, dann ist der Block an sich <code>true</code>. 
+            Haben beide Größen den gleichen Wert, dann ist der Block an sich <code>false</code>. 
+            <br><br>
+            Wenn man mit der Maus über dem Block schwebt, dann erscheint ein kleiner Pfeil nach unten. 
+            Klickt man diesen mit der linken Maustaste, dann öffnet sich ein Dropdown Menü und der analoge <code>!=</code> Block kann folgende Blöcke umgewandelt werden: 
+            <br><br>
+            <code>
+                &emsp;&emsp;&gt; <br>
+                &emsp;&emsp;&lt; <br>
+                &emsp;&emsp;&gt;= <br>
+                &emsp;&emsp;&lt;= <br>
+                &emsp;&emsp;== (analog) <br>
+            </code>
+            
+            <br><br>
+            Auf diese wird allerdings in der entsprechen eigenen Block-Referenz eingegangen.
+        </p>
+        <h2 class="unterueberschrift" id="beispiel">Beispiel</h2>
+        <p>
+            Hier sind drei Beispiele, wie sich der analoge <code>!=</code> Block verhält, wenn man verschiedene, beispielhafte Werte an seinen Eingängen anlegt. 
+            <br>
+            Für die fest eingesetzten Zahlenwerte können hier auch analoge Variablen oder analoge Eingänge verwendet werden:
+            <br><br>
+            <img src="not_equal-beispiel.png" alt="analog-nicht-gleich-beispiel" style="border:grey solid 2px">
+        <p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code kann der analoge <code>!=</code> Block mit einem Ausrufezeichen und einem Gleich-Zeichen (<code>!=</code>) realisiert werden. 
+            Die beiden zu vergleichenden analogen Größen werden jeweils vor und nach dem Operator eingefügt. 
+            <br>
+            <b>Beispiel:</b> Wenn die Variable <code>var</code> nicht gleich 100 ist, soll eine Nachricht im seriellen Monitor ausgegeben werden.  
+            <br><br>
+            Im Code: 
+            <br><br>
+            <code>
+                if( var <b style="color: red;">!=</b> 100 ){ <br>
+                &emsp;&emsp;Serial.print("Die Variable var ist nicht gleich 100!"); <br>
+            } <br>
+            <br>
+            </code>
+        <p>
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/not_equal.png b/src/main/webapp/com/ardublock/reference/not_equal.png
new file mode 100644
index 0000000000000000000000000000000000000000..eea950d40463387888d4297b89475a418d5fd810
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/not_equal.png differ
diff --git a/src/main/webapp/com/ardublock/reference/not_equal_digital-beispiel.png b/src/main/webapp/com/ardublock/reference/not_equal_digital-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..728f2edb56b07c1e004d6933294cd865e48f6db2
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/not_equal_digital-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/not_equal_digital.html b/src/main/webapp/com/ardublock/reference/not_equal_digital.html
new file mode 100644
index 0000000000000000000000000000000000000000..f16382f91dcc8a2bf78d222fddcef9a0f9a0ca6b
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/not_equal_digital.html
@@ -0,0 +1,81 @@
+<!DOCTYPE html>
+<html>
+    <link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Log. Operatoren / Vergleiche</p>
+        <h1 style="font-size: 220%;">!= (digital)</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "not_equal_digital.png" alt="nicht-gleich-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der digitale <code>!=</code> Block ist ein Logik-Block, der zwei digitale Größen miteinander vergleicht und selbst auch einen digitalen Zustand (<code>HIGH</code> oder <code>LOW</code>) annehmen kann. 
+            Es können fest Programmierte <code>true</code> und <code>false</code> Blöcke, sowie digitale Variablen oder digitale Eingänge miteinander verglichen werden. 
+            Jedoch können pro digitalem <code>!=</code> Block zwei Variablen auf einmal verglichen werden. 
+            <br>
+            Wenn die beiden digitalen Eingänge den gleichen Wert haben, dann ist der <code>!=</code> Block selbst <code>false</code>. Dabei spielt es keine Rolle ob die beiden Signale beide 
+            <code>true</code> oder beide <code>false</code> sind. 
+            Wenn die beiden Eingänge jedoch einen unterschiedlichen Wert haben, dann ist der <code>!=</code> Block selbst <code>true</code>. 
+            <br><br>
+            Wenn man mit der Maus über dem Block schwebt, dann erscheint ein kleiner Pfeil nach unten. 
+            Klickt man diesen mit der linken Maustaste, dann öffnet sich ein Dropdown Menü und der digitale <code>!=</code> Block kann in einen <code>==</code> Block umgewandelt werden. 
+            Dieser hat genau die umgekehrte Funktion. 
+            Auf diese wird allerdings in der entsprechen eigenen Block-Referenz erklärt.
+        </p>
+        <h2 class="unterueberschrift" id="beispiel">Beispiel</h2>
+        <p>
+            Hier ist eine Übersicht, wie sich der digitale <code>!=</code> Block verhält, wenn man verschiedene logische Kombinationen an seinen Eingängen anlegt. 
+            Für <code>true</code> und <code>false</code> könnte hier auch <code>HIGH</code> oder <code>LOW</code> eingetragen werden. 
+            Diese haben dieselbe Bedeutung. 
+            Ein Verwenden von digitalen Variablen oder digitalen Eingängen des Arduinos ist natürlich ebenso möglich. 
+            <br><br>
+            <img src="not_equal_digital-beispiel.png" alt="nicht-block-beispiel" style="border:grey solid 2px">
+        <p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code kann der digitale <code>!=</code> Block mit einem Ausrufezeichen und einem Gleich-Zeichen (<code>!=</code>) realisiert werden. 
+            Die beiden zu vergleichenden digitalen Größen werden jeweils vor und nach dem Operator eingefügt. 
+            <br>
+            <b>Beispiel:</b> Wenn am Pin 3 <b>keine</b> Spannung anliegt und dieser <code>LOW</code> wird, soll eine Nachticht ausgegeben werden. 
+            <br><br>
+            Im Code: 
+            <br><br>
+            <code>
+                if( digitalRead(3) <b style="color: red;">!=</b> true ){ <br>
+                &emsp;&emsp;Serial.print("An Pin 3 liegt keine Spannung an!"); <br>
+            } <br>
+            </code>
+            
+            <br>
+
+        <p>
+
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/not_equal_digital.png b/src/main/webapp/com/ardublock/reference/not_equal_digital.png
new file mode 100644
index 0000000000000000000000000000000000000000..066724ab798a04b9a338064c35bd20dd95a26d0c
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/not_equal_digital.png differ
diff --git a/src/main/webapp/com/ardublock/reference/number.html b/src/main/webapp/com/ardublock/reference/number.html
new file mode 100644
index 0000000000000000000000000000000000000000..45b5ba752c41b47024957984ac9045dc892693ee
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/number.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+
+<link rel="stylesheet" href="_seitenformatierung.css">
+
+<body style="margin: 0px;">
+
+<div style="border: #284a66; border-style: solid; border-width: 5px;">
+    <nav>
+    <li id="beschreibung">Block-Referenz</li>
+    <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+    <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+    </nav>
+</div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Math. Operatoren / Analog</p>
+        <h1 style="font-size: 220%;">analoge Größe</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "number.png" alt="zahl-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+        
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Dieser Block ist sehr simpel. 
+            Er symbolisiert einfach nur eine Zahl. 
+            Er kann überall eingesetzt werden, wo eine analoge Größe verwendet werden kann (hexagonale Form). 
+            Er kann jede analoge Größe annehmen. 
+            Also jede mögliche Zahl. 
+            Auch Kommazahlen, wenn man allerdings eine Kommazahl in den Block eintragen will, muss das Komma durch einen 
+            Punkt ersetzt werden. 
+            <br><br>
+            Mit diesem Block können zum Beispiel Pins in den <code>analogRead</code> oder <code>analogWrite</code> Blöcken ausgewählt werden 
+            oder mit ihm kann ein Wert einer analogen Größe mit dem <code>Setze analoge Variable</code> gesetzt werden. 
+            Der Block wird also sehr häufig benötigt. 
+            <br><br>
+            Um die Zahl zu ändern die der Block repräsentieren soll muss man mit der linken Maustaste auf den Block klicken. 
+            Dies startet den Bearbeitungsmodus. 
+            Dann kann einfach ein neuer Wert eingetragen werden und mit der Enter-Taste der Bearbeitungsmodus wieder verlassen werden. 
+            Dann ist der neue Wert im Block gespeichert. 
+         </p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>          
+            Wenn im Code mit einer Zahl gearbeitet wird, dann wird einfach nur die Zahl selbst in der entsprechenden Funktion verwendet. 
+            mit eingegeben werden. 
+            <br>
+            <b>Beispiel:</b> Die Variable <code>var</code> soll auf 12 gesetzt werden. 
+            <br><br>
+            <code>var = 12;</code>
+        <p>
+</div>
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/number.png b/src/main/webapp/com/ardublock/reference/number.png
new file mode 100644
index 0000000000000000000000000000000000000000..bda8a2e2b376143b9a7731b07333792f286d1e45
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/number.png differ
diff --git a/src/main/webapp/com/ardublock/reference/or-beispiel.png b/src/main/webapp/com/ardublock/reference/or-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..ea58ff44e76ea031919f9e3b2dd68dd33a3b8a41
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/or-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/or.html b/src/main/webapp/com/ardublock/reference/or.html
new file mode 100644
index 0000000000000000000000000000000000000000..da373f11c9ec3c0e1790c0aa82e099b9a1abdcef
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/or.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+    <link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Log. Operatoren / Logische Verknüpfungen</p>
+        <h1 style="font-size: 220%;">Oder</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "or.png" alt="oder-Block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>ODER</code> Block ist eine logische Verknüpfung von zwei digitalen Variablen, wobei diese auch beispielsweise digitale Eingänge sein könnten. 
+            Wenn eine der beiden Eingänge oder beide Eingänge des <code>ODER</code> Blocks wahr sind, dann ist auch der <code>ODER</code> Block selbst wahr bzw. <code>TRUE</code>. 
+            Wenn man mit der Maus über den Block schwebt, dann erscheint ein kleiner Pfeil. 
+            Wenn man diesen anklickt, dann öffnet sich ein dropdown Menü, mit welchem man den <code>ODER</code> Block in einen <code>UND</code> Block umwandeln kann. 
+        </p>
+        <h2 class="unterueberschrift" id="beispiel">Beispiele</h2>
+        <p>
+            Hier ist eine Übersicht, wie sich der <code>ODER</code> Block verhält, wenn man verschiedene logische Kombinationen an seinen Eingängen anlegt. 
+            Für <code>true</code> und <code>false</code> könnte hier auch <code>HIGH</code> oder <code>LOW</code> eingetragen werden. 
+            Diese haben dieselbe Bedeutung. 
+            Ein Verwenden von digitalen Variablen oder digitalen Eingängen des Arduinos ist natürlich ebenso möglich. 
+            <br><br>
+            <img src="or-beispiel.png" alt="Beispiel zum digitalRead Block" style="border:grey solid 2px;">
+        <p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code wird die <code>ODER</code> Funktion mit zwei Senkrechten Strichen zwischen den beiden Variablen realisiert. 
+            Diese sehen so aus: <code>||</code>. 
+            Alternativ kann das englische Wort <code>or</code> statt der beiden Striche verwendet werden.
+            <br><br>
+            <b>Beispiel:</b>
+            <br>
+            Wenn am digitalen Pin 2 <b>oder</b> am digitalen Pin 4 eine Spannung von 5 Volt anliegt, dann soll auf dem seriellen Monitor eine Mitteilung erscheinen. 
+            Dazu wird der <code>falls</code>, der <code>digitalRead</code> und der <code>Serial print</code> Befehl verwendet. 
+            <br><br>
+            Im Code sieht das dann folgendermaßen aus (der <code>ODER</code> Teil ist rot markiert):
+            <br><br>
+            <code>
+                if (( digitalRead(2) <b style="color: red;">||</b> digitalRead(4) )) { <br>
+                &emsp;&emsp;Serial.print("An Pin 2 oder 4 liegt Spannung an! "); <br>
+              } <br>
+            </code>
+            
+              <br>
+            Alternativ:
+            <br><br>
+            <code>
+                if (( digitalRead(2) <b style="color: red;">or</b> digitalRead(4) )) { <br>
+                &emsp;&emsp;Serial.print("An Pin 2 oder 4 liegt Spannung an! "); <br>
+              } <br>
+            </code>
+            
+              <br>
+        <p>
+
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/or.png b/src/main/webapp/com/ardublock/reference/or.png
new file mode 100644
index 0000000000000000000000000000000000000000..908bad1ceeb065339c6c18dc59f98cc6cf94b690
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/or.png differ
diff --git a/src/main/webapp/com/ardublock/reference/pin-read-analog-beispiel.png b/src/main/webapp/com/ardublock/reference/pin-read-analog-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..861fd2cac5563736bd27732016255636cab764af
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/pin-read-analog-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/pin-read-analog.html b/src/main/webapp/com/ardublock/reference/pin-read-analog.html
new file mode 100644
index 0000000000000000000000000000000000000000..0d5557d0584e409d01ce46ed50b736fe5d4bd688
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/pin-read-analog.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html>
+<link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Input</p>
+        <h1 style="font-size: 220%;">analogRead</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "pin-read-analog.png" usemap="#blockmap" alt="analogRead-Block"></img>
+            <figcaption id="caption">Für Erklärung auf einzelne Komponenten klicken.</figcaption>
+            </figure> 
+        </div>
+
+        <map name="blockmap">
+            <area shape="rect" coords="12, 13, 170, 62" href="#block_beschreibung" title="Auszuführende Operation"></area>
+            <area shape="rect" coords="177, 23, 317, 61" href="#pin_ansteuerung" title="Anzusteuernder Pin"></area>
+        </map>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Mit dem <code>analogRead</code> Block können die analogen Pins des Microcontrollers ausgelesen werden. 
+            <br><br>
+            Das heißt man kann Spannungen an den analogen Pins A0 bis A5 zwischen 0 und 5 Volt gegen das Potential am GND Pin messen und mit diesen dann Rechenoperationen ausführen oder diese Ausgeben.
+            Die meisten analoge Sensoren geben ihr Messergebnis als eine Strom- oder Spannungsgröße zurück. 
+            Beides kann mit der analogRead Funktion erfasst werden. 
+            Bei Stromgrößen muss man hier die Spannung über einen bekannten Widerstand messen, durch den der entsprechende Strom fließt, um dessen Betrag zu errechnen zu können. 
+            Der <code>analogRead</code> Block nimmt dabei nicht genau den Spannungswert an, sondern einen Wert zwischen 0 (bei 0 Volt Spannung) und 1023 (bei 5 Volt Spannung), da der Eingang eine 
+            10 Bit Auflösung hat. (10 Bit: 2<sup>10</sup> = 1024 Werte)
+            <br><br>
+            <b>Beispiel:</b> Es liegt eine Spannung von 1 Volt am Eingang an. Welchen Wert gibt der <code>analogRead</code> Block zurück?
+            <br>
+            <div class="fraction">
+                <span class="top">1023</span> &#xb7; <b style="color: red;"> 1 Volt</b>
+                <span class="bottom">5 Volt</span>
+            </div>
+            &#8776 205</p>
+            <br>
+            <b>Weiteres Beispiel:</b> Der <code>analogRead</code> Block gibt einen Zahlenwert von 540 aus. Welche Spannung liegt am Eingang an?
+            <br>
+            <div class="fraction">
+                <span class="top">5 Volt</span> &#xb7; <b style="color: red;"> 540</b>
+                <span class="bottom">1023</span>
+            </div>
+            &#8776 2,64 Volt</p>
+        </p>
+        <h2 class="unterueberschrift" id="pin_ansteuerung">Pin</h2>
+        <p>
+            Ein wählbarer Parameter dabei ist der <code>Pin</code>. Wie der Name schon vermuten lässt, kann man durch diesen Parameter den Pin wählen, der ausgelesen weden soll. Die Nummer des jeweiligen
+            Pins kann auf dem Arduino selbst abgelesen werden, wo die Benennung aufgedruckt ist. Es können die analogen Pins A0 bis A5 gewählt werden. 
+            Die digitalen Pins 0 bis 13 sind <b>nicht</b> geeignet. 
+            Die Pinbezeichnung ist in aller Regel auf die Platine des Arduinos aufgedruckt.
+        <p>
+        <h2 class="unterueberschrift" id="beispiel">Beispiel</h2>
+        <p>
+            In diesem Beispiel soll eine LED in Abhängigkeit des Eingangssignals an Pin A0 angesteuert werden. 
+            Die LED ist über einen Vorwiderstand an den digitalen Pin 5 angeschlossen. 
+            Wenn am Pin A0 eine Spannung von über 1 Volt anliegt, soll die LED Blinken. 
+            Wenn eine geringere Spannung anliegt, dann soll die LED normal durchgehend leuchten. 
+            Hier wird der <code>falls</code> und <code>sonst</code> Block verwendet, welche eine Bedingung überprüfen und anhand dieser dann einen Code entweder ausführen oder überspringen. 
+            Zudem wird der Vergleichsoperator "<code>&lt;=</code>" verwendet. 
+            Dieser ist <code>true</code>, wenn der analoge Wert des <code>analogRead</code> Blockes den Wert von 205 übersteigt. 
+            <br><br>
+            In ArduBlock könnte diese Funktion dann folgendermaßen aussehen:
+            <br><br>
+            <img src="pin-read-analog-beispiel.png" alt="Beispiel zum analogRead Block">
+        <p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code wird der Block mit der Funktion <code>analoglRead(Pin)</code> realisiert. Wobei für <code>Pin</code> hier die entsprechende Pinnummer eingetragen wird.
+            <br><br>
+            Im Code würde das Beispiel folgendermaßen aussehen: 
+            <br><br>
+            <code>
+                if (205 &lt;= analogRead(0)) { <br>
+                &emsp;&emsp;digitalWrite( 5 , HIGH ); <br>
+                &emsp;&emsp;delay( 1000 ); <br>
+                &emsp;&emsp;digitalWrite( 5 , LOW ); <br>
+                &emsp;&emsp;delay( 1000 ); <br>
+              } <br>
+              else { <br>
+                &emsp;&emsp;digitalWrite( 5 , HIGH ); <br>
+              }
+            </code>
+            
+        <p>
+
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/pin-read-analog.png b/src/main/webapp/com/ardublock/reference/pin-read-analog.png
new file mode 100644
index 0000000000000000000000000000000000000000..ce0aff58eb987eac836408c3307c2796fe4bd610
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/pin-read-analog.png differ
diff --git a/src/main/webapp/com/ardublock/reference/pin-read-digital-beispiel.png b/src/main/webapp/com/ardublock/reference/pin-read-digital-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..38d5081827cf532b2425404691a987a6b280fd2a
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/pin-read-digital-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/pin-read-digital-pullup.html b/src/main/webapp/com/ardublock/reference/pin-read-digital-pullup.html
new file mode 100644
index 0000000000000000000000000000000000000000..d8c846263201266b09dfe9b44820d897b3d358e1
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/pin-read-digital-pullup.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html>
+    <link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Input</p>
+        <h1 style="font-size: 220%;">inputPullup</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "pin-read-digital-pullup.png" usemap="#blockmap" alt="pullup-Block"></img>
+            <figcaption id="caption">Für Erklärung auf einzelne Komponenten klicken.</figcaption>
+            </figure> 
+        </div>
+
+        <map name="blockmap">
+            <area shape="rect" coords="12, 13, 121, 50" href="#block_beschreibung" title="Auszuführende Operation"></area>
+            <area shape="rect" coords="120, 14, 317, 61" href="#pin_ansteuerung" title="Anzusteuernder Pin"></area>
+        </map>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Mit dem <code>inputPullup</code> Block kann das Verhalten eines digitalen Input Pins geändert werden. 
+            <br><br>
+            Wenn der <code>inputPullup</code> Block auf einen digitalen Pin angewendet wird, der im Programm als Eingang (Input) festgelegt wird, dann wird die 
+            Eingangsspannung nicht mehr gegen 0 Volt beziehungsweise dem GND Pin gemessen, sondern gegen den 5 Volt Pin. 
+            Wenn nun eine Spannung von 5 Volt am Pin anliegt, wird der <code>digitalRead</code> Block <code>LOW</code> zuück geben.
+            Wenn aber eine Spannung von 0 Volt zum GND Pin anliegt wird der <code>digitalRead</code> Block ein <code>HIGH</code> zurückgeben. 
+        </p>
+        <h2 class="unterueberschrift" id="pin_ansteuerung">Pin</h2>
+        <p>
+            Ein wählbarer Parameter dabei ist der <code>Pin</code>. Wie der Name schon vermuten lässt, kann man durch diesen Parameter den Pin wählen, auf den der 
+            <code>inputPullup</code> Befehl angewendet werden soll. Für diesen Pin ist dann die Verwendung als Eingang vorgesehen. 
+            <br><br>
+            Es können die digitalen Pins 0 bis 13 verwendet werden. 
+            Die Pinbezeichnung ist in aller Regel auf die Platine des Arduinos aufgedruckt. 
+        <p>        
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code wird der Block mit der Funktion <code>pinMode(Pin, INPUT_PULLUP)</code> realisiert. Wobei für <code>Pin</code> hier die entsprechende Pinnummer eingetragen wird.
+            Mit dem <code>pinMode</code> Befehl wird auch festgelegt, dass der Pin ein Eingang sein soll. 
+            <br><br>
+            Der <code>digitalRead</code> Block wird in der Regel im <code>setup</code> Teil eines Programms ausgeführt. 
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/pin-read-digital-pullup.png b/src/main/webapp/com/ardublock/reference/pin-read-digital-pullup.png
new file mode 100644
index 0000000000000000000000000000000000000000..b8694d4f56b6fa8e90f96c24fa36098fdbda55ea
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/pin-read-digital-pullup.png differ
diff --git a/src/main/webapp/com/ardublock/reference/pin-read-digital.html b/src/main/webapp/com/ardublock/reference/pin-read-digital.html
new file mode 100644
index 0000000000000000000000000000000000000000..265404edeaa7d8bd16b773c98286d3a6f8758999
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/pin-read-digital.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html>
+    <link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Input</p>
+        <h1 style="font-size: 220%;">digitalRead</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "pin-read-digital.png" usemap="#blockmap" alt="digitalWrite-Block"></img>
+            <figcaption id="caption">Für Erklärung auf einzelne Komponenten klicken.</figcaption>
+            </figure> 
+        </div>
+
+        <map name="blockmap">
+            <area shape="rect" coords="12, 13, 180, 60" href="#block_beschreibung" title="Auszuführende Operation"></area>
+            <area shape="rect" coords="186, 21, 317, 61" href="#pin_ansteuerung" title="Anzusteuernder Pin"></area>
+        </map>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Mit dem <code>digitalRead</code> Block können die Pins des Microcontrollers ausgelesen werden. 
+            <br><br>
+            Allerdings ist damit nur eine <b>digitale</b> Auslesung möglich. "Digital" bedeutet, dass der Wert des Eingangs nur zwei verschiedene Zustände einnehmen kann.
+            In der Digitaltechnik kennt man diese Zustände als <code>HIGH</code> und <code>LOW</code>, beziehungsweise logisch 1 oder logisch 0. Praktisch bedeutet dies, dass am als Eingang gewählten Pins entweder 
+            eine Spannung von über 3 Volt anliegt, dann wäre der Eingang <code>HIGH</code>. Wenn eine Spannung von weniger als 3 Volt gegenüber dem GND Pin anliegt, dann ist der Eingang <code>LOW</code>.
+        </p>
+        <h2 class="unterueberschrift" id="pin_ansteuerung">Pin</h2>
+        <p>
+            Ein wählbarer Parameter dabei ist der <code>Pin</code>. Wie der Name schon vermuten lässt, kann man durch diesen Parameter den Pin wählen, der ausgelesen weden soll. Die Nummer des jeweiligen
+            Pins kann auf dem Arduino selbst abgelesen werden wo die Benennung aufgedruckt ist. Es können die digitalen Pins 0 bis 13 oder die analogen Pins A0 bis A5 gewählt werden. 
+            Die Pinbezeichnung ist in aller Regel auf die Platine des Arduinos aufgedruckt.
+        <p>
+        <h2 class="unterueberschrift" id="beispiel">Beispiel</h2>
+        <p>
+            In diesem Beispiel soll eine LED in Abhängigkeit des Eingangssignals an Pin 2 angesteuert werden. 
+            Die LED ist über einen Vorwiderstand an den digitalen Pin 5 angeschlossen. 
+            Wenn am Pin 2 ein Signal anliegt, soll die LED Blinken. 
+            Wenn kein Signal anliegt, dann soll die LED durchgehend leuchten. 
+            Hier wird der <code>falls</code> und <code>sonst</code> Block verwendet, welche eine Bedingung überprüfen und anhand dieser dann einen Code entweder ausführt oder überspringt. 
+            Wenn ein Signal anliegt, dann ist der <code>digitalRead</code> Block <code>TRUE</code> und der <code>falls</code> Block führt die Blink Sequenz aus. 
+            Wenn kein Signal anliegt dann ist der <code>digitalRead</code> Block <code>FALSE</code> und der <code>sonst</code> Block setzt den Pin 5 auf <code>HIGH</code>. 
+            <br><br>
+            In ArduBlock könnte diese Funktion dann folgendermaßen aussehen:
+            <br><br>
+            <img src="pin-read-digital-beispiel.png" alt="Beispiel zum digitalRead Block">
+        <p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code wird der Block mit der Funktion <code>digitalRead(Pin)</code> realisiert. Wobei für <code>Pin</code> hier die entsprechende Pinnummer eingetragen wird.
+            <br><br>
+            Im Code würde das Beispiel folgendermaßen aussehen: 
+            <br><br>
+            <code>
+                if (digitalRead(2)) { <br>
+                &emsp;&emsp;digitalWrite( 5 , HIGH ); <br>
+                &emsp;&emsp;delay( 1000 ); <br>
+                &emsp;&emsp;digitalWrite( 5 , LOW ); <br>
+                &emsp;&emsp;delay( 1000 ); <br>
+              } <br>
+              else { <br>
+                &emsp;&emsp;digitalWrite( 5 , HIGH ); <br>
+              }
+            </code>
+            
+        <p>
+
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/pin-read-digital.png b/src/main/webapp/com/ardublock/reference/pin-read-digital.png
new file mode 100644
index 0000000000000000000000000000000000000000..a2e21bfc9e2b63067724bcde507fc9ccb45a2c8d
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/pin-read-digital.png differ
diff --git a/src/main/webapp/com/ardublock/reference/pin-write-analog.html b/src/main/webapp/com/ardublock/reference/pin-write-analog.html
new file mode 100644
index 0000000000000000000000000000000000000000..4109fd39b6570cfac5c2e97c801ab3f175e32c9b
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/pin-write-analog.html
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html>
+    <link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Output</p>
+        <h1 style="font-size: 220%;">analogWrite</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "pin-write-analog.png" usemap="#blockmap" alt="analoglWrite-Block"></img>
+            <figcaption id="caption">Für Erklärung auf einzelne Komponenten klicken.</figcaption>
+            </figure> 
+        </div>
+
+        <map name="blockmap">
+            <area shape="rect" coords="29, 34, 278, 185" href="#block_beschreibung" title="Auszuführende Operation"></area>
+            <area shape="rect" coords="295, 36, 555, 108" href="#pin_ansteuerung" title="Anzusteuernder Pin"></area>
+            <area shape="rect" coords="293, 121, 532, 184" href="#wert_pin" title="Zu setzender Wert"></area>
+        </map>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Mit dem <code>analogWrite</code> Block können spezielle Pins des Microcontrollers angesteuert werden, um ein bestimmtes Signal auszugeben. 
+            <br><br>
+            Im Gegensatz zum <code>digitalWrite</code> Block können bei dem <code>analogWrite</code> Baustein mehr als nur zwei Zustände für den jeweiligen Ausgang gesetzt werden. Wenn man sich eine angeschlossene LED am Ausgang
+            vorstellt, dann ist es nicht nur möglich diese auszuschalten oder auf voller Helligkeit leuchten zu lassen, sondern auch beispielsweise nur auf der halben Helligkeit zum leuchten zu bringen. 
+            Es lässt sich also vermuten, dass am Ausgang eine Spannung zwischen 0 und 5 Volt angelegt wird. Für die halbe Helligkeit der LED bei 5 Volt müssten dann 2,5 Volt anliegen.
+            Für den Anfang gehen wir einmal davon aus, dass am Pin dann konstant diese 2,5 Volt anliegen. Bei genauem Hinsehen ist diese Annahme doch falsch und wird im Abschnitt <a href="#PWM_erklärung">Pulsweitenmodulation (PWM)</a> erklärt.
+            <br><br>
+            Wie der <code>digitalWrite</code> Block hat auch der <code>analogWrite</code> Block zwei einstellbare Parameter <i>~Pin</i> und <i>Wert</i>. Hier unterscheiden sich die beiden Blöcke jedoch, da beim 
+            <code>analogWrite</code> Block andere 
+            Parameter eingetragen werden müssen.
+            <br><br>
+            Wird der Block also abgearbeitet und ein Pin des Arduinos auf <code>HIGH</code> gesetzt, dann liegt diesem Pin eine Spannung von 5 Volt an. Wird dieser Pin dann wieder auf <code>LOW</code> gesetzt, dann
+            liegt wieder eine Spannung von 0 Volt gegenüber dem GND-Pin an.
+        </p>
+        <h2 class="unterueberschrift" id="pin_ansteuerung">~Pin</h2>
+        <p>
+            Ein einstellbarer Parameter ist der <code>~Pin</code> Parameter. Dieser bestimmt welcher Pin mit dem eingestellten Signal als Ausgang angesteuert werden soll.
+            Hier können nur die auf dem Arduino-Board als "digital" gekennzeichnete Pins verwendet werden, die vor ihrer Nummerierung dieses Zeichen: <i>~</i> besitzen.
+            Beim normalen Arduino Uno sind das die digitalen Pins mit den Nummern 1, 3, 5, 6, 9, 10 und 11. Die Bezeichnung der Pins ist auf der Platine aufgedruckt und kann dort abgelesen werden.
+            <br><br>
+            Will man die Nummer des anzuszeuernden Pins ändern, dann kann man den Bearbeitungsmodus mit einem linken Mausklick auf die aktuelle Zahl aktivieren und diese ändern.
+            Der <code>Wert</code> Parameter kann auf die gleiche Weise bearbeitet werden.
+        </p>
+        <h2 class="unterueberschrift" id="wert_pin"> Wert</h2>
+        <p>
+            Mit dem <code>Wert</code> Parameter kann die Spannung eingestellt werden, welche an dem ausgewählten Pin anliegen soll.
+            Zulässige Eingaben für diesen Parameter sind ganze Zahlen zwischen 0 und 255. Wobei ein Wert von 0 einer Spannung von 0 Volt entspricht und ein Wert von 255 einer Spannung von 5 Volt.
+            Dazwischen steigt der Wert für die Spannung am Pin linear an. Die Spannung, welche am Pin anliegen soll, lässt sich folgendermaßen berechnen:
+
+            <div class="fraction">
+                <span class="top"><code>Wert</code> &#x2022 5 Volt</span>
+                <span class="bottom">255</span>
+            </div>
+
+            <h3>Beispiel</h3>
+            <p>
+                In diesem Beispiel soll die Spannung für einen Pin berechnet werden, wenn der Wert auf 168 gestellt wurde.
+            </p>
+            <div class="fraction">
+                <span class="top">168 &#x2022 5 Volt</span>
+                <span class="bottom">255</span>
+            </div>
+            <p>
+                &#8776 3,3 Volt</p>
+        </p>
+        
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code für den Arduino wird der Baustein mit der Funktion <code>analogWrite(Pin, Wert)</code> umgesetzt, wobei hier die Parameter <code>Pin</code>, und <code>Wert</code> wie oben beschrieben
+            gewählt werden.
+        <h2 class="unterueberschrift" id="PWM_erklärung">Pulsweitenmodulation (PWM)</h2>
+        <p>
+            Wie oben bereits erwähnt verhält, sich der Ausgang bei genauerer Betrachtung allerdings etwas komplizierter, denn der Pin ist auch bei Ausführung des <code>analogWrite</code> Blocks nur digital ansteuerbar.
+            Das heißt der Ausgang kann entweder logisch <code>HIGH</code> sein und 5 Volt ausgeben oder logisch <code>LOW</code> sein und 0 Volt ausgeben.
+            Um nun eine Spannung zwischen 0 und 5 Volt zu erhalten wird ein Trick angewendet. 
+            <br><br>
+            Der Ausgang wird sehr schnell an- und ausgeschalten. Die Zeitspanne während der Ausgang einmal eine Zeit lang 
+            eingeschalten und einmal eine Zeit lang ausgeschalten ist nennt man eine Periode. Dieses Verfahren nennt man Pulsweitenmodulation, was auch als PWM abgekürzt wird.
+            Ein PWM Pin an einem normalen Arduino Uno hat eine Taktfrequenz von 490 Hertz. Das heißt pro <b>Sekunde</b> durchläuft der Pin 490 Perioden. 
+            In einer Sekunde wird der Ausgang 490 mal ein- und ausgeschalten.
+            <br><br>
+            Nun kann über diese Methode die Ausgangsspannung "künstlich" verringert werden. Je länger die "Einschalt-Zeit" nun im Verhältnis zur "Ausschalt-Zeit" ist, desto näher ist die mittlere (durchschnittliche)
+            Ausgangsspannung an den maximal möglichen 5 Volt.
+            Das hieße dann, dass wenn die beiden Zeitspannen gleich groß sind, die Ausgangsspannung im Schnitt halbiert wird.
+            <br><br>
+            Eine genauere Erklärung dazu findet sich im Aufgabenblatt 3 <i>Analoge Signale und Variablen</i> im Abschnitt 3.5.
+        </p>
+        
+
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/pin-write-analog.png b/src/main/webapp/com/ardublock/reference/pin-write-analog.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e14b5fcc936a43d7be5cdc4b0f863ad8fd1e0c1
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/pin-write-analog.png differ
diff --git a/src/main/webapp/com/ardublock/reference/pin-write-digital-beispiel.png b/src/main/webapp/com/ardublock/reference/pin-write-digital-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..4b0e54d57cb4712067f5fa4691707d038aff4d76
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/pin-write-digital-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/pin-write-digital.html b/src/main/webapp/com/ardublock/reference/pin-write-digital.html
new file mode 100644
index 0000000000000000000000000000000000000000..cfbc17ec99732489d63ff083a85932e6e8dff964
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/pin-write-digital.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+    <link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Output</p>
+        <h1 style="font-size: 220%;">digitalWrite</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "pin-write-digital.png" usemap="#blockmap" alt="digitalWrite-Block"></img>
+            <figcaption id="caption">Für Erklärung auf einzelne Komponenten klicken.</figcaption>
+            </figure> 
+        </div>
+
+        <map name="blockmap">
+            <area shape="rect" coords="29, 34, 278, 185" href="#block_beschreibung" title="Auszuführende Operation"></area>
+            <area shape="rect" coords="295, 36, 555, 108" href="#pin_ansteuerung" title="Anzusteuernder Pin"></area>
+            <area shape="rect" coords="293, 121, 532, 184" href="#wert_pin" title="Zu setzender Wert"></area>
+        </map>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Mit dem <code>digitalWrite</code> Block können die Pins des Microcontrollers angesteuert werden. 
+            <br><br>
+            Allerdings ist damit nur eine <b>digitale</b> Ansteuerung möglich. "Digital" bedeutet, dass der Wert des Ausgangs nur zwei verschiedene Zustände einnehmen kann.
+            In der Digitaltechnik nennt man diese Zustände <code>HIGH</code> und <code>LOW</code> beziehungsweise logisch 1 oder logisch 0. Praktisch bedeutet dies, dass am als Ausgang gewählten Pin entweder eine Spannung
+            von 5 Volt oder von 0 Volt anliegt. Stellt man sich vor am Ausgang wäre eine Lampe angeschlossen, dann könnte diese entweder mit voller Leuchtstärke leuchten oder garnicht leuchten. Es
+            gibt keine Einstellung dazwischen.
+            <br><br>
+            Wird der Block also abgearbeitet und ein Pin des Arduinos auf <code>HIGH</code> gesetzt, dann liegt diesem Pin eine Spannung von 5 Volt an. Wird dieser Pin dann wieder auf <code>LOW</code> gesetzt,
+            liegt wieder eine Spannung von 0 Volt gegenüber dem GND-Pin an.
+        </p>
+        <h2 class="unterueberschrift" id="pin_ansteuerung">Pin</h2>
+        <p>
+            Ein wählbarer Parameter dabei ist der <code>Pin</code>. Wie der Name schon vermuten lässt, kann man durch diesen Parameter den Pin wählen, dessen Ausgang gesetzt werden soll. Die Nummer des jeweiligen
+            Pins kann auf dem Arduino selbst abgelesen werden wo die Benennung aufgedruckt ist. Es muss beachtet werden, dass nur digitale Pins ausgewählt werden können. Welche Pins digital sind ist allerdings auch in aller Regel
+            auf die Platine des Arduinos aufgedruckt. Bei einem Arduino Uno kann für diesen Parameter also eine ganze Zahl zwischen 0 und 13 eingegeben werden.
+            <br><br>
+            Will man die Nummer des anzuszeuernden Pins ändern, dann kann man den Bearbeitungsmodus mit einem linken Mausklick auf die aktuelle Zahl aktivieren und diese ändern.
+        </p>
+        <h2 class="unterueberschrift" id="wert_pin"> Wert</h2>
+        <p>
+            Mit dem Parameter <i>Wert</i> kann ausgewählt werden, ob der eingestellte digitale Pin <code>HIGH</code> oder <code>LOW</code> gesetzt werden soll.
+            Wenn ein Pin auf <code>LOW</code> gesetzt wird, der schon 0 Volt ausgibt dann verändert sich nichts. Dasselbe gilt für einen Pin der 5 Volt ausgibt und auf <code>HIGH</code> gesetzt wird.
+            <br><br>
+            Der Wert kann von <code>HIGH</code> zu <code>LOW</code> geändert werden, indem man mit der Maus über dem Parameter schwebt, den man ändern möchte.
+            Dort erscheint dann ein kleiner Pfeil nach unten, wie im folgenden Bild zu sehen.
+            <br><br>
+            Klickt man mit der linken Maustaste auf diesen Pfeil, öffnet sich ein ausklappbares Menü, in welchem dann der Wert auf <code>HIGH</code> bzw. <code>LOW</code> geändert 
+            werden kann.
+        </p>
+        <img style="padding-left: 20px;" src="pin-write-digital-beispiel.png" alt="erklärung_high_low">
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code für den Arduino wird der Baustein mit der Funktion <code>digitalWrite(Pin, Wert)</code> umgesetzt, wobei hier die Parameter <code>Pin</code>, und <code>Wert</code> wie oben beschrieben
+            gewählt werden.
+        </p>
+
+    </div>
+    
+</article>
+
+</body>
+</html>
diff --git a/src/main/webapp/com/ardublock/reference/pin-write-digital.png b/src/main/webapp/com/ardublock/reference/pin-write-digital.png
new file mode 100644
index 0000000000000000000000000000000000000000..73e84ac6ae659dd2bb2aaf712a33ab430de190c7
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/pin-write-digital.png differ
diff --git a/src/main/webapp/com/ardublock/reference/program_comment-beispiel.png b/src/main/webapp/com/ardublock/reference/program_comment-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..aec17576574888f27dab16f5df18218d256fe8b7
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/program_comment-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/random-beispiel.png b/src/main/webapp/com/ardublock/reference/random-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..12bccc241546c5f7159feecddac2304fefcafff1
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/random-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/random.html b/src/main/webapp/com/ardublock/reference/random.html
new file mode 100644
index 0000000000000000000000000000000000000000..adbf2c03f4153f3650f6acd14c5e26e3b0680d80
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/random.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+
+<link rel="stylesheet" href="_seitenformatierung.css">
+
+<body style="margin: 0px;">
+
+<div style="border: #284a66; border-style: solid; border-width: 5px;">
+    <nav>
+    <li id="beschreibung">Block-Referenz</li>
+    <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+    <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+    </nav>
+</div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Math. Operatoren / Zufallszahl</p>
+        <h1 style="font-size: 220%;">Zufallszahl (nur obere Grenze)</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "random.png" alt="Zufallszahl-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>Zufallszahl</code> Block ist ein nützlicher Block, mit dem man sich eine ganze Zufallszahl zwischen 0 und dem unter <code>max</code> eingesetzten Wert generieren lassen kann. 
+            Der <code>Zufallszahl</code> Block selbst kann dann als analoge Variable in anderen Blöcken verwendet werden. 
+        </p>
+        <h2 class="unterueberschrift" id="block_beschreibung">max</h2>
+        <p>
+           Der Parameter <code>max</code> ist die obere Grenze für den Bereich, in dem die Zufallszahl generiert werden soll. 
+           Dieser Wert ist allerdings exklusive. 
+           Das heißt die Zufallszahl kann den eingegebenen Wert selbst nicht erreichen, sondern ist immer kleiner. 
+           Die untere Grenze, in diesem Fall 0, ist allerdings inklusive und die Zufallszahl kann diesen Wert annehmen. 
+        </p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code kann der <code>Zufallszahl</code> Block mit dem Befehl (<code>random(max)</code>) realisiert werden. 
+            Wobei zwischen die Klammern hier der maximale Wert eingefügt wird.
+            <br>
+            <b>Beispiel:</b> Es soll eine Zufallszahl zwischen 0 und einschließlich 100 auf dem seriellen Monitor ausgegeben werden. 
+            Da der oberste Wert 100 sein soll wird in den Block ein <code>max</code> von 101 verwendet. 
+            <br><br>
+            In ArduBlock: 
+            <br><br>
+            <img src="random-beispiel.png" alt="beispiel-zufallszahl-eine-grenze">
+            <br><br>
+            Im Code: 
+            <br><br>
+            <code> 
+                Serial.print("Zufallszahl zwischen 0 und 100: "); <br>
+                Serial.print(random( 101 ) ); <br>
+            </code>
+            
+
+        <p>
+
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/random.png b/src/main/webapp/com/ardublock/reference/random.png
new file mode 100644
index 0000000000000000000000000000000000000000..d46e2164ceade302986056208887869604facff2
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/random.png differ
diff --git a/src/main/webapp/com/ardublock/reference/random_range-beispiel.png b/src/main/webapp/com/ardublock/reference/random_range-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..0150f5db0533ed438c1ce2ddd1d99e125beda6e8
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/random_range-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/random_range.html b/src/main/webapp/com/ardublock/reference/random_range.html
new file mode 100644
index 0000000000000000000000000000000000000000..a1fe8e1650adf82afe2d93d030fec0fc6da0cbed
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/random_range.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+
+<link rel="stylesheet" href="_seitenformatierung.css">
+
+<body style="margin: 0px;">
+
+<div style="border: #284a66; border-style: solid; border-width: 5px;">
+    <nav>
+    <li id="beschreibung">Block-Referenz</li>
+    <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+    <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+    </nav>
+</div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Math. Operatoren / Zufallszahl</p>
+        <h1 style="font-size: 220%;">Zufallszahl (obere und untere Grenze)</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "random_range.png" alt="Zufallszahl-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>Zufallszahl</code> Block ist ein nützlicher Block, mit dem man sich eine ganze Zufallszahl zwischen zwei selbst bestimmten Werten generieren lassen kann. 
+            Der <code>Zufallszahl</code> Block selbst kann dann als analoge Variable in anderen Blöcken verwendet werden. 
+        </p>
+        <h2 class="unterueberschrift" id="block_beschreibung">min/max</h2>
+        <p>
+           Der Parameter <code>max</code> ist die obere Grenze für den Bereich, in dem die Zufallszahl generiert werden soll. 
+           Dieser Wert ist allerdings exklusive. 
+           Das heißt die Zufallszahl kann den eingegebenen <code>max</code> Wert selbst nicht erreichen, sondern ist immer kleiner. 
+           Der Parameter <code>min</code> ist die untere Grenze für den Bereich, in dem die Zufallszahl generiert werden soll. 
+           Dieser Wert ist inklusive. 
+           Das heißt die Zufallszahl kann den eingegebenen <code>min</code> Wert selbst auch annehmen. 
+        </p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code kann der <code>Zufallszahl</code> Block mit dem Befehl (<code>random(min, max)</code>) realisiert werden. 
+            Wobei zwischen die Klammern hier der minimale und der maximale Wert eingefügt wird.
+            <br>
+            <b>Beispiel:</b> Es soll eine Zufallszahl zwischen 10 und 20 auf dem seriellen Monitor ausgegeben werden. 
+            Da der oberste Wert 20 sein soll wird in den Block ein <code>max</code> von 21 verwendet. 
+            Die untere Grenze soll 10 sein, also wird dieser Wert auch im Block eingesetzt. 
+            <br><br>
+            In ArduBlock: 
+            <br><br>
+            <img src="random_range-beispiel.png" alt="beispiel-zufallszahl-zwei-grenzen">
+            <br><br>
+            Im Code: 
+            <br><br>
+            <code> 
+                Serial.print("Zufallszahl zwischen 10 und 20: "); <br>
+                Serial.print(random( 10 , 21 ) ); <br>
+            </code>
+            
+
+        <p>
+
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/random_range.png b/src/main/webapp/com/ardublock/reference/random_range.png
new file mode 100644
index 0000000000000000000000000000000000000000..87fffdffa6ba9f0f4ddcaa82238aa9aec4c198fd
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/random_range.png differ
diff --git a/src/main/webapp/com/ardublock/reference/repeat-beispiel-2.png b/src/main/webapp/com/ardublock/reference/repeat-beispiel-2.png
new file mode 100644
index 0000000000000000000000000000000000000000..45f5b28a25d5bd30a18462bde3b1923598267f8b
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/repeat-beispiel-2.png differ
diff --git a/src/main/webapp/com/ardublock/reference/repeat-beispiel.png b/src/main/webapp/com/ardublock/reference/repeat-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..e353687044b007211f46b6f35f81a029cd296159
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/repeat-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/repeat.html b/src/main/webapp/com/ardublock/reference/repeat.html
new file mode 100644
index 0000000000000000000000000000000000000000..a2e886879de1a8fed3e40858b907dd897e88d0c5
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/repeat.html
@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+<html>
+    <link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Steuerung / Schleifen</p>
+        <h1 style="font-size: 220%;">wiederhole und zaehle</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "repeat.png" alt="wiederhole" usemap="#blockmap" ></img>
+            <figcaption id="caption">Für Erklärung auf einzelne Komponenten klicken.</figcaption>
+            </figure> 
+        </div>
+        <map name="blockmap">
+            <area shape="rect" coords="20, 20, 256, 150" href="#block_beschreibung" title="Auszuführende Operation"></area>
+            <area shape="rect" coords="265, 25, 533, 57" href="#variable" title="Hochzählende Variable"></area>
+            <area shape="rect" coords="303, 59, 410, 92" href="#mal" title="Anzahl Wiederholungen"></area>
+            <area shape="rect" coords="263, 95, 37, 148" href="#befehle" title="Auszuführende Befehle"></area>
+        </map>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>wiederhole und zaehle</code> Block zählt zu den Schleifen. Anders jedoch als die <code>wiederhole fortlaufend</code> Schleife besitzt die <code>wiederhole und zaehle</code> Schleife eine Abbruchbedingung. 
+            Diese wird dem Block als <a href="#mal"><code>mal</code></a> Parameter übergeben. Der <code>wiederhole und zaehle</code>   Block ist dem <code>wiederhole</code> Block sehr ähnlich.
+            <br>
+            Der <code>mal</code> Parameter gibt die Anzahl an, wie of die Schleife durchlaufen werden soll und ist damit auch deren Abbruchbedingung.
+            <br>
+            Der Code, welcher in dem <code>Befehle</code> Platz dem Block übergeben wird, wird entsprechend oft durchlaufen.
+            <br>
+            Im <code>Variable</code> Parameter wird eine analoge Variable übergeben, diese wird pro Schleifendurchlauf um 1 erhöht.
+
+        </p>
+        <h2 class="unterueberschrift" id="variable">Variable</h2>
+        <p>
+            In den <code>Variable</code> Parameter muss eine <b>analoge</b> Variable eingesetzt werden. Diese wird auf 0 gesetzt sobald der <code>wiederhole und zähle</code> Block erreicht wird. 
+            In den angegebenen Befehlen kann diese Variable dann genutzt werden um zum Beispiel einen Zähler zu bauen.
+        </p>
+        <h2 class="unterueberschrift" id="mal">mal</h2>
+        <p>
+            In den <code>mal</code> Parameter kann eine <b>positive ganze</b> Zahl oder Variable eingesetzt werden. Diese gibt an wie oft die unter <code>Befehle</code> eingetragenen Blöcke durchgelaufen werden 
+            sollen.
+        </p>
+        <h2 class="unterueberschrift" id="befehle">Befehle</h2>
+        <p>
+            In den <code>Befehle</code> Abschnitt kann eine Folge von Anweisungen eingefügt werden. 
+            Dies kann zum Beispiel ein <code>digitalWrite</code> Block sein, der einen Pin <code>HIGH</code> oder <code>LOW</code> schält oder eine Variable, die gesetzt werden soll 
+            oder sogar weitere <code>wiederhole und zähle</code> Blöcke. Jedoch empfiehlt es sich nicht mehrerer dieser Blöcke zu verschachteln, da die Rechenzeit sich erheblich verlängern kann.
+        </p>
+        <h2 class="unterueberschrift">Beispiel</h2>
+        <p>
+            Als Beispiel wollen wir nun einen Zähler basteln, der von 0 bis 10 hochzählt
+            Die Zählvariable behält dabei ihren Standartnamen <code>loc_Zaehlwert.</code>
+            <br><br>
+            In dem Parameter <code>mal</code> wird 11 eingetragen, da der Sprung von 0 auf 1 mit berücksichtigt werden muss und die 10 noch ausgegeben werden soll. 
+            Bei jedem Durchlauf wird erst der String "Zähler: " und dann der aktuelle Wert der <code>loc_Zaehlwert</code> Variable in den 
+            seriellen Monitor geschrieben. Der <code>Serial print</code> Block ist so eingestellt, dass nach jeder Ausführung eine neue Zeile im seriellen 
+            Monitor begonnen wird. Jeder Werte wird also in eine neue Zeile geschrieben. Die Variable <code>loc_Zaehlwert</code> wird automatisch nach jedem Durchlauf vom Block erhöht.
+            <br><br>
+            In ArduBlock könnte das so aussehen:
+            <br><br>
+            <img src="repeat-beispiel.png" alt="beispiel-zum-wiederhole-und-zähle-block">
+             <br> <br>
+            Die Ausgabe im seriellen Monitor sieht dann wie folgt aus:
+            <br>
+            <code>
+                Wert: 0 <br>
+                Wert: 1 <br>
+                Wert: 2 <br>
+                Wert: 3 <br>
+                Wert: 4 <br>
+                Wert: 5 <br>
+                Wert: 6 <br>
+                Wert: 7 <br>
+                Wert: 8 <br>
+                Wert: 9 <br>
+                Wert: 10 <br>
+            </code>
+            <br><br>
+            Würde man jetzt allerdings zum Beispiel einen Zähler wollen, der von 10 bis 20 zählt, dann kann man bei der Ausgabe immer den Variablenwert + 10 rechnen.
+            <br>
+            In ArduBlock könnte das so aussehen:
+            <br><br>
+            <img src="repeat-beispiel-2.png" alt="zweites-beispiel-zum-wiederhole-und-zähle-block">        
+            <br> <br>
+            Die Ausgabe im seriellen Monitor sieht dann wie folgt aus:
+            <br>
+            <code>
+                Wert: 10 <br>
+                Wert: 11 <br>
+                Wert: 12 <br>
+                Wert: 13 <br>
+                Wert: 14 <br>
+                Wert: 15 <br>
+                Wert: 16 <br>
+                Wert: 17 <br>
+                Wert: 18 <br>
+                Wert: 19 <br>
+                Wert: 20 <br>
+            </code>
+        </p>
+        
+        <h2 class="unterueberschrift">Code</h2>
+        <p>
+            Der Abschnitt zum Code ist etwas komplizierter als der Block an sich und muss für dessen Anwendung nicht verstanden worden sein.
+            <br><br>
+            Im Code für den Arduino wird der Baustein mit <code>for(variable und mal){Befehle}</code> umgesetzt.
+            <br>
+            Wie der <code>for</code> Befehl funktioniert ist in der Block-Referenz zum <code>wiederhole</code> Block ausführlicher erklärt.
+            <br><br>
+            Im Code würde das Beispiel 1 dann folgendermaßen aussehen:
+            <br><br>
+            <code>
+                  for(int loc_Zaehlwert = 0; loc_Zaehlwert &lt; 11; loc_Zaehlwert++) { <br>
+                    &emsp;&emsp;Serial.print("Wert: "); <br>
+                    &emsp;&emsp;Serial.print(loc_Zaehlwert ); <br>
+                    &emsp;&emsp;Serial.println(); <br>
+                  }
+            </code>
+            <br><br>
+            Das Beispiel 2 könnte dann so aussehen:
+            <br><br>
+            <code>
+                for(int loc_Zaehlwert = 0; loc_Zaehlwert &lt; 11; loc_Zaehlwert++) { <br>
+                  &emsp;&emsp;Serial.print("Wert: "); <br>
+                  &emsp;&emsp;Serial.print(loc_Zaehlwert +10); <br>
+                  &emsp;&emsp;Serial.println(); <br>
+                } <br>
+          </code> 
+        </p>
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/repeat.png b/src/main/webapp/com/ardublock/reference/repeat.png
new file mode 100644
index 0000000000000000000000000000000000000000..f9ac9caedcdd47c5e7f0714be652dab6dac0d33a
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/repeat.png differ
diff --git a/src/main/webapp/com/ardublock/reference/repeat_times-beispiel.png b/src/main/webapp/com/ardublock/reference/repeat_times-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..c30ea8b2f1c16c62dd7c39e6a056575ac244aa55
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/repeat_times-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/repeat_times.html b/src/main/webapp/com/ardublock/reference/repeat_times.html
new file mode 100644
index 0000000000000000000000000000000000000000..fd55365e98cc7b06f8180a840449afba6c0d5066
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/repeat_times.html
@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html>
+    <link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Steuerung / Schleifen</p>
+        <h1 style="font-size: 220%;">wiederhole</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "repeat_times.png" alt="wiederhole" usemap="#blockmap"></img>
+            <figcaption id="caption">Für Erklärung auf einzelne Komponenten klicken.</figcaption>
+            </figure> 
+        </div>
+        <map name="blockmap">
+            <area shape="rect" coords="20, 20, 157, 131" href="#block_beschreibung" title="Auszuführende Operation"></area>
+            <area shape="rect" coords="212, 22, 324, 67" href="#mal" title="Anzahl Wiederholungen"></area>
+        </map>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>wiederhole</code> Block zählt zu den Schleifen. Anders jedoch als die <code>wiederhole fortlaufend</code> Schleife besitzt die <code>wiederhole</code> Schleife eine Abbruchbedingung. 
+            Diese wird dem Block als <a href="#mal"><code>mal</code></a> Parameter übergeben.
+            <br>
+            Der <code>mal</code> Parameter gibt an, wie of die Schleife durchlaufen werden soll und ist damit auch deren Abbruchbedingung.
+            Der Code, welcher in dem <code>Befehle</code> Teil dem Block übergeben wird, wird entsprechend oft durchlaufen.
+        </p>
+        <h2 class="unterueberschrift" id="mal">mal</h2>
+        <p>
+            In den <code>mal</code> Parameter kann eine <b>positive ganze</b> Zahl oder Variable eingesetzt werden.                       
+        </p>
+        <h2 class="unterueberschrift">Befehle</h2>
+        <p>
+            In den <code>Befehle</code> Abschnitt kann eine Folge von weiteren Blöcken zu Anweisung von Befehlen eingefügt werden. 
+            Dies kann zum Beispiel ein <code>digitalWrite</code> Block sein, der einen Pin auf <code>HIGH</code> oder <code>LOW</code> schält oder eine Variable, die gesetzt werden soll 
+            , oder sogar weitere <code>wiederhole</code> Blöcke. Jedoch empfiehlt es sich nicht mehrerer dieser Blöcke zu verschachteln, da die Rechenzeit sich erheblich verlängern kann.
+        </p>
+        <h2 class="unterueberschrift" id="beispiel">Beispiel</h2>
+        <p>
+            Als Beispiel soll eine analoge Variable von 0 auf 50 hochgezählt und im seriellen Monitor ausgegeben werden. Vor dem <code>wiederhole</code> Block wird die Variable 
+            als <code>zaehler</code> initalisiert.
+            <br>
+            <b style="color: red;">Achtung:</b> Hier wird die Variable nicht <code>zähler</code> genannt, da Variablen keine Umlaute (ä, ö oder ü) enthalten sollten.
+            <br><br>
+            Für den Parameter <code>mal</code> wird 50 eingetragen. Bei jedem Durchlauf wird erst das Wort "Zähler: " und dann der aktuelle Wert der <code>zaehler</code> Variable in den 
+            seriellen Monitor geschrieben. Anschließend wird der <code>zaehler</code> um 1 erhöht. Der <code>Serial print</code> Block ist so eingestellt, dass nach jeder Ausführung eine neue Zeile im seriellen 
+            Monitor begonnen wird. Jeder Wert wird in eine neue Zeile geschrieben.
+            <br><br>
+            In ArduBlock könnte das so aussehen:
+            <br><br>
+            <img src="repeat_times-beispiel.png" alt="beispiel-zum-wiederhole-block">
+            
+        </p>
+        
+        <h2 class="unterueberschrift">Code</h2>
+        <p>
+            Der folgende Abschnitt ist etwas komplizierter als der Block an sich und muss für dessen Anwendung nicht verstanden worden sein.
+            <br><br>
+            Im Code für den Arduino wird der Baustein mit <code>for(mal){Befehle}</code> umgesetzt.
+            <br>
+            Für den <code>mal</code> Parameter werden im Code drei Parameter in die <code>for</code> Schleife gegeben. Die Initialisierung (<code>initialization</code>), 
+            die Bedingung (<code>condition</code>) und die Information wie hochgezählt werden soll (<code>increment</code>). Die Parameter werden mit einem Semikolon <code>;</code> getrennt.
+            Hier wird zunächst eine neue Variable initalisiert (erschaffen). Diese wird Laufvariable genannt und bekommt im Programm häufig den Namen <code>i</code>, <code>j</code>, <code>k</code> oder <code>temp</code>. 
+            Die Varieble existiert nur solange die <code>for</code> Schleife ausgeführt wird.
+            <br><br>
+            Dann benötigt man noch eine Abbruchbedingung. Wenn die Laufvariable also nur bis 100 hochgezählt werden soll, wäre die Bedingung beispielsweise <code>i &lt;= 100</code>. 
+            Solange diese Bedingung erfüllt ist wird die Variable weiter bei jedem Durchlauf erhöht und der entsprechende Code ausgeführt.
+            Wenn die Bedingung nicht mehr erfüllt ist, wird die Schleife vor dem nächsten Durchlauf sofort verlassen.
+            <br><br>
+            Zuletzt muss noch angegeben werden, wie sich die Laufvariable bei jedem Durchgang ändern soll. Sie kann um jede beliebige Zahl erhöht, verringert, durch diese geteilt oder mit dieser multipliziert werden.
+            Zur Vereinfachung wird hier allerdings nur betrachtet, dass die Laufvariable sich bei jedem Durchgang nur um 1 erhöhen soll. Wenn die Laufvariable als <code>i</code> initialisiert wurde, dann 
+            wäre der entsprechende Befehl der Variablenname mit zwei + dahinter. 
+            Also <code>i++</code> ist die Operation, die die Variable <code>i</code> um 1 hochzählt.
+            <br>
+            Man kann mit <code>i--</code> die Variable auch um 1 verringern.
+            <br><br>
+            <b>Beispiel:</b> Eine Schleife soll von 1 bis 100 immer um 1 hochzählen. Dann würde der Funktionskopf folgendermaßen aussehen: 
+            <br>
+            <code>for( int i = 1; i &lt;=100; i++ ){Befehle}</code>.
+            <br><br>
+            Wenn wir einen Countdown bauen wollen, dann können wir auch zum Beispiel eine Variable von 10 auf 0 im Sekundentakt herunterzählen lassen und den aktuellen Wert im seriellen Monitor ausgeben lassen:
+            <br>
+            <code>
+                <br>
+                for(int i = 10; i &gt;= 0; i--){ <br>
+                    &emsp;&emsp;delay(1000);<br>
+                    &emsp;&emsp;Serial.print(i); <br>
+                    &emsp;&emsp;Serial.print(); <br>
+                } <br>
+            </code>
+            <br><br>
+            Im Code würde das <a href="#beispiel">Beispiel von oben</a> dann folgendermaßen aussehen:
+            <br><br>
+            <code>
+                for (int i = 0; i &lt; 50; i++) { <br>
+                    &emsp;&emsp;Serial.print("Zähler: "); <br>
+                    &emsp;&emsp;Serial.print(zaehler); <br>
+                    &emsp;&emsp;Serial.println(); <br>
+                    &emsp;&emsp;zaehler = (zaehler + 1); <br>
+                  } <br>
+            </code> <br>
+        </p>
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/repeat_times.png b/src/main/webapp/com/ardublock/reference/repeat_times.png
new file mode 100644
index 0000000000000000000000000000000000000000..5ff901d38ab675c1d4dd003b1da01cb0d39a08dc
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/repeat_times.png differ
diff --git a/src/main/webapp/com/ardublock/reference/serial_print-beispiel.png b/src/main/webapp/com/ardublock/reference/serial_print-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..e0549289d7408f23e2101c4e2a11bfd78d7490f7
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/serial_print-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/serial_print.html b/src/main/webapp/com/ardublock/reference/serial_print.html
new file mode 100644
index 0000000000000000000000000000000000000000..6c03bed24c5159428adbc594ee16c4604d15826a
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/serial_print.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+
+<link rel="stylesheet" href="_seitenformatierung.css">
+
+<body style="margin: 0px;">
+
+<div style="border: #284a66; border-style: solid; border-width: 5px;">
+    <nav>
+    <li id="beschreibung">Block-Referenz</li>
+    <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+    <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+    </nav>
+</div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Kommunikation / Seriell</p>
+        <h1 style="font-size: 220%;">Serial print</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "serial_print.png" usemap="#blockmap" alt="serial-print-block"></img>
+            <figcaption id="caption">Für Erklärung auf einzelne Komponenten klicken.</figcaption>
+            </figure> 
+        </div>
+        <map name="blockmap">
+            <area shape="rect" coords="20, 20, 170, 106" href="#block_beschreibung" title="Block"></area>
+            <area shape="rect" coords="208, 24, 438, 69" href="#text" title="Text der ausgegeben werden soll"></area>
+            <area shape="rect" coords="175, 66, 392, 100" href="#newline" title="Neue Zeile nach ausgabe? Ja/Nein"></area>
+        </map>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Mit dem <code>Serial print</code> Block lassen sich Nachrichten, Texte oder Variablenwerte auf dem seriellen Monitor ausgeben. 
+            Dieser ist eine Schnittstelle zur Kommunikation des Microcontrollers mit dem Entwickler oder Benutzer. 
+            Der Programmablauf kann, wenn er dazu ausgelegt wurde mithilfe des seriellen Monitors überwacht werden.  
+            Es können auch Fehlermeldungen über diesen ausgegeben werden. 
+            <br><br>
+            Der serielle Monitor lässt sich über die Arduino IDE über den Reiter "Werkzeuge" öffnen. 
+            Die "Baudrate" muss falls noch nicht geschehen auf 9600 gestellt werden, um mit dem Arduino zu kommunizieren. 
+        </p>
+        <h2 class="unterueberschrift" id="text">String</h2>
+        <p>
+           Hier wird die Zeichenkette bzw. der String eingefügt, der im seriellen Monitor ausgegeben werden soll. 
+           Jeder mögliche Text kann hier eingefügt werden. 
+           Wenn Variablen ausgegeben werden sollen, dann benötigt man den entsprechenden Verbindungsblock von Zeichenkette 
+           und analoger oder digitaler Größe. 
+        </p>
+        <h2 class="unterueberschrift" id="newline">Neue Zeile</h2>
+        <p>
+            Dieser Parameter ist selbsterklärend. 
+            Hier kann entweder ein <code>true</code> oder <code>false</code> dem Block übergeben werden. 
+            Wenn ein <code>true</code> übergeben wird, dann wird nachdem die oben eingefügte Zeichenkette im seriellen Monitor 
+            ausgegeben wurde dort eine neue Zeile begonnen, in der dann die nächste Ausgabe erfolgt. 
+        </p>
+        <h2 class="unterueberschrift" id="block_beschreibung">Beispiel</h2>
+        <p>
+            <b>Beispiel:</b> Es soll einfach nur die Nachricht "Hallo Welt" auf dem seriellen Monitor ausgegeben werden. 
+            Ob danach eine neue Zeile begonnen wird oder nicht spielt erstmal keine Rolle. 
+            <br><br>
+            In ArduBlock: 
+            <br><br>
+            <img src="serial_print-beispiel.png" alt="">
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code wird der Block durch den Befehl <code>Serial.print()</code> realisiert, wobei zwischen die Klammern hier 
+            die Nachricht geschrieben wird, die ausgegeben werden soll. 
+            Wenn eine Zeichenkette ausgegeben werden soll, dann muss diese zwischen Anführungszeichen geschrieben werden. 
+            <br>
+            Bei einer Kommunikation mit dem seriellen Monitor muss diese zuerst in der <code>setup</code> Funktion begonnen 
+            werden. 
+            Dies geschieht mit dem Befehl <code>Serial.begin(9600)</code> und wird im <code>Setup</code> Teil des Programms eingefügt. 
+            Die Zahl 9600 ist die Baudrate. 
+            Diese ist an diesem Punkt noch nicht wichtig, jedoch muss sie im Programm und im seriellen Monitor auf den gleichen Wert 
+            eingestellt werden. 
+            <br>
+            Wenn im Block eingestellt wird, dass eine neue Zeile nach der Ausgabe begonnen werden soll, dann wird unter das 
+            <code>Serial.print("Ausgabe");</code> noch ein leeres <code>Serial.println();</code> geschrieben, da mit diesem automatisch 
+            eine neue Zeile begonnen wird. 
+            <br><br>
+            Beispiel im Code (ohne <code>Serial.begin(9600)</code>):
+            <br><br>
+            <code>Serial.print("Hallo Welt");</code>
+            
+        <p>
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/serial_print.png b/src/main/webapp/com/ardublock/reference/serial_print.png
new file mode 100644
index 0000000000000000000000000000000000000000..be309d47097bd287d5a646c69e283afa045699fe
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/serial_print.png differ
diff --git a/src/main/webapp/com/ardublock/reference/setter_variable_digital-beispiel.png b/src/main/webapp/com/ardublock/reference/setter_variable_digital-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..a7549886370fdaf3663b26d1b4b642f61c6196b5
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/setter_variable_digital-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/setter_variable_digital.html b/src/main/webapp/com/ardublock/reference/setter_variable_digital.html
new file mode 100644
index 0000000000000000000000000000000000000000..af408702273f7eb326fcbf7aa1c957dccc9c34e5
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/setter_variable_digital.html
@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html>
+
+<link rel="stylesheet" href="_seitenformatierung.css">
+
+<body style="margin: 0px;">
+
+<div style="border: #284a66; border-style: solid; border-width: 5px;">
+    <nav>
+    <li id="beschreibung">Block-Referenz</li>
+    <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+    <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+    </nav>
+</div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Math. Operatoren / Digital</p>
+        <h1 style="font-size: 220%;">Setze digitale Variable</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "setter_variable_digital.png" usemap="#blockmap" alt="setze-digitale-variable-block"></img>
+            <figcaption id="caption">Für Erklärung auf einzelne Komponenten klicken.</figcaption>
+            </figure> 
+        </div>
+        <map name="blockmap">
+            <area shape="rect" coords="18,18,284,102" href="#block_beschreibung" title="Block"></area>
+            <area shape="rect" coords="293,20,607,57" href="#variable" title="Variable, die gesetzt werden soll"></area>
+            <area shape="rect" coords="330,65,440,103" href="#wert" title="Wert, den die Variable annehmen soll"></area>
+        </map>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Mit dem <code>Setze digitale Variable</code> Block können lokale und globale <b>digitale</b> Variablen gesetzt werden. 
+            Hier können bereits existierende Variablen gesetzt werden, die bereits schon früher im Code verwendet wurden oder es können neue Variablen erstellt werden. 
+         </p>
+        <h2 class="unterueberschrift" id="variable">Variable</h2>
+        <p>
+           Hier wird die digitale Variable eingesetzt, deren Wert festgelegt werden soll. 
+           Mit einem Linksklick auf die aktuelle Bezeichnung lässt sich der Bearbeitungsmodus aktivieren und der Name der Variable ändern. 
+           Mit einem Druck auf die Enter-Taste wird die Bearbeitung abgeschlossen. 
+           <br>
+           <b style="color: red;">Achtung: </b>Hier können nur Blöcke vom Typ <code>lokale_digitale_Variable</code> oder 
+           <code>digitale_Variable</code>  eingesetzt werden. 
+        </p>
+        <h2 class="unterueberschrift" id="wert">Wert</h2>
+        <p>
+            Für den <code>Wert</code> Parameter wird der Wert eingesetzt, auf den die Variable gesetzt werden soll. 
+            Da es sich hier um eine <b>digitale</b> Variable handelt, kann sie nur zwei Zustände haben. 
+            Entweder logisch wahr (dann wird als Wert <code>true</code> oder <code>HIGH</code> eingesetzt) 
+            oder logisch falsch (dann wird als Wert <code>false</code> oder <code>LOW</code> eingesetzt).
+
+        </p>
+        <h2 class="unterueberschrift" id="block_beschreibung">Beispiel</h2>
+        <p>
+            Beispiel: Am digitalen Pin 2 liegt ein Signal von einem Sensor (z.B. Magnetschalter) an, wenn eine Tür geschlossen ist. 
+            Wenn sich die Tür öffnet, dann gibt der Sensor eine Spannung von 0 Volt auf den Pin. 
+            Es soll eine digitale Variable <code>tuer_offen</code> angelegt werden, die <code>true</code> ist, wenn die Türe offen ist und <code>false</code> ist, wenn die Türe geöffnet ist. 
+            Der <code>falls</code> und <code>NICHT</code> Block sollten hier schon bekannt sein. 
+            <br><br>
+            So würde das Beispiel in ArduBlock aussehen:
+            <br><br>
+            <img src="setter_variable_digital-beispiel.png" alt="beispiel-setze-digitale-variable">
+        </p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>          
+            Im Code wird der Block ganz einfach über ein Gleich-Zeichen (<code>=</code>) realisiert. 
+            Auf der linken Seite steht der Name der Variable und auf der rechten Seite steht der entsprechende Wert. 
+            (Hier: <code>HIGH</code>)
+            <br>
+            Wenn die Variable in dem <code>Setze digitale Variable</code> zuerst auftaucht, dann muss sie zuerst noch initialisiert werden. 
+            Dies kann entweder lokal oder global geschehen. 
+            Bei einer globalen Initialisierung würde die Variable hier außerhalb des <code>loop</code> Blocks initialisiert werden. 
+            Bei einer lokalen Initialisierung würde diese hier innerhalb des <code>falls</code> Blockes geschehen. 
+            <br>
+            Eine Variable kann initialisiert werden, indem ihr Datentyp zusammen mit dem Namen in das Programm eingefügt wird. 
+            Digitale Variablen haben den Datentyp <code>bool</code>. 
+            Bei der Initialisierung kann auch gleich ein Wert mit eingegeben werden. 
+            Die Initialisierung von <code>tuer_offen</code>, wenn sie als <code>LOW</code> initialisiert wird, würde so aussehen:
+            <br>
+            <code>bool tuer_offen = LOW;</code>
+            <br><br>
+            Das Beispiel würde im Code folgendermaßen aussehen (ausgegangen davon, dass die Variable schon angelegt wurde): 
+            <br><br>
+            <code>
+                if (!( digitalRead(2) )) { <br>
+               &emsp;&emsp; tuer_offen = HIGH; <br>
+              } <br>
+            </code>
+            
+        <p>
+
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/setter_variable_digital.png b/src/main/webapp/com/ardublock/reference/setter_variable_digital.png
new file mode 100644
index 0000000000000000000000000000000000000000..3463285add62844632cf1620a387a71e7a6bafcc
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/setter_variable_digital.png differ
diff --git a/src/main/webapp/com/ardublock/reference/setter_variable_number-beispiel.png b/src/main/webapp/com/ardublock/reference/setter_variable_number-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..7e8c0874972cfae9878c4277431a635503826682
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/setter_variable_number-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/setter_variable_number.html b/src/main/webapp/com/ardublock/reference/setter_variable_number.html
new file mode 100644
index 0000000000000000000000000000000000000000..ea133a1407cebf0324c90c5482446dc33363ffc7
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/setter_variable_number.html
@@ -0,0 +1,114 @@
+<!DOCTYPE html>
+<html>
+
+<link rel="stylesheet" href="_seitenformatierung.css">
+
+<body style="margin: 0px;">
+
+<div style="border: #284a66; border-style: solid; border-width: 5px;">
+    <nav>
+    <li id="beschreibung">Block-Referenz</li>
+    <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+    <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+    </nav>
+</div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Math. Operatoren / Analog</p>
+        <h1 style="font-size: 220%;">Setze analoge Variable</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "setter_variable_number.png" usemap="#blockmap" alt="setze-digitale-variable-block"></img>
+            <figcaption id="caption">Für Erklärung auf einzelne Komponenten klicken.</figcaption>
+            </figure> 
+        </div>
+        <map name="blockmap">
+            <area shape="rect" coords="18,18,284,102" href="#block_beschreibung" title="Block"></area>
+            <area shape="rect" coords="293,20,607,57" href="#variable" title="Variable, die gesetzt werden soll"></area>
+            <area shape="rect" coords="330,65,440,103" href="#wert" title="Wert, den die Variable annehmen soll"></area>
+        </map>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Mit dem <code>Setze analoge Variable</code> Block können lokale und globale <b>analoge</b> Variablen gesetzt werden. 
+            Hier können bereits existierende Variablen gesetzt werden, die bereits schon früher im Code verwendet wurden oder es können neue Variablen erstellt werden. 
+            Es können den Variablen mit dem <code>Setze analoge Variable</code> Block nur <b>ganze</b> Zahlen zugewiesen werden, da der Block diese als "Integer" Datentyp anlegt. 
+            Wenn für den <code>Wert</code> Parameter eine Kommazahl eingesetzt wird, dann wird alles hinter dem Komma bei der Zuweisung abgeschnitten. 
+         </p>
+        <h2 class="unterueberschrift" id="variable">Variable</h2>
+        <p>
+           Hier wird die analoge Variable eingesetzt, deren Wert festgelegt werden soll. 
+           Mit einem Linksklick auf die aktuelle Bezeichnung lässt sich der Bearbeitungsmodus aktivieren und der Name der Variable ändern. 
+           Mit einem Druck auf die Enter-Taste wird die Bearbeitung abgeschlossen. 
+           <br>
+           <b style="color: red;">Achtung: </b>Hier können nur Blöcke vom Typ <code>lokale_analoge_Variable</code> oder 
+           <code>analoge_Variable</code> eingesetzt werden. 
+        </p>
+        <h2 class="unterueberschrift" id="wert">Wert</h2>
+        <p>
+            Für den <code>Wert</code> Parameter wird der Wert eingesetzt, auf den die Variable gesetzt werden soll. 
+            Da es sich hier um eine <b>analoge</b> Variable handelt, kann dies jede beliebige ganze Zahl sein. 
+            Da durch den <code>Setze analoge Variable</code> Block allerdings eine Variable vom "Integer" Datentyp angelegt wird und der 
+            Arduino Uno nur 16 Bit Integer speichert ist der Zahlenbereich auf -32,768 bis 32,767 begrenzt. 
+
+        </p>
+        <h2 class="unterueberschrift" id="block_beschreibung">Beispiel</h2>
+        <p>
+            Beispiel: Eine analoge Variable wird als Zähler in einem <code>solange</code> Block verwendet. 
+            Dieser soll die Zahlen 0 bis 100 in den seriellen Monitor schreiben. 
+            Abbruchbedingung für den <code>solange</code> Block ist, dass die Zählvariable <code>zaehler</code> größer als 100 ist. 
+            <br>
+            Vor dem <code>solange</code> Block wird ihr der Wert 0 zugewiesen. 
+            Bei jedem Schleifendurchgang wird die Variable um 1 erhöht. 
+            <br>
+            Für diese beiden Operationen wird der <code>Setze analoge Variable</code> Block verwendet. 
+            <br><br>
+            So würde das Beispiel in ArduBlock aussehen:
+            <br><br>
+            <img src="setter_variable_number-beispiel.png" alt="beispiel-setze-digitale-variable">
+        </p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>          
+            Im Code wird der Block ganz einfach über ein Gleich-Zeichen (<code>=</code>) realisiert. 
+            Auf der linken Seite steht der Name der Variable und auf der rechten Seite steht der entsprechende Wert. 
+            (Hier: <code>0</code> bzw. <code>zaehler + 1</code>)
+            <br>
+            Wenn die Variable in dem <code>Setze analoge Variable</code> zuerst auftaucht, dann muss sie zuerst noch initialisiert werden. 
+            Dies kann entweder lokal oder global geschehen. 
+            Bei einer globalen Initialisierung würde die Variable hier außerhalb des <code>loop</code> Blocks initialisiert werden. 
+            Bei einer lokalen Initialisierung würde diese hier innerhalb <code>loop</code> Blockes unmittelbar vor dem <code>solange</code> Block geschehen. 
+            <br>
+            Eine Variable kann initialisiert werden, indem ihr Datentyp zusammen mit dem Namen in das Programm eingefügt wird. 
+            Analoge Variablen haben bei dem <code>setze analoge Variable</code> den Datentyp <code>int</code>. 
+            Bei der Initialisierung kann auch gleich ein Wert mit eingegeben werden. 
+            Die Initialisierung von <code>zaehler</code>, wenn sie mit <code>0</code> initialisiert wird, würde so aussehen:
+            <br>
+            <code>int zaehler = 0;</code>
+            <br><br>
+            Das Beispiel würde im Code folgendermaßen aussehen (ausgegangen davon, dass die Variable schon angelegt wurde): 
+            <br><br>
+            <code>
+                zaehler = 0; <br>
+                while ( ( zaehler &lt; 100 ) ) { <br>
+                    &emsp;&emsp;zaehler = ( zaehler + 1 ); <br>
+                    &emsp;&emsp;Serial.print(zaehler); <br>
+                } <br>
+            </code>
+            
+        <p>
+
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/setter_variable_number.png b/src/main/webapp/com/ardublock/reference/setter_variable_number.png
new file mode 100644
index 0000000000000000000000000000000000000000..8792ba66e869fd7a285f2202f0fba45f7f024724
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/setter_variable_number.png differ
diff --git a/src/main/webapp/com/ardublock/reference/sketch.html b/src/main/webapp/com/ardublock/reference/sketch.html
new file mode 100644
index 0000000000000000000000000000000000000000..2e99a3c92fc52dc0e5c4c5685f7256cfe42dc5d1
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/sketch.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+    <link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Steuerung / Hauptschleifen</p>
+        <h1 style="font-size: 220%;">Programm</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "sketch.png" alt="programm-Block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>Programm</code> Block ist der Block, auf dem das gesamte Programm aufbaut. 
+            Er besteht aus einem <code>Setup</code> und einem <code>Loop</code> Teil, in welche jeweils weitere Blöcke eingefügt werden können. 
+            <br>
+            Wenn das Programm nun gestartet wird, dann werden die eingefügten Blöcke im <code>Setup</code> Teil nur ein einziges mal am Anfang ausgeführt. 
+            Die Blöcke hingegen, die im <code>Loop</code> Teil eingefügt sind, werden wie in einer <code>wiederhole fortlaufend</code> Schleife unendlich oft 
+            von oben nach unten abgearbeitet. 
+            Besonders im "Pro" Modus ist diese Trennung sinnvoll. 
+            <br><br>
+            Dadurch können Variablen im <code>Setup</code> einmalig bestimmte Startwerte gegeben werden, damit sie nicht bei jedem Durchlauf der <code>Loop</code> Schleife zurückgesetzt werden. 
+            Es werden im <code>Setup</code> Block meist Variablen erstellt, Pins als Eingänge oder Ausgänge definiert und deren PinMode gesetzt. 
+            Wenn diese Operationen nur ein einziges Mal am Programmstart ausgeführt wird, dann spart das bei jedem Durchlauf des Loops wertvolle Rechenzeit. 
+            <br>
+            Alle Programme müssen eine Hauptschleife besitzen um auf den Arduino hochgeladen werden zu können. 
+            Das kann entweder der hier beschriebene <code>Programm</code> Block oder ein <code>wieder fortlaufend</code> Block sein. 
+        </p>
+        <h2 class="unterueberschrift">Code</h2>
+        <p>
+            Im Code für den Arduino wird der Baustein mit zwei Funktionen realisiert.
+            Mit der <code>void setup(){}</code> und der <code>void loop(){}</code>.
+            Die auszuführenden Operationen werden dann zwischen die jeweiligen geschweiften Klammern <i>{}</i> geschrieben.
+        </p>
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/sketch.png b/src/main/webapp/com/ardublock/reference/sketch.png
new file mode 100644
index 0000000000000000000000000000000000000000..b20ca95432b54bfdfebd840b4a0a1c31959a957d
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/sketch.png differ
diff --git a/src/main/webapp/com/ardublock/reference/soft_serial_print-beispiel.png b/src/main/webapp/com/ardublock/reference/soft_serial_print-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..495ce1daa5aa17b538fd642d79c96eca2be4b182
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/soft_serial_print-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/soft_serial_print.html b/src/main/webapp/com/ardublock/reference/soft_serial_print.html
new file mode 100644
index 0000000000000000000000000000000000000000..cb3c484f353e3febb46802b5526f02a15d1ebca6
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/soft_serial_print.html
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html>
+
+<link rel="stylesheet" href="_seitenformatierung.css">
+
+<body style="margin: 0px;">
+
+<div style="border: #284a66; border-style: solid; border-width: 5px;">
+    <nav>
+    <li id="beschreibung">Block-Referenz</li>
+    <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+    <li style="float: right;" ><a id="uebersichtbutton" class="uebersuchtsbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+    </nav>
+</div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Kommunikation / Seriell</p>
+        <h1 style="font-size: 220%;">softSerial print</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "soft_serial_print.png" usemap="#blockmap" alt="serial-print-block"></img>
+            <figcaption id="caption">Für Erklärung auf einzelne Komponenten klicken.</figcaption>
+            </figure> 
+        </div>
+        <map name="blockmap">
+            <area shape="rect" coords="20, 18, 211, 181" href="#block_beschreibung" title="Block"></area>
+            <area shape="rect" coords="251, 22, 411, 100" href="#rx/tx" title="Pins zum Senden und Empfangen"></area>
+            <area shape="rect" coords="257, 104, 488, 140" href="#text" title="Text der ausgegeben werden soll"></area>
+            <area shape="rect" coords="218, 143, 443, 172" href="#newline" title="Neue Zeile nach ausgabe? Ja/Nein"></area>
+        </map>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Mit dem <code>softSerial print</code> Block lassen sich Nachrichten, Texte oder Variablenwerte über eine UART Schnittstelle versenden. 
+            UART steht für "universal asynchronous receiver-transmitter". 
+            Das heißt mit einer UART Schnittstelle können sowohl Daten empfangen, als auch Daten gesendet werden. 
+            Diese können an andere Microcontroller, Sensoren oder Aktoren gesendet werden, die ebenfalls eine UART Schnittstelle haben und entsprechend konfiguriert sind. 
+            <br>
+            Mit dem <code>softSerial print</code> Block können alle digitalen Pins als RX (Empfänger) oder TX (Sender) genutzt werden. 
+            Dazu wird eine spezielle Bibliothek genutzt, denn normalerweise sind nur die Pins 0 und 1 als RX und TX verwendbar. 
+            Die Baudrate ist ein wichtiger Parameter bei der Konfigurierung von UART Verbindungen. Sie gibt die Geschwindigkeit vor, mit der Daten zwischen den Teilnehmern übertragen werden. 
+            Sie muss daher bei beiden Teilnehmern bekannt und gleich sein, damit keine Informationen verloren gehen. 
+            <br>
+            Die Baudrate ist beim <code>softSerial print</code> Block, sofern davor nicht anders festgelegt, auf einen Wert von 4800 eingestellt. 
+            <br><br>
+            Mit dem <code>softSerial print</code> können allerdings nur Nachrichten in Form eines Strings (einer Zeichenkette) übertragen werden. 
+            Um auch aktiv auf einem Kanal nach Informationen zu lauschen und diese zu verarbeiten wird der Pro-Modus mit dem <code>softSerial read</code> Block benötigt. 
+        </p>
+
+        <h2 class="unterueberschrift" id="text">String</h2>
+        <p>
+           Hier wird die Zeichenkette bzw. der String eingefügt, der über die UART Schnittstelle versendet werden soll. 
+           Jeder mögliche Text kann hier eingefügt werden. 
+           Wenn Werte von Variablen versendet werden sollen, dann benötigt man den entsprechenden Verbindungsblock von Zeichenkette 
+           und analoger oder digitaler Größe. 
+        </p>
+        <h2 class="unterueberschrift" id="newline">Neue Zeile</h2>
+        <p>
+            Dieser Parameter ist selbsterklärend. 
+            Hier kann entweder ein <code>true</code> oder <code>false</code> dem Block übergeben werden. 
+            Wenn ein <code>true</code> übergeben wird, dann wird nachdem die oben eingefügte Zeichenkette im seriellen Monitor 
+            ausgegeben wurde dort eine neue Zeile begonnen, in der dann die nächste Ausgabe erfolgt. 
+        </p>
+        <h2 class="unterueberschrift" id="block_beschreibung">Beispiel</h2>
+        <p>
+            <b>Beispiel:</b> Es soll einfach nur die Nachricht "Hallo Welt" an ein anderes Bauteil übertragen werden. 
+            Als RX Pin soll der Pin 2 und als TX der Pin 3 verwendet werden. 
+            Ob danach eine neue Zeile begonnen wird oder nicht spielt erstmal keine Rolle. 
+            <br><br>
+            Der RX Pin der einen Komponente geht auf den TX Pin der anderen Komponente und umgekehrt. 
+            <br><br>
+            In ArduBlock: 
+            <br><br>
+            <img src="soft_serial_print-beispiel.png" alt="">
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code wird der Block durch den Befehl <code>softSerial.print()</code> realisiert, wobei zwischen die Klammern hier 
+            die Nachricht geschrieben wird, die ausgegeben werden soll. 
+            Wenn eine Zeichenkette ausgegeben werden soll, dann muss diese zwischen Anführungszeichen geschrieben werden. 
+            <br>
+            Noch außerhalb der <code>loop</code> und <code>setup</code> Blocks wird ein neues Objekt der Klasse <code>SoftwareSerial</code> angelegt. 
+            Dabei werden die RX und TX Pins als Parameter übergeben. 
+            Für das Beispiel oben wurde das dann so aussehen:
+            <br>
+            <code>SoftwareSerial softSerial(2, 3);</code>
+            <br>
+            Der Name des hier erstellten Objektes lautet <code>softSerial</code>. 
+            Es kann aber auch andere Bezeichnungen bekommen. 
+            <br>
+            Wie bei der Kommunikation mit dem seriellen Monitor muss auch hier die Kommunikation mit <code>serial.begin(4800)</code> im <code>setup</code> Teil 
+            des Programms begonnen werden. 
+        <p>
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/soft_serial_print.png b/src/main/webapp/com/ardublock/reference/soft_serial_print.png
new file mode 100644
index 0000000000000000000000000000000000000000..10dab626bbca7118588dba34fb3a79a29310635d
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/soft_serial_print.png differ
diff --git a/src/main/webapp/com/ardublock/reference/string.html b/src/main/webapp/com/ardublock/reference/string.html
new file mode 100644
index 0000000000000000000000000000000000000000..1774c50e5c5fafefaebd8c429d08e899760da2ec
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/string.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+
+<link rel="stylesheet" href="_seitenformatierung.css">
+
+<body style="margin: 0px;">
+
+<div style="border: #284a66; border-style: solid; border-width: 5px;">
+    <nav>
+    <li id="beschreibung">Block-Referenz</li>
+    <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+    <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+    </nav>
+</div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Math. Operatoren/Analog / Zeichen/Text</p>
+        <h1 style="font-size: 220%;">Zeichenkette</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "string.png" alt="zahl-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+        
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Dieser Block ist sehr simpel. 
+            Er symbolisiert einfach nur eine Zeichenkette, also eine Folge von verschiedenen Zeichen (z.B. Buchstaben oder Zahlen). 
+            Er kann überall eingesetzt werden, wo eine Zeichenkette verwendet werden kann (rechteckige Form mit ausgeschnittenen Ecken). 
+            Es lässt sich jeder mögliche Text darin eintragen.
+            <br><br>
+            Mit diesem Block können zum Beispiel Texte bestimmt werden, die mit dem <code>Serial print</code> Block 
+            im seriellen Monitor ausgegeben werden sollen 
+            oder Kommentartexte, die in den <code>Programmkopf</code> Block eingegeben werden. 
+            <br><br>
+            <b>Achtung:</b> Wenn Zahlen als Zeichenkette initialisiert werden, dann kann mit ihnen nicht gerechnet werden, 
+            bevor man diese nicht in einen anderen Datentyp umgewandelt hat. 
+            Diese Funktion ist allerdings nur im "Pro" Modus von ArduBlock verfügbar.
+            <br><br>
+            Standartmäßig ist in dem Block der Text "ABCD" eingetragen. 
+            Dieser kann geändert werden, wenn man mit der linken Maustaste auf den Block klickt. 
+            Dann startet der Bearbeitungsmodus und der Block kann geändert werden. 
+            Mit einem Druck auf die Enter-Taste wird der Bearbeitungsmodus verlassen und der neue Text ist im Block gespeichert.  
+         </p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>          
+            Im Code wird die Zeichenkette wie eine Variable angelegt. 
+            Sie hat den Datentyp <code>string</code>. 
+            Wenn mit einer Zeichenkette gearbeitet wird, dann werden die Zeichen immer zwischen zwei 
+            Anführungszeichen geschrieben (<code>""</code>).
+            <b>Beispiel:</b> Die Zeichenkette namens <code>Name</code> soll angelegt werden und den Text "Vorname Nachname" beinhalten. 
+            <br><br>
+            Dann würde das im Code folgendermaßen aussehen: 
+            <br><br>
+            <code>string name = "Vorname Nachname";</code>
+        <p>
+</div>
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/string.png b/src/main/webapp/com/ardublock/reference/string.png
new file mode 100644
index 0000000000000000000000000000000000000000..cf23642ea8e155e7304993ca5e04e600585e984a
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/string.png differ
diff --git a/src/main/webapp/com/ardublock/reference/subroutine_com-beispiel.png b/src/main/webapp/com/ardublock/reference/subroutine_com-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..a5d7ddf02cffa3a66b028b86656903679d714a69
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/subroutine_com-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/subroutine_com.html b/src/main/webapp/com/ardublock/reference/subroutine_com.html
new file mode 100644
index 0000000000000000000000000000000000000000..1258c0c63304b296c13208db98a84167aafc8571
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/subroutine_com.html
@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<html>
+    <link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Unterprogramme</p>
+        <h1 style="font-size: 220%;">Unterprogramm</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "subroutine_com.png" usemap="#blockmap" alt="digitalWrite-Block"></img>
+            <figcaption id="caption">Für Erklärung auf einzelne Komponenten klicken.</figcaption>
+            </figure> 
+        </div>
+
+        <map name="blockmap">
+            <area shape="rect" coords="20, 20, 187, 121" href="#block_beschreibung" title="Auszuführende Operation"></area>
+            <area shape="rect" coords="189, 17, 626, 65" href="#comment_beschreibung" title="Beschreibung"></area>
+            <area shape="rect" coords="12, 145, 200, 180" href="#unterprogramm" title="Unterprogramm"></area>
+        </map>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Funktion</h2>
+        <p>
+            Für diese Funktion werden zwei Blöcke benötigt. 
+            Zum Einen ein Block mit dem ein Unterprogramm erstellt werden kann. 
+            Dieser ist in der Abbildung oben zu sehen. 
+            Zum Anderen ein Block um das Unterprogramm auszuführen. 
+            Dieser ist in der Abbildung unten zu sehen. 
+            <br><br>
+            Der Block, der verwendet wird um ein Unterprogramm zu erstellen, wird außerhalb der Hauptschleife platziert. 
+            Zur Übersichtlichkeit kann eine Beschreibung hinzugefügt werden, damit auf den ersten Blick die Funktion des Blocks erkennbar ist. 
+            <br>
+            In den <code>Befehle</code> Abschnitt können alle möglichen beliebigen Befehle eingetragen werden, die bei einem Aufruf des Unterprogramms ausgeführt werden sollen. 
+            <br><br>
+            Der Block zur Ausführung des Unterprogramms, welcher in der Abbildung unten zu sehen ist, kann dann in die Hauptschleife eingesetzt werden. 
+            Wenn dieser Block dann erreicht wird, wird das Unterprogramm, was mit dem anderen Block außerhalb der Hauptschleife erstellt wurde ausgeführt.
+            Der Block kann auch mehrmals in der Hauptschleife an verschiedenen Stellen eingefügt werden.
+        </p>        
+        
+        <h2 class="unterueberschrift" id="comment_beschreibung">Beschreibung</h2>
+        <p>
+            Im <code>Beschreibung</code> Abschnitt kann eine Beschreibung des Unterprogramms eingetragen werden. 
+            Diese dient nur dazu um den Überblick zu behalten, sollten mehrere Unterprogramme erstellt werden. 
+            Es kann eine kurze Beschreibung des Blocks eingetragen werden. 
+            Für den Code, der aus ArduBlock generiert wird hat die Beschreibung keine Bedeutung. 
+            Diese wird lediglich als Kommentar ins Programm eingefügt. 
+        <p>
+        <h2 class="unterueberschrift" id="benennung">Benennung</h2>
+        <p>
+            Wichtig, vor allem wenn mehrere Unterprogramme eingefügt werden ist, dass der Block der das Unterprogramm aufruft <b style="color: red;">gleich</b> benannt werden muss, wie der Block der das Unterprogramm erstellt. 
+            Man kann die Blöcke umbenennen, indem man einen Linksklick auf den Namen ausführt. 
+            Dann hat man den Bearbeitungsmodus aktiviert und der Name kann geändert werden. 
+            Mit der "Enter" Taste kann der Bearbeitungsmodus verlassen werden. 
+        <p>
+        <h2 class="unterueberschrift" id="beispiel">Beispiel</h2>
+        <p>
+            Hier wird das Beispiel aus der <code>digitalRead</code> Referenz verwendet. 
+            Die Programmabschnitte "blinken" und "leuchten" sollen allerdings als Subroutinen realisiert werden. 
+            In diesem Beispiel soll eine LED in Abhängigkeit des Eingangssignals an Pin 2 angesteuert werden. 
+            Die LED ist über einen Vorwiderstand an den digitalen Pin 5 angeschlossen. 
+            Wenn am Pin 2 ein Signal anliegt, soll die LED Blinken. 
+            Wenn kein Signal anliegt, dann soll die LED durchgehend leuchten. 
+            Hier wird der <code>falls</code> und <code>sonst</code> Block verwendet, welche eine Bedingung überprüfen und anhand dieser dann einen Code entweder ausführen oder überspringen. 
+            Wenn ein Signal anliegt, dann ist der <code>digitalRead</code> Block <code>TRUE</code> und der <code>falls</code> Block führt die Blink Sequenz aus. 
+            Wenn kein Signal anliegt, dann ist der <code>digitalRead</code> Block <code>FALSE</code> und der <code>sonst</code> Block setzt den Pin 5 auf <code>HIGH</code>. 
+            <br><br>
+            In ArduBlock könnte diese Funktion dann folgendermaßen aussehen:
+            <br><br>
+            <img src="subroutine_com-beispiel.png" alt="Beispiel zum digitalRead Block">
+        <p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code wird ein Unterprogramm außerhalb der Hauptschleife erstellt. 
+            Der Block zum Erstellen wird mit dem Befehl <code>void Unterprogramm(){Befehle}</code> realisiert, wobei für "Unterprogramm" der Name des Unterprogramms 
+            und für "Befehle" hier die entsprechenden Befehle eingetragen werden.
+            Bei der Erstellung kann man noch Übergabeparameter und Rückgabewerte festlegen. 
+            Das geht jedoch erst einmal über den Rahmen hinaus, allerdings findet man unter diesen Begriffen im Internet viele Erklärungen, wenn man sich weiter infprmieren will.
+            <br><br>
+            Aufgerufen wird das Unterprogramm dann mit dem Befehl <code>Unterprogramm();</code>, wobei hier wieder für "Unterprogramm" der Name des entsprechenden Unterprogramms eingefügt wird. 
+            <br><br>
+            Im Code würde das Beispiel folgendermaßen aussehen: 
+            <br><br>
+            <code>
+                void loop() { <br>
+                &emsp;&emsp;if (digitalRead(2)) { <br>
+                    &emsp;&emsp;&emsp;&emsp;blinken(); <br>
+                    &emsp;&emsp;} <br>
+                    &emsp;&emsp;else { <br>
+                    &emsp;&emsp;&emsp;&emsp;leuchten(); <br>
+                    &emsp;&emsp;} <br>
+              } <br>
+              <br>
+              //Bringt die LED zum kontinuierlichen leuchten <br>
+              void leuchten() { <br>
+                &emsp;&emsp;digitalWrite( 5 , HIGH ); <br>
+              } <br>
+              <br>
+              //Lässt die LED im Sekundentakt blinken <br>
+              void blinken() { <br>
+                &emsp;&emsp;digitalWrite( 5 , HIGH ); <br>
+                &emsp;&emsp;delay( 1000 ); <br>
+                &emsp;&emsp;digitalWrite( 5 , LOW ); <br>
+                &emsp;&emsp;delay( 1000 ); <br>
+              } <br>
+            </code>
+            
+              <br>
+        <p>
+
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/subroutine_com.png b/src/main/webapp/com/ardublock/reference/subroutine_com.png
new file mode 100644
index 0000000000000000000000000000000000000000..1c0fa9f7fe31a660fe43702822632bedc68c0e24
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/subroutine_com.png differ
diff --git a/src/main/webapp/com/ardublock/reference/subtraction-beispiel.png b/src/main/webapp/com/ardublock/reference/subtraction-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..916f1417526a3385e46d0d5a583fdb913a426ede
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/subtraction-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/subtraction.html b/src/main/webapp/com/ardublock/reference/subtraction.html
new file mode 100644
index 0000000000000000000000000000000000000000..8f619c08796c8973a624ce16cc10ff82639dbcc3
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/subtraction.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+    <link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Math. Operatoren / Operatoren</p>
+        <h1 style="font-size: 220%;">-</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "subtraction.png" alt="addition-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>-</code> Block ist ein mathematischer Operator, der eine analoge Größe von einer anderen subtrahiert und selbst einen analogen Wert annimmt. 
+            Es können fest Programmierte Zahlenwerte, analoge Eingänge oder analoge Variablen miteinander verrechnet werden. 
+            Der <code>-</code> Block selbst kann dann als analoge Variable in anderen Blöcken verwendet werden. 
+            Der rechte Wert wird von dem linken Wert abgezogen. 
+            <br><br>
+            Wenn man mit der Maus über dem Block schwebt, dann erscheint ein kleiner Pfeil nach unten. 
+            Klickt man diesen mit der linken Maustaste, dann öffnet sich ein Dropdown Menü und der <code>-</code> Block kann folgende Blöcke umgewandelt werden: 
+            <br><br>
+            <code>
+                &emsp;&emsp;+ <br>
+                &emsp;&emsp;- <br>
+                &emsp;&emsp;x <br>
+                &emsp;&emsp;/ <br>
+                &emsp;&emsp;% <br>
+            </code>
+            
+            <br><br>
+            Auf diese wird allerdings in der entsprechen eigenen Block-Referenz eingegangen. 
+        </p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>
+            Im Code kann der <code>-</code> Block mit einem einfachen Minus-Zeichen (<code>-</code>) realisiert werden. 
+            Die beiden zu verrechnenden analogen Größen werden jeweils vor und nach dem Operator eingefügt. 
+            <br>
+            <b>Beispiel:</b> Von der Variable <code>var</code> soll 20 abgezogen werden und es soll eine Nachricht im seriellen Monitor über den neuen Wert ausgegeben werden.  
+            <br><br>
+            In ArduBlock: 
+            <br><br>
+            <img src="subtraction-beispiel.png" alt="beispiel-subtraktion">
+            <br><br>
+            Im Code: 
+            <br><br>
+            <code>
+                var = ( var <b style="color: red;">-</b> 20 ); <br>
+                Serial.print("Der neue Wert der Variable var ist: "); <br>
+                Serial.print(var ); <br>
+            } <br>
+            <br>
+            </code>
+            
+
+        <p>
+
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/subtraction.png b/src/main/webapp/com/ardublock/reference/subtraction.png
new file mode 100644
index 0000000000000000000000000000000000000000..4a478f834ab16bc1bd2ae249048bf166187e6678
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/subtraction.png differ
diff --git a/src/main/webapp/com/ardublock/reference/true.html b/src/main/webapp/com/ardublock/reference/true.html
new file mode 100644
index 0000000000000000000000000000000000000000..31abf0b9369539d80d6db2adaf55f2c99a402323
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/true.html
@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html>
+
+<link rel="stylesheet" href="_seitenformatierung.css">
+
+<body style="margin: 0px;">
+
+<div style="border: #284a66; border-style: solid; border-width: 5px;">
+    <nav>
+    <li id="beschreibung">Block-Referenz</li>
+    <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+    <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+    </nav>
+</div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Math. Operatoren / Digital</p>
+        <h1 style="font-size: 220%;">true</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "true.png" alt="true-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>true</code> Block beschreibt einen von zwei <b>digitalen Zuständen</b>. 
+            Er kann überall eingesetzt werden, wo eine digitale Größe eingesetzt werden kann (runde Form). 
+            Zum Beispiel beim Setzen von lokalen oder globalen digitalen Variablen, als <code>teste</code> Bedingung in <code>falls</code> 
+            oder <code>sonst falls</code> Blöcken oder in Blöcken zum Vergleich digitaler Größen z.B.( <code>UND / ODER / == / != </code>).
+            <br>
+            Der <code>true</code> Block ist gleichbedeutend mit dem <code>HIGH</code> Block.
+            <br><br>
+            Wenn man mit der Maus über dem Block schwebt, dann erscheint darauf ein kleiner Pfeil, der nach unten zeigt. 
+            Klickt man mit der linken Maustaste auf diesen, dann öffnet sich ein Dropdown Menü mit welchem man den 
+            <code>true</code> Block in einen <code>false</code> Block umwandeln kann.
+            <br>
+            Dieser wird in einer eigenen Referenz erklärt. 
+         </p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>          
+            Im Code wird der <code>true</code> Block mit dem Befehl <code>true</code> realisiert. 
+            Dieser kann in anderen Funktionen wie eine digitale Variable verwendet werden, allerdings ist dieser dann immer wahr. 
+            <br><br>
+            Man kann damit zum Beispiel die Funktion von <code>falls</code> Blöcken testen, da diese immer ausgeführt werden, wenn ein 
+            <code>true</code> Block in die Teste-Bedingung eingesetzt wird. 
+        <p>
+</div>
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/true.png b/src/main/webapp/com/ardublock/reference/true.png
new file mode 100644
index 0000000000000000000000000000000000000000..066cab9ff32cf7ed94d1bc9df7ee5a92f1f377ff
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/true.png differ
diff --git a/src/main/webapp/com/ardublock/reference/variable_digital.html b/src/main/webapp/com/ardublock/reference/variable_digital.html
new file mode 100644
index 0000000000000000000000000000000000000000..244b8910a4973ba26a3e154e9e33aea5efdc20e3
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/variable_digital.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html>
+
+<link rel="stylesheet" href="_seitenformatierung.css">
+
+<body style="margin: 0px;">
+
+<div style="border: #284a66; border-style: solid; border-width: 5px;">
+    <nav>
+    <li id="beschreibung">Block-Referenz</li>
+    <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+    <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+    </nav>
+</div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Math. Operatoren / Digital</p>
+        <h1 style="font-size: 220%;">digitale Variable (global)</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "variable_digital.png" alt="setze-digitale-variable-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+           Digitale Variablen sind in der Arduino Programmierung sehr nützlich. 
+           Mit ihnen lassen sich verschiedene Zustände abbilden. 
+           Eine digitale Variable kann nur zwei Zustände annehmen. 
+           Entweder ist sie wahr (<code>true / HIGH</code>) oder falsch (<code>false / LOW</code>).
+           <br>
+           Sie kann in verschiedenen anderen Blöcken eingesetzt werden. 
+           Der Block in dieser Referenz ist für eine <b>globale</b> digitale Variable. 
+           Sie kann also im gesamten Code an unterschiedlichen Stellen verwendet werden. 
+           Zum Beispiel als <code>teste</code> Bedingung in <code>falls</code> Blöcken oder in Blöcken zum Vergleich digitaler Größen. ( <code>UND / ODER / == / != </code>).
+           <br><br>
+           Der Name der Variable kann verändert werden. 
+           Der Standardname nach dem Platzieren des Block lautet <code>digitale_Variable</code>. 
+           Wenn man mit der linken Maustaste auf den Block klickt, dann wird der Bearbeitungsmodus aktiviert und der Name kann geändert werden. 
+           Mit der Enter-Taste kann der Bearbeitungsmodus wieder verlassen werden. 
+           <br>
+           Wenn die Variable später im Code noch einmal verwendet werden soll, dann muss der Block gleich benannt werden. 
+           <br><br>
+           <b style="color: red;">Achtung: </b>Der Variablenname darf keine Umlaute (ä, ö, ü) enthalten, da die Arduino IDE den Code sonst nicht auf das Board hochladen kann. 
+         </p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>          
+            Wenn im Code mit einer digitalen Variable gearbeitet wird, dann wird einfach nur ihr Name in der entsprechenden Funktion verwendet. 
+            Da es sich hier um eine globale Variable handelt, wird diese außerhalb der <code>loop</code> Funktion initalisiert. 
+            <br><br>
+            Eine neue Variable kann initialisiert werden, indem ihr Datentyp zusammen mit dem Namen in das Programm eingefügt wird. 
+            Digitale Variablen haben den Datentyp <code>bool</code>. 
+            Bei der Initialisierung kann auch gleich ein Wert mit eingegeben werden. 
+            Die Initialisierung von <code>dig_var</code>, wenn sie als <code>LOW</code> initialisiert wird, würde so aussehen:
+            <br>
+            <code>bool dig_var = LOW;</code>
+        <p>
+</div>
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/variable_digital.png b/src/main/webapp/com/ardublock/reference/variable_digital.png
new file mode 100644
index 0000000000000000000000000000000000000000..81f9407a2c8e5cd6309ba3f9ec94af64e581fc22
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/variable_digital.png differ
diff --git a/src/main/webapp/com/ardublock/reference/variable_number.html b/src/main/webapp/com/ardublock/reference/variable_number.html
new file mode 100644
index 0000000000000000000000000000000000000000..92ab4ce0ef34c7768fbdf3b65f1c75fcc727866f
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/variable_number.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+
+<link rel="stylesheet" href="_seitenformatierung.css">
+
+<body style="margin: 0px;">
+
+<div style="border: #284a66; border-style: solid; border-width: 5px;">
+    <nav>
+    <li id="beschreibung">Block-Referenz</li>
+    <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+    <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+    </nav>
+</div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Math. Operatoren / Analog</p>
+        <h1 style="font-size: 220%;">analoge Variable</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "variable_number.png" alt="true-block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+        
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>analoge Variable</code> Block kann jeden <b>ganzen</b> Wert zwischen -32,768 und 32,768 annehmen. 
+            Er kann überall eingesetzt werden, wo eine analoge Größe eingesetzt werden kann (hexagonale Form). 
+            Zum Beispiel beim Setzen von lokalen oder globalen analogen Variablen, in Blöcken zum Vergleich analoger Größen 
+            z.B.( <code>UND / ODER / == / != / &lt; / &gt;</code> usw...), 
+            beim Setzen von analogen Ausgängen oder beim Speichern und Verarbeiten von analogen Eingangssignalen. 
+            <br><br>
+            Der Name der Variable kann verändert werden. Der Standardname nach dem Platzieren des Block lautet <code>analoge_Variable</code>. 
+            Wenn man mit der linken Maustaste auf den Block klickt, dann wird der Bearbeitungsmodus aktiviert und der Name kann geändert werden. 
+            Mit der Enter-Taste kann der Bearbeitungsmodus wieder verlassen werden.
+            <br>
+            Wenn die Variable später im Code noch einmal verwendet werden soll, dann muss der Block an der zweiten Stelle gleich benannt werden.
+         </p>
+        <h2 class="unterueberschrift" id="code">Code</h2>
+        <p>          
+            Wenn im Code mit einer analogen Variable gearbeitet wird, dann wird einfach nur ihr Name in der entsprechenden Funktion verwendet. 
+            Da es sich hier um eine globale Variable handelt, wird diese außerhalb der loop Funktion initalisiert.
+            Eine neue Variable kann initialisiert werden, indem ihr Datentyp zusammen mit dem Namen in das Programm eingefügt wird. 
+            Analoge Variablen haben den Datentyp <code>int</code>. Bei der Initialisierung kann auch gleich ein Wert mit eingegeben werden. 
+            <br>
+            Die Initialisierung von <code>var</code>, wenn sie mit dem Wert 12 initialisiert wird, würde so aussehen:
+            <br>
+            <code>int var = 12;</code>
+        <p>
+</div>
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/variable_number.png b/src/main/webapp/com/ardublock/reference/variable_number.png
new file mode 100644
index 0000000000000000000000000000000000000000..f04b3e4278d417875638e6656a88244bfea19bf8
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/variable_number.png differ
diff --git a/src/main/webapp/com/ardublock/reference/wait.html b/src/main/webapp/com/ardublock/reference/wait.html
new file mode 100644
index 0000000000000000000000000000000000000000..8074a3413a7c19c49f0326f65b74e10ee83d3c86
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/wait.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html>
+    <link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Steuerung / Warten</p>
+        <h1 style="font-size: 220%;">solange (millis)</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "wait.png" alt="wiederhole" usemap="#blockmap"></img>
+            <figcaption id="caption">Für Erklärung auf einzelne Komponenten klicken.</figcaption>
+            </figure> 
+        </div>
+        <map name="blockmap">
+            <area shape="rect" coords="17, 15, 208, 154" href="#block_beschreibung" title="Auszuführende Operation"></area>
+            <area shape="rect" coords="254, 20, 533, 60" href="#Variable" title="Variable für die Zeit"></area>
+            <area shape="rect" coords="211, 63, 435, 97" href="#millisekunden" title="Anzahl der zu wartenden Millisekunden"></area>
+        </map>
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>solange (millis)</code> Block ist eine Sonderform der Schleifen. Die Schleife wird nur eine bestimmte Zeit lang 
+            ausgeführt. Diese Zeit wird unter <code>Millisekunden</code> eingetragen. Die Variable, die hier übergeben wird muss eine ganzzahlige, 
+            <b>analoge Variable</b> sein. Wenn der Block ausgeführt wird, dann bekommt diese Variable die Zeit zu welcher der Block erreicht wurde zugewiesen. 
+            Die "Zeit" meint hier die Zeit in Millisekunden, die vergangen ist seitdem der Microcontroller mit der Ausführung des Programms begonnen hat. 
+        </p>
+        <h2 class="unterueberschrift" id="millisekunden">Millisekunden</h2>
+        <p>
+            Der <code>Millisekunden</code> Parameter gibt die Zeit in Millisekunden vor, in der die Schleife bearbeitet werden soll. Hier kann ein fester Wert oder eine Variable eingesetzt werden. 
+            Es muss sich um eine <b>ganze</b> Zahl handeln.
+        </p>        
+        <h2 class="unterueberschrift">Code</h2>
+        <p>
+            Im Code wird der Block mit einer <code>while</code> Schleife realisiert. Zuvor wird die als Parameter übergebene 
+            <code>Variable</code>, die standardmäßig "ZeitVariable" genannt wird, wird auf den aktuellen Zeitwert gesetzt. 
+            Dazu wird der Befehl <code>millis()</code> verwendet. 
+            <br><br>
+            Die Abbruchbedingung der <code>while</code> Schleife ist hier ein Vergleich der <code>ZeitVariable</code> addiert mit 
+            mit dem Parameter <code>Millisekunden</code>, der mit der neuen "aktuellen Zeit" zum Beginn des Schleifendurchgangs. 
+            Das heiß, wenn die angegebenen <code>Millisekunden</code> abgelaufen sind, wird die Schleife nicht mehr 
+            ausgeführt.
+            <br><br>
+            So würde der Code aussehen, wenn die Variable "ZeitVariable" genannt wurde und 3000 Millisekunden übergeben wurden. 
+            Unter <i>Befehle</i> werden dann natürlich die entspreschenden Befehle eingetragen, die in der Schleife ausgeführt werden sollen.
+            <br><br>
+            <code>
+                int ZeitVariable = millis(); <br>
+                while(ZeitVariable + 3000L >= millis()) {	<br>
+                    &emsp;&emsp;<i>Befehle</i><br>
+                  }</code><br>
+        </p>
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/wait.png b/src/main/webapp/com/ardublock/reference/wait.png
new file mode 100644
index 0000000000000000000000000000000000000000..3e9053823d1b49f039cf4bf86769d42763a806bc
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/wait.png differ
diff --git a/src/main/webapp/com/ardublock/reference/while-beispiel.png b/src/main/webapp/com/ardublock/reference/while-beispiel.png
new file mode 100644
index 0000000000000000000000000000000000000000..60e0977e07f621f2c6d77fc8f092ba7fbd1d8fc2
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/while-beispiel.png differ
diff --git a/src/main/webapp/com/ardublock/reference/while.html b/src/main/webapp/com/ardublock/reference/while.html
new file mode 100644
index 0000000000000000000000000000000000000000..d15e46a58f1f29511903d47ae4aa094000faf0b0
--- /dev/null
+++ b/src/main/webapp/com/ardublock/reference/while.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html>
+    <link rel="stylesheet" href="_seitenformatierung.css">
+<body style="margin: 0px;">
+
+    <div style="border: #284a66; border-style: solid; border-width: 5px;">
+        <nav>
+        <li id="beschreibung">Block-Referenz</li>
+        <div style="border: 2px, solid; margin-left: 14px;"><li> <a target="_blank, _tab" href="https://letsgoing.org/"><img id="letsgoing_logo" src="_Logo_LGI_page.png"></a> </li></div>
+        <li style="float: right;" ><a id="uebersichtbutton" href="https://blockreferenz.letsgoing.org" target="_blank, _tab">Übersicht aller Blöcke</a></li>
+        </nav>
+    </div>
+
+<div>
+    <section>
+    <div id="ueberschrift">
+        <p>Steuerung / Schleifen</p>
+        <h1 style="font-size: 220%;">solange</h1>
+    </div>
+    <div>
+        <div>
+           <figure>
+            <img id="block_bild" src = "while.png" alt="solange-Block"></img>
+            <figcaption id="caption"></figcaption>
+            </figure> 
+        </div>
+
+    </div>
+    </section>
+</div>
+
+<article>
+    <div>
+        <h2 class="unterueberschrift" id="block_beschreibung">Block</h2>
+        <p>
+            Der <code>solange</code> Block zählt zu den Schleifen. Anders jedoch als die <code>wiederhole fortlaufend</code> Schleife besitzt wie der Name schon vermuten lässt die <code>solange</code> Schleife eine Abbruchbedingung. 
+            Diese wird dem Block als <a href="#teste"><code>teste</code></a> Parameter übergeben.
+            <br>
+            Vor jedem Durchlauf der Schleife wird die <code>teste</code> Bedingung geprüft. Wenn diese nicht (mehr) erfüllt ist dann wird der Befehlssatz übersprungen und der Code uuuunter dem 
+            <code>solange</code> Block wird abgearbeitet.
+        </p>
+        <h2 class="unterueberschrift" id="teste">teste</h2>
+        <p>
+            In den <code>teste</code> Parameter wird eine Bedingung eingesetzt. Diese kann nur zwei mögliche Zustände haben. Entweder die Bedingung ist wahr (<code>TRUE</code>) oder falsch (<code>FALSE</code>). 
+            Es kann ein digitaler Eingang abgefragt werden, an dem ein Signal anliegt, dann ist dieser wahr und der Code wird ausgeführt. Wenn kein Signal anliegt und die Bedingung damit nicht erfüllt ist 
+            wird der Code unter <code>Befehle</code> übersprungen.
+            <br><br>
+            Es können auch zwei Variablen miteinander oder eine Variable mit einem festen Wert verglichen werden um einen digitalen Zustand zu erzeugen.
+        </p>
+        <h2 class="unterueberschrift">Befehle</h2>
+        <p>
+            In den <code>Befehle</code> Abschnitt kann eine Folge von weiteren Blöcken zu Anweisung von Befehlen eingefügt werden. 
+            Dies kann zum Beispiel ein <code>digitalWrite</code> Block sein, der einen Pin <code>HIGH</code> oder <code>LOW</code> schält oder eine Variable, die gesetzt werden soll 
+            oder sogar weitere <code>solange</code> Blöcke.
+            <br><br>
+            <b>Beachte:</b> Der Code, welcher unter <code>Befehle</code> eingefügt wird, <b>solange</b> ausgeführt wie die Bedingung unter <code>teste</code> wahr ist.
+            Der Befehlssatz kann sich also beliebig oft wiederholen. Sogar unendlich oft, wenn sich die <code>teste</code> Bedingung nicht auf <code>FALSE</code> ändert. 
+            Dies wäre zum Beispiel der Fall, wenn man als <code>teste</code> bedingung einfach ein <code>TRUE</code> einsetzen würde. 
+        </p>
+        <h2 class="unterueberschrift">Beispiel</h2>
+        <p>
+            In diesem Beispiel wird der <code>setze analoge Variable</code> Block verwendet. 
+            <br>
+            Nun wollen wir diese Variable bis auf einen Wert von 100 immer jeweils um 1 hochzählen lassen, wenn sie kleiner als 100 ist. 
+            Die Abbruchbedingung ist also, dass die Variable größer oder gleich 100 ist
+            Im Befehlssatz wird die Variable dann pro Durchlauf um 1 hochgezählt. 
+            <br>
+            Wenn sie die 99 erreicht hat läuft die Schleife dann das letzte mal durch, hier ist die Bedingung das letzte mal erfüllt ist, da gilt 100&lt;100 = falsch.
+            In AurduBlock würde das dann so aussehen:
+            <br><br>
+            <img src="while-beispiel.png" alt="beispiel-zum-solange-block">
+            <br><br>
+            Im Code würde das Beispiel dann folgendermaßen aussehen:
+            <br><br>
+            <code>
+                while(var &lt; 100){ <br>
+                &emsp;&emsp;var = (var + 1); <br>
+                  } <br>
+            </code> <br>
+        </p>
+        
+        <h2 class="unterueberschrift">Code</h2>
+        <p>
+            Im Code für den Arduino wird der Baustein mit <code>while(teste){Befehle}</code> umgesetzt.
+            Die Bedingung wird hier in die runden Klammern () und die Befehle in die geschweiften Klammern {} geschrieben.
+        </p>
+    </div>
+    
+</article>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/src/main/webapp/com/ardublock/reference/while.png b/src/main/webapp/com/ardublock/reference/while.png
new file mode 100644
index 0000000000000000000000000000000000000000..c3488ec570d5abe5e511ddba59d190238b0e52e6
Binary files /dev/null and b/src/main/webapp/com/ardublock/reference/while.png differ