doc/01_introduction.md

@@ -1,6 +1,9 @@
 % Dokumentation
 % Tabea David <tabea.david@kf-interactive.com>; zitzmann@mpib-berlin.mpg.de
 
+<link rel="stylesheet" href="css/cssgithub-markdown.css" />
+<link rel="stylesheet" href="css/github-syntax-highlight.css" />
+
 ## Inhalt
 
 - [Einführung](#einführung)

doc/03_module.md

@@ -49,11 +49,13 @@ Für einen besseren Überblick sind die Quell-Dateien mit kurzen Beschreibungen
     └── validator.js          // Funktionen zur Validierung der Benutzerantworten
 ```
 
-### Wie ändere ich Inhalte und Daten?
+### Wie ändere ich Bezeichner und Datenbasis?
+
+Um den Benutzern den Vergleich zu anderen zu ermöglichen, wird die Anbindung an eine Datenbank ermöglicht. Diese ist über eine API anzusprechen, die im Abschnitt "Online Version" dokumentiert ist. Es ist aber genauso möglich, auf diese Datenbankanbindung zu verzichten und stattdessen nur "lokale" Daten zu nutzen. Die dafür relevanten Dateien sind unter "Offline Version" dokumentiert.
 
 #### *Offline* Version
 
-Die Inhalte und Daten der 'offline'-Version sind in den `json`-Dateien Dateien unter `src/js/content` definiert.
+Die "lokalen" Inhalte und Daten sind in den `json`-Dateien Dateien unter `src/js/content` definiert.
 
 #### Labels
 
@@ -112,103 +114,84 @@ Zu jeder Aufgabe sind Metadaten definiert, wie die ID der Aufgabe, Titel (`text`
       ]
     }
 
-Es existieren drei verschiedene Aufgabentypen, wobei für die Verifikation der Antworten der ersten beiden Aufgabentypen spezifische Validierungsfunktionen definiert sind. Diese werden im Folgenden kurz beschrieben, die Details der Implementierung sind in `src/js/validator.js` dokumentiert.
-
 **1. Finden eines bestimmten x- oder y-Wertes eines Graphen z**
 
 Die Antworten dieses Typs bestehen aus einem Label (`"antwort"`) und Koordinaten für den entsprechenden Punkt, z.B.:
 
     {
       "antwort": "15 Millionen",
+      "korrekt": false,
       "coordinates": {"x": "Q4/2016", "y": 15.00}
     }
 
-Zur Validierung der Antworten sind drei Funktionen defniert:
-
-- `validateX`: ein gegebener x-Wert wird verglichen mit dem x-Wert des Graphen, an dem ein y-Wert einen Schwellwert erstmals über- oder unterschreitet.
-
-
-    "validation": {
-      "function": "validateX",
-      "graph": "Citroniger",
-      "threshold": 0,
-      "comparator": "gt"
-    }
-
-Dabei gibt `graph` den betrachteten Graphen an, `x` bezeichnet den gefragten x-Wert des Graphen, `threshold` definiert den gefragten Schwellwert und mit dem Wert von `comparator` wird festgelegt, ob der gesuchte Wert über (`gt`) oder unter (`lt`) dem Schwellwert liegen soll.
+**2. Beurteilung und Vergleich der Entwicklung der Graphen (negative / positive / unbeständige Entwicklung, Mittelwert)**
 
-- `validateY`: ein gegebener y-Wert wird verglichen mit dem y-Wert des Graphen an der Stelle des gefragten x-Werts.
+Bei diesem Aufgabentyp soll der Graph benannt werden, der die gefragte Eigenschaft besitzt:
 
+    {
+      "antwort": "Apfelreich",
+      "korrekt": true
+    },
 
-    "validation": {
-      "function": "validateY",
-      "graph": "Citroniger",
-      "x": "Q4/2016"
-    }
+**3. Manipulation des Graphen, so dass im betrachteten Teilsegment die grafische Wirkung der Steigung / des Gefälles verstärkt bzw. abgeschwächt wird.**
 
-Der betrachtete Graph wird unter `graph` angegeben, und `x` bezeichnet den x-Wert des Graphen, an dessen Stelle die Validierung der gegebenen Antwort (y-Wert) durchgeführt werden soll.
+Bei diesem Aufgabentyp sollen Graphen so manipuliert werden, dass im betrachteten Teilsegment die grafische Wirkung der Steigung / des Gefälles verstärkt bzw. abgeschwächt wird. Dies geschieht durch das Verändern der Grenzen einer Auswahl, das vertikale und horizontale Skalieren der Graphen basierend auf der gewählten Auswahl.
 
-- `validateGradientExtremum`: die Gradienten von benachbarten x-Werten des Graphen werden berechnet und das Maximum bzw. Minimum bestimmt. Der ermittelte x-Wert wird verglichen mit dem übergebenen x-Wert.
+Die Steigung wird grafisch visualisiert, sobald sich beide Punkte gleichzeitig innerhalb des Auswahlbereichs und des sichtbaren Bereichs befinden. Wurde der Graph so transformiert, dass die betrachtete Steigung innerhalb der Grenzwerte liegt, dann wird die Steigungsstrecke grün gefärbt und der Button zum fortfahren zur nächsten Aufgabe eingeblendet. Die Grenzwerte sind mit der Aufgabe definiert in der `json`-Datei als `anstiegUntereGrenze` und `anstiegObereGrenze`. Die Grenzen des betrachteten Intervalls werden mit `untereGrenze` und `obereGrenze` festgelegt.
 
+#### *Online* Version
 
-    "validation": {
-      "function": "validateGradientExtremum",
-      "extremum": "max",
-      "graph": "Citroniger"
-    }
+Die Konfiguration für den Zugriff auf die API ist in `src/js/config.js` definiert.
+Ein Request wird zusammengesetzt aus der URL der API, einem Endpunkt und optionalen Informationen, die je nach HTTP Methode als Parameter der URL angehängt werden, oder im *Message Body* des Requests verschickt werden.
 
+##### Anwendungsdaten
 
-Der betrachtete Graph wird durch `graph` angegeben und `extremum` gibt an, ob das Minimum oder Maximum gebildet werden soll (`min` bzw. `max`).
+1. Abfrage aller Aufgaben in einer Liste. Die Ordnung (Id) entspricht der Ordnung der in der Excel-Datei abgelegten Liste. Aufgaben sind zusätzlich qualifiziert durch "Gruppe" (int) und "Item" (string), aus denen der Name konstruiert wird (Gruppe=2, Item="c" => Name="Frage 2c")
 
-**2. Beurteilung und Vergleich der Entwicklung der Graphen (negative / positive / unbeständige Entwicklung, Mittelwert)**
+`GET api/M2_Aufgaben/Liste`
 
-Bei diesem Aufgabentyp soll der Graph benannt werden, der die gefragte Eigenschaft besitzt. Um die Robustheit der WebApp nicht zu gefährden, und die Konsistenz mit anderen Aufgabentypen zu erhalten / erreichen, wird der Wert von `antwort` weiterhin als Label für die grafische Ausgabe, der Wert von `graph` wird dagegen für die Validierung verwendet. Im folgenden Beispiel sind beide Werte \*zufälligerweise\* identisch, es fällt aber nicht schwer, sich Szenarien vorzustellen, in denen diese Trennung sinvoll sein kann.
+2. Abfrage einer spezifischen Aufgabe
 
-    {
-      "antwort": "Apfelreich",
-      "graph": "Apfelreich"
-    },
+`GET api/M2_Aufgaben/ById/{id}`
 
+3. Abfrage einer Liste von Aufgaben, die zu einer bestimmten Gruppe gehören
 
-- `validateProgressionExtremumGraph`: der übergebene Graph-Bezeicher wird mit dem des Graphen mit extemen Verlauf (positiv / negativ) über den betrachteten Zeitraum verglichen.
+`GET api/M2_Aufgaben/Gruppe?gruppe={gruppe}`
 
+Abfrage einer durch eine Gruppe und Item qualifizierte Aufgabe????
 
-    "validation": {
-      "function": "validateProgressionExtremumGraph",
-      "extremum": "min"
-    }
+`GET api/M2_Aufgaben/Auswahl?gruppe={gruppe}&item={item}`
 
-Der einzige konfigurierbare Parameter `extremum` bestimmt, ob die Benutzereingabe gegen den Graphen mit dem maximalen (`max`) oder minimalen (`min`) Verlaufswert validiert werden soll. Dieser Wert wird einfach durch die Bildung der Differenz der y-Werte an Anfang und Ende des betrachteten Intervalls ermittelt.
+##### Benutzerdaten
 
-- `validateAverageExtremumGraph`: Diese Funktion ermittelt den Graphen, dessen Werte über dem betrachteten Intervall den größten oder kleinsten Durchschnitt bilden und überprüft, ob der übergebene Graph-Bezeichner diesem entspricht.
+1. Abfrage aller Benutzer-Daten
 
+`GET api/M2_AufgabenUserData/Liste`
 
-    "validation": {
-      "function": "validateAverageExtremumGraph",
-      "extremum": "max"
-    }
+2. Abfrage eines spezifischen Benutzer-Datensatzes
 
-Der Parameter `extremum` bestimmt, ob der maximale (`max`) oder minimale (`min`) Durchschnitt betrachtet werden soll.
+`GET api/M2_AufgabenUserData/ById/{id}`
 
-- `validateVolatilityExtremumGraph`: der gegebene Graph-Bezeichner wird gegen den des Graphen mit extremer Volatilität validiert.
+3. Abfrage aller Daten für einen bestimmten Benutzer
 
+`GET api/M2_AufgabenUserData/ByUserId?userId={userId}`
 
-    "validation": {
-      "function": "validateVolatilityExtremumGraph",
-      "extremum": "max"
-    }
+4. Gibt die UserData für eine durch eine Gruppe und Item qualifizierte Aufgabe zurück
 
+`GET api/M2_AufgabenUserData/ByAufgabe?gruppe={gruppe}&item={item}`
 
-Diese Funktion ermittelt zunächst die Schwankung innerhalb jedes Graphen, indem die Differenzen zwischen benachbarten y-Werten gebildet und deren Beträge aufsummiert werden. Der Parameter `extremum` bestimmt, ob die Lösung der Aufgabe die maximale (`max`) oder minimale (`min`) Schwankung aufweisen soll.
+5. Gibt die UserData für eine durch die AufgabeId qualifizierte Aufgabe zurück
 
-**3. Manipulation des Graphen, so dass im betrachteten Teilsegement die grafische Wirkung der Steigung / des Gefälles verstärkt bzw. abgeschwächt wird.**
+`GET api/M2_AufgabenUserData/ByAufgabeId?aufgabeId={aufgabeId}`
 
-Bei diesem Aufgabentyp sollen Graphen so manipuliert werden, dass im betrachteten Teilsegement die grafische Wirkung der Steigung / des Gefälles verstärkt bzw. abgeschwächt wird. Dies geschieht durch das Verändern der Grenzen einer Auswahl, das vertikale und horizontale Skalieren der Graphen basierend auf der gewählten Auswahl.
+6. Gibt für alle Fragen die Anteile korrekter und falscher Antworten zurück
 
-Die Steigung wird grafisch visualisiert, sobald sich beide Punkte gleichzeitig innerhalb des Auswahlbereichs und des sichtbaren Bereichs befinden. Wurde der Graph so transformiert, dass die betrachtete Steigung innerhalb der Grenzwerte liegt, dann wird die Steigungsstrecke grün gefärbt und der Button zum fortfahren zur nächsten Aufgabe eingeblendet. Die Grenzwerte sind mit der Aufgabe definiert in der `json`-Datei als `anstiegUntereGrenze` und `anstiegObereGrenze`. Die Grenzen des betrachteten Intervalls werden mit `untereGrenze` und `obereGrenze` festgelegt.
+`GET api/M2_AufgabenUserData/Proportions`
 
+7. Gibt für eine bestimmte Frage die Anteile korrekter und falscher Antworten zurück
 
+`GET api/M2_AufgabenUserData/ProportionsByAufgabeId?aufgabeId={aufgabeId}`
 
-#### *Online* Version
+8. Erzeugt einen neuen Datenrecord in der M2_AufgabeUserData-Tabelle. Dabei sind die Angaben der AufgabeId und der UserId erforderlich, um die Antworten einer Aufgabe/einem User zuordnen zu können. Die Id wird nicht spezifiziert, da diese von der Datenbank automatisch zugewiesen wird
 
-<API-Dokumentation>
+`POST api/M2_AufgabenUserData/Create`

package.json

@@ -1,6 +1,7 @@
 {
-  "name": "understanding-graphs",
+  "name": "manipulating-graphs",
   "version": "1.0.0",
+  "description": "Wie werden Finanzstatistiken verzerrt?",
   "author": "Tabea David <tabea.david@kf-interactive.com>, zitzmann@mpib-berlin.mpg.de",
   "browserslist": [
     "last 2 versions",

readme.md

@@ -1,5 +1,7 @@
-Inhalt
-------
+`<link rel="stylesheet" href="css/cssgithub-markdown.css" />`{=html}
+`<link rel="stylesheet" href="css/github-syntax-highlight.css" />`{=html}
+
+## Inhalt
 
 -   [Einführung](#einführung)
 -   [Übersicht der Module](#übersicht-der-module)
@@ -11,8 +13,7 @@ Inhalt
 -   [Bilddateien](#bilddateien)
 -   [Entwicklungshistorie](#entwicklungshistorie)
 
-Einführung
-----------
+## Einführung
 
 Das Projekt [RisikoAtlas](https://risikoatlas.de) hat die Förderung der
 Risikokompetenz zum Ziel. Zu diesem Zweck wurden am Harding-Zentrum für
@@ -27,8 +28,7 @@ Modul ist eines dieser sechs Lernmodule.
 Die Lernmodule wurden ursprünglich entwickelt von [kf
 interactive](https://www.kf-interactive.com).
 
-Übersicht der Module
---------------------
+## Übersicht der Module
 
 Die folgende Liste gibt einen Überblick über die Ziele der Module:
 
@@ -46,8 +46,7 @@ speichern andererseits Antworten der Benutzer, um ihnen den Vergleich zu
 Anderen zu ermöglichen. Für jedes dieser Module existiert auch eine
 offline-Version, die ausschließlich auf lokale Daten zugreift.
 
-Verzeichnisstruktur
--------------------
+## Verzeichnisstruktur
 
 Im Wurzelverzeichnis liegen die für den Build Prozess notwendigen
 Konfigurationsdateien. Das Verzeichnis `doc/` enthält detailliertere
@@ -78,8 +77,7 @@ Die grobe Struktur sieht folgendermaßen aus:
     │   └── scss             // Sass stylesheets
     └── tasks/               // Definitionen für den gulp Build-Prozess
 
-Modul 2: Diagramme verstehen
-----------------------------
+## Modul 2: Diagramme verstehen
 
 Dieses Modul stellt ein interaktives Werkzeug als Hilfe zur Verbesserung
 des Verständnisses von Diagrammen bereit.\
@@ -136,12 +134,19 @@ Beschreibungen aufgelistet:
         ├── randomizer.js
         └── validator.js          // Funktionen zur Validierung der Benutzerantworten
 
-### Wie ändere ich Inhalte und Daten?
+### Wie ändere ich Bezeichner und Datenbasis?
+
+Um den Benutzern den Vergleich zu anderen zu ermöglichen, wird die
+Anbindung an eine Datenbank ermöglicht. Diese ist über eine API
+anzusprechen, die im Abschnitt "Online Version" dokumentiert ist. Es ist
+aber genauso möglich, auf diese Datenbankanbindung zu verzichten und
+stattdessen nur "lokale" Daten zu nutzen. Die dafür relevanten Dateien
+sind unter "Offline Version" dokumentiert.
 
 #### *Offline* Version
 
-Die Inhalte und Daten der 'offline'-Version sind in den `json`-Dateien
-Dateien unter `src/js/content` definiert.
+Die "lokalen" Inhalte und Daten sind in den `json`-Dateien Dateien unter
+`src/js/content` definiert.
 
 #### Labels
 
@@ -213,12 +218,6 @@ sind die Koordinaten und Metadaten der Graphen enthalten.
       ]
     }
 
-Es existieren drei verschiedene Aufgabentypen, wobei für die
-Verifikation der Antworten der ersten beiden Aufgabentypen spezifische
-Validierungsfunktionen definiert sind. Diese werden im Folgenden kurz
-beschrieben, die Details der Implementierung sind in
-`src/js/validator.js` dokumentiert.
-
 **1. Finden eines bestimmten x- oder y-Wertes eines Graphen z**
 
 Die Antworten dieses Typs bestehen aus einem Label (`"antwort"`) und
@@ -226,102 +225,27 @@ Koordinaten für den entsprechenden Punkt, z.B.:
 
     {
       "antwort": "15 Millionen",
+      "korrekt": false,
       "coordinates": {"x": "Q4/2016", "y": 15.00}
     }
 
-Zur Validierung der Antworten sind drei Funktionen defniert:
-
--   `validateX`: ein gegebener x-Wert wird verglichen mit dem x-Wert des
-    Graphen, an dem ein y-Wert einen Schwellwert erstmals über- oder
-    unterschreitet.
-
-    "validation": { "function": "validateX", "graph": "Citroniger",
-    "threshold": 0, "comparator": "gt" }
-
-Dabei gibt `graph` den betrachteten Graphen an, `x` bezeichnet den
-gefragten x-Wert des Graphen, `threshold` definiert den gefragten
-Schwellwert und mit dem Wert von `comparator` wird festgelegt, ob der
-gesuchte Wert über (`gt`) oder unter (`lt`) dem Schwellwert liegen soll.
-
--   `validateY`: ein gegebener y-Wert wird verglichen mit dem y-Wert des
-    Graphen an der Stelle des gefragten x-Werts.
-
-    "validation": { "function": "validateY", "graph": "Citroniger", "x":
-    "Q4/2016" }
-
-Der betrachtete Graph wird unter `graph` angegeben, und `x` bezeichnet
-den x-Wert des Graphen, an dessen Stelle die Validierung der gegebenen
-Antwort (y-Wert) durchgeführt werden soll.
-
--   `validateGradientExtremum`: die Gradienten von benachbarten x-Werten
-    des Graphen werden berechnet und das Maximum bzw. Minimum bestimmt.
-    Der ermittelte x-Wert wird verglichen mit dem übergebenen x-Wert.
-
-    "validation": { "function": "validateGradientExtremum", "extremum":
-    "max", "graph": "Citroniger" }
-
-Der betrachtete Graph wird durch `graph` angegeben und `extremum` gibt
-an, ob das Minimum oder Maximum gebildet werden soll (`min` bzw. `max`).
-
 **2. Beurteilung und Vergleich der Entwicklung der Graphen (negative /
 positive / unbeständige Entwicklung, Mittelwert)**
 
 Bei diesem Aufgabentyp soll der Graph benannt werden, der die gefragte
-Eigenschaft besitzt. Um die Robustheit der WebApp nicht zu gefährden,
-und die Konsistenz mit anderen Aufgabentypen zu erhalten / erreichen,
-wird der Wert von `antwort` weiterhin als Label für die grafische
-Ausgabe, der Wert von `graph` wird dagegen für die Validierung
-verwendet. Im folgenden Beispiel sind beide Werte \*zufälligerweise\*
-identisch, es fällt aber nicht schwer, sich Szenarien vorzustellen, in
-denen diese Trennung sinvoll sein kann.
+Eigenschaft besitzt:
 
     {
       "antwort": "Apfelreich",
-      "graph": "Apfelreich"
+      "korrekt": true
     },
 
--   `validateProgressionExtremumGraph`: der übergebene Graph-Bezeicher
-    wird mit dem des Graphen mit extemen Verlauf (positiv / negativ)
-    über den betrachteten Zeitraum verglichen.
-
-    "validation": { "function": "validateProgressionExtremumGraph",
-    "extremum": "min" }
-
-Der einzige konfigurierbare Parameter `extremum` bestimmt, ob die
-Benutzereingabe gegen den Graphen mit dem maximalen (`max`) oder
-minimalen (`min`) Verlaufswert validiert werden soll. Dieser Wert wird
-einfach durch die Bildung der Differenz der y-Werte an Anfang und Ende
-des betrachteten Intervalls ermittelt.
-
--   `validateAverageExtremumGraph`: Diese Funktion ermittelt den
-    Graphen, dessen Werte über dem betrachteten Intervall den größten
-    oder kleinsten Durchschnitt bilden und überprüft, ob der übergebene
-    Graph-Bezeichner diesem entspricht.
-
-    "validation": { "function": "validateAverageExtremumGraph",
-    "extremum": "max" }
-
-Der Parameter `extremum` bestimmt, ob der maximale (`max`) oder minimale
-(`min`) Durchschnitt betrachtet werden soll.
-
--   `validateVolatilityExtremumGraph`: der gegebene Graph-Bezeichner
-    wird gegen den des Graphen mit extremer Volatilität validiert.
-
-    "validation": { "function": "validateVolatilityExtremumGraph",
-    "extremum": "max" }
-
-Diese Funktion ermittelt zunächst die Schwankung innerhalb jedes
-Graphen, indem die Differenzen zwischen benachbarten y-Werten gebildet
-und deren Beträge aufsummiert werden. Der Parameter `extremum` bestimmt,
-ob die Lösung der Aufgabe die maximale (`max`) oder minimale (`min`)
-Schwankung aufweisen soll.
-
-**3. Manipulation des Graphen, so dass im betrachteten Teilsegement die
+**3. Manipulation des Graphen, so dass im betrachteten Teilsegment die
 grafische Wirkung der Steigung / des Gefälles verstärkt bzw.
 abgeschwächt wird.**
 
 Bei diesem Aufgabentyp sollen Graphen so manipuliert werden, dass im
-betrachteten Teilsegement die grafische Wirkung der Steigung / des
+betrachteten Teilsegment die grafische Wirkung der Steigung / des
 Gefälles verstärkt bzw. abgeschwächt wird. Dies geschieht durch das
 Verändern der Grenzen einer Auswahl, das vertikale und horizontale
 Skalieren der Graphen basierend auf der gewählten Auswahl.
@@ -338,10 +262,78 @@ Grenzen des betrachteten Intervalls werden mit `untereGrenze` und
 
 #### *Online* Version
 
-`<API-Dokumentation>`{=html}
+Die Konfiguration für den Zugriff auf die API ist in `src/js/config.js`
+definiert. Ein Request wird zusammengesetzt aus der URL der API, einem
+Endpunkt und optionalen Informationen, die je nach HTTP Methode als
+Parameter der URL angehängt werden, oder im *Message Body* des Requests
+verschickt werden.
+
+##### Anwendungsdaten
+
+1.  Abfrage aller Aufgaben in einer Liste. Die Ordnung (Id) entspricht
+    der Ordnung der in der Excel-Datei abgelegten Liste. Aufgaben sind
+    zusätzlich qualifiziert durch "Gruppe" (int) und "Item" (string),
+    aus denen der Name konstruiert wird (Gruppe=2, Item="c" =\>
+    Name="Frage 2c")
+
+`GET api/M2_Aufgaben/Liste`
+
+2.  Abfrage einer spezifischen Aufgabe
+
+`GET api/M2_Aufgaben/ById/{id}`
+
+3.  Abfrage einer Liste von Aufgaben, die zu einer bestimmten Gruppe
+    gehören
+
+`GET api/M2_Aufgaben/Gruppe?gruppe={gruppe}`
+
+Abfrage einer durch eine Gruppe und Item qualifizierte Aufgabe????
+
+`GET api/M2_Aufgaben/Auswahl?gruppe={gruppe}&item={item}`
+
+##### Benutzerdaten
+
+1.  Abfrage aller Benutzer-Daten
+
+`GET api/M2_AufgabenUserData/Liste`
+
+2.  Abfrage eines spezifischen Benutzer-Datensatzes
+
+`GET api/M2_AufgabenUserData/ById/{id}`
+
+3.  Abfrage aller Daten für einen bestimmten Benutzer
+
+`GET api/M2_AufgabenUserData/ByUserId?userId={userId}`
+
+4.  Gibt die UserData für eine durch eine Gruppe und Item qualifizierte
+    Aufgabe zurück
+
+`GET api/M2_AufgabenUserData/ByAufgabe?gruppe={gruppe}&item={item}`
+
+5.  Gibt die UserData für eine durch die AufgabeId qualifizierte Aufgabe
+    zurück
+
+`GET api/M2_AufgabenUserData/ByAufgabeId?aufgabeId={aufgabeId}`
+
+6.  Gibt für alle Fragen die Anteile korrekter und falscher Antworten
+    zurück
+
+`GET api/M2_AufgabenUserData/Proportions`
+
+7.  Gibt für eine bestimmte Frage die Anteile korrekter und falscher
+    Antworten zurück
+
+`GET api/M2_AufgabenUserData/ProportionsByAufgabeId?aufgabeId={aufgabeId}`
+
+8.  Erzeugt einen neuen Datenrecord in der M2_AufgabeUserData-Tabelle.
+    Dabei sind die Angaben der AufgabeId und der UserId erforderlich, um
+    die Antworten einer Aufgabe/einem User zuordnen zu können. Die Id
+    wird nicht spezifiziert, da diese von der Datenbank automatisch
+    zugewiesen wird
+
+`POST api/M2_AufgabenUserData/Create`
 
-Build Tool Chain
-----------------
+## Build Tool Chain
 
 In diesem Abschnitt werden die technischen Voraussetzungen für die
 Erstellung von im Browser lauffähigem Code und und die Installation und
@@ -464,8 +456,7 @@ verwendet:
 Die zugehörigen Konfigurationsdateien befinden sich im Root-Verzeichnis,
 wie oben in der Auflistung angegeben.
 
-Javascript
-----------
+## Javascript
 
 ### Verwendete Bibliotheken
 
@@ -501,8 +492,7 @@ für die D3-Visualisierungen befindet sich unter `d3`.
     ├── d3/                 // d3 Module
     └── utilities/          // Verzeichnis für Hilfs-Bibliotheken und Werkzeuge
 
-Sass
-----
+## Sass
 
 Zum Kompilieren von Sass zu CSS wird `gulp-sass` verwendet, das
 `node-sass` benutzt, welches wiederum auf `libsass` basiert. `node-sass`
@@ -550,8 +540,7 @@ CSS automatisch durch
 Liste der zu unterstützenden Browser ist in `package.json` unter
 `browserslist` zu finden.
 
-Bilddateien
------------
+## Bilddateien
 
 Alle in diesem Projekt verwendeten Bilddateien befinden sich unter
 `src/img/`.
@@ -570,8 +559,7 @@ finden. Für die Unterstützung von Fragmentbezeichnern (*fragment
 identifier*) in Internet Explorer wird
 [svgxuse](https://github.com/Keyamoon/svgxuse) verwendet.
 
-Entwicklungshistorie
---------------------
+## Entwicklungshistorie
 
 Ursprünglich wurde dieses Modul als Auftragsarbeit von einer externen
 Firma entwickelt. Unglücklicherweise wurden während der

src/js/components/Index.jsx

@@ -205,11 +205,11 @@ export default class App extends Component {
       correctAnswer = answer;
     }
 
-    points.correct = correctAnswer.coordinates;
+    points.correct = correctAnswer.koordinate;
 
     // If answer is not correct display both solution, and answer
     if (!answer.korrekt) {
-      points.incorrect = question.antworten[index].coordinates;
+      points.incorrect = question.antworten[index].koordinate;
     }
 
     return points;

src/js/config.js

@@ -5,7 +5,9 @@ export default {
     create: 'M2_AufgabenUserData/Create',
     list: 'M2_Aufgaben/Liste',
     proportions: 'M2_AufgabenUserData/ProportionsByAufgabeId',
-    url: 'https://www.adaptivetoolbox.net/risikoatlas/api/'
+    url: 'https://www.adaptivetoolbox.net/risikoatlas/api/',
+    user: 'jens.becker%40kf-interactive.com',
+    pwd: 'P4ssw0rd%21'
   },
   fonts: {
     default: {

src/js/utilities/api.js

@@ -75,7 +75,7 @@ const api = {
     const myInit = {
       headers: requestHeaders,
       method: 'post',
-      body: 'grant_type=password&username=jens.becker%40kf-interactive.com&password=P4ssw0rd%21'
+      body: `grant_type=password&username=${config.api.user}&password=${config.api.pwd}`
     };
 
     requestHeaders.append('Content-Type', 'application/x-www-form-urlencoded');

src/js/utilities/randomizer.js

@@ -1,5 +1,3 @@
-// random utility
-
 // generate a random key (string)
 const generateKey = (prefix) => {
   let text = '';