181 lines
7.7 KiB
HTML
181 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
{% macro single_video(video_url, embed="yt", title="",width="560", height="315", class="center", code="<p>No code given
|
|
</p>") -%}
|
|
{% if (embed == "yt") %}
|
|
<div class={{center}}>
|
|
{% if (title != "") %}
|
|
<h3>{{title}}</h3>
|
|
{% endif %}
|
|
<div class="video-container">
|
|
<iframe width={{width}} height={{height}} 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>
|
|
</div>
|
|
{% else %}
|
|
{{code}}
|
|
{% endif %}
|
|
{%- endmacro %}
|
|
|
|
{% macro required(question) -%}
|
|
{% if (question["required"] == "true") %}
|
|
required
|
|
{% endif %}
|
|
{%- endmacro %}
|
|
|
|
{% macro inputconfig(question) -%}
|
|
{% if ("min" in question) %}
|
|
min={{question["min"]}}
|
|
{% endif %}
|
|
{% if ("max" in question) %}
|
|
max={{question["max"]}}
|
|
{% endif %}
|
|
{% if ("step" in question) %}
|
|
step={{question["step"]}}
|
|
{% endif %}
|
|
{%- endmacro %}
|
|
|
|
{% macro input(name, value='', type='text', size=20) -%}
|
|
<input type="{{ type }}" name="{{ name }}" value="{{
|
|
value|e }}" size="{{ size }}">
|
|
{%- endmacro %}
|
|
|
|
<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='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="centercontent">
|
|
<div class="container">
|
|
<h2>Stimulus part</h2>
|
|
{% if (stimulus_type == "single_video") %}
|
|
{{ single_video(**stimulus_configuration) }}
|
|
{% elif (stimulus_type == "empty") %}
|
|
|
|
{% else %}
|
|
<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">
|
|
{% for question in questions %}
|
|
{% if (questions[question]["type"] == "likert") %}
|
|
<div class="likercontainer">
|
|
<div class="likert">
|
|
{{ questions[question]['text']}}
|
|
{% for point in questions[question]["points"] %}
|
|
<label>
|
|
<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>
|
|
</label>
|
|
{% endfor %}
|
|
</div>
|
|
</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>
|
|
</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>
|
|
|
|
{% 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>
|
|
|
|
{% elif (questions[question]["type"] == "emailinput") %}
|
|
<label>
|
|
{{ questions[question]['text']}}
|
|
<input type="email" name="{{ questions[question]['name']}}" id="{{ questions[question]['name'] }}" {{required(questions[question])}}>
|
|
</label>
|
|
|
|
{% 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"] %}
|
|
<option name="{{ point }}" id="{{ point }}"
|
|
value="{{ questions[question]['points'][point]['value'] }}"
|
|
{{required(questions[question])}}><span>{{ questions[question]['points'][point]['text']
|
|
}}</span></option>
|
|
|
|
{% endfor %}
|
|
</select>
|
|
</label>
|
|
|
|
{% elif (questions[question]["type"] == "videoinput") %}
|
|
<h2>Gib Feedback als Video</h2>
|
|
<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">
|
|
|
|
<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" class="centertext, aspect-ratio-16-9" 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>
|
|
<!-- TODO maybe I want to use this instead: <button id="submitbutton" type="submit">Submit</button> -->
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |