CHAPTER 2
Making Your Webpages More Interesting TOC


And there on rafters high
it came about that all
who floated up beyond
were often prized
and shortly feasted on

What is an Orb?TOC


I begin this section with some definitions which should help in the discussion of using the web safely and wisely with students. Every orbit is defined with respect to some webpage. The orbit of a webpage is defined to be the set of all webpages that can be reached using anchors/hyperlinks. For many webpages, the orbit is so large as to be impossible to comprehend. For other websites, it may simply be the page itself. I will refer to a webpage with no external hyperlinks as a dead-endpage. A dead-endpage is not necessarily a bad thing, especially if we are concerned about students wandering away from safe places.

A closed orbit is a website with a set of connecting pages that does not have any hyperlinks to external sites. Once you reach such a website, you remain at that website until you use the browser's navigation bar to back out. You can also exit a closed orbit by using the history list, or a bookmark, or simply by entering a new URL address. The advantage of closed orbits is that the students can explore more freely without the dangers of accidentally finding inappropriate material.

What is a Strand?TOC

A strand is a string or list of pages. If the pages are given in order, as in the example

  • javbk/javax/java1.htm,


    A Task Bar

    Java Task Bar



    then we say that the strand is ordered.

    A Task Bar

    Pointing to Forward Changes the Image





    A Task Bar

    Clicking on Forward Changes the Page



    Here an example of three infopages with an additional help-page. The list of pages is ordered except for the help-page which can be reached from any other page. The task bar allows the user to go from one page to another but only in order. This system is something like a book. On the other hand, the way in which you access page in an orbit can be very complicated. For instance, you may be able to access any page in the strand from any other page. See


  • The JavaScript Examples




    A Table of Contents Strand

    A Table of Contents Strand



    In general, a strand is any path within an orbit, or orb. The orb-web is thus made up of all of its strands, just like a spiders web. Below, I have placed the diagram of the orbit for the website which begins at


  • javbk/javax/javah.htm


    Note that the arrows indicate when it is possible only to go in one direction. The other lines indicate that it is possible to move between pages in either direction. I will call this kind of diagram a network-graph. This network-graph completely describes the orbit system. On the other hand, if I have a network-graph, not too complicated mind you, then I can create an orbit of webpages that corresponds to it.


    A Table of Contents Strand

    Orbit of Page 1



    As you can see, if you study the network-graph, the toc-page has a hyperlink to each page, and each page has a hyperlink to the help-page. Pages one through three are linked in order.


    Is HTML a Programming Language?TOC




    Actually, programming in web documents is usually done in a portable language such as Java. However, it is possible to do some simple programming using HTML and your browser. The programming technique consists mainly of transferring control of the program from one webpage to another using anchors. To program using HTML requires a little care and usually several webpages. Since HTML is such a simple language, it does not lend itself to computation or complex interactions. Still, one can often use the concept of hyperlinks to create some interesting computer games. An example of one such game is furnished by the Koenigsberg Bridge Problem introduced in the chapter on browsers. The game is really a network-graph, which is described by the adjacent diagram.



    A Table of Contents Strand

    Koenigsberg Bridge Problem Network Graph



    There are four points, or places, in Koenigsberg and seven paths, or bridges, between them. The curves in the diagram represent the bridges, while the points represent the different places that the player might be. The actual program consists of 19 webpages. The first page is the homepage for the game. The homepage allows the player to select a starting position: north shore; south shore; east isle; west isle. Once a position has been chosen, the player must choose an adjacent bridge to cross. There are two pages needed for each bridge crossed. Consequently, the game is really an application of HTML and the browser software. Any problem which can be understood as a network-graph can be implemented as a closed orbit website.

    The Koenigsberg Bridge Problem

    The Sliding Wooden PuzzleTOC



    As a second example, consider a sliding wooden puzzle. The most common type of this sort of puzzle is a three by three square with 8 sliding tiles and one blank space.

    By the way, this example was generated without using In-line images. To simplify the problem we will consider a sliding wooden puzzle with only 5 sliding pieces. You would need over 700 webpages to construct the example with 8 sliding pieces. This tally counts several similar positions as the same. The actual total number of distinct positions for an 8 piece sliding wooden puzzle is 5040.

    On the other hand, if we use 5 sliding pieces we need only 12 webpages to show the different positions. Recall that when you play with the sliding wooden puzzle you can always move the pieces in a " circle." When you do this, you are not really changing the positions of the pieces with respect to one another.

    A typical move involves centering the blank position and the piece you wish to move and then sliding that piece either up or down. For instance suppose we wish to move the piece labeled 3.

    Sliding Wooden Puzzle

    Click on a piece to move it two spaces.


    A Picture of the Sliding Wooden Puzzle




    This can be accomplished by circling until the 3 is centered as below :

    Sliding Wooden Puzzle

    Click on a piece to move it two spaces.


    Center the Three




    and then the piece sliding down.

    Sliding Wooden Puzzle

    Click on a piece to move it two spaces.


    Center the Three




    All of the possible moves are like this, and we will always show the move after the piece labeled 1 has been moved back to the front by circling.

    Sliding Wooden Puzzle

    Click on a piece to move it two spaces.


    Circle Back




    The network graph for this example is given below. We have included it for the interested reader, but you do not need the graph to play the game. The network graph lies in a sphere and so I have placed the graph on a Mercator projection.

    Think of the pages in the orbit as countries and the curves as sailing routes between the countries. There are 12 countries. One at the North Pole and one at the South Pole. Five countries in the northern hemisphere and five in the southern hemisphere.

    Just as in the game you can not reach every country directly. Sometimes you must go to an intermediate country first. The slightly complicated nature of the graph makes the game interesting. Can you tell by looking at the graph, how many countries you must go through to get from the North Pole to the South Pole. Note that the South Pole is the winning position.



    A Table of Contents Strand

    Sliding Wooden Puzzle Network Graph



    You must go through 3 countries. Likewise, if you move wisely you will always solve the 5 piece sliding wooden puzzle in three moves or less. Not unlike the graph of countries on the globe, there is one point which appears at the extreme western and eastern ends of the map. Don't forget that this is only one point, not two.

    Mathematicians often analyze problems in this fashion in order to solve them. A similar, though much more difficult problem is the Rubrik's cube. The Rubrik's cube problem can be solved by considering all the possible moves and the network graph associated to the problem. Only simple problems of this kind can be implemented using webpages and browsers.



    A Table of Contents Strand

    Sliding Wooden Puzzle Solution



    You can now see the complete solution of the 5 piece sliding wooden puzzle problem. The path from one position to another is marked by the number of the piece that must be moved. You can verify the table by starting at the sliding wooden puzzle homepage

    The Sliding Wooden Puzzle

    We shall return to the sliding wooden puzzle problem in the assignment section.



    A Simple JavascriptTOC

    While many of the browsers handle precompiled JAVA applets it is also possible to write simple programs using javascript. Be aware that not all browsers handle javascript, but if you are mainly interested in demonstrating the power of the web to your students, then javascript will provide the opportunity. I have constructed a simple example of javascript and the resulting homepage at

  • Webbing/Projects/javex.htm
    using the Task-bar template. The program will run correctly on Netscape 3.0, but probably not on most other browsers. The idea of the program is to have the browser "color" \hskip0.2truecm the hyperlink when the mouse passes over it. To do this, I first write a script carefully in the HEAD section of the HTML document. I use comments around the entire script so that a browser which does not use the script will ignore it.

    < HEAD>
            < TITLE> Java Taskbar HP </TITLE>

              < script language="Javascript1.1">

    <!--
              function ImgChange(imgNum,imgSrc) {
                
                    document.images[imgNum].src = imgSrc;
              }
    // -->
           </script>
    </HEAD>


    The script creates an object which is denoted by the word " function." \hskip0.5truecm In this case, the object has two parts. The first part tells the java-interpreter which image to change. The second part tells the java-interpreter which image to use when a change is made. The rest of the script tells the interpreter how to find the image numbers in the document. Note that the document counter starts counting the images with the number 0, not 1. Later in the document the function is applied when the mouse passes over an anchor position. In this case, the anchor/image that I wish to change. This is accomplished by the javascript words "onMouseOver " and "onMouseOut".

    < a href="javex2.htm"
            onMouseOver="ImgChange(2,'forwl.gif');"
            onMouseOut="ImgChange(2,'forw.gif');">
    < IMG SRC="forw.gif" BORDER=0 > </a>

    The end result is that when the mouse pointer passes over the anchor/image the "ImgChange" function takes control and replaces the image on your screen. Below is an example of this type of page except that the anchors will not move to another page.

    • Java enabled TASK BAR








    Javascript Animation

    We now turn our attention to a simple animation program. These are quite popular programs and a great deal can be done with them using only javascript. The function code is given below. This code can be easily adapted to any set of in-line-images to obtain an animation graphic. The only boundaries are the size of your animation files and your ability to construct convincing animations. Two buttons are included so that the user can adjust the speed of the animation, for thier own purposes. Examples of animations can be seen at

    • javax/jwin1.html

              < script language="Javascript1.1" >

      <!--

          delay = 100
          imageNum = 1
          // Preload animation images into an array of images
          theImages = new Array()
            for(i = 1; i < 4; i++) {
              theImages[i] = new Image()
              theImages[i].src = "figs/bp" + i + ".gif"
            } // end for i

      function animate() {
          document.animation.src = theImages[imageNum].src
          imageNum++
          if(imageNum > 3) { imageNum = 1} //reset the image to 1
          } // end function animate

      function slower() {
        delay+=10
        if(delay > 4000) delay = 4000
          } // end slowing function

      function faster() {
        delay-=10
        if(delay < 0) delay = 0
          } // end speeding function
            // -->



      Pop-up windows

      We can use the < FORM > tag to create pop-up windows. For example:

      < FORM NAME="myform1" >
      < INPUT TYPE="button" NAME="Button1" VALUE="COLORS!"
            onClick="window.open('jxa1.htm', 'newWin',
            'scrollbars=yes,status=yes,width=300,height=400')" >
      < /FORM >

      The action of this button can be seen by viewing the source code and the file:

      I have included in a subdirectory some javascript examples for study purposes.

      javax

      Assignment (Chapter 2)

      1. Use javascript to design and implement a sliding wooden puzzle for 8 pieces.

      2. Use javascript to design and implement a task bar.

      3. Study the bouncing ball animation and the set of in-line-images in the 'figs' directory. Correct the animation so that it looks entirely smooth.



      ReferencesTOC