JSFiddle - React, Tailwind, and code Playground

by Roberto Apasajja

HTML

<div class="regLabel">Are You a Human?</div>
<div class="regDesc">
    Please drag-and-drop these items into<br />the correct order, lowest-highest 
</div>                
<div class="regInput">
        <div id="captcha">
            <div class="cItem">0</div>
            <div class="cItem">1</div>
            <div class="cItem">2</div>
            <div class="cItem">3</div>
            <div class="cItem">4</div>
            <div class="cItem">5</div>
        </div>
</div>   
<button onclick="validateHuman()">See if you are human</button>

CSS

.regLabel{
        font-size:12pt;
        font-weight:bold;
        float:left;    
        color:#570050;
        text-align:left;
        width:98%;
        margin-bottom:5px;
        margin-top:5px;
    }

    .regDesc{
        color:#666;
        font-size:9pt;
        margin-bottom:8px;
        float:left;
        text-align:left;
        width:98%;            
    }
    .regInput{
        float:left;
        text-align:left;
        width:98%;
    }

    #captcha{
        padding: 0px;
    }
    #captcha .cItem {
        margin: 3px 3px 3px 0;
        padding: 1px;
        float: left;
        width: 35px;
        height: 35px;
        border:1px solid #333;
        font-size: 20px;
        text-align: center;
        line-height:35px;
        cursor:pointer;
        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        -moz-box-shadow: 0 1px 1px rgba(0,0,0,0.5);
        -webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.5);
        text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
        background:#009 repeat-x scroll 50% 50%;
        color:#fff;
        font-weight:normal;
    }
button{margin-top:20px;background:#f00;color:#fff;padding:15px;}

JavaScript

validateHuman=function(){
    alert(  (checkHuman() ? "You are a human being. Congratulations.": "Damn cyborgs!")  );   
}
checkHuman=function(){
    var s='';
    $('.cItem').each(function(){
        s+= $(this).text();
    });
    return (s=="012345");
}
    
$.fn.randomize = function(childElem) {
  return this.each(function() {
      var $this = $(this);
      var elems = $this.children(childElem);

      elems.sort(function() { return (Math.round(Math.random())-0.5); });  

      $this.remove(childElem);  

      for(var i=0; i < elems.length; i++)
        $this.append(elems[i]);      

  });    
}
        
$('#captcha').sortable();
$('#captcha').disableSelection();
$('#captcha').fadeIn('slow');
while(checkHuman()){
    $("div#captcha").randomize("div.cItem");
}