aiom_pack
Version:
Framework for interdependent (mcmc-like) behavioral experiments
77 lines (72 loc) • 3.23 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/categorization.css">
<script type = "text/javascript" src="/pkg-static/scripts/categorization.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>
</head>
<body>
<div id="instructions">
<div id="insContent">
<h3>Instruction - Categorization 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>
<div class="question">Which option best decribe this image?</div>
<div class="categorization-container">
<img class="stimuli" src="" alt="" height="128" width="128">
<div class="options">
<!-- add options here -->
</div>
<p class="confidence-text" style="font-weight: bold; font-size: 22px;">How confident are you in your choice above?</p>
<div class="confidence">
<!-- add confidence judgments here -->
</div>
</div>
</div>
<div id="progressBar"></div>
<script>
$(document).ready(function() {
show_instruction();
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();
}
loadParameters();
getChoice();
});
</script>
</body>
</html>