113 lines
3.6 KiB
HTML
113 lines
3.6 KiB
HTML
{% extends 'participant_index.html' %}
|
|
{% block content %}
|
|
<link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
|
|
<div id="main-div" class="outer">
|
|
<div id="overlay">
|
|
<span id="overlay_crosshair">✚</span>
|
|
</div>
|
|
<div id="instructions">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<h2>Instructions</h2>
|
|
<p>
|
|
In this test, you will be presented with excerpts from a story.
|
|
You will be asked questions about the content of the excerpts
|
|
at the end of the test.
|
|
</p>
|
|
<button type="button" href="#" id="instr_continue" class="Btn Btn-primary">Continue</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="question_overlay">
|
|
<div class="card">
|
|
<div class="card-body">
|
|
<p id="question"></p>
|
|
<div class="form-group">
|
|
<label for="answer">Answer:</label>
|
|
<textarea class="form-control" rows="5" id="answer"></textarea>
|
|
</div>
|
|
<button type="button" href="#" id="submit_response" class="Btn Btn-primary">Submit</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
$(document).ready(function(){
|
|
jQuery.expr[':'].contains = function(a, i, m) {
|
|
return jQuery(a).text().toUpperCase()
|
|
.indexOf(m[3].toUpperCase()) >= 0;
|
|
};
|
|
// Initialise socketio with a namespace called "main"
|
|
var socket = io.connect(location.protocol + '//' + document.domain + ':' + location.port + '/main');
|
|
var loading = true;
|
|
var part_ready = false;
|
|
waitingDialog.show('Loading... Please wait');
|
|
|
|
function displayInstructions() {
|
|
$("#instructions").css("display", "table-cell");
|
|
$("#instructions").fadeIn();
|
|
waitingDialog.hide();
|
|
}
|
|
|
|
function hideInstructions() {
|
|
$("#instructions").css("display", "none");
|
|
$("#instructions").fadeOut();
|
|
if(loading) {
|
|
waitingDialog.show('Loading... Please wait');
|
|
}
|
|
}
|
|
|
|
$('#submit_response').click(function(event) {
|
|
var text = $('#answer').val();
|
|
socket.emit("submit_response", data=text);
|
|
});
|
|
|
|
$('#instr_continue').click(function(event) {
|
|
hideInstructions();
|
|
part_ready = true;
|
|
socket.emit("part_ready")
|
|
on()
|
|
});
|
|
|
|
socket.on('display_instructions', function(msg) {
|
|
displayInstructions();
|
|
});
|
|
|
|
socket.on('set_question', function(msg) {
|
|
$('#question').text("Question: " + msg);
|
|
});
|
|
|
|
socket.on('test_ready', function(msg) {
|
|
loading = false;
|
|
waitingDialog.hide();
|
|
});
|
|
|
|
socket.on('stim_playing', function(msg) {
|
|
on()
|
|
});
|
|
|
|
socket.on('stim_done', function(msg) {
|
|
off()
|
|
});
|
|
|
|
function on() {
|
|
$("#overlay").css("display", "table-cell");
|
|
$("#overlay_crosshair").css("display", "inline");
|
|
$("#overlay").fadeIn();
|
|
$("#overlay_crosshair").fadeIn();
|
|
}
|
|
|
|
function off() {
|
|
$("#overlay").fadeOut();
|
|
}
|
|
|
|
// Catch message when asynchronous process is complete
|
|
socket.on('processing-complete', function(msg) {
|
|
alert("Story stimulus processing complete!")
|
|
window.location.href = '/eeg/train/story/complete';
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|