Hier werden die Unterschiede zwischen zwei Versionen angezeigt.
Beide Seiten der vorigen RevisionVorhergehende ÜberarbeitungNächste Überarbeitung | Vorhergehende ÜberarbeitungNächste ÜberarbeitungBeide Seiten der Revision | ||
de:create:popup [16.01.2015 16:55] – Doppelklammer als Option ergänzt admin | de:create:popup [18.06.2015 14:12] – admin | ||
---|---|---|---|
Zeile 27: | Zeile 27: | ||
- | ===== 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 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 | + | 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 93: | ||
</ | </ | ||
</ | </ | ||
+ | |||
==== Knopf frei platzieren ==== | ==== Knopf frei platzieren ==== | ||
Zeile 106: | Zeile 110: | ||
<img src=" | <img src=" | ||
</ | </ | ||
+ | |||
==== Wort berühren statt Knopf drücken ==== | ==== Wort berühren statt Knopf drücken ==== | ||
Zeile 121: | Zeile 126: | ||
</ | </ | ||
- | 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 150: | ||
} | } | ||
</ | </ | ||
+ | |||
===== 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 | + | 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 168: | ||
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 184: | ||
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 224: | ||
// Knopf aktivieren | // Knopf aktivieren | ||
- | | + | |
- | | + | |
} | } | ||
} | } | ||
Zeile 225: | Zeile 231: | ||
//--> | //--> | ||
</ | </ | ||
- | </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 260: | ||
</ | </ | ||
</ | </ | ||
+ | |||
+ | |||
+ | ==== 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 305: | ||
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 313: | ||
<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> |