330 lines
14 KiB
HTML
330 lines
14 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") %}
|
|
|
|
{% if (title != "") %}
|
|
<h3>{{title}}</h3>
|
|
{% endif %}
|
|
<div class="iframe-container">
|
|
<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>
|
|
|
|
{% elif (embed == "no") %}
|
|
|
|
<video controls>
|
|
<source src="{{ url_for('static', filename='videos/' + video_url) }}" type="video/mp4">
|
|
</video>
|
|
|
|
{% else %}
|
|
{{code}}
|
|
{% endif %}
|
|
{%- endmacro %}
|
|
|
|
{% macro double_video(video_url1, video_url2, embed="yt", title="",width="560", height="315", class="center", code="<p>
|
|
No code given
|
|
</p>") -%}
|
|
{% if (embed == "yt") %}
|
|
|
|
{% if (title != "") %}
|
|
<h3>{{title}}</h3>
|
|
{% endif %}
|
|
<div class="double_video_container">
|
|
|
|
<div class="dv_half">
|
|
<div class="iframe-container">
|
|
<iframe class="center" src="{{ video_url1 }}" title="YouTube video player" frameborder="0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="dv_half">
|
|
<div class="iframe-container">
|
|
<iframe class="center" src="{{ video_url2 }}" title="YouTube video player" frameborder="0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
{% elif (embed == "no") %}
|
|
<div class="double_video_container"></div>
|
|
<div class="dv_half">
|
|
<div class="iframe-container">
|
|
<video controls>
|
|
<source src="{{ url_for('static', filename='videos/' + video_url) }}" type="video/mp4">
|
|
</video>
|
|
</div>
|
|
</div>
|
|
<div class="dv_half"></div>
|
|
<div class="iframe-container">
|
|
<video controls>
|
|
<source src="{{ url_for('static', filename='videos/' + video_url) }}" type="video/mp4">
|
|
</video>
|
|
</div>
|
|
</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 }}" class="inputs">
|
|
{%- 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='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>
|
|
<div class="container">
|
|
|
|
{% if (infovideo) %}
|
|
<dialog>
|
|
|
|
<button class="dialogBtn" autofocus><img class="infoButtonIcon" id="buttonClose"
|
|
src="{{ url_for('static', filename='icons/x-icon.png')}}" alt="Delete Icon"></button>
|
|
<video controls>
|
|
<source src="{{ url_for('static', filename=infovideo['videourl']) }}" type="video/mp4">
|
|
</video>
|
|
<div class="dialogTextContainer">
|
|
{% if ("infotext" in infovideo) %}
|
|
<p>{{ infovideo["infotext"] }}</p>
|
|
{% endif %}
|
|
{% if ("htmlblock" in infovideo) %}
|
|
{% include infovideo["htmlblock"] %}
|
|
{% endif %}
|
|
</div>
|
|
</dialog>
|
|
<button class="dialogBtn"><img class="infoButtonIcon" id="buttonInfoIcon"
|
|
src="{{ url_for('static', filename='icons/sl-icon.png')}}" alt="Info Icon"></button>
|
|
<script src="{{ url_for('static', filename='infoDialogScript.js')}}"></script>
|
|
{% endif %}
|
|
|
|
|
|
{% if (stimulus_type == "single_video") %}
|
|
{{ single_video(**stimulus_configuration) }}
|
|
{% elif (stimulus_type == "double_video") %}
|
|
{{ double_video(**stimulus_configuration) }}
|
|
{% elif (stimulus_type == "empty") %}
|
|
|
|
{% else %}
|
|
<p>Error: Block {{ stimulus["type"] }} could not be loaded!</p>
|
|
{% endif %}
|
|
|
|
<form class="formlayout" id="question_form" action="{{ url_for('sendpage') }}" method="post">
|
|
|
|
{% for question in questions %}
|
|
{% 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() }}">
|
|
{% for point in questions[question]["points"] %}
|
|
<label>
|
|
<input class="inputs" 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>
|
|
<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">
|
|
{{ 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"] == "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">
|
|
<label>
|
|
{{ questions[question]['text']}}<input class="inputs" type="date"
|
|
name="{{ questions[question]['name']}}" id="{{ questions[question]['name'] }}"
|
|
{{required(questions[question])}}>
|
|
</label>
|
|
</div>
|
|
<div class="spacer" aria-hidden="true" style="height:20px"></div>
|
|
|
|
{% elif (questions[question]["type"] == "numberinput") %}
|
|
<div class="compressWidth">
|
|
<label>
|
|
{{ questions[question]['text']}}<input class="inputs" type="number"
|
|
name="{{ questions[question]['name']}}" id="{{ questions[question]['name'] }}"
|
|
{{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">
|
|
<label>
|
|
{{ questions[question]['text']}}<input class="inputs" type="email"
|
|
name="{{ questions[question]['name']}}" id="{{ questions[question]['name'] }}"
|
|
{{required(questions[question])}}>
|
|
</label>
|
|
</div>
|
|
<div class="spacer" aria-hidden="true" style="height:20px"></div>
|
|
|
|
{% elif (questions[question]["type"] == "dropdowninput") %}
|
|
<div class="compressWidth">
|
|
<label>
|
|
{{ questions[question]['text']}}<select class="inputs" 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>
|
|
</div>
|
|
<div class="spacer" aria-hidden="true" style="height:20px"></div>
|
|
|
|
{% elif (questions[question]["type"] == "multiplechoice") %}
|
|
<div class="compressWidth">
|
|
<label>
|
|
{{ questions[question]['text']}}
|
|
|
|
{% for point in questions[question]["points"] %}
|
|
<label for="{{ point }}">
|
|
<input type="checkbox" id="{{ point }}" name="{{ questions[question]['name'] }}"
|
|
value="{{ questions[question]['points'][point]['value'] }}">
|
|
{{ questions[question]['points'][point]['text']}}</label>
|
|
|
|
{% 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>
|
|
<h3>{{ questions[question]['text']}}</h3>
|
|
|
|
<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>
|
|
{% else %}
|
|
<p>Error: Block {{config["question 1"]["blocks"][block]["type"]}} could not be loaded!</p>
|
|
{% endif %}
|
|
{% endfor %}
|
|
<div class="button-container">
|
|
|
|
<button id="submitbutton" type="submit">Weiter</button>
|
|
<!-- TODO maybe I want to use this instead: <button id="submitbutton" type="submit">Submit</button> /// <input class="inputs" id="submitbutton" type="submit" value="submit" />-->
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</body>
|
|
|
|
</html> |