progress on studytest css
This commit is contained in:
parent
4c6ec411b1
commit
5ad3676b7f
@ -249,6 +249,10 @@ def endpage():
|
|||||||
def datenschutz():
|
def datenschutz():
|
||||||
return render_template("datenschutz.html")
|
return render_template("datenschutz.html")
|
||||||
|
|
||||||
|
@app.route("/studytest")
|
||||||
|
def studytest():
|
||||||
|
return render_template("studytest.html")
|
||||||
|
|
||||||
|
|
||||||
@app.route("/form")
|
@app.route("/form")
|
||||||
def form():
|
def form():
|
||||||
|
|||||||
@ -322,6 +322,31 @@ iframe {
|
|||||||
display: flex;
|
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 stuff */
|
||||||
.likert {
|
.likert {
|
||||||
/* --likert-rows: 5;*/
|
/* --likert-rows: 5;*/
|
||||||
@ -345,7 +370,7 @@ iframe {
|
|||||||
aspect-ratio: 1.5 / 1;
|
aspect-ratio: 1.5 / 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.likercontainer {
|
.likertcontainer {
|
||||||
margin: 30px auto;
|
margin: 30px auto;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|||||||
186
slaeforms/templates/studytest.html
Normal file
186
slaeforms/templates/studytest.html
Normal file
@ -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>
|
||||||
Loading…
Reference in New Issue
Block a user