tags:

views:

126

answers:

3

First off, I am not asking anyone to do my homework :P The point of this was to write a simple webpage to become familiar with javascript. It generates and displays random cards from a folder called 'cards'. I completed that part. However, when I submitted it to the teacher he sent me back this screenshot with the subject line "any ideas?"

http://i38.tinypic.com/2wr3e2p.jpg

I have tested this page on several machines and it works in every browser. I have no idea why it just prints the code to the page when he runs it. Any thoughts? (I'm assuming he would javascript enabled, especially since everyone in my class is submitting this program).

Edit: here's the code, sorry but I included everything just to clear any questions

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Aaron's Gamble Page!</title>

<style type="text/css">
* { padding: 0; margin: 0; }

body 
{
 font-family: Arial, Helvetica, sans-serif;
 font-size: 13px;
 background: #48454C;
}
#wrapper 
{ 
 margin: 0 auto;
 width: 365px;
}
#header 
{
 color: #333;
 width: 365px;
 padding: 10px;
 margin: 10px 0px 0px 0px;
 background: #A29EA2;
}
#centercolumn 
{
 color: #333;
 padding: 10px;
 width: 365px;
 background: #DFE0DB;
}
#footer 
{ 
 width: 365px;
 clear: both;
 color: #333;
 background: #A29EA2;
 padding: 10px;
}
</style>

<script type="text/javascript" charset="utf-8">
// this page created by Aaron Albin
// creation date: October 17, 2009

var score = 0;

function generateCards()
{
    var i, randType, randSuite;
    var type = new Array("2", "3","4","5","6","7","8","9","t","j","q","k","a");
    var suite = new Array("c","d","s", "h");
    var cards = new Array(5);
    for (i = 0; i < cards.length; i++)
    {
     cards[i] = setRandomCard(type, suite, cards);
     document.write('<img src = "'+cards[i]+'">');
    }
}

function setRandomCard(type, suite, cards)
{
    var randType, randSuite;
    var filePath = "file://C:/cards/";
    var fileExt = ".gif";

    do
    {
     randType = Math.floor(Math.random() * type.length);
     randSuite = Math.floor(Math.random() * suite.length);
    }
    while(checkDuplicate(randType, randSuite, filePath, fileExt, type, suite, cards));

    addScore(type, randType);
    return filePath + type[randType] + suite[randSuite] + fileExt;
}

function checkDuplicate(randType, randSuite, filePath, fileExt, type, suite, cards)
{
    var j;
    for (j = 0; j < cards.length; j++)
    {
     if (cards[j] == filePath + type[randType] + suite[randSuite] + fileExt)
     {
      return true;
     }
    }
    return false;
}

function addScore(type, randType)
{
    switch(type[randType])
    {
     case "2":
      score += 2;
      break;
     case "3":
      score += 3;
      break;
     case "4":
      score += 4;
      break;
     case "5":
      score += 5;
      break;
     case "6":
      score += 6;
      break;
     case "7":
      score += 7;
      break;
     case "8":
      score += 8;
      break;
     case "9":
      score += 9;
      break;
     case "t":
      score += 10;
      break;
     case "j":
      score += 11;
      break;
     case "q":
      score += 12;
      break;
     case "k":
      score += 13;
      break;
     case "a":
      score += 1;
      break;
     default:
      score += 0;
    }
}
</script>

</head>

<body>
   <div id="wrapper">
         <div id="header"></div>
         <div id="centercolumn">
       <h2>Gamble!</h2>  
       <br />
       <p>Welcome to my gambling page.  You have drawn</p><br />
       <script type="text/javascript" charset="utf-8">generateCards();</script><br /><br />
       <p>The value of this hand is <script type="text/javascript" charset="utf-8">document.write(score);</script>.</p>
       <br />
         </div>
         <div id="footer"></div>
   </div>
</body>
</html>
+3  A: 

Are you sure that your code is listed inside the rights tags ?

<script type="text/javascript" charset="utf-8">
// your code goes here
</script>

it's the only reason i can immagine

wezzy
Yes, inside the header section of the page I put my code in between those tags. And then in the body I called it using this:<p>Welcome to my gambling page. You have drawn</p><br /><script type="text/javascript" charset="utf8">generateCards();</script><br /><br /><p>The value of this hand is <script type="text/javascript" charset="utf-8">document.write(score);</script>.</p>
Aaron
I meant "ut-f8" in that previous post
Aaron
just tried with safari and Firefox and it worked
wezzy
+2  A: 

You declared it as XHTML. In XHTML the content of each tag is parsed. So the < and > signs in your javascript can break up the page. (They can, it's the only wrong thing I can see.) Put your javascript into CDATA tags. (See http://www.w3schools.com/xmL/xml%5Fcdata.asp) Unfortunately this is not parsed correctly by every browser, so you'll have to (javascript-)comment it out to get it working.

<script type="text/javascript">
/* <![CDATA[ */
    // code goes here
/* ]]> */
</script>

Edit: Try http://validator.w3.org/ and you'll see that your markup is invalid and where the problems are. Adding the CDATA tags solves the problem, or at least makes your code valid.

svens
ok, i'll try that
Aaron
when I did that, the page doesn't seem to read the css or javascript...
Aaron
ok, will do. thanks for the input.
Aaron
Just tried it with firefox.. I was wrong with the style tag, ommit it there (leave it as it is). But you have to encapsulate the javascript.
svens
I see where validator.w3.org tells me that the < and > signs are breaking things up. I put the <![CDATA[ and ]]> tags surrounding the javascript code and it validates...except now when I view the page the cards don't display and it doesn't print out the score, both of which are the javascript functions I call in the body.
Aaron
See my edit. Web techniques are a real pain. At least when it comes to standards.
svens
I used <!--/* <![CDATA[ */ // code /* ]]> */ -->for both css and javascript (I also changed the css a bit). I think one of the things I needed to do was put the CDATA tags on their own lines, otherwise it seemed to comment out everything between them...anyway, I submitted it and the teacher said it worked fine. So, thank you everyone for your suggestions and help! It seems standards are more finicky that I originally thought.
Aaron
A: 

When you load a local page from disk in IE which has javascript in it then there's a warning bar which pops up saying "Active content has been disabled. Click here to enable active content." (or something along those lines). Check with the teacher whether he saw the bar, not seeing it would imply JS is disabled somehow, either in the browser or through some sort of security/anti-virus on his local machine. If he did see it, make sure he clicked to enable the active content :)

It's hard to see from the screenshot if there was some sort of error, as he's cunningly moved the part of the window where the error icon appears in the status bar off the screen, but I can see he has Firefox installed, so ask him to look at your page in that.

robertc
Yeah, that's very possible. I was hoping it would be something I could fix from my end...I really didn't want to send him an email saying "please make sure you have JS enabled" xD
Aaron
You could try uploading the same page to your website and ask him to check it there?
robertc
Thanks, I did just that. I'll see what he says...
Aaron