Kapitel 20. Weitere grafische Komponenten

Versierte Benutzer können im text, im title und in den labels jeder Frage Skripte und HTML einfügen und so ihrer Kreativität freien Lauf lassen. Dieser Abschnitt beschäftigt sich mit unterschiedlichsten Komponenten, die Anregungen geben können oder dabei helfen die Darstellung innerhalb einer Onlineumfrage auch ohne tiefgreifende Kenntnisse in HTML o.Ä. den Wünschen entsprechend anzupassen. Da das Internet ein sich ständig weiterentwickelndes Medium ist, können wir an dieser Stelle nur eine Auswahl an Möglichkeiten anbieten - ohne Gewährleistung, dass diese unbegrenzt lange den aktuellen Stardards der Webtechnologie entsprechen. Wir sind jederzeit ansprechbar und helfen gern bei der Umsetzung individueller Vorstellungen.

Abbildung 20.1. Bildvorschau mit Thumbnails

In der HTML Welt versteht man unter Thumbnails kleine Vorschaubilder, die beim Anklicken mit der Maus eine größere Bildansicht öffnen. Wie in Abbildung 20.1, „Bildvorschau mit Thumbnails“ zu sehen, öffnet unsere Variante ein halbtransparentes Layer, welches beim Klick auf das große Bild wieder geschlossen wird. Es füllt die vollständige Bildschirmansicht aus und bleibt auch beim Scrollen des Bildschirmausschnitts immer im Vordergrund. Das Bild wird in Originalgröße angezeigt. Maximal jedoch so groß, wie es die sichtbare Browserfläche zulässt.

TextQ s1;
Text="(1) Bild als Thumbnail mit Vorschau (Javascript)";
Title="
Zum Vergrößern der Ansicht bitte auf das Bild klicken.<br>
<script type='text/javascript'>
insertLayer();
addImage('./media/@insert(_surveyname)/001s.jpg','./media/@insert(_surveyname)/001b.jpg');
addImage('./media/@insert(_surveyname)/002s.jpg','./media/@insert(_surveyname)/002b.jpg');
addImage('./media/@insert(_surveyname)/003s.jpg','./media/@insert(_surveyname)/003b.jpg');
addImage('./media/@insert(_surveyname)/004s.jpg','./media/@insert(_surveyname)/004b.jpg');
addImage('./media/@insert(_surveyname)/005s.jpg','./media/@insert(_surveyname)/005b.jpg');
</script>
";
      

Dieser Abschnitt befasst sich mit der Integration von Videos in die Umfrage. Die technischen Voraussetzungen, die Vielfalt der Browser und mobile Geräte machen einem das Leben schwer. Spätestens seit dem Aufkommen von internetfähigen Mobilgeräten wie Smartphones und Tablets kann die Wahl nicht mehr auf lange Zeit verbreitete Flash-Player fallen, da diese auf solchen Geräten grundsätzlich nicht unterstützt werden. GESS Q. bietet eine simple Schnittstelle, die aktuelle HTML5 Standards mit einer Fallback- Lösung zu Flash einsetzt.

Im Rahmen der GESS Q. Android sei auf den integrierten Mediaplayer der App verwiesen, der zum Abspielen von Videos bestens geeignet ist.

textq video;
text="Video Demo";
title="<div id='example_video'></div>";
javascript="
  QDot.videoplayer.video.path   = './media/@insert(_surveyname)';
  QDot.videoplayer.video.name   = 'big_buck_bunny';
  QDot.videoplayer.create($('#example_video'));
";
        

QDot.videoplayer.video.path   = './media/@insert(_surveyname)';
QDot.videoplayer.video.name   = 'big_buck_bunny';
QDot.videoplayer.video.width  = 640;
QDot.videoplayer.video.height = 360;
QDot.videoplayer.features     = ['playpause','progress','current',
                                 'duration','volume','fullscreen'];
QDot.videoplayer.settings     = function(player){
  player.play();                                                       // AUTOSTART
  $(player).bind('ended', function(){ $('form')[0].submit(); });       // AUTOSUBMIT
  $(player).bind('ended', function(){ $('#continuebutton').show(); }); // CONTINUEBUTTON
}
QDot.videoplayer.create($('#example_video'));
      

