Übersetzungen dieser Seite:
 

Informationen per Mausklick einblenden

Mitunter ist es hilfreich, wenn der Teilnehmer zusätzliche Informationen1) bei Bedarf einblenden kann.

Tipp: Umfangreichere Informationen können mittels textlink() auch in einem eigenen PopUp-Fenster geöffnet werden. Allerdings weiß man in diesem Fall nie, ob der Teilnehmer auch wieder zum Fragebogen zurück findet.

Tooltip bei Berührung I

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. Den in 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.

Tooltip bei Berührung II

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.

Information per Mausklick

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.

Umsetzung

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>

Knopf frei platzieren

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()">

Wort berühren statt Knopf drücken

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.

Benutzung speichern

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";
}

Mehrere Infos auf einer Seite

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>

Bilder vergrößern

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.

Info-Nutzung speichern

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.

Öffnen bei Berührung

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>
1)
einen kurzen Text wie diesen hier
de/create/popup.txt · Zuletzt geändert: 19.01.2016 17:52 von soz13hud
 
Falls nicht anders bezeichnet, ist der Inhalt dieses Wikis unter der folgenden Lizenz veröffentlicht: CC Attribution-Share Alike 4.0 International
Driven by DokuWiki