JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0066)http://www.bright-shadows.net/challenges/javascript_bara/quest.htm -->
<HTML><HEAD><TITLE>The TRUE Knight</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2900.2180" name=GENERATOR></HEAD>
<BODY>
<CENTER>
<TABLE width=150 border=0>
  <TBODY>
  <TR>
    <TD><IMG height=88 src="The TRUE Knight_pliki/nomalt.gif" width=88></TD>
    <TD>
      <DIV align=center>Are you a TRUE knight?<BR>...we shall see, <BR>if you 
      will land<BR>where I commenced, <BR>a TRUE knight you shall be! </DIV></TD>
    <TD><IMG height=88 src="The TRUE Knight_pliki/nomalt.gif" width=88></TD></TR>
  <TR>
    <TD>
      <DIV align=center>But be aware, that you must choose. <BR>The Path of 
      Knights or you shall loose! </DIV></TD>
    <TD>
      <SCRIPT src="The TRUE Knight_pliki/hopper.js"></SCRIPT>
    </TD>
    <TD>
      <DIV align=center>Once the path for you is clear, the golden sword will be 
      near! </DIV></TD></TR>
  <TR>
    <TD><IMG height=88 src="The TRUE Knight_pliki/nomalt.gif" width=88></TD>
    <TD>
      <DIV align=center>An asking Knight is one great sin. Search on your own 
      where to begin!<BR>Have fun! BaRa </DIV></TD>
    <TD><IMG height=88 src="The TRUE Knight_pliki/nomalt.gif" 
  width=88></TD></TR></TBODY></TABLE>Copyright © 2004 BaRa</CENTER></BODY></HTML>

JavaScript

document.bgColor="#D0D0C0";
document.write("<form name='grid' method='post' action=''><table border='0' bordercolor='#000000' bgcolor='#000000'>");
var l=0;
var k="";
for(var i=1;i<=64;i++)
{	
	if(i%8==1){document.write("<tr>");}
	if(i%2!=l%2){k=" bgcolor='#FFFFFF'";}
	document.write("<td"+k+"><input type='checkbox' name='c"+(64-i)+"' value='"+i+"' onclick='javascript:discrete(c"+(64-i)+")'></td>");
	if(i%8==0){document.write("</tr>");l++;}
	k="";
}
document.write("</table></form>");
document.grid.c56.checked=1;
document.grid.c56.disabled=1;

var solution="0";
var clicked=1;
function discrete(cell)
{
	clicked+=256;
	alert("Clicked:" + clicked);
	solution+=cell.value;
	cell.disabled=1;
	cell.checked=1;
	if(clicked==769 && cell!=document.grid.c9){FOUT();}
	if(clicked==3329 && cell!=document.grid.c54){FOUT();}
 	if(clicked==5889 && cell!=document.grid.c11){FOUT();}
	if(clicked==8449 && cell!=document.grid.c36){FOUT();}
	if(clicked==13569 && cell!=document.grid.c34){FOUT();}
	// \/ :)
	if(clicked==1025 && cell!=document.grid.c3){FOUT();}
	if(clicked==3073 && cell!=document.grid.c60){FOUT();}
	if(clicked==8961 && cell!=document.grid.c31){FOUT();}
	if(clicked==11009 && cell!=document.grid.c32){FOUT();}
	// |_ :)
	if(clicked==7937 && cell!=document.grid.c63){FOUT();}
	if(clicked==2049 && cell!=document.grid.c7){FOUT();}
	if(clicked==9985 && cell!=document.grid.c0){FOUT();}
	//
	if(clicked==16129){document.grid.c56.checked=0;document.grid.c56.disabled=0;}
	if(clicked==16385){CheckSolution(solution);}
}
function FOUT()
{
	document.bgColor="#FF0000";
	alert("Imposter...");
	window.location.href=document.location;
}
function CheckSolution(result)
{
	var parsing ="";
	for(var x=0;x<3;x++)
	{
		for(var y=0;y<result.length;y=y+2){parsing+=result.charAt(y);}
		result = parsing;
		parsing = "";
	}
	if(result.charAt(14)=='1'&&result.charAt(13)=='6'){window.location.href="k"+result+".htm";}
}