225 lines
No EOL
9.2 KiB
HTML
225 lines
No EOL
9.2 KiB
HTML
{{ 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 }} |