Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:frameset [05.05.2022 14:21] – [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.
@@ Zeile 12: / Zeile 14: @@
 **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.
 <file html start.html>
@@ Zeile 18: / Zeile 20: @@
 <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>
 </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.
-Testen Sie, ob Sie den Link ''%%https://www.soscisurvey.de/PROJEKT/start.html%%'' im Internetbrowser aufrufen können und ob dieser zum Fragebogen führt. Statt ''PROJEKT'' müssen Sie natürlich das Projektverzeichnis Ihres Befragungsprojekts einsetzen ([[:de:survey:url]]).
+<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:
-<file html play.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 style="position: absolute; left: -9999px; top: -9999px">
+        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>
-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.
+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.
-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, wurde der Player im absolut negativen Bereich platziert (Pixel -9999). Die editierte Datei laden Sie nun auch in Ihr Projektverzeichnis hoch.
+<code html>
+<source src="stimulus.mp3">
+</code>
-**Tipp:** Um die Bezeichnung der Audiodatei zu ermitteln, gehen Sie im Fragebogen-Menü Ihres Projektes auf Bilder und Dateien, dort finden Sie die volle Bezeichnung, welche Sie einfach kopieren können (in der Regel der Name unter dem Sie die Datei hochgeladen haben).
+===== Inhalte im Fragebogen verwenden =====
-===== Frame-Inhalte laden =====
+In SoSci Survey öffnen Sie **Bilder und Mediendateien** und dort den Karteireiter "Mediendateien".
-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:
+Laden Sie (1) die beiden HTML-Dateien von oben und (2) die mp3-Musikdatei(en) hoch, die Sie in Ihrem Fragebogen verwenden möchten.
+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.
-===== Fragebogen mit Frameset verschicken =====
+**Wichtig:** Das ''start.html'' ergänzen Sie __nicht__ in SoSci Survey, sondern Sie geben es einfach nur in der Adresszeile Ihres Browsers ein.
-Um das Frameset nun vollständig zu nutzen muss der Link zum Fragebogen mit der Endung /start.html ergänzt werden (oder dem individuellen Namen Ihres Framesets). Dies dürfen Sie nicht vergessen, sonst funktioniert es nicht. Wie sich der Link zum Fragebogen zusammen setzt können Sie hier nachlesen: [[de:survey:url|]]
+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.