Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:javascript [04.01.2015 16:08] – Aktualisierung admin
+++ de:create:javascript [22.10.2024 15:36] (aktuell) – [Beispiele] 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.
+Innerhalb des Fragebogens steht die JavaScript-Bibliothek ''[[:de:create:soscitools|SoSciTools]]'' zur Verfügung. Diese stellt hilfreiche Funktionen bereit, um die Arbeit mit Fragebogen-Inhalten zu erleichtern. Außerdem können mit dem PHP-Befehl ''[[:de:create:functions:library|library()]]'' Standard-Bibliotheken wie jQuery, SCEditor oder ChartJS eingebunden werden.
@@ Zeile 14: / Zeile 16: @@
 **Hinweis:** Die Verwendung von JavaScript kann der Barrierefreiheit schaden. Personen, die den Fragebogen etwa mittels ScreenReader ausfüllen, sind darauf angewiesen, dass das Ausfüllen auch mit der Tastatur möglich ist.
-**Tipp:** Wenn eine JavaScript-Funktion nicht funktioniert, ist man auf die Fehlerkonsole des Browsers angewiesen. Eventuelle Fehler im Skript sieht man erst, wenn man die Fehlerkonsole öffnet.
+**Tipp:** Wenn eine JavaScript-Funktion nicht funktioniert, ist man auf die [[:de:general:browser-tools|Fehlerkonsole des Browsers]] angewiesen. Eventuelle Fehler im Skript sieht man erst, wenn man die Fehlerkonsole öffnet.
 **Tipp:** Wenn Sie eigenes JavaScript programmieren, achten Sie darauf, dass der Fragebogen auch bei deaktiviertem JavaScript ausgefüllt werden kann.
@@ Zeile 21: / Zeile 23: @@
 ===== JavaScript einbinden =====
-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.
+Um auf einer Seite des Fragebogens JavaScript zu verwenden, legt man
+  * entweder in einer Rubrik mit **Text hinzufügen**
+  * oder unter **Textbausteine u. Beschriftung**
+einen neuen Textbaustein an. Wählen Sie für den Text die //Darstellung// "HTML-Code".
+Der HTML-Code kann dann innerhalb eines ''<script>'' Tags den eigentlichen JavaScript-Code enthalten. Zum Beispiel:
 <code javascript>
@@ Zeile 33: / Zeile 41: @@
 // -->
 </script></code>
+**Wichtig:** Wählen Sie im Dropdown für die //Darstellung// die Option "HTML-Code".
+{{:de:create:scr.javascript.layout.png?nolink|Text mit HTML-/JavaScript-Inhalt}}
 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.
@@ Zeile 41: / Zeile 53: @@
+===== HTML und JavaScript =====
+Der HTML-Code einer Seite definiert den Inhalt. HTML besteht aus sogenannten "Tags" (englisch gesprochen als "Täggs"), zu erkennen an den spitzen Klammern. Ein "Tag" hat einen Namen, und zu den meisten öffnenden Tags (z.B. öffnet ''<div>'' ein DIV-Tag) gehört ein schließendes Tag, zu erkennen an dem Schrägstrich (''</div>''). Mehr dazu s. [[:de:create:texts#die_wichtigsten_html-tags|Die wichtigsten HTML-Tags]].
+Ein HTML-Tag kann Attribute enthalten, also Einstellungen mit Namen. Das folgende ''<div>''-Tag enthält zum Beispiel ein ''style'' Attribut für die Darstellung und ein ''id'' Attribut, um ihm die HTML-ID "meinDIV" zuzuweisen:
+<code html>
+<div style="border: 1px solid red; padding: 20px;" id="meinDIV">Inhalt</div>
+</code>
+Eine solche ID ist quasi ein Name für das Element. Anhand dieses Namens kann JavaScript mit der Funktion ''document.getElementById()'' das Element ansprechen und verändern.
+<code javascript>
+<script>
+// Das Element in die Javascript-Variable "block" speichern
+var block = document.getElementById("meinDIV");
+// Die Farbe des Rahmens nach 2 Sekunden ausblenden
+function ausblenden() {
+    block.style.display = "none";
+}
+window.setTimeout(ausblenden, 2000);
+</script>
+</code>
+**Hinweis:** JavaScript-Code kann nur die HTML-Element ansprechen, die bereits existieren, wenn das Script ausgeführt wird. Im obigen Beispiel muss das ''<div>''-Tag deshalb oberhalb des ''<script>''-Tags stehen. Man kann aber auch mit ''%%window.addEventListener("load", ...)%%'' arbeiten, damit JavaScript-Code erst ausgeführt wird, wenn die Seite vollständig geladen ist.
+**Tipp:** Die Elemente, welche SoSci Survey zur Darstellung von Fragen und Items verwendet, haben in aller Regel HTML-IDs. Diese finden sie am schnellsten heraus, wenn Sie in Ihrem Browser das richtige Menü aufrufen: [[:de:general:browser-tools]]
 ===== Beispiele =====
@@ Zeile 49: / Zeile 89: @@
   * [[:de:create:dynamic|Fragen bei Auswahl einer bestimmten Option sofort einblenden]]
   * [[:de:create:break-counter|Wechsel des Browserfensters aufzeichnen]]
+  * [[:de:create:script-keys]]
+===== Fehler finden =====
+Wenn der JavaScript-Code einmal nicht funktioniert, wie er soll, dann gibt es für die Fehlersuche die [[:de:general:browser-tools]].
+In der Fehlerkonsole der Entwickler-Tools 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 =====
-Es gibt im Internet zahlreiche gute Einführungen in JavaScript. Allerdings sollte man bereits Grundwissen zur Programmierung haben.
+Didaktisch aufbereitet ist folgender 30-stündiger kostenloser Kurs der Duke University: [[https://www.coursera.org/learn/duke-programming-web?#syllabus|Programming Foundations with JavaScript, HTML and CSS]]
+Darüber hinaus findet man im Internet mehrere JavaScript-Einsteigerkurse, z.B. [[https://www.javascript-kurs.de/|JavaScript lernen für Anfänger]] oder [[https://lerneprogrammieren.de/javascript/|JavaScript Lernen: So lernst du es schnell & einfach]]
+Ein Angebot, das eine kompakte Einführung mit einem umfangreichen Kompendium verknüpft, ist [[http://de.selfhtml.org/javascript/index.htm|SelfHTML]]. Hierfür sollte man allerdings schon ein paar grundsätzliche Ideen vom Programmieren haben.
-Ein Angebot, das eine kompakte Einführung mit einem umfangreichen Kompendium verknüpft, ist [[http://de.selfhtml.org/javascript/index.htm|SelfHTML]].