.gitignore

@@ -6,6 +6,7 @@ __pycache__/
 instance/
 
 uploads/
+zip_exports/
 
 .pytest_cache/
 .coverage

slaeforms/app.py

@@ -42,8 +42,8 @@ app.secret_key = b"29fe9e8edd407c5491d4f1c05632d9fa33e26ed8734a3f5e080ebac3772a5
 UPLOAD_FOLDER = 'uploads'
 EXPORT_FOLDER = 'exports'
 PASSWORD = '#1ACGmsjd'
-# CONFIGFILE = 'userstudy1.json'
-CONFIGFILE = 'test.json'
+CONFIGFILE = 'userstudy1.json'
+# CONFIGFILE = 'test.json'
 # CONFIGFILE = 'default.json'
 
 #csrf = CSRFProtect(app) #enable CSRF protection globally
@@ -186,7 +186,7 @@ def startpage():
 
         for name in block_names:
             print("block: ",name)
-            if config[name]["type"] == "TaskTemplate" and ("stimuli" in current_block):
+            if config[name]["type"] == "TaskTemplate" and ("stimuli" in config[name]):
                     match config[name]["stimuli"]["type"]:
                         case "single_video": 
                             order = list(config[name]["stimuli"]["list"]) # order = list of simuli keys
@@ -237,7 +237,7 @@ def startpage():
         return redirect("/form")
     
     return render_template(
-        "teststartpage.html"
+        "startpage.html"
     )
 
 @app.route("/endpage")
@@ -245,6 +245,14 @@ def endpage():
     print("Form is done, sent to endpage")
     return render_template("endpage.html")
 
+@app.route("/datenschutz")
+def datenschutz():
+    return render_template("datenschutz.html")
+
+@app.route("/studytest")
+def studytest():
+    return render_template("studytest.html")
+
 
 @app.route("/form")
 def form():
@@ -353,7 +361,7 @@ def sendpage():
         video = request.files['recordedVideo']
         formatted_date = date.strftime("%Y.%m.%d %H-%M-%S")
         print("date: ", date)
-        video_name =  str(session_user_id) + "_" + session["current_block_name"] + "_" + session["current_stimulus_name"] + "_" + str(formatted_date) + ".webm"
+        video_name =  str(session_user_id) + "_" + session["current_block_name"] + "_" + str(session["current_stimulus_name"]) + "_" + str(formatted_date) + ".webm"
         path = os.path.join(UPLOAD_FOLDER, video_name)
         print("path: ",path)
         os.makedirs(UPLOAD_FOLDER, exist_ok=True)
@@ -364,7 +372,19 @@ def sendpage():
             setattr(new_entry, "video_upload", video_name)
 
 
-    for key, value in request.form.items():
+    # TODO maybe find a prettier solution, this handeles multiple choice now, so the fact that there can be
+    # multiple keys that are the same in the form data, but I want to bring them together to 1 key value pair
+    form_data = {}
+    for key in request.form:
+        values = request.form.getlist(key)
+
+        # If there's more than one value for the key, join them with commas
+        if len(values) > 1:
+            form_data[key] = ','.join(map(str, values))  # Join multiple values into a single comma-separated string
+        else:
+            form_data[key] = values[0]  # If only one value, store it directly
+
+    for key, value in form_data.items():
         print("hasattr key: ", key)
         if hasattr(new_entry, key):
             print("key exists: ", key)
@@ -429,9 +449,18 @@ def update_session():
             session["current_block_index"] += 1 
             session["current_block_name"] = session["block_names"][session["current_block_index"]]
             
-    if "stimuli" in config[session["current_block_name"]]:
-                # set the name of the current stimulus
-                session["current_stimulus_name"] = session["block_order"][session["current_block_name"]][session["current_stimulus_index"]]
+    #set values for the new block
+    current_block = config[session["current_block_name"]]
+
+    if "stimuli" in current_block:
+        # set the name of the current stimulus
+        session["current_stimulus_name"] = session["block_order"][session["current_block_name"]][session["current_stimulus_index"]]
+
+        # if the block has stimuli, get how many
+        if current_block["stimuli"]["type"] == "single_video" or current_block["stimuli"]["type"] == "empty":
+            session["number_of_stimuli"] = len(list(current_block["stimuli"]["list"]))
+        elif current_block["stimuli"]["type"] == "double_video":
+            session["number_of_stimuli"] = len(list(current_block["stimuli"]["list_1"]))
     
     print("---Session updated-----------------------------------------------")
     print("current_block_index / number_of_blocks: {current_block_index} / {number_of_blocks}".format(current_block_index=session["current_block_index"],number_of_blocks=session["number_of_blocks"]))

slaeforms/static/styles.css

@@ -106,6 +106,10 @@ form {
     padding-bottom: 2em;
 }
 
