Not quite right yet but well on the way.
Here's what we are after - can you modify play2.html so this is what we get?

<img src='cards/back.png' n='12' onClick='card_clicked(this);'>
<img src='cards/back.png' n='52' onClick='card_clicked(this);'>
<img src='cards/back.png' n='38' onClick='card_clicked(this);'>
<img src='cards/back.png' n='26' onClick='card_clicked(this);'>

How did you go? Here's my code:

<script>
  var arr=[12,52,38,26];
  var s1="<img src='cards/back.png' n='";
  var s2="' onClick='card_clicked(this);'>";
  for (var i=0; i<4; i++) {
    document.write(s1 + arr[i] + s2);
  }
</script>

Of course we won't know if it works till we replace the first 4 lines of our index.html with what is in play2.html.
Bet you can't wait to give it a try!