Technische Dokumentation - Universität Koblenz · Landau

OSA Dokumentation
Institut für Wissensmedien Koblenz-Landau (IWM)
November 30, 2015
Contents
1 Willkommen beim OSAuria
3
2 Server Administrator
2.1 Installation von OSAuria und Einrichten der Umgebung
2.1.1 Abhängigkeiten: . . . . . . . . . . . . . . . . . .
2.1.2 Erzeugen der Datenbank und Deployment . . . .
2.1.3 Updaten eines OSAuria . . . . . . . . . . . . . .
2.1.4 Finales Deployment . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
4
4
4
4
5
6
3 Content Admin
3.1 Gestalten eines OSAs . . . . . .
3.2 Adminbereich . . . . . . . . . . .
3.2.1 Seiten . . . . . . . . . . .
3.2.2 Nutzer . . . . . . . . . . .
3.2.3 Medien . . . . . . . . . .
3.2.4 Themes . . . . . . . . . .
3.3 Seiten-Editor . . . . . . . . . . .
3.3.1 Workflow . . . . . . . . .
3.3.2 Sidebar . . . . . . . . . .
3.4 Content Typen . . . . . . . . . .
3.5 Mediendateien . . . . . . . . . .
3.5.1 Upload . . . . . . . . . .
3.5.2 Konfiguration des OSAs .
3.5.3 Dateien einbetten . . . . .
3.6 Page . . . . . . . . . . . . . . . .
3.6.1 pIP . . . . . . . . . . . .
3.6.2 Titel . . . . . . . . . . . .
3.7 HTML Elemente . . . . . . . . .
3.8 vorgefertigte Elemente . . . . . .
3.8.1 Header . . . . . . . . . . .
3.8.2 Paragraph . . . . . . . . .
3.8.3 List . . . . . . . . . . . .
3.8.4 Table . . . . . . . . . . .
3.9 Question . . . . . . . . . . . . . .
3.9.1 Antwortfelder hinzufügen
3.9.2 Arten von Antwortfeldern
3.10 Score . . . . . . . . . . . . . . . .
3.10.1 Aufbau . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
7
7
7
8
8
8
9
9
9
9
10
10
10
10
10
11
11
11
11
12
12
12
12
12
12
12
12
12
12
1
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
3.11 Tunnel . . . . . . . . . . . . . . . . . . . .
3.11.1 Tunnel definieren . . . . . . . . . .
3.12 PIWIK . . . . . . . . . . . . . . . . . . .
3.12.1 Einrichtung . . . . . . . . . . . . .
3.12.2 Opt-Out . . . . . . . . . . . . . . .
3.13 CAPTCHA . . . . . . . . . . . . . . . . .
3.13.1 CAPTCHA hinzufügen . . . . . .
3.13.2 Infos zum verwendeten CAPTCHA
3.14 Bibliotheken . . . . . . . . . . . . . . . . .
3.15 MathJax . . . . . . . . . . . . . . . . . . .
3.15.1 Verwendung (im OSAuria) . . . .
3.16 highlight.js . . . . . . . . . . . . . . . . .
3.16.1 Verwendung . . . . . . . . . . . . .
4 User)
4.1 OSA . . . . . . . . . . . . .
4.2 Info-Seiten . . . . . . . . . .
4.3 Selbsttests . . . . . . . . . .
4.3.1 Login . . . . . . . .
4.3.2 Aufgaben . . . . . .
4.3.3 Benutzungshinweise
4.3.4 Auswertung . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
13
14
14
14
14
14
14
15
15
15
15
16
16
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
17
17
17
18
18
18
18
19
5 Developer
5.1 Datenbanktabellen . . . . . . . . . . .
5.1.1 Globale Attribute . . . . . . .
5.1.2 Seiten und Inhaltsmodell . . .
5.1.3 Programmierung . . . . . . . .
5.1.4 Benutzermodell . . . . . . . . .
5.2 Themes . . . . . . . . . . . . . . . . .
5.2.1 Theme Color . . . . . . . . . .
5.2.2 Theme Editor . . . . . . . . . .
5.2.3 Datei- und Verzeichnisstruktur
5.3 JSON Objekte . . . . . . . . . . . . .
5.4 Fragen . . . . . . . . . . . . . . . . . .
5.4.1 Datenstruktur . . . . . . . . .
5.4.2 Freitextfragen . . . . . . . . . .
5.5 Auswertung . . . . . . . . . . . . . . .
5.5.1 Datenstruktur . . . . . . . . .
5.6 Server-Kommunikation . . . . . . . . .
5.7 Themes . . . . . . . . . . . . . . . . .
5.7.1 Theme Color . . . . . . . . . .
5.7.2 Theme Editor . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
20
20
20
21
21
22
22
23
23
23
24
24
24
25
25
25
28
28
28
28
.
.
.
.
.
.
.
.
.
.
.
.
.
.
2
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Chapter 1
Willkommen beim OSAuria
OSAuria ist eine Software, mit der die OSAs des Instituts für Wissensmedien
Koblenz-Landau (IWM) erstellt, verwaltet und zur Verfügung gestellt werden.
Die Informationen dieser Dokumentation sind vordergründig nach Zuständigkeit
gegliedert, um allen Beteiligten möglichst effizienten Zugang zu den nötigen
Informationen zu verschaffen.
3
Chapter 2
Server Administrator
2.1
2.1.1
Installation von OSAuria und Einrichten der
Umgebung
Abhängigkeiten:
XAMPP / MAMP / LAMP bzw. apache + mysql + php + php5-json
Wenn OSAuria in XAMPP unter Windows 7 sehr langsam läuft kann es sein
das die Hosts unter C:\WINDOWS\system32\drivers\etc\hosts richtig eingestellt
werden müssen. 127.0.0.1 muss mit localhost verbunden sein wärend ::1 auskommentiert ist.
#::1
127.0.0.1
localhost
localhost
Alle Abhängigkeiten müssen auf dem System installiert sein und für den
OSAuria zur Verfügung stehen.
Es reicht aus wenn der aktuelle Inhalt des OSAur-Medien-Ordners beim ersten
Deployment kopiert wird. Daher es muss kein cron-Job erzeugt werden der den
db und media Ordner synchronisiert hält.
2.1.2
Erzeugen der Datenbank und Deployment
Hinweis:
Bei Nutzung von XAMP/MAMP/LAMP unterscheidet sich das Aufsetzen der
Datenbank (Punkt 1 - 2, 6) insofern, dass mysql eventuell nicht auf die Datenbank, die von XAMP benutzt wird, zugreift.
1. Die Datenbank erstellen, auf die zugegriffen werden soll.
CREATE DATABASE OSA;
2. Für manuelles Erstellen eines Nutzers für die Datenbank.
GRANT ALL PRIVILEGES ON *.* TO ’osaUser’@’localhost’
IDENTIFIED BY ’insert_password_here’ WITH GRANT OPTION;
4
3. OSAuria Repositorium klonen.
git clone [email protected]:osa-kold/osauria.git
4. Auf Entwicklungsast wechseln, da auf dem Meister nicht gearbeitet wird.
git checkout development
5. Untermodule initialisieren und aktualisieren.
git submodule init
git submodule update
6. Datenbankstruktur aus dem Speicherauszug in die Datenbank speisen.
mysql -u username -p -h localhost OSA < OSA [latest date].sql
7. Den media-Ordner aus dem OSAur-Dropbox-Ordner in das Wurzelverzeichnis des Projekts kopieren. Falls möglch Softlink erstellen.
8. conf.php erzeugen nach folgendem Muster
<?php
$db_user = "osaUser";
$db_password = "insert_password_here";
$db_name = "OSA";
$captcha = "visualCaptcha";
?>
9. Wenn man ein OSA erstellen möchte, das auch offline funktioniert (ohne
Nutzeranmeldung), muss man in der conf.php eine Zeile hinzufügen, um
dem System dies mitzuteilen:
<?php
...
$offline = true;
?>
2.1.3
Updaten eines OSAuria
1. Einloggen auf dem Server über ssh per Konsole mittels
ssh [email protected]
2. Wechseln in das Verzeichnis des OSAuria
cd /var/www/html/uwi
3. Ausführen des update-Skripts
./update.sh
• Updater wird fragen, ob master oder development deployt werden
soll.
– m für master
– d für development
5
2.1.4
Finales Deployment
Damit ein OSA auf seinen Production-Server übertragen und eingesetzt werden
kann, muss ein entsprechendes Deployment durchgeführt werden.
Folgende Schritte müssen durchgeführt werden:
• Datenbank bereinigen (folgende Tabellen leeren)
– Users
– Answers
– Positions
• deploy.sh ausführen
• piwik ID setzenb (config.php)
6
Chapter 3
Content Admin
3.1
Gestalten eines OSAs
Wie gelange ich in den Bearbeitungsmodus?
• Ein OSAuria im Browser ansteuern, z.B. http://osauria.ko-ld.de/
uwi/
• Der URL den Suffix “admin.php” hinzufügen, z.B. http://osauria.ko-ld.
de/uwi/admin.php
• Den Knopf “login admin” betätigen
• Nun ist man eingeloggt und hat auf jeder Seite erscheint oben ein HamburgerButton, das ein Editier Menü aufruft. Im Menü den Editor auf On schalten.
Man kann die Elemente aus dem Menü auf die Seite in den aktiven Bereich
schieben.
Jede Seite, die man ab jetzt ansteuert ist bearbeitbar.
Um ein Inhaltselement zu bearbeiten:
doppelklicken oder den edit-Button unten-rechts am Element betätigen.
Zum Speichern das save-Button unten-rechts am Element betätigen.
Man kann alle Elemente per Drag&Drop verschieben.
3.2
Adminbereich
Im Adminbereich können die diversen Inhalte der Datenbank verwaltet werden.
Sie sind aufgeteilt in
•
•
•
•
Seiten
Nutzer
Medien
Themes
7
3.2.1
Seiten
Die Seiten des OSAs, die den Nutzern dargestellt werden können, werden tabellarisch dargestellt, sortiert nach ihrer PIP.
PIP
PIPs bestehen aus vier Zahlen, getrennt mit einem Punkt. Die erste Zahl ordnet
die Seite in die Hauptkategorie ein, wobei 0 versteckte Seite bedeutet.
Die zweite Zahl ist die Unterkategorie, wobei die 0 die Haupt-Überschrift festlegt.
Die dritte Zahl ist wiederum eine untergeordnet oder bei 0 die Überschrift der
Unterkategorie.
Die vierte Zahl ist eine konkrete Seite innerhalb dieser Struktur.
Eine einfache Denkweise wäre, sich das als Verzeichnisstruktur wie im Dateisystem des Computers vorzustellen, nur mit Zahlen als Namen der Verzeichnisse.
Titel
Hier wird der Titel der jeweiligen Seite angezeigt.
Prev und Next
in dieser Spalte kann festgelegt werden, welche Seiten mit den Pfeil-Buttons
von den Usern erreicht werden kann. < und > stehen für die Seite davor oder
danach entsprechend der Sortierung, wie sie im Editor vorliegt.
Login
Legt fest, ob es vom User gefordert wird, sich einzuloggen, um die jeweilige Seite
zu sehen. 0 für nicht nötig, 1 für Einloggen fordern.
Editor-Modes
Der Editor hat drei Modi, mit denen die Seiten verwaltet werden können:
• Auswählen
• Bearbeiten
• Löschen
3.2.2
Nutzer
Hier ist eine Übersicht der Nutzer zu sehen, die sich bisher bei dem OSA
angemeldet haben
3.2.3
Medien
Dieser Punkt zeigt die Medien-Dateien, die auf den Server (per FTP) hochgeladen wurden.
8
3.2.4
Themes
Eine Verwaltung der scss-Dateien und ein Editor ermöglichen, das Aussehen des
OSAs anzupassen.
3.3
Seiten-Editor
Nach dem einloggen per Admin stehen Funktionen zur Verfügung mit der die
Seiten angepasst werden können.
3.3.1
Workflow
Seitenelemente werden mithilfe der Sidebar eingefügt und werden danach visuell
editiert, sodass man direkt sieht, wie es für den User dargestellt wird (WYSIWYG).
3.3.2
Sidebar
• Editor: Mit dem Slider wird der Editor an- und ausgeschaltet. Das Ausschalten des Editors ist nützlich, um die Seite wie ein echter User betrachten
und testen zu können.
• Global Settings
– theme color: Grundfarbe, aus der sich automatisch das Farbschema
für die Seite herleitet.
– header font color: Schriftfarbe für die Überschriften
– OSA Name: Titel des OSAs
– OSA Logo: Dateipfad auf dem Server für das Logo oben Links
– Media Paths: Bitte nicht anfassen! Wird automatisch an anderer
Stelle erzeugt.
• Page Settings: Einstellungen für die momentan angezeigt Seite
– page title: Ttel der Seite
– page requires login: Häckchen rein bedeutet, dass die Seite nur für
eingeloggte Nutzer verfügbar ist. Wer nicht eingeloggt ist, wird auf
eine Login-Seite umgeleitet.
– hide Navigation arrow: jeweiligen Navigationspfeil ausblenden
– nav title: Beschriftung des jeweiligen Navigationspfeils
• Drag or Click Elemente: Zur Zeit funktioniert nur das einfügen per Drag&Drop.
folgende Elemente können direkt eingefügt werden:
–
–
–
–
–
–
–
–
–
Header
Paragraph
Media
List
Table
HTML-Code
Login
Registrierung
Kontakformular
9
–
–
–
–
–
–
Captcha
Sitemap
Piwik
Tunnel
Question
Score
3.4
Content Typen
3.5
Mediendateien
3.5.1
Upload
Mediendateien wie z.B. Bilder müssen zunächst auf den Server hochgeladen
werden. Dies ist unter anderem möglich per sFTP.
1. Mit einem passenden Client (z.B. Filezilla) zu Port 22 auf osauria.ko-ld.de
verbinden.
2. Uni-Account-Daten für Login eingeben
3. Zu Medien-Ordner des jeweiligen OSAs navigieren (innerhalb von /var/www/html)
4. Falls in dem OSA noch kein Unterordner für media existiert, einen neuen
erstellen
5. Dateien dort hochladen
3.5.2
Konfiguration des OSAs
Um die hochgeladenen Dateien verfügbar zu machen, muss der (Unter-)Ordner
in den sie hochgeladen wurden im Admin-Panel angegeben werden.
Falls es mehrere Ordner gibt, können diese in SubSets unterteilt werden (Zur
Zeit noch nicht implementiert).
Um einen Order hinzuzufügen klickt man auf “add media path” und gibt den relativen Pfad innerhalb des OSA-Verzeichnisses an. In der Spalte “Datentypen”
gibt man an, nach welchen Dateitypen in dem Verzeichnis gesucht werden soll.
Welche Dateiendungen das genau sind, wird in dem Bereich darüber festgelegt.
Unter “Datentyp” vergibt man einen Namen (z.B. “Videos”) und unter “Dateiendung” gibt man die Dateiendungen an, die dem Typ zugeordnet werden sollen
(z.B. “mp4”, “webm” und “ogv”).
Die Spalte “r” steht für “rekursiv”. Ist das Häkchen gesetzt, werden auch Unterordner miteinbezogen. (Dies ist bisher funktionlos)
3.5.3
Dateien einbetten
Die hochgeladenen Medien-Dateien werden über den Sidebar-Editor eingefügt.
Zuerst setzt man ein Media-Objekt an die entsprechende Stelle. In der Mitte ist
ein weißes Feld, das durch Doppelklick zu den Bildeigenschaften führt. Auf der
linken Seite kann man das darzustellende Bild auswählen. Auf der rechten Seite
lässt sich die gewünschte Höhe und Breite festlegen. Die Änderungen werden
durch einen Klick auf “Übernehmen” gespeichert.
10
Es ist möglich, mehrere Bilder in einer Reihe darzustellen. Durch einen
Klick auf das Plus oben links im Media-Feld (siehe Abbildung) und danach
einem weiteren Klick auf auf “Image” lassen sich weitere Bilder hinzufügen.
Im jeweiligen Platzhalter bzw. im eingefügten Bild ist oben rechts ein X zum
Löschen des Bildfeldes.
Videos werden gleichermaßen eingefügt, indem statt auf “Image” auf “Video”
geklickt wird.
3.6
Page
Die einzelnen Seiten eines OSAs lassen sich über das Sidebar-Element Page
anlegen und einordnen. Jede Seite hat eine pIP und einen Titel.
3.6.1
pIP
Eine pIP ist ein Adresse, die an IP-Adressen bei Rechnernetzen angelehnt ist.
Vier Zahlen, durch Punkte getrennt, ordnen die Seiten in eine Hierarchie ein.
Die erste Zahl ordnet die Seite in den Index der Hauptkategorie ein. Die
Ausnahme sind versteckte Seiten, die den Index 0 haben. Die zweite Zahl steht
für die Unterkategorie.
Im dritten und vierten Abschnitt der pIP wird Referenz auf das Modell des
Tunnels genommen. Die dritte Ziffer bezeichnet im wievielten Tunnel sich die
Seite befindet und die vierte welchen Index die Seite innerhalb des Tunnels hat.
3.6.2
Titel
Der Titel wird in der Titelleiste oder im Tab-Titel des Browsers dargestellt. Es
ist dementsprechend empfehlenswert, einen angemessenen Titel für jede Seite
zu setzen.
3.7
HTML Elemente
Alternativ zu den vorgefertigen Elementen kann auch HTML-Code eingegeben
werden.
Aus Gründen der Übersichtlichkeit sollte ein Elemente immer nur einen kleinen
Abschnitt beinhalten.
Bug: Zur Zeit ist es notwendig, den HTML-Code in einer div Umgebung
zu haben, damit der Editor sauber funktionniert.
Also:
#!html
<div>
...
</div>
11
3.8
vorgefertigte Elemente
Verschiedene (HTML) Elemente können direkt über den Editor eingefügt werden. Nach dem Einfügen können die Inhalte direkt durch Klick auf “edit” unten
rechts am Element bearbeitet werden.
3.8.1
Header
Eine Überschrift (h1), die idealerweise auf jeder Seite genau einmal gesetzt wird.
3.8.2
Paragraph
Ein Textabschnitt (p), bei dem im Editor die üblicherweise benötigten Formatierungsoptionen zur Verfügung stehen.
3.8.3
List
Eine unsortierte Liste (ul). Ein neues Listenelement wird bei jedem Newline
erzeugt.
3.8.4
Table
Eine Tabelle (table).
3.9
Question
Ein OSA kann Fragen mit unterschiedlichen Antwortfeldern beinhalten.
3.9.1
Antwortfelder hinzufügen
Antwortfelder werden über den Sidebar-Editor hinzufügt (Element “Question”).
Nach dem Hinzufügen erscheint ein Dialogfenster, in dem das gewünschte Format ausgewählt wird.
3.9.2
3.10
Arten von Antwortfeldern
Score
Scores sind Inhaltsobjekte die erlauben die Antworten von Nutzer anzuzeigen.
3.10.1
Aufbau
Auswertung verfügen hierbei über 4 Hauptattribute layout, unit, not evaluable,
items.
layout unterstützt momentan die Werte 0, 1, 2 und 3. Die Eingabe 0
erzeugt hierbei eine Auswertung in Form einer Likert-Skala. Bei 1 handelt es
sich um eine Skala mit Wertungen von eins bis fünf. 3 erzeugt eine SpinnennetzDiagramm und 2 ein horizontales Balkendiagramm, welches als einziges das
12
Überspringen von Fragen erlaubt.
unit kann die Werte "normalized", "absolute" und "percent" annehmen.
Diese haben nur Einfluss auf das average Attribut innerhalb der items. Bei
"normalized" wird die erreichte Punktezahl durch die maximal mögliche dividiert. Somit kann ein Nutzer nur einen Wert zwischen 0 und 1 erreichen. Bei
"percent" wird das gleiche Verfahren angewandt. Danach wird das Ergebnis
jedoch noch mit 100 multipliziert sodass sich eine Skala von 0 bis 100 ergibt. In
"absolute" werden nur die eingetragenen Punkte addiert. Es findet keine Normalisierung statt. Sollte in den Aufgaben eines Testbereich 5, 2 und 1 Punkte
erreicht werden können, so ist die maximale Punktezahl 8.
not evaluable kann ganz normales HTML5 eingetragen werden. Zu beachten
ist hierbei das innerhalb eines JSON Anführungszeichen entsprechend mit einem
Backslash \" verlassen werden müssen.
Bei items handelt es um sich die eigentliche Essenz einer Auswertung. Es
enthält Objekte mit den Attributen average, description und
questionsPositions. Jeder Eintrag in items erzeugt einen Abschnitt in der
Auswertung der mit dem in HTML5 angegebenen Text aus description beschrieben
wird.
Ein gültiges Score-Objekt könnte wie folgt aussehen:
{
"layout":1,
"unit":"normalized",
"not evaluable":
"<div>keine Auswertung möglich.</div>",
"items":[
{
"average":0.4,
"description":"<span>HTML 1</span>",
"questionPositions":[[1010,1],[1062,2],[1064,0]]
},{
"average":0.8,
"description":"<span title=\"HTML\">2</span>",
"questionPositions":[[1010,0],[1062,1],[1063,3]]
}
]
}
3.11
Tunnel
Tunnel bezeichnen Zusammengehörige Reihen von Seiten. Hauptsächlich sind
sie dafür gedacht, zusammengehörige Tests zu gruppieren. Dadurch können
auch Tests realisiert werden, die aufeinander aufbauen und dementsprechend
nacheinander durchgeführt werden sollen.
13
3.11.1
Tunnel definieren
Das Tunnel-Element wird über die Editor-Sidebar eingefügt. Nach dem Einfügen
öffnet sich automatisch ein Dialogfenster, in dem die Seiten innerhalb der Unterkategorie festgelegt werden können, die diesem Tunnel zugeordnet werden
sollen.
3.12
PIWIK
PIWIK ist ein Analytics-Tool, das im Gegensatz zu Google Analytics lokal
gehostet wird und dadurch weniger kompliziert ist hinsichtlich Datenschutzbestimmungen.
3.12.1
Einrichtung
Damit PIWIK funktioniert, müssen in der conf.php zwei Variablen gesetzt werden:
#!php
$piwikId = 42;
$piwikDomain = "piwik.beispieldomain.de";
piwikId ist die ID, unter der das OSA im PIWIK-Interface wiedergefunden
werden kann.
piwikDomain ist die URL, unter der der PIWIK-Server erreichbar ist.
3.12.2
Opt-Out
Um den Nutzern ein Opt-Out zur Verfügung zu stellen, kann das PIWIKElement an eine passende Stelle gesetzt werden.
3.13
CAPTCHA
CAPTCHA dienen dazu, Datenmüll durch Spambots und ähnliche Automaten
von den OSAs fernzuhalten. Besonders sinnvoll ist es deswegen, bei der Anmeldeseite für Selbsttests eine CAPTCHA-Abfrage einzubauen, mit dem Ziel,
dass Bots sich gar nicht erst einloggen können.
Solange das OSA nicht im offline-modus läuft, ist das CAPTCHA-Element erforderlich im Login- sowie im Kontaktelement.
3.13.1
1.
2.
3.
4.
CAPTCHA hinzufügen
Editor aktivieren
Zu der Seite navigieren, die abgesichert werden soll
CAPTCHA-Element an einen freien Platz auf der Seite ziehen.
Aktualisieren (F5)
14
3.13.2
Infos zum verwendeten CAPTCHA
Das CAPTCHA-Element gibt dem Nutzer eine simple Aufgabe, die er lösen
muss, bevor er forfahren kann. Wir verwenden VisualCaptcha.
3.14
Bibliotheken
3.15
MathJax
MathJax ist eine Javascript Bibliothek, die durch CSS, webfonts und svgs in
der Lage ist, Formeln auf Webseiten darzustellen. Hierbei sützt sich MathJax
auf die Formate MathML, AsciiMath und Latex.
3.15.1
Verwendung (im OSAuria)
Formeln sind im OSAuria überall dort anwendbar, wo normaler Text oder
HTML5 erlaubt ist.
AsciiMath
AsciiMath verwendet eine kompakte Schreibweise für Formeln, die sich hauptsächlich
auf Klammerung stützt. Die Syntax wird in der dazugehörigen Dokumentation
beschrieben.
Damit MathJax die AsciiMath Formeln erkennt muss sie mit ‘back-ticks’
umgeben werden.
‘x = (-b +- sqrt(b^2-4ac))/(2a)‘
LaTeX
Die Syntax von LaTeX Mathematics kann im dazugehörogen WikiBook eingesehen werden.
Damit MathJax Latex Formeln erkennt, muss es wie bei zentrierten Formeln
in einem normalen Latex Dokument mit doppelten Dollarzeichen $$ oder \[
umgeben werden. Die Dollarzeichen können nicht mit den verlassenen geöffneten
eckigen Klammern kombiniert werden.
Inline Formeln müssen stattdessen mit \( umgeben werden.
$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$
\[x = {-b \pm \sqrt{b^2-4ac} \over 2a}\[
Hier kommt gleich eine inline-Formeln: \(x = {-b \pm \sqrt{b^2-4ac} \over 2a}\(.
MathML
Die Syntax von MathML ist bei w3.org dokumentiert. Im Gegensatz zu den
anderen Formel Formaten bedarf MathML keiner weiteren Auszeichnung.
15
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
<mi>x</mi> <mo>=</mo>
<mrow>
<mfrac>
<mrow>
<mo>−</mo>
<mi>b</mi>
<mo>±</mo>
<msqrt>
<msup><mi>b</mi><mn>2</mn></msup>
<mo>−</mo>
<mn>4</mn><mi>a</mi><mi>c</mi>
</msqrt>
</mrow>
<mrow> <mn>2</mn><mi>a</mi> </mrow>
</mfrac>
</mrow>
</math>
3.16
highlight.js
highlight.js ermöglicht Syntax highlighting für viele verschiedene Programmiersprachen.
3.16.1
Verwendung
Der zu stylende Code wird folgerndermaßen eingebaut:
#!html
<pre><code class="html">...</code></pre>
class legt fest, für welche Sprach das highlighting angepasst werden soll. Die
Klassennamen befinden sich in der Dokumentation.
16
Chapter 4
User)
4.1
OSA
Ein OSA (Online-Self-Assessment) ist ein Selbsttest, der vollständig im Web
durchgeführt wird. Ziele sind:
1. Umfassende Informationen vermitteln
2. Einschätzung des eigenen Profils
Ersteres wird über Seiten erreicht, die einen Überblick über die relevanten
Themen vermitteln. Üblicherweise werden unter anderem die Studienbedingungen, das Universitätsumfeld und die zu erwartende Berufsbedingungen nach
erfolgreichem Abschluss angeschnitten.
Informationen zum (simpel gehaltenen) Bedienkonzept sind im entsprechenden Kapitel dieser Dokumentation enthalten.
Die Einschätzung des eigenen Profils wird über Selbsttests realisiert. Es
werden zum einen persönliche Eigenschaften evaluiert mithilfe psychologischer
Tests, zum anderen vermitteln fachspezifische Aufgaben einen Eindruck der
üblichen Anforderungen, die einen im jeweiligen Studiengang erwarten.
Auch hierzu gibt es ein weiterführendes Kapitel.
4.2
Info-Seiten
Zu einem OSA gehören üblicherweise umfassende Informationen rund um den
jeweiligen Studiengang. Die Informationen sind semantisch in verschiedene Kategorien eingeordnet. Zwei Arten von Navigation sind möglich:
1. gezieltes Auswählen der Themen über die Links oben auf der Seite
2. Durchnavigieren über die Pfeile
Wenn man am Ende einer Kategorie weiterklickt, landet man am Anfang
der nächsten Kategorie. Es ist also möglich, sämtliche Seiten durchzugehen.
Ein Teil der Inhalte kann dynamisch sein, sodass man zur Interaktion aufgefordert wird. Was genau zu tun ist, steht üblicherweise auf der jeweiligen Seite
beschrieben.
17
4.3
Selbsttests
Selbsttests bestehen aus unterschiedlichen Aufgabetypen, die einem bei der
Entscheidung helfen sollen, ob einem der jeweilige Studiengang zusagt.
4.3.1
Login
Damit ein OSA nicht am Stück durchgeführt werden muss, sondern unterbrochen und später fortgesetzt werden kann, ist eine Anmeldung nötig. Um
Datenschutz zu gewährleisten meldet man sich nicht mit seinem Klarnamen
an, sondern erzeugt eine Nutzerkennung anhand der Anweisungen, die einem
angezeigt werden. Nachdem der achtstellige Code eingegeben wurde, ist es
zusätzlich nötig, ein sogenanntes CAPTCHA zu lösen, indem das geforderte
Bild angeklickt wird.
4.3.2
Aufgaben
Nach dem Login werden die verschiedenen Arten von Tests angezeigt, die in dem
jeweiligen OSA zur Verfügung stehen. Es gibt drei Arten von Antwortmöglichkeiten:
Single Choice
Eine von mehreren Antwortmöglichkeiten ist auszuwählen.
Multiple Choice
Belibig viele Antwortmöglichkeiten sind auszuwählen.
Freitextfragen
Die Antwort soll in ein Freitextfeld geschrieben werden. Danach wird die
Musterlösung eingeblendet. Man vergleicht selbst, inwiefern man eine angemesse
Antwort verfasst hat.
4.3.3
Benutzungshinweise
• Um im OSA fortzufahren, sollte zuerst die Antwort eingegeben werden und
danach auf “Auswerten” oder “Weiter” (Pfeil rechts) geklickt werden.
– Nach einem Klick auf “Auswerten” wird die Musterlösung eingeblendet.
• Innerhalb der Aufgabenblöcke ist es – auch mit dem “zurück”-Button des
Browsers – nicht möglich, zur vorhergehenden Seite zu navigieren.
• Es ist wichtig, dass die Aufgaben nacheinander bearbeitet werden.
– Nur wenn du alle Fragen eines Aufgabenblocks bearbeitet wurden,
gilt dieser als abgeschlossen.
– Die Bearbeitung kann unterbrochen werden, um sie zu einem späteren
Zeitpunkt fortzusetzen.
– Nur vollständig bearbeitete Aufgabenblöcke werden abgespeichert.
– Selbsttest können mehrfach bearbeitet werden.
18
∗ Es wird empfohlen, die schon beim ersten Durchlauf die Aufgaben ernsthaft anzugehen, da die Testergebnisse ansonsten weder
aussagekräftig noch vergleichbar sind.
4.3.4
Auswertung
Die Auswertung visualisiert, inwiefern das persönliche Profil von dem Durchschnitt des jeweiligen Studiengangs abweicht. Es gibt verschiedene Arten von
Darstellungen, die die unterschiedlichen Testergebnisse intuitiv visualisieren.
Beispiele:
Welche Visualisierung letztendlich zu sehen ist, hängt vom jeweiligen OSA
beziehungsweise den dort überprüften Kompetenzen ab. Die Visualisierungen
werden auch angezeigt, wenn ein Test nicht vollständig durchgeführt wurde. Die
Aussagekraft ist dementsprechend geringer.
19
Chapter 5
Developer
5.1
5.1.1
Datenbanktabellen
Globale Attribute
Folgende Variablen sind innerhalb einer Session global:
#!php
$page
$userAdministrationRequired
$isLoggedIn
$isAdmin
$isEditing
$pip
$clear
$attributes
$titles
• $page kompletter Inhalt der aktuellen Seite
• $userAdministrationRequired Legt fest, ob eine Seite Admin-Rechte
erfordert
• $isLoggedIn Boolean true wenn eingeloggt, false sonst
• $isAdmin Boolean true wenn der User Admin-Rechte hat, false sonst
• $isEditing Boolean true wenn Editor aktiviert, false sonst
• $pip String pip der aktuellen Seite
• $clear boolean wird URL-encoded (GET) übergeben. Bei true werden
die Daten des Users zurückgesetzt. Wird ebenfall für Content-Admins
verwendet, damit diese beliebige Seiten innerhalb eines Tests aufrufen
können.
• $attributes sammelt Globale Einstellungen aus der Datenbank des OSAs.
[mediaPaths],[mediaTypes], sind hierbei eher für Editoren relevant. Jedoch sind [OSAName][OSALogoURL][favicon] für den HTML-head entscheidend und erlauben das jedes OSA einen eigenen Namen, Logo und Favicon
erhält. Weitere Attribute sind [headerFontColor][themeColor][selectedTheme].
20
Sie bestimmen die Farbpalette und Themes für das OSA. Diese sind allerdings nur fürs compilieren der style.css bzw. editor.css relevant.
• $titles array mappt existierende PIPs auf ihre prettyURLs.
5.1.2
Seiten und Inhaltsmodell
Seiten
Jede Seite hat eine pIP und einen Titel. Inhalt kann zwar ohne entsprechende
Seite existieren jedoch dann nicht aufgerufen werden.
pIP Eine pIP ist ein Adresse, die an IP-Adressen bei Rechnernetzen angelehnt
ist. Vier Zahlen, durch Punkte getrennt, ordnen die Seiten in eine Hierarchie
ein.
Die erste Zahl ordnet die Seite in den Index der Hauptkategorie ein. Die
Ausnahme sind versteckte Seiten, die den Index 0 haben. Die zweite Zahl steht
für die Unterkategorie.
Im dritten und vierten Abschnitt der pIP wird Referenz auf das Modell des
Tunnels genommen. Die dritte Ziffer bezeichnet im wievielten Tunnel sich die
Seite befindet und die vierte welchen Index die Seite innerhalb des Tunnels hat.
Titel
Der Titel wird in der Titelleiste oder im Tab-Titel des Browsers dargestellt.
Inhalt
Inhalte existieren unabhängig von den Pages. Da es aber nicht sinnvoll ist,
Inhalte alleine in der Datenbank stehen zu lassen, wird im Admin-Editor direkt
nach den gewünschten Page-Zuordnungen gefragt. Den Content-admins wird
insofern also nicht verdeutlicht, dass dies zwei unabhängige Sachen sind. Der
Vorteil dieser Lösung ist, dass Inhalt nicht verloren geht, wenn temporär die
Zuordnung zu einer Seite aufgehoben wird.
Weitere Attribute von Inhalt sind die Zuordnung, welche Seite davor und
danach liegen sollen. Dies wirkt sich auf die Navigation aus User-Sicht aus.
5.1.3
Programmierung
MYSQL Befehle
wantedPIP - muss durch den String der gesuchten pIP ersetzt werden.
Alle Inhalte einer Seite geordnet nach Position auflisten
SELECT * FROM ‘content‘ WHERE pip = "wantedPIP" AND type>1 ORDER BY ‘content‘.‘position‘ A
Export von einer Seite
SELECT * INTO OUTFILE ’data_path.sql’ FROM ‘content‘ WHERE pip = "wantedPIP";
21
PHP Dateien ohne Editor
Dateien die zur Darstellung der Inhalte und der Navigation nötig sind.
functions.php
In der functions.php wird die buildContent definiert die für das Auslesen der
Datenbank und die Übersetzung in Seiteninhalt zuständig ist.
content.php und getContent.php
stützen sich auf die oben gennante functions.php und führen die darin definierte
buildContent function aus. Bei getContent handelt es sich um eine über Ajax
aufgerufen Datei.
navigation.php
script.js
PHP Dateien mit Editor
TODO: vervollständigen
Folgende Dateien können nach Fertigstellung des Inhalts gelöscht werden,
um u.a. die Sicherheit des Systems zu verbessern.
serverCommunication/addContent.php editContent.php dropContent.php
deleteContent.php
5.1.4
Benutzermodell
OSA User haben in der Datenbank 4 Attribute:
• code
– char
– Der beim Anmelden festgelegte 8-stellige Code, der zur anonymen
Identifizierung dient
• age
– int
– Das von Nutzer angegebene Alter
• language
– char
– Die vom Nutzer angegebene Sprache
• gender
– char
– Das vom Nutzer angegebene Geschlecht
5.2
Themes
Das Design eines OSAs kann über SCSS angepasst werden. Im Editor-Panel
lässt sich die Theme Color setzen, um ein Farbschema zu generieren. Die einzelnen Farben und alle weiteren (CSS-)Attribute eines OSAs lassen sich außerdem
im Theme-Editor des Admin-Panels bearbeiten.
22
5.2.1
Theme Color
Die vom Content-Admin gesetzte Theme color wird in die Variable $theme-color
in der layout/style.scss geschrieben. Um die anderen Farben des Themes
zu generieren, wird $theme-color aufgehellt oder abgedunkelt in die anderen
Variablen übernommen.
5.2.2
Theme Editor
Themes werden innerhalb der Tabelle sassThemes der Datenbank gespeichert.
Beim Kompilieren wir der Inhalt des entsprechenden Themes in layout/template.scss
kopiert welche wiederum in die style.scss inkludiert wird.
Die Style-Informationen die im Editor gesetzt wurden, werden beim ändern der
Theme Color nicht überschrieben.
5.2.3
•
•
•
•
•
•
Datei- und Verzeichnisstruktur
externals
layout
media
scripts
serverCommunication
variables
Root
Erlaubte Dateiendungen: .php .md .sh
Enthält alle grundlegenden Dateien, die der Website ihre Struktur geben,
sowie die Projektbeschreibung.
Extern
Erlaubte Dateiendungen: .*
Enthält externen Projekte, auf denen OSAuria basiert. Derzeitig werden
jquery-ui, ckeditor, recaptcha, scssphp, sorter und ssp eingebunden.
Sollten diese Dateien nicht auftauchen, müssen sie mit git submodule init
&& git submodule update heruntergeladen werden.
Layout
Erlaubte Dateiendungen: .css .scss
Dateien, die das Layout verschiedener Teile des Projektes beschreiben.
Medien
Erlaubte Dateiendungen: .jpg .jpeg .svg .png .gif .mov .avi .mp3 u.ä.
Ist weiter unterteil in fonts, icons und images.
• Icons ist den Inhalten des Editors vorbehalten.
• Fonts sind eingebundene Schriftarten, die für die Gestaltung der Website
bereitstehen und
23
• Images enthält alle Bilder, die als Content dargestellt werden können,
sowie das Logo der Website.
Ist das Verzeichnis leer, müssen die Dateien aus dem Dropbox Verzeichnis
kopiert werden.
Skripte
Erlaubte Dateiendungen: .js
Enthält die Javascripte die zum Ausführen des Editors, für die Auswertung
von Fragen und dem Behandeln von Tunneln notwendig sind.
Serverkommunikation
Erlaubte Dateiendungen: .php
Enthält alle Dateien, mit denen nur über AJAX kommuniziert wird. Dies
betrifft alle Aktionen des Editors, den Login und die Registierung von Usern,
sowie die Verwaltung von Medien und das Abspeichern von Antworten durch
User.
Variablen
Erlaubte Dateiendungen: .php
Beinhaltet die Variablen die von der Umgebung abhäng sind. In diesem Falle
wird der Username und das Passwort von MYSQL für PHP hinterlegt.
5.3
JSON Objekte
5.4
Fragen
5.4.1
Datenstruktur
Die Fragen verfügen über die Attribute layout, optional, showAnswers, items.
layout bestimmt dabei wie das Objekt im Contentbereich dagestellt wird.
optional setzt fest, ob die Frage die Möglichkeit zum Überspringen bietet
oder ob die Beantwortung erzwungen wird.
showAnswers bestimmt, ob dem Nutzer nach der Eingabe der Antworten
eine Verbesserung bzw. direkte Auswertung angezeigt wird.
items ist der Teil des JSON Objekts der die eigentliche Fragen definiert. Da
es sich um einen Array handelt können hier auch mehr item Elemente eingetragen werden, was jedoch nicht von allen Layouts unterstützt wird.
description stellt die aktuelle Frage des Objekt bereit. Beispielsweise “Welche
Farbe haben Kirschen?”
Die Anzahl an Antwortoptionen auf eine Frage bestimmt wie lang die Arrays
bias und labels sein müssen. bias setzt hierbei fest wieviel Punkte die
entsprechende Antwort gibt und labels liefert den dazugehörigen Antworttext.
Bei den Strings ist zu beachten das die Beschreibungstexte später in HTML
eingebettet werden und daher nur Zeichen erlaubt sind die von diesen Unterstützt werden. Hinzu kommt das im String enthaltene ” durch ein Backslash
escapt werden müssen.
Als JSON-Objekt sieht es so aus:
24
#!json
{
"layout":5,
"optional":true,
"showAnswers":true,
"items":[
{
"bias":[1,0,0],
"description":"Welche Farbe haben \"Kirschen\"?",
"labels":["kirschrot","weinrot","kirschblütenweiss"]
},
{
"bias":[0,1,0],
"description":"Wieviel Beine haben Tausendfüßler?",
"labels":["Tausend","Einige hundert","Mindestens 800"]
}
]
}
5.4.2
Freitextfragen
Freitextfragen liefern kein Ergebnis, das in die Datenbank eingetragen wird.
5.5
Auswertung
Die Testergebnisse jedes Users werden in der Datenbank gespeichert und können
jederzeit vom User abgerufen und mit den Durchschnitsswerten verglichen werden.
5.5.1
Datenstruktur
Auswertungen sind wie folgt aufgebaut:
{
\layout": 0|1|2|3,
\unit": \normalized"|"absolute"|"percent", // only layout 0,1,3
\not evaluable": <message string>, // only layout 0,1,3
\items": {
\average": <number value>,
\description": <title string>,
\questionPositions":[[<question ID>, <question position>], ...]
}
layout unterstützt momentan die Werte 0, 1, 2 und 3.
25
• 0 erzeugt eine Auswertung in Form einer stufenlosen Likert-Skala. Wird
z.B. für den Intelligenztest verwendet.
• 1 bedeutet eine Likert-Skala mit Wertungen von eins bis fünf. Wird z.B.
für den Interessenstest und den Persönlichkeitstest verwendet.
• 2 ist ein horizontales Balkendiagramm, welches als einziges die Darstellung
der übersprungenen Fragen erlaubt. Wird für die fachspezifischen Fragen
verwendet.
26
• 3 erzeugt eine Spinnennetz-Diagramm. Experimentell. Kann für den Interessenstest verwendet werden.
unit kann die Werte "normalized", "absolute" und "percent" annehmen.
Diese haben nur Einfluss auf das average Attribut innerhalb der items. Bei
"normalized" wird die erreichte Punktezahl durch die maximal mögliche dividiert. Somit kann ein Nutzer nur einen Wert zwischen 0 und 1 erreichen. Bei
"percent" wird das gleiche Verfahren angewandt. Danach wird das Ergebnis
jedoch noch mit 100 multipliziert sodass sich eine Skala von 0 bis 100 ergibt. In
"absolute" werden nur die eingetragenen Punkte addiert. Es findet keine Normalisierung statt. Sollte in den Aufgaben eines Testbereich 5, 2 und 1 Punkte
erreicht werden können, so ist die maximale Punktezahl 8.
not evaluable ist eine Nachricht, die angezeigt wird, wenn die Auswertung
noch nicht möglich ist, da der User die Fragen noch nicht vollständig beantwortet hat (oder anderweitig nicht alles getan hat, was er tun soll). HTML5 ist
erlaubt. Zu beachten ist hierbei das innerhalb eines JSON Anführungszeichen
entsprechend mit einem Backslash \" verlassen werden müssen.
items enthält Objekte mit den Attributen average, description und questionsPositions.
Jeder Eintrag in items erzeugt einen Abschnitt in der Auswertung der mit dem
in HTML5 angegebenen Text aus description beschrieben wird.
27
Ein gültiges Score-Objekt könnte wie folgt aussehen:
{
"layout":1,
"unit":"normalized",
"not evaluable":
"<div>keine Auswertung möglich.</div>",
"items":[
{
"average":0.4,
"description":"<span>HTML 1</span>",
"questionPositions":[[1010,1],[1062,2],[1064,0]]
},{
"average":0.8,
"description":"<span title=\"HTML\">2</span>",
"questionPositions":[[1010,0],[1062,1],[1063,3]]
}
]
}
5.6
Server-Kommunikation
5.7
Themes
Das Design eines OSAs kann über SCSS angepasst werden. Im Editor-Panel
lässt sich die Theme Color setzen, um ein Farbschema zu generieren. Die einzelnen Farben und alle weiteren (CSS-)Attribute eines OSAs lassen sich außerdem
im Theme-Editor des Admin-Panels bearbeiten.
5.7.1
Theme Color
Die vom Content-Admin gesetzte Theme color wird in die Variable $theme-color
in der layout/style.scss geschrieben. Um die anderen Farben des Themes
zu generieren, wird $theme-color aufgehellt oder abgedunkelt in die anderen
Variablen übernommen.
5.7.2
Theme Editor
Themes werden innerhalb der Tabelle sassThemes der Datenbank gespeichert.
Beim Kompilieren wir der Inhalt des entsprechenden Themes in layout/template.scss
kopiert welche wiederum in die style.scss inkludiert wird.
Die Style-Informationen die im Editor gesetzt wurden, werden beim ändern der
Theme Color nicht überschrieben.
28