88 lines
2.9 KiB
HTML
88 lines
2.9 KiB
HTML
{{ extends "_static/global/Page.html" }}
|
|
{{ load otree static }}
|
|
|
|
{{ block title }}
|
|
Bot Detection
|
|
{{ endblock }}
|
|
{{ block styles}}
|
|
<style>
|
|
#timer_display {
|
|
font-size: 2.2rem;
|
|
font-weight: 600;
|
|
color: #333;
|
|
position: fixed;
|
|
bottom: 1rem;
|
|
right: 1rem;
|
|
}
|
|
</style>
|
|
|
|
{{ endblock }}
|
|
{{ block scripts}}
|
|
<script src="{{ static 'js/vue.js' }}"></script>
|
|
<script src="{{ static 'js/lodash.min.js' }}"></script>
|
|
<script>
|
|
var vm = new Vue({
|
|
el: '#main_container',
|
|
delimiters: ['${', '}'],
|
|
data: {
|
|
attempt: {{ attempt }},
|
|
time_now: null,
|
|
start_time: null,
|
|
end_time: null,
|
|
time_limit: {{ max_captcha_time }},
|
|
time_until_end: {{ max_captcha_time }},
|
|
},
|
|
computed: {
|
|
time_until_end_display: function () {
|
|
s = _.clone(this.time_until_end)
|
|
if (s>=60) {return (s-(s%=60))/60+(9<s?':':':0')+s}
|
|
else if (s>=0) {return s}
|
|
else {return '0'}
|
|
}
|
|
},
|
|
mounted: function () {
|
|
this.start_time = _.now()/1000
|
|
this.end_time = this.start_time + this.time_limit
|
|
|
|
window.setInterval(() => {
|
|
this.time_now = _.now()/1000;
|
|
this.time_until_end = (this.end_time - this.time_now).toFixed(0);
|
|
if (this.time_until_end <= 0) {
|
|
if (document.querySelectorAll("input[type=text]")[0].value == "") {
|
|
document.querySelectorAll("input[type=text]")[0].value = "NULL TIMEOUT"
|
|
}
|
|
document.getElementById("submit_button").click();
|
|
}
|
|
}
|
|
, 1000)
|
|
},
|
|
})
|
|
</script>
|
|
{{ endblock }}
|
|
|
|
{{ block content }}
|
|
<div id="main_container" v-cloak>
|
|
<br>
|
|
<div id="captcha">
|
|
<h3>Bot Detection - Attempt ${attempt}</h3>
|
|
<p>
|
|
Type the following word or phrase into the box below, then press 'Next'. Answers are not case-sensitive.
|
|
<br>
|
|
You have three attempts. If you fail all three attempts, the task will end and you will not be paid.
|
|
<br>
|
|
You have one minute per attempt.
|
|
</p>
|
|
<div id="captcha_image">
|
|
<img src="{{ static image_path }}" style='width:300px;'/>
|
|
</div>
|
|
<br>
|
|
{{ formfields }}
|
|
<button class="btn btn-primary" id="submit_button">Next</button>
|
|
</div>
|
|
<div id="timer_display"><span>${time_until_end_display}</span></div>
|
|
</div>
|
|
|
|
{{ endblock }}
|
|
|
|
|
|
|