There will be a short maintenance break on Wed 27.10. at 12:00. Estimated time 30 minutes.

Commit c6c84816 authored by Ossi Laine's avatar Ossi Laine
Browse files

Changed audio iframe to audio html -tag

parent df68de51
......@@ -45,15 +45,17 @@
</button>
<div id="export-link-container" class="hidden">
<a id="export-link" class="float-right" href="{{ url_for('experiment.download_csv', exp_id=exp.idexperiment) }}" role="button"></a>
<a id="export-link" class="float-right"
href="{{ url_for('experiment.download_csv', exp_id=exp.idexperiment) }}" role="button"></a>
<p id="export-error"></p>
</div>
<div class="progress hidden">
<div id="export-results-bar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
<div class="progress hidden">
<div id="export-results-bar" class="progress-bar progress-bar-striped progress-bar-animated"
role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
</div>
</div>
</div>
</td>
</tr>
......@@ -67,21 +69,21 @@
<table class="table">
<thead>
<tr>
<th scope="col" nowrap>Question ID:</td>
<th scope="col" nowrap>Question:</th>
<th scope="col" nowrap>Left scale</th>
<th scope="col" nowrap>Right scale</th>
<th scope="col" nowrap>Question ID:</td>
<th scope="col" nowrap>Question:</th>
<th scope="col" nowrap>Left scale</th>
<th scope="col" nowrap>Right scale</th>
</tr>
</thead>
<tbody>
{% for q in question_headers %}
{% for q in question_headers %}
<tr>
<td>{{ q.idquestion }}</td>
<td>{{ q.question }}</td>
<td>{{ q.left }}</td>
<td>{{ q.right }}</td>
<td>{{ q.idquestion }}</td>
<td>{{ q.question }}</td>
<td>{{ q.left }}</td>
<td>{{ q.right }}</td>
</tr>
{% endfor %}
{% endfor %}
</tbody>
</table>
......@@ -92,29 +94,29 @@
<table class="table">
<thead>
<tr>
<th scope="col" nowrap>Participant ID:</th>
{% for page in pages_and_questions %}
{% for p in pages_and_questions[page] %}
<th scope="col" nowrap>{{ p[0]}}/{{ p[1]}}</th>
{% endfor %}
{% endfor %}
<th scope="col" nowrap>Participant ID:</th>
{% for page in pages_and_questions %}
{% for p in pages_and_questions[page] %}
<th scope="col" nowrap>{{ p[0]}}/{{ p[1]}}</th>
{% endfor %}
{% endfor %}
</tr>
</thead>
<tbody>
{% for participant in participants_and_answers %}
{% for participant in participants_and_answers %}
<tr>
{% if participant == 'mean' %}
<td><b>{{ participant }}</b></td>
{% else %}
<td>{{ participant }}</td>
{% endif %}
{% for answer in participants_and_answers[participant] %}
<td>{{ answer }}</td>
{% endfor %}
{% if participant == 'mean' %}
<td><b>{{ participant }}</b></td>
{% else %}
<td>{{ participant }}</td>
{% endif %}
{% for answer in participants_and_answers[participant] %}
<td>{{ answer }}</td>
{% endfor %}
</tr>
{% endfor %}
......@@ -127,56 +129,60 @@
<table class="table">
<thead>
<tr>
<th style="width:25%;%" scope="col" nowrap>Stimulus:</td>
<th style="width:25%;%" scope="col" nowrap>Picture:</th>
<th style="width:25%;%" scope="col" nowrap>Description:</th>
<th style="width:25%;%" scope="col" nowrap></th>
<th style="width:25%;%" scope="col" nowrap>Stimulus:</td>
<th style="width:25%;%" scope="col" nowrap>Picture:</th>
<th style="width:25%;%" scope="col" nowrap>Description:</th>
<th style="width:25%;%" scope="col" nowrap></th>
</tr>
</thead>
<tbody>
{% for s in stimulus_headers %}
{% for embody_picture in embody_questions %}
<tr>
{% if s.type == 'text' %}
<td>{{ s.text }}</td>
{% elif s.type == 'picture' %}
<td><img src="/{{ s.media }}" class="thumbnail" /></td>
{% elif s.type == 'video' %}
<td>
<div class="embed-responsive embed-responsive-16by9 ">
<iframe class="embed-responsive-item thumbnail" src="/{{ s.media }}" allowFullScreen></iframe>
</div>
</td>
{% elif s.type == 'audio' %}
<td>
<div class="embed-responsive embed-responsive-16by9 ">
<iframe class="embed-responsive-item thumbnail" src="/{{ s.media }}" allowFullScreen></iframe>
</div>
</td>
{% else %}
<td>{{ s.text }}</td>
{% endif %}
<td><img src="{{ embody_picture.picture }}" class="thumbnail" /></td>
<td>{{ embody_picture.question }}</td>
<td>
<button data-value="{{ s.idpage }}-{{ embody_picture.idembody }}" class="btn btn-primary embody-get-drawing">
<span class="spinner-border spinner-border-sm hidden"></span>
Draw
</button>
</td>
</tr>
{% endfor %}
{% endfor %}
{% for s in stimulus_headers %}
{% for embody_picture in embody_questions %}
<tr>
{% if s.type == 'text' %}
<td>{{ s.text }}</td>
{% elif s.type == 'picture' %}
<td><img src="/{{ s.media }}" class="thumbnail" /></td>
{% elif s.type == 'video' %}
<td>
<div class="embed-responsive embed-responsive-16by9 ">
<iframe class="embed-responsive-item thumbnail" src="/{{ s.media }}" allowFullScreen></iframe>
</div>
</td>
{% elif s.type == 'audio' %}
<td>
<div class="embed-responsive embed-responsive-16by9 ">
<audio class="embed-responsive-item thumbnail" controls>
<source src="/{{ s.media }}">
Your browser does not support the audio element.
</audio>
</div>
</td>
{% else %}
<td>{{ s.text }}</td>
{% endif %}
<td><img src="{{ embody_picture.picture }}" class="thumbnail" /></td>
<td>{{ embody_picture.question }}</td>
<td>
<button data-value="{{ s.idpage }}-{{ embody_picture.idembody }}" class="btn btn-primary embody-get-drawing">
<span class="spinner-border spinner-border-sm hidden"></span>
Draw
</button>
</td>
</tr>
{% endfor %}
{% endfor %}
</tbody>
</table>
<div class="progress hidden" id="plotted-image">
<div id="image-loading-progress" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
<div id="image-loading-progress" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar"
aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
<!-- Creating image... -->
</div>
</div>
......@@ -190,20 +196,20 @@
<table class="table">
<thead>
<tr>
<th scope="col" nowrap>Participant</th>
{% for bg in bg_questions %}
<th scope="col" nowrap>{{ bg.background_question }}</th>
{% endfor %}
<th scope="col" nowrap>Participant</th>
{% for bg in bg_questions %}
<th scope="col" nowrap>{{ bg.background_question }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for p in bg_answers_for_participants %}
{% for p in bg_answers_for_participants %}
<tr>
<td>{{ p }}</td>
{% for bg_answer in bg_answers_for_participants[p] %}
<td align="center">{{ bg_answer }}</td>
{% endfor %}
<td>{{ p }}</td>
{% for bg_answer in bg_answers_for_participants[p] %}
<td align="center">{{ bg_answer }}</td>
{% endfor %}
</tr>
{% endfor %}
......@@ -211,9 +217,9 @@
</tbody>
</table>
<script src="{{ url_for('static', filename='lib/js/socket.io.js') }}" ></script>
<script src="{{ url_for('static', filename='js/urls.js') }}" ></script>
<script src="{{ url_for('static', filename='js/getDrawing.js') }}" ></script>
<script src="{{ url_for('static', filename='js/getCSV.js') }}" ></script>
<script src="{{ url_for('static', filename='lib/js/socket.io.js') }}"></script>
<script src="{{ url_for('static', filename='js/urls.js') }}"></script>
<script src="{{ url_for('static', filename='js/getDrawing.js') }}"></script>
<script src="{{ url_for('static', filename='js/getCSV.js') }}"></script>
{% endblock %}
{% endblock %}
\ No newline at end of file
......@@ -3,123 +3,134 @@
<div class="container stimulus">
<div class="row justify-content-center">
<div class="row justify-content-center">
{% if session['randomization']=='Off' %}
{% if session['randomization']=='Off' %}
{% if session['type']=='text' %}
<div class="container text-center mt-5 pt-5">
{% for page in pages.items %}
<h{{ stimulus_size_text }} class="text-center mt-5"><br>{{ page.text }}</h{{ stimulus_size_text }}>
{% endfor %}
</div>
<br><br>
<div class="container text-center mt-5 pt-5">
{% for page in pages.items %}
<h{{ stimulus_size_text }} class="text-center mt-5"><br>{{ page.text }}</h{{ stimulus_size_text }}>
{% endfor %}
</div>
<br><br>
{% endif %}
{% if session['type']=='picture' %}
<div class="stimulus col-{{stimulus_size}} mt-5 pt-5">
{% for page in pages.items %}
<img src="/{{ page.media }}" class="img-fluid">
{% endfor %}
</div>
<div class="stimulus col-{{stimulus_size}} mt-5 pt-5">
{% for page in pages.items %}
<img src="/{{ page.media }}" class="img-fluid">
{% endfor %}
</div>
{% endif %}
{% if session['type']=='video' %}
<div class="col-{{stimulus_size}} container stimulus mt-5 pt-5">
{% for page in pages.items %}
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="/{{ page.media }}" allowfullscreen></iframe>
</div>
{% endfor %}
<div class="col-{{stimulus_size}} container stimulus mt-5 pt-5">
{% for page in pages.items %}
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="/{{ page.media }}" allowfullscreen></iframe>
</div>
{% endfor %}
</div>
{% endif %}
{% if session['type']=='audio' %}
<div class="col-{{stimulus_size}} container stimulus mt-5 pt-5">
{% for page in pages.items %}
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="/{{ page.media }}" allowfullscreen></iframe>
</div>
{% endfor %}
<div class="col-{{stimulus_size}} container stimulus mt-5 pt-5">
{% for page in pages.items %}
<div class="embed-responsive embed-responsive-16by9">
<audio class="embed-responsive-item" controls>
<source src="/{{ page.media }}">
Your browser does not support the audio element.
</audio>
</div>
{% endfor %}
</div>
{% endif %}
{% else %}
{% else %}
{% if session['type']=='text' %}
<div class="container text-center mt-5 pt-5">
{% for page in pages.items %}
<h{{ stimulus_size_text }} class="text-center mt-5"><br>{{ randomized_stimulus.text }}</h{{ stimulus_size_text }}>
{% endfor %}
</div>
<br><br>
<div class="container text-center mt-5 pt-5">
{% for page in pages.items %}
<h{{ stimulus_size_text }} class="text-center mt-5"><br>{{ randomized_stimulus.text }}
</h{{ stimulus_size_text }}>
{% endfor %}
</div>
<br><br>
{% endif %}
{% if session['type']=='picture' %}
<div class="stimulus col-{{stimulus_size}} mt-5 pt-5">
{% for page in pages.items %}
<img src="/{{ randomized_stimulus.media }}" class="img-fluid">
{% endfor %}
<div class="stimulus col-{{stimulus_size}} mt-5 pt-5">
{% for page in pages.items %}
<img src="/{{ randomized_stimulus.media }}" class="img-fluid">
{% endfor %}
</div>
</div>
{% endif %}
{% if session['type']=='video' %}
<div class="col-{{stimulus_size}} container stimulus mt-5 pt-5">
{% for page in pages.items %}
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="/{{ randomized_stimulus.media }}" allowfullscreen></iframe>
</div>
{% endfor %}
<div class="col-{{stimulus_size}} container stimulus mt-5 pt-5">
{% for page in pages.items %}
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="/{{ randomized_stimulus.media }}" allowfullscreen></iframe>
</div>
{% endfor %}
</div>
{% endif %}
{% if session['type']=='audio' %}
<div class="col-{{stimulus_size}} container stimulus mt-5 pt-5">
{% for page in pages.items %}
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="/{{ randomized_stimulus.media }}" allowfullscreen></iframe>
</div>
{% endfor %}
<div class="col-{{stimulus_size}} container stimulus mt-5 pt-5">
{% for page in pages.items %}
<div class="embed-responsive embed-responsive-16by9">
<audio class="embed-responsive-item" controls>
<source src="/{{ randomized_stimulus.media }}">
Your browser does not support the audio element.
</audio>
</div>
{% endfor %}
</div>
{% endif %}
{% endif %}
{% endif %}
{% if form.__name__ == 'embody' %}
<div class="col-4 mt-5 pt-5">
<div class="canvas-container">
<span class="canvas-info"></span>
<canvas id="embody-canvas" class="crosshair" width="20" height="20" ></canvas>
</div>
{% if form.__name__ == 'embody' %}
<div class="col-4 mt-5 pt-5">
<div class="canvas-container">
<span class="canvas-info"></span>
<canvas id="embody-canvas" class="crosshair" width="20" height="20"></canvas>
</div>
{% for embody_question in embody_questions %}
<img id="idembody-{{embody_question.idembody}}" class="embody-image {% if loop.last %}last-embody{% endif %} {% if loop.index != 1 %}hidden{% else %}selected-embody{% endif %}" src={{ embody_question.picture }} />
{% endfor %}
{% for embody_question in embody_questions %}
<img id="idembody-{{embody_question.idembody}}"
class="embody-image {% if loop.last %}last-embody{% endif %} {% if loop.index != 1 %}hidden{% else %}selected-embody{% endif %}"
src={{ embody_question.picture }} />
{% endfor %}
{% for embody_question in embody_questions %}
<p id="idquestion-{{ embody_question.idembody }}" class="embody-question {% if loop.index != 1 %}hidden{% else %}selected-embody{% endif %}"> {{ embody_question.question }}</p>
{% endfor %}
{% for embody_question in embody_questions %}
<p id="idquestion-{{ embody_question.idembody }}"
class="embody-question {% if loop.index != 1 %}hidden{% else %}selected-embody{% endif %}">
{{ embody_question.question }}</p>
{% endfor %}
<img id="baseImageMask" class="hidden" src={{ url_for('static', filename='img/dummy_600_mask.png') }} />
<img id="baseImageMask" class="hidden" src={{ url_for('static', filename='img/dummy_600_mask.png') }} />
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
<br>
<h4 class="text-center">{{ rating_instruction }}</h4>
<!-- Select form type -->
<!-- Select form type -->
{% if form.__name__ == 'embody' %}
{% if form.__name__ == 'embody' %}
<form id="canvas-form" class="form-group mt-5" action="/task/embody/{{ page_num }}" method="post" >
<form id="canvas-form" class="form-group mt-5" action="/task/embody/{{ page_num }}" method="post">
<input id="canvas-data" type="hidden" value="" name="coordinates">
......@@ -139,29 +150,29 @@
<p>{{ _("Reload the page if canvas didn't appear") }} </p>
<p>{{ _('You can zoom in/out the page view by pressing ctrl+/ctrl- (Windows) or ⌘+/⌘- (Mac)') }} </p>
</div>
</div>
</form>
</div>
</form>
<script src="{{ url_for('static', filename='js/canvas.js') }}" ></script>
<script src="{{ url_for('static', filename='js/canvas.js') }}"></script>
{% elif form.__name__ == 'slider' %}
<form class="form-group mt-5" action="/task/question/{{ page_num }}" method="post">
<form class="form-group mt-5" action="/task/question/{{ page_num }}" method="post">
{% for category in form.categories1 %}
{% for scale in form.categories1[category] %}
<div class="row form-group mt-0 mb-0">
<h6 class="col-3 text-right mt-0 mb-0">
{{ scale[0] }}
</h6>
<h6 class="col text-center mt-0 mb-0">
<label for="customRange">{{ category[1] }}</label>
<input type="range" class="custom-range" id="customRange" name={{ category[0] }}>
</h6>
<h6 class="col-3 text-left mt-0 mb-0">
{{ scale[1] }}
</h6>
</div>
{% endfor %}
{% for scale in form.categories1[category] %}
<div class="row form-group mt-0 mb-0">
<h6 class="col-3 text-right mt-0 mb-0">
{{ scale[0] }}
</h6>
<h6 class="col text-center mt-0 mb-0">
<label for="customRange">{{ category[1] }}</label>
<input type="range" class="custom-range" id="customRange" name={{ category[0] }}>
</h6>
<h6 class="col-3 text-left mt-0 mb-0">
{{ scale[1] }}
</h6>
</div>
{% endfor %}
{% endfor %}
<div class="form-row text-center">
<div class="col-12">
......@@ -172,9 +183,9 @@
<br>
<p>{{ _('You can zoom in/out the page view by pressing ctrl+/ctrl- (Windows) or ⌘+/⌘- (Mac)') }} </p>
</div>
</div>
</form>
</div>
</form>
{% endif %}
{% endblock %}
\ No newline at end of file
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment