====== Benutzerdefinierte Auswahlfelder ======

Im [[:de:create:layout|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 Mehrfachauswahl^Grafik-Set mit einheitlicher Darstellung aller Auswahlfelder^
|{{:de:create:exp.inputs-custom.medium.png?nolink|Grafik-Set für größere Eingabefelder}}|{{:de:create:exp.inputs-custom.circles.png?nolink|Grafik-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:

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

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

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

<code html>
</div>
</code>

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

<code html>
<script type="text/javascript">
<!--
document.getElementById("AB01_021").classList.add("preventCustomInputs");
// -->
</script>
</code>