[[Informationen per Mausklick einblenden]]
Sie befinden sich hier: start » Übersicht » Den Fragebogen gestalten » Informationen per Mausklick einblenden
 
Zuletzt angesehen:

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen RevisionVorhergehende Überarbeitung
Nächste ÜberarbeitungBeide Seiten der Revision
de:create:popup [16.01.2015 16:55] – Doppelklammer als Option ergänzt adminde:create:popup [16.01.2015 17:20] – Aktualisiert admin
Zeile 27: Zeile 27:
  
  
-===== Tooltop bei Berührung II =====+===== 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. 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.
Zeile 46: Zeile 46:
 ===== Information per Mausklick ===== ===== 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.+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.
  
-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 weitgehende Kontrolle darüber, wie und wann die Information angezeigt wird. 
  
 ==== Umsetzung ==== ==== 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.+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> <code html>
Zeile 90: Zeile 93:
 </script> </script>
 </code> </code>
 +
  
 ==== Knopf frei platzieren ==== ==== Knopf frei platzieren ====
Zeile 106: Zeile 110:
 <img src="infobutton.png" onclick="buttonShow()"> <img src="infobutton.png" onclick="buttonShow()">
 </code> </code>
 +
  
 ==== Wort berühren statt Knopf drücken ==== ==== Wort berühren statt Knopf drücken ====
Zeile 121: Zeile 126:
 </code> </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.+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 ==== ==== Benutzung speichern ====
  
-Sie können im Datensatz auch abspeichern, ob die Information angezeigt wurde. Dafür benötigen Sie eine interne Variable ([[variables|Variablen in oFb]]). Die Frage zur internen Variable fügen Sie über dem Info-Textbaustein in die Seite ein.+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> <code javascript>
Zeile 144: Zeile 150:
 } }
 </code> </code>
 +
  
 ===== Mehrere Infos auf einer Seite ===== ===== Mehrere Infos auf einer Seite =====
Zeile 149: Zeile 156:
 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. 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.+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.
  
-<code html> +<file html js_infobox.txt>
-<script src="../script/oFbGeneral.js" type="text/javascript"></script>+
 <script type="text/javascript"> <script type="text/javascript">
 <!-- <!--
Zeile 162: Zeile 168:
    
   function clickButton(evt) {   function clickButton(evt) {
-    var sender = oFbGeneral.getSender(evt, this);+    var sender = SoSciTools.getSender(evt, this);
     for (var i=0; i<buttons.length; i++) {     for (var i=0; i<buttons.length; i++) {
       if (sender == buttons[i]) {       if (sender == buttons[i]) {
Zeile 178: Zeile 184:
    
   function clickClose(evt) {   function clickClose(evt) {
-    var sender = oFbGeneral.getSender(evt, this);+    var sender = SoSciTools.getSender(evt, this);
     var ix = -1;     var ix = -1;
     for (var i=0; i<closes.length; i++) {     for (var i=0; i<closes.length; i++) {
Zeile 218: Zeile 224:
    
     // Knopf aktivieren     // Knopf aktivieren
-    oFbGeneral.attachEvent(button, "click", clickButton); +    SoSciTools.attachEvent(button, "click", clickButton); 
-    oFbGeneral.attachEvent(close, "click", clickClose);+    SoSciTools.attachEvent(close, "click", clickClose);
   }   }
 } }
Zeile 225: Zeile 231:
 //--> //-->
 </script> </script>
-</code>+</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''. 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''.
Zeile 254: Zeile 260:
 </script> </script>
 </code> </code>
 +
  
 ==== Info-Nutzung speichern ==== ==== 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.+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. Ziehen Sie diese Frage __vor__ dem JavaScript-Code in die Fragebogen-Seite.
Zeile 277: Zeile 284:
  
 Die Variablen speichern dann, wie oft (beginnend mit 0) die Info-Box geöffnet wurde. Die Variablen speichern dann, wie oft (beginnend mit 0) die Info-Box geöffnet wurde.
 +
  
 ==== Öffnen bei Berührung ==== ==== Öffnen bei Berührung ====
Zeile 284: Zeile 292:
 <code php> <code php>
     // Knopf aktivieren (Öffnen/Schließen per Klick)     // Knopf aktivieren (Öffnen/Schließen per Klick)
-    oFbGeneral.attachEvent(button, "click", clickButton); +    SoSciTools.attachEvent(button, "click", clickButton); 
-    oFbGeneral.attachEvent(close, "click", clickClose);+    SoSciTools.attachEvent(close, "click", clickClose);
          
     // Knopf aktivieren (Öffnen/Schließen per Mausberührung)     // Knopf aktivieren (Öffnen/Schließen per Mausberührung)
-    oFbGeneral.attachEvent(button, "mouseover", clickButton); +    SoSciTools.attachEvent(button, "mouseover", clickButton); 
-    oFbGeneral.attachEvent(button, "mouseout", clickClose);+    SoSciTools.attachEvent(button, "mouseout", clickClose);
 </code> </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:+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> <code html>
de/create/popup.txt · Zuletzt geändert: 24.07.2022 15:35 von admin
 
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