Die Audioeinbindung in GESS Q. funktioniert analog zur Videoeinbindung, dessen Kapitel detaillierte Ausführung zu den hier kurz gefassten Informationen entnommen werden können.

textq audio;
text="Audio Demo";
title="<div id='example_audio'></div>";
javascript="
  QDot.audioplayer.audio.path   = './media/@insert(_surveyname)';
  QDot.audioplayer.audio.name   = 'bing';
  QDot.audioplayer.create($('#example_audio'));
";
        

QDot.audioplayer.audio.path   = './media/@insert(_surveyname)';
QDot.audioplayer.audio.name   = 'bing';
QDot.audioplayer.audio.width  = 300;
QDot.audioplayer.audio.height = 30;
QDot.audioplayer.features     = ['playpause','progress','current','duration','volume'];
QDot.audioplayer.settings     = function(player){
  player.play();                                                       // AUTOSTART
  $(player).bind('ended', function(){ $('form')[0].submit(); });       // AUTOSUBMIT
  $(player).bind('ended', function(){ $('#continuebutton').show(); }); // CONTINUEBUTTON
}
QDot.audioplayer.create($('#example_audio'));
      

Bei bestimmten Fragestellungen kann es innerhalb eines Screens sinnvoll sein, andere Fragen nur bedingt einzublenden. Wird der Teilnehmer gefragt, ob er berufstätig ist, soll eine präzisierende Folgefrage nur dann angezeigt werden, wenn er auf ’Ja’ klickt, siehe auch Abb. Abbildung 20.2, „Dynamisches Ein-/Ausblenden von Fragen“.

Abbildung 20.2. Dynamisches Ein-/Ausblenden von Fragen

singleq f3;
text="Dies ist eine unsinnige Beispielfrage...";
labels=
1 "Ja"
2 "Nein"
3 "Vielleicht"
;
jsHandler="hideq('f3', qsToHide, hideLabels)";  // (2)
javascript="
  qsToHide = new Array('f4', 'f5');       // (1)
  hideLabels = new Array('1', '3');       // (1)
  $(document).ready( function(){ hideq('f3', qsToHide, hideLabels); } );    // (3)
";

singleq f4;
title="blabla";
labels=
1 "1"
2 "2"
3 "3"
;

openq f5;
title ="Wenn ja oder vielleicht, warum?";


screen scr = column(f3 f4 f5);
      

Das klassische Tachistoskop zeigt dem Befragten für einen kurzen Zeitraum einen Text, ein Bild oder Ähnliches und lässt es gleich wieder verschwinden. Anschließend können die besonders auffälligen Elemente oder Blickfänge abgefragt werden. Diese Option stellt Q. mit Variante 2 bereit, siehe Abbildung 20.4, „Tachistoskop Variante 2 (klassisch)“. Zusätzlich ist es möglich den Befragten innerhalb eines bestimmten Zeitraums Antworten abzuverlangen (Variante 1), siehe Abbildung 20.3, „Tachistoskop Variante 1“.

Tachistoskop Variante 1 (Timer)

Abbildung 20.3. Tachistoskop Variante 1

Grundsätzlich muss im Skript lediglich im text oder im title folgender Javascript-Code geschrieben werden:

defaultnomissing=yes;
SingleQ tachisto1;
text="
<script type='text/javascript'>
var qname = 'tachisto1';
var input=\"Text, Bild, Video, ...\"+
       \"weiter...\";
var tVisib = 'visible';
var tTime = 10000;
var tWait = 1000;
var tWidth = 500;
var tHeight = 10;
var tColor = '#990134';
addTachistoCode(qname,input,tVisib,tTime,tWait,tWidth,tHeight,tColor);
</script>
";
labels=
1 "Ja, das gefällt mir"
2 "Nein, das möchte ich nicht"
;
javascript="hide_labels('tachisto1')";
defaultnomissing=no;
      

Der Javascript-Code besteht aus zwei Teilen. Zuerst werden Parameter eingestellt (im Beispiel beginnend mit var); Diese werden anschließend der Funktion addTachistoCode(...) übergeben. Die Namen der Parameter sind frei wählbar, müssen jedoch in fest vorgeschriebener Reihenfolge an die Funktion übergeben werden. Die Bedeutung der Parameter wird nun anhand der im Beispiel vergebenen Namen erläutert:

