# Konfiguration

Der Wahlkompass wird im JSON-Format konfiguriert. Die Konfigurationsdatei enthält alle Thesen, Antworten, Parteien, Logos, Übersetzungen für beliebig viele Sprachen und weitere Einstellungen.

Kennst du schon den Konfigurations-Editor?

Du kannst die Konfiguration von Hand schreiben, oder du kannst unseren Konfiguratinos-Editor ausprobieren. Der Konfigurator generiert JSON Dateien in dem Format das Wahlkompasses. Dies ist besonders nützlich für Menschen ohne technischen Hintergrund.

👉 Konfigurations-Editor

# Version

Das Schema für Konfigurationsdateien ist versioniert. Aktuell ist Version 1. Damit die Version einer Konfigurationsdatei leicht bestimmt werden kann, gibt es ein entsprechendes Attribut:

{
  "version": "1"
}

# Algorithmus

Im Laufe der Zeit wurden verschiedene Algorithmen und Antwort-Stile entwickelt. Da der OpenElectionCompass entwickelt wurde um das Verhalten der populärsten Voting Advice Application Deutschlands zu imitieren, besteht der Standard-Stil aus drei Buttons und dem sogenannten Cityblock-Algorithmus.

# Verfügbare Algorithmen und Antwort-Stile

  • cityblock/approve-neutral-reject:
    • Standard
    • Buttons: 3 – Zustimmen, Neutral, Ablehnen
    • Übereinstimmung/Algorithmus: Cityblock
    • Demo
  • cityblock/approve-partly-reject:
    • Funktioniert genau so, wie der vorherige, allerdings ist der Neutral-Button mit 'Teilweise' beschriftet.
    • Buttons: 3 – Zustimmen, Teilweise, Ablehnen
    • Übereinstimmung/Algorithmus: Cityblock
    • Demo
  • hybrid:
    • Liefert genauere Ergebnisse, da mehr Antwortmöglichkeiten zur Verfügung stehen und in der Auswertung die Richtung stärker berücksichtigt wird.
    • Buttons: 5 – Starke Zustimmung, Zustimmung, Neutral, Ablehnung, Starke Ablehnung
    • Übereinstimmung/Algorithmus: Hybrid
    • Demo

# Konfigurationsbeispiel

{
  "version": "1",
  "algorithm": "cityblock/approve-neutral-reject"
}

# Mehrsprachigkeit

Eine einzelne Konfigurationsdatei enthält sämtliche Sprachen, die der Wahlkompass anbieten soll. In der Konfiguration wird daher zunächst die Auswahl an Sprachen festgelegt.

{
  // Die folgende Zeile kommt aus dem vorherigen Beispiel! Alle Attribute gehören
  // in dasselbe JSON- Objekt. Wir werden jedoch in den restlichen Beispielen auf
  // diese verzichten, um es kurz zu halten.
  "version": "1",
  "languages": [{
    "name": "Deutsch",
    "code": "de"
  }, {
    "name": "English",
    "code": "en"
  }]
}

Als name wird der Name der Sprache in der Sprache selbst verwendet.

Als code wird ein Sprachcode, bestehend aus zwei Kleinbuchstaben, wie in der Norm ISO 639-1 beschrieben, verwendet. Beispiel: "en" für Englisch, "de" für Deutsch, etc.

Inhaltliche Elemente, wie Thesen und Antworten, können nun in einem Unterobjekt übersetzt werden. Wie das geht, siehst du im Beispiel des nächsten Abschnitts. Alle Attribute für die ein Objekt mit Übersetzungen erwartet wird, sind als 'mehrsprachig' markiert.

# Allgemeine Informationen

Auf der obersten Ebene enthält die Konfiguration allgemeine Informationen wie Titel und Untertitel, welche im Startbereich des Wahlkompasses angezeigt werden.

{
  // version, languages, algorithm, etc.
  // ...
  "title": {
    "de": "Hogwarts Schülervertretung 1993",
    "en": "Hogwarts Head Boy and Girl Elections 1993"
  },
  "subtitle": {
    "de": "Ein Wahlkompass von Hermine Granger",
    "en": "An election compass by Hermione Granger"
  },
  "introduction": {
    "heading": {
      "de": "Willkommen zum Wahlkompass",
      "en": "Welcome to the Election Compass"
    },
    "text": {
      "de": "Alle 5 teilnehmenden Studierenden haben die 10 Thesen des Wahlkompasses ...",
      "en": "All 5 contending students have answered the 10 theses of the Election Compass ..."
    }
  }
}

