In the course of developing the web-based CBT program CASK (Clinical Anatomical Skills, also demonstrated at this meeting) the generally recognized problems of different resolution settings of clients and long downloading due to low bandwidth, were of course encountered. Two technical solutions were developed to overcome or decrease these problems. Both techniques will be explained on the poster and demonstrated electronically.

The resolution problem and a solution:

On developing web pages, one encounters the problem of resolution. A page designed for a certain resolution will necessitate scrolling when viewed on a smaller resolution and will leave useless and ugly blank space when viewed on a bigger resolution. In our University, part of the student computer monitors are set to and allow 800x600 pixels and part of them to 1024x768 or more pixels. We were thus set for an unpleasant choice: either develop on 800x600 with the disadvantage of sacrificing a lot of valuable screen-space and developing for a format growing outdated, or developing for 1024x768 and thus excluding part of the audience. The used browser Internet Explorer does not contain a possibility for scaling of pages. A solution was found in developing a scaling function. The function is based on Dynamic HTML (Internet Explorer only) and JavaScript and resides in a separate file called from every content-page. After a web page has completely loaded, the function recalculates the left, top, width and height parameters of all objects on the page according to a scaling factor. Also font-size of text and polygonal image-maps are scaled equivalently. The resizing is accomplished nearly instantaneously on a PII 233 MHz computer. The scaling factor is automatically determined from the detected resolution on the client or can be manually adjusted. The function is not yet 100% perfect, but achieves its goal in a real-life user-situation without important problems. A disadvantage is that all elements must have style-parameters set, in order to be scaled. Also, overlaps can arise on size reduction when relative and absolute positioning is used in combination. It, therefore, remains necessary to check a page on a reduced resolution and sometimes make small layout adjustments to overcome any remaining layout mistakes.

The bandwidth problem and a solution:

Using the web means facing the problem of low bandwidth. High quality images, not to speak about video, have large data sizes and thus load unacceptably slow over low bandwidth connections with modems as most users have at home.

CBT however has two characteristics that allow a way-out of this problem: 1. Students reside on a page for some time, whilst studying it and 2. Pages are mostly studied in a predefined order. We developed a JavaScript-functionality that exploits these two characteristics. Whilst the student is studying a page, the function continues with preloading the next pages in a hidden frame. The content is thus stored in the cache to be available immediately when the student reaches that page. As long as the loading times stay below the usage time the student will experience no delays. On average this suffices for pages with a few large high resolution images incorporated in it, viewed over a 56K modem, covering most situations, but not for large videos.

For developers developing web-based CBT: obtaining ideas how the problems of resolution differences and low bandwidth can be overcome.

O.P. Gobèe
Leiden University Medical Center,
Dept. of Anatomy and Embryology
P.O. Box 9602
2300 RC Leiden,
the Netherlands
Phone: +31 71 5276673
Fax: +31 71 5276680
Email: o.p.gobee@lumc.nl
Website: www.medfac.leidenuniv.nl/cask