From 5ad3676b7fe4836119eb0a2ab592a3c148248a24 Mon Sep 17 00:00:00 2001
From: Jan <jan.dickmann@web.de>
Date: Sun, 15 Sep 2024 18:12:21 +0200
Subject: [PATCH] progress on studytest css

---
 slaeforms/app.py                   |   4 +
 slaeforms/static/styles.css        |  27 ++++-
 slaeforms/templates/studytest.html | 186 +++++++++++++++++++++++++++++
 3 files changed, 216 insertions(+), 1 deletion(-)
 create mode 100644 slaeforms/templates/studytest.html
diff --git a/slaeforms/app.py b/slaeforms/app.py
index d12bb68..0481eee 100644
--- a/slaeforms/app.py
+++ b/slaeforms/app.py
@@ -249,6 +249,10 @@ def endpage():
 def datenschutz():
     return render_template("datenschutz.html")
 
+@app.route("/studytest")
+def studytest():
+    return render_template("studytest.html")
+
 
 @app.route("/form")
 def form():
diff --git a/slaeforms/static/styles.css b/slaeforms/static/styles.css
index cd2d158..d286db1 100644
--- a/slaeforms/static/styles.css
+++ b/slaeforms/static/styles.css
@@ -322,6 +322,31 @@ 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;
+}
+
+.likertlabel {
+    flex-grow: 1;
+}
+
+.likertinput {
+    margin: auto;
+    width: 60%;
+    min-height: 2em;
+    display: flex;
+}
+
 /* Likert stuff */
 .likert {
     /* --likert-rows: 5;*/
@@ -345,7 +370,7 @@ iframe {
     aspect-ratio: 1.5 / 1;
 }
 
-.likercontainer {
+.likertcontainer {
     margin: 30px auto;
     text-align: center;
 }
diff --git a/slaeforms/templates/studytest.html b/slaeforms/templates/studytest.html
new file mode 100644
index 0000000..64505c9
--- /dev/null
+++ b/slaeforms/templates/studytest.html
@@ -0,0 +1,186 @@
+<!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>
+
+    <video controls>
+        <source src="{{ url_for('static', filename='videos/GLEISvariations.mp4') }}" type="video/mp4">
+    </video>
+
+    <div class="container">
+        <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>
\ No newline at end of file
