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…

Funktion

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.

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";
// 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";
}
de/create/popup.txt · Zuletzt geändert: 28.05.2012 14:19 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