## Modul 4: Stichproben verstehen

Ziel dieses Moduls ist die Verbesserung des Verständnisses darüber, wie Stichproben entstehen.  
Dafür werden Methoden des erfahrungsbasierten Lernens eingesetzt, die in in einer linear erzählten Geschichte eingebettet sind.

### Javascript Verzeichnisstruktur

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

```
├── main.jsx                      // Einstiegspunkt für App
├── config.js                     // Globale Konfiguration der WebApp
├── components                    // (p)react Komponenten
│   ├── Index.jsx                 // Web App Haupt-Komponente
│   ├── FinalScreen.jsx           // Abschließende Ansicht
│   ├── PollScreen.jsx            // View für die interaktive Visualisierung
│   ├── TitleScreen.jsx           // Einleitende Ansicht
│   └── partials
│       ├── AnimItem.jsx          // d3 Visualisierungen
│       ├── HeaderLightItem.jsx   // Kopfzeile
│       ├── LegendItem.js         // Legende der Graphen
│       ├── QuestionItem.jsx      // Multiple Choice Fragen
│       └── TextItem.jsx          // Begleitende Texte
├── content
│   ├── data.json                 // Geordnete Liste von Klassendefinitionen, aus denen Stichproben gezogen werden
│   ├── module.json               // Allgemeine Texte, Texte und Daten der Abschnitte
│   └── questions.json            // Definition der Mutiple Choice Fragen
├── d3
│   ├── init-barcharts.js
│   ├── init-circles.js
│   ├── init-countertext.js
│   ├── init-pollresults.js
│   ├── poll-color.js
│   ├── poll-count.js
│   ├── poll-dopoll-falling.js
│   ├── poll-dopoll-update.js
│   ├── poll-dopoll.js
│   ├── poll-generator.js
│   ├── poll-moveup.js
│   ├── poll-showdiff.js
│   ├── poll-sort.js
│   ├── poll-sortbars.js
│   └── poll.js                   // d3 Einstiegsmodul
└── utilities
    ├── enableTouch.js
    ├── fonts.js
    ├── formatter.js
    └── math.js
```

### Wie ändere ich Inhalte und Daten?

#### Labels

##### Umgebende Texte

In `module.json` sind Texte und Labels definiert, auch solche, die nicht direkt Teil WebApp sind. Dies umfasst den Titel (`"title"`) der WebApp, den einleitenden Text (`"introtext"`) und das Label des Start-Buttons:


    "title": "Glaube keiner Statistik…",
    "introtext": "..deren Zustandekommen du nicht verstanden hast. …",
    "start": "Start",
    "sections": [
      {
        "headline": "Amerikanische Forscher haben gezeigt...",
        "text": "Bargeldabschaffung als Beispiel um wissenschaftliche Studien zu erklären. …",
        "swap": false,
        "question": null,
        "next": [ "Weiter" ]
      }, …

##### Multiple Choice Fragen

Darüberhinaus ist die Abfolge der einzelnen Abschnitte definiert. Diese verfügen über Überschrift, erklärenden Text, und gegebenenfalls die ID einer multiple Choice Frage. Diese sind in `questions.json` definiert und sehen folgendermaßen aus:

    {
      "intro": "Eine Zwischenfrage",
      "title": "Worauf ist denn zu achten, wenn man so eine kleine Gruppe befragt?",
      "answers": [
        {
          "id": 1,
          "antwort": "Vorab festzulegen, wen das Abbild repräsentieren soll",
          "korrekt": true,
          "feedback": "Sie legen unbedingt vorab fest, …"
        }, …
      ]
    }

Hier werden Einleitungstext, Titel und Antworten der Fragen festgelegt. Jede Frage verfügt über mehrere Antwortoptionen. Diese bestehen aus einem initialen Text (`"antwort"`), die Information, ob diese Option richtig ist (`"korrekt"`) und einen (optionalen) zusätzlichen Text (`"feedback"`), der eingeblendet wird, wenn die Option fälschlicherweise ausgewählt bzw. nicht ausgewählt wurde.

#### Daten

Die Daten, auf der dieses Modul basiert, beschreiben Ereignisse und deren Eintrittswahrscheinlichkeiten:


    [
      { "label": "klar dafür", "score": 4.1, "cumul": 4.1, "color": "#4a90e2" },
      { "label": "eher dafür", "score": 7.6, "cumul": 11.7, "color": "#90CFEB" },
      { "label": "unentschieden", "score": 1, "cumul": 12.7, "color": "#969696" },
      { "label": "eher dagegen", "score": 3.3, "cumul": 16, "color": "#FD8C33" },
      { "label": "klar dagegen", "score": 84, "cumul": 100, "color": "#FC4C2D" }
    ]

Der beschreibende Text des Ereignisses wird unter `"label"` definiert. `"score"` bezeichnet die Wahrcheinlichkeit in Prozent. Mit `"cumul"` wird die kumulierte Wahrscheinlichkeit angegeben und unter `"color"` wird die Farbe festgelegt. Erignisse sind aufsteigend nach ihrer Eintrittswahrscheinlichkeit sortiert. Alle Stichproben werden auf Grundlage dieser Klassendefinitionen gezogen.
Wichtig ist, dass es sich hierbei um disjunkte Ereignisse handelt und sich alle Wahrscheinlichkeiten zu 1 (100 %) aufsummieren müssen.