Informationen per Mausklick einblenden

Mitunter ist es hilfreich, wenn der Teilnehmer zusätzliche Informationen¹⁾ bei Bedarf einblenden kann. Je nach Anwendung sind dafür unterschiedliche Lösungen geeignet:

1. Einzelne Wörter erklären Sie am einfachsten mit einem Tooltip (s. unten)
2. Wenn es darum geht, Textpassagen auf einen Mausklick hin anzuzeigen, verwenden Sie die Akkordeon-Funktion.
3. Wenn Sie von einem längeren Text zunächst nur einen Teil zeigen möchten, folgen Sie der Anleitung Einen Text teilweise ausblenden
4. Wenn Sie einen umfangreichen Text als Zusatzinformation verfügbar machen möchten, können Sie diesen mittels textlink() in einem eigenen PopUp-Fenster öffnen.

Darüber hinaus können Sie mittels JavaScript nach Belieben Texte, Informationen, Items oder ganze Fragen auf einen Klick des Befragten hin einblenden. Auch können Sie im Datensatz speichern, ob eine solche Information angeklickt wurde.

SoSci Survey erkennt doppelte Klammern als Markierung für zusätzlich Informationen. Dabei kann entweder ein Begriff im Text auf die Mausberührung reagieren oder es wird ein Info-Symbol eingeblendet.

Die doppelte Klammer wird verwendet wie folgt:

((Titel|Erklärung))

Wird als Titel ein Asterisk (*) eingetragen, wird ein Info-Symbol angezeigt. In den folgenden Beispielen reagiert einmal das Wort „erklärungsbedürftiges“ auf die Mausberührung, und einmal ein Info-Symbol hinter dem Satz.

Dies ist ein ((erklärungsbedürftiges|Mit "erklärungbedürftig" ist gemeint, dass man den Inhalt nicht unmittelbar versteht.)) Item.

Dies ist ein erklärungsbedürftiges Item. ((*|Mit "erklärungbedürftig" ist gemeint, dass man den Inhalt nicht unmittelbar versteht.))

Das Info-Symbol und die Formatierung der Information können im Fragebogen-Layout mittels CSS-Anweisungen im HTML-Template angepasst werden. Dazu werden die CSS-Anweisungen im Bereich Tooltip aus dem Fragebogen-Stylesheet überschrieben.

Eine weitere Lösung besteht darin, das HTML-Attribut title für zusätzliche Informationen zu verwenden. Hierbei wird ebenfalls eine kurze Information angezeigt, wenn der Teilnehmer mit der Maus über einem Wort verweilt – allerdings erst nach einer kurzen Verzögerung. Das Wort selbst kann ggf. mittels style-Attribut visuell hervorgehoben werden.

<p>Hier ist der Text mit einem <span title="Ein Wort, dessen Bedeutung nicht direkt ersichtlich ist" style="border-bottom: 1px dotted">erklärungsbedürftigen</span> Wort.</p>

Wenn die Information direkt in einem Item erscheinen soll, setzen Sie das <span>-Tag einfach direkt in den Itemtext an die passende Stelle.

Bei Sonnenschein bin ich lieber <span title="Mit &quot;draußen&quot; ist gemeint, dass Sie sich außerhalb geschlossener Räume aufhalten" style="border-bottom: 1px dotted">draußen</span> als dass ich an Onlinebefragungen teilnehme.

Hinweis: Die Darstellung der title-Information obliegt dem Browser des Teilnehmers. Sie haben keinen Einfluss darauf, wie schnell die Information angezeigt wird und in welcher Formatierung.

Der Inhalte einer Website (und damit einer Fragebogen-Seite) kann mittels JavaScript dynamisch verändert werden. Eine sehr einfache Veränderung ist das Ein- und Ausblenden von Inhalten. Die Information wird also regulär eingebunden, bleibt aber zunächst unsichtbar.

