0

I have to write a script that reads in the size of a square (between 1 and 20) and outputs XHTML text that displays a hollow square of that size constructed of asterisks. I understand and know how to prompt the user for the size:

<script type = "text/javascript">

var size;

//prompt user for size of square
size = window.prompt("Enter size of square between 1 and 20: ");

// convert size from a string to an integer
sizeValue = parseInt(size);

</script>

But I'm not sure what to do after that. I would appreciate the help, thanks.

Holly
  • 343
  • 3
  • 8
  • 17

1 Answers1

4

What you do after that is the following.

Construct an XHTML document manually that gives you the exact output you desire for an input of 11 and another for an input of 7.

Then work out the differences between the two files (number of spaces, number of asterisks and so on).

Your task then will be to construct code that will output the correct XHTML output for an arbitrary input.

Beyond writing the code for you (not an option I consider for homework questions), there's not much more I can offer.

For what it's worth, here's some pseudo-code (Python actually, since it's just so darned good as pseudo-code) which would be a good baseline to start from:

def square (n):
    if n < 1:
        return
    full = ""
    for i in range(n):
        full += "*"

    empty = "*"
    for i in range(n-2):
        empty += " "
    empty += "*"

    print full
    if n > 1:
        for i in range(n-2):
            print empty
        print full
    print

square (1)
square (2)
square (3)
square (7)
square (12)

The output of that is as follows:

*

**
**

***
* *
***

*******
*     *
*     *
*     *
*     *
*     *
*******

************
*          *
*          *
*          *
*          *
*          *
*          *
*          *
*          *
*          *
*          *
************

and I don't think it would be too hard to modify that to output extra text to turn it into a valid XHTML document, based on the manual ones you created earlier.

And, if you're looking for how to manipulate the actual web page itself, this very simple piece of Javascript shows one way to do it. I've intentionally made everything hard-coded so that you will have to think about what you're doing, but it shouldn't be a huge stretch to convert and incorporate the pseudo-code above into this and make whatever other changes are required.

<script type = "text/javascript">
    var full, empty, i, newdoc;
    newdoc = "Processing 5 (hardcoded)<hr><pre>";
    full = "*****<br>";
    for (i = 0; i < 5; i++)
        newdoc = newdoc + full;
    newdoc = newdoc + "</pre>";
    document.write (newdoc);
</script>

This outputs:

Processing 5 (hardcoded)
------------------------
*****
*****
*****
*****
*****
paxdiablo
  • 854,327
  • 234
  • 1,573
  • 1,953
  • 1
    good answer. one thing to add though, i have a feeling that the asker doesnt know where to start with constructing a document programatically. So, you can either construct a document by appending strings like `"..."` etcetc then appending to the existing document (bad idea) OR you can construct a document using `document.createElement(...)` which will create DOM nodes (better idea). search the net on how `document.createElement` works its well documented. – Darko Nov 10 '10 at 02:12
  • @Darko, good point, I've added some Javascript showing how to do that, the bad way unfortunately. This will give the OP the chance to read up on the good way of doing it :-) – paxdiablo Nov 10 '10 at 03:07