qname

Der Name der aufrufenden Frage im Q. Skript.

input

Der im Tachistoskop darzustellende Inhalt. Soll sich der Inhalt von input über mehrere Zeilen erstrecken muss ein Zeilenende mit ∖"+  und ein neuer Zeilenanfang mit  ∖" gekennzeichnet werden.

tVisib

Stellt ein, ob die Zeit in Form einer kleiner werdenden horizontalen Leiste unter dem Inhalt dargestellt werden soll. Optionen: visible ∣ hidden.

tTime

Zeit in ms, die zur Antwort zur Verfügung stehen.

tWait

Zeit in ms, ab wann die Antwortmöglichkeiten sichtbar werden. Hierzu müssen die Antwortlabels zuvor mittels der im Beispiel ersichtlichen htmlPostText Anweisung ausgeblendet werden. Dies übernimmt die Funktion hide_labels(), welche in Hochkommata den Namen der zugehörigen Frage übergeben bekommt.

tWidth

Breite der Zeitleiste in Pixel.

tHeight

Höhe der Zeitleiste in Pixel.

tColor

Farbe der Zeitleiste in Pixel.

Nach Ablauf der Zeit tTime wird automatisch ein Klick auf den Weiterbutton ausgelöst. Sollte der Befragte zu diesem Zeit keine Antwort gegeben haben, soll er i.d.R. auch ohne Antwort zur nächsten Frage weitergeleitet werden. Damit das funktioniert, muss im Q.Skript der Parameter defaultnomissing auf yes gestellt sein.

Tachistoskop Variante 2 (klassisch)

Abbildung 20.4. Tachistoskop Variante 2 (klassisch)

Auch für das klassische Tachistoskop gilt, dass grundsätzlich nur folgender Javascript-Code in den text oder title einer beliebigen Frage geschrieben werden muss:

SingleQ tachisto2;
text="
<script type='text/javascript'>
var qname = 'tachisto2';
var input=\"Text, Bild, Video, ...\"+
       \"weiter...\";
var tTime = 1000;
var tWait = 1000;
addTachisto2(qname, input, tTime, tWait);
</script>
";
labels=
1 "Ich habe auf dem Bild ein Pferd gesehen"
2 "Ich habe auf dem Bild einen Esel gesehen"
;
javascript="hide_labels('tachisto2')";

      

Der Javascript-Code besteht aus zwei Teilen. Zuerst werden Parameter eingestellt (im Beispiel beginnend mit var); Diese werden anschließend der Funktion addTachisto2(...) übergeben. Die Namen der Parameter sind frei wählbar, müssen jedoch in fest vorgeschriebener Reihenfolge an die Funktion übergeben werden. Die Bedeutung der Parameter wird nun anhand der im Beispiel vergebenen Namen erläutert:

qname

Der Name der aufrufenden Frage im Q. Skript.

input

Der im Tachistoskop darzustellende Inhalt. Soll sich der Inhalt von input über mehrere Zeilen erstrecken muss ein Zeilenende mit ∖"+ und ein neuer Zeilenanfang mit ∖" gekennzeichnet werden.

tTime

Zeit in ms, wie lange der Inhalt angezeigt werden soll.

tWait

Zeit in ms, ab wann die Antwortmöglichkeiten sichtbar werden. Hierzu müssen die Antwortlabels zuvor mittels der im Beispiel ersichtlichen htmlPostText Anweisung ausgeblendet werden. Das übernimmt die Funktion hide_labels(), die in Hochkommata den Namen der zugehörigen Frage übergeben bekommt.

Oft sollen Befragte angeben, welche Bereiche sie in einem Bild besonders gut oder schlecht finden oder was ihnen ins Auge sticht. Hierfür bietet Q, zwei unterschiedliche Varianten an.

Mit dem HeatPlotter kann ein Bereich im Bild direkt markiert werden. Per Mausklick können so beliebig viele Stellen ausgewählt und als XY-Koordinaten in einer JSON-Liste gespeichert werden. Durch den Remove-Button unterhalb des Bildes kann immer die letzte Markierung gelöscht werden.

