first commit

Task1/Captcha.html

@@ -0,0 +1,88 @@
+{{ 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 }}
+
+
+