Kapitel 19. PackagingQ: Verpackungskonfigurator

Abbildung 19.1. Verpackungskonfigurator

Mit dem Verpackungskonfigurator bzw. der PackgingQ lassen sich Layouts (z.B. von Verpackungen) mit verschiedenen Bildelementen beliebig vom Befragten zusammenstellen, betrachten und auswählen. Abbildung 19.1, „Verpackungskonfigurator“ zeigt einen beispielhaften Anwendungsfall. In der folgenden Beschreibung werden die Funktionalitäten und Möglichkeiten der Darstellung erläutert. Hierbei ist häufig die Rede von Gruppen. Eine Gruppe ist immer eine bestimmte Anzahl gleichartiger Bildelemente von denen genau eines ausgewählt werden kann. Die beispielhafte Abbildung zeigt 4 Gruppen: Das grundsätzliche Aussehen der Verpackung, farbige Schriftzüge »NEU«, weiße Schriftzüge »Edelbitter« und das Bio-Siegel.

Um die PackagingQ zu verwenden, sollte die GESS Javascript Bibliothek gesstmpl.js im Template eingebunden werden, siehe „ Die GESS Javascript Bibliothek gesstmpl.js “. Diese ist für Fading-Effekte notwendig. Außerdem müssen die zu verwendenden Bilder im Mediapfad der zugehörigen Umfrage (./media/<Name der Umfrage>/) hinterlegt werden. Alle Bilder müssen die gleiche Größe und, abgesehen von der untersten Bildebene, transparente Hintergründe besitzen. Transparenz gibt es z.B. bei den Bildformaten .png und .gif.

Die PackagingQ ist eine Alternative zur MultiQ und kann an deren Stelle mit folgender Skriptanweisung verwendet werden:

  HTML{ multiQClass = PackagingQ; };
    

Die nun beschriebenen Funktionalitäten werden zum besseren Verständnis im abschließenden Beispielcode demonstriert.

Sämtliche Einstellungen der PackagingQ werden mit Hilfe des setProperty() Mechanismus vorgenommen, siehe auch „Q. Skript“. Die Parameter beginnen mit dem Kürzel pg_ und lassen sich in drei Kategorien unterteilen:

Bildfläche / Korpus

Mit den folgenden Parametern lassen sich Breite, Höhe, Hintergrund und Abstände zur zentralen Anzeigefläche einstellen.

Gruppierungsoptionen

Mit den folgenden Parametern lässt sich einstellen, in welchen Gruppen, wo und ob die Labels um die zentrale Anzeigefläche dargestellt werden sollen.

Einstellungen des Sichtbarkeitsmenüs

Optional kann ein Sichtbarkeitsmenü angezeigt werden. Ist es aktiviert, wird für jede Gruppe ein anklickbares Feld angezeigt, mit dem die korrespondierende Gruppe ein- und alle anderen Gruppen ausgeblendet werden.

Korrespondenz Label - Grafik

Damit die Anbindung der Label an die entsprechenden Bilder definiert werden kann, steht im Labeltext das Schlüsselwort @target( <NAME> ) zur Verfügung, wobei NAME der Dateiname des im Mediapfad der Umfrage hinterlegten Bilds mit Dateiendung ist. Nun zeigt das Label (unabhängig vom Inhalt) beim Anklicken das Zielbild an. Ansonsten kann im Labeltext beliebig mit oder ohne HTML gearbeitet werden. So lässt sich zum Beispiel auch problemlos eine kleine Grafikvorschau einbinden.

Randomisierung und Filter

An die Label lassen sich beliebig Filter und Randomisierungen anfügen. Einzige Besonderheit ist, dass sich die Randomisierungen nur auf die Label innerhalb der Gruppen beziehen. Es wird also nicht gruppenübergreifend gemischt.

Optische Gestaltung mit CSS

Es gibt 3 unterschiedliche Stellen mit CSS-Klassen^[6] innerhalb der PackagingQ, über die beliebige optische Gestaltungen vorgenommen werden können:

Die Namen der Klassen werden wie folgt gebildet:

CSS Gestaltungen können entweder ins Template oder bei ausgeschaltetem Textersatz enableTextReplace=no; direkt in den Text- oder Titelbereich der entsprechenden Frage geschrieben werden. Letzteres ist beispielhaft im folgenden Beispielcode aufgeführt.

Code für das Beispiel aus Abbildung 19.1, „Verpackungskonfigurator“. Der Mediapfad wurde aus Platzgründen abgekürzt:

HTML{
setProperty("pg_grouping" "3 4 3 3");
setProperty("pg_orientations" "left top right bottom");
//  setProperty("pg_visibility" "visible hidden hidden hidden");
setProperty("pg_corpus" "corpus0.png");
setProperty("pg_corpus_padding" "25");
setProperty("pg_width" "500");
setProperty("pg_height" "399");
setProperty("pg_fading" "500");
//  setProperty("pg_group_names" "Verpackung Edelbitter NEU Siegel");
//  setProperty("pg_visibility_menu" "yes");
//  setProperty("pg_visibility_menu_orientation" "top");
};
enableTextReplace=no;

multiq m1;
text="
Bitte benutzen Sie die PackagingQ.
<style type='text/css'>
.m1_labels_group_1, .m1_labels_group_2, .m1_labels_group_3,
.m1_labels_group_4, .m1_menu_item{
margin:1px; border:1px solid #000000; background:#888888;
}
.m1_menu_item{
float:left;
width:100px; padding:5px; background:#eeeeee;
}
.m1_menu{
display:inline-block;
}
//    .m1_left_groups{vertical-align:top;}
//    .m1_right_groups{vertical-align:bottom;}
</style>  
";
labels=
51 "@target(corp.png)  <img width='125px' src='./(...)/corp.png'>"  random
52 "@target(corp1.png) <img width='125px' src='./(...)/corp1.png'>" random
53 "@target(corp2.png) <img width='125px' src='./(...)/corp2.png'>" random
1  "@target(text1.png) <img width='125px' src='./(...)/text1.png'>" random
2  "@target(text2.png) <img width='125px' src='./(...)/text2.png'>" random
3  "@target(text3.png) <img width='125px' src='./(...)/text3.png'>" random
4  "@target(text4.png) <img width='125px' src='./(...)/text4.png'>" random
21 "@target(neu1.png)  <img width='125px' src='./(...)/neu1.png'>"  random
22 "@target(neu2.png)  <img width='125px' src='./(...)/neu2.png'>"  random
23 "@target(neu3.png)  <img width='125px' src='./(...)/neu3.png'>"  random
32 "@target(bio2.png)  <img width='125px' src='./(...)/bio2.png'>"  random
33 "@target(bio3.png)  <img width='125px' src='./(...)/bio3.png'>"  random
34 "@target(bio4.png)  <img width='125px' src='./(...)/bio4.png'>"  random
;