Abbildung 20.5. Heatplotter: Bildpunkte markieren

OpenQ f1;
text="Bitte markieren Sie die schönen Stellen";
title="<img id='maus' src='./media/@insert(_surveyname)/maus.png' />";
coordinates(10);
assert (numCoords(f1) ge 3 and numCoords(f1) le 10) "3-10 Markierungen";
javascript = "
  QDot.heatplotter.create('f1', 'maus');
  QDot.heatplotter.maxCoords = 10;
  // QDot.heatplotter.indicator = './media/@insert(_surveyname)/kreis.png';
  // QDot.heatplotter.removeButtonTxt = 'Remove last';
  
  // QDot.heatplotter.drawImages('@insert(f0)', './@insert(_surveyname)/kreis.png');
  // QDot.heatplotter.restrict = function(coords){
  //   coords.y = 0;
  //   return coords;
  //   // return undefined; // wenn Klick verworfen werden soll
  // };
";
    

Für die Umsetzung benutzt Q. intern eine OpenQ, deren Eingabefeld versteckt wird und die für jeden Klick auf das Bild ein Koordinatenpaare speichert. Im title-Feld wird das gewünschte Bild als HTML <img> eingelesen. Dabei ist es wichtig, eine entsprechende ID zu vergeben (hier z.B. id='maus').

Mit der Anweisung coordinates prüft der Server die Koordinatensyntax im versteckten Eingabefeld. Außerdem begrenzt der Parameter »NUM« die Klickfunktion auf den angegebenen Wert. Dadurch kann Q. fehlerhafte Angaben, wie z.B. Texteingaben, aussortieren. Der Inhalt des offenen Feldes wird in diesem Fall gelöscht und eine Fehlermeldung ausgegeben.

	Coordinates(NUM);
    

Für Bedingungen (z.B. Asserts) steht die neue Funktion numCoords zur Verfügung, Mit dem Fragenamen als Parameter liefert sie zurück, wie viele Koordinaten angegeben wurden.

	numCoords(OPENQ)
    

Mit xCoord wird der X-Wert eines bestimmten Punktes zurückgeliefert. Der Index weist den entsprechenden Punkt zu (1 = 1. Punkt, 2= 2. Punkt, ... ).

	xCoord(OPENQ, Index)
    

Mit yCoord wird der Y-Wert eines bestimmten Punktes zurückgeliefert. Der Index weist den entsprechenden Punkt zu (1 = 1. Punkt, 2= 2. Punkt, ... ).

	yCoord(OPENQ, Index)
    

Mit der Javascript-Anweisung QDot.heatplotter.create generiert Q. den HeatPlotter und versteckt das offene Feld, in dem die XY-Koordinaten gespeichert werden.

	QDot.heatplotter.create('OPENQ', 'Bild-ID');       	 
    

Die zweite Javascript-Anweisung QDot.heatplotter.maxCoords legt die maximal mögliche Anzahl an Markierungen fest.

	QDot.heatplotter.maxCoords  = NUM;
    

Der Heatplotter-Mechanismus kennt noch zwei optionale Parameter. QDot.heatplotter.removeButtonTxt ersetzt den voreingestellten Text des Remove-Buttons ("Letzte Markierung entfernen").

	QDot.heatplotter.removeButtonTxt  = 'TEXT';
    

Außerdem kann das Bild für die Markierung der gewählten Stelle durch eine andere Vorgabe für QDot.heatplotter.indicator geändert werden. Die Größe des Bildes ist beliebig. Voreingestellt ist das Fadenkreuz (16x16px).

	QDot.heatplotter.indicator = 'MEDIAPFAD';
    

Des Weiteren können mit QDot.heatplotter.drawImages fixe Elemente (Punkte aus vorherigen Heatplotter-Fragen o.ä.) eingezeichnet werden. Zwischen die ersten Hochkommata kann mit @insert() der Wert einer Variablen eingeblendet werden. In den zweiten Hochkommata steht der dazugehörige Mediapfad des Indicators. Diese Einblendung beeiflusst die übrigen Angaben (z.B. maximale Anzahl der Markierungen) nicht.

  QDot.heatplotter.drawImages('@insert(VARIABLE)', './images/kreis.png');
    

