diff --git a/app/experiment/templates/experiment_statistics.html b/app/experiment/templates/experiment_statistics.html
index 20543144aff734ffef78da95aaedbff1a70df4ad..76b2e9edb2a6f0a0afcc6a6cbf341090860e6415 100644
--- a/app/experiment/templates/experiment_statistics.html
+++ b/app/experiment/templates/experiment_statistics.html
@@ -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
diff --git a/app/task/templates/task.html b/app/task/templates/task.html
index 9caa5513056fa067252de3f0fc11ef7456a6439f..1aafaeea4cae5afc73b768f1ab1a750dd7c7f0a4 100644
--- a/app/task/templates/task.html
+++ b/app/task/templates/task.html
@@ -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