Wspinaj.eu Tutorial is an application designed to help website users absorb the presented material more easily. Availability via the web, a Windows application, and an Adobe AIR application allows the tutorial to run on most popular operating systems (Windows, Mac, Linux).
Offline attachments included in the application ensure access to all materials even on computers without internet access.
The application enables the use of narrator's voice, the creation of text or slideshows, and even the creation of dynamic interactive animations, quizzes, and mini-games.

To top

The application is built on Adobe Flash technology. It is distributed as an animation on the website, a Windows application, and an Adobe AIR application.
The displayed content is permanently stored within the application in XML format, and attachments are distributed together with the application as separate files, allowing the application to run even without internet access.
For the needs of the application, we developed a formatting engine that expanded Flash's capabilities in the area of text presentation. By default, Flash can only display a bulleted list and does not allow changing the bullet style or character used. Our engine can use any character, or even a Flash object, as a bullet point, and can also automatically generate numbered lists. The only issue turned out to be embedding images within text — Adobe AIR simply ignores embedded images for "security" reasons. Since avoiding this without a considerably more complex text-composition system was not possible while maintaining compatibility with both the Flash and AIR platforms, images are instead placed in the margin next to the text. Since a page's content can consist of multiple text objects, the text can be manually split so that it roughly wraps around an image placed in the margin. The system automatically determines the margin size based on the list of images for a given text element and arranges the images within it according to the order in which they appear in the text.

The Flash platform also does not support tables. To display them, we developed a simple algorithm that places formatted text fields into an appropriate grid (example above). It also supports cell merging and background color. Leaving the default cell background triggers automatic "zebra" striping, meaning alternating light and dark rows. Other text formatting features can be achieved in a similar way to standard HTML text used by Flash. The height and width of individual columns are calculated automatically, but we chose not to calculate relative column widths based on the length of the text inside a cell when no size is specified (as is the case in standard HTML), opting instead for equal width distribution. This provides better control over width and improves the appearance without needing to manually set the size of each cell.
The application allows the use of audio files, for example with text read by a narrator. The audio track is divided into paragraph-sized segments; once the "sound" attribute is assigned to selected parts of the text, it is automatically highlighted as it is read aloud. This eliminates the need for an animation-music synchronization tool — any audio editor is enough to split the track, along with a description of which text each file contains. Audio files are downloaded on the fly as the text is read, so opening the application itself in online mode is faster. Users who choose not to listen to the audio track also won't unnecessarily use up their internet bandwidth. Below is an example of text highlighted while being read:

Upon launch, the application immediately displays the first content page. If it is a slide, the slideshow begins. If the page has an assigned narrated audio track, playback starts automatically.
At any time, the user can move to the next/previous page or slide, as well as pause or resume the presentation using the navigation bar at the bottom of the screen, which shows the current page, along with navigation buttons. If the text content does not fit on a single page, a scroll bar appears. The page title remains visible above the content at all times.
At the top of the application, a menu with a list of the individual sections of the material is visible.