Friendly, easy, lightweight, self-hostable CAPTCHA service. https://captcheck.netsyms.com
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

captcheck.js 5.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687
  1. window.onload = function () {
  2. var api_url = "https://captcheck.netsyms.com/api.php";
  3. /* Add custom styles */
  4. var styles = document.createElement('style');
  5. /* Remove newlines/comments from captcheck.css and put it here */
  6. 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}";
  7. document.body.appendChild(styles);
  8. /* Loop over all the CAPTCHA containers on the page, setting up a different CAPTCHA in each */
  9. Array.prototype.forEach.call(document.getElementsByClassName("captcheck_container"), function (container) {
  10. var xhr = new XMLHttpRequest();
  11. xhr.open('GET', api_url + "?action=new", true);
  12. xhr.onreadystatechange = function () {
  13. if (this.readyState == 4) {
  14. var status = this.status;
  15. var json = this.responseText;
  16. /* Create captcha div */
  17. var captcha = document.createElement("div");
  18. captcha.setAttribute("class", "captcheck_box");
  19. container.appendChild(captcha);
  20. if (status == 200) {
  21. var data = JSON.parse(json);
  22. // ID prefix to use for this instance
  23. var idp = data.id_prefix;
  24. /* Create answer buttons */
  25. var answers = "<div class='captcheck_answer_images' id='captcheck_" + idp + "_answer_images'>";
  26. for (var i = 0, len = data.answers.length; i < len; i++) {
  27. var src = api_url + "?action=img&s=" + data.session + "&c=" + data.answers[i];
  28. 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>";
  29. }
  30. answers += "</div>";
  31. var answer_div = document.createElement("div");
  32. answer_div.innerHTML = answers + "<div class='captcheck_answer_access' id='captcheck_" + idp + "_answer_access'></div>";
  33. /* Create question */
  34. var question_div = document.createElement("div");
  35. question_div.setAttribute("class", "captcheck_label_message");
  36. question_div.setAttribute("id", "captcheck_" + idp + "_label_message")
  37. 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'>&gt; Text mode</a>";
  38. /* Add question and answers */
  39. captcha.appendChild(question_div);
  40. captcha.appendChild(answer_div);
  41. /* Add hidden session ID element */
  42. var skey_input = document.createElement("span");
  43. skey_input.innerHTML = "<input type='hidden' name='captcheck_session_code' value='" + data.session + "' />";
  44. captcha.appendChild(skey_input);
  45. } else {
  46. /* Add error message */
  47. captcha.innerHTML = "<span class='captcheck_error_message'>There was a problem loading the CAPTCHA.</span>";
  48. }
  49. }
  50. };
  51. xhr.send();
  52. });
  53. }
  54. function chooseAnswer(idp, ans) {
  55. var box = document.getElementById("captcheck_" + idp + "_answer_" + ans);
  56. box.checked = true;
  57. return false;
  58. }
  59. function switchMode(idp) {
  60. var switch_label = document.getElementById("captcheck_" + idp + "_alt_question_button");
  61. var img_q = document.getElementById("captcheck_" + idp + "_question_image");
  62. var acc_q = document.getElementById("captcheck_" + idp + "_question_access");
  63. var img_a = document.getElementById("captcheck_" + idp + "_answer_images");
  64. var acc_a = document.getElementById("captcheck_" + idp + "_answer_access");
  65. if (switch_label.innerHTML == "&gt; Text mode") {
  66. switch_label.innerHTML = "&gt; Image mode";
  67. img_q.style.display = "none";
  68. acc_q.style.display = "initial";
  69. img_a.style.display = "none";
  70. acc_a.style.display = "initial";
  71. acc_a.innerHTML = "<input type='text' name='captcheck_selected_answer' aria-label='Type your answer here.' autocomplete='off' autofill='off'/>";
  72. } else {
  73. switch_label.innerHTML = "&gt; Text mode";
  74. img_q.style.display = "initial";
  75. acc_q.style.display = "none";
  76. img_a.style.display = "initial";
  77. acc_a.style.display = "none";
  78. acc_a.innerHTML = "";
  79. }
  80. }