Jan/slaeforms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

CSS improvements and small fixes

Browse Source
This commit is contained in:
Jan Dickmann
2024-06-17 17:24:15 +02:00
parent 88c82eec7e
commit 46a8b2244f
8 changed files with 508 additions and 217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
slaeforms/templates/standard_template.html
View File

@@ -8,8 +8,7 @@
<h3>{{title}}</h3>
{% endif %}
<div class="video-container">
<iframe width={{width}} height={{height}} class="center" src="{{ video_url }}" title="YouTube video player"
frameborder="0"
<iframe class="center" src="{{ video_url }}" title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
</div>
@@ -27,13 +26,13 @@ required
{% macro inputconfig(question) -%}
{% if ("min" in question) %}
min={{question["min"]}}
min={{question["min"]}}
{% endif %}
{% if ("max" in question) %}
max={{question["max"]}}
max={{question["max"]}}
{% endif %}
{% if ("step" in question) %}
step={{question["step"]}}
step={{question["step"]}}
{% endif %}
{%- endmacro %}
@@ -49,17 +48,15 @@ step={{question["step"]}}
<title>Testform</title>
<link rel=" shortcut icon" href="{{ url_for('static', filename='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>
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="centercontent">
<div class="container">
<h2>Stimulus part</h2>
{% if (stimulus_type == "single_video") %}
{{ single_video(**stimulus_configuration) }}
{% elif (stimulus_type == "empty") %}
@@ -68,18 +65,16 @@ step={{question["step"]}}
<p>Error: Block {{ stimulus["type"] }} could not be loaded!</p>
{% endif %}
<h2>Questions</h2>
<form id="question_form" action="http://localhost:5000/send_json" method="post">
<form class="formlayout" id="question_form" action="http://localhost:5000/send_json" method="post">
{% for question in questions %}
{% if (questions[question]["type"] == "likert") %}
<div class="likercontainer">
<h3>{{ questions[question]['text']}}</h3>
<div class="likert">
{{ questions[question]['text']}}
{% for point in questions[question]["points"] %}
<label>
<input name="{{ questions[question]['name']}}" type="radio" id="{{ questions[question]['name'] }}"
<input 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>
@@ -91,59 +86,69 @@ step={{question["step"]}}
{% elif (questions[question]["type"] == "textinput") %}
<div class="textarea-container">
<label class="textarea-label">
{{ questions[question]['text']}}
{{ questions[question]['text']}}
<textarea id="{{ questions[question]['name'] }}" name="{{ questions[question]['name'] }}" rows="6"
cols="60" maxlength="{{ questions[question]['size'] }}"
{{required(questions[question])}}></textarea>
cols="60" maxlength="{{ questions[question]['size'] }}"
{{required(questions[question])}}></textarea>
</label>
</div>
{% elif (questions[question]["type"] == "dateinput") %}
<label>
{{ questions[question]['text']}}
<input type="date" name="{{ questions[question]['name']}}" id="{{ questions[question]['name'] }}" {{required(questions[question])}}>
</label>
<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") %}
<label>
{{ questions[question]['text']}}
<input type="number" name="{{ questions[question]['name']}}" id="{{ questions[question]['name'] }}" {{inputconfig(questions[question])}} {{required(questions[question])}}>
</label>
<div class="compressWidth">
<label>
{{ questions[question]['text']}}<input type="number" name="{{ questions[question]['name']}}"
id="{{ questions[question]['name'] }}" {{inputconfig(questions[question])}}
{{required(questions[question])}}>
</label>
</div>
{% elif (questions[question]["type"] == "emailinput") %}
<label>
{{ questions[question]['text']}}
<input type="email" name="{{ questions[question]['name']}}" id="{{ questions[question]['name'] }}" {{required(questions[question])}}>
</label>
<div class="compressWidth">
<label>
{{ questions[question]['text']}}<input type="email" name="{{ questions[question]['name']}}"
id="{{ questions[question]['name'] }}" {{required(questions[question])}}>
</label>
</div>
{% elif (questions[question]["type"] == "dropdowninput") %}
<label>
{{ questions[question]['text']}}
<select name="{{ questions[question]['name']}}" {{required(questions[question])}}>
<option value="" disabled selected>{{ questions[question]['defaulttext']}}</option>
{% for point in questions[question]["points"] %}
<div class="compressWidth">
<label>
{{ questions[question]['text']}}<select name="{{ questions[question]['name']}}"
{{required(questions[question])}}>
<option value="" disabled selected>{{ questions[question]['defaulttext']}}</option>
{% for point in questions[question]["points"] %}
<option name="{{ point }}" id="{{ point }}"
value="{{ questions[question]['points'][point]['value'] }}"
{{required(questions[question])}}><span>{{ questions[question]['points'][point]['text']
}}</span></option>
}}</span></option>
{% endfor %}
</select>
</label>
{% endfor %}
</select>
</label>
</div>
{% elif (questions[question]["type"] == "videoinput") %}
<div class="spacer" aria-hidden="true" style="height:30px"></div>
<h2>Gib Feedback als Video</h2>
<h3>{{ questions[question]['text']}}</h3>
<div class="centertext">
{{ questions[question]['text']}}
<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>
<div class="spacer" aria-hidden="true" style="height:30px"></div>
<div class="centertext">
<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')}}"
@@ -155,27 +160,26 @@ step={{question["step"]}}
<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" class="centertext, aspect-ratio-16-9" style="display:none">
<div id="videoContainer" style="display:none">
<video autoplay muted playsinline id="videoDisplay"></video>
</div>
<script src="{{ url_for('static', filename='videoscript.js')}}">
</script>
{% else %}
<p>Error: Block {{config["question 1"]["blocks"][block]["type"]}} could not be loaded!</p>
{% endif %}
{% endfor %}
<div class="button-container">
<p><input id="submitbutton" type="submit" value="submit" ; /></p>
<input id="submitbutton" type="submit" value="submit" />
<!-- TODO maybe I want to use this instead: <button id="submitbutton" type="submit">Submit</button> -->
</div>
</form>
</div>
</div>
</body>
</html>