Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:javascript [04.01.2015 16:02] – [JavaScript im Fragebogen] admin
+++ de:create:javascript [25.09.2016 14:30] – Wo findet man die Fehlerkonsole admin
@@ Zeile 4: / Zeile 4: @@
 Falls der Fragebogen direkt auf Klicks oder Eingaben des Teilnehmers reagieren soll ([[:de:create:dynamic|Fragen bei Auswahl einer bestimmten Option sofort einblenden]]), ist die Verwendung von [[:de:glossary#javascript|JavaScript]] erforderlich. JavaScript wird direkt im Browser des Teilnehmers ausgeführt (sofern dieser JavaScript nicht deaktiviert hat) und kann unmittelbar auf Benutzereingaben reagieren. Allerdings kann man mittels JavaScript nicht oder nur eingeschränkt auf das aktuelle Interview (z.B. frühere Antworten des Teilnehmers) zugreifen.
+===== Hinweise =====
 **Hinweis:** Einige Fragetypen in SoSci Survey verwenden regulär JavaScript für die Darstellung, etwa Ranking-Fragen, Schieberegler, offene Nennungen oder Reaktionszeitmessungen.
@@ Zeile 14: / Zeile 17: @@
 **Tipp:** Wenn Sie eigenes JavaScript programmieren, achten Sie darauf, dass der Fragebogen auch bei deaktiviertem JavaScript ausgefüllt werden kann.
 ===== JavaScript einbinden =====
-Um auf einer Seite des Fragebogens JavaScript zu verwenden, legt man am besten einen **Textbaustein** an. Dieser enthält folgenden Inhalt:
+Um auf einer Seite des Fragebogens JavaScript zu verwenden, legt man unter **Textbausteine u. Beschriftung** einen neuen Textbaustein an. Dieser enthält HTML-Code und darin innerhalb des ''<script>'' Tags den eigentlichen JavaScript-Code.
-<code javascript><script type="text/javascript">
+<code javascript>
+<script type="text/javascript">
 <!--
@@ Zeile 29: / Zeile 34: @@
 </script></code>
-Diesen Textbaustein platziert man beim **Fragebogen zusammenstellen** per Drag & Drop oder mit der PHP-Funktion ''[[:de:create:functions:text|text()]]'' auf einer oder mehrerer Seiten im Fragebogen.
+Den Textbaustein platziert man beim **Fragebogen zusammenstellen** per Drag & Drop oder mit der PHP-Funktion ''[[:de:create:functions:text|text()]]'' auf einer oder mehrerer Seiten im Fragebogen.
 **Hinweis:** JavaScript kann nur auf HTML-Elemente (z.B. Fragen) zugreifen, die bereits in der HTML-Seite geladen wurden. Oftmals ist es daher sinnvoll, das JavaScript ans Ende der Seite zu setzen.
+**Tipp:** Prinzipiell kann man den HTML-/JavaScript-Code auch direkt in ein HTML-Element der Fragebogen-Seite einbinden. Allerdings bieten Textbausteine einige Vorteile, weshalb von der direkten Einbindung abgeraten wird.
+===== Beispiele =====
+Einige Beispiele zur Verwendung von JavaScript im Fragebogen finden Sie in folgenden Kapiteln der Anleitung:
+  * [[:de:create:timer-submit|Timer: Automatisch weiter zur nächsten Seite]]
+  * [[:de:create:timer-display|Timer: Weiter-Knopf nach bestimmter Zeit einblenden]]
+  * [[:de:create:dynamic|Fragen bei Auswahl einer bestimmten Option sofort einblenden]]
+  * [[:de:create:break-counter|Wechsel des Browserfensters aufzeichnen]]
+===== Fehler finden =====
+Wenn der JavaScript-Code einmal nicht funktioniert, wie er soll, dann gibt es für die Fehlersuche die Fehlerkonsole des Browsers. Diese findet man -- je nach Browser -- an unterschiedlicher Stelle ([[http://webmasters.stackexchange.com/a/77337/30902|Shortcuts (engl.)]], [[https://codex.wordpress.org/Using_Your_Browser_to_Diagnose_JavaScript_Errors#Step_3:_Diagnosis|Wordpress (engl.)]], [[http://www.stramaxon.com/2013/10/developer-tools-in-browser.html|How to Open Developer Tools (engl.)]]).
+In der Fehlerkonsole sieht man einerseits Fehler im Code. Andererseits kann man dort anzeigen lassen, was in einer Variable gespeichert ist. Und zwar mittels `console.log()`. Folgende Zeilen identifizieren ein Eingabefeld mit der HTML-ID "AB01_01" und zeigen anschließend in der Konsole, ob es gefunden wurde.
+<code javascript>
+<script type="text/javascript">
+<!--
+var input = document.getElementById("AB01_01");
+console.log(input);
+// -->
+</script>
+</code>
 ===== JavaScript lernen =====