# title mehrsprachig

Der Titel der Wahl. Wird im Startabschnitt als h1-Element angezeigt. Sollte präzise sein und nicht zu lang.

beispiel: "Allgemeine Wahl der Vereinten Nationen 2050"

# subtitle mehrsprachig

Der Untertitel, sichtbar im Startabschnitt ist. Sollte, zum Beispiel, die verantwortliche Organisation erwähnen.

Beispiel: "Dieser Wahlkompass wird bereitgestellt von deiner örtlichen Demokratie-Unterstützungsgruppe."

# introduction.heading mehrsprachig

Unterhalb des Startbereiches folgt eine kurze Einleitung, welche mit einer Überschrift beginnt. Verwende etwa 3 - 5 Grußworte.

Beispiel: "Willkommen zum Wahlkompass"

# introduction.text mehrsprachig

Gib eine kurze Einleitung in deinen Wahlkompass. Erläutere an dieser Stelle nicht die Bedienung, sondern erkläre deinen Besucher:innen, wer du bist und warum du das tust, wieviele Parteien teilnehmen, etc. Ungefähr 2 - 5 Sätze.

Beispiel: "Alle 9 zur Wahl aufgestellten Parteien haben an diesem Wahlkompass ..."

# Parties (Parteien)

Das parties Attribut auf der obersten Ebene enthält die Liste (Array) der Parteien:

{
  // version, languages, title, subtitle, etc.
  // ...
  "parties": [{
    "alias": "spew",
    "name": {
      "de": "Bund für Elfenrechte",
      "en": "Society for the Promotion of Elvish Welfare"
    },
    "short": {
      "de": "B.ELFE.R",
      "en": "SPEW"
    },
    "description": {
      "de": "Die Bund für Elfenrechte wurde 1991 gegründet und hat seither große Anstrengungen unternommen um das Leben derer zu verbessern, die uns dienen.",
      "en": "The Society for the Promotion of Elvish Welfare was founded in 1991 and has since put great efforts into improving the lifes of those in our service."
    },
  }, {
    // another party
  }],
}

# parties[].name mehrsprachig

Der vollständige Name der Partei, ohne Abkürzungen.

Beispiel: "Super Demokratische Partei"

# parties[].short mehrsprachig

Das Kürzel oder der kurze Name der Partei, wie er für gewöhnlich in Logos und Diagrammen auftaucht.

Example: "SDP"

# parties[].alias

Die ID der Partei, für technische Zwecke. Verwende hier einfach die Abkürzung der Partei in Kleinbuchstaben, ohne Leerzeichen, und stelle sicher, dass sie einzigartig ist (keine zwei Parteien dürfen dieselbe ID verwenden). Die ID kommt in den Thesen-Objekten zum Einsatz um die Positionen den entsprechenden Parteien zuzuordnen.

Beispiel: "sdp"

# parties[].description mehrsprachig

Eine kurze Beschreibung der Geschichte oder der politischen Ausrichtung der Partei.

Beispiel: "Die SDP wurde im Jahr 2000 gegründet und ist eine sehr coole Partei. Wählt sie. Sie ist sehr gut."

(Das ist natürlich ein furchtbares Beispiel 😉)

Das Logo der Partei. Diese Zeichenkette wird an das src-Attribut des img-Elements übergeben. Du kannst daher eine URL oder eine Base64 kodierten Datei verwenden. Der Einfachheit halber ist dies auch, was der Konfigurations-Editor tut. Welche Variante du auch wählst, stelle sicher, dass die Dateien so klein wie möglich sind, kompatibel mit allen Browsern und vektorbasiert, wo immer möglich. SVG-Dateien liefern die besten Ergebnisse, PNG folgt an zweiter Stelle und JPG an dritter. Die Grafiken sollten die folgenden Maße haben: 400 x 400 px.

Beispiel für Base64: "data:image/svg+xml;base64,PHN2ZyBjbGlwLXJ1bGU9ImV2ZW5vZGQi..." Beispiel für URL: "https://example.com/logos/sdp.svg"

# Theses (Thesen)

Das theses Attribut auf der obersten Ebene enthält die Liste (Array) an Thesen:

