|
@@ -1,60 +1,87 @@
|
1
|
1
|
window.onload = function () {
|
2
|
2
|
var api_url = "https://captcheck.netsyms.com/api.php";
|
3
|
|
- var getJSON = function (url, callback) {
|
|
3
|
+
|
|
4
|
+ /* Add custom styles */
|
|
5
|
+ var styles = document.createElement('style');
|
|
6
|
+ /* Remove newlines/comments from captcheck.css and put it here */
|
|
7
|
+ styles.innerHTML = ".captcheck_box,.captcheck_label_message,.captcheck_label_message b{color:#000;font-family:Ubuntu,Arial,sans-serif}.captcheck_box{border:1px solid #e0e0e0;border-radius:3px;display:inline-block;padding:3px;margin:5px 2px 5px 1px;background-color:#f5f5f5}.captcheck_answer_label>input{visibility:hidden;position:absolute}.captcheck_answer_label>input+img{cursor:pointer;border:2px solid transparent;border-radius:3px;min-width:32px;width:18%;max-width:64px}.captcheck_answer_label>input:checked+img{cursor:pointer;border:2px solid #424242;border-radius:3px}.captcheck_error_message{color:red}.captcheck_question_image{display:initial}.captcheck_question_access{display:none}.captcheck_alt_question_button{float:right;font-size:80%;cursor:pointer;color:inherit;text-decoration:inherit}.captcheck_answer_images{display:initial}.captcheck_answer_access{display:none}";
|
|
8
|
+ document.body.appendChild(styles);
|
|
9
|
+
|
|
10
|
+ /* Loop over all the CAPTCHA containers on the page, setting up a different CAPTCHA in each */
|
|
11
|
+ Array.prototype.forEach.call(document.getElementsByClassName("captcheck_container"), function (container) {
|
4
|
12
|
var xhr = new XMLHttpRequest();
|
5
|
|
- xhr.open('GET', url, true);
|
|
13
|
+ xhr.open('GET', api_url + "?action=new", true);
|
6
|
14
|
xhr.onreadystatechange = function () {
|
7
|
15
|
if (this.readyState == 4) {
|
8
|
|
- callback(this.status, this.responseText);
|
9
|
|
- }
|
10
|
|
- };
|
11
|
|
- xhr.send();
|
12
|
|
- };
|
13
|
|
- getJSON(api_url + "?action=new", function (status, json) {
|
14
|
|
- /* Add custom styles */
|
15
|
|
- var styles = document.createElement('style');
|
16
|
|
- /* Remove newlines/comments from captcheck.css and put it here */
|
17
|
|
- styles.innerHTML = ".captcheck_box {font-family: Ubuntu, Arial, sans-serif; color: black; border: 1px solid #e0e0e0; border-radius: 3px; display: inline-block; padding: 3px; margin: 5px 2px 5px 1px; background-color: #f5f5f5;} .captcheck_label_message, .captcheck_label_message b {color: black; font-family: Ubuntu, Arial, sans-serif;} .captcheck_answer_label > input {visibility: hidden; position: absolute;} .captcheck_answer_label > input + img {cursor: pointer; border: 2px solid transparent; border-radius: 3px; min-width: 32px; width: 18%; max-width: 64px;} .captcheck_answer_label > input:checked + img {cursor: pointer; border: 2px solid #424242; border-radius: 3px;} .captcheck_error_message {color: red;}";
|
18
|
|
- document.body.appendChild(styles);
|
|
16
|
+ var status = this.status;
|
|
17
|
+ var json = this.responseText;
|
|
18
|
+ /* Create captcha div */
|
|
19
|
+ var captcha = document.createElement("div");
|
|
20
|
+ captcha.setAttribute("class", "captcheck_box");
|
|
21
|
+ container.appendChild(captcha);
|
19
|
22
|
|
20
|
|
- /* Get captcha container div */
|
21
|
|
- var container = document.getElementById("captcheck_container");
|
22
|
|
- /* Create captcha div */
|
23
|
|
- var captcha = document.createElement("div");
|
24
|
|
- captcha.setAttribute("class", "captcheck_box");
|
25
|
|
- container.appendChild(captcha);
|
26
|
|
-
|
27
|
|
- if (status == 200) {
|
28
|
|
- var data = JSON.parse(json);
|
29
|
|
- /* Create answer buttons */
|
30
|
|
- var answers = "";
|
31
|
|
- for (var i = 0, len = data.answers.length; i < len; i++) {
|
32
|
|
- var src = api_url + "?action=img&s=" + data.session + "&c=" + data.answers[i];
|
33
|
|
- answers += "<span class='captcheck_answer_label' onclick='chooseAnswer(\"" + data.answers[i] + "\")'><input id='captcheck_answer_" + data.answers[i] + "' type='radio' name='captcheck_selected_answer' value='" + data.answers[i] + "' /><img src='" + src + "' /></span>";
|
34
|
|
- }
|
35
|
|
- var answer_div = document.createElement("div");
|
36
|
|
- answer_div.innerHTML = answers;
|
37
|
|
- /* Create question */
|
38
|
|
- var question_div = document.createElement("div");
|
39
|
|
- question_div.setAttribute("class", "captcheck_label_message");
|
40
|
|
- question_div.innerHTML = "Click on the <b>" + data.question + "</b>:";
|
|
23
|
+ if (status == 200) {
|
|
24
|
+ var data = JSON.parse(json);
|
|
25
|
+ // ID prefix to use for this instance
|
|
26
|
+ var idp = data.id_prefix;
|
|
27
|
+ /* Create answer buttons */
|
|
28
|
+ var answers = "<div class='captcheck_answer_images' id='captcheck_" + idp + "_answer_images'>";
|
|
29
|
+ for (var i = 0, len = data.answers.length; i < len; i++) {
|
|
30
|
+ var src = api_url + "?action=img&s=" + data.session + "&c=" + data.answers[i];
|
|
31
|
+ answers += "<a class='captcheck_answer_label' href='' tabindex='0' onClick='chooseAnswer(\"" + idp + "\",\"" + data.answers[i] + "\"); return false;' onEnter='chooseAnswer(\"" + idp + "\",\"" + data.answers[i] + "\"); return false;'><input id='captcheck_" + idp + "_answer_" + data.answers[i] + "' type='radio' name='captcheck_selected_answer' value='" + data.answers[i] + "' /><img src='" + src + "' /></a>";
|
|
32
|
+ }
|
|
33
|
+ answers += "</div>";
|
|
34
|
+ var answer_div = document.createElement("div");
|
|
35
|
+ answer_div.innerHTML = answers + "<div class='captcheck_answer_access' id='captcheck_" + idp + "_answer_access'></div>";
|
|
36
|
+ /* Create question */
|
|
37
|
+ var question_div = document.createElement("div");
|
|
38
|
+ question_div.setAttribute("class", "captcheck_label_message");
|
|
39
|
+ question_div.setAttribute("id", "captcheck_" + idp + "_label_message")
|
|
40
|
+ question_div.innerHTML = "<span class='captcheck_question_image' id='captcheck_" + idp + "_question_image'>" + data.question_i + "</span><span class='captcheck_question_access' id='captcheck_" + idp + "_question_access'>" + data.question_a + "</span><a href='' class='captcheck_alt_question_button' onClick='switchMode(\"" + idp + "\"); return false;' onEnter='switchMode(\"" + idp + "\"); return false;' id='captcheck_" + idp + "_alt_question_button' aria-label='Switch between image and text question' tabindex='0'>> Text mode</a>";
|
41
|
41
|
|
42
|
|
- /* Add question and answers */
|
43
|
|
- captcha.appendChild(question_div);
|
44
|
|
- captcha.appendChild(answer_div);
|
|
42
|
+ /* Add question and answers */
|
|
43
|
+ captcha.appendChild(question_div);
|
|
44
|
+ captcha.appendChild(answer_div);
|
45
|
45
|
|
46
|
|
- /* Add hidden session ID element */
|
47
|
|
- var skey_input = document.createElement("span");
|
48
|
|
- skey_input.innerHTML = "<input type='hidden' name='captcheck_session_code' value='" + data.session + "' />";
|
49
|
|
- captcha.appendChild(skey_input);
|
50
|
|
- } else {
|
51
|
|
- /* Add error message */
|
52
|
|
- captcha.innerHTML = "<span class='captcheck_error_message'>There was a problem loading the CAPTCHA.</span>";
|
53
|
|
- }
|
|
46
|
+ /* Add hidden session ID element */
|
|
47
|
+ var skey_input = document.createElement("span");
|
|
48
|
+ skey_input.innerHTML = "<input type='hidden' name='captcheck_session_code' value='" + data.session + "' />";
|
|
49
|
+ captcha.appendChild(skey_input);
|
|
50
|
+ } else {
|
|
51
|
+ /* Add error message */
|
|
52
|
+ captcha.innerHTML = "<span class='captcheck_error_message'>There was a problem loading the CAPTCHA.</span>";
|
|
53
|
+ }
|
|
54
|
+ }
|
|
55
|
+ };
|
|
56
|
+ xhr.send();
|
54
|
57
|
});
|
55
|
58
|
}
|
56
|
59
|
|
57
|
|
-function chooseAnswer(ans) {
|
58
|
|
- var box = document.getElementById("captcheck_answer_" + ans);
|
|
60
|
+function chooseAnswer(idp, ans) {
|
|
61
|
+ var box = document.getElementById("captcheck_" + idp + "_answer_" + ans);
|
59
|
62
|
box.checked = true;
|
|
63
|
+ return false;
|
|
64
|
+}
|
|
65
|
+
|
|
66
|
+function switchMode(idp) {
|
|
67
|
+ var switch_label = document.getElementById("captcheck_" + idp + "_alt_question_button");
|
|
68
|
+ var img_q = document.getElementById("captcheck_" + idp + "_question_image");
|
|
69
|
+ var acc_q = document.getElementById("captcheck_" + idp + "_question_access");
|
|
70
|
+ var img_a = document.getElementById("captcheck_" + idp + "_answer_images");
|
|
71
|
+ var acc_a = document.getElementById("captcheck_" + idp + "_answer_access");
|
|
72
|
+ if (switch_label.innerHTML == "> Text mode") {
|
|
73
|
+ switch_label.innerHTML = "> Image mode";
|
|
74
|
+ img_q.style.display = "none";
|
|
75
|
+ acc_q.style.display = "initial";
|
|
76
|
+ img_a.style.display = "none";
|
|
77
|
+ acc_a.style.display = "initial";
|
|
78
|
+ acc_a.innerHTML = "<input type='text' name='captcheck_selected_answer' aria-label='Type your answer here.' autocomplete='off' autofill='off'/>";
|
|
79
|
+ } else {
|
|
80
|
+ switch_label.innerHTML = "> Text mode";
|
|
81
|
+ img_q.style.display = "initial";
|
|
82
|
+ acc_q.style.display = "none";
|
|
83
|
+ img_a.style.display = "initial";
|
|
84
|
+ acc_a.style.display = "none";
|
|
85
|
+ acc_a.innerHTML = "";
|
|
86
|
+ }
|
60
|
87
|
}
|