ICS 499: Taking my first step into Java Script

In my ICS 414 class, I will be participating in developing a game called Devcathlon.  The Devcathlon is a game that will help programmers gain good programming habits, by the help of the hackystat system.  The hackystat system uses sensors, which are installed into the programmers system, to follow what the programmer does.  So, also for this semester, I am taking ICS 499, which is an independent study course.  I will be using the Devcathlon game as a guide for my 499 course. 

 Learning to Walk

During the first and second development stage of the Devcathlon game, the class has been working on creating a web user interface.  So far the interface was fairly simply, the class mainly worked on creating possible event and concepts for the game and not really focusing on the look of the interface.  As a part of my 499 class, I chose to help “beef up” the interface. 

 

At first I looked at what everyone contributed to creating pages, so far the only thing that made it look really good was the tab drop down menus.  So as I observed, I thought of adding in a collapse and expand feature.  Initially having only a little knowledge in web programming, I only knew a few html tags, this task seemed difficult.  I researched on the internet on how to implement this new feature, and the results I got was to learn Java Script.  After reading through the w3scools tutorial website, I had a better understanding on what the code meant and did. 

 

I continued on my search for this new feature, this time with some java script knowledge. In which I found a good example in a forum, called webmasterworld.  In here I found what I needed to implement the collapse and expand feature.  After tracing the coded the forum provided and a few foul ups, with inserting the code into the Devcathlon pages, the feature finally worked. 

Web page when not expanded

When expanded.

Conclusion

During my research for this feature I found a very useful tool, called firebug.  Firebug is an add-on to the Firefox web browser, and helps web developers trace the code in a section of any website.  This tool will be very useful to find the next feature I will be looking to implement into the Devcathlon pages.  My next feature will be either one or both; an on load progress window or bar, and using Yahoo’s user interface widget tooltip feature.