title: How to build a secure captcha using jQuery UI Slider?
body: <p>I'd like to build a fancy and easy to use captcha for my registration by using a slider on which the user can proof he is a human and no script.</p>
  
  <p>So far I implemented the slider with jQuery UI Slider, if the value is 100 the submit-button will be appear. Looks good and I'm satified with the behaviour.</p>
  
  <p>BUT since JS is executed by the client everyone is able to see my code and can trigger the same actions by using a script. For scripts there is no difference if the button is available or not. Scripts only post data to submit forms and my slider-captcha is useless.</p>
  
  <p>My simple JS-code:</p>
  
  <pre><code>$(function() {
          $( "#slider" ).slider({
              value:0,
              min: 0,
              max: 100,
              step: 50,
              slide: function( event, ui ) {
                  if(ui.value == 100){
                      $( "#amount" ).val( "human" );
                      $("#regButton").slideDown();
                  } else if (ui.value == 50) {
                      $( "#amount" ).val( "nerd" );
                      $("#regButton").slideUp();
                  } else {
                      $( "#amount" ).val( "script" );
                      $("#regButton").slideUp();
                  }
              }
          });
          $("#regButton").hide();
          $( "#amount" ).val( "Script" );
      });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;label for="amount" style="text-align:right;"&gt;I'm a:&lt;/label&gt;
          &lt;input type="text" id="amount" style="border:0; color:#f6931f; font-weight:bold; width: 197px;" /&gt;
          &lt;div id="slider"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Are there possibilities to build the captcha saver? Using serverside hashes? Setting flags? what are practises to archive security with a fancy UI and a little more user experince than entering letters.</p>
  
  <p>I'm using Java EE with Spring MVC on the serverside. Whould be nice to use a slider instead of reCaptcha eg.</p>
  
  <hr>
  
  <p>EDIT: I added a hash value to the slider logic. At the begin the server rendering a hidden-field with the date on which the registration started, the server build a md5-hash based on this date. Was the slider moved a function is called which reads the value of the hiddenfield and build an md5-hash, too. The hashvalue will be send to the server and before submitting the registration compared against the servervalue of the hash. Not as save as text-captchas but even more effective than doing nothing at all.</p>
  
  <p>I found this: <a href="https://code.google.com/p/slidelock/" rel="nofollow">https://code.google.com/p/slidelock/</a></p>
  
  <p>What do you thing? How do this guy build a "safe" slider? How he manage the serverside validation and the SALT? Is it safe or also only more expensive for scripter to crack it?</p>