SVG als Auswahl

Dieser Fragetyp erlaubt die Verwendung einer beliebigen Vektorgrafik im SVG-Format als Auswahlfrage. Jedes Element innerhalb der Grafik (z.B. ein Rechteck oder ein Kreis) kann als Auswahloption dienen und entsprechend durch den Teilnehmer markiert werden.

Warnung: Ältere Browser können SVG-Grafiken nicht oder nicht korrekt darstellen.

Die Elemente in der Grafik, welche später als Auswahlknöpfe dienen sollen, benötigen eine ID. Diese wird von der Zeichen-Software (z.B. das freie Inkscape) in aller Regel automatisch vergeben. Speichern Sie die Vektorgrafik im Internet-tauglichen Dateiformat SVG.

Tipp: PDF-Dateien kann man in Inkscape öffnen, um sie in SVG-Dateien zum konvertieren. Mit dem Onlinedienst SVGOMG lassen sich anschließend noch unsichtbare Artefakte in der Datei entfernen, was die Dateigröße mitunter massiv reduziert.

Tipp: PowerPoint-Dateien kann man als PDF drucken und anschließend wie oben beschrieben verwenden.

Falls Sie in der SVG-Datei Texte verwenden, möchten Sie vielleicht verhindern, dass diese direkt angeklickt werden und/oder dass sie als Text markiert werden. Um das zu erreichen, öffnen Sie die SVG-Datei in einem Texteditor und tragen Sie direkt nach dem öffnenen <svg> Tag ein <style> Tag ein bzw. ergänzen Sie ein vorhandenes <style> Tag wie folgt:

<style>
  /* <![CDATA[ */
  text {
   pointer-events: none;
   user-select: none;
   -webkit-user-select: none;
   -moz-user-select: none;
  }
  /* ]]> */
</style>

Laden Sie zunächst die SVG-Datei unter Bilder und Mediendateien in Ihr Projektverzeichnis hoch.

Legen Sie dann eine neue Frage vom Typ „SVG als Auswahl“ an. Wählen Sie für Grafikdatei (SVG) die eben hochgeladene Datei aus. Nach dem Speichern () ermittelt SoSci Survey automatisch die im SVG hinterlegte Bildgröße in Pixeln.

Nach dem Speichern der Frage zeigt SoSci Survey außerdem eine Vorschau der SVG-Datei an. Wenn Sie mit der Maus über die Vorschau fahren, wird darunter die ID des jeweils aktiven SVG-Elements angezeigt sowie die übergeordneten Elemente.

Klicken Sie auf ein Element, um dessen ID automatisch in der Item-Schnelleingabe (unten) einzutragen. Ergänzen Sie noch eine Beschreibung für die Auswahloption (diese wird u.a. als Tooltip angezeigt, wenn der Teilnehmer über die Option fährt) und klicken Sie auf das nächste Element, um mit diesem fortzufahren.

Tipp: Verwenden Sie nur Flächenelemente (Rechteck, Kreis, Polygon, …) als Elemente für die Auswahl. Prinzipiell können zwar auch Gruppen und Texte verwendet werden, aber bei diesen sieht man die Auswahl nicht, weil sie weder Rahmen noch Hintergrundfarbe besitzen.

Wenn die Maus über ein auswählbares Element fährt oder der Teilnehmer ein Element durch Anklicken auswählt, dann verändert das Element seine Farbe. Welche Farben SoSci Survey als Rahmen- und Hintergrundfarbe verwendet können Sie im Fragebogen-Layout einstellen im Karteireiter Fragebogen-Elemente → Auswahl-Taster.

Falls Sie diese Einstellung im Layout nicht generell ändern möchten (sie betrifft z.B. auch Auswahlfragen, die als Kärtchen dargestellt werden), können Sie im Karteireiter HTML-Vorlage des Layouts im <style>-Bereich auch Definitionen für SelBox.svg, SelBox.svg.hover und SelBox.svg.selected hinterlegen. Für die Formatierung der Auswahl wird die Rahmenfarbe (border-color) und die Hintergrundfarbe (background-color) verwendet. Ändern Sie die Rahmenbreite bei Bedarf direkt in der SVG-Grafik.

Die SVG-Auswahl besitzt eine Eigenschaft 'disabled', mit der das Aus- oder Abwählen der Auswahloptionen blockiert werden kann. Dafür muss die Eigenschaft auf 'select' oder 'unselect' gesetzt werden. Ein Auslesen der Eigenschaft ist nicht möglich.

Der folgende HTML-/JavaScript-Code blockiert das Abwählen von einmal ausgewählten Optionen in der Frage „AB01“. Der Code muss auf derselben Seite wie die Frage platziert werden, das „AB01“ muss ggf. durch die Kennung der Frage ersetzt werden.

<script type="text/javascript">
<!--
 
window.addEventListener("load", function() {
    SoSciTools.questionnaire.AB01.disabled = "unselect";
});
 
// -->
</script>

Die einzelnen Optionen können über versteckte Eingabefelder im Hintergrund gesteuert werden. Um die zweite Option in „AB01“ zu aktivieren verwenden Sie folgenden JavaScript-Code.

document.getElementById("AB01_02").checked = true;

Klicks auf die Optionen können anhand des 'click'-Events der versteckten Eingabefelder abgefangen und verarbeitet werden.

document.getElementById("AB01_03").addEventListener("click", function(evt) {
    console.log("Klick auf Option 3");
});