SoSci Survey
Übersetzungen dieser Seite:
 

Informationen per Mausklick einblenden

Mitunter ist es hilfreich, wenn der Teilnehmer Informationen (einen kurzen Text o.ä.) nach Bedarf nochmal einblenden kann.

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

Tooltop bei Berührung

Die einfachste Lösung zeigt eine kurze Information an, wenn der Teilnehmer mit der Maus über einem Wort verweilt. Hierfür müssen Sie lediglich ein title-Attribut setzen und den begriff ggf. mittels style-Attribut ein wenig hervorheben:

<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 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 weitgehende Kontrolle darüber, wie und wann die Information angezeigt wird.

Umsetzung

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

<!-- 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 (Variablen in oFb). Die Frage zur internen Variable fügen Sie über dem Info-Textbaustein in die Seite ein.

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.

<script src="../script/oFbGeneral.js" type="text/javascript"></script>
<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 = oFbGeneral.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 = oFbGeneral.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
    oFbGeneral.attachEvent(button, "click", clickButton);
    oFbGeneral.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>

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)
    oFbGeneral.attachEvent(button, "click", clickButton);
    oFbGeneral.attachEvent(close, "click", clickClose);
 
    // Knopf aktivieren (Öffnen/Schließen per Mausberührung)
    oFbGeneral.attachEvent(button, "mouseover", clickButton);
    oFbGeneral.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>
de/create/popup.txt · Zuletzt geändert: 07.10.2013 09:54 von admin
 
Falls nicht anders bezeichnet, ist der Inhalt dieses Wikis unter der folgenden Lizenz veröffentlicht: CC Attribution-Share Alike 3.0 Unported
Driven by DokuWiki