aiom_pack
Version:
Framework for interdependent (mcmc-like) behavioral experiments
108 lines (101 loc) • 4.06 kB
HTML
<!-- because of failures in the attention checks -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Finish</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/1.3.4/axios.min.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>
<link rel="icon" type="image/png" href="./images/favicon.png"/>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
#redirect_button {
text-align: center;
margin-top: 20px;
}
button {
padding: 10px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
cursor: pointer;
background-color: #0056b3;
}
.container {
text-align: center;
width: 80%;
padding: 20px;
background-color: white;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
align-items: center;
max-height: 90vh;
overflow-y: auto;
}
p {
font-size: medium;
line-height: 1.8;
text-align: left;
}
</style>
<link rel="stylesheet" href="./css/style.css">
<script type = "text/javascript" src="./scripts/utils.js"></script>
</head>
<body>
<div class="container">
<h1>Debrief</h1>
<p>
Thank you for participating! This research study aims to identify human's category representations of facial affect. Your decisions made in the experiment will be used to infer what sort of faces people would perceive as different emotions, which is a key step toward developing a better understanding of how people learn, form memories, and make decisions. <br><br>
After reviewing your data quickly and considering our research needs, we are unable to move you forward to the next part of the study. Please be aware that this is solely for the purpose of our research. We will approve your submission. <br><br>
Please follow the link below to complete the experiment.
</p>
</div>
<button id="redirect_button" style="margin-top: 20px;">Complete</button>
<script>
function remove_cookie() {
const cookies = Cookies.get();
for (name in cookies) Cookies.remove(name);
}
function complete_redirect(prolific, status) {
axios.get('/api/complete_redirect', {
headers: {
'ID': Cookies.get('pid'),
'Status': status,
'study_id': Cookies.get('study_id')
},
})
.then(response => {
remove_cookie();
if (prolific === 'true') window.location.href = response.data.completionUrl;
else alert('You can close this page now.');
})
.catch(error => {
console.error('Error sending completion request:', error);
});
}
$(document).ready(function() {
$('#redirect_button').on('click', function() {
complete_redirect(ENV.prolific, 'FAILED_ATTENTION_CHECK');
});
})
</script>
</body>
</html>