Differences

This shows you the differences between two versions of the page.

--- en:create:frameset [21.09.2015 13:07] – [Load frame contents] admin
+++ en:create:frameset [26.04.2025 22:03] (current) – [Define a frameset] amhof
@@ Line 1: / Line 1: @@
 ====== Play music along several pages ======
-SoSci gives you the opportunity to present music or videos along the whole qustionaire by means of a frameset. How this works is shown below.((Thanks to [[sbrand@students.uni-mainz.de|Sebastian Brand]] for this chapter.)).
+SoSci Survey offers the possibility to display music or a video over an entire questionnaire using a frameset. One challenge is that modern browsers do not simply play music automatically -- so a little JavaScript is required, and the music may also start earliest when the first page is submitted.
+**Note:** Assume that respondents have their speakers turned off, they need to put on headphones first, or their smartphone is on mute. Point out the audio output at an early stage and offer the opportunity to test the audio output in the questionnaire.
 ===== Define a frameset =====
-The first step is to create a frameset in SoSci Survey. Click [[http://wiki.selfhtml.org/wiki/HTML/Frames|SelfHTML: Frames]] to see what a frameset is. Loosley speaking a frameset is a table, which devides a website into areas, whereas the contents can be worked on individually.
+The first step is to create a frameset. Click [[http://wiki.selfhtml.org/wiki/HTML/Frames|SelfHTML: Frames]] to see what a frameset is. Loosley speaking a frameset is a table, which devides a website into areas, whereas the contents can be worked on individually.
-To generate a frameset in SoSci Survey a text file has to be created on the desktop. Name it e.g. “Start.html”.
+To generate a frameset in SoSci Survey a text file has to be created on the desktop. Name it e.g. “start.html”.
 **Important:** It is crucial saving the file as a pure ASCII-text. Due to this it is necessary to use a text editor (e.g. [[https://notepad-plus-plus.org/|Notepad++]], [[http://www.scintilla.org/SciTE.html|SciTE]] or Windows note pad) but __no__ word processor such as MS Word or OpenOffice/LibreOffice.
-**Important:** Take care that the file extension is changed respectively, converting the former text file into an html-file. The file should now contain the following html-code:
+**Important:** Take care that the file extension is changed respectively, converting the former text file into an html-file. You can download the contents of this file directly.
-<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>Questionnaire</title>
+       <title>Questionnaire</title>
   </head>
-  <frameset rows="99%, 1%">
+  <frameset rows="99%, 1%" border="0">
-    <frame src="https://www.soscisurvey.de/PROJECT/" name="survey">
+       <frame src="./index.php" name="survey">
-    <frame name="Exampleframe">
+       <frame src="./music.html" name="music">
   </frameset>
 </html>
-</code>
+</file>
-Watch out for the line ''<frame src=...'' -- your individual questionnaire-URL should be taken down here ([[:en:survey:url]]) in order to start the questionnaire in the frame. According to personal needs and preferences the following changes in the code can be made additionally:
-  * The attribute ''rows'' can be replaced by ''cols'' to change intersecting the page by line (frames below each other) to intersecting by row (next to each other).
+===== Content for the frameset =====
-  * Division by percentage can be adapted.
-  * Frames can be renamed (attribute ''name'').
-  * Frames ca be added as long as a total of 100 is summed up in the line and row percentages.
-  * Using the command  ''%%border="0"%%''  borders around the frames can be deleted.
-After creating and working on the file it can be loaded up in **pics and media** to the project directory. The result will be visible by attaching ''/start.html'' e.g. ''%%https://www.soscisurvey.de/PROJECT/start.html%%'' to the project’s URL.
+The frameset refers once to the questionnaire (‘'index.php’') and once to a file ‘'music.html’'. You will also need this file.
-**Important**: Do __not__ upload the protected filestorage!
+<file html music.html>
-===== Prepare Frame content =====
-The next step ist o decide what kind of content shall be uploaded to a frame. The frame should fit for a video in order to see it completely. In case of music it should be rather small so it doesn’t hide the questionnaire itself. If you know what contents ist to be added to the frame th following steps have to be taken; Create a new txt i.e. HTML file on the desktop e.g. ''play.html''. Edit file and add the HTML code which will play the contents. Here an example for music:
-<code html>
 <!DOCTYPE html>
 <html lang="de">
@@ Line 51: / Line 42: @@
     <meta charset="utf-8">
     <title>Audio</title>
-  </head>
+    <script>
-  <body>
+    window.addEventListener("message",
-    <audio id="bgAudio01" preload autoplay>
+        function(evt) {
-      <source src="EXAMPLE.MP3">
+           var audio = document.getElementById("bgAudio");
-    </audio>
+           var data = evt.data;
-  </body>
+ 	   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>
 </html>
+</file>
+This file contains an ‘’<audio>‘’ element and remains open the entire time. At the end of the file you will find the following line. Replace the ‘'stimulus.mp3’' here with the file name of your music file.
+<code html>
+<source src="stimulus.mp3">
 </code>
-Here the audio file was attached by ''<audio>''-tag, which is supported by most browsers. Attaching by flash player is explained here: [[:en:create:media]]
-The music file („EXAMPLE.MP3“) has to be uploaded to SoSci Survey likewise. Setting the player’s pixel size to zero lets the player disappear leaving the music playing (e.g. 110 pixel). Now the edited file has to be loaded up to the project’s directory as well.
+===== Use content in the questionnaire =====
+In SoSci Survey, open **Images and media files** and then the “Media files” tab.
-===== Load frame contents =====
+Upload (1) the two HTML files from above and (2) the mp3 music file(s) you want to use in your questionnaire.
-Probably the audio file is not meant to play from the beginning but rather start at some point later on. For this purpose copy the file ''play.html'' via JavaScript to the little frame. This is achieved by creating a new text fragment in **Text Elements & Labels** containing the following:
+In order for the playback to work, you must __not__ use the "protected file storage" when uploading.
+In addition, you must (3) insert a little JavaScript code under **Compile questionnaire**. Drag an "HTML code" element onto the questionnaire page before the music is to start and insert the following content there.
 <code html>
-<script type="text/javascript">
-<!--
+<script>
-top.Exampleframe.location.href = "play.html";
+function messageToMusic(msg) {
-// -->
+    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>
-If this text fragment is now added to a page in the questionaire the content of the frame is changed automatically and music, video etc will be uploaded.
+This JavaScript code does the following: When the respondent clicks on the "Next" button (‘'SoSciTools.questionnaire.attachCheck()’'), a message is sent to the window with the music file. This message is processed by the JavaScript in ''music.html'' and starts playing the music.
-===== Delete frame contents =====
+Note the following lines at the end of the file.
-To empty frames (and to silence the music) load an empty HTML page into the frame. Most suitable an empty html document is created on the desktop which can be named ''empty.html''. As the name states leave it empty an upload respectively. The music can be stopped using the following command:
+<code javascript>
+messageToMusic({
+    source: "Musik02.mp3",
+    action: "play"
+});
+</code>
+The ‘'source’' entry can be used to (optionally) load a different audio file. This entry can be omitted if you do not need to vary the audio file.
+<code javascript>
+messageToMusic({
+    action: "play"
+});
+</code>
+If you vary the audio file experimentally, you can also use a [[:en:create:placeholders|placeholder]] here. For more information, see [[:en:create:randomization-media#randomization_of_images_using_placeholders|Randomization of images using placeholders]].
+<code javascript>
+messageToMusic({
+    source: "%filename%",
+    action: "play"
+});
+</code>
+Use the ''action'' entry to specify whether playback should start (''play'') or stop (''stop'').
+===== Start survey period =====
+To ensure that the link works, make sure that the questionnaire is accessible online in the **project settings**.
+Alternatively, you can enter a pretest link in the ''start.html'' file by adapting the following line:
 <code html>
-<script type="text/javascript">
+<frame src="./index.php" name="survey">
-<!--
-top.Exampleframe.location.href = "empty.html";
-// -->
-</script>
 </code>
+Replace the ''./index.php'' here with the pretest link if you cannot or do not want to put the questionnaire online regularly yet. Don't forget to upload the modified file and change it again at the start of the survey.
+===== Accessing the questionnaire =====
+To load the frameset with the two components (questionnaire and file with the ''<audio>'' element), do not use the "normal" link to the questionnaire
+   https://www.soscisurvey.de/PROJEKT/
+but add a ''start.html'' at the end, i.e.
+   https://www.soscisurvey.de/PROJEKT/start.html
+Instead of ''PROJEKT'', you must of course use the project directory of your survey project ([[:en:survey:url]]). You can now enter this link in the address bar of the browser to test the background music. You will also use this added link later for the addressees of your study.
+**Important:** Do __not__ add the ‘'start.html’' in SoSci Survey, but simply enter it in the address bar of your browser.
+If the file does not play, open the [[:en:general:browser-tools]] after calling the ''start.html'' and check whether error messages are displayed there.
 ===== Limitations =====
-  * While loading the frame set it is not possible to transmit variables (e.g. reference or serial number) to the questionaire, as mentioned here: [[:en:survey:url]].
+ * When calling up the frameset, you cannot transmit any variables (e.g. reference or participation code) to the questionnaire, as described under [[:en:survey:url]].
-  * Using this solution fading the music is not feasible. It is cut out abruptly loading the empty file.
+ * With this solution, it is only possible to fade out the music at the end with additional effort. Otherwise, playback ends abruptly when the ‘'stop’' message is sent.