aiom
Version:
A Framework for interdependent (mcmc-like) behavioral experiments
79 lines (75 loc) • 3.31 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" href="/pkg-static/images/favicon.png"/>
<title>Experiment in progress!</title>
<link rel="stylesheet" href="/pkg-static/css/experiment_ui.css">
<script type = "text/javascript" src="/pkg-static/scripts/blockwise-MCMCP.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@3.0.5/dist/js.cookie.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
const ENV = {instruction_text: "/exp-static/main_instruction.html"};
</script>
</head>
<body>
<div id="instructions">
<div id="insContent">
<h3>Instruction - Decision-making task</h3>
<p style="line-height: 1.8;"></p>
<hr style="border: 1px solid #ccc; margin-top: 100px; width: 100%;">
<div style="margin-top: 10px;">
<button id="consentButton">Proceed</button>
<!-- <button id="declineButton">I decline!</button> -->
</div>
</div>
</div>
<div class="container">
<div id="rest">
<div id="restContent">
<p></p>
<button id="continueButton">Back to the task</button>
</div>
</div>
<p class="question">Which?</p>
<div class="options-container">
<div id="choice_left" class="option">
<img class="stimuli_left" src="" alt="" height="128" width="128" onclick="sendChoice(0)">
<!-- <button id="button_left">Select Option 1</button> -->
</div>
<div id="choice_right" class="option">
<img class="stimuli_right" src="" alt="" height="128" width="128" onclick="sendChoice(1)">
<!-- <button id="button_right">Select Option 2</button> -->
</div>
</div>
</div>
<div id="progressBar"></div>
<script>
function show_instruction() {
return $.Deferred(function(deferred) {
$('#insContent p').load(`${ENV.instruction_text}`, function(response, status, xhr) {
if (status == "error") {
$("#insContent p").html("Sorry, there was an error loading the instruction.");
}
});
$("#instructions").css("display", "flex");
// Wait for the user to click "Continue"
$("#consentButton").on("click", function() {
$("#instructions").css("display", "none"); // Hide the modal
deferred.resolve(); // Continue the script
});
// $("#declineButton").on("click", function() {
// window.location.href = 'categorization_finished';
// });
}).promise();
}
$(document).ready(function() {
show_instruction();
load_parameters();
getChoice();
});
</script>
</body>
</html>