Wenn Sie die nachfolgenden Lösungen verwenden, benötigen Sie JavaScript – die Umsetzung wird also ein wenig anspruchsvoller, aber dafür haben Sie volle Kontrolle darüber, wie und wann die Information angezeigt wird.

Speichern Sie folgenden HTML-Code als Textbaustein und ziehen sie diesen in die Fragebogen-Seite. Die eigentliche Information müssen Sie natürlich selbst eintragen. Formatierungen mit HTML sind möglich.

Hinweis: Der folgende Code eignet sich nur zur Anzeige eines Info-Knopfes pro Fragebogenseite. Code für mehrere Knöpfe s. unten.

<!-- Zunächst der Knopf zum Anzeigen der Info -->
<button type="button" onclick="buttonShow()">Mehr Info</button>
 
<!-- Und dann die Info-Box -->
<div id="infoBox" style="width: 400px; padding: 5px; background-color: white; border: 2px solid #CCCCCC">
  Hier kommt die Zusatz-Info
  <p style="text-align: center; margin-top: 20px">
    <button type="button" onclick="buttonHide()">Schließen</button>
  </p>
</div>
 
<!-- Der JavaScript-Code -->
<script type="text/javascript">
<!--
var info = document.getElementById("infoBox");
info.style.display = "none"; // Box ausblenden
info.style.position = "absolute";
info.style.zIndex = 999;
// Entweder fix auf der Seite platziert
// info.style.left = "50px";
// info.style.top = "100px";
// Oder ein definiertes Stückchen unter dem Knopf
info.style.marginTop = "10px";
 
function buttonShow() {
  // Infobox anzeigen
  info.style.display = "";
}
function buttonHide() {
  // Infobox wieder ausblenden
  info.style.display = "none";
}
//-->
</script>

Der Anzeige-Knopf (im obigen Beispiel am Ende des Codes) kann auch an beliebiger anderer Stelle im Fragebogen (z.B. direkt im Frage-Text) platziert werden.

<!-- Der Knopf kann an beliebiger Stelle eingefügt werden -->
<button type="button" onclick="buttonShow()">Mehr Info</button>

Statt des Textes kann man auch ein Bild verwenden. Das Bild müssen Sie natürlich zunächst in das Befragungsprojekt hochladen.

<!-- Hier alternativ ein grafischer Knopf -->
<img src="infobutton.png" onclick="buttonShow()">

Mit einer kleinen Modifikation kann man auf den Klick auch verzichten und eine Info-Box anzeigen, wenn der Benutzer mit der Maus über ein Wort fährt:

<!-- Statt eines Knopfes kann man auch ein Wort im Text verwenden -->
Wenn Sie eine <span onmouseover="buttonShow()" onmouseout="buttonHide()" style="border-bottom: 1px dotted">Erklärung</span> benötigen, fahren Sie mit der Maus über das markierte Wort.
 
<!-- Und dann die Info-Box -->
<div id="infoBox" style="width: 400px; padding: 5px; background-color: white; border: 2px solid #CCCCCC">
  Hier steht eine zusätzliche Information.
</div>

Der JavaScript-Code ist derselbe wie oben und muss noch an den HTML-Code angehängt oder an beliebiger Stelle auf der Seite platziert werden.

Sie können im Datensatz auch abspeichern, ob die Information angezeigt wurde. Dafür benötigen Sie eine interne Variable. Die Frage zur internen Variable ziehen Sie über dem Info-Textbaustein in die Seite.

var info = document.getElementById("infoBox");
var intVar = document.getElementById("AB01_01"); // Hier muss die Kennung der internen Variable eingetragen werden
info.style.display = "none"; // Box ausblenden
intVar.value = "1";
 
function buttonShow() {
  // Infobox anzeigen
  info.style.display = "";
  // Abspeichern, dass der Button angeklickt wurde
  intVar.value = "2";
}
function buttonHide() {
  // Infobox wieder ausblenden
  info.style.display = "none";
}

