estimating-trends/doc/03_module.md

Modul 3: Trends schätzen

Dieses Modul stellt ein interaktives Werkzeug als Hilfe zur Verbesserung des Verständnisses von Diagrammen bereit.
Dazu werden den Nutzern Multiple-Choice-Fragen zu Charakteristiken des gezeigten Graphen präsentiert. Die Lösung und gegebenenfalls die falsch gewählte Antwort werden grafisch hervorgehoben. Ein zweiter Typ von Test ermöglicht es den Nutzern, Teile des Diagramms auszuwählen und zu skalieren, um einen in der Frage vorgegebenen Effekt zu erzielen. Dies soll zeigen, wie einfache Manipulationen die Interpretation von Graphen beeinflussen können. Erst wenn eine korrekte Lösung gefunden wurde, kann zur folgenden Aufgabe weitergegangen werden.

Javascript Verzeichnisstruktur

Für einen besseren Überblick sind die Quell-Dateien mit kurzen Beschreibungen aufgelistet:

├── main.jsx                  // Einstiegspunkt für App *mit* Verwendung der API ("online mode")
├── main-offline.jsx          // Einstiegspunkt für App *ohne* Verwendung der API ("offline mode")
├── config.js                 // Globale Konfiguration der WebApp
├── components                // (p)react Komponenten
│   ├── Index.jsx             // Web App Haupt-Komponente
│   ├── ChartScreen.jsx
│   ├── FinalScreen.jsx
│   ├── Index.jsx
│   ├── TitleScreen.jsx
│   └── partials
│       ├── GraphItem.jsx     // Komponente für d3 Visualisierungen
│       └── HeaderLightItem.jsx
├── content
│   ├── group-a.json          // Daten zur Aufgabenstellung: Graphen-Definitionen
│   ├── group-b.json          // Daten zur Aufgabenstellung: Graphen-Definitionen
│   ├── module.json           // Labels und Texten des User Interfaces
│   └── offline.js            // Definition der Reihenfolge der Fragen
│   └── questions.json
├── d3
│   ├── axes.js               // Achsendefinitionen
│   ├── draw.js               // Interaktives Zeichnen von Graphen
│   ├── grid.js               // Statisches Hintergrundraster
│   ├── legend.js             // Legende eines Graphen
│   ├── line.js               // Darstellung eines Graphen
│   ├── main.js               // d3 Haupt-Modul
│   ├── message.js            // Benachrichtigung, wenn der Graph nicht über das komplette Intervall gezeichnet wurde
│   ├── point.js              // Hervorgehobener Orientierungspunkt in interaktiver Ansicht
│   ├── scales.js             // Definition der d3 Skalen für x- und y-Achsen
│   └── userline.js           // Statische Darstellung des interaktiv gezeichneten Graphen in Vergleichsansichten
└── utilities
    ├── api.js                // API für Lese- und Schreibzugriff auf die Datenbank
    ├── enableTouch.js
    ├── math.js
    └── fonts.js

Wie ändere ich Inhalte und Daten?

Alle Inhalte und Daten der 'offline'-Version sind in den json-Dateien Dateien unter src/js/content definiert. Die Datei questions.json ist aber sowohl für die 'offline' als auch für die 'online' Version zwingend notwendig. Dort sind hauptächlich Labels der Fragen, aber auch Metadaten definiert. Für das Hinzufügen oder Ändern von Fragen sind sowohl die Texte und Labels der Frage (questions.json) und die Definition der Daten der Frage (group-<x>.json) anzupassen. Die Definition der Reihenfolge der Fragen (offline.js) ist nur für den 'offline' Modus relevant, im 'online' Modus wird die Reihenfolge von der Datenbank / API bestimmt.

Labels

Umgebende Texte

