Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:frameset [28.08.2015 14:53] – [Frameinhalte vorbereiten] admin
+++ de:create:frameset [09.07.2023 18:07] (aktuell) – Seriennummern wurden in Teilnahmecodes umbenannt admin
@@ Zeile 1: / Zeile 1: @@
 ====== Musik über mehrere Seiten hinweg abspielen ======
-SoSci Survey bietet die Möglichkeit mithilfe eines Framesets Musik oder ein Video über einen gesamten Fragebogen hinweg darzubieten. Wie das geht erklärt folgende Anleitung((Danke an [[sbrand@students.uni-mainz.de|Sebastian Brand]] für dieses Kapitel.)).
+SoSci Survey bietet die Möglichkeit mithilfe eines Framesets Musik oder ein Video über einen gesamten Fragebogen hinweg darzubieten. Eine Herausforderung besteht darin, dass moderne Browser Musik nicht einfach automatisch abspielen -- deshalb ist ein wenig JavaScript erforderlich, und die Musik kann auch frühestenes beim Abschicken der ersten Seite starten.
+**Hinweis:** Gehen Sie davon aus, dass die Befragten ihre Lautsprecher ausgeschaltet haben, sie erst einen Kopfhörer aufsetzen müssen oder das Smartphone auf stumm gestellt ist. Weisen Sie frühzeitig auf die Audio-Ausgabe hin und bieten sie im Fragebogen die Möglichkeit, die Audio-Ausgabe zu testen.
 ===== Ein Frameset definieren =====
