JSFiddle - React, Tailwind, and code Playground

by sp182

HTML

<table width="200" border="1">
	<tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
	<td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td><input type="text" name="table"   class="tal"  id="0" maxlength="1" size="1"/></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td><input type="text" name="table"   class="tal"  id="1" maxlength="1" size="1"/></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
	<td>&nbsp;</td>
    <td><input type="text" name="table"   class="tal"   id="2" maxlength="1"/></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td><input type="text" name="table"   class="tal"  id="3"  maxlength="1"/></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td><input type="text" name="table"   class="tal"  id="4"  maxlength="1"/></td>
    <td><input type="text" name="table"  class="tal"  id="5"  maxlength="1"/></td>
    <td><input type="text" name="table"  class="tal"  id="6"  maxlength="1"/></td>
    <td><input type="text" name="table"  class="tal"  id="7"  maxlength="1"/></td>
    <td><input type="text" name="table"  class="tal"  id="8"  maxlength="1"/></td>
	<td><input type="text" name="table"  class="tal"  id="9"  maxlength="1"/></td>
    <td><input type="text" name="table"  class="tal"  id="10"  maxlength="1"/></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td><input type="text" name="table"  class="tal"  id="11"  maxlength="1"/></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
   ...

CSS

.tal{ width:15px; height:15px; padding:0px; background: red}
#btn1{ position:absolute; margin:90px 0 0 250px;background: url("../images/submit.png") no-repeat; width:39px; height:40px;border:1px solid red}

#hintans{ position:absolute; margin:80px 0 0 300px;background: url("../images/hint.png") no-repeat; width:39px; height:40px;border:1px solid red}
#reset{ position:absolute; margin:75px 0 0 350px;background: url("../images/reset.png") no-repeat; width:39px; height:40px;border:1px solid red}

JavaScript

var fruits = ["i", "c", "e", "n", "e", "r","f", "s", "i", "o", "n", "v", "n", "d", "a", "s", "m", "a", "n", "g","r", "o", "v", "e", "s", "e", "n", "i", "r", "g", "d", "f", "g", "d", "f", "v", "e", "e", "i", "l", "l", "e", "g","a", "l", "r", "t", "e", "i", "d", "e", "c", "o", "l", "o", "g", "y", "n"];
   
$("#btn1").live('click',function(){  
    var arrInputValues = new Array();  
      $("input[name='table']").each(function(){
           arrInputValues.push($(this).val()); 
      });
   
count=0;
for(var i=0;i<58;i++){
if(fruits[i] == arrInputValues[i]){
count++;
if(count == 58){
$('.corr').show();alert("correct");
}
}
else{
$('.incorr').show();alert("incorrect");
break;
}
}
 });

	 


$('.hint').live('click', function() {
			var fg=$(this).attr("id");	
			$('#'+fg).val(fruits[fg]);
			
		
	});
	
var hint=1;
$('#hintans').live('click', function() {
		if(hint == 1){	
		hint=2;
	$('.tal').addClass("hint");
	$('#hintans').css({"opacity":".5"});
		}else{
			hint=1;
		$('.tal').removeClass("hint");	
		$('#hintans').css({"opacity":"1"});
		}
	});
var now=45;
$('#reset').live('click', function() {
			$('.tal').val(null);
			
	  
	});
	
$(document).ready(function() {
						   $('.tal').val(null);
	    $(':input').autotab_magic();
	});