INDEX.HTML
oder QUICKTEST.HTML
(am besten auf http://localhost/
oder im privaten Webspace)Hinweis: Einige Links führen auf den externen Server von Github.com mit automatischer Syntax-Hervorhebung.
Die Wahl-O-Mat-Redaktion zu den letzten Bundestags- und Europawahlen bestand 20-25 Personen, welche die Parteiprogramme miteinander verglichen haben und daraus die Fragen formulierten. (2009 - heute) Ihnen zur Seite stehen jeweils verschiedene Wissenschaftler/innen um eine hohe Qualität zu gewährleisten.
Um die richtigen Fragen zu finden, empfiehlt es sich, solch ein Projekt nicht allein durchzuziehen, sondern die Last auf mehrere Schultern zu verteilen. Vertreter von Presse, interessierte Bürger-(Vereine) aber auch Politiker wären z.B. eine solide Basis dafür.
Und das alles braucht Zeit!
Ich empfehle mindestens drei Monate vorher anzufangen. (Es gab aber auch Vereine, welche die Fragen in weniger Zeit auf die Beine gestellt haben.)
Auch sollte man auf eine breite Vielfalt der Fragen achten.
Auf lokaler Ebene sollte sich z.B. nicht jede Frage um das neue Feuerwehrhaus, die Einsatzzeiten der Feuerwehr und die Finanzierung des Feuerwehrfests drehen.
Ebenso wichtig wären Kinderbetreuung, Schulen, Mieten, Straßenbau, Industrie, Umweltschutz und Tourismus.
Außerdem müssen die Fragen mit stimme zu
/ stimme nicht zu
beantwortet werden können.
Die Frage Was halten Sie vom Flughafenausbau?
lässt sich also weder mit dem Wahl-O-Mat noch mit dem Mat-O-Wahl beantworten.
Richtig müsste es heißen: Die Stadt soll den Flughafen ausbauen
oder Die Stadt soll den Flughafen nicht ausbauen
.
Beide Fragen lassen sich nun beantworten.
(Nebenbemerkung: Das Fragensystem ist gleichzeitig ein Kritikpunkt am originalen Wahl-o-Mat. Jemand könnte durchaus für den Flughafenausbau sein aber gegen eine aktuell geplante Startbahn Süd. Das kann der Mat-o-Wahl auch nicht auflösen.)
Desweiteren sollten keine Themen verknüpft werden.
Die Frage Die Stadt soll den Flughafen und das Gewerbegebiet ausbauen
ist schwer zu beantworten.
Ein Wähler könnte gegen den Flughafen aber für das Gewerbegebiet sein. Hier ist es besser zwei Fragen zu stellen.
Das lässt sich nicht pauschal beantworten und sollte (meiner Meinung nach) am besten auf die Zielgruppe zugeschnitten sein.
Die Besucher*innen des Mat-o-Wahl zur Uni-Wahl (StuPa / StuRa) lesen die gendergerechter Sprache vermutlich problemlos.
Auf der anderen Seite läuft man bei einer "konservativen" Wahl vielleicht Gefahr seine Besucher durch gendergerechte Sprache zu verlieren. Diese brechen bei "Bürger*innnen-Meister:innnen-Kandit/innen-Wahl" 😉 die Umfrage frustriert ab. So erfahren sie nie, ob ihr Wunschkandidat wirklich der/die bessere Kandidat/in gewesen wäre.
Viele Bilder sind urheberrechtlich geschützt. Wenn Sie ein Parteilogo oder ein Kandidatenfoto benutzen, achten Sie darauf die Besitzer um Erlaubnis zu fragen. Bilder für die freie Benutzung sind oft an einer Creative-Commons-Lizenz (z.B. CC:BY oder CC:BY-SA) zu erkennen.
Wikipedia, Flickr, eigene Bilder und persönliche Kontakte sind hier gute Quellen.
Alle wichtigen Einstellungen werden in einer Textdatei namens
im Verzeichnis definition.js
gemacht.
Diese kann mit einem Texteditor (Notepad, Wordpad, ...) bearbeitet werden.
Zur besseren Übersicht sollte die Datei aber mit einem Editor mit Syntax-Hervorhebung bearbeitet werden, z.B. /data
Notepad++
für Windows oder andere.
In dieser Datei kann man Kontaktinformationen für das Impressum angeben und erklärende Texte wer und was gewählt wird. Außerdem werden hier die Dateien mit den Parteien und den Fragen definiert.
Alle Fragen und Parteipositionen sind in einfachen CSV-Dateien abgespeichert.
Das sind normale Textdateien, die man sowohl mit einem Texteditor (z.B. Notepad, Wordpad, ...)
als auch mit einer Tabellenkalkulation (MS Excel, OO Calc, ...) bearbeiten kann.
Die Spalten sind voneinander mit einem einfachen Trennzeichen getrennt, z.B. ein Komma oder ein Semikolon.
Die Namen dieser CSV-Dateien kann man selbst in der "definition.js
"-Datei angeben.
Ansicht einer kommagetrennten CSV-Datei im Texteditor (Ausschnitt aus der Parteien-CSV-Datei) ...
Partei_kurz:;"Bananen"
Partei_lang:;"Bananenrepublikpartei"
Partei_Beschreibung:;"Warum ist die Banane krumm? [...]
Partei_URL:;"https://www.banane.ba"
Partei_Bild:;"data/banane.jpg"
1;"Gelb ist die beste Farbe! Lorem ipsum [...]
[...]
... und als fertige Tabelle (z.B. Excel, Calc, ...)
Partei_kurz: | Bananen |
Partei_lang: | Bananenrepublikpartei |
Partei_Beschreibung: | Warum ist die Banane krumm? [...] |
Partei_URL: | https://www.banane.ba |
Partei_Bild: | data/banane.jpg |
1 | "Gelb ist die beste Farbe! Lorem ipsum [...] |
... und im MS Excel
In den ersten fünf Zeilen stehen die Basisinformationen zur Partei. Hier ist nur die zweite Spalte interessant. Die erste Spalte kann auch Nonsens enthalten.
Beispieltext;"Bananen"
ein_name;"Bananenrepublikpartei"
Blabla;"Warum ist die Banane krumm? [...]
lorem;"https://www.banane.ba"
000;"data/banane.jpg"
In den nächsten X Zeilen stehen die Antworten der Partei. Hier brauchen wir auf jeden Fall die erste Spalte mit einem Wert von 1, 0 oder -1. In der zweiten Spalte kann eine Antwort stehen, es muss aber nicht.
1;"Gelb ist die beste Farbe! Lorem ipsum [...]
-1;"Früchte müssen lang sein [...]
[...]
Zum Schluss kommt eine Trennzeile. Sie dient nur der Übersichtlichkeit, damit man die Abschnitte besser auseinanderhalten kann. In der Beispieldatei steht hier eine Raute #. Es ist aber auch jedes andere Zeichen möglich. z.B. "0" oder "###" oder auch gar nichts. Danach geht es mit der nächsten Partei weiter.
1;"Süße Früchte sind lecker. Lorem ipsum [...]
#;
Partei_kurz:;"👤 TBC"
Partei_lang:;"Tradionelle Bundesdeutsche Citronenpartei"
Beispielhaftes Vorgehen mit einigen Einstellungen. (2:13 min)
Alle Texte auf einer Zeile (also alle Werte außer den Zahlen) müssen mit Anführungszeichen (") umschlossen werden.
Texte über mehrere Zeilen (z.B. im Impressum) dürfen mit einem Akzent (`) umschlossen werden. Alle modernen Browser verstehen diese Syntax. Alte Versionen des Internet Explorer haben damit Probleme.
Bei den Dateinamen sollte man keine Leerzeichen und Sonderzeichen wie Umlaute oder ß verwenden und
man muss außerdem auf Groß- und Kleinschreibung achten!
Eine "datei.txt
" ist keine "Datei.txt
".
Mat-O-Wahl öffnen - Definition.js öffnen (Link auf externen Github-Server)
Variable | Wert | Beschreibung |
---|---|---|
Parteien und Fragen | ||
fileQuestions
|
Obsthausen_Fragen.csv (Link auf externen Github-Server) | Die Datei mit den Fragen an die Parteien. In diesem Fall gibt es sechs Fragen. Die erste Spalte der CSV-Datei enthält eine Kurzzusammenfassung der Frage, die zweite Spalte enthält die eigentliche Frage. |
intQuestions
|
6 | Anzahl der Fragen an die Parteien. (seit Version 0.5) |
fileAnswers
|
Obsthausen_Parteien.csv (Link auf externen Github-Server) |
Die Datei mit den Antworten der Parteien und Informationen zur Partei / zum Kandidat. (seit Version 0.5) Die Datei hat folgenden Aufbau:
|
intParties
|
4 | Anzahl der Parteien / Kandidaten. (seit Version 0.5) |
|
... |
Diese Variable wird seit Version 0.5 (08/2020) nicht mehr benötigt. In diesem Fall gibt es vier Parteien, die zu jeder der sechs Fragen geantwortet haben. Die erste Spalte der CSV-Datei enthält die Position der Partei in Form einer Zahl. -1 steht für "stimme nicht zu", 0 für "Enthaltung" und 1 für "stimme zu". Die zweite Spalte enthält eine ausformulierte Begründung der Position. |
|
... |
Diese Variable wird seit Version 0.5 (08/2020) nicht mehr benötigt. |
Aussehen und Verhalten | ||
intPartyLogosImgWidth,
intPartyLogosImgHeight
|
10%
|
Einstellung für die Bildgröße der Partei-Logos / Kandidaten-Logos in der Ergebnisliste. Die Breite und Höhe kann in Pixel oder Prozent angegeben werden. |
|
|
Diese Variable wird seit Version 0.3 (11/2018) nicht mehr benötigt.
|
descriptionShowOnStart
|
1 |
Soll am Anfang eine kurze Beschreibung angezeigt (1) werden oder sollen gleich die Fragen (0) starten? Wenn die Fragen sofort starten, gibt es einen kurzen "Loading"-Hinweis. (seit Version 0.6) |
heading1,
heading2,
explainingText Namen der Variablen ab Version 0.6: descriptionHeading1,
descriptionHeading2,
descriptionExplanation
|
... | Texte mit Überschriften und einer kurzen Erklärung zur Wahl. |
Impressum | ||
imprintLink
|
"system/imprint.html" oder "https://www.seite-von-meinem-kleinen-verein.de/impressum.html"
|
Impressum - Option A): Standard-Link auf das Impressum. Sie können hier aber auch auf Ihr eigenes Impressum verweisen.
Falls Sie ein eigenes Impressum nutzen, können Sie Option B einfach ignorieren. Außerdem wäre ein Hinweis auf den Mat-o-Wahl günstig, z.B. "Der XXXXX-o-Mat basiert auf dem www.Mat-O-Wahl.de von Mathias Steudtner und ist freie Software unter GPL 3 Lizenz." |
imprintGeneral,
imprintContact,
imprintVATid,
imprintDisputeResultion,
imprintEditors,
imprintProgramming,
imprintPictures,
imprintPrivacyUrl
|
... |
Impressum - Option B): Angaben für das Standard-Mat-o-Wahl-Impressum.
Die Angaben spiegeln die rechtliche Situation in Deutschland 2020 wider. Der Fokus liegt dabei auf eingetragenen Vereinen (e.V.). Achtung: Dies ist keine Rechtsberatung. Ein eigenes Impressum ist meistens besser. |
Wenn Sie eine Einstellung frei lassen wollen, löschen Sie bitte nicht die ganze Zeile, sondern nur den Inhalt. Ein Wert ohne Datenschutzerklärung sieht z.B. so aus: var imprintPrivacyUrl = "";
Variable | Wert | Beschreibung |
---|---|---|
separator
|
";" oder ","
|
Das Trennzeichen mit welchem die CSV-Dateien voneinander getrennt sind. Microsoft Excel speichert zumeist mit Semikolon und OpenOffice Calc mit Komma ab. Alle CSV-Dateien müssen das gleiche Trennzeichen benutzen. |
design
|
default.css
|
(bis Version 0.5.1) Eine StyleSheet-Datei (CSS) mit Formatvorlagen im Ordner /STYLES/
|
design
|
["default.css","buttons-colors-on.css", "progressbar.css"];
|
(ab Version 0.6) Eine Liste von StyleSheet-Dateien (CSS) mit Formatvorlagen im Ordner /STYLES/
|
addons
|
[] oder z.B. auch
["extras/addon_results_textfilter_by_button.js"]; oder z.B. auch
["extras/addon_results_textfilter_by_button.js", "extras/addon_check_iframe_resize_client.js", "extras/addon_limit_results.js"]
|
(ab Version 0.6) Eine Liste von Erweiterungen. Die Beschreibungen finden sich in den jeweiligen Dateien und in diesem Dokument. |
language
|
de |
Eine Sprachdatei mit den Texten im Ordner /i18n/
|
Variable | Wert | Beschreibung |
---|---|---|
statsRecord
|
true oder 1, false oder 0 | (optional - für Experten) Bietet die Möglichkeit die Ergebnisse des Nutzers an einen Server zu senden. Dafür muss jedoch eine Datenschutzerklärung vorhanden sein und der Nutzer muss der Übermittlung seiner Daten aktiv zustimmen ("OptIn-Verfahren"). |
statsServer
|
http://localhost/extras/statistics/vote_db.php
|
(optional - für Experten)
Die Adresse und der Name des Skripts, welche die Daten empfängt.
Es werden zwei Variablen übertragen - mowpersonal und mowparties.
"mowpersonal" enthält die persönliche Auswahl des Nutzers in der Form Zustimmung/Ablehnung/Enthaltung/Übersprungen. Also z.B.: 1,-1,0,99 "mowparties" enthält die Anzahl der Übereinstimmungen mit den Parteien in der angegebenen Reihenfolge, z.B. 5,1,0,2 Ein Aufruf für 6 Fragen und 4 Parteien könnte dann also so aussehen: /vote_db.php?mowpersonal=1,1,-1,1,0,-1&mowparties=1.5,2,4,3.5
|
Im Stammverzeichnis befindet sich eine QUICKTEST.HTML-Datei. Diese prüft die wichtigsten Einstellungen und sagt Ihnen, ob es einen schwerwiegenden Fehler in der Konfiguration gibt.
Der Mat-O-Wahl funktioniert (theoretisch) nicht beim Starten von lokaler Festplatte aus. Dies liegt am Sicherheits-Konzept aller modernen Browser. Diese verbieten das Ausführen von lokalen Dateien.
"Lokal" bedeutet die interne Festplatte oder SSD, die externe USB-Festplatte oder auch einen USB-Stick. Der Browser öffnet diese Dateien intern mit dem "file://
"-Protokoll.
Der Mat-O-Wahl läuft aber:
http(s)://
-Protokoll)http(s)://
-Protokoll)--allow-file-access-from-files
about:config
) browser.tabs.remote.separateFileUriProcess
= true
Erweiterungen werden über die Variable addons
in der DEFINITION.JS
geladen. Standardmäßig ist diese Variable leer und es wird keine Erweiterung geladen.
var addons = []
Man kann eine oder x-beliebige viele (JavaScript)-Erweiterungen laden. z.B.
var addons = ["extras/addon_results_textfilter_by_button.js"]
var addons = ["extras/addon_results_textfilter_by_button.js", "extras/addon_check_iframe_resize_same_domain.js", "extras/addon_whats_your_favorite_party.js"]
var addons = ["my_folder/my_file.js"]
Datei öffnen (Link auf externen Github-Server)
var TEXTFILTER_KEYWORDS = ["​", "👤", "‍", "‎"]
var TEXTFILTER_BUTTONTEXTS = ["Alle anzeigen", "Bürgermeisterkandidaten 👤 anzeigen", "Südfrüchte anzeigen", "Runde Früchte anzeigen"]
PARTEIEN-ANTWORTEN.CSV
in der Zeile mit der langen Parteibeschreibung einfügen.
Partei_Beschreibung: ; "Die Apfelpartei steht seit vielen Jahren für alle Angelegenheiten des Apfels. 👤 ​ ‎"
Partei_Beschreibung: ; "Warum ist die Banane krumm? [...] alle Belange der Bananen. ​ ‍"
Partei_kurz: ; "👤 APPD ​ ‎"
Partei_kurz: ; "Bananen ​ ‍"
DEFINITION.JS
aktivieren.
var addons = ["extras/addon_results_textfilter_by_button.js"]
Wenn der Mat-o-Wahl als <iframe>
eingebunden wurde, prüft das Skript, ob sich die Höhe ändert und ändert auch die Höhe des Frames.
Host-Datei öffnen (Link auf externen Github-Server)
Client-Datei öffnen (Link auf externen Github-Server)
iframe
lädt.
Damit wird die _host
-Datei geladen und eine Funktion, welche die Höhe des Mat-o-Wahl im iframe
empfängt.
<script src="https://www.seite-von-meinem-kleinen-verein.de/mat-o-wahl/extras/addon_check_iframe_resize_host.js"></script>
<iframe id="myIframe" src="https://www.seite-von-meinem-kleinen-verein.de/mat-o-wahl/index.html" style="min-width:100%;" loading="lazy">
</iframe>
<script type="text/javascript">
document.getElementById("myIframe").addEventListener( "load", function() { fnMatoWahlIframeEventListener("myIframe"); } );
</script>
DEFINITION.JS
aktivieren.
var addons = ["extras/addon_check_iframe_resize_client.js"]
CSS height
existiert.CONTAINER-FLUID
-class. Es könnte zu unschönen Rändern auf dem Smartphone kommen.Beschluss vom 20.05.2019(6 L 1056/19) des VG Köln beachten! ⇨ Chancengleichheit gewährleisten, indem alle Parteien angezeigt werden! (und das Addon damit eher NICHT genutzt werden sollte)
Datei öffnen (Link auf externen Github-Server)
intPartiesShowAtEnd
angeben
var intPartiesShowAtEnd = 3;
var TEXT_RESULTS_BUTTON_SHOW_MORE = "Weitere Ergebnisse zeigen"
var TEXT_RESULTS_BUTTON_SHOW_LESS = "Weniger Ergebnisse zeigen"
DEFINITION.JS
aktivieren.
var addons = ["extras/addon_limit_results.js"]
Lieblingsparteibzw. nach der Partei, welche man normalerweise wählen würde.
Datei öffnen (Link auf externen Github-Server)
var TEXT_ADDON_FAVORITE_PARTY_WELCOME_MESSAGE = "Bevor wir anfangen, eine kurze Frage:
Wenn morgen Wahl wäre, wen würdest du normalerweise wählen?"
var TEXT_ADDON_FAVORITE_PARTY_SKIP_DECISION = "Überspringen / Keine Antwort"
var STYLE_ADDON_FAVORITE_PARTY_COLOR = "#fff"
var STYLE_ADDON_FAVORITE_PARTY_OPACITY = "0.8"
DEFINITION.JS
aktivieren.
var addons = ["extras/addon_favorite_party.js"]
Wenn noch Fragen offen sind, dann werfen Sie einfach einen Blick in die FAQ oder treten mit mir in Kontakt!