Gewusst-wie: Editor für benutzerdefinierte Fragetypen

Wenn Sie benutzerdefinierte Fragetypen nicht nur temporär anlegen, sondern der Bibliothek hinzufügen möchten, können Sie das im Menü Bibliotheken → Fragetypen.

Übersichtsseite

Die mittels des Editors angelegten Fragetypen sind im Fragebogen-Editor projektübergreifend verfügbar. Sie können einen neuen Fragetyp hinzufügen oder von einer anderen EFS-Installation importieren. Klicken Sie zu diesem Zweck auf die Schaltfläche + Neu bzw. wählen Sie aus dem Drop-Down-Menü den Befehl Importieren aus.

Open

Die Übersichtsseite erlaubt Ihnen, die folgenden Befehle auszuführen:

• das Erstellen eines benutzerdefinierten Fragetypen über die Strukturvorlage

• das Importieren eines archivierten benutzerdefinierten Fragetypen mittels Zip-Datei

• das Kopieren eines existierenden benutzerdefinierten Fragetypen

• Vorschau eines existierenden benutzerdefinierten Fragetypen

• das Löschen eines benutzerdefinierten Fragetypen

+ Neu-Schaltfläche

Sie erstellen einen neuen Fragetypen, indem Sie über den Split-Button + Neu anklicken. Es öffnet sich ein Dialog-Fenster, das Sie nutzen, um den neuen benutzerdefinierten Fragetypen zu benennen und eine Layout-Version auszuwählen.

• Geben Sie den Titel Ihres neuen Fragetyps ein und wählen Sie die gewünschte Kategorie. Folgenden Fragetypen-Kategorien sollten Sie Ihren neu erstellten Fragetyp zuordnen können: Einfachauswahl, Mehrfachauswahl, Matrix, Textfeld oder 911 Spezial. Auch im Fragebogen-Editor finden Sie den neu angelegten Fragetyp in der gewählten Kategorie wieder.

• Der neu angelegte Fragetyp wird nun direkt in der Übersicht gelistet. Um ihn zu bearbeiten, klicken Sie auf den Titel. Es öffnet sich ein HTML-Editor, der Ihnen die Erstellung eines neuen Fragetyps - über die Vorlage, das Stylesheet, das Javascript, die Festlegung der genauen Einstellungen und Ressourcen - erlaubt.

Folgende Aktionen stehen Ihnen darüber hinaus zur weiteren Bearbeitung der Fragetypen zur Verfügung:

Import

Ein bereits erstellter Fragetyp kann als ZIP-Datei importiert werden. Fragetypen stehen Ihnen über die Export/Import-Funktion also auch installationsübergreifend zur Verfügung.

Einen Fragetypen anlegen

Nur lateinische Buchstaben und Zahlen dürfen für den Namen verwendet werden. Aus dem von Ihnen vergebenen Namen wird ein interner Name generiert. Dabei werden alle Leerzeichen entfernt, sodass der Name als ID verwendet werden kann.

Die ausgewählte Kategorie bestimmt sowohl die zugrunde liegende Datenstruktur der Antworten als auch die verfügbaren Konfigurationsmöglichkeiten.

HTML-Editor

Über den Vorschau-Button wird eine Live-Vorschau Ihres Fragetyps aufgerufen, die ihn so darstellt, wie er in einer Umfrage mit einem nicht-angepassten responsiven Layout aussehen würde.

Sobald Sie mit dem Editieren Ihres Fragetyps beginnen, wird der Speichern-Button aktiv und ein Änderungsmarker wird in der linken Navigationsleiste eingeblendet.

Die linke Navigationsleiste besteht aus folgenden fünf Optionen, die im Folgenden näher erläutert werden: Vorlage, Stylesheet, JavaScript, Einstellungen und Ressourcen.

Vorlage

Eine Vorlage-Datei, die mit Smarty2 kompiliert wurde und einige EFS-Variablen verwendet, steht Ihnen zur Verfügung. Diese Vorlage enthält bereits grundlegende Funktionen, auf denen aufbauend Sie ein eigenes Template erstellen können.

Jede Frage enthält eine oder mehrere Variablen, die in den Einstellungen konfiguriert werden. Eine Variable repräsentiert eine Antwortoption (intern auch als „Item“ bezeichnet). Im Falle einer Matrix-Frage spiegelt jede Dimension eine Antwortoption (ein „Item“) wider und hat deshalb ihre eigene Variable.

Für jede Variable muss eine Liste mit möglichen Werten existieren. Dies sind die Skalenelemente (intern auch „r_cat“ genannt), die auch in den Einstellungen konfiguriert werden.

In der Vorlage gibt es die Variable $items, die den Bereich darstellt, der alle Antwor- toptionen der Frage enthält. Sie können die Antwortoptionen mit einer Schleife für jedes einzelne Objekt (Item) oder für einen Abschnitt durchlaufen. Jedes Item enthält die Variable $r_cats, die den Bereich darstellt, der alle Skalenelemente der Frage ent- hält. Auch hier können Sie die Antwortoptionen mit einer Schleife durchlaufen.