In module.json sind die umgebenden Texte und Labels definiert, die nicht direkt Teil der WebApp sind. Dies umfasst die einleitenden (introtext) und abschließenden Texte (outrotext) und die Labels der Buttons und den Text der Fehlermeldung bei einem nur teilweise gezeichneten Graphen.

{
  "title": "Wie stark hängen der Wert von Immobilien und die Einkommensentwicklung zusammen?",
  "introtext": "In der Diskussion um die Einkommensentwicklung im Kontext steigender Mieten, …",
  "outrotext": "Sie haben gleich zwei historische Entwicklungen verinnerlicht. …",
  "next": "Weiter",
  "start": "Start",
  "restart": "Neustart",
  "error": "Achtung, da fehlt noch was!",
  "done": "Wenn Sie fertig sind, klicken Sie bitte auf weiter!"
}

Labels der WebApp

Die Texte und Labels und teilweise die Daten zu den Fragen sind in src/js/content/questions.json definiert:

{
  "source": "Quelle: Mack, A., and E. Martínez-García. 2011. …",
  "texts": [
    {
      "text": "Schätzen Sie zunächst bitte, …",
      "instruction": "Bitte fahren Sie über …",
      "hint": "Einen Punkt haben wir Ihnen …",
      "answer1": "Nicht schlecht! …",
      "answer2": "Sie sehen jetzt im Vergleich …"
    },
    {
      "text": "Den Anstieg der Immobilien behalten wir. …",
      "instruction": "Bitte fahren Sie wieder …",
      "hint": "Einen Punkt haben wir Ihnen …",
      "answer1": "Nicht schlecht! …",
      "answer2": "Sie sehen jetzt …"
    }
  ],
  "fixedPoints": [
    {
      "jahr": 2005,
      "index": 100
    },
    {
      "jahr": 2005,
      "einkommen": 100
    }
  ],
  "yKeys": [
    "index",
    "einkommen"
  ],
  "yAxisUnit": [
    "Immobilienindex",
    "Einkommen"
  ],
  "legendLabels": [
    "Immobilienpreis",
    "Einkommen",
    "Durchschnitt"
  ],
  "xKey": "jahr",
  "xAxisUnit": "Jahr"
}

Eine Frage kann aus mehreren Teilen bestehen, in diesem Fall sind es zwei Teile, die durch die Objekte im Array texts definiert werden. Im Fall der 'offline' Version werden die Texte der Felder answer2 nicht verwendet. yKeys bezieht sich auf den Datensatz und welcher Key dort für den jeweiligen Aufgbenteil verwendet werden soll. [Diese Idee ist hundsmiserabel und man hätte das Ganze den Entwicklern um die Ohren hauen müssen, die Struktur und die Namensgebung der Labels ist fürchterlich, aber durch die entsprechende Implementierung in der Datenbank / API zumindest zunächst betoniert.]

Besser ist die Tatsache, dass die Achsenbeschriftungen für die Aufgabenteile (yAxisUnit, xAxisUnit) und die Labels der Legende (legendlabels) angepasst werden können.

Das Objekt fixedPoints enthält die Koordinaten des Hilfspunktes, der in der interaktiven Ansicht angezeigt wird.

Daten

offline

Die Datei group-a.json in src/js/content enthält Daten der folgenden Struktur:

{
  "einkommen": 65.21,
  "id": 1,
  "index": 108.58,
  "jahr": 1975
}

Dieses Objekt beschreibt für einen x-Wert ("jahr": 1975) die y-Werte für zwei verschiedene Graphen. Diese Behandlung der Daten schreit nach einer Überarbeitung des Codes, da hier Daten und (Re)präsentation unnötigerweise und auf komplizierte Art miteinander verwurschelt werden. Wie im vorhergehenden Abschnitt beschrieben, werden in question.json die Keys und Labels definiert, die für einen Frageabschnitt verwendet werden sollen. In diesem Beispiel bezieht sich xKey auf "jahr", yKeys je nach Frageabschnitt auf "index" bzw. `"einkommen".

online