Adding disclaimer as seperate site

.drone.yml

@@ -1,30 +0,0 @@
-kind: pipeline
-name: default
-
-steps:
-- name: deploy
-  image: registry.eterna.leafbla.de/pelipper
-  settings:
-    ssh_key:
-      from_secret: rsync_key
-    source: slaeforms/
-    destination: pelipper@oreburgh.leafbla.de:/srv/docker/janapp/slaeforms/
-
-- name: restart
-  image: registry.eterna.leafbla.de/drowzee
-  settings:
-    host: oreburgh.leafbla.de
-    username: psyduck
-    key:
-      from_secret: deploy_key
-    command: |
-      cd /srv/docker/janapp;
-      docker compose down;
-      docker compose up --build -d;
-
-trigger:
-  branch:
-  - main
-
-image_pull_secrets:
-- docker_config

slaeforms/app.py

@@ -541,7 +541,7 @@ def export_all_videos():
     with ZipFile('zip_exports/all_videos.zip', 'w') as zipf: #no compression, need to add zipfile.ZIP_DEFLATED for compression
         zipdir('uploads/', zipf)
     
-    return send_file("zip_exports/all_videos.zip", as_attachment=False, download_name="all_tables.zip")
+    return send_file("zip_exports/all_videos.zip", as_attachment=False, download_name="all_videos.zip")
  
 
 def create_csv(table, filename):
@@ -644,6 +644,11 @@ def deleteuploads():
 
     return redirect("/all_links")
 
+@app.route("/task3")
+def task3():
+    return render_template("task3.html")
+
+
 
 # Root page -----------------------------
 

slaeforms/static/styles.css

