Site Features

Content Jump

• Site Highlights
• Site Tour
• Difficulties Faced
• Site FAQ

Hide

AJAX

AJAX was featured in 2 sites last year, namely the DRM site and the ProjectArcix site. With AJAX, loading of web content is made ultra-fast. In this site, we actually adopted "Double AJAX loading", one for the content and one for the navigator, taking dynamic content to another level.

Intelligent Navigator
Our site breaks away from the traditional left column or top row navigation bar. We invented a new way of browsing the site: A dynamic navigator. Using AJAX, we built this navigator based on the idea of using a "remote control" to browse the site. We made it "draggable, portable and intelligent": You can drag it anywhere in the site, show or hide it and it changes according to how you browse the site. If you clicked on a link within the page, it provides a "back" link for your convenience.

Draggable Divs
For the first time, we used a script which allows divs (meaning divisions in HTML) to be dragged around the screen. This is the first step towards a user-friendly interface, allowing the user absolute freedom to place content anywhere on the site. The site now conforms to the user, not the other way round, just like how other programs work.

Slideshow
We used an image slideshow to help users remember content better, and it can be located at the Dos and Donts section. This slideshow used DOM and XHTML, so expect it to work in mobile devices too.

Video and Audio
We created one video content at the Web Accessibility section, which can be viewed in both Macintosh and Windows systems, and also for people with low bandwidth.

Audio content (podcasts) can be found at Future of ThinkQuest section.

Skin Chooser

Inspired by CSS Zen Garden, we want to create a site that appeals to more people in the area of aesthetics. As we all know that aesthetics are subjective, what our team can do is to create several "skins" to cater to different types of people.

Take your pick! We have six different skins to choose from. Just click on the Skin Chooser link at the toolbox.

Sliding Doors of CSS
Thanks to Douglas Bowman's article at A List Apart, we managed to create 4 sliding doors buttons that does not break in design when the user expands text with in-built shortcuts in the browser. Try "Ctrl-Scrolling" to expand text: The site design does not break easily. :)

Futhermore, the buttons made use of "rollovers without preload" technique, so there will not be a flash in the image when you roll-over the menu buttons.

DOM Site Search
For the first time, we applied DOM scripting to a search script and customized it for AJAX searching. The script has been made smarter to store more commonly searched keywords so that search results become highly relevant. This is probably one of the best client-side search script in the ThinkQuest Library.

Special Content Structure
Have you read the content?
In order to make sure that our users are really confident that they learnt something from our site, we have a conclusion page for every section in the toolkit containing checkboxes for them to check against what they should have learnt.

Also, our explore deeper sections let users decide whether they want to explore more into the topic, catering for kids who are not ready for deeper content.

In addition, our quizzes at the end of every section in the Toolkit further confirms their knowledge of the topic.

AJAX-S

TQ Toolkit also come in a light-weight version, TQ Toolkit Lite. We used AJAX-S to develop a presentation does does not need any programs such as Microsoft PowerPoint to run. All it needs is a normal browser that supports JavaScript. This resource serves to aid team coaches of ThinkQuesters or teachers/educators.

Optimization
The site made use of high image compression, efficient coding and good file organisation to optimise load time. This cuts down on the dreaded loading time even though the number of scripts run on the site is huge. Each image has been cut down by an average of 70% of its size, while scripts made use of efficient conditions to determine the execution of long codes.

Besides, our site has all the basic interactivities that all sites in ThinkQuest should have, including random factbox and trivia, rollover definitions, flash content, text size toggling, print-friendly, valid XHTML and CSS and games.

TOP

Hide

You can find this on the home page as well:

Watch the Site Tour Flash movie

TOP

Hide

In the process of developing this site, we faced a number of difficulties. Here, we share some technical issues that we met and how we solved them.

Cross-Browser Issues
This is the worst problem for any web developer. At one time, your site might look just as you wanted it to be on FireFox, but when you open it up in Internet Explorer, horrors! This happens to many web developers, including our team. Everything is working fine in Firefox but not Internet Explorer! The positioning of elements were all over the place and scripts refuse to work.

Fortunately, we managed to search for solutions from the web. If you have read the Explore Deeper sections in CSS, you should know that our site used some browser hacks in order to get things in the right place. Differences between browsers definitely made web development a daunting task for many, but we still have to say, "There is always a solution. Just Google it!".

One issue is the bug with I.E6 not rendering PNG images correctly. I.E6 is unable to produce the desired transparency, causing our site to look very unappealing. We considered hacking the browser using CSS codes, but it would cause our site unable to validate against W3C standards (which we are advocating). In the end, we chose to ignore this problem since I.E7 is released (which renders PNG correctly).

Another issue is the difference in DOM between Internet Explorer and other browsers. For example, the "setAttribute" function for setting class attributes is slightly different in Internet Explorer. We managed to solve this problem by searching the web which provides a simple solution to the problem. For Internet Explorer, just use "setAttribute('className','value')" instead of "setAttribute('class','value')".

Adopting New Techniques
In our site, we adpoted quite a number of new techniques that no TQ site has used yet. These include the draggable boxes and a more significant skin switching. Using new scripts like these often takes up a lot of time and effort. Futhermore, no scripts downloaded from the Internet can be used directly. There must be some editing and customizing before they can be used.

We faced quite a number of difficulties getting the scripts to work. But what we would like to share is that the more you familiarise with them, the better you are at solving technical problems. Do not give up immediately; take some time to look at it again. That is our philosophy while working on this site, and that is the reason why we managed to get the scripts running fine in the end.

However, there is still one script that does not work perfectly. If you have been using the site's content jump, the 'jump' is controlled by a smooth scrolling script, but the script is working on the outer scrollbar instead of the inner one. There are no solutions yet, but we hope other ThinkQuesters can apply it to their entries and improve on it. TOP

Hide

Why do I see a messed-up layout?
You could have been using an old browser. Browsers like I.E6 contain many processing bugs which causes incorrect presentation of the site. Upgrade to the latest version of your browser. For your information, the site has been tested on Internet Explorer 7 and Firefox 2 and should work fine in Opera and Safari.

I cannot use the site at all! Pages are not loading!
You should turn on JavaScript and allow ActiveX content (if using Internet Explorer 7) while using the site. This site is hosted on the ThinkQuest server and from a trusted source.

I clicked on "Print Friendly" and it takes me to a new window/tab with layout all messed up!
No worries. Simply click Print Preview and you will see a nice printing layout that is print-friendly. This is powered by CSS.

I clicked on a Video/Audio but it does not load
You might have a missing plugin. If you are using Windows OS, you may not have Quicktime player. Similarly, if you are using Mac OS, you may not have Windows Media Player. Our video offers both formats, so choose the right one for your system.

How to contact you?
Since this site is owned by ThinkQuest, you might want to contact the ThinkQuest staff. Visit the ThinkQuest Website for more information. If you want to contact individual members, you have to contact the ThinkQuest staff first (participants are not allowed to reveal personal contact information).