Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende ÜberarbeitungLetzte ÜberarbeitungBeide Seiten der Revision | ||
de:create:popup [16.01.2015 16:55] – Doppelklammer als Option ergänzt admin | de:create:popup [24.07.2022 15:35] – [Informationen per Mausklick einblenden] admin | ||
---|---|---|---|
Zeile 1: | Zeile 1: | ||
====== Informationen per Mausklick einblenden ====== | ====== Informationen per Mausklick einblenden ====== | ||
- | Mitunter ist es hilfreich, wenn der Teilnehmer zusätzliche Informationen((einen kurzen Text wie diesen hier)) bei Bedarf einblenden kann. | + | 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: |
- | **Tipp:** Umfangreichere Informationen | + | - 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: | ||
+ | - Wenn Sie vion einem längeren Text zunächst nur einen Teil zeigen möchten, folgen Sie der Anleitung [[: | ||
+ | - Wenn Sie einen umfangreichen Text als Zusatzinformation verfügbar machen möchten, | ||
+ | |||
+ | Darüber hinaus können Sie mittels [[: | ||
Zeile 14: | Zeile 19: | ||
((Titel|Erklärung)) | ((Titel|Erklärung)) | ||
| | ||
- | Wird als Titel ein Asterisk ('' | + | Wird als Titel ein Asterisk ('' |
<code txt> | <code txt> | ||
Zeile 27: | Zeile 32: | ||
- | ===== Tooltop | + | ===== Tooltip |
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 '' | 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 '' | ||
Zeile 46: | Zeile 51: | ||
===== 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 | + | 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 |
+ | |||
+ | Wenn Sie die nachfolgenden Lösungen verwenden, benötigen Sie [[: | ||
- | Wenn Sie die nachfolgenden Lösungen verwenden, benötigen Sie [[: | ||
==== 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: | ||
<code html> | <code html> | ||
Zeile 90: | Zeile 98: | ||
</ | </ | ||
</ | </ | ||
+ | |||
==== Knopf frei platzieren ==== | ==== Knopf frei platzieren ==== | ||
Zeile 106: | Zeile 115: | ||
<img src=" | <img src=" | ||
</ | </ | ||
+ | |||
==== Wort berühren statt Knopf drücken ==== | ==== Wort berühren statt Knopf drücken ==== | ||
Zeile 121: | Zeile 131: | ||
</ | </ | ||
- | Der JavaScript-Code ist derselbe wie oben und muss noch an den HTML-Code angehängt | + | 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, | + | Sie können im Datensatz auch abspeichern, |
<code javascript> | <code javascript> | ||
Zeile 144: | Zeile 155: | ||
} | } | ||
</ | </ | ||
+ | |||
===== Mehrere Infos auf einer Seite ===== | ===== Mehrere Infos auf einer Seite ===== | ||
Zeile 149: | Zeile 161: | ||
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 | + | Den ersten Code speichern Sie als Textbaustein. Diesen Textbaustein fügen Sie __einmal__ |
- | <code html> | + | <file html js_infobox.txt> |
- | <script src="../ | + | |
<script type=" | <script type=" | ||
<!-- | <!-- | ||
Zeile 162: | Zeile 173: | ||
function clickButton(evt) { | function clickButton(evt) { | ||
- | var sender = oFbGeneral.getSender(evt, | + | var sender = SoSciTools.getSender(evt, |
for (var i=0; i< | for (var i=0; i< | ||
if (sender == buttons[i]) { | if (sender == buttons[i]) { | ||
Zeile 178: | Zeile 189: | ||
function clickClose(evt) { | function clickClose(evt) { | ||
- | var sender = oFbGeneral.getSender(evt, | + | var sender = SoSciTools.getSender(evt, |
var ix = -1; | var ix = -1; | ||
for (var i=0; i< | for (var i=0; i< | ||
Zeile 218: | Zeile 229: | ||
// Knopf aktivieren | // Knopf aktivieren | ||
- | | + | |
- | | + | |
} | } | ||
} | } | ||
Zeile 225: | Zeile 236: | ||
//--> | //--> | ||
</ | </ | ||
- | </code> | + | </file> |
Den zweiten Code wiederholen Sie für jeden Knopf inkl. Infobox. Dabei müssen Sie nur die HTML-Kennungen ('' | Den zweiten Code wiederholen Sie für jeden Knopf inkl. Infobox. Dabei müssen Sie nur die HTML-Kennungen ('' | ||
Zeile 254: | Zeile 265: | ||
</ | </ | ||
</ | </ | ||
+ | |||
+ | |||
+ | ==== 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=" | ||
+ | <img src=" | ||
+ | </ | ||
+ | <img src=" | ||
+ | |||
+ | <script type=" | ||
+ | <!-- | ||
+ | var info = new infoButton(); | ||
+ | info.registerInfo(" | ||
+ | //--> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | 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 ==== | ==== 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 [[: |
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 310: | ||
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 318: | ||
<code php> | <code php> | ||
// Knopf aktivieren (Öffnen/ | // Knopf aktivieren (Öffnen/ | ||
- | | + | |
- | | + | |
| | ||
// Knopf aktivieren (Öffnen/ | // Knopf aktivieren (Öffnen/ | ||
- | | + | |
- | | + | |
</ | </ | ||
- | 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> |