Die CSS-Klasse steuert, ob die HeatPlotter Markierung vor oder hinter dem Zielbild eingezeichnet wird. Wenn diese vor dem Zielbild liegt, ist die Fläche für weitere Punkte belegt und nicht erneut anklickbar.

  heatplotter-drawn-image (CSS-Klasse)
    

Über die restrict-Funktion QDot.heatplotter.restrict kann in die Positionierung eingegriffen werden. Dies ist hilfreich, wenn z.B. nur bestimmte Teile des Bildes klickbar sein sollen, erfordert jedoch Kenntnisse in Javascript.

  QDot.heatplotter.restrict = function(coords){
    BEDINGUNG    
  };  
    

  QDot.heatplotter.restrict = function(coords){
    // Klickbaren Bereich einschränken 
    if(coords.y > 500){  // (Y-Koordinate muss Kleiner als 500 sein)
      return undefined;
    }
    // Zentrierung/Fixierung einer Achse 
    coords.x = 25;  // (x-Koordinate wird immer auf 25 gesetzt)
    return coords; 
  };  
    

Die vom Heatplotter aufgenommenen Koordinaten werden separat als X-Y-Koordinaten-Paare in den Datensatz gespielt. Pro Markierung entstehen so zwei neue Felder. Über die numerische Begrenzung im coordinates(NUM)-Befehl, wird die maximal vorgesehene Anzahl im Datensatz reserviert. Pro Fall wird vor die Koordinaten-Paare die jeweilige Anzahl der angegebenen Punkte ausgegeben.

ImageMaps sind sog. verweissensitive Grafiken. Mit Hilfe von verschiedenen online frei verfügbaren Tools (wie z.B. GIMP) lassen sich aus beliebigen Grafiken ImageMaps erzeugen. Sie werden mit einem frei definierbaren Raster überzogen, deren Bereiche auf Maus-Events reagieren können.

Abbildung 20.6. ImageMap

Abbildung 20.6, „ImageMap“ stellt beispielhaft ein Bild von einem Oldtimer als ImageMap mit seinem definierten Raster dar. Jeder farblich definierte Bereich versteht sich stellvertretend als Label.

Grundlage einer ImageMap ist eine SingleQ oder bei Mehrfachnennungen eine MultiQ. Das folgende Skriptbeispiel nutzt den Oldtimer als MultiQ:

multiq oldi1;
text="
  Schauen Sie sich das unten dargestellte Bild an.<br />
  Welcher Bereich gefällt Ihnen besonders gut.
";
title="Bitte berühren Sie die entsprechende Stelle im Bild.";
labels =
1  "der Blinker vorne links" 
2  "der Blinker vorne rechts"
3  "der Türgriff"
4  "das Trittbrett"
5  "der Reifen hinten links"
6  "die Felge vorne links"
7  "der Kühlergrill vorne"
8  "das Nummernschild"
9  "die Beifahrertür"
10 "das Fenster vorne links"
11 "das Fenster hinten links"
12 "die Motorhaube"
13 "der Kühlergrill links"
14 "der Scheinwerfer vorne links"
15 "der Scheinwerfer vorne rechts"
16 "die Figur"
17 "das Lenkrad"
18 "der Sonnenschutz"
19 "der Seitenspiegel vorne rechts"
20 "der Kotflügel hinten links"
21 "der Kotflügel vorne links"
;
css="
  .qtable {display:none; }
  canvas{
    border: 1px solid black;
    position: absolute;
    top: -621px;
    z-index:1;
  }