Die obigen Code-Beispiele können pro Seite jeweils nur eine Information einblenden. Falls Sie mehrere Info-Knöpfe auf einer Seite platzieren möchten, können Sie nachfolgenden Code verwenden.

Den ersten Code speichern Sie als Textbaustein. Diesen Textbaustein fügen Sie einmal (an einer beliebigen Stelle vor dem weiteren JavaScript-Code) in die Fragebogen-Seite ein.

js_infobox.txt

<script type="text/javascript">
<!--
function infoButton() {
  var buttons = new Array();
  var boxes = new Array();
  var closes = new Array();
  var stores = new Array();
 
  function clickButton(evt) {
    var sender = SoSciTools.getSender(evt, this);
    for (var i=0; i<buttons.length; i++) {
      if (sender == buttons[i]) {
        // Ausgewählte Box anzeigen
        boxes[i].style.display = "";
        if (stores[i]) {
          stores[i].value = parseInt(stores[i].value) + 1;
        }
      } else {
        // Alle anderen schließen
        boxes[i].style.display = "none";
      }
    }
  }
 
  function clickClose(evt) {
    var sender = SoSciTools.getSender(evt, this);
    var ix = -1;
    for (var i=0; i<closes.length; i++) {
      if (sender == closes[i]) {
        ix = i;
        break;
      }
    }
    if (ix == -1) { return; }
    boxes[ix].style.display = "none";
  }
 
  this.registerInfo = function(buttonID, boxID, closeID, storeID) {
    var button = document.getElementById(buttonID);
    var box = document.getElementById(boxID);
    var close = document.getElementById(closeID);
    var store = document.getElementById(storeID);
    if (!button) { alert("Es gibt keinen Knopf mit der Kennung "+buttonID); return; }
    if (!box) { alert("Es gibt keine Box mit der Kennung "+buttonID); return; }
    if (closeID && !close) { alert("Es gibt keinen Knopf Kennung "+closeID); return; }
    if (storeID && (!store || (store.nodeName != "INPUT"))) { alert("Es gibt kein Datenfeld mit der Kennung "+storeID); return; }
    if (store && isNaN(parseInt(store.value))) {
      store.value = 0;
    }
    buttons.push(button);
    boxes.push(box);
    closes.push(close);
    stores.push(store);
 
    // Initialisieren (Info ausblenden)
    box.style.display = "none"; // Box ausblenden
    box.style.position = "absolute";
    box.style.zIndex = 999;
    // Entweder fix auf der Seite platziert
    // box.style.left = "50px";
    // box.style.top = "100px";
    // Oder ein definiertes Stückchen unter dem Knopf
    box.style.marginTop = "10px";
 
    // Knopf aktivieren
    SoSciTools.attachEvent(button, "click", clickButton);
    SoSciTools.attachEvent(close, "click", clickClose);
  }
}
 
//-->
</script>

Den zweiten Code wiederholen Sie für jeden Knopf inkl. Infobox. Dabei müssen Sie nur die HTML-Kennungen (id) von Knopf und Infobox anpassen. Also z.B. infoButton2, infoBox2 und infoClose2.

<!-- Knopf zum Anzeigen der Info -->
<button type="button" id="infoButton1">Mehr Info</button>
 
<!--Info-Box -->
<div id="infoBox1" style="width: 400px; padding: 5px; background-color: white; border: 2px solid #CCCCCC">
  Hier kommt die Zusatz-Info
  <p style="text-align: center; margin-top: 20px">
    <button type="button" id="infoClose1">Schließen</button>
  </p>
</div>

Den dritten Code platzieren Sie einmal am Ende der Fragebogen-Seite. Hier müssen Sie nur die letzte Zeile für jede Infobox wiederholen und die entsprechenden Kennungen einsetzen.

