|
|
@@ -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
|
Michael Zitzmann