Wenn Sie alle vorhandenen Smarty Variablen sehen möchten, geben Sie den Begriff {debug} in Ihrer Vorlage ein. Dann wird ein Button in der oberen, rechten Ecke Ihrer Fragenvorschau eingeblendet, der eine vollständige Liste der Variablen anzeigt, die bis zur der Stelle verwendet werden, an der Sie {debug} in der Vorlage eingegeben haben.

Ein einfaches Beispiel, wie Sie die Items und r_cats durchlaufen können:

Open

Um Werte an den Server übermitteln zu können, muss ein Feld (je nach Fragetyp z.B. input Tag des Typs text, checkbox oder hidden, oder ein select Tag) enthalten sein, das den Namen der Variable enthält, das seinem Namensattribut genau entspricht. Zum Beispiel:

Open

So wird eine Auswahlbox für jede Antwortoption (Item), inklusive aller Skalenoptionen (r_cat), ausgegeben.

Style Sheet

Im Menü Stylesheet können Sie die CSS-Datei anpassen, die Ihrem Fragetyp zugrunde liegt. Einige Styles sind schon vordefiniert, können jedoch gelöscht werden, wenn Sie lieber vom Defaultdesign des responsiven Layouts ausgehend arbeiten möchten.

Der Main Container des Fragetyps muss eine CSS-Klasse der folgenden Struktur enthalten:

Open

In unserem Beispiel würde der Klassenname also wie folgt lauten:

Open

Sie sollten diese Klasse als exklusiven Benennungsraum verwenden, um die entsprechenden Styles auf Ihren Fragetyp zu begrenzen und Interferenzen mit der Außenansicht oder anderen Fragetypen zu vermeiden.

Java Script

Im JavaScript Menü definieren Sie gewissermaßen die Logik Ihres Fragetyps.

Am Anfang der Vorlage-Datei ist Code enthalten, der die Fragetyp-Einstellungen für JavaScript verfügbar macht. Sie können diese Einstellungen im Objekt options des JavaScript Plug-Ins finden. Beispielsweise sind die Antwortoptionen in einem Array gespeichert, der items heißt. Entsprechend sind die Skalenelemente (r_cats) in einem Array gespeichert, der rcats heißt.

Open

Sie können die Fragetyp-Optionen (die in den Einstellungen festgelegt wurden) auch im Objekt this.options finden. Wenn Sie zum Beispiel eine Option mit dem Namen „orientation“ in der Optionen-Gruppe „optionsGroup1“ haben, können Sie diese wie folgt ansprechen:

Open

Sie sollten den Code in der main Funktion des Plugins beginnen, können aber die prepareOptions Funktion verwenden, um die Optionen vorher zu verarbeiten oder eine Typenumwandlung durchzuführen.

Einstellungen

Im Menü Einstellungen definieren Sie die Optionen und Eigenschaften des Fragetyps. Das Menü ist in fünf Bereiche unterteilt, in denen unterschiedliche Eigenschaften festgelegt werden.

Optionen des Fragetyps

Die Optionen, die Sie im Menü Optionen des Fragetyps definieren, werden im Fragetyp-Editor angezeigt und ermöglichen es später dem Fragebogenersteller, die Instanzen Ihres Fragetyps zu konfigurieren.

Alle Optionen gehören zu einer Optionsgruppe, deshalb muss zunächst eine Optionsgruppe über einen Klick auf den Button hinzugefügt werden.

Geben Sie einen Namen für die Optionsgruppe ein, über den in der Vorlage und im JavaScript auf ihn referenziert wird. Sie können hier auch das Label für die Optionsgruppe in verschiedenen Sprachen festlegen, indem Sie auf das kleine Weltkugel-Icon klicken.

Klicken Sie auf den Option hinzufügen-Button, um das Kontextmenü mit den verfügbaren Optionen zu öffnen.

Um über das Vorlage-Menü an Ihre Optionen zu gelangen, verwenden Sie die Variable question_info. Sie finden Ihre Optionsgruppe im Objekt question_info.settings.ques- tionTypeOptions. Für Ihre „orientation“-Option stellt sich das wie folgt dar:

Open

Antwortoptionen

Im Bereich Antwortoptionen definieren Sie die Antwortoptionen der Frage, die initial zur Verfügung stehen, wenn der Fragetyp in einer Umfrageerstellung ausgewählt wird. In Matrix-Fragen steht jede Antwortoption für eine Dimension. In Mehrfachauswahl-Fragen stellt sie die Checkboxen dar und in Einfachauswahl-Fragen steht der Antwortoptionen-Bereich nicht zur Verfügung, da immer nur genau eine Antwortoption (Variable) benötigt wird.

Skalenelemente

Im Bereich Skalenelemente definieren Sie die Antwortcodes. In Matix-Fragen stellt jedes einzelne Elemente eine Spalte dar, in Einfachauswahl-Fragen die Radiobuttons und in Mehrfachauswahl-Fragen steht der Skalenelemente-Bereich nicht zur Verfügung, da jede Checkbox nur genau zwei Elemente mit den Werten „0“ und „1“ beinhaltet.

Funktionen des Frageeditors

In diesem Bereich können Sie den Funktionsumfang des Frageeditors festlegen. Welche Funktionen Ihnen hier zur Auswahl stehen, hängt von der Kategorie Ihres Fragetyps ab. Matrix-Fragen beispielsweise haben einen anderen Funktionsumfang als Einfachauswahl-Fragen.

Konfiguration

Im Bereich Konfiguration können Sie den Namen des Fragetyps anpassen.

PHP

Im Bereich PHP verfügen Sie über die die Möglichkeit, das PHP-Plugin und Ajax zu aktivieren. Aktivieren Sie die Ajax-Option, muss die “run”-Methode durch ein Ajax-Request aufgerufen werden. Ansonsten wird sie nach dem Absenden der Seite ausgeführt. Darüber hinaus kann das PHP-Plugin auch in der Vorschau ausgeführt werden, wenn Sie die entsprechende Option aktivieren.

Verfügbare Objekte:

$pluginData - Survey_Ospe_Question_Plugin_Data
Beinhaltet Methoden wie getPid(), getQid(), getIsInLoop()

$settings - Array
Beinhaltet die konfigurierten Objekte der Frage. Möglicher Zugriff:

$settings["questionTypeOptions"]["optionHeader"]["activeColor"];

$questionnaireDataAccess - Survey_Questionnaire_Data_Access
Bietet eine breite Palette von Funktionen im Zusammenhang mit dem Fragebogen und seinen Daten

$opseDataReader - survey_ospe_data_reader
Funktionen im Zusammenhang mit der Umfrage und dem Zugang zu Nutzer- und Personendaten

$questionInfo - Array
Beinhaltet die Einstellungen für die Fragen wie zum Beispiel den Fragetext. Möglicher Zugriff:

$questionInfo['q_text'] = $questionInfo['q_text'] . " Question text addition";

Layout-Subrelease-Unterstützung

Für alle benutzerdefinierten Fragetypen gibt es den Konfigurationsabschnitt "Layout-Subrelease-Unterstützung". Bitte testen Sie Ihren Fragetyp und wählen Sie hier alle unterstützten Layout-Versionen dafür aus, um den benutzerdefinierten Fragetyp in einer neueren Layout-Version (z.B. RL 3.1) verwenden zu können.

Ressourcen

Im Menü Ressourcen können Sie Dateien hochladen und verwalten, die Sie für Ihren Fragetyp benötigen. Ressourcen können in zwei Kategorien unterschieden werden:

• Dateien, die Sie als Standardressourcen zur Verfügung stellen möchten (Bilder, Audio- oder Videodateien).

• Dateien, die in den Code integriert werden müssen (z.B. JavaScript Bibliotheken). Alle Dateien müssen zunächst über das Upload-Icon hochgeladen werden.

Eine Ressource als Option verwenden

Nachdem einige Dateien im Ressourcen Menü hochgeladen wurden, können diese auch im Optionen Menü in Optionen des Typs „Ressource“ weiterverwendet werden.

Für unser Beispiel nehmen wir das hochgeladene Beispielbild als Standardwert für eine Ressource-Option.

1. Gehen Sie hierfür zum Einstellungen Menü, in den Bereich Optionen des Fragetyps und klicken Sie innerhalb einer Optionsgruppe auf Option hinzufügen.

2. Wählen Sie „Ressource“ im Drop-Down-Menü und geben Sie einen Optionennamen, das Label und den Hilfe Text ein.

3. Wählen Sie die Datei „test.jpg“ aus, um es als Standardwert festzulegen.

Wenn Sie nun in einer Umfrage eine neue Frage Ihres Fragetyps erstellen, sehen Sie das entsprechende Bild als Standardvoreinstellung.

Um in Ihrer Vorlage an das Bild zu kommen, geben Sie Folgendes ein (ohne Zeilenumbrüche):

Open

Genauso können Sie in der JavaScript-Datei Folgendes eingeben:

Open

Eine Ressource direkt verwenden

Für den zweiten Anwendungsfall wird eine hochgeladene Ressourcendatei direkt verwendet. Das bedeutet, dass Sie eine Datei einbinden, die vom Anwender nicht angepasst werden kann. (Dies steht im Gegensatz zum ersten Anwendungsfall, in dem der Anwender die Ressource als Wert für eine Option auswählen kann.)

In der Vorlage können Sie die Datei wie folgt einbinden (ohne Zeilenumbrüche):

Open

Wenn Sie die Beispieldatei “test.js” ins JavaScript laden möchten, geben Sie Folgendes ein:

Open