-Zu allererst müssen Sie ein Frameset innerhalb von SoSci Survey anlegen. Was genau man unter einem Frameset versteht ist hier nachzulesen: [[http://wiki.selfhtml.org/wiki/HTML/Frames|SelfHTML: Frames]]. Grob gesagt ist ein Frameset eine Art Tabelle, die die angezeigte Website in einzelne Bereiche aufteilt, deren Inhalte individuell bearbeitet werden können.
+Zu allererst müssen Sie ein Frameset anlegen. Was genau man unter einem Frameset versteht ist hier nachzulesen: [[http://wiki.selfhtml.org/wiki/HTML/Frames|SelfHTML: Frames]]. Grob gesagt ist ein Frameset eine Art Tabelle, die die angezeigte Website in einzelne Bereiche aufteilt, deren Inhalte individuell bearbeitet werden können.
-Um ein Frameset in SoSci Survey zu zu erstellen, muss zunächst eine Textdatei auf dem eigenen Desktop angelegt werden. Diese Textdatei wird dann z.B. "Start.html" benannt.
+Um ein Frameset in SoSci Survey zu zu erstellen, muss zunächst eine Textdatei auf dem eigenen Desktop angelegt werden. Diese Textdatei wird dann z.B. "start.html" benannt.
 **Wichtig:** Es ist essenziell, dass die Datei als reiner ASCII-Text gespeichert wird. Verwenden Sie daher zum Erstellen/Bearbeiten der Datei einen Texteditor (z.B. [[https://notepad-plus-plus.org/|Notepad++]], [[http://www.scintilla.org/SciTE.html|SciTE]] oder das Windows-eigene Notepad) und __kein__ Textbearbeitungsprogramm wie Word oder OpenOffice.
-**Wichtig:** Achten Sie darauf, dass die Dateiendung entsprechend geändert wird, sodass aus der ehemaligen Textdatei eine HTML-Datei wird. Sie können den Inhalt dieser dann mittels Editor anpassen. Innerhalb der Datei muss nun folgender HTML Code stehen:
+**Wichtig:** Achten Sie darauf, dass die Dateiendung entsprechend geändert wird, sodass aus der ehemaligen Textdatei eine HTML-Datei wird. Sie können den Inhalt dieser Datei direkt herunterladen.
-<code html>
+<file html start.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">
+	<meta http-equiv="content-type" content="text/html; charset=utf-8">
-    <title>Fragebogen</title>
+	<title>Fragebogen</title>
   </head>
-  <frameset rows="99%, 1%">
+  <frameset rows="99%, 1%" border="0">
-    <frame src="https://www.soscisurvey.de/PROJEKT/" name="survey">
+	<frame src="./index.php" name="survey">
-    <frame name="Beispielframe">
+	<frame src="./music.html" name="music">
   </frameset>
 </html>
-</code>
+</file>
-Achten Sie auf die Zeile ''<frame src=...'' -- hier müssen Sie ihre individuelle Fragebogen-URL eintragen ([[:de:survey:url]]), um in einem Frame den Fragebogen zu starten. Den eigenen Bedürfnissen entsprechend können Sie außerdem folgende Veränderungen im Code vornehmen:
-  * Das Attribut ''rows'' kann durch ''cols'' ersetzt werden, um statt einer Aufteilung der   angezeigten Seite in Zeilen (Frames untereinander) eine Aufteilung in Spalten (Frames nebeneinander) zu erhalten.
+===== Inhalt für das Frameset =====
-  * Die prozentuale Aufteilung der Bereiche kann angepasst werden.
-  * Die Frames können anders benannt werden (Attribut ''name'').
-  * Es können weitere Frames hinzugefügt werden -- beachten Sie dabei aber, dass sich die Spalten- bzw. Reihenprozente insgesamt zu 100 addieren.
-  * Mit dem Befehl ''%%border="0"%%'' können die Rahmen um die einzelnen Frames entfernt werden.
-Nachdem Sie die Datei angelegt und fertig bearbeitet haben, können Sie diese unter **Bilder und Mediendateien** in Ihr Projektverzeichnis hochladen. Sie können das Ergebnis nun betrachten, indem sie an die URL Ihres Projektverzeichnis noch ''/start.html'' anhängen, z.B. ''%%https://www.soscisurvey.de/PROJEKT/start.html%%''
-**Wichtig**: Verwenden Sie beim Hochladen __nicht__ die geschützte Dateiablage!
+Das Frameset verweise einmal auf den Fragebogen (''index.php'') und einmal auf eine Datei ''music.html''. Diese Datei benötigen Sie ebenfalls.
+<file html music.html>
-===== Frameinhalte vorbereiten =====
-Zunächst müssen Sie sich entscheiden, was für Inhalte in einen Frame geladen werden sollen. Der Frame sollte natürlich bei einem Video entsprechend groß sein, damit dieses komplett zu sehen ist. Bei Musik so klein wie möglich, um den eigentlichen Fragebogen nicht zu sehr zu verdecken.
-Wenn sie wissen, welcher Inhalt in den Frame geladen werden soll, müssen Sie für diesen erneut eine Text- bzw. HTML-Datei auf dem Desktop anlegen, z.B. ''play.html''. Nun editieren Sie diese Datei und füllen sie mit dem HTML Code, welcher Ihren Inhalt abspielt. Hier am Beispiel für Musik:
-<code html>
 <!DOCTYPE html>
 <html lang="de">
-  <head>
+<head>
     <meta charset="utf-8">
     <title>Audio</title>
-  </head>
+    <script>
-  <body>
+    window.addEventListener("message",
-    <audio id="bgAudio01" preload autoplay>
+        function(evt) {
-      <source src="BEISPIEL.MP3">
+            var audio = document.getElementById("bgAudio");
+            var data = evt.data;
+            if ("source" in data) {
+                audio.src = data.source;
+            }
+            if (data.action === "play") {
+                audio.play();
+            }
+            if (data.action === "stop") {
+                audio.stop();
+            }
+        },
+        false
+    );
+    </script>
+</head>
+<body>
+    <audio id="bgAudio" preload loop style="position: absolute; left: -9999px; top: -9999px">
+        <source src="stimulus.mp3">
     </audio>
-  </body>
+</body>
 </html>
+</file>
+Diese Datei beinhaltet ein ''<audio>''-Element und bleibt die ganze Zeit über geöffnet. Am Ende der Datei finden Sie folgende Zeile. Ersetzen Sie hier das ''stimulus.mp3'' durch den Dateinamen Ihrer Musikdatei.
+<code html>
+<source src="stimulus.mp3">
 </code>
-Hier wurde die Audio-Datei über das ''<audio>''-Tag eingebunden, was mittlerweile viele Browser unterstützen. Eine Einbindung mittels Flash-Player wird unter [[:de:create:media]] beschrieben.
-Die Musikdatei (Hier „BEISPIEL.MP3“) müssen Sie natürlich ebenfalls in SoSci Survey hochladen. Damit kein Player mehr angezeigt wird, sondern die Musik quasi unsichtbar im Hintergrund läuft, können Sie die (Pixel-)Größe des Players auf 0 setzen (im Beispiel: 110 Pixel). Die editierte Datei laden Sie nun auch in Ihr Projektverzeichnis hoch.
+===== Inhalte im Fragebogen verwenden =====
+In SoSci Survey öffnen Sie **Bilder und Mediendateien** und dort den Karteireiter "Mediendateien".
-===== Frame-Inhalte laden =====
+Laden Sie (1) die beiden HTML-Dateien von oben und (2) die mp3-Musikdatei(en) hoch, die Sie in Ihrem Fragebogen verwenden möchten.
-Womöglich möchten Sie die Audio-Datei nicht sofort zu Beginn des Fragebogens abspielen, sondern erst ab einer bestimmten Seite. Dafür laden sie die eben angelegte Datei ''play.html'' via JavaScript in das kleine Frame. Um das zu erreichen, legen Sie unter **Textbausteine und Beschriftung** einen neuen Textbaustein mit folgendem HTML-Inhalt an:
+Damit das Abspielen funktioniert, dürfen Sie beim Hochladen __nicht__ die "geschützte Dateiablage" verwenden.
+Außerdem müssen Sie (3) unter **Fragebogen zusammenstellen** noch ein wenige JavaScript-Code einfügen. Ziehen Sie ein Element "HTML-Code" auf die Fragebogen-Seite bevor die Musik starten soll und fügen Sie dort folgenden Inhalt ein.
 <code html>
-<script type="text/javascript">
+<script>
-<!--
+function messageToMusic(msg) {
-top.Beispielframe.location.href = "play.html";
+    var id = "music";
-// -->
+    if (parent.frames && parent.frames[id]) {
+        var musicFrame = parent.frames[id];
+    } else {
+        return;
+    }
+    musicFrame.postMessage(msg);
+}
+SoSciTools.questionnaire.attachCheck(function() {
+    messageToMusic({
+        source: "Musik02.mp3",
+        action: "play"
+    });
+    return true;
+});
 </script>
 </code>
-Wenn Sie diesen Textbaustein nun auf einer Ihrer Fragebogen-Seite einfügen, wird automatisch der Inhalt des Frames verändert und ihre Musik oder Ihr Video hineingeladen.
+Dieser JavaScript-Code macht folgendes: Wenn die oder der Befragte auf den "Weiter"-Knopf klickt (''SoSciTools.questionnaire.attachCheck()''), dann wird eine Nachricht an das Fenster mit der Musik-Datei gesendet. Diese Nachricht wird vom JavaScript in der ''music.html'' verarbeitet, und startet das Abspielen der Musik.
+Beachten Sie die folgenden Zeilen am Ende der Datei.
-===== Frame-Inhalte entfernen =====
+<code javascript>
+messageToMusic({
+    source: "Musik02.mp3",
+    action: "play"
+});
+</code>
-Um den Frame wieder zu leeren und die Musik verstummen zu lassen, laden Sie einfach eine leere HTML Seite in ihren Frame. Am besten legen Sie dazu ein leeres HTML Dokument auf ihrem Desktop an, welches Sie ''leer.html'' benennen. Wie der Name schon sagt, lassen Sie diese Datei leer und laden sie dann so hoch. Sie können nun mit folgendem Befehl die Musik stoppen.
+Mit dem Eintrag ''source'' kann (optional) eine andere Audiodatei geladen werden. Dieser Eintrag kann weggelassen werden, wenn Sie die Audio-Datei nicht variieren müssen.
+<code javascript>
+messageToMusic({
+    action: "play"
+});
+</code>
+Falls Sie die Audio-Datei experimentell variieren, können sie hier auch einen [[:de:create:placeholders|Platzhalter]] einsetzen. Mehr dazu unter [[:de:create:randomization-media#randomisierung_von_bildern_mittels_platzhalter|Randomisierung von Bildern mittels Platzhalter]].
+<code javascript>
+messageToMusic({
+    source: "%filename%",
+    action: "play"
+});
+</code>
+Mit dem Eintrag ''action'' teilen Sie mit, ob das Abspielen starten (''play'') oder stoppen (''stop'') soll.
+===== Befragungszeitraum starten =====
+Damit der Link funktioniert, sorgen Sie in den **Projekt-Einstellungen** dafür, dass der Fragebogen online erreichbar ist.
+Alternativ können Sie in der Datei ''start.html'' einen Pretest-Link eintragen, indem Sie folgende Zeile anpassen:
 <code html>
-<script type="text/javascript">
+<frame src="./index.php" name="survey">
-<!--
-top.Beispielframe.location.href = "leer.html";
-// -->
-</script>
 </code>
+Ersetzen Sie hier das ''./index.php'' durch den Pretest-Link, wenn Sie den Fragebogen noch nicht regulär online stellen können oder möchten. Vergessen Sie nicht, die geänderte Datei hochzuladen und die Datei zum Start der Erhebung wieder zu ändern.
+===== Fragebogen aufrufen =====
+Damit das Frameset mit den zwei Bestandteilen (Fragebogen und Datei mit dem ''<audio>''-Element) geladen wird, verwenden Sie nicht den "normalen" Link zum Fragebogen
+    https://www.soscisurvey.de/PROJEKT/
+sondern ergänzen Sie am Ende ein ''start.html'', also
+    https://www.soscisurvey.de/PROJEKT/start.html
+Statt ''PROJEKT'' müssen Sie natürlich das Projektverzeichnis Ihres Befragungsprojekts einsetzen ([[:de:survey:url]]). Diesen Link können Sie nun in die Adresszeile des Browsers eintragen, um die Hintergrundmusik zu testen. Diesen ergänzten Link verwenden Sie später auch an die Adressat:innen Ihrer Studie.
+**Wichtig:** Das ''start.html'' ergänzen Sie __nicht__ in SoSci Survey, sondern Sie geben es einfach nur in der Adresszeile Ihres Browsers ein.
+Sollte die Datei nicht abspielen, öffnen Sie nach dem Aufruf der ''start.html'' die [[:de:general:browser-tools]] und prüfen Sie, ob dort Fehlermeldungen angezeigt werden.
 ===== Einschränkungen =====
-  * Beim Aufrufen des Frameset können Sie keine Variablen (z.B. Referenz oder Seriennummer) an den Fragebogen übermitteln, wie unter [[:de:survey:url]] beschrieben.
+  * Beim Aufrufen des Frameset können Sie keine Variablen (z.B. Referenz oder Teilnahmecode) an den Fragebogen übermitteln, wie unter [[:de:survey:url]] beschrieben.
-  * Es ist mit dieser Lösung nicht möglich, die Musik am Ende auszublenden, sie endet beim Laden der leeren Datei einfach abrupt.
+  * Es ist mit dieser Lösung nur mit usätzlichem Aufwand möglich, die Musik am Ende auszublenden. Ansonsten endet das Abspielen beim Senden der ''stop''-Nachricht abrupt.