understanding-relative-risks/doc/03_module.md

Modul 5: Relative Risiken verstehen

Mit diesem Modul soll das Verständnis von relativen Risiken geschult werden.
Dazu werden den Nutzern Multiple-Choice-Fragen gestellt, die durch animierte Icon Arrays illustriert werden. Die Auflösung wird gegebenenfalls (im 'online' Modus) mit dem Vergleich zu anderen Nutzern präsentiert.

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
│   ├── Index.jsx                 // Web App Haupt-Komponente
│   ├── FinalScreen.jsx           // Abschließende Ansicht
│   ├── QuestionScreen.jsx
│   ├── TitleScreen.jsx           // Einleitende Ansicht
│   └── partials
│       ├── BubbleChartItem.jsx   // d3 Visualisierungen
│       ├── HeaderLightItem.jsx
│       ├── IntroItem.jsx         // Einführung zu den Fragen
│       ├── QuestionItem.jsx      // Benutzereingaben für Fragen
│       ├── ScoreItem.jsx         // Auflösung / Erklärung zu den Fragen
│       └── VoteItem.jsx          // Ergebnisse anderer Nutzer
├── content
│   ├── module.json               // Definition der Labels und Texte des User Interfaces
│   └── questions.json            // Definition der Multiple Choice Fragen
├── d3
│   ├── bar.js                    // Balkendiagramm für Vergleich mit anderen Nutzern
│   ├── bubblechart-decolor.js
│   ├── bubblechart-divide-gradual.js
│   ├── bubblechart-divide.js
│   ├── bubblechart-reduce.js
│   ├── bubblechart.js
│   └── defs.js
├── services
└── utilities
    ├── api.js                    // API zum Lese- und Schreib-Zugriff auf die Datenbank
    ├── enableTouch.js
    ├── fonts.js
    ├── formatter.js
    └── randomizer.js

Wie ändere ich Inhalte und Daten?

Labels

In module.json werden die umgebenden Texte definiert:

{
  "title": "Prozent von was??",
  "introtext": "Täglicher Wurstkonsum erhöht Darmkrebsrisiko um 18 %.\nDamit steht dieses Risiko auf der gleichen Gefahrenstufe der Weltgesundheitsorganisation WHO wie Asbest und Rauchen.",
  "introContinue": "Worum geht es hier?",
  "next": "Erklärung",
  "start": "Start",
  "restart": "Neustart",
  "percent": "18 %",
  "prediction": "mehr Darmkrebsrisiko bei erhöhtem Wurstkonsum",
  "conclusion": "Was haben Sie gelernt?",
  "finalTitle": "Fragen Sie sich immer, bei jeder Prozentangabe",
  "finalSlogan": "„% von was“?",
  "finalText": "Was ist „was“ genau?\nWie häufig kommt etwas normalerweise sowieso vor?\nDann lebt sich‘s viel entspannter.",
  "reference": {
    "source": "Quelle",
    "author": "WHO",
    "year": "(2015)",
    "title": "Links between processed meat and colorectal cancer.",
    "url": "http://www.who.int/mediacentre/news/statements/2015/processed-meat-cancer/en/"
  },
  "sausageEater": "Wurstesser",
  "mainstreamEater": "Durchschnittsesser",
  "usersRight": "Wie viele der anderen Nutzer lagen richtig?"
}

Hier können Titel, Einleitungstext und Zusammenfassung angepasst werden. Auch die Labels der Buttons sind dort festgelegt.

Fragen

In src/js/content/question.json werden die Fragen definiert:

{
  "intro": "Haben Sie sich dazu auch mal folgende Frage gestellt?",
  "title": "Welche Wurst?",
  "answers": [
    {
      "id": 1,
      "antwort": "Verarbeitetes Fleisch",
      "korrekt": true
    },
    {
      "id": 2,
      "antwort": "Rotes Fleisch",
      "korrekt": false
    },
    {
      "id": 3,
      "antwort": "Geräuchertes Fleisch",
      "korrekt": false
    },
    {
      "id": 4,
      "antwort": "Weißes Fleisch",
      "korrekt": false
    }
  ],
  "description": "Verarbeitetes Fleisch ist Fleisch, das durch Verarbeitungsprozesse wie Salzen, Räuchern, Reifen bzw. Fermentieren oder andere Verfahren verändert wurde, um den Geschmack zu verbessern oder es haltbar zu machen. Meistens sind Schweine-, Rind- oder Geflügelfleisch, aber auch Innereien enthalten. Wurstwaren, Schinken, Hackfleischprodukte und Fleischkonserven sind verarbeitetes Fleisch.",
  "onext": "Worum geht es hier?",
  "next": "Nur wie viel hiervon ist denn zu viel?"
},

Metadaten wie Titel ("title"), Einleitungstext ("intro"), Beschreibung ("description") und die Labels der Buttons können hier angepasst werden. Außerdem sind die Antwortoptionen definiert mit Label ("antwort") und der Information, ob die jeweilige Option wahr ist ("korrekt"). Die Auswertung geschieht immer sobald eine Option ausgewählt wurde, daher kann immer nur eine Antwort richtig sein.