<script type="text/javascript">
<!--
var info = new infoButton();
 
// Die folgende Zeile für jeden Knopf wiederholen
info.registerInfo("infoButton1", "infoBox1", "infoClose1");
//-->
</script>

Wenn Sie ein Bild als Knopf verwenden und beim Klick eine größere Version desselben Bilds anzeigen, können Sie mit der Funktion auch ein Bild vergrößern. Sie müssen sich lediglich um HTML-IDs für die Bilder und die Positionierung der großen Bildversion kümmern:

<div style="position: relative; left: -100px; top: -100px">
  <img src="grosses-bild.jpg" id="large1" />
</div>
<img src="kleines-bild.jpg" id="image1" />
 
<script type="text/javascript">
<!--
var info = new infoButton();
info.registerInfo("image1", "large1", "large1");
//-->
</script>

Das obige Beispiel verzichtet auf einen gesonderten Knopf zum Schließen des großen Bildes – ein Klick auf die vergrößerte Version reicht.

Falls Sie speichern möchten, ob ein Info-Knopf angeklickt wurde, benötigen Sie zunächst interne Variablen. Legen Sie dazu im Fragenkatalog eine neue Frage vom Typ interne Variablen an. In dieser Frage legen Sie so viele Variablen (Items) an, wie Sie Info-Boxen überwachen möchten.

Ziehen Sie diese Frage vor dem JavaScript-Code in die Fragebogen-Seite.

Modifizieren Sie den dritten Code (s. oben), indem Sie zusätzlich die Kennungen der internen Variablen angeben, in welche die Benutzung gespeichert werden soll. Zum Beispiel:

<script type="text/javascript">
<!--
var info = new infoButton();
 
// Die folgende Zeile für jeden Knopf wiederholen (hier z.B. für 3 Knöpfe)
info.registerInfo("infoButton1", "infoBox1", "infoClose1", "IV01_01");
info.registerInfo("infoButton2", "infoBox2", "infoClose2", "IV01_02");
info.registerInfo("infoButton3", "infoBox3", "infoClose3", "IV01_03");
//-->
</script>

Die Variablen speichern dann, wie oft (beginnend mit 0) die Info-Box geöffnet wurde.

Um eine umfangreichere Infobox anzuzeigen – sofort, nicht erst nach einem kurzen Moment – modifizieren Sie den obigen Code. Damit die Information nicht per Klick, sondern per Berührung angezeigt wird, ändern Sie im ersten Code folgende beiden Zeile am Ende:

    // Knopf aktivieren (Öffnen/Schließen per Klick)
    SoSciTools.attachEvent(button, "click", clickButton);
    SoSciTools.attachEvent(close, "click", clickClose);
 
    // Knopf aktivieren (Öffnen/Schließen per Mausberührung)
    SoSciTools.attachEvent(button, "mouseover", clickButton);
    SoSciTools.attachEvent(button, "mouseout", clickClose);

Beim zweiten Code entfernen Sie den Knopf zum Schließen. Im folgenden Beispiel wird kein Knopf, sondern ein Text zum Anzeigen der Infobox verwendet:

<!-- Knopf zum Anzeigen der Info (an passender Stelle im Text platzieren) -->
<span id="infoText1" style="border-bottom: 1px dotted">Mehr Info</button>
 
<!--Info-Box (ggf. erst ein Stückchen weiter unten, etwa nach dem Textabsatz mit Knopf) -->
<div id="infoBox1" style="width: 400px; padding: 5px; background-color: white; border: 2px solid #CCCCCC">
  Hier kommt die Zusatz-Info
</div>

Im dritten Code geben Sie die HTML-ID des Knopfes bzw. des Textes zweimal an:

<script type="text/javascript">
<!--
var info = new infoButton();
 
// Die folgende Zeile für jeden Knopf wiederholen
info.registerInfo("infoText1", "infoBox1", "infoText1");
//-->
</script>