====== Informationen per Mausklick einblenden ======

Mitunter ist es hilfreich, wenn der Teilnehmer zusätzliche Informationen((einen kurzen Text wie diesen hier)) bei Bedarf einblenden kann. Je nach Anwendung sind dafür unterschiedliche Lösungen geeignet:

  - Einzelne Wörter erklären Sie am einfachsten mit einem Tooltip (s. unten)
  - Wenn es darum geht, Textpassagen auf einen Mausklick hin anzuzeigen, verwenden Sie die [[:de:create:accordion|Akkordeon-Funktion]].
  - Wenn Sie von einem längeren Text zunächst nur einen Teil zeigen möchten, folgen Sie der Anleitung [[:de:create:morebox]]
  - Wenn Sie einen umfangreichen Text als Zusatzinformation verfügbar machen möchten, können Sie diesen mittels ''[[:de:create:functions:textlink|textlink()]]'' in einem eigenen PopUp-Fenster öffnen.

Darüber hinaus können Sie mittels [[:de:create:javascript|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.


===== 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. In den folgenden Beispielen reagiert einmal das Wort "erklärungsbedürftiges" auf die Mausberührung, und einmal ein Info-Symbol hinter dem Satz.

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

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

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.

<code html>
<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>
</code>

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

<code html>
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.
</code>

**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 [[:de:glossary#javascript|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.

<code html>
<!-- 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>
</code>


==== 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.

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

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

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


==== 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:

<code html>
<!-- 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>
</code>

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 [[:de:create:questions:internal|interne Variable]]. Die Frage zur internen Variable ziehen Sie über dem Info-Textbaustein in die Seite.

<code javascript>
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";
}
</code>


===== 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.

<file html 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>
</file>

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''.

<code html>
<!-- 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>
</code>

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.

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


==== 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:

<code html>
<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>
</code>

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 [[:de:create:questions:internal|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:

<code html>
<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>
</code>

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:

<code php>
    // 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);
</code>

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

<code html>
<!-- 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>
</code>

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

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