Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:questions:labjs [18.09.2022 10:24] – [Variante: direkt] admin
+++ de:create:questions:labjs [21.06.2026 22:54] (aktuell) – [Verwendung in einem Frameset] admin
@@ Zeile 92: / Zeile 92: @@
 ]);
 </code>
+===== Probleme =====
+==== Formular-Elemente ====
+**Kurzfassung:** ''<form>'' und ''<submit>'' Elemente dürfen nicht genutzt werden, wenn das Experiment innerhalb eines Fragebogens eingbunden werden soll. Weiterhin dürfen Knöpfe nur mit ''%%<button type="button">%%'' genutzt werden (nicht mit ''%%type="submit"%%'').
+Der lab.js Builder liefert als Vorlage ein BART Experiment. Dieses funktioniert nicht direkt in SoSci Survey. Die Ursache ist folgender Abschnitt unter "Judgment" -> "Content".
+<code html>
+<p class="font-weight-bold">
+  How far would you like to inflate the balloon?
+</p>
+<form id="pumps-form">
+    <input
+        type="range"
+        name="pumps" id="pumps"
+        class="w-100"
+        min="1" max="128" step="1"
+    >
+</form>
+</code>
+Ein Formular-Element (''<form>'') funktioniert bei der EInbindung in SoSci Survey generell nicht. Folgende Änderung ist notwendig, damit das Experiment in SoSci Survey korrekt funktioniert:
+. Entfernen Sie das ''<form>'' Element, aber lassen Sie das enthaltene ''<input>'' Element stehen.
+<code html>
+<p class="font-weight-bold">
+    How far would you like to inflate the balloon?
+</p>
+<input
+    type="range"
+    name="pumps" id="pumps"
+    class="w-100"
+    min="1" max="128" step="1"
+>
+</code>
+. Entfernen Sie im selben Code beim Knopf (''<button>'') den Teil ''%%form="pumps-form"%%'', ändern Sie den ''type'' von %%"submit"%% zu %%"button"%% und ergänzen Sie ein ID (''%%id="inflate"%%'').
+<code html>
+<footer class="content-horizontal-right content-vertical-center">
+  <button type="button" id="inflate">
+    Inflate! &rarr;
+  </button>
+</footer>
+</code>
+. Unter "Judgment" -> "Behavior" ergänzen Sie bei "Responses" einen Responde mit den folgenden Angaben:
+  * label: ''submitted'' (frei wählbar)
+  * action: "click"
+  * target: ''button#inflate''
+  * filter: (bleibt leer)
+Zuletzt exportieren Sie das Experiment wieder als ZIP (siehe oben) und laden Sie die ZIP-Datei in der "Lab.JS"-Frage in SoSci Survey hoch.
+==== Verwendung in einem Frameset ====
+Es gibt einige Anwendungsfälle, in welchen der Fragebogen innerhalb eines HTML Frameset läuft ([[:de:create:frameset]], [[:de:custom-domains#frame-weiterleitung|Frame-Weiterleitung von eigener Domain]]).
+lab.js Verwendet standardmäßig einen Fallback-Mechanismus, welcher die erhobenen Daten an das übergeordnete Frame weiterleitet. Dieser Mechanismus, welcher für eine iFrame-Einbindung von lab.js sinnvoll ist, verhindert, dass die Daten im Fragebogen gespeichert werden können. Die Lösung besteht darin, im Frameset-HTML etwas JavaScript zu ergänzen, welches die Daten an den Fragebogen umleitet. Das kann wie folgt aussehen:
+<code html>
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
+<html>
+  <head>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8">
+      <title>Fragebogen</title>
+      <script>
+      window.addEventListener('message', function(e) {
+        if (e.data && e.data.type === 'labjs.data') {
+          var soSciFrame = document.getElementById('sosciFrame');
+          if (soSciFrame) {
+            soSciFrame.contentWindow.postMessage(e.data, '*');
+          }
+        }
+      });
+  </script>
+  </head>
+  <frameset rows="99%, 1%" border="0">
+	<frame src="./index.php" name="survey" id="sosciFrame">
+	<frame src="./music.html" name="music">
+  </frameset>
+</html>
+</code>
+**Wichtig:** Das Fragebogen-Frame muss eine ID tragen (im Beispiel ''%%id="sosciFrame"%%'') und dieselbe ID muss im JavaScript verwendet werden (im Beispiel ''%%document.getElementById('sosciFrame')%%'').