forked from Netsyms/Captcheck
Add accessible format, add support for multiple CAPTCHAS on a page (use class instead of id for container)
parent
f61e08d699
commit
a62d1b85e0
@ -1 +1 @@
|
||||
function chooseAnswer(e){var a=document.getElementById("captcheck_answer_"+e);a.checked=!0}window.onload=function(){var e="https://captcheck.netsyms.com/api.php",a=function(e,a){var n=new XMLHttpRequest;n.open("GET",e,!0),n.onreadystatechange=function(){4==this.readyState&&a(this.status,this.responseText)},n.send()};a(e+"?action=new",function(a,n){var c=document.createElement("style");c.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}",document.body.appendChild(c);var t=document.getElementById("captcheck_container"),s=document.createElement("div");if(s.setAttribute("class","captcheck_box"),t.appendChild(s),200==a){for(var r=JSON.parse(n),i="",o=0,p=r.answers.length;p>o;o++){var d=e+"?action=img&s="+r.session+"&c="+r.answers[o];i+="<span class='captcheck_answer_label' onclick='chooseAnswer(\""+r.answers[o]+"\")'><input id='captcheck_answer_"+r.answers[o]+"' type='radio' name='captcheck_selected_answer' value='"+r.answers[o]+"' /><img src='"+d+"' /></span>"}var l=document.createElement("div");l.innerHTML=i;var h=document.createElement("div");h.setAttribute("class","captcheck_label_message"),h.innerHTML="Click on the <b>"+r.question+"</b>:",s.appendChild(h),s.appendChild(l);var u=document.createElement("span");u.innerHTML="<input type='hidden' name='captcheck_session_code' value='"+r.session+"' />",s.appendChild(u)}else s.innerHTML="<span class='captcheck_error_message'>There was a problem loading the CAPTCHA.</span>"})};
|
||||
function chooseAnswer(e,t){var a=document.getElementById("captcheck_"+e+"_answer_"+t);return a.checked=!0,!1}function switchMode(e){var t=document.getElementById("captcheck_"+e+"_alt_question_button"),a=document.getElementById("captcheck_"+e+"_question_image"),c=document.getElementById("captcheck_"+e+"_question_access"),n=document.getElementById("captcheck_"+e+"_answer_images"),s=document.getElementById("captcheck_"+e+"_answer_access");"> Text mode"==t.innerHTML?(t.innerHTML="> Image mode",a.style.display="none",c.style.display="initial",n.style.display="none",s.style.display="initial",s.innerHTML="<input type='text' name='captcheck_selected_answer' aria-label='Type your answer here.' autocomplete='off' autofill='off'/>"):(t.innerHTML="> Text mode",a.style.display="initial",c.style.display="none",n.style.display="initial",s.style.display="none",s.innerHTML="")}window.onload=function(){var e="https://captcheck.netsyms.com/api.php",t=document.createElement("style");t.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}",document.body.appendChild(t),Array.prototype.forEach.call(document.getElementsByClassName("captcheck_container"),function(t){var a=new XMLHttpRequest;a.open("GET",e+"?action=new",!0),a.onreadystatechange=function(){if(4==this.readyState){var a=this.status,c=this.responseText,n=document.createElement("div");if(n.setAttribute("class","captcheck_box"),t.appendChild(n),200==a){for(var s=JSON.parse(c),i=s.id_prefix,r="<div class='captcheck_answer_images' id='captcheck_"+i+"_answer_images'>",o=0,l=s.answers.length;l>o;o++){var p=e+"?action=img&s="+s.session+"&c="+s.answers[o];r+="<a class='captcheck_answer_label' href='' tabindex='0' onClick='chooseAnswer(\""+i+'","'+s.answers[o]+"\"); return false;' onEnter='chooseAnswer(\""+i+'","'+s.answers[o]+"\"); return false;'><input id='captcheck_"+i+"_answer_"+s.answers[o]+"' type='radio' name='captcheck_selected_answer' value='"+s.answers[o]+"' /><img src='"+p+"' /></a>"}r+="</div>";var d=document.createElement("div");d.innerHTML=r+"<div class='captcheck_answer_access' id='captcheck_"+i+"_answer_access'></div>";var _=document.createElement("div");_.setAttribute("class","captcheck_label_message"),_.setAttribute("id","captcheck_"+i+"_label_message"),_.innerHTML="<span class='captcheck_question_image' id='captcheck_"+i+"_question_image'>"+s.question_i+"</span><span class='captcheck_question_access' id='captcheck_"+i+"_question_access'>"+s.question_a+"</span><a href='' class='captcheck_alt_question_button' onClick='switchMode(\""+i+"\"); return false;' onEnter='switchMode(\""+i+"\"); return false;' id='captcheck_"+i+"_alt_question_button' aria-label='Switch between image and text question' tabindex='0'>> Text mode</a>",n.appendChild(_),n.appendChild(d);var h=document.createElement("span");h.innerHTML="<input type='hidden' name='captcheck_session_code' value='"+s.session+"' />",n.appendChild(h)}else n.innerHTML="<span class='captcheck_error_message'>There was a problem loading the CAPTCHA.</span>"}},a.send()})};
|
@ -1,60 +1,87 @@
|
||||
window.onload = function () {
|
||||
var api_url = "https://captcheck.netsyms.com/api.php";
|
||||
var getJSON = function (url, callback) {
|
||||
|
||||
/* Add custom styles */
|
||||
var styles = document.createElement('style');
|
||||
/* Remove newlines/comments from captcheck.css and put it here */
|
||||
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}";
|
||||
document.body.appendChild(styles);
|
||||
|
||||
/* Loop over all the CAPTCHA containers on the page, setting up a different CAPTCHA in each */
|
||||
Array.prototype.forEach.call(document.getElementsByClassName("captcheck_container"), function (container) {
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', url, true);
|
||||
xhr.open('GET', api_url + "?action=new", true);
|
||||
xhr.onreadystatechange = function () {
|
||||
if (this.readyState == 4) {
|
||||
callback(this.status, this.responseText);
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
};
|
||||
getJSON(api_url + "?action=new", function (status, json) {
|
||||
/* Add custom styles */
|
||||
var styles = document.createElement('style');
|
||||
/* Remove newlines/comments from captcheck.css and put it here */
|
||||
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;}";
|
||||
document.body.appendChild(styles);
|
||||
var status = this.status;
|
||||
var json = this.responseText;
|
||||
/* Create captcha div */
|
||||
var captcha = document.createElement("div");
|
||||
captcha.setAttribute("class", "captcheck_box");
|
||||
container.appendChild(captcha);
|
||||
|
||||
/* Get captcha container div */
|
||||
var container = document.getElementById("captcheck_container");
|
||||
/* Create captcha div */
|
||||
var captcha = document.createElement("div");
|
||||
captcha.setAttribute("class", "captcheck_box");
|
||||
container.appendChild(captcha);
|
||||
|
||||
if (status == 200) {
|
||||
var data = JSON.parse(json);
|
||||
/* Create answer buttons */
|
||||
var answers = "";
|
||||
for (var i = 0, len = data.answers.length; i < len; i++) {
|
||||
var src = api_url + "?action=img&s=" + data.session + "&c=" + data.answers[i];
|
||||
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>";
|
||||
}
|
||||
var answer_div = document.createElement("div");
|
||||
answer_div.innerHTML = answers;
|
||||
/* Create question */
|
||||
var question_div = document.createElement("div");
|
||||
question_div.setAttribute("class", "captcheck_label_message");
|
||||
question_div.innerHTML = "Click on the <b>" + data.question + "</b>:";
|
||||
if (status == 200) {
|
||||
var data = JSON.parse(json);
|
||||
// ID prefix to use for this instance
|
||||
var idp = data.id_prefix;
|
||||
/* Create answer buttons */
|
||||
var answers = "<div class='captcheck_answer_images' id='captcheck_" + idp + "_answer_images'>";
|
||||
for (var i = 0, len = data.answers.length; i < len; i++) {
|
||||
var src = api_url + "?action=img&s=" + data.session + "&c=" + data.answers[i];
|
||||
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>";
|
||||
}
|
||||
answers += "</div>";
|
||||
var answer_div = document.createElement("div");
|
||||
answer_div.innerHTML = answers + "<div class='captcheck_answer_access' id='captcheck_" + idp + "_answer_access'></div>";
|
||||
/* Create question */
|
||||
var question_div = document.createElement("div");
|
||||
question_div.setAttribute("class", "captcheck_label_message");
|
||||
question_div.setAttribute("id", "captcheck_" + idp + "_label_message")
|
||||
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>";
|
||||
|
||||
/* Add question and answers */
|
||||
captcha.appendChild(question_div);
|
||||
captcha.appendChild(answer_div);
|
||||
/* Add question and answers */
|
||||
captcha.appendChild(question_div);
|
||||
captcha.appendChild(answer_div);
|
||||
|
||||
/* Add hidden session ID element */
|
||||
var skey_input = document.createElement("span");
|
||||
skey_input.innerHTML = "<input type='hidden' name='captcheck_session_code' value='" + data.session + "' />";
|
||||
captcha.appendChild(skey_input);
|
||||
} else {
|
||||
/* Add error message */
|
||||
captcha.innerHTML = "<span class='captcheck_error_message'>There was a problem loading the CAPTCHA.</span>";
|
||||
}
|
||||
/* Add hidden session ID element */
|
||||
var skey_input = document.createElement("span");
|
||||
skey_input.innerHTML = "<input type='hidden' name='captcheck_session_code' value='" + data.session + "' />";
|
||||
captcha.appendChild(skey_input);
|
||||
} else {
|
||||
/* Add error message */
|
||||
captcha.innerHTML = "<span class='captcheck_error_message'>There was a problem loading the CAPTCHA.</span>";
|
||||
}
|
||||
}
|
||||
};
|
||||
xhr.send();
|
||||
});
|
||||
}
|
||||
|
||||
function chooseAnswer(ans) {
|
||||
var box = document.getElementById("captcheck_answer_" + ans);
|
||||
function chooseAnswer(idp, ans) {
|
||||
var box = document.getElementById("captcheck_" + idp + "_answer_" + ans);
|
||||
box.checked = true;
|
||||
return false;
|
||||
}
|
||||
|
||||
function switchMode(idp) {
|
||||
var switch_label = document.getElementById("captcheck_" + idp + "_alt_question_button");
|
||||
var img_q = document.getElementById("captcheck_" + idp + "_question_image");
|
||||
var acc_q = document.getElementById("captcheck_" + idp + "_question_access");
|
||||
var img_a = document.getElementById("captcheck_" + idp + "_answer_images");
|
||||
var acc_a = document.getElementById("captcheck_" + idp + "_answer_access");
|
||||
if (switch_label.innerHTML == "> Text mode") {
|
||||
switch_label.innerHTML = "> Image mode";
|
||||
img_q.style.display = "none";
|
||||
acc_q.style.display = "initial";
|
||||
img_a.style.display = "none";
|
||||
acc_a.style.display = "initial";
|
||||
acc_a.innerHTML = "<input type='text' name='captcheck_selected_answer' aria-label='Type your answer here.' autocomplete='off' autofill='off'/>";
|
||||
} else {
|
||||
switch_label.innerHTML = "> Text mode";
|
||||
img_q.style.display = "initial";
|
||||
acc_q.style.display = "none";
|
||||
img_a.style.display = "initial";
|
||||
acc_a.style.display = "none";
|
||||
acc_a.innerHTML = "";
|
||||
}
|
||||
}
|
Loading…
Reference in New Issue