{
  // version, languages, title, parties, etc.
  // ...
  "theses": [{
    "statement": {
      "de": "Der Sprechende Hut soll sich in Zukunft an die DSGVO halten.",
      "en": "The Sorting Hat should implement a GDPR-compliant privacy policy."
    },
    "positions": {
      "spew": {
        "position": "approve",
        "explanation": {
          "de": "Expecto riddikulus aparecium ferula evanesco lacarnum ...",
          "en": "Expecto riddikulus aparecium ferula evanesco lacarnum ..."
        }
      },
      "snape": {
        "position": "reject",
        "explanation": {
          "de": "Lumos amortentia stupefy immobilus patronum. Funnunculus ...",
          "en": "Lumos amortentia stupefy immobilus patronum. Funnunculus ..."
        }
      },
      /* ... weitere Positionen zu dieser These */
    },
  }, {
    /* ... weitere Thesen */
  }],

# theses[].title mehrsprachig

Ein kurzer Name der das Themengebiet der These beschreibt. Zwei bis vier Wörter. Wird direkt oberhalb der eigentlichen These angezeigt.

Beispiel: "Politische Bildung"

# theses[].statement mehrsprachig

Die eigentliche These. Wähle deine Worte mit Bedacht! Eine These muss ausgewogen und präzise sein. Erkläre, was umgesetzt werden soll, aber gehe nicht ins Detail, wie dies erreicht werden könnte.

Beispiel: "Die Bundesregierung soll politische Bildung stärker finanziell unterstützen."

Du kannst Definitionen schwieriger Begriffe hinzufügen, indem du diese in eckige Klammern fast und eine Erläuterung direkt anschließend in spitzen Klammern.

Beispiel: "Die Bundesregierung soll [Osmose]<Der gerichtete Fluss von Teilchen durch eine selektiv- oder semipermeable Trennschicht.> regulieren."

Der Begriff wird in der Darstellung der These mit einer gepunkteten Linie markiert und die Definition beim Überfahren mit der Maus oder per Tap angezeigt.

# theses[].positions[]

Jede These hat eine Liste (Objekt) an Positionen (positions) mit Antworten der Parteien:

{
  // thesis-Objekt
  // ...
  "spew": { // Entspricht der ID / dem `alias` Attribut einer Partei
    "position": "approve",
    "explanation": {
      "de": "Expecto riddikulus aparecium ferula evanesco lacarnum ...",
      "en": "Expecto riddikulus aparecium ferula evanesco lacarnum ..."
    }
  },
  {
    // another position
  }
}

# theses[].positions[].position

Die Position der Partei bzgl. der jeweiligen These.

Mögliche Werte:

  • approve – Die Partei stimmt dieser These zu.
  • neutral – Die Partei ist zu dieser These neutral.
  • reject – Die Partei lehnt diese These ab.
  • skip – Die Partei hat zu dieser These keine Position zur Verfügung gestellt.

# theses[].positions[].explanation mehrsprachig

Die Antwort der Partei zu dieser These.

Beispiel: "Wenn all dies für dich durcheinander erscheint, liegt das daran, dass es so ist! ..."

Das optionale footer-links Attribut auf der obersten Ebene enthält eine Liste (Array) an Links. Diese Links werden im Fußbereich der Seite sowie am Ende der Navigation angezeigt. Hier kann deine Startseite, Datenschutzerklärung, Impressum etc. verlinkt werden.

{
  // version, languages, title, parties, theses, etc.
  // ...
  "footer-links": [
    {
      "text": {
        "de": "Über Hogwarts",
        "en": "About Hogwarts"
      },
      "href": {
        "de": "https://open-election-compass.com/de/",
        "en": "https://open-election-compass.com"
      }
    },
    {
      "text": {
        "de": "Über die Schülervertretung",
        "en": "About the Head Boy and Girl"
      },
      "href": {
        "de": "https://open-election-compass.com/de/",
        "en": "https://open-election-compass.com"
      }
    }
  ]

Die Beschriftung des Links. Vorzugsweise kurz und präzise, 1 – 3 Wörter.

Example: "Datenschutzerklärung"

Der eigentliche Link, wie er in der Addresszeile deines Browsers erscheint. Du kannst unterschiedliche Links je Sprache verwenden für den Fall, dass die verlinkte Ressource ebenfalls mehrsprachig ist. Andernfalls verwende einfach für jede Sprache denselben Link.

Example: "https://example.com"