";
htmlposttext= "
  <img src='./media/@insert(_surveyname)/oldtimer/oldtime2.png' width='900' height='621' style='position:relative; z-index:2;' usemap='#map'/>
  <map style='display:block; position:relative;' name='map' id='map'>
    <canvas height='621px' width='900px'>Canvas is not supported by your browser.</canvas>
    <area shape='circle' qlabel='1'  class='mapPart' coords='718,443,21'  nohref='nohref' />
    <area shape='circle' qlabel='2'  class='mapPart' coords='830,404,19'  nohref='nohref' />
    <area shape='circle' qlabel='3'  class='mapPart' coords='200,188,12'  nohref='nohref' />
    <area shape='poly'   qlabel='4'  class='mapPart' coords='138,367,168,358,363,408,333,425,305,417'  nohref='nohref' />
    <area shape='poly'   qlabel='5'  class='mapPart' coords='41,270,86,269,110,369,91,426,37,398,29,309,41,270'  nohref='nohref' />
    <area shape='poly'   qlabel='6'  class='mapPart' coords='490,383,531,381,584,432,591,518,542,548,479,515,458,439,481,389,483,388,491,385'  nohref='nohref' />
    <area shape='poly'   qlabel='7'  class='mapPart' coords='665,233,684,227,711,228,715,247,712,320,658,336,672,297,666,272,654,260,660,238'  nohref='nohref' />
    <area shape='poly'   qlabel='8'  class='mapPart' coords='657,341,674,369,729,353,727,323'  nohref='nohref' />
    <area shape='poly'   qlabel='9'  class='mapPart' coords='203,203,310,212,327,379,210,348,201,203'  nohref='nohref' />
    <area shape='poly'   qlabel='10' class='mapPart' coords='215,71,215,72,306,65,301,176,211,169,211,70,212,71'  nohref='nohref' />
    <area shape='poly'   qlabel='11' class='mapPart' coords='114,67,183,68,183,169,113,161,112,160,113,65'  nohref='nohref' />
    <area shape='poly'   qlabel='12' class='mapPart' coords='419,219,634,241,659,196,493,177,427,190,425,192'  nohref='nohref' />
    <area shape='poly'   qlabel='13' class='mapPart' coords='421,336,431,250,591,272,587,295,501,281,425,334'  nohref='nohref' />
    <area shape='poly'   qlabel='14' class='mapPart' coords='619,261,647,261,667,282,662,326,646,336,612,307,597,291,605,264,616,261'  nohref='nohref' />
    <area shape='poly'   qlabel='15' class='mapPart' coords='732,249,759,250,774,266,764,310,750,319,723,315,716,278,722,247,731,250'  nohref='nohref' />
    <area shape='poly'   qlabel='16' class='mapPart' coords='693,200,689,201,674,201,665,182,682,154,702,187,695,197'  nohref='nohref' />
    <area shape='poly'   qlabel='17' class='mapPart' coords='405,155,463,159,456,135,433,129,415,136,402,142,399,155,402,154'  nohref='nohref' />
    <area shape='poly'   qlabel='18' class='mapPart' coords='329,52,369,79,542,93,508,71'  nohref='nohref' />
    <area shape='poly'   qlabel='19' class='mapPart' coords='517,167,520,135,503,130,498,165,503,170'  nohref='nohref' />
    <area shape='poly'   qlabel='20' class='mapPart' coords='18,306,57,237,93,274,112,352,157,348,124,264,100,218,41,231,21,269'  nohref='nohref' />
    <area shape='poly'   qlabel='21' class='mapPart' coords='392,410,441,331,509,309,576,325,623,385,658,392,673,378,642,331,572,290,506,288,438,322,404,371,396,401'  nohref='nohref' />
  </map>
";
javascript="
  qImageMap.defaultColor = 'rgba(0, 255, 0, 0.5)';
  qImageMap.onClick = function(q, id, isSingleQ, isMultiQ){
    // ...
  };
  qImageMap.makeQImageMap('VARIABLENNAME', 'MAP-ID');
";
    

Es handelt sich hierbei um eine ganz normale MultiQ, deren Labels auf die areas der ImageMap übertragen werden. Die übliche tabellarische Darstellung der MultiQ wird mit der CSS Angabe ausgeblendet, so dass nur noch die Grafik übrig bleibt.

Die Definition der Map wird fast vollständig von z.B. GIMP geliefert. Für Q. müssen nur noch zwei Zusatzinformationen hinzugefügt werden.

Mit qlabel werden die entsprechenden Werte der Labels vergeben, um diese eindeutig zuzuordnen.

  qlabel='LABELCODE'
    

class='mapPart' fügt eine CSS-Klasse ein. Dies ist für die gewünschte Darstellung unerlässlich.

