added help site

src/App.css

@@ -4,7 +4,11 @@
 }
 
 #content{
+  margin-bottom: 60px;
+}
 
+#content ul{
+  list-style: none;
 }
 
 .dx-datagrid-focus-overlay{
@@ -45,7 +49,6 @@ hr{
 
 #idmtResultSteps{
   display: inline-block;
-  margin-bottom: 45px;
 }
 
 footer{

src/App.js

@@ -4,6 +4,7 @@ import {BrowserRouter, Route, Switch } from "react-router-dom";
 import Home from "./Home.js";
 import Addition from "./Addition.js";
 import Subtraction from "./Subtraction.js";
+import Help from "./Help.js";
 
 import Navigation from "./Navigation.js";
 import Footer from "./Footer.js";
@@ -22,6 +23,7 @@ function App() {
           <Route exact path="/" component={Home} />
           <Route path="/addition" component={Addition} />
           <Route path="/subtraction" component={Subtraction} />
+          <Route path="/help" component={Help} />
           <Route component={Error} />
         </Switch>
       </BrowserRouter>

src/Help.js

@@ -0,0 +1,61 @@
+import React from "react";
+
+function Help() {
+  return (
+    <div id="content">
+      <h1>Hilfe</h1>
+
+      <h2>1. Navigation</h2>
+      <p>
+        Um die MAWEN Web App zu starten, gehen Sie bitte zu einer der Rechenarten:
+      </p>
+
+      <ul>
+        <a href="/addition"><li>Addition</li></a>
+        <a href="/subtraction"><li>Subtraktion</li></a>
+      </ul>
+
+      <h2>2. Eingabe der Rechnung</h2>
+      <p>
+        Dort k&ouml;nnen Sie dann im Eingabefeld eine Rechnung wie beispielsweise "1.4+34" oder "98-3.2" eingeben.
+        Die Rechnung kann dabei beliebig viele Zahlen enthalten, allerdings m&uuml;ssen die Zahlen immer mit demselben Rechenzeichen verbunden sein.
+        Mit dem Button "berechnen" oder mit Hilfe der Enter Taste wir die Kalkulation begonnen.
+        Bitte beachten Sie bei der Eingabe auch, dass derzeit bei der Subtraktion keine negativen Ergebnisse m&ouml;glich sind.
+      <br/>
+        Nach der Eingabe werden die einzelnen Zahlen untereinander ausgebeben und k&ouml;nnen mit Hilfe der Pfeiltasten oder der Tab-Taste navigiert werden.
+        Unter den Zahlen befindet sich das Feld f&uuml;r das Ergebnis, das anfangs nat&uuml;rlich noch leer ist.
+      </p>
+
+
+      <h2>3. Stellenweises L&ouml;sen der Rechnung</h2>
+      <p>
+        F&uuml;r jede Stelle der eingegeben Zahlen erscheinen nacheinander ein Eingabefeld f&uuml;r das Ergebnis und f&uuml;r den &Uuml;bertrag.
+        Mit der Tab-Taste kann zwischen den beiden Eingabefeldern navigiert werden.
+        Nach Eingabe des &Uuml;bertrags, erscheinen automatisch die beiden Eingabefelder der n&auml;chsten Stelle und der Fokus r&uuml;ckt in das erste Feld.
+      </p>
+
+
+      <h2>4. &Uuml;berpr&uuml;fung</h2>
+      <p>
+        Wenn alle Eingabefelder ausgef&uuml;llt wurden, erscheint ein Overlay in dem ausgew&auml;hlt werden muss, ob das Ergebnis abgesendet werden soll oder vorher nochmal &uuml;berpr&uuml;ft werden soll.
+        Wird die &Uuml;berpr&uuml;fung ausgew&auml;hlt, erscheinen unter der Zahlenbox die einzelnen Rechnungsschritte.
+        Bei jedem Schritt wird das davor berechnete Ergebnis, der &Uuml;bertrag und ob die Eingabe richtig oder falsch war, angezeigt.
+      </p>
+
+
+      <h2>5. Absenden des Ergebnisses</h2>
+      <p>
+        Unter den Rechenschritten befindet sich ein Button um das Ergebnis abzusenden.
+        Das berechnete Ergebnis wird dann in die Box mit den Zahlen in der letzten Zeile erg&auml;nzt.
+        Unter der Box wird gezeigt ob das Ergebnis richtig oder falsch ist.
+        Das Ergebnis wird genauso angezeigt, wenn beim Overlay "abgeben" statt "&uuml;berpr&uuml;fen" ausgew&auml;hlt wird, das hei&szlig;t, es wird einfach die &Uuml;berpr&uuml;fung &uuml;bersprungen.
+      </p>
+
+      <p>
+        Um die Eingabe zu korrigieren oder eine neue Rechnung zu beginnen, muss die Seite neu geladen werden.
+      </p>
+    </div>
+  );
+}
+
+export default Help;

src/Home.js

@@ -3,9 +3,14 @@ import React from "react";
 function Home() {
   return (
     <div id="content">
-      <h1>Welcome to the MAWEN Web App</h1>
-      <p> Mawen is short for Math Ex </p>
-      <p> To start with the addition please press ctrl + 1 </p>
+      <h1>Willkommen bei der MAWEN Web App</h1>
+      <p> Mawen bedeutet "Math Working environment" </p>
+      <p> Derzeit sind zwei Grundrechnungsarten verf&uuml;gbar:&nbsp;
+        <a href="/addition">Addition</a>
+        &nbsp;und&nbsp;
+        <a href="/subtraction">Subtraction</a>
+        &nbsp;
+      </p>
     </div>
   );
 }

src/Navigation.js

@@ -36,6 +36,11 @@ const Navigation = (props) => {
               Subtraktion
             </NavLink>
           </NavItem>
+          <NavItem>
+            <NavLink href="/help">
+              Hilfe
+            </NavLink>
+          </NavItem>
         </Nav>
       </Collapse>