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 @@ ...@@ -45,15 +45,17 @@
</button> </button>
<div id="export-link-container" class="hidden"> <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> <p id="export-error"></p>
</div> </div>
<div class="progress hidden"> <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 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>
</div>
</td> </td>
</tr> </tr>
...@@ -67,21 +69,21 @@ ...@@ -67,21 +69,21 @@
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
<th scope="col" nowrap>Question ID:</td> <th scope="col" nowrap>Question ID:</td>
<th scope="col" nowrap>Question:</th> <th scope="col" nowrap>Question:</th>
<th scope="col" nowrap>Left scale</th> <th scope="col" nowrap>Left scale</th>
<th scope="col" nowrap>Right scale</th> <th scope="col" nowrap>Right scale</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for q in question_headers %} {% for q in question_headers %}
<tr> <tr>
<td>{{ q.idquestion }}</td> <td>{{ q.idquestion }}</td>
<td>{{ q.question }}</td> <td>{{ q.question }}</td>
<td>{{ q.left }}</td> <td>{{ q.left }}</td>
<td>{{ q.right }}</td> <td>{{ q.right }}</td>
</tr> </tr>
{% endfor %} {% endfor %}
</tbody> </tbody>
</table> </table>
...@@ -92,29 +94,29 @@ ...@@ -92,29 +94,29 @@
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
<th scope="col" nowrap>Participant ID:</th> <th scope="col" nowrap>Participant ID:</th>
{% for page in pages_and_questions %} {% for page in pages_and_questions %}
{% for p in pages_and_questions[page] %} {% for p in pages_and_questions[page] %}
<th scope="col" nowrap>{{ p[0]}}/{{ p[1]}}</th> <th scope="col" nowrap>{{ p[0]}}/{{ p[1]}}</th>
{% endfor %} {% endfor %}
{% endfor %} {% endfor %}
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for participant in participants_and_answers %} {% for participant in participants_and_answers %}
<tr> <tr>
{% if participant == 'mean' %} {% if participant == 'mean' %}
<td><b>{{ participant }}</b></td> <td><b>{{ participant }}</b></td>
{% else %} {% else %}
<td>{{ participant }}</td> <td>{{ participant }}</td>
{% endif %} {% endif %}
{% for answer in participants_and_answers[participant] %} {% for answer in participants_and_answers[participant] %}
<td>{{ answer }}</td> <td>{{ answer }}</td>
{% endfor %} {% endfor %}
</tr> </tr>
{% endfor %} {% endfor %}
...@@ -127,56 +129,60 @@ ...@@ -127,56 +129,60 @@
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
<th style="width:25%;%" scope="col" nowrap>Stimulus:</td> <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>Picture:</th>
<th style="width:25%;%" scope="col" nowrap>Description:</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></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for s in stimulus_headers %} {% for s in stimulus_headers %}
{% for embody_picture in embody_questions %} {% for embody_picture in embody_questions %}
<tr> <tr>
{% if s.type == 'text' %} {% if s.type == 'text' %}
<td>{{ s.text }}</td> <td>{{ s.text }}</td>
{% elif s.type == 'picture' %} {% elif s.type == 'picture' %}
<td><img src="/{{ s.media }}" class="thumbnail" /></td> <td><img src="/{{ s.media }}" class="thumbnail" /></td>
{% elif s.type == 'video' %} {% elif s.type == 'video' %}
<td> <td>
<div class="embed-responsive embed-responsive-16by9 "> <div class="embed-responsive embed-responsive-16by9 ">
<iframe class="embed-responsive-item thumbnail" src="/{{ s.media }}" allowFullScreen></iframe> <iframe class="embed-responsive-item thumbnail" src="/{{ s.media }}" allowFullScreen></iframe>
</div> </div>
</td> </td>
{% elif s.type == 'audio' %} {% elif s.type == 'audio' %}
<td> <td>
<div class="embed-responsive embed-responsive-16by9 "> <div class="embed-responsive embed-responsive-16by9 ">
<iframe class="embed-responsive-item thumbnail" src="/{{ s.media }}" allowFullScreen></iframe> <audio class="embed-responsive-item thumbnail" controls>
</div> <source src="/{{ s.media }}">
</td> Your browser does not support the audio element.
{% else %} </audio>
<td>{{ s.text }}</td> </div>
{% endif %} </td>
{% else %}
<td><img src="{{ embody_picture.picture }}" class="thumbnail" /></td> <td>{{ s.text }}</td>
<td>{{ embody_picture.question }}</td> {% endif %}
<td> <td><img src="{{ embody_picture.picture }}" class="thumbnail" /></td>
<button data-value="{{ s.idpage }}-{{ embody_picture.idembody }}" class="btn btn-primary embody-get-drawing"> <td>{{ embody_picture.question }}</td>
<span class="spinner-border spinner-border-sm hidden"></span>
Draw <td>
</button> <button data-value="{{ s.idpage }}-{{ embody_picture.idembody }}" class="btn btn-primary embody-get-drawing">
</td> <span class="spinner-border spinner-border-sm hidden"></span>
Draw
</tr> </button>
{% endfor %} </td>
{% endfor %}
</tr>
{% endfor %}
{% endfor %}
</tbody> </tbody>
</table> </table>
<div class="progress hidden" id="plotted-image"> <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... --> <!-- Creating image... -->
</div> </div>
</div> </div>
...@@ -190,20 +196,20 @@ ...@@ -190,20 +196,20 @@
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
<th scope="col" nowrap>Participant</th> <th scope="col" nowrap>Participant</th>
{% for bg in bg_questions %} {% for bg in bg_questions %}
<th scope="col" nowrap>{{ bg.background_question }}</th> <th scope="col" nowrap>{{ bg.background_question }}</th>
{% endfor %} {% endfor %}
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{% for p in bg_answers_for_participants %} {% for p in bg_answers_for_participants %}
<tr> <tr>
<td>{{ p }}</td> <td>{{ p }}</td>
{% for bg_answer in bg_answers_for_participants[p] %} {% for bg_answer in bg_answers_for_participants[p] %}
<td align="center">{{ bg_answer }}</td> <td align="center">{{ bg_answer }}</td>
{% endfor %} {% endfor %}
</tr> </tr>
{% endfor %} {% endfor %}
...@@ -211,9 +217,9 @@ ...@@ -211,9 +217,9 @@
</tbody> </tbody>
</table> </table>
<script src="{{ url_for('static', filename='lib/js/socket.io.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/urls.js') }}"></script>
<script src="{{ url_for('static', filename='js/getDrawing.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='js/getCSV.js') }}"></script>
{% endblock %} {% endblock %}
\ No newline at end of file
...@@ -3,123 +3,134 @@ ...@@ -3,123 +3,134 @@
<div class="container stimulus"> <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' %} {% if session['type']=='text' %}
<div class="container text-center mt-5 pt-5"> <div class="container text-center mt-5 pt-5">
{% for page in pages.items %} {% for page in pages.items %}
<h{{ stimulus_size_text }} class="text-center mt-5"><br>{{ page.text }}</h{{ stimulus_size_text }}> <h{{ stimulus_size_text }} class="text-center mt-5"><br>{{ page.text }}</h{{ stimulus_size_text }}>
{% endfor %} {% endfor %}
</div> </div>
<br><br> <br><br>
{% endif %} {% endif %}
{% if session['type']=='picture' %} {% if session['type']=='picture' %}
<div class="stimulus col-{{stimulus_size}} mt-5 pt-5"> <div class="stimulus col-{{stimulus_size}} mt-5 pt-5">
{% for page in pages.items %} {% for page in pages.items %}
<img src="/{{ page.media }}" class="img-fluid"> <img src="/{{ page.media }}" class="img-fluid">
{% endfor %} {% endfor %}
</div> </div>
{% endif %} {% endif %}
{% if session['type']=='video' %} {% if session['type']=='video' %}
<div class="col-{{stimulus_size}} container stimulus mt-5 pt-5"> <div class="col-{{stimulus_size}} container stimulus mt-5 pt-5">
{% for page in pages.items %} {% for page in pages.items %}
<div class="embed-responsive embed-responsive-16by9"> <div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="/{{ page.media }}" allowfullscreen></iframe> <iframe class="embed-responsive-item" src="/{{ page.media }}" allowfullscreen></iframe>
</div>
{% endfor %}
</div> </div>
{% endfor %}
</div>
{% endif %} {% endif %}
{% if session['type']=='audio' %} {% if session['type']=='audio' %}
<div class="col-{{stimulus_size}} container stimulus mt-5 pt-5"> <div class="col-{{stimulus_size}} container stimulus mt-5 pt-5">
{% for page in pages.items %} {% for page in pages.items %}
<div class="embed-responsive embed-responsive-16by9"> <div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="/{{ page.media }}" allowfullscreen></iframe> <audio class="embed-responsive-item" controls>
</div> <source src="/{{ page.media }}">
{% endfor %} Your browser does not support the audio element.
</audio>
</div> </div>
{% endfor %}
</div>
{% endif %} {% endif %}
{% else %} {% else %}
{% if session['type']=='text' %} {% if session['type']=='text' %}
<div class="container text-center mt-5 pt-5"> <div class="container text-center mt-5 pt-5">
{% for page in pages.items %} {% for page in pages.items %}
<h{{ stimulus_size_text }} class="text-center mt-5"><br>{{ randomized_stimulus.text }}</h{{ stimulus_size_text }}> <h{{ stimulus_size_text }} class="text-center mt-5"><br>{{ randomized_stimulus.text }}
{% endfor %} </h{{ stimulus_size_text }}>
</div> {% endfor %}
<br><br> </div>
<br><br>
{% endif %} {% endif %}
{% if session['type']=='picture' %} {% if session['type']=='picture' %}
<div class="stimulus col-{{stimulus_size}} mt-5 pt-5"> <div class="stimulus col-{{stimulus_size}} mt-5 pt-5">
{% for page in pages.items %} {% for page in pages.items %}
<img src="/{{ randomized_stimulus.media }}" class="img-fluid"> <img src="/{{ randomized_stimulus.media }}" class="img-fluid">
{% endfor %} {% endfor %}
</div> </div>
{% endif %} {% endif %}
{% if session['type']=='video' %} {% if session['type']=='video' %}
<div class="col-{{stimulus_size}} container stimulus mt-5 pt-5"> <div class="col-{{stimulus_size}} container stimulus mt-5 pt-5">
{% for page in pages.items %} {% for page in pages.items %}
<div class="embed-responsive embed-responsive-16by9"> <div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="/{{ randomized_stimulus.media }}" allowfullscreen></iframe> <iframe class="embed-responsive-item" src="/{{ randomized_stimulus.media }}" allowfullscreen></iframe>
</div>
{% endfor %}
</div> </div>
{% endfor %}
</div>
{% endif %} {% endif %}
{% if session['type']=='audio' %} {% if session['type']=='audio' %}
<div class="col-{{stimulus_size}} container stimulus mt-5 pt-5"> <div class="col-{{stimulus_size}} container stimulus mt-5 pt-5">
{% for page in pages.items %} {% for page in pages.items %}
<div class="embed-responsive embed-responsive-16by9"> <div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="/{{ randomized_stimulus.media }}" allowfullscreen></iframe> <audio class="embed-responsive-item" controls>
</div> <source src="/{{ randomized_stimulus.media }}">
{% endfor %} Your browser does not support the audio element.
</audio>
</div> </div>
{% endfor %}
</div>
{% endif %} {% endif %}
{% endif %} {% endif %}
{% if form.__name__ == 'embody' %} {% if form.__name__ == 'embody' %}
<div class="col-4 mt-5 pt-5"> <div class="col-4 mt-5 pt-5">
<div class="canvas-container"> <div class="canvas-container">
<span class="canvas-info"></span> <span class="canvas-info"></span>
<canvas id="embody-canvas" class="crosshair" width="20" height="20" ></canvas> <canvas id="embody-canvas" class="crosshair" width="20" height="20"></canvas>
</div> </div>
{% for embody_question in embody_questions %} {% 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 }} /> <img id="idembody-{{embody_question.idembody}}"
{% endfor %} 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 %} {% 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> <p id="idquestion-{{ embody_question.idembody }}"
{% endfor %} 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> </div>
{% endif %} {% endif %}
</div> </div>
</div> </div>
<br> <br>
<h4 class="text-center">{{ rating_instruction }}</h4> <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"> <input id="canvas-data" type="hidden" value="" name="coordinates">
...@@ -139,29 +150,29 @@ ...@@ -139,29 +150,29 @@
<p>{{ _("Reload the page if canvas didn't appear") }} </p> <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> <p>{{ _('You can zoom in/out the page view by pressing ctrl+/ctrl- (Windows) or ⌘+/⌘- (Mac)') }} </p>
</div> </div>
</div> </div>
</form> </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' %} {% 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 category in form.categories1 %}
{% for scale in form.categories1[category] %} {% for scale in form.categories1[category] %}
<div class="row form-group mt-0 mb-0"> <div class="row form-group mt-0 mb-0">
<h6 class="col-3 text-right mt-0 mb-0"> <h6 class="col-3 text-right mt-0 mb-0">
{{ scale[0] }} {{ scale[0] }}
</h6> </h6>
<h6 class="col text-center mt-0 mb-0"> <h6 class="col text-center mt-0 mb-0">
<label for="customRange">{{ category[1] }}</label> <label for="customRange">{{ category[1] }}</label>
<input type="range" class="custom-range" id="customRange" name={{ category[0] }}> <input type="range" class="custom-range" id="customRange" name={{ category[0] }}>
</h6> </h6>
<h6 class="col-3 text-left mt-0 mb-0"> <h6 class="col-3 text-left mt-0 mb-0">
{{ scale[1] }} {{ scale[1] }}
</h6> </h6>
</div> </div>
{% endfor %} {% endfor %}
{% endfor %} {% endfor %}
<div class="form-row text-center"> <div class="form-row text-center">
<div class="col-12"> <div class="col-12">
...@@ -172,9 +183,9 @@ ...@@ -172,9 +183,9 @@
<br> <br>
<p>{{ _('You can zoom in/out the page view by pressing ctrl+/ctrl- (Windows) or ⌘+/⌘- (Mac)') }} </p> <p>{{ _('You can zoom in/out the page view by pressing ctrl+/ctrl- (Windows) or ⌘+/⌘- (Mac)') }} </p>
</div> </div>
</div> </div>
</form> </form>
{% endif %} {% endif %}
{% endblock %} {% 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