Übersetzungen dieser Seite:
 

Benutzerdefinierte Auswahlfelder

Im Fragebogen-Layout stehen im Karteireiter Grundeinstellungen bei Art der Auswahlfelder bereits unterschiedliche Darstellungsvarianten für Auswahlfelder zur Verfügung. Mit der Option „Benutzerdefinierte Auswahlfelder“ lassen sich auch eigene Darstellungen realisieren.

  • Erstellen Sie dafür eine Grafik (Grafik-Set) entsprechend den unten stehenden Vorgaben.
  • Laden Sie die Grafik mittels Bilder und Mediendateien in das Befragungsprojekt hoch (dabei nicht die geschützte Dateiablage verwenden).
  • Wählen Sie die Grafik im Layout unter Art der Auswahlfelder → „Benutzerdefinierte Auswahlfelder“ als Grafik-Set aus.

Nach dem Speichern des Layouts werden in der Layout-Vorschau (unten) die neuen Auswahlfelder angezeigt.

Hinweis: Viele Teilnehmer sind die Standard-Eingabefelder ihres Betriebssystems gewohnt. Andere Eingabefelder können für Irritationen sorgen. So unterscheidet Windows z.B. deutlich zwischen einfachen Auswahlfeldern (rund) und Mehrfach-Auswahlfeldern (quadratisch), andere Betriebssysteme verwenden keine visuelle Unterscheidung.

Hinweis: Auf hochauflösenden Displays (z.B. auf Mobilgeräten) wirken benutzerdefinierte Eingabefelder unter Umständen ein wenig pixlig/unscharf.

Vorgaben für das Grafik-Set

  • Alle Grafiken, die für benutzerdefinierte Auswahlfelder benötigt werden, sind auf einer Grafik der Gesamtgröße 96 x 256 Pixel in einem 32-Pixel-Raster untergebracht.
  • Auf dem Raster sind die notwendigen Elemente wie unten dargestellt angeordnet.
  • Innerhalb jeder Rasterzelle wird das Bild links oben platziert. Wie viel von der Rasterzelle angezeigt werden, bestimmt die Angaben Seitenlänge im Layout.
Auswahlfeld
(radio button)
Mehrfachauswahl
(checkbox)
Sonstiges
nicht gewählt
Standard
nicht gewählt
Standard
Kategorie in
erweiterter Auswahl
ausgewählt
Standard
ausgewählt
Standard
nicht
benutzt
nicht ausgewählt
fokussiert
nicht ausgewählt
fokussiert
nicht
benutzt
ausgewählt
fokussiert
ausgewählt
fokussiert
nicht
benutzt
nicht ausgewählt
Mausberührung
nicht ausgewählt
Mausberührung
nicht
benutzt
ausgewählt
Mausberührung
ausgewählt
Mausberührung
nicht
benutzt
nicht ausgewählt
Deaktiviert
nicht ausgewählt
Deaktiviert
nicht
benutzt
ausgewählt
Deaktiviert
ausgewählt
Deaktiviert
nicht
benutzt

Ein fertiges Grafik-Set sieht z.B. aus wie folgt (nur mit transparentem Hintergrund und ohne Hilfslinien und Rahmen).

Grafik-Set mit unterschiedlicher Darstellung von einfacher Auswahl und MehrfachauswahlGrafik-Set mit einheitlicher Darstellung aller Auswahlfelder
Grafik-Set für größere EingabefelderGrafik-Set für Kreise mit Kreuzchen (undifferenziert)

Selektive Deaktivierung

Die benutzerdefinierte Modifikation kann für einzelne Fragen oder Auswahlfelder deaktiviert werden. Dazu muss das Auswahlfeld die CSS-Klasse „preventCustomInputs“ tragen oder in einem Element stehen, welches diese Klasse trägt.

Für ganze Fragen bietet es sich an, ein <div> HTML-Element zu verwenden:

html('<div class="preventCustomInputs">');
question('AB01');
html('</div>');

Alternativ zum obigen PHP-Code könnten Sie die Frage auch in den Fragebogen hineinziehen und davor und dahinter HTML-Code Elemente platzieren:

<div class="preventCustomInputs">
</div>

Um einzelne Eingabefelder in der Standard-Darstellung zu zeigen, bietet sich JavaScript an. Der folgende JavaScript-Code würde das Eingabefeld AB01_021 regulär anzeigen, wenn er unter der Frage platziert wird.

<script type="text/javascript">
<!--
document.getElementById("AB01_021").classList.add("preventCustomInputs");
// -->
</script>
de/create/layout-inputs.txt · Zuletzt geändert: 13.05.2015 10:19 von admin
 
Falls nicht anders bezeichnet, ist der Inhalt dieses Wikis unter der folgenden Lizenz veröffentlicht: CC Attribution-Share Alike 4.0 International
Driven by DokuWiki