+.questioncontainer {
+    max-width: 70%;
+    margin: auto;
+}
 
 .dsgvoform {
     text-align: right;
@@ -118,9 +122,7 @@ label {
     margin-bottom: 1.5rem;
 }
 
-input,
-textarea,
-select {
+.inputs {
     margin: 10px 0 0 0;
     width: 60%;
     min-height: 2em;
@@ -157,6 +159,7 @@ select {
     border-radius: 8px;
     /* Optional: rounds the corners of the button */
     width: auto;
+    float: right;
 }
 
 #submitbutton:hover {
@@ -176,8 +179,10 @@ select {
 }
 
 .textarea-label {
-    align-self: flex-start;
-    /* Aligns the label to the start of the container */
+    font-size: 18px;
+    font-weight: bold;
+    text-align: center;
+
 }
 
 /* Helper */
@@ -190,8 +195,7 @@ select {
     text-align: center;
 }
 
-h2,
-h3 {
+h2 {
     text-align: center;
 }
 
@@ -315,7 +319,7 @@ iframe {
 
 .dv_half {
     display: inline-block;
-    width: 45%;
+    width: 48%;
     margin: auto;
 }
 
@@ -324,6 +328,34 @@ iframe {
     display: flex;
 }
 
+
+/* Likert stuff  2 */
+
+.outer-likert-container {
+    display: flex;
+}
+
+.normal-likert-container { /* inner container */
+    display: flex;
+    gap: 10px; /* Adjust spacing */
+    text-align: center;
+    flex-grow: 1;
+    max-width: 70%;
+    margin: auto;
+}
+
+.likertlabel {
+    flex-grow: 1;
+    width: 100%;
+}
+
+.likertinput {
+    margin: auto;
+    width: 60%;
+    min-height: 2em;
+    display: flex;
+}
+
 /* Likert stuff */
 .likert {
     /* --likert-rows: 5;*/
@@ -347,7 +379,7 @@ iframe {
     aspect-ratio: 1.5 / 1;
 }
 
-.likercontainer {
+.likertcontainer {
     margin: 30px auto;
     text-align: center;
 }

slaeforms/templates/datenschutz.html

@@ -0,0 +1,149 @@
+<!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 - Datenschutzerklärung</title>
+</head>
+
+<body>
+    <div class="container">
+        <h2>Datenschutzerklärung</h2>
+
+        <div class="textblock">
+            <h3>
+                Information betroffener Personen zur Verarbeitung personenbezogener Daten
+            </h3>
+            <p>
+                Das DFKI (Deutsches Forschungszentrum für Künstliche Intelligenz) und seine Mitarbeiter/-innen setzen
+                sich ziel- und risikoorientiert für die informationelle Selbstbestimmung und das Grundrecht auf Schutz
+                personenbezogener Daten ein. In dieser Datenschutzerklärung informieren wir über die Verarbeitung
+                personenbezogener Daten in der gegebenen Studie.
+            </p>
+            <h3>
+                Verantwortlicher
+            </h3>
+            <p>
+                Organisation: Deutsches Forschungszentrum für Künstliche Intelligenz, 66123 Saarbrücken
+            </p>
+            <p>
+                Ansprechpartner: Jan Dickmann, jan.dickmann@web.de
+            </p>
+            <h3>
+                Datenschutzbeauftragter
+            </h3>
+            <p>
+                DFKI-Datenschutzbeauftragter: Roland Vogt, roland.vogt@dfki.de
+            </p>
+            <h3>
+                Art der erhobenen Daten
+            </h3>
+            <p>
+                Im Rahmen der Studie werden personenbezogene Daten erhoben, namentlich Alter, Geschlecht, Bildungsgrad,
+                Hörstatus, seit wann der/die Teilnehmer*in Gehörlos ist, wie lange er/sie Gebärdensprache spricht, ob
+                die Eltern Gehörlos waren und welche Sprachen er/sie zuhause und auf der Arbeit/Schule verwendet.
+                Optional können Teilnehmer auch eigenständig Videoaufnahmen aufnehmen und hochladen.
+            </p>
+            <h3>
+                Zweck der Verarbeitung
+            </h3>
+            <p>
+                In der Studie bewerten Teilnehmer Videos von Gebärdensprachavataren und können freiwillig Feedback in
+                Form von Text oder Videoaufnahmen geben. Diese Daten werden soweit möglich vollständig anonymisiert
+                gespeichert. Aufgrund der Charakteristik der Videoaufnahmen ist eine vollständige Anonymisierung im
+                Auswertungsprozess nicht möglich. Die persönliche Zuordnung der betroffenen Personen ist jedoch zu jedem
+                Zeitpunkt für die Verarbeitung der Daten unerheblich. Die Videoaufnahmen werden nach der Studie
+                ausgewertet und als Text ausgeschrieben. Videoausschnitte die nicht als Text weiterverarbeitet, werden
+                können, aber wichtiges Feedback beinhalten, werden nachträglich anonymisiert, um die Identität der
+                Person im Video zu verbergen.
+            </p>
+            <h3>
+                Rechtsgrundlage der Verarbeitung
+            </h3>
+            <p>
+                Die Verarbeitung der personenbezogenen Daten im Rahmen dieser Studie ist rechtmäßig, weil die
+                betroffenen Personen in die Verarbeitung einwilligen (Art. 6 Abs. 1, lit. a EU-DSGVO) oder weil die
+                Verarbeitung für die wissenschaftlichen Forschungszwecke im Bereich des Affective Computing erforderlich
+                ist und die Interessen der betroffenen Personen nicht überwiegen (Art. 6 Abs. 1, lit. e und f EU-DSGVO).
+            </p>
+            <h3>
+                Empfänger
+            </h3>
+            <p>
+                Unter der unmittelbaren Verantwortung des DFKI können die personenbezogenen Daten ausschließlich nach
+                Anonymisierung veröffentlicht oder an Forschungspartner für deren wissenschaftliche Forschungszwecke im
+                Bereich des Affective Computing übermittelt werden. Personenbezogene Daten werden nicht an
+                Auftragsverarbeiter oder andere Empfänger übermittelt, auch nicht zur Löschung oder Vernichtung.
+            </p>
+            <h3>
+                Keine automatisierte Entscheidungsfindung
+            </h3>
+            <p>
+                Die personenbezogenen Daten werden nicht für eine automatisierte Entscheidungsfindung einschließlich
+                Profiling verwendet.
+            </p>
+            <h3>
+                Dauer der Speicherung
+            </h3>
+            <p>
+                Die personenbezogenen Daten werden grundsätzlich für die Dauer der Forschungsprojekte im Bereich des
+                Affective Computing gespeichert. Sie sollen anonymisiert veröffentlicht werden. Nach der Anonymisierung
+                ist kein Rückschluss aus den Daten auf die Identität der Person möglich.
+            </p>
+            <h3>
+                Transparenz und Intervention
+            </h3>
+            <p>
+                Zur Gewährleistung einer transparenten und fairen Verarbeitung im Rahmen dieser Studie bestehen für
+                betroffene Personen die folgenden Rechte:
+            </p>
+            <ul>
+                <li>Das Recht auf Auskunft über die personenbezogenen Daten</li>
+                <li>Das Recht auf Berichtigung und Vervollständigung der personenbezogenen Daten</li>
+                <li>Das Recht auf Löschung der personenbezogenen Daten</li>
+                <li>Das Recht auf Einschränkung der Verarbeitung der personenbezogenen Daten</li>
+                <li>Das Recht auf Widerruf einer erteilten Einwilligung</li>
+                <li>Das Recht auf Widerspruch gegen die Verarbeitung der personenbezogenen Daten</li>
+            </ul>
+            <h3>
+                Recht auf Beschwerde
+            </h3>
+            <p>
+                Betroffene Personen haben das Recht auf Beschwerde bei einer Aufsichtsbehörde, wenn sie der Ansicht
+                sind, dass die Verarbeitung ihrer personenbezogenen Daten durch diese Studie gegen gesetzliche
+                Datenschutzvorschriften verstößt.
+            </p>
+            <h3>
+                Einwilligung betroffener Personen zur Veröffentlichung personenbezogener Daten und zu deren Übermittlung
+                an Forschungspartner
+            </h3>
+            <p>
+                In dieser Studie werden verschiedene personenbezogene Informationen erhoben. Die Daten werden
+                ausschließlich durch das DFKI und Forschungspartner im Rahmen wissenschaftlicher Forschungsprojekte
+                verarbeitet. Alle weiteren personenbezogenen Daten werden nur anonymisiert gespeichert und im Rahmen
+                einer wissenschaftlichen Arbeit veröffentlicht.
+            </p>
+            <h3>
+                Einwilligung zur Veröffentlichung und Übermittlung
+            </h3>
+            <p>
+                Ich, bestätige, dass ich die „Information betroffener Personen zur Verarbeitung personenbezogener Daten“
+                erhalten habe.
+            </p>
+            <p>
+                Ich willige hiermit ein, dass das DFKI Daten aus wissenschaftlichen Experimenten im Zusammenhang mit
+                dieser Studie für die Darstellung von Forschungsergebnissen im Bereich des Affective Computing verwendet
+                werden.
+            </p>
+            <p>
+                Mir ist bekannt, dass ich das Recht habe, meine Einwilligung jederzeit zu widerrufen. Durch den Widerruf
+                der Einwilligung wird die Rechtmäßigkeit der aufgrund der Einwilligung bis zum Widerruf erfolgten
+                Verarbeitung nicht berührt. Ein Widerruf kann per Email an jan.dickmann@web.de geschickt werden.
+            </p>
+        </div>
+    </div>
+</body>
+
+</html>

slaeforms/templates/dqinfos.html

@@ -0,0 +1,65 @@
+<div style="margin: auto; max-width: 80%;">
+    <p>Demographic Question Info:</p>
+    <ol start="1">
+        <li>Wie alt sind sie?</li>
+        <li>Wie ist ihr Geschlecht?
+        <ol>
+            <li>Männlich</li>
+            <li>Weiblich</li>
+            <li>Divers</li>
+            <li>Keine Angabe</li>
+        </ol></li>
+        <li>Was ist ihr höchster Bildungsabschluss?
+            <ol>
+              <li>Keiner</li>
+              <li>Hauptschule</li>
+              <li>Realschule</li>
+              <li>Ausbildung</li>
+              <li>Abitur</li>
+              <li>Fachhochschulreife</li>
+              <li>Bachelor</li>
+              <li>Master</li>
+              <li>Diplom</li>
+              <li>Magister</li>
+              <li>Promotion</li>
+            </ol>
+          </li>
+          <li>Wie ist ihr Hörstatus?
+            <ol>
+              <li>Gehörlos</li>
+              <li>Schwerhörig</li>
+              <li>Gehörlos mit Cochlea-Implantat</li>
+              <li>Hörend</li>
+            </ol>
+          </li>
+          <li>In welchem Alter wurden sie gehörlos/schwerhörig? ("0" für ab Geburt, "-1" falls sie hörend sind)</li>
+          <li>Seit welchem Alter lernen sie Gebärdensprache?</li>
+          <li>Sind ihre Eltern Gehörlos?
+            <ol>
+              <li>Ein Elternteil</li>
+              <li>Beide</li>
+              <li>Nein</li>
+            </ol>
+          </li>
+          <li>Welche Sprache(n) verwenden sie zuhause?
+            <ol>
+              <li>Deutsch</li>
+              <li>Gebärdensprache</li>
+              <li>Sonstige</li>
+            </ol>
+          </li>
+          <li>Welche Sprache(n) verwenden sie auf der Arbeit/in der Schule?
+            <ol>
+              <li>Deutsch</li>
+              <li>Gebärdensprache</li>
+              <li>Sonstige</li>
+            </ol>
+          </li>
+          <li>Haben sie schonmal Computeranimationen von Gebärdensprache gesehen? (Gebärdenavatare)
+            <ol>
+              <li>Ja</li>
+              <li>Nein</li>
+            </ol>
+          </li>
+    </ol>
+</div>

slaeforms/templates/endpage.html

@@ -1,5 +1,6 @@
 <!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')}}-->
@@ -9,13 +10,18 @@
 
 <body>
     <div class="container">
-    <h2>Danke für ihre Teilnahme!</h2>
+        <h2>Vielen Dank für Ihre Teilnahme!</h2>
 
-    <div class="textblock">
-    <p>
-        Falls sie noch Fragen oder Rückmeldungen haben, schreiben sie mir unter: jan.dickmann@web.de
-    </p>
+        <div class="textblock">
+            <p>
+                Wir würden uns freuen, wenn Sie die Studie mit anderen Gehörlosen oder Gebärdensprache sprechenden
+                Personen Teilen würden: <a href="https://slaeforms.leafbla.de/start">https://slaeforms.leafbla.de/start</a>  
+            </p>
+            <p>
+                Falls sie noch Fragen oder Anmerkungen haben, schreiben sie uns unter: jan.dickmann@web.de
+            </p>
+        </div>
     </div>
-</div>
 </body>
+
 </html>

slaeforms/templates/intropage.html

@@ -0,0 +1,44 @@
+<!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>
+
+        <video controls>
+            <source src="{{ url_for('static', filename='videos/GLEISvariations.mp4') }}" type="video/mp4">
+        </video>
+        <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ärungsvideo, 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ärdensprache" Button auf der rechten Seite des Bildschirms klicken, um das Video und den Erklärungstext 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>
+            </div>
+            <p style="font-size: 22px; text-align: center;">
+                Der Gebärdensprache Button.
+            </p>
+
+        </div>
+        <form class="dsgvoform" action="{{ url_for('sendpage') }}" method="post">
+            <div class="button-container">
+                <button id="submitbutton" type="submit">Starten</button>
+            </div>
+        </form>
+        <div class="spacer" aria-hidden="true" style="height:80px"></div>
+    </div>
+</body>
+
+</html>

slaeforms/templates/p1infos.html

@@ -0,0 +1,7 @@
+<div style="margin: auto; max-width: 80%; font-size: 20px;">
+    <p>Studie Teil 1:</p>
+    <p>Im Folgenden werden ihnen Videos gezeigt, die sie in den Kategorien „Natürlichkeit“, „Verständlichkeit“ und „grammatikalischer Korrektheit“ bewerten sollen.</p>
+    <p>Dafür können sie auf einer Skala mit 7 Punkten bewerten, wobei der Punkt ganz links für „sehr schlecht“, der Punkt in der Mitte für „neutral“, und der Punkt ganz rechts für „sehr schlecht“ steht.</p>
+    <p>Dann können sie weiteres Feedback als Text oder als Video geben. Das Video können sie direkt im Browser aufnehmen. Beachten sie, dass sie dazu eine Webcam benötigen und der Webseite erlauben müssen diese zu benutzen. Wenn sie auf den Kamera Knopf drücken, wird ihr Browser sie nach der Berechtigung fragen.</p>
+    <p>Genaue Informationen darüber wie wir die Videos verarbeiten finden sie in unserer <a target="_blank" href="{{ url_for('datenschutz') }}">Datenschutzerklärung</a>.</p>
+</div>

slaeforms/templates/p1intro.html

@@ -0,0 +1,33 @@
+<!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>
+
+        <video controls>
+            <source src="{{ url_for('static', filename='videos/GLEISvariations.mp4') }}" type="video/mp4">
+        </video>
+        <div class="spacer" aria-hidden="true" style="height:20px"></div>
+        <div class="textblock">
+
+            {% include "p1infos.html" %}
+
+        </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>
+
+</html>

slaeforms/templates/p2infos.html

@@ -0,0 +1,19 @@
+<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>Bitte verwenden Sie wieder die Punkteskala, um zu bewerten, welches der beiden Videos Sie besser finden.</p>
+    <ol start="1">
+        <li>Welche Formulierung war natürlicher?</li>
+        <li>Welche Formulierung haben Sie besser verstanden?</li>
+        <li>Welche Formulierung war korrekter?</li>
+        <li>Welche Formulierung hat Ihnen besser gefallen?</li>
+    </ol>
+    <p>Die Antwortmöglichkeiten sind jedesmal:</p>
+    <ol start="1">
+        <li>Links</li>
+        <li>eher Links</li>
+        <li>Beide gleich</li>
+        <li>eher Rechts</li>
+        <li>Rechts</li>
+    </ol>
+</div>

slaeforms/templates/p2intro.html

@@ -0,0 +1,33 @@
+<!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>
+
+        <video controls>
+            <source src="{{ url_for('static', filename='videos/GLEISvariations.mp4') }}" type="video/mp4">
+        </video>
+        <div class="spacer" aria-hidden="true" style="height:20px"></div>
+        <div class="textblock">
+
+            {% include "p2infos.html" %}
+
+        </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>
+
+</html>

slaeforms/templates/p3infos.html

@@ -0,0 +1,19 @@
+<div style="margin: auto; max-width: 80%; font-size: 20px;">
+    <p>Studie Teil 3:</p>
+    <p>Im Folgenden sehen Sie ein Video, in dem der Avatar drei Mal „Gleis“ gebärdet, jedes Mal in eine etwas andere Richtung. So soll der Avatar in Zukunft die Position und Richtung des Gleises relativ zum Avatar und Zuschauer zum Ausdruck bringen.</p>
+    <p>Beantworten Sie dazu bitte die folgenden Fragen, indem Sie die Aussage auf einer Skala mit fünf Punkten, von „Trifft überhaupt nicht zu“, zu „Trifft vollkommen zu“ bewerten.</p>
+    <ol start="1">
+        <li>Man kann gut erkennen, in welche Richtung das Gleis zeigt.</li>
+        <li>Die Gebärde ist schwer zu erkennen</li>
+        <li>Das Anpassen der Richtung und der Position der Gebärde kann dabei helfen, besser zu verstehen, wo das Gleis liegt.</li>
+        <li>Ich finde diesen Ansatz nicht gut.</li>
+    </ol>
+    <p>Die Antwortmöglichkeiten sind jedesmal:</p>
+    <ol start="1">
+        <li>Links</li>
+        <li>eher Links</li>
+        <li>Beide gleich</li>
+        <li>eher Rechts</li>
+        <li>Rechts</li>
+    </ol>
+</div>

slaeforms/templates/p3intro.html

@@ -0,0 +1,33 @@
+<!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>
+
+        <video controls>
+            <source src="{{ url_for('static', filename='videos/GLEISvariations.mp4') }}" type="video/mp4">
+        </video>
+        <div class="spacer" aria-hidden="true" style="height:20px"></div>
+        <div class="textblock">
+
+            {% include "p3infos.html" %}
+
+        </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>
+
+</html>

slaeforms/templates/standard_template.html

@@ -13,6 +13,12 @@
         allowfullscreen></iframe>
 </div>
 
+{% elif (embed == "no") %}
+
+<video controls>
+    <source src="{{ url_for('static', filename='videos/' + video_url) }}" type="video/mp4">
+</video>
+
 {% else %}
 {{code}}
 {% endif %}
@@ -36,7 +42,7 @@
         </div>
     </div>
 
-    
+
 
     <div class="dv_half">
         <div class="iframe-container">
@@ -47,7 +53,24 @@
     </div>
 
 </div>
-
+{% elif (embed == "no") %}
+<div class="double_video_container">
+    <div class="dv_half">
+        <div class="iframe-container">
+            <video controls>
+                <source src="{{ url_for('static', filename='videos/' + video_url1) }}" type="video/mp4">
+            </video>
+        </div>
+    </div>
+    <div class="dv_half">
+        <div class="iframe-container">
+            <video controls>
+                <source src="{{ url_for('static', filename='videos/' + video_url2) }}" type="video/mp4">
+            </video>
+        </div>
+    </div>
+</div>
+<div class="spacer" aria-hidden="true" style="height:30px"></div>
 {% else %}
 {{code}}
 {% endif %}
@@ -73,7 +96,7 @@ step={{question["step"]}}
 
 {% macro input(name, value='', type='text', size=20) -%}
 <input type="{{ type }}" name="{{ name }}" value="{{
-        value|e }}" size="{{ size }}">
+        value|e }}" size="{{ size }}" class="inputs">
 {%- endmacro %}
 
 <head>
@@ -96,20 +119,23 @@ step={{question["step"]}}
         {% if (infovideo) %}
         <dialog>
 
-            <button class="dialogBtn" autofocus><img class="infoButtonIcon" id="buttonClose" src="{{ url_for('static', filename='icons/x-icon.png')}}"
-                alt="Delete Icon"></button>
-            <div class="iframe-container">
-                <iframe class="center" src="{{ infovideo['videourl'] }}" title="YouTube video player" frameborder="0"
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                    allowfullscreen></iframe>
-            </div>
+            <button class="dialogBtn" autofocus><img class="infoButtonIcon" id="buttonClose"
+                    src="{{ url_for('static', filename='icons/x-icon.png')}}" alt="Delete Icon"></button>
+            <video controls>
+                <source src="{{ url_for('static', filename=infovideo['videourl']) }}" type="video/mp4">
+            </video>
             <div class="dialogTextContainer">
-            <p>{{ infovideo["infotext"] }}</p>
+                {% if ("infotext" in infovideo) %}
+                <p>{{ infovideo["infotext"] }}</p>
+                {% endif %}
+                {% if ("htmlblock" in infovideo) %}
+                {% include infovideo["htmlblock"] %}
+                {% endif %}
             </div>
-            </dialog>
-        <button class="dialogBtn"><img class="infoButtonIcon" id="buttonInfoIcon" src="{{ url_for('static', filename='icons/info-icon.png')}}"
-                alt="Info Icon"></button>
-                <script src="{{ url_for('static', filename='infoDialogScript.js')}}"></script>
+        </dialog>
+        <button class="dialogBtn"><img class="infoButtonIcon" id="buttonInfoIcon"
+                src="{{ url_for('static', filename='icons/sl-icon.png')}}" alt="Info Icon"></button>
+        <script src="{{ url_for('static', filename='infoDialogScript.js')}}"></script>
         {% endif %}
 
 
@@ -124,15 +150,27 @@ step={{question["step"]}}
         {% endif %}
 
         <form class="formlayout" id="question_form" action="{{ url_for('sendpage') }}" method="post">
-            
+
             {% for question in questions %}
-            {% if (questions[question]["type"] == "likert") %}
-            <div class="likercontainer">
+            {% if (questions[question]["type"] == "textblock") %}
+
+            <div class="spacer" aria-hidden="true" style="height:30px"></div>
+
+            <div class="questioncontainer">
+            <h3 style="margin: auto;">{{ questions[question]['text']}}</h3>
+            </div>
+            <div class="spacer" aria-hidden="true" style="height:60px"></div>
+
+
+            {% elif (questions[question]["type"] == "likert") %}
+            <div class="likertcontainer">
+                <div class="questioncontainer">
                 <h3>{{ questions[question]['text']}}</h3>
+                </div>
                 <div class="likert" style="--likert-rows: {{ questions[question]['points']|length() }}">
                     {% for point in questions[question]["points"] %}
                     <label>
-                        <input name="{{ questions[question]['name']}}" type="radio"
+                        <input class="inputs" name="{{ questions[question]['name']}}" type="radio"
                             id="{{ questions[question]['name'] }}"
                             value="{{ questions[question]['points'][point]['value'] }}"
                             {{required(questions[question])}} /><span>{{ questions[question]['points'][point]['text']
@@ -141,44 +179,73 @@ step={{question["step"]}}
                     {% endfor %}
                 </div>
             </div>
+            <div class="spacer" aria-hidden="true" style="height:60px"></div>
+
+            {% elif (questions[question]["type"] == "likert-basic") %}
+
+            <div class="questioncontainer">
+            <h3>{{ questions[question]['text']}}</h3>
+            </div>
+
+            <div class="normal-likert-container">
+                {% for point in questions[question]["points"] %}
+                <label class="likertlabel">
+                    <input class="likertinput" name="{{ questions[question]['name']}}" type="radio"
+                        id="{{ questions[question]['name'] }}"
+                        value="{{ questions[question]['points'][point]['value'] }}"
+                        {{required(questions[question])}} /><span>{{ questions[question]['points'][point]['text']
+                        }}
+                    </span>
+                </label>
+                {% endfor %}
+            </div>
+            <div class="spacer" aria-hidden="true" style="height:60px"></div>
+
             {% elif (questions[question]["type"] == "textinput") %}
             <div class="textarea-container">
                 <label class="textarea-label">
                     {{ questions[question]['text']}}
-                    <textarea id="{{ questions[question]['name'] }}" name="{{ questions[question]['name'] }}" rows="6"
-                        cols="60" maxlength="{{ questions[question]['size'] }}"
-                        {{required(questions[question])}}></textarea>
+                    <textarea class="inputs" id="{{ questions[question]['name'] }}"
+                        name="{{ questions[question]['name'] }}" rows="6" cols="60"
+                        maxlength="{{ questions[question]['size'] }}" {{required(questions[question])}}></textarea>
                 </label>
             </div>
+            <div class="spacer" aria-hidden="true" style="height:30px"></div>
 
             {% elif (questions[question]["type"] == "dateinput") %}
             <div class="compressWidth">
                 <label>
-                    {{ questions[question]['text']}}<input type="date" name="{{ questions[question]['name']}}"
-                        id="{{ questions[question]['name'] }}" {{required(questions[question])}}>
-                </label>
-            </div>
-            {% elif (questions[question]["type"] == "numberinput") %}
-            <div class="compressWidth">
-                <label>
-                    {{ questions[question]['text']}}<input type="number" name="{{ questions[question]['name']}}"
-                        id="{{ questions[question]['name'] }}" {{inputconfig(questions[question])}}
+                    {{ questions[question]['text']}}<input class="inputs" type="date"
+                        name="{{ questions[question]['name']}}" id="{{ questions[question]['name'] }}"
                         {{required(questions[question])}}>
                 </label>
             </div>
+            <div class="spacer" aria-hidden="true" style="height:30px"></div>
+
+            {% elif (questions[question]["type"] == "numberinput") %}
+            <div class="compressWidth">
+                <label>
+                    {{ questions[question]['text']}}<input class="inputs" type="number"
+                        name="{{ questions[question]['name']}}" id="{{ questions[question]['name'] }}"
+                        {{inputconfig(questions[question])}} {{required(questions[question])}}>
+                </label>
+            </div>
+            <div class="spacer" aria-hidden="true" style="height:30px"></div>
 
             {% elif (questions[question]["type"] == "emailinput") %}
             <div class="compressWidth">
                 <label>
-                    {{ questions[question]['text']}}<input type="email" name="{{ questions[question]['name']}}"
-                        id="{{ questions[question]['name'] }}" {{required(questions[question])}}>
+                    {{ questions[question]['text']}}<input class="inputs" type="email"
+                        name="{{ questions[question]['name']}}" id="{{ questions[question]['name'] }}"
+                        {{required(questions[question])}}>
                 </label>
             </div>
+            <div class="spacer" aria-hidden="true" style="height:30px"></div>
 
             {% elif (questions[question]["type"] == "dropdowninput") %}
             <div class="compressWidth">
                 <label>
-                    {{ questions[question]['text']}}<select name="{{ questions[question]['name']}}"
+                    {{ questions[question]['text']}}<select class="inputs" name="{{ questions[question]['name']}}"
                         {{required(questions[question])}}>
                         <option value="" disabled selected>{{ questions[question]['defaulttext']}}</option>
                         {% for point in questions[question]["points"] %}
@@ -191,10 +258,27 @@ step={{question["step"]}}
                     </select>
                 </label>
             </div>
+            <div class="spacer" aria-hidden="true" style="height:30px"></div>
+
+            {% elif (questions[question]["type"] == "multiplechoice") %}
+            <div class="compressWidth">
+                <label>
+                    {{ questions[question]['text']}}
+
+                    {% for point in questions[question]["points"] %}
+                    <label for="{{ point }}">
+                        <input type="checkbox" id="{{ point }}" name="{{ questions[question]['name'] }}"
+                            value="{{ questions[question]['points'][point]['value'] }}">
+                        {{ questions[question]['points'][point]['text']}}</label>
+
+                    {% endfor %}
+                </label>
+            </div>
+            <div class="spacer" aria-hidden="true" style="height:30px"></div>
 
             {% elif (questions[question]["type"] == "videoinput") %}
             <div class="spacer" aria-hidden="true" style="height:30px"></div>
-            <h3>{{ questions[question]['text']}}</h3>
+            <h3 style="text-align: center;">{{ questions[question]['text']}}</h3>
 
             <div class="centertext">
                 <button type="button" class="videocontrols" id="buttonCamera" onclick="cameraButton()">
@@ -230,11 +314,14 @@ step={{question["step"]}}
             <p>Error: Block {{config["question 1"]["blocks"][block]["type"]}} could not be loaded!</p>
             {% endif %}
             {% endfor %}
+            <div class="spacer" aria-hidden="true" style="height:30px"></div>
             <div class="button-container">
-                <input id="submitbutton" type="submit" value="submit" />
-                <!-- TODO maybe I want to use this instead: <button id="submitbutton" type="submit">Submit</button> -->
+
+                <button id="submitbutton" type="submit">Weiter</button>
+                <!-- TODO maybe I want to use this instead: <button id="submitbutton" type="submit">Submit</button> /// <input class="inputs" id="submitbutton" type="submit" value="submit" />-->
             </div>
         </form>
+        <div class="spacer" aria-hidden="true" style="height:80px"></div>
     </div>
 </body>
 

slaeforms/templates/startpage.html

@@ -4,20 +4,77 @@
 <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>Hello! Thank you for participating in our study!</h2>
-    <form action="{{ url_for('startpage') }}" method="post">
-    <label for="terms-and-conditions">
-        <input class="inline" id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the +terms and conditions</a>
-    </label>
-        
-        <p><input id="submitbutton" type = "submit" value = "submit" /></p>
-    </form>
-</div>
+    <div class="container" style="height: 100vh;">
+        <h2>SLAEFORMS Gebärdensprachavatar Studie</h2>
+
+        <div class="textblock">
+            <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, also animierte 3D-Avatare, die
+                Gebärdensprache sprechen sollen.
+
+            </p>
+            <p>
+                Bitte beachten Sie, dass diese Avatare noch in einer frühen Entwicklungsphase und noch nicht für den
+                Gebrauch in der echten Welt 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.
+            </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.
+            </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>
+                Für jeden Teil der Studie gibt es ein Erklärvideo, 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>
+                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
+                beantragen: jan.dickmann@web.de
+            </p>
+            <p>
+                Ich, bestätige, dass ich die „Information betroffener Personen zur Verarbeitung personenbezogener Daten“
+                erhalten habe.
+                Ich willige hiermit ein, dass das DFKI Daten aus wissenschaftlichen Experimenten im Zusammenhang mit
+                dieser Studie für die Darstellung von Forschungsergebnissen im Bereich des Affective Computing verwendet
+                werden.
+            </p>
+            <p>
+                Mir ist bekannt, dass ich das Recht habe, meine Einwilligung jederzeit zu widerrufen. Durch den Widerruf
+                der Einwilligung wird die Rechtmäßigkeit der aufgrund der Einwilligung bis zum Widerruf erfolgten
+                Verarbeitung nicht berührt. Ein Widerruf kann per Email an jan.dickmann@web.de geschickt werden.
+            </p>
+        </div>
+        <form class="dsgvoform" action="{{ url_for('startpage') }}" method="post">
+            <label for="terms-and-conditions">
+                <input class="inline" id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" />
+                Ich akezeptiere die <a href="{{ url_for('datenschutz') }}">Datenschutzbestimmungen</a>
+            </label>
+            <div class="button-container">
+                <button id="submitbutton" type="submit">Weiter</button>
+            </div>
+        </form>
+    </div>
 </body>
 
 </html>

slaeforms/templates/studytest.html

@@ -0,0 +1,160 @@
+<!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>Testform</title>
+    <link rel=" shortcut icon" href="{{ url_for('static', filename='icons/favicon.ico') }}">
+    <script>const ICON_PATHS = {
+            cameraofficon: "{{ url_for('static', filename='icons/camera-off-icon.png') }}",
+            cameraicon: "{{ url_for('static', filename='icons/camera-icon.png') }}",
+            stopicon: "{{ url_for('static', filename='icons/stop-icon.png') }}",
+            recordicon: "{{ url_for('static', filename='icons/record-icon.png') }}"
+        };</script>
+</head>
+
+<body>
+
+
+
+    <div class="container">
+
+        <video controls>
+            <source src="{{ url_for('static', filename='videos/GLEISvariations.mp4') }}" type="video/mp4">
+        </video>
+
+
+        <form class="formlayout" id="question_form" action="{{ url_for('sendpage') }}" method="post">
+
+
+            <div class="likertcontainer">
+                <div class="likert" style="--likert-rows: 7">
+
+                    <label>
+                        <input class="inputs" name="test1" type="radio" id="test1" value="1" required /><span> Option 1
+                        </span>
+                    </label>
+                    <label>
+                        <input class="inputs" name="test1" type="radio" id="test1" value="1" required /><span> Option 2
+                        </span>
+                    </label>
+                    <label>
+                        <input class="inputs" name="test1" type="radio" id="test1" value="1" required /><span> Option 3
+                        </span>
+                    </label>
+                    <label>
+                        <input class="inputs" name="test1" type="radio" id="test1" value="1" required /><span> Option 4
+                        </span>
+                    </label>
+                    <label>
+                        <input class="inputs" name="test1" type="radio" id="test1" value="1" required /><span> Option 5
+                        </span>
+                    </label>
+                    <label>
+                        <input class="inputs" name="test1" type="radio" id="test1" value="1" required /><span> Option 6
+                        </span>
+                    </label>
+                    <label>
+                        <input class="inputs" name="test1" type="radio" id="test1" value="1" required /><span> Option 7
+                        </span>
+                    </label>
+                </div>
+            </div>
+
+
+
+            <div class="normal-likert-container" style="--likert-rows: 7">
+
+                <label class="likertlabel">
+                    <input class="likertinput" name="test1" type="radio" id="test1" value="1" required /><span> Option 1
+                    </span>
+                </label>
+                <label class="likertlabel">
+                    <input class="likertinput" name="test1" type="radio" id="test1" value="1" required /><span> Option 2
+                    </span>
+                </label>
+                <label class="likertlabel">
+                    <input class="likertinput" name="test1" type="radio" id="test1" value="1" required /><span> Option 3
+                    </span>
+                </label>
+                <label class="likertlabel">
+                    <input class="likertinput" name="test1" type="radio" id="test1" value="1" required /><span> Option 4
+                    </span>
+                </label>
+                <label class="likertlabel">
+                    <input class="likertinput" name="test1" type="radio" id="test1" value="1" required /><span> Option 5
+                    </span>
+                </label>
+                <label class="likertlabel">
+                    <input class="likertinput" name="test1" type="radio" id="test1" value="1" required /><span> Option 6
+                    </span>
+                </label>
+                <label class="likertlabel">
+                    <input class="likertinput" name="test1" type="radio" id="test1" value="1" required /><span> Option 7
+                    </span>
+                </label>
+            </div>
+
+
+
+
+
+
+
+            <div class="textarea-container">
+                <label class="textarea-label">
+                    <textarea class="inputs" id="text" name="text" rows="6" cols="60" maxlength="200"></textarea>
+                </label>
+            </div>
+
+
+
+
+            <div class="spacer" aria-hidden="true" style="height:30px"></div>
+
+
+            <div class="centertext">
+                <button type="button" class="videocontrols" id="buttonCamera" onclick="cameraButton()">
+                    <img id="buttonCameraIcon" src="{{ url_for('static', filename='icons/camera-icon.png')}}"
+                        alt="Camera Icon">
+                </button>
+
+
+                <div class="spacer" aria-hidden="true" style="height:30px"></div>
+
+
+                <button type="button" class="videocontrols" id="buttonRecord" style="display:none"
+                    onclick="recordButton()">
+                    <img id="buttonRecordIcon" src="{{ url_for('static', filename='icons/record-icon.png')}}"
+                        alt="Camera Icon">
+                </button>
+
+                <button type="button" class="videocontrols" id="buttonDelete" style="display:none" disabled
+                    onclick="deleteButton()">
+                    <img id="buttonDeleteIcon" src="{{ url_for('static', filename='icons/trash-icon.png')}}"
+                        alt="Delete Icon" class="buttondisable">
+                </button>
+            </div>
+
+            <div class="spacer" aria-hidden="true" style="height:15px"></div>
+            <div id="videoContainer" style="display:none" class="video-container">
+                <video autoplay muted playsinline id="videoDisplay"></video>
+            </div>
+
+            <script src="{{ url_for('static', filename='videoscript.js')}}">
+            </script>
+
+
+
+
+            <div class="button-container">
+                <input class="inputs" id="submitbutton" type="submit" value="submit" />
+                <!-- TODO maybe I want to use this instead: <button id="submitbutton" type="submit">Submit</button> -->
+            </div>
+        </form>
+    </div>
+</body>
+
+</html>

slaeforms/templates/teststartpage.html

@@ -1,5 +1,6 @@
 <!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')}}-->
@@ -9,37 +10,65 @@
 
 <body>
     <div class="container">
-    <h2>Hallo! Danke, dass sie bei dieser Studie teilnehmen!</h2>
+        <h2>SLAEFORMS Gebärdensprachavatar Studie</h2>
 
-    <div class="textblock">
-        <p>
-            Wilkommen bei dieser Prototyp Seite für eine Gebärdensprach-Avatar Studie.
-        </p>
-        <p>
-            Dieses Projekt ist noch in Arbeit und nicht fertiggestellt. Es soll die bisher implementierten Funktionen zeigen und wurde nur zu Präsentationszwecken und um Feedback zu sammeln online gestellt. 
-        </p>
-        <p>
-            Das Ziel dieses Projekt ist, es Wissenschaftlern (und anderen) zu ermöglichen relativ einfach online Studien zu erstellen, die auf die besonderen Anforderungen von Gehörlosen Studienteilnehmern abgestimmt sind.
-            Dazu zählt insbesondere die Möglichkeit Videos aufnehmen zu können um Feedback zu geben, und das Einbinden von Videos die Fragen und Aufgabenstellungen in Gebärdensprache erklären sollen.
-            In diesem Prototyp finden sich aktuell aber nur Platzhaltervideos. Keine der Inhalte sind bereits Teil einer echten Studie.
-        </p>
-        <p>
-            Wenn sie den Prototyp verwenden und dabei Eingaben machen oder Videos hochladen, sind diese auf dem Server gespeichert. Die Daten werden nach der Testphase gelöscht und können bis dahin nur von dem Admin eingesehen werden.
-            Wenn sie eingegebene oder hochgeladene Daten löschen wollen, wenden sie sich bitte an den Admin unter: jan.dickmann@web.de
-        </p>
-        <p>
-            Auch bei sonstigen Fragen, wenden sie sich bitte an: jan.dickmann@web.de
-        </p>
+        <div class="textblock">
+            
+            <p>
+                In dieser Studie geht es um die Entwicklung von Gebärdensprachavataren, also animierte 3D-Avatare, die
+                Gebärdensprache sprechen sollen.
 
+            </p>
+            <p>
+                Bitte beachten Sie, dass diese Avatare noch in einer frühen Entwicklungsphase und noch nicht für den
+                Gebrauch in der echten Welt 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.
+            </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.
+            </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>
+                Für jeden Teil der Studie gibt es ein Erklärvideo, 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>
+                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
+                beantragen: jan.dickmann@web.de
+            </p>
+            <p>
+                Ich, bestätige, dass ich die „Information betroffener Personen zur Verarbeitung personenbezogener Daten“
+                erhalten habe.
+                Ich willige hiermit ein, dass das DFKI Daten aus wissenschaftlichen Experimenten im Zusammenhang mit
+                dieser Studie für die Darstellung von Forschungsergebnissen im Bereich des Affective Computing verwendet
+                werden.
+            </p>
+            <p>
+                Mir ist bekannt, dass ich das Recht habe, meine Einwilligung jederzeit zu widerrufen. Durch den Widerruf
+                der Einwilligung wird die Rechtmäßigkeit der aufgrund der Einwilligung bis zum Widerruf erfolgten
+                Verarbeitung nicht berührt. Ein Widerruf kann per Email an jan.dickmann@web.de geschickt werden.
+            </p>
+        </div>
+        <form class="dsgvoform" action="{{ url_for('startpage') }}" method="post">
+            <div class="button-container">
+                <input id="submitbutton" type="submit" value="submit" />
+            </div>
+        </form>
     </div>
-    <form class="dsgvoform" action="{{ url_for('startpage') }}" method="post">
-    <label for="terms-and-conditions">
-        <input class="inline" id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the +terms and conditions
-    </label>
-    <div class="button-container">
-        <input id="submitbutton" type = "submit" value = "submit" />
-    </div>    
-    </form>
-</div>
 </body>
+
 </html>

slaeforms/userstudy1.json

@@ -1,7 +1,11 @@
 {
+    "Block 0":{
+        "type": "SinglePage",
+        "template": "intropage.html"
+    },
     "Block 1": {
         "type": "TaskTemplate",
-        "tempalte": "standard_template.html",
+        "template": "standard_template.html",
         "stimuli": {
             "type": "empty",
             "list": {
@@ -12,7 +16,7 @@
             "question1_alter": {
                 "type": "numberinput",
                 "name": "alter",
-                "text": "Alter:",
+                "text": "1. Wie alt sind sie?",
                 "required": "true",
                 "min": "1",
                 "max": "120"
@@ -20,7 +24,7 @@
             "question2_geschlecht": {
                 "type": "dropdowninput",
                 "name": "geschlecht",
-                "text": "Geschlecht:",
+                "text": "2. Wie ist ihr Geschlecht?",
                 "required": "true",
                 "defaulttext": "",
                 "points": {
@@ -42,71 +46,186 @@
                     }
                 }
             },
-            "question3_hoerstatus": {
+            "question3_bildung": {
                 "type": "dropdowninput",
-                "name": "hoerstatus",
-                "text": "Hörstatus:",
+                "name": "bildung",
+                "text": "Was ist ihr höchster Bildungsabschluss?",
                 "required": "true",
                 "defaulttext": "",
                 "points": {
-                    "hörend": {
-                        "value": "Hörend",
-                        "text": "Hörend"
+                    "keiner": {
+                        "value": "Keiner",
+                        "text": "Keiner"
+                    },
+                    "hauptschule": {
+                        "value": "Hauptschule",
+                        "text": "Hauptschule"
+                    },
+                    "realschule": {
+                        "value": "Realschule",
+                        "text": "Realschule"
+                    },
+                    "ausbildung": {
+                        "value": "Ausbildung",
+                        "text": "Abgeschlossene Ausbildung"
+                    },
+                    "abitur": {
+                        "value": "Abitur",
+                        "text": "Abitur "
+                    },
+                    "fachhochschulreife": {
+                        "value": "Fachhochschulreife",
+                        "text": "Fachhochschulreife"
+                    },
+                    "bachelor": {
+                        "value": "Bachelor",
+                        "text": "Bachelor"
+                    },
+                    "master": {
+                        "value": "Master",
+                        "text": "Master"
+                    },
+                    "diplom": {
+                        "value": "Diplom",
+                        "text": "Diplom"
+                    },
+                    "magister": {
+                        "value": "Magister",
+                        "text": "Magister"
+                    },
+                    "promotion": {
+                        "value": "Promotion",
+                        "text": "Promotion"
+                    }
+                }
+            },
+            "question4_hoerstatus": {
+                "type": "dropdowninput",
+                "name": "hoerstatus",
+                "text": "Wie ist ihr Hörstatus?",
+                "required": "true",
+                "defaulttext": "",
+                "points": {
+                    "gehörlos": {
+                        "value": "Gehörlos",
+                        "text": "Gehörlos/Taub"
                     },
                     "schwerhörig": {
                         "value": "Schwerhörig",
                         "text": "Schwerhörig"
                     },
-                    "gehörlos": {
-                        "value": "Gehörlos",
-                        "text": "Gehörlos"
+                    "gehörlosCI": {
+                        "value": "GehörlosCI",
+                        "text": "Gehörlos mit Cochlea-Implantat"
+                    },
+                    "hörend": {
+                        "value": "Hörend",
+                        "text": "Hörend"
                     }
                 }
             },
-            "question4_bevorzugte_kommunikation": {
+            "question5_wann_gehörlos": {
+                "type": "numberinput",
+                "name": "wann_gehörlos",
+                "text": "In welchem Alter wurden sie gehörlos/schwerhörig? (\"0\" für ab Geburt, \"-1\" falls sie hörend sind)",
+                "required": "true",
+                "min": "-1",
+                "max": "120"
+            },
+            "question6_wann_gebärdensprache": {
+                "type": "numberinput",
+                "name": "wann_gebärdensprache",
+                "text": "Seit welchem Alter lernen sie Gebärdensprache?",
+                "required": "true",
+                "min": "0",
+                "max": "120"
+            },
+            "question7_eltern_gehörlos": {
                 "type": "dropdowninput",
-                "name": "bevorzugte_kommunikation",
-                "text": "Bevorzugte Kommunikationsform:",
+                "name": "eltern_gehörlos",
+                "text": "Sind ihre Eltern Gehörlos?",
                 "required": "true",
                 "defaulttext": "",
                 "points": {
-                    "gesprochen": {
-                        "value": "Gesprochene Sprache",
-                        "text": "Gesprochene Sprache"
+                    "einer": {
+                        "value": "einer",
+                        "text": "Ein Elternteil"
                     },
-                    "text": {
-                        "value": "Text",
-                        "text": "Text"
+                    "beide": {
+                        "value": "beide",
+                        "text": "Beide"
                     },
-                    "gebärdensprache": {
-                        "value": "Gebärdensprache",
-                        "text": "Gebärdensprache"
+                    "keiner": {
+                        "value": "keiner",
+                        "text": "Nein"
                     }
                 }
             },
-            "question5_gebeardenzeitraum": {
-                "type": "numberinput",
-                "name": "gebärdenzeitraum",
-                "text": "Wie viele Jahre verwenden sie schon Gebärdensprache:",
+            "question8_zuhause_sl": {
+                "type": "multiplechoice",
+                "name": "zuhause_sl",
+                "text": "Welche Sprache(n) verwenden sie zuhause?",
                 "required": "true",
-                "min": "0",
-                "max": "100",
-                "step": "0.5"
+                "defaulttext": "",
+                "points": {
+                    "zuhause-deutsch": {
+                        "value": "zuhause-Deutsch",
+                        "text": "Deutsch"
+                    },
+                    "zuhause-gebärdensprache": {
+                        "value": "zuhause-Gebärdensprache",
+                        "text": "Gebärdensprache"
+                    },
+                    "zuhause-sonstige": {
+                        "value": "zuhause-Sonstige",
+                        "text": "Sonstige"
+                    }
+                }
             },
-            "question6_sprachkompetenz": {
-                "type": "numberinput",
-                "name": "gebärdensprachkompetenz",
-                "text": "Wie schätzen sie ihre Gebärdensprachkompetenz ein (1-10):",
+            "question9_arbeit_sl": {
+                "type": "multiplechoice",
+                "name": "arbeit_sl",
+                "text": "Welche Sprache(n) verwenden sie auf der Arbeit/in der Schule?",
                 "required": "true",
-                "min": "1",
-                "max": "10"
+                "defaulttext": "",
+                "points": {
+                    "arbeit-deutsch": {
+                        "value": "arbeit-Deutsch",
+                        "text": "Deutsch"
+                    },
+                    "arbeit-gebärdensprache": {
+                        "value": "arbeit-Gebärdensprache",
+                        "text": "Gebärdensprache"
+                    },
+                    "arbeit-sonstige": {
+                        "value": "arbeit-Sonstige",
+                        "text": "Sonstige"
+                    }
+                }
+            },
+            "question10_avatar_erfahrung": {
+                "type": "dropdowninput",
+                "name": "avatar_erfahrung",
+                "text": "Haben sie schonmal Computeranimationen von Gebärdensprache gesehen? (Gebärdenavatare)",
+                "required": "true",
+                "defaulttext": "",
+                "points": {
+                    "ja": {
+                        "value": "Ja",
+                        "text": "Ja"
+                    },
+                    "Nein": {
+                        "value": "Nein",
+                        "text": "Nein"
+                    }
+                }
             }
         },
         "infovideo": {
-            "videourl": "https://www.youtube-nocookie.com/embed/F_w50c5Us3Y?si=-H07MmQ4lYOC2Bwh",
-            "infotext": "Hier wird in Zukunft ein Erklärtext stehen, in dem die Fragestellungen erklärt werden. \n Dazu werden alle Fragen der Seite einzeln durchgegangen und einfach erklärt. Zum Beispiel wird hier erklärt, dass man um Feedback zu geben, ein Video aufnehmen kann. Dazu drückt man auf den Knopf mit dem Videokamera Symbol. Danach muss man oben links am Browser bestätigen, dass der Browser auf die Kamera zugreifen darf.",
+            "videourl": "videos/0009-inflected.mp4",
+            "htmlblock": "dqinfos.html",
             "configuration": {
-                "embed": "yt"
+                "embed": "no"
             }
         },
         "database_table": {
@@ -121,82 +240,200 @@
                     "size": "14",
                     "nullable": "false"
                 },
+                "bildung": {
+                    "type": "string",
+                    "size": "30",
+                    "nullable": "false"
+                },
                 "hoerstatus": {
                     "type": "string",
-                    "size": "14",
+                    "size": "35",
                     "nullable": "false"
                 },
-                "bevorzugte_kommunikation": {
+                "wann_gehörlos": {
+                    "type": "int",
+                    "nullable": "false"
+                },
+                "wann_gebärdensprache": {
+                    "type": "int",
+                    "nullable": "false"
+                },
+                "eltern_gehörlos": {
                     "type": "string",
-                    "size": "22",
+                    "size": "6",
                     "nullable": "false"
                 },
-                "gebärdenzeitraum": {
-                    "type": "float",
+                "zuhause_sl": {
+                    "type": "string",
+                    "size": "40",
                     "nullable": "false"
                 },
-                "gebärdensprachkompetenz": {
-                    "type": "integer",
+                "arbeit_sl": {
+                    "type": "string",
+                    "size": "40",
+                    "nullable": "false"
+                },
+                "avatar_erfahrung": {
+                    "type": "string",
+                    "size": "4",
                     "nullable": "false"
                 }
             }
         }
     },
+    "Block 2 Intro":{
+        "type": "SinglePage",
+        "template": "p1intro.html"
+    },
     "Block 2": {
         "type": "TaskTemplate",
-        "tempalte": "standard_template.html",
+        "template": "standard_template.html",
         "stimuli": {
             "type": "single_video",
             "order": "random",
             "list": {
-                "video_1": "https://www.youtube-nocookie.com/embed/iI2bjpgLgu0?si=pWWwitq8Tl9zAs04",
-                "video_2": "https://www.youtube-nocookie.com/embed/R_LNEJiShRM?si=vm5mj-xs04nfijkf",
-                "video_3": "https://www.youtube-nocookie.com/embed/DJnHVnT2YEk?si=e6qe7nrHaRYJ3NQe",
-                "video_4": "https://www.youtube-nocookie.com/embed/6BTZn7tqSzk?si=jQH8RHGMIP9ARsT5",
-                "video_5": "https://www.youtube-nocookie.com/embed/bCRqmhWjuCk?si=iM2dwOSTosLq08Pr",
-                "video_6": "https://www.youtube-nocookie.com/embed/hgE2k8y9-qc?si=kR2rshmVcb9P70r0"
+                "video_1": "0009-inflected.mp4",
+                "video_2": "0009-mocap.mp4",
+                "video_3": "0009-simple.mp4",
+                "video_4": "0018-inflected.mp4",
+                "video_5": "0018-mocap.mp4",
+                "video_6": "0018-simple.mp4",
+                "video_7": "0020-inflected.mp4",
+                "video_8": "0020-mocap.mp4",
+                "video_9": "0020-simple.mp4",
+                "video_10": "0021-inflected.mp4",
+                "video_11": "0021-mocap.mp4",
+                "video_12": "0021-simple.mp4",
+                "video_13": "0022-inflected.mp4",
+                "video_14": "0022-mocap.mp4",
+                "video_15": "0022-simple.mp4"
             },
             "configuration": {
-                "embed": "yt"
+                "embed": "no"
             }
         },
         "questions": {
+            "question0": {
+                "type": "textblock",
+                "name": "fragestellung",
+                "text": "Bitte bewerten Sie das Video bezüglich der Natürlichkeit, Verständlichkeit und grammatikalischen Korrektheit:"
+            },
             "question1": {
-                "type": "likert",
-                "name": "likertscale",
-                "text": "Wie würden sie dieses Video bewerten?",
+                "type": "likert-basic",
+                "name": "natürlichkeit",
+                "text": "Natürlichkeit",
                 "required": "true",
                 "points": {
-                    "p1": {
+                    "naturalness-p1": {
                         "value": "1",
-                        "text": "Ich finde es gar nicht gut 🙁👎"
+                        "text": "Gar nicht gut 👎"
                     },
-                    "p2": {
+                    "naturalness-p2": {
                         "value": "2",
-                        "text": "Ich finde es nicht gut 👎"
+                        "text": ""
                     },
-                    "p3": {
+                    "naturalness-p3": {
                         "value": "3",
-                        "text": "Ich finde es weder gut noch schlecht"
+                        "text": ""
                     },
-                    "p4": {
+                    "naturalness-p4": {
                         "value": "4",
-                        "text": "Ich finde es gut 👍"
+                        "text": "Weder gut noch schlecht"
                     },
-                    "p5": {
+                    "naturalness-p5": {
                         "value": "5",
-                        "text": "Ich finde es sehr gut 😊👍"
+                        "text": ""
+                    },
+                    "naturalness-p6": {
+                        "value": "6",
+                        "text": ""
+                    },
+                    "naturalness-p7": {
+                        "value": "7",
+                        "text": "Sehr gut 👍"
                     }
                 }
             },
             "question2": {
+                "type": "likert-basic",
+                "name": "verständlichkeit",
+                "text": "Verständlichkeit",
+                "required": "true",
+                "points": {
+                    "understandability-p1": {
+                        "value": "1",
+                        "text": "Gar nicht gut 👎"
+                    },
+                    "understandability--p2": {
+                        "value": "2",
+                        "text": ""
+                    },
+                    "understandability--p3": {
+                        "value": "3",
+                        "text": ""
+                    },
+                    "understandability--p4": {
+                        "value": "4",
+                        "text": "Weder gut noch schlecht"
+                    },
+                    "understandability--p5": {
+                        "value": "5",
+                        "text": ""
+                    },
+                    "understandability--p6": {
+                        "value": "6",
+                        "text": ""
+                    },
+                    "understandability--p7": {
+                        "value": "7",
+                        "text": "Sehr gut 👍"
+                    }
+                }
+            },
+            "question3": {
+                "type": "likert-basic",
+                "name": "gramKorrektheit",
+                "text": "Grammatikalische Korrektheit",
+                "required": "true",
+                "points": {
+                    "gramKorrektheit-p1": {
+                        "value": "1",
+                        "text": "Gar nicht gut 👎"
+                    },
+                    "gramKorrektheit-p2": {
+                        "value": "2",
+                        "text": ""
+                    },
+                    "gramKorrektheit-p3": {
+                        "value": "3",
+                        "text": ""
+                    },
+                    "gramKorrektheit-p4": {
+                        "value": "4",
+                        "text": "Weder gut noch schlecht"
+                    },
+                    "gramKorrektheit-p5": {
+                        "value": "5",
+                        "text": ""
+                    },
+                    "gramKorrektheit-p6": {
+                        "value": "6",
+                        "text": ""
+                    },
+                    "gramKorrektheit-p7": {
+                        "value": "7",
+                        "text": "Sehr gut 👍"
+                    }
+                }
+            },
+            "question4": {
                 "type": "textinput",
                 "name": "text_feedback",
-                "text": "Hier können sie uns Feedback geben",
+                "text": "Hier können sie Feedback zum Avatar geben",
                 "required": "false",
                 "size": "250"
             },
-            "question3": {
+            "question5": {
                 "type": "videoinput",
                 "text": "Hier können sie per Video Feedback geben",
                 "name": "video_feedback",
@@ -204,16 +441,24 @@
             }
         },
         "infovideo": {
-            "videourl": "https://www.youtube-nocookie.com/embed/F_w50c5Us3Y?si=-H07MmQ4lYOC2Bwh",
-            "infotext": "Hier wird in Zukunft ein Erklärtext stehen, in dem die Fragestellungen erklärt werden.\\n Dazu werden alle Fragen der Seite einzeln durchgegangen und einfach erklärt.\\n Zum Beispiel wird hier erklärt, dass man um Feedback zu geben, ein Video aufnehmen kann. Dazu drückt man auf den Knopf mit dem Videokamera Symbol. Danach muss man oben links am Browser bestätigen, dass der Browser auf die Kamera zugreifen darf.",
+            "videourl": "videos/0009-inflected.mp4",
+            "htmlblock": "p1infos.html",
             "configuration": {
-                "embed": "yt"
+                "embed": "no"
             }
         },
         "database_table": {
-            "table_name": "single_video_responses",
+            "table_name": "p1_video_ratings",
             "fields": {
-                "likertscale": {
+                "natürlichkeit": {
+                    "type": "integer",
+                    "nullable": "false"
+                },
+                "verständlichkeit": {
+                    "type": "integer",
+                    "nullable": "false"
+                },
+                "gramKorrektheit": {
                     "type": "integer",
                     "nullable": "false"
                 },
@@ -230,93 +475,378 @@
             }
         }
     },
+    "Block 3 Intro":{
+        "type": "SinglePage",
+        "template": "p2intro.html"
+    },
     "Block 3": {
         "type": "TaskTemplate",
-        "tempalte": "standard_template.html",
+        "template": "standard_template.html",
         "stimuli": {
             "type": "double_video",
             "list_1": {
-                "video_1": "https://www.youtube-nocookie.com/embed/IqGVT1q1PtM?si=kel7ZWEQl3h-h522",
-                "video_2": "https://www.youtube-nocookie.com/embed/g9KA72jN5SM?si=O7dfqTXdFCCAScJ-"
+                "video_1": "0009-inflected.mp4"
             },
             "list_2": {
-                "video_2": "https://www.youtube-nocookie.com/embed/g9KA72jN5SM?si=O7dfqTXdFCCAScJ-",
-                "video_1": "https://www.youtube-nocookie.com/embed/IqGVT1q1PtM?si=kel7ZWEQl3h-h522"
+                "video_1": "0009-variation-wide.mp4"
             },
             "configuration": {
-                "embed": "yt"
+                "embed": "no"
             }
         },
         "questions": {
             "question1": {
-                "type": "likert",
-                "name": "likertscale",
-                "text": "Welches Video gefällt ihnen besser?",
+                "type": "likert-basic",
+                "name": "natürlicher",
+                "text": "Welche Formulierung ist natürlicher?",
                 "required": "true",
                 "points": {
-                    "p1": {
-                        "value": "1",
-                        "text": "Ich finde das linke Video besser"
+                    "natürlicher-p1": {
+                        "value": "Links",
+                        "text": "Links"
                     },
-                    "p2": {
-                        "value": "2",
-                        "text": "Ich finde beide Videos gleich gut"
+                    "natürlicher-p2": {
+                        "value": "eherLinks",
+                        "text": "eher Links"
                     },
-                    "p3": {
-                        "value": "3",
-                        "text": "Ich finde das rechte Video besser"
+                    "natürlicher-p3": {
+                        "value": "Gleich",
+                        "text": "Beide gleich"
+                    },
+                    "natürlicher-p4": {
+                        "value": "eherRechts",
+                        "text": "eher Rechts"
+                    },
+                    "natürlicher-p5": {
+                        "value": "Rechts",
+                        "text": "Rechts"
                     }
                 }
+            },
+            "question2": {
+                "type": "likert-basic",
+                "name": "verständlicher",
+                "text": "Welche Formulierung verstehen sie besser?",
+                "required": "true",
+                "points": {
+                    "verständlicher-p1": {
+                        "value": "Links",
+                        "text": "Links"
+                    },
+                    "verständlicher-p2": {
+                        "value": "eherLinks",
+                        "text": "eher Links"
+                    },
+                    "verständlicher-p3": {
+                        "value": "Gleich",
+                        "text": "Beide gleich"
+                    },
+                    "verständlicher-p4": {
+                        "value": "eherRechts",
+                        "text": "eher Rechts"
+                    },
+                    "verständlicher-p5": {
+                        "value": "Rechts",
+                        "text": "Rechts"
+                    }
+                }
+            },
+            "question3": {
+                "type": "likert-basic",
+                "name": "korreter",
+                "text": "Welche Formulierung ist korreter?",
+                "required": "true",
+                "points": {
+                    "korreter-p1": {
+                        "value": "Links",
+                        "text": "Links"
+                    },
+                    "korreter-p2": {
+                        "value": "eherLinks",
+                        "text": "eher Links"
+                    },
+                    "korreter-p3": {
+                        "value": "Gleich",
+                        "text": "Beide gleich"
+                    },
+                    "korreter-p4": {
+                        "value": "eherRechts",
+                        "text": "eher Rechts"
+                    },
+                    "korreter-p5": {
+                        "value": "Rechts",
+                        "text": "Rechts"
+                    }
+                }
+            },
+            "question4": {
+                "type": "likert-basic",
+                "name": "besser",
+                "text": "Welche Formulierung gefällt ihnen besser?",
+                "required": "true",
+                "points": {
+                    "besser-p1": {
+                        "value": "Links",
+                        "text": "Links"
+                    },
+                    "besser-p2": {
+                        "value": "eherLinks",
+                        "text": "eher Links"
+                    },
+                    "besser-p3": {
+                        "value": "Gleich",
+                        "text": "Beide gleich"
+                    },
+                    "besser-p4": {
+                        "value": "eherRechts",
+                        "text": "eher Rechts"
+                    },
+                    "besser-p5": {
+                        "value": "Rechts",
+                        "text": "Rechts"
+                    }
+                }
+            },
+            "question5": {
+                "type": "textinput",
+                "name": "text_feedback",
+                "text": "Hier können sie Text Feedback geben",
+                "required": "false",
+                "size": "250"
+            },
+            "question6": {
+                "type": "videoinput",
+                "text": "Hier können sie per Video Feedback geben",
+                "name": "video_feedback",
+                "required": "false"
             }
         },
         "infovideo": {
-            "videourl": "https://www.youtube-nocookie.com/embed/F_w50c5Us3Y?si=-H07MmQ4lYOC2Bwh",
-            "infotext": "Hier wird in Zukunft ein Erklärtext stehen, in dem die Fragestellungen erklärt werden. Dazu werden alle Fragen der Seite einzeln durchgegangen und einfach erklärt. Zum Beispiel wird hier erklärt, dass man um Feedback zu geben, ein Video aufnehmen kann. Dazu drückt man auf den Knopf mit dem Videokamera Symbol. Danach muss man oben links am Browser bestätigen, dass der Browser auf die Kamera zugreifen darf.",
+            "videourl": "videos/0009-inflected.mp4",
+            "htmlblock": "p2infos.html",
             "configuration": {
-                "embed": "yt"
+                "embed": "no"
             }
         },
         "database_table": {
-            "table_name": "double_video_responses",
+            "table_name": "p2_video_comparisson",
             "fields": {
-                "likertscale": {
-                    "type": "integer",
+                "natürlicher": {
+                    "type": "string",
+                    "size": "15",
                     "nullable": "false"
+                },
+                "verständlicher": {
+                    "type": "string",
+                    "size": "15",
+                    "nullable": "false"
+                },
+                "korreter": {
+                    "type": "string",
+                    "size": "15",
+                    "nullable": "false"
+                },
+                "besser": {
+                    "type": "string",
+                    "size": "15",
+                    "nullable": "false"
+                },
+                "text_feedback": {
+                    "type": "string",
+                    "size": "250",
+                    "nullable": "true"
+                },
+                "video_upload": {
+                    "type": "string",
+                    "size": "100",
+                    "nullable": "true"
                 }
             }
         }
     },
+    "Block 4 Intro":{
+        "type": "SinglePage",
+        "template": "p3intro.html"
+    },
     "Block 4": {
         "type": "TaskTemplate",
-        "tempalte": "standard_template.html",
+        "template": "standard_template.html",
         "stimuli": {
-            "type": "empty",
+            "type": "single_video",
+            "order": "random",
             "list": {
-                "empty_stimulus": ""
+                "video_1": "GLEISvariations.mp4"
+            },
+            "configuration": {
+                "embed": "no"
             }
         },
         "questions": {
+            "question0": {
+                "type": "textblock",
+                "name": "fragestellung",
+                "text": "Im Video gebärdet der Avatar drei Mal „Gleis“, jedes Mal in eine etwas andere Richtung. Bitte beantworten sie dazu die folgenden Fragen:"
+            },
             "question1": {
+                "type": "likert-basic",
+                "name": "richtung_erkennen",
+                "text": "Man kann gut erkennen, in welche Richtung das Gleis zeigt.",
+                "required": "true",
+                "points": {
+                    "richtung_erkennen-p1": {
+                        "value": "1",
+                        "text": "Trifft überhaupt nicht zu 👎"
+                    },
+                    "richtung_erkennen-p2": {
+                        "value": "2",
+                        "text": "Trifft eher nicht zu"
+                    },
+                    "richtung_erkennen-p3": {
+                        "value": "3",
+                        "text": "Ich weiß nicht"
+                    },
+                    "richtung_erkennen-p4": {
+                        "value": "4",
+                        "text": "Trifft eher zu"
+                    },
+                    "richtung_erkennen-p5": {
+                        "value": "5",
+                        "text": "Trifft vollkommen zu"
+                    }
+                }
+            },
+            "question2": {
+                "type": "likert-basic",
+                "name": "schwer_zu_erkennen",
+                "text": "Die Gebärde ist schwer zu erkennen.",
+                "required": "true",
+                "points": {
+                   "schwer_zu_erkennen-p1": {
+                        "value": "1",
+                        "text": "Trifft überhaupt nicht zu 👎"
+                    },
+                    "schwer_zu_erkennen-p2": {
+                        "value": "2",
+                        "text": "Trifft eher nicht zu"
+                    },
+                    "schwer_zu_erkennen-p3": {
+                        "value": "3",
+                        "text": "Ich weiß nicht"
+                    },
+                    "schwer_zu_erkennen-p4": {
+                        "value": "4",
+                        "text": "Trifft eher zu"
+                    },
+                    "schwer_zu_erkennen-p5": {
+                        "value": "5",
+                        "text": "Trifft vollkommen zu"
+                    }
+                }
+            },
+            "question3": {
+                "type": "likert-basic",
+                "name": "bessere_lokalisierung",
+                "text": "Das Anpassen der Richtung und der Position der Gebärde kann dabei helfen, besser zu verstehen, wo das Gleis liegt.",
+                "required": "true",
+                "points": {
+                    "bessere_lokalisierung-p1": {
+                        "value": "1",
+                        "text": "Trifft überhaupt nicht zu 👎"
+                    },
+                    "bessere_lokalisierung-p2": {
+                        "value": "2",
+                        "text": "Trifft eher nicht zu"
+                    },
+                    "bessere_lokalisierung-p3": {
+                        "value": "3",
+                        "text": "Ich weiß nicht"
+                    },
+                    "bessere_lokalisierung-p4": {
+                        "value": "4",
+                        "text": "Trifft eher zu"
+                    },
+                    "bessere_lokalisierung-p5": {
+                        "value": "5",
+                        "text": "Trifft vollkommen zu"
+                    }
+                }
+            },
+            "question4": {
+                "type": "likert-basic",
+                "name": "nicht_gut",
+                "text": "Ich finde diesen Ansatz gut.",
+                "required": "true",
+                "points": {
+                    "nicht_gut-p1": {
+                        "value": "1",
+                        "text": "Trifft überhaupt nicht zu 👎"
+                    },
+                    "nicht_gut-p2": {
+                        "value": "2",
+                        "text": "Trifft eher nicht zu"
+                    },
+                    "nicht_gut-p3": {
+                        "value": "3",
+                        "text": "Ich weiß nicht"
+                    },
+                    "nicht_gut-p4": {
+                        "value": "4",
+                        "text": "Trifft eher zu"
+                    },
+                    "nicht_gut-p5": {
+                        "value": "5",
+                        "text": "Trifft vollkommen zu"
+                    }
+                }
+            },
+            "question5": {
                 "type": "textinput",
-                "name": "formfeedback",
-                "text": "Das war der Prototyp für dieses Studientool. Über Feedback würde ich mich freuen. Entweder hier oder per Email unter: jan.dickmann@web.de",
+                "name": "text_feedback",
+                "text": "Hier können sie Text Feedback geben",
                 "required": "false",
-                "size": "1000"
+                "size": "250"
+            },
+            "question6": {
+                "type": "videoinput",
+                "text": "Hier können sie per Video Feedback geben",
+                "name": "video_feedback",
+                "required": "false"
             }
         },
         "infovideo": {
-            "videourl": "https://www.youtube-nocookie.com/embed/F_w50c5Us3Y?si=-H07MmQ4lYOC2Bwh",
-            "infotext": "Hier wird in Zukunft ein Erklärtext stehen, in dem die Fragestellungen erklärt werden. Dazu werden alle Fragen der Seite einzeln durchgegangen und einfach erklärt. Zum Beispiel wird hier erklärt, dass man um Feedback zu geben, ein Video aufnehmen kann. Dazu drückt man auf den Knopf mit dem Videokamera Symbol. Danach muss man oben links am Browser bestätigen, dass der Browser auf die Kamera zugreifen darf.",
+            "videourl": "videos/0009-inflected.mp4",
+            "htmlblock": "p3infos.html",
             "configuration": {
-                "embed": "yt"
+                "embed": "no"
             }
         },
         "database_table": {
-            "table_name": "feedback_responses",
+            "table_name": "p3_gleis_variations",
             "fields": {
-                "formfeedback": {
+                "richtung_erkennen": {
+                    "type": "integer",
+                    "nullable": "false"
+                },
+                "schwer_zu_erkennen": {
+                    "type": "integer",
+                    "nullable": "false"
+                },
+                "bessere_lokalisierung": {
+                    "type": "integer",
+                    "nullable": "false"
+                },
+                "nicht_gut": {
+                    "type": "integer",
+                    "nullable": "false"
+                },
+                "text_feedback": {
                     "type": "string",
-                    "size": "1000",
+                    "size": "250",
+                    "nullable": "true"
+                },
+                "video_upload": {
+                    "type": "string",
+                    "size": "100",
                     "nullable": "true"
                 }
             }