From 8a1c7aff427400631121c294157ce0d6c1938e5e Mon Sep 17 00:00:00 2001
From: Jan <jan.dickmann@web.de>
Date: Tue, 17 Sep 2024 17:03:44 +0200
Subject: [PATCH] More UI improvements

---
 slaeforms/static/icons/sl-icon.png         | Bin 0 -> 5936 bytes
 slaeforms/static/styles.css                |   3 +
 slaeforms/templates/standard_template.html |  49 ++++++++-
 slaeforms/templates/studytest.html         | 122 ++++++++-------------
 slaeforms/userstudy1.json                  | 115 ++++++++++++++++---
 5 files changed, 196 insertions(+), 93 deletions(-)
 create mode 100644 slaeforms/static/icons/sl-icon.png

diff --git a/slaeforms/static/icons/sl-icon.png b/slaeforms/static/icons/sl-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..c25975c89c1b0ac07980ec74a47099c0ca1e9528
GIT binary patch
literal 5936
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

literal 0
HcmV?d00001

diff --git a/slaeforms/static/styles.css b/slaeforms/static/styles.css
index d286db1..2c1841b 100644
--- a/slaeforms/static/styles.css
+++ b/slaeforms/static/styles.css
@@ -334,10 +334,13 @@ iframe {
     gap: 10px; /* Adjust spacing */
     text-align: center;
     flex-grow: 1;
+    max-width: 70%;
+    margin: auto;
 }
 
 .likertlabel {
     flex-grow: 1;
+    width: 100%;
 }
 
 .likertinput {
diff --git a/slaeforms/templates/standard_template.html b/slaeforms/templates/standard_template.html
index b7debe0..62a0bf0 100644
--- a/slaeforms/templates/standard_template.html
+++ b/slaeforms/templates/standard_template.html
@@ -131,7 +131,7 @@ step={{question["step"]}}
             </div>
         </dialog>
         <button class="dialogBtn"><img class="infoButtonIcon" id="buttonInfoIcon"
-                src="{{ url_for('static', filename='icons/info-icon.png')}}" alt="Info Icon"></button>
+                src="{{ url_for('static', filename='icons/sl-icon.png')}}" alt="Info Icon"></button>
         <script src="{{ url_for('static', filename='infoDialogScript.js')}}"></script>
         {% endif %}
 
@@ -149,7 +149,14 @@ step={{question["step"]}}
         <form class="formlayout" id="question_form" action="{{ url_for('sendpage') }}" method="post">
 
             {% for question in questions %}
-            {% if (questions[question]["type"] == "likert") %}
+            {% if (questions[question]["type"] == "textblock") %}
+
+            <div class="spacer" aria-hidden="true" style="height:30px"></div>
+            <h3 style="margin: auto;">{{ questions[question]['text']}}</h3>
+            <div class="spacer" aria-hidden="true" style="height:30px"></div>
+
+
+            {% elif (questions[question]["type"] == "likert") %}
             <div class="likertcontainer">
                 <h3>{{ questions[question]['text']}}</h3>
                 <div class="likert" style="--likert-rows: {{ questions[question]['points']|length() }}">
@@ -164,6 +171,26 @@ step={{question["step"]}}
                     {% endfor %}
                 </div>
             </div>
+            <div class="spacer" aria-hidden="true" style="height:20px"></div>
+
+            {% elif (questions[question]["type"] == "likert-basic") %}
+
+            <h3>{{ questions[question]['text']}}</h3>
+
+            <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:20px"></div>
+
             {% elif (questions[question]["type"] == "textinput") %}
             <div class="textarea-container">
                 <label class="textarea-label">
@@ -173,6 +200,18 @@ step={{question["step"]}}
                         maxlength="{{ questions[question]['size'] }}" {{required(questions[question])}}></textarea>
                 </label>
             </div>
+            <div class="spacer" aria-hidden="true" style="height:20px"></div>
+
+            {% elif (questions[question]["type"] == "textinput") %}
+            <div class="textarea-container">
+                <label class="textarea-label">
+                    {{ questions[question]['text']}}
+                    <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:20px"></div>
 
             {% elif (questions[question]["type"] == "dateinput") %}
             <div class="compressWidth">
@@ -182,6 +221,8 @@ step={{question["step"]}}
                         {{required(questions[question])}}>
                 </label>
             </div>
+            <div class="spacer" aria-hidden="true" style="height:20px"></div>
+
             {% elif (questions[question]["type"] == "numberinput") %}
             <div class="compressWidth">
                 <label>
@@ -190,6 +231,7 @@ step={{question["step"]}}
                         {{inputconfig(questions[question])}} {{required(questions[question])}}>
                 </label>
             </div>
+            <div class="spacer" aria-hidden="true" style="height:20px"></div>
 
             {% elif (questions[question]["type"] == "emailinput") %}
             <div class="compressWidth">
@@ -199,6 +241,7 @@ step={{question["step"]}}
                         {{required(questions[question])}}>
                 </label>
             </div>
+            <div class="spacer" aria-hidden="true" style="height:20px"></div>
 
             {% elif (questions[question]["type"] == "dropdowninput") %}
             <div class="compressWidth">
@@ -216,6 +259,7 @@ step={{question["step"]}}
                     </select>
                 </label>
             </div>
+            <div class="spacer" aria-hidden="true" style="height:20px"></div>
 
             {% elif (questions[question]["type"] == "multiplechoice") %}
             <div class="compressWidth">
@@ -231,6 +275,7 @@ step={{question["step"]}}
                     {% endfor %}
                 </label>
             </div>
+            <div class="spacer" aria-hidden="true" style="height:20px"></div>
 
             {% elif (questions[question]["type"] == "videoinput") %}
             <div class="spacer" aria-hidden="true" style="height:30px"></div>
diff --git a/slaeforms/templates/studytest.html b/slaeforms/templates/studytest.html
index 6dfcd82..70972d7 100644
--- a/slaeforms/templates/studytest.html
+++ b/slaeforms/templates/studytest.html
@@ -25,7 +25,7 @@
             <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">
 
 
@@ -33,97 +33,69 @@
                 <div class="likert" style="--likert-rows: 7">
 
                     <label>
-                        <input class="inputs" name="test1" type="radio"
-                            id="test1"
-                            value="1"
-                            required /><span> Option 1 </span>
+                        <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>
+                        <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>
+                        <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>
+                        <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>
+                        <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>
+                        <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>
+                        <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">
+            <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>
+                <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>
 
 
 
@@ -133,9 +105,7 @@
 
             <div class="textarea-container">
                 <label class="textarea-label">
-                    <textarea class="inputs" id="text"
-                        name="text" rows="6" cols="60"
-                        maxlength="200"></textarea>
+                    <textarea class="inputs" id="text" name="text" rows="6" cols="60" maxlength="200"></textarea>
                 </label>
             </div>
 
diff --git a/slaeforms/userstudy1.json b/slaeforms/userstudy1.json
index ee6ac82..2aa05ba 100644
--- a/slaeforms/userstudy1.json
+++ b/slaeforms/userstudy1.json
@@ -310,42 +310,127 @@
             }
         },
         "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",