Des Weiteren wird mit <canvas></canvas> eine eindeutige Malfläche über das gesamte Bild gespannt, über welche die grünen, halbtransparenten Flächen dargestellt werden.

Der Javascript-Befehl qImageMap.makeQImageMap aktiviert die Klick-Funktion und prüft, ob es sich um eine SingleQ oder MultiQ handelt.

  qImageMap.makeQImageMap('VARIABLENNAME', 'BILD-ID');
    

Mit dem Zusatz in qImageMap.defaultColor ist die Standardfarbe für das Highlighting veränderbar.

  qImageMap.defaultColor = 'FARBCODE';
    

Durch qImageMap.onClick kann das gesamte Highlighting-Verhalten auf Klick modifiziert werden. Diese Einstellung erfordert Kenntnisse in Javascript.

  qImageMap.onClick = function(q, id, isSingleQ, isMultiQ){
    BEDINGUNG
  };
    

Der 3D Rotation Viewer ist eine auf Javascript und Einzelbildern basierende Komponente, mit der es möglich ist, einen 3D-Effekt zu erzeugen. Objekte können per Maussteuerung oder Wischgesten (Android) gedreht oder Panoramaansichten geschaffen werden.

Abbildung 20.7. 3D Rotation Viewer

Abbildung 20.7, „3D Rotation Viewer“ stellt den 3D Rotation Viewer beispielhaft mit zwei Ansichten eines dreidimensionalen GESS Würfels dar. Das folgende Skriptbeispiel veranschaulicht die Einbindung:

textq bip;
text="Der GESS Würfel";
title="
<script type='text/javascript'>
insert3dRotationViewer('./media/SURVEYNAME/gess_wuerfel_[#frame].jpg', 50, 1);
// insert3dRotationViewer('./media/SURVEYNAME/gess_wuerfel_[#frame].jpg', 50, 0); 
</script>
    

Nachdem die Bilderserie im Medienordner der Studie hinterlegt wurde, kann der Viewer mit einem einzigen Javascript-Funktionsaufruf gestartet werden. Voraussetzung hierbei ist, dass die Dateinamen der Bilder, beginnend mit 01, zweistellige fortlaufende Nummern mit führenden Nullen enthalten, die beim Funktionsaufruf durch [#frame] repräsentiert werden.

Zum Beispiel: bild01.jpg, bild02.jpg, bild03.jpg, ... bild50.jpg.

Weiterhin wird dem Funktionsaufruf die Gesamtanzahl der Bilder (hier: 50) übergeben und zuletzt mit einer 1 oder 0 definiert, ob der Viewer nach der Ladezeit eine eigenständige, langsame 360° Drehung durchführen soll.

Zusätzlich lassen sich auch Bedienungsknöpfe einblenden. Das folgende Beispiel fügt 5 Buttons ein, mit denen der Viewer verschiedenen Animationen durchführt.

<div style=\"text-align:center;\">
<a href=\"javascript://\" class=\"linkedJs buttonLink\" title=\"spin (360,2700,
Uize.Curve.easeInOutPow (4))\">360 clockwise</a>
<a href=\"javascript://\" class=\"linkedJs buttonLink\" title=\"spin (-360,2700,
Uize.Curve.easeInOutPow (4))\">360 counter-clockwise</a>
<a href=\"javascript://\" class=\"linkedJs buttonLink\" title=\"spin (1080,4000,
Uize.Curve.easeInOutPow (4))\">3 spins</a>
<a href=\"javascript://\" class=\"linkedJs buttonLink\" title=\"spin (360,2700,
Uize.Curve.Rubber.easeOutBounce (5,-2,1.5))\">spin with bounce</a> 
<a href=\"javascript://\" class=\"linkedJs buttonLink\" title=\"spin (360,4000,
Uize.Curve.Mod.bend (Uize.Curve.Rubber.easeOutElastic (.1),3))\">elastic spin</a>
</div>
";
    

Die Anzeigefläche des RotationViewers, insbesondere die Größe und Rahmen, lassen sich über die CSS Class rotationViewer formatieren. Die angezeigten Bildelemente skalieren sich entsprechend mit.

<style type="text/css">
.rotationViewer {
width:600px;
height:423px;
}
</style>