Question

The basic idea is to have several questions, but only 1 showing randomly on page load. Then whatever answer to that question, will display a download.

The questions load randomly, but when I put in the answer the download doesn’t display. I thought I had all my code correct, but maybe there is a better way to do this. If you could help me out, I’d greatly appreciate it.

P.S. I already know this isn’t a super secure way to hide something, but it doesn’t need to be very secure.

<form id="1">
Enter the 5th word on page 28 to access the download:
<input id="pwd1" name="pwd1" type="text" />
</form>
<form id="2">
Enter the 6th word on page 29 to access the download:
<input id="pwd2" name="pwd2" type="text" />
</form>
<form id="3">
Enter the 4th word on page 30 to access the download:
<input id="pwd3" name="pwd3" type="text" />
</form>
<form id="4">
Enter the 3rd word on page 32 to access the download:
<input id="pwd4" name="pwd4" type="text" />
</form>
<form id="5">
Enter the 5th word on page 33 to access the download:
<input id="pwd5" name="pwd5" type="text" />
</form>
<form id="6">
Enter the 3rd word on page 34 to access the download:
<input id="pwd6" name="pwd6" type="text" />
</form>
<form id="7">
Enter the 5th word on page 35 to access the download:
<input id="pwd7" name="pwd7" type="text" />
</form>
<form id="8">
Enter the 4th word on page 36 to access the download:
<input id="pwd8" name="pwd8" type="text" />
</form>
<form id="9">
Enter the 6th word on page 37 to access the download:
<input id="pwd9" name="pwd9" type="text" />
</form>


<div id="hc" style="display: none;">
<center><a href="sudoku.zip"><img id="download" src="download.png"></a></center>
</div>

<script language="javascript">
var rand = Math.floor(Math.random()*9);
$('form').hide().eq(rand).show();
$('form').keyup(function(){
if($('#pwd1').val() == 'more'){
   $('#hc').show('slow');
}
if($('#pwd2').val() == 'Rectangle'){
   $('#hc').show('slow');
}
if($('#pwd3').val() == 'case'){
   $('#hc').show('slow');
}
if($('#pwd4').val() == 'similarities'){
   $('#hc').show('slow');
}
if($('#pwd5').val() == 'similar'){
   $('#hc').show('slow');
}
if($('#pwd6').val() == 'this'){
   $('#hc').show('slow');
}
if($('#pwd7').val() == 'done'){
   $('#hc').show('slow');
}
if($('#pwd8').val() == 'outside'){
   $('#hc').show('slow');
}
if($('#pwd9').val() == 'completed'){
   $('#hc').show('slow');
}
else{$('#hc').hide();} 
});
</script>

Answer 1

This would be alot cleaner:

var rand = Math.floor(Math.random() * 9),
    words = ['more', 'Rectangle', 'case', 'similarities', 'similar', 'this', 'done', 'outside', 'completed'];
$('form').hide().eq(rand).show();
$('form input').keyup(function() {
    if (this.value === words[rand])
        $('#hc').show('slow');
});

Here is a jsFiddle of it working.

Edit I had the index on words wrong, fixed now.