@@ -88,7 +88,7 @@ dialog .iframe-container {
     max-width: 1690px;
     /* Maximum width to keep it from getting too wide on large screens */
     padding: 20px;
-    background-color: #7b8cdb;
+    background-color: #b6c3ff; /* used to be 7b8cdb */
     /* Just for visual differentiation */
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
@@ -143,6 +143,10 @@ label {
     width: 60%;
 }
 
+button  {
+    border: 1px solid #000;
+}
+
 /* buttons */
 .buttondisable {
     filter: invert(65%);
@@ -160,6 +164,7 @@ label {
     /* Optional: rounds the corners of the button */
     width: auto;
     float: right;
+    border: 1px solid #000;
 }
 
 #submitbutton:hover {
@@ -219,7 +224,7 @@ h2 {
     height: 70px;
     /* Set a specific height for the buttons */
     background-color: #cae4ff;
-    border: none;
+    border: 1px solid #000;
     color: white;
     padding: 10px 20px;
     margin: 0 10px;
@@ -269,6 +274,7 @@ video {
     width: auto;
     height: auto;
     margin: auto auto;
+    display: block;
 }
 
 iframe {
@@ -285,12 +291,29 @@ iframe {
 }
 
 .iframe-container {
+    position: relative;
+    /*padding-bottom: 56.25%;*/
+    /* 16:9 */
+    padding-bottom: 100%;
+    /* 1:1 */
+    height: 0;
+}
+
+.iframe-container2 {
     position: relative;
     padding-bottom: 56.25%;
     /* 16:9 */
     height: 0;
 }
 
+.iframe-container2 iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
 .video-container {
     max-width: 100%;
     position: relative;

slaeforms/templates/datenschutz.html

@@ -12,11 +12,6 @@
     <div class="container">
         <h2>Datenschutzerklärung</h2>
 
-        <video controls>
-            <source src="{{ url_for('static', filename='videos/platzhalter-video.mp4') }}" type="video/mp4">
-        </video>
-        <div class="spacer" aria-hidden="true" style="height:20px"></div>
-
         <div class="textblock">
             <h3>
                 Information betroffener Personen zur Verarbeitung personenbezogener Daten

slaeforms/templates/impressum.html

@@ -13,6 +13,9 @@
         <h2>Impressum</h2>
         
         <div class="textblock">
+            <p>
+                Datenschutzerklärung: <a href="{{ url_for('datenschutz') }}" target="_blank">Datenschutz</a>
+            </p>
             <p>
                 Verantwortlicher für slaeforms.leafbla.de: Jan Dickmann, zusammen mit dem DFKI Saarbrücken, Affective Computing Group
             </p>

slaeforms/templates/intropage.html

@@ -12,24 +12,19 @@
     <div class="container">
         <h2>SLAEFORMS Gebärdensprachavatar Studie</h2>
 
-        <video controls>
-            <source src="{{ url_for('static', filename='videos/platzhalter-video.mp4') }}" type="video/mp4">
-        </video>
-        <div class="spacer" aria-hidden="true" style="height:20px"></div>
-        <div class="spacer" aria-hidden="true" style="height:20px"></div>
         <div class="textblock">
 
             <p style="font-size: 22px;">
-                Bei allen Aufgaben in dieser Studie gibt es ein Erklärvideo, in dem die Aufgabe und die Antwortmöglichkeiten in Gebärdensprache erklärt werden.
-                Falls Sie Fragen haben oder eine Aufgabe nicht verstehen, können Sie den "Gebärdensprach"-Button auf der rechten Seite des Bildschirms klicken, um das Video und den Erklärtext zu sehen.
+                Bei allen Aufgaben in dieser Studie gibt es Texte, in denen die Aufgaben und die Antwortmöglichkeiten erklärt werden.
+                Falls Sie Fragen haben oder eine Aufgabe nicht verstehen, können Sie den "Info"-Button auf der rechten Seite des Bildschirms klicken, um den Erklärtext zu sehen.
                 Sie können den Button nochmal anklicken, um wieder zur Aufgabe zurückzukommen.
             </p>
             <div style="margin: auto; display: block; max-width: 90px;">
                 <button style="margin: auto; max-width: 90px;"><img class="infoButtonIcon" id="buttonInfoIcon"
-                    src="{{ url_for('static', filename='icons/sl-icon.png')}}" alt="sign-language-icon"></button>
+                    src="{{ url_for('static', filename='icons/info-icon.png')}}" alt="info-icon"></button>
             </div>
             <p style="font-size: 22px; text-align: center;">
-                Der Gebärdensprach-Button.
+                Das ist der Info-Button.
             </p>
 
         </div>

slaeforms/templates/oldstart.html

@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css')}}"" /> <!--  styles.css  {{ url_for('static', filename='styles.css')}}-->
+    <link rel=" shortcut icon" href="{{ url_for('static', filename='icons/favicon.ico') }}">
+    <title>DGS Avatar Study</title>
+</head>
+
+<body>
+    <div class="container">
+        <h2>SLAEFORMS Gebärdensprachavatar Studie</h2>
+
+        <div class="textblock">
+
+
+                <div style="margin: auto; font-size: 20px;">
+                <p>
+                    Hallo und willkommen zu dieser Studie, danke für Ihre Teilnahme.
+                </p>
+                <p>
+                    In dieser Studie geht es um die Entwicklung von Gebärdensprachavataren.
+                </p>
+                <p>
+                    Bitte beachten Sie, dass diese Avatare noch in einer frühen Entwicklungsphase und noch nicht für den
+                    Gebrauch in einer App/einem Computerprogramm oder auf einer Webseite geeignet sind. In dieser Studie
+                    geht es darum, einzelne Aspekte der Avatare und neue technologische Ansätze zu testen. Dementsprechend
+                    haben die Avatare noch viele offensichtliche Schwächen, wie zum Beispiel, dass bisher nur die Arme und
+                    der Oberkörper, aber nicht das Gesicht animiert ist. Bitte bewerten Sie nur die Qualität der Hände und
+                    Arme.
+                </p>
+                <p>
+                    Diese Studie richtet sich an Menschen, die Gebärdensprache beherrschen, insbesondere gehörlose Menschen.
+                    Nehmen Sie bitte nur Teil, wenn Sie (Deutsche) Gebärdensprache beherrschen.
+                    Die Studie dauert ca. 20 Minuten.
+                </p>
+                <p>
+                    Während der Studie werden sie sich Videos anschauen, diese bewerten und Feedback dazu geben können.
+                    Verwenden Sie deshalb bitte, wenn möglich ein Gerät mit einem großen Bildschirm (Laptop, PC, Tablet) für
+                    Ihre Teilnahme, damit Sie die Videos in ausreichender Größe sehen können.
+                </p>
+                <p>
+                    Sie haben während der Studie die Möglichkeit (optional) Videofeedback zu geben, dazu brauchen sie eine
+                    Webcam. Die Videos werden nicht veröffentlicht und nur Übersetzern zur Auswertung der Studienergebnisse
+                    gezeigt.
+                </p>
+                <p>
+                    Das Laden der Seiten kann manchmal einige Sekunden dauern. Falls es zu einem Fehler kommen sollte und ein Video nicht geladen wird, versuchen Sie bitte die Seite neu zu laden.
+                </p>
+                <p>
+                    Für jeden Teil der Studie gibt es einen Text, der die Fragestellung und die Antwortmöglichkeiten erklärt. Falls Sie den Text während der Studie nochmal sehen möchten, können Sie es
+                    über den „Info“-Knopf auf der rechten Seite aufrufen.
+                </p>
+                <p>
+                    Bitte versuchen sie während der Studie nicht auf die vorherige Seite "zurück" zu gehen, da sie nicht zu vorherigen Fragen zurück können.
+                </p>
+
+            </div>
+
+        </div>
+        <form class="dsgvoform" action="{{ url_for('sendpage') }}" method="post">
+            <div class="button-container">
+                <button id="submitbutton" type="submit">Weiter</button>
+            </div>
+        </form>
+        <div class="spacer" aria-hidden="true" style="height:80px"></div>
+    </div>
+</body>
+<footer>
+    <div class="container" style="font-size: 19px;">
+    <a href="{{ url_for('startpage') }}" target="_blank">Startseite</a>
+    <a href="{{ url_for('impressum') }}" target="_blank">Impressum</a>
+    <a href="{{ url_for('datenschutz') }}" target="_blank">Datenschutz</a>
+    </div>
+</footer> 
+</html>

slaeforms/templates/p1intro.html

@@ -12,10 +12,6 @@
     <div class="container">
         <h2>SLAEFORMS Gebärdensprachavatar Studie</h2>
 
-        <video controls>
-            <source src="{{ url_for('static', filename='videos/platzhalter-video.mp4') }}" type="video/mp4">
-        </video>
-        <div class="spacer" aria-hidden="true" style="height:20px"></div>
         <div class="textblock">
 
             {% include "p1infos.html" %}

slaeforms/templates/p2infos.html

@@ -1,7 +1,7 @@
 <div style="margin: auto; max-width: 80%; font-size: 20px;">
     <p>Studie Teil 2:</p>
     <p>Im Folgenden sehen Sie zwei Videos, in denen der gleiche Satz mit unterschiedlichen Formulierungen gebärdet wird.</p>
-    <p>Der folgende Satz wird gebärdet: Gleis 18, Einfahrt RE 77 Richtung Köln Hauptbahnhof über Hannover, Abfahrt 3:44 Uhr.</p>
+    <p>Der folgende Satz wird gebärdet: Einfahrt RE 77 Richtung Köln Hauptbahnhof über Hannover, Abfahrt 3:44 Uhr.</p>
     <p>Bitte verwenden Sie die Punkteskala, um zu bewerten, welches der beiden Videos Sie besser finden.</p>
     <ol start="1">
         <li>Welche Formulierung war natürlicher?</li>

slaeforms/templates/p2intro.html

@@ -12,10 +12,6 @@
     <div class="container">
         <h2>SLAEFORMS Gebärdensprachavatar Studie</h2>
 
-        <video controls>
-            <source src="{{ url_for('static', filename='videos/platzhalter-video.mp4') }}" type="video/mp4">
-        </video>
-        <div class="spacer" aria-hidden="true" style="height:20px"></div>
         <div class="textblock">
 
             {% include "p2infos.html" %}

slaeforms/templates/p3infos.html

@@ -11,10 +11,10 @@
     </ol>
     <p>Die Antwortmöglichkeiten sind jedes Mal:</p>
     <ol start="1">
-        <li>Links</li>
-        <li>Eher links</li>
-        <li>Beide gleich</li>
-        <li>Eher rechts</li>
-        <li>Rechts</li>
+        <li>Trifft überhaupt nicht zu</li>
+        <li>Trifft eher nicht zu</li>
+        <li>Ich weiß nicht</li>
+        <li>Trifft eher zu</li>
+        <li>Trifft vollkommen zu</li>
     </ol>
 </div>

slaeforms/templates/p3intro.html

@@ -12,10 +12,6 @@
     <div class="container">
         <h2>SLAEFORMS Gebärdensprachavatar Studie</h2>
 
-        <video controls>
-            <source src="{{ url_for('static', filename='videos/platzhalter-video.mp4') }}" type="video/mp4">
-        </video>
-        <div class="spacer" aria-hidden="true" style="height:20px"></div>
         <div class="textblock">
 
             {% include "p3infos.html" %}

slaeforms/templates/standard_template.html

@@ -13,6 +13,13 @@
         allowfullscreen></iframe>
 </div>
 
+{% elif (embed == "vimeo") %}
+<div class="iframe-container">
+
+    <iframe title="vimeo-player" class="center" src="{{ video_url }}" frameborder="0" allowfullscreen></iframe>
+
+</div>
+
 {% elif (embed == "no") %}
 
 <video controls>
@@ -42,8 +49,6 @@
         </div>
     </div>
 
-
-
     <div class="dv_half">
         <div class="iframe-container">
             <iframe class="center" src="{{ video_url2 }}" title="YouTube video player" frameborder="0"
@@ -53,6 +58,25 @@
     </div>
 
 </div>
+
+{% elif (embed == "vimeo") %}
+<div class="double_video_container">
+
+    <div class="dv_half">
+        <div class="iframe-container">
+            <iframe title="vimeo-player" class="center" src="{{ video_url1 }}" frameborder="0" allowfullscreen></iframe>
+        </div>
+    </div>
+
+    <div class="dv_half">
+        <div class="iframe-container">
+            <iframe title="vimeo-player" class="center" src="{{ video_url2 }}" frameborder="0" allowfullscreen></iframe>
+        </div>
+    </div>
+
+</div>
+
+
 {% elif (embed == "no") %}
 <div class="double_video_container">
     <div class="dv_half">
@@ -121,9 +145,11 @@ step={{question["step"]}}
             
             <button class="dialogBtn" autofocus><img class="infoButtonIcon" id="buttonClose"
                     src="{{ url_for('static', filename='icons/x-icon.png')}}" alt="Delete Icon"></button>
+            {% if ("videourl" in infovideo) %}
             <video controls>
                 <source src="{{ url_for('static', filename=infovideo['videourl']) }}" type="video/mp4">
             </video>
+            {% endif %}
             <div class="dialogTextContainer">
                 {% if ("infotext" in infovideo) %}
                 <p>{{ infovideo["infotext"] }}</p>
@@ -134,7 +160,7 @@ step={{question["step"]}}
             </div>
         </dialog>
         <button class="dialogBtn"><img class="infoButtonIcon" id="buttonInfoIcon"
-                src="{{ url_for('static', filename='icons/sl-icon.png')}}" alt="Info Icon"></button>
+                src="{{ url_for('static', filename='icons/info-icon.png')}}" alt="Info Icon"></button>
         <script src="{{ url_for('static', filename='infoDialogScript.js')}}"></script>
         {% endif %}
 

slaeforms/templates/startpage.html

@@ -12,10 +12,13 @@
     <div class="container" style="height: 100%; font-size: 22px;">
         <h2>SLAEFORMS Gebärdensprachavatar Studie</h2>
 
-        <video controls>
-            <source src="{{ url_for('static', filename='videos/platzhalter-video.mp4') }}" type="video/mp4">
-        </video>
-        <div class="spacer" aria-hidden="true" style="height:20px"></div>
+        <div class="iframe-container2">
+
+            <iframe title="vimeo-player" src="https://player.vimeo.com/video/1031133490?h=bfa5b559f9" frameborder="0"
+                allowfullscreen></iframe>
+
+        </div>
+
 
         <div class="textblock">
             <p>
@@ -25,39 +28,21 @@
                 In dieser Studie geht es um die Entwicklung von Gebärdensprachavataren.
             </p>
             <p>
-                Bitte beachten Sie, dass diese Avatare noch in einer frühen Entwicklungsphase und noch nicht für den
-                Gebrauch in einer App/einem Computerprogramm oder auf einer Webseite geeignet sind. In dieser Studie
-                geht es darum, einzelne Aspekte der Avatare und neue technologische Ansätze zu testen. Dementsprechend
-                haben die Avatare noch viele offensichtliche Schwächen, wie zum Beispiel, dass bisher nur die Arme und
-                der Oberkörper, aber nicht das Gesicht animiert ist. Bitte bewerten Sie nur die Qualität der Hände und
-                Arme.
+                Bitte berücksichtige, dass die Avatare, die wir zeigen, in keiner Weise der Qualität entsprechen, wie
+                sie genutzt werden sollen. Sie sind nur Beispiele, die niemals in einer Anwendung zu sehen sein werden.
+                Es geht darum, dass wir die Darstellung der Hände und Arme testen wollen. Bitte bewertet deshalb nicht
+                Darstellungsqualität und lasst euch nicht davon beeinflussen. Außerdem möchten wir testen, wie die
+                Nutzung einer Feedback-Funktion per Videoaufnahme verwendet werden kann.
             </p>
             <p>
-                Diese Studie richtet sich an Menschen, die Gebärdensprache beherrschen, insbesondere gehörlose Menschen.
-                Nehmen Sie bitte nur Teil, wenn Sie (Deutsche) Gebärdensprache beherrschen.
-                Die Studie dauert ca. 20 Minuten.
+                Die Rückmeldung von euch ist wichtig und ihr könnt das in Gebärdensprache machen.
+                Die Teilnahme wird nur für die Auswertung genutzt. In keiner Weise wird etwas von euch veröffentlicht, auch nicht eure Videos.
+                Alle weiteren Infos findet ihr im Text.
             </p>
             <p>
-                Während der Studie werden sie sich Videos anschauen, diese bewerten und Feedback dazu geben können.
-                Verwenden Sie deshalb bitte, wenn möglich ein Gerät mit einem großen Bildschirm (Laptop, PC, Tablet) für
-                Ihre Teilnahme, damit Sie die Videos in ausreichender Größe sehen können.
-            </p>
-            <p>
-                Sie haben während der Studie die Möglichkeit (optional) Videofeedback zu geben, dazu brauchen sie eine
-                Webcam. Die Videos werden nicht veröffentlicht und nur Übersetzern zur Auswertung der Studienergebnisse
-                gezeigt.
-            </p>
-            <p>
-                Das Laden der Seiten kann manchmal einige Sekunden dauern. Falls es zu einem Fehler kommen sollte und ein Video nicht geladen wird, versuchen Sie bitte die Seite neu zu laden.
-            </p>
-            <p>
-                Für jeden Teil der Studie gibt es ein Video, das die Fragestellung und die Antwortmöglichkeiten in
-                Gebärdensprache erklärt. Falls Sie das Video während der Studie nochmal sehen möchten, können Sie es
-                über den „Info“-Knopf auf der rechten Seite aufrufen.
-            </p>
-            <p>
-                Bitte versuchen sie während der Studie nicht auf die vorherige Seite "zurück" zu gehen, da sie nicht zu vorherigen Fragen zurück können.
+                Danke für eure Teilnahme, die im Rahmen eine Abschlussarbeit erfolgt. Weitere Infos dazu findet ihr im Impressum.
             </p>
+            <div class="spacer" aria-hidden="true" style="height:20px"></div>
             <p>
                 Die Teilnahme an dieser Studie ist komplett freiwillig, Sie können die Studie zu jedem Zeitpunkt
                 abbrechen, indem Sie die Seite einfach schließen. Sie können außerdem die Löschung aller Daten bei uns

slaeforms/templates/task3.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css')}}" />
+    <!--  styles.css  {{ url_for('static', filename='styles.css')}}-->
+    <title>Task 3 Videos</title>
+</head>
+
+<body>
+    <div class="container">
+    <div class="double_video_container">
+        <div class="dv_half">
+            <div class="iframe-container">
+                <video controls>
+                    <source src="{{ url_for('static', filename='videos/0009-intro-inflected.mp4') }}" type="video/mp4">
+                </video>
+            </div>
+        </div>
+        <div class="dv_half">
+            <div class="iframe-container">
+                <video controls>
+                    <source src="{{ url_for('static', filename='videos/0009-variation-inflected.mp4') }}" type="video/mp4">
+                </video>
+            </div>
+        </div>
+    </div>
+    <div class="spacer" aria-hidden="true" style="height:30px"></div>
+    
+    </div>
+</body>
+
+</html>

slaeforms/userstudy1.json

@@ -1,4 +1,8 @@
 {
+    "Block -1":{
+        "type": "SinglePage",
+        "template": "oldstart.html"
+    },
     "Block 0":{
         "type": "SinglePage",
         "template": "intropage.html"
@@ -7,13 +11,10 @@
         "type": "TaskTemplate",
         "template": "standard_template.html",
         "stimuli": {
-            "type": "single_video",
-            "order": "",
+            "type": "empty",
             "list": {
-                "video_1": "platzhalter-video.mp4"
-            },
-            "configuration": {
-                "embed": "no"
+                "empty_stimulus": ""
+            
             }
         },
         "questions": {
@@ -226,7 +227,6 @@
             }
         },
         "infovideo": {
-            "videourl": "videos/platzhalter-video.mp4",
             "htmlblock": "dqinfos.html",
             "configuration": {
                 "embed": "no"
@@ -296,9 +296,9 @@
             "type": "single_video",
             "order": "random",
             "list": {
-                "video_1": "0009-inflected.mp4",
-                "video_2": "0009-mocap.mp4",
-                "video_3": "0009-simple.mp4"
+                "video_1": "0044-inflected.mp4",
+                "video_2": "0044-mocap.mp4",
+                "video_3": "0044-simple.mp4"
             },
             "configuration": {
                 "embed": "no"
@@ -433,7 +433,6 @@
             }
         },
         "infovideo": {
-            "videourl": "videos/platzhalter-video.mp4",
             "htmlblock": "p1infos.html",
             "configuration": {
                 "embed": "no"
@@ -623,7 +622,6 @@
             }
         },
         "infovideo": {
-            "videourl": "videos/platzhalter-video.mp4",
             "htmlblock": "p1infos.html",
             "configuration": {
                 "embed": "no"
@@ -667,10 +665,10 @@
         "stimuli": {
             "type": "double_video",
             "list_1": {
-                "video_1": "0009-inflected.mp4"
+                "video_1": "0009-intro-inflected.mp4"
             },
             "list_2": {
-                "video_1": "0009-variation-wide.mp4"
+                "video_1": "0009-variation-inflected.mp4"
             },
             "configuration": {
                 "embed": "no"
@@ -680,7 +678,7 @@
             "question0": {
                 "type": "textblock",
                 "name": "fragestellung",
-                "text": "Der folgende Satz wird gebärdet: Gleis 18, Einfahrt RE 77 Richtung Köln Hauptbahnhof über Hannover, Abfahrt 3:44 Uhr."
+                "text": "Der folgende Satz wird gebärdet: Einfahrt RE 77 Richtung Köln Hauptbahnhof über Hannover, Abfahrt 3:44 Uhr."
             },
             "question1": {
                 "type": "likert-basic",
@@ -809,7 +807,6 @@
             }
         },
         "infovideo": {
-            "videourl": "videos/platzhalter-video.mp4",
             "htmlblock": "p2infos.html",
             "configuration": {
                 "embed": "no"
@@ -1001,7 +998,6 @@
             }
         },
         "infovideo": {
-            "videourl": "videos/platzhalter-video.mp4",
             "htmlblock": "p3infos.html",
             "configuration": {
                 "embed": "no"
@@ -1043,13 +1039,9 @@
         "type": "TaskTemplate",
         "template": "standard_template.html",
         "stimuli": {
-            "type": "single_video",
-            "order": "random",
+            "type": "empty",
             "list": {
-                "video_1": "platzhalter-video.mp4"
-            },
-            "configuration": {
-                "embed": "no"
+                "empty_stimulus": ""
             },
             "lastquestion": "true"
         },