duartegoncalves/experiment-template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

first commit

Browse source
This commit is contained in:
duartegoncalvesds 2026-03-12 21:05:38 +00:00
commit 73fc2121bf
30 changed files with 13308 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

225
Task1/TaskFeedback.html Normal file
View file

@ -0,0 +1,225 @@
{{ extends "_static/global/Page.html" }}
{{ load otree static }}
{{ block title }}
{{ if player.practice == 1 }}
Practice Round {{ practice_round_number }} out of {{ C.NUM_PRACTICE_ROUNDS }}
{{ endif }}
{{ if player.practice == 0 }}
Round {{ payment_round_number }} out of {{ C.NUM_PAYMENT_ROUNDS }}
{{ endif }}
{{ endblock }}
{{ block scripts }}
<script>
// (A) PREVENT CONTEXT MENU FROM OPENING
window.addEventListener("contextmenu", evt => evt.preventDefault(), false);
// (B) PREVENT CLIPBOARD COPYING
window.addEventListener("copy", evt => {
evt.clipboardData.setData("text/plain", "Copying is not allowed on this page");
evt.preventDefault();
}, false);
window.addEventListener("load", (event) => {
let startTime,submitTime
startTime=Date.now()
document.getElementById("instructions_clicked").value = 0
const div = document.querySelectorAll('div')
div.forEach(function(x){
if (x.classList.contains('otree-form-errors')){
x.innerHTML="Please make your choice and guess."
}
})
// SLIDER
const slider = document.getElementById('belief_slider');
const leftSpan = document.getElementById('left-value');
const rightSpan = document.getElementById('right-value');
const hidden = document.getElementById('id_belief_1');
const sliderContainer = document.getElementById('slider-container');
if (slider) {
slider.addEventListener('input', function() {
// Show the thumb on first move
sliderContainer.classList.remove('empty-slider');
sliderContainer.classList.add('interacted');
// Update text and hidden input
let val = parseFloat(this.value);
leftSpan.innerText = val.toFixed(1);
rightSpan.innerText = (100 - val).toFixed(1);
hidden.value = val.toFixed(1);
});
}
document.getElementById("ok_button").addEventListener('click', function () {
submitTime = Date.now()
if (document.getElementById("time_spent").value) {
document.getElementById("time_spent").value
} else {
document.getElementById("time_spent").value = submitTime - startTime;
}
document.getElementById("form").submit();
})
});
function show_Instructions() {
document.getElementById("instructions_clicked").value = 1
let elem1 = document.getElementById("instructions_button"), text1 = elem1.innerText;
if (text1 === "Show Instructions"){
elem1.innerHTML = "Hide Instructions";}
else{
elem1.innerHTML = "Show Instructions";
}
let x1 = document.getElementById("Instructions");
if (x1.style.display === "none") {
x1.style.display = "block";
}
else {
x1.style.display = "none";
}
};
// Delay choices
setTimeout(function () {
document.getElementById("interface").style.visibility = "visible";
document.getElementById("ok_button").style.visibility = "visible";
document.getElementById("instructions_button").style.visibility = "visible";
}, 0);
// Feedback
document.getElementById("id_choice-0").disabled = true;
document.getElementById("id_choice-1").disabled = true;
document.getElementById("belief_slider").disabled = true;
document.getElementById("belief_slider").value = js_vars.belief_1;
document.getElementById("left-value").innerText = parseFloat(js_vars.belief_1).toFixed(1);
document.getElementById("right-value").innerText = (100 - parseFloat(js_vars.belief_1)).toFixed(1);
if (js_vars.decision == 0){
document.getElementById("id_choice-0").checked = true;
}
if (js_vars.decision == 1){
document.getElementById("id_choice-1").checked = true;
}
</script>
{{ endblock }}
{{ block styles }}
<style>
/* Slider No-Value Start */
.empty-slider input[type=range]::-webkit-slider-thumb { visibility: hidden; }
.empty-slider input[type=range]::-moz-range-thumb { visibility: hidden; }
.interacted input[type=range]::-webkit-slider-thumb { visibility: visible; }
.interacted input[type=range]::-moz-range-thumb { visibility: visible; }
.form-range { width: 100%; cursor: pointer; }
</style>
{{ endblock }}
{{ block content }}
<input name="instructions_clicked" type="hidden" id="instructions_clicked">
<input name="time_spent" type="hidden" id="time_spent">
<br>
<div class="container">
<div class="center">
<p>
Asset's worth: {{ player.value | to0 }} points.
<br>
Your baseline points: {{ player.cost | to1 }}.
<br>
Opponent's baseline points: a random number between 0 and 100, all equally likely.
<br>
You will not know your opponent's baseline points and your opponent will not know your baseline points.
</p>
</div>
</div>
<br><br><br>
<div id="interface" style="visibility: hidden;">
<p>Which option do you choose?</p>
<table id="alternatives" class="center">
<tr>
<td style="width:10%">
<input class="form-check-input" type="radio" id="id_choice-0" name="decision" required="" value="0">
</td>
<td>Option A: Asset's worth if opponent chooses Option B.</td>
</tr>
<tr>
<td style="width:10%">
<input class="form-check-input" type="radio" id="id_choice-1" name="decision" required="" value="1">
</td>
<td>Option B: Baseline points.</td>
</tr>
</table>
<br><br>
<p>
What do you think is the probability that your opponent chooses each option:
</p>
<div class="center" style="max-width: 600px; margin: 40px auto; margin-top: 0px;">
<!-- <p>Please select a value by clicking on the bar below:</p> -->
<div id="slider-container" class="interacted">
<div style="display:flex; align-items:center; justify-content:space-between; gap:12px;">
<div style="width:80px; text-align:left;">
Option A <br>
<span id="left-value">--</span>%
<!-- <br>Asset<br> -->
</div>
<div style="flex:1;">
<input type="range" class="form-range" id="belief_slider" min="0" max="100" step="0.1" value="50">
</div>
<div style="width:80px; text-align:right;">
Option B <br>
<span id="right-value">--</span>%
<!-- <br>Opponent's <br> Baseline Points -->
</div>
</div>
</div>
<input type="hidden" name="belief_1" id="id_belief_1" value="">
</div>
<div class="feedback-text">
<p>
In this practice round, you chose Option {{ if player.decision == 0 }}A{{ endif }}{{ if player.decision == 1}}B{{ endif }} and guessed that your opponent chose Option A with {{ belief_A | to1 }}% probability and Option B with {{ belief_B | to1 }}% probability.
</p>
<p>
Recall that only one round is selected for payment and, in that round, only either your choice or your guess counts toward your payment.
</p>
<p>
<ul>
<li>
If your choice in this round were chosen for payment, you would get the {{ player.session.config.currency_symbol }}{{ player.session.config.bonus | to2 }} bonus with {{ if player.decision == 0 }}0% if your opponent chose Option A and {{ player.value | to0 }}% probability if your opponent chose Option B{{ endif }}{{ if player.decision == 1 }}{{ player.cost | to1 }}% probability, regardless of your opponent's choice{{ endif }}.
</li>
<li>
If your guess in this round were chosen for payment, you would get the {{ player.session.config.currency_symbol }}{{ player.session.config.bonus | to2 }} bonus with {{ paymentbelief_A | to1 }}% if your opponent chose Option A and {{ paymentbelief_B | to1 }}% if your opponent chose Option B.
</li>
</ul>
It is always best to submit your best guess to maximise the probability of getting paid the bonus.
</p>
<br>
<p>
Click 'Next' to see your instructions for this study.
</p>
</div>
{{ if player.practice == 1 }}
<div class="container"><div class="centering"><button type="button" class="btn btn-primary" style="visibility: hidden;" id="ok_button">Next</button></div></div>
{{ endif }}
<div class="container">
<div class="centering">
<button type="button" style="visibility: hidden;" class="btn btn-secondary" id="instructions_button" onclick="show_Instructions()">Show Instructions</button>
</div>
</div>
<div id="Instructions" style="display: none" class="card bg-light instructions">
<div class="card-body">
{{ include "Task1/InstructionsBase.html"}}
</div>
</div>
</div>
{{ endblock }}