Site author Richard Steane
The BioTopics website gives access to interactive resource material, developed to support the learning and teaching of Biology at a variety of levels.


BioTopics Interactive Innovations

Text and graphics

Rollover techniques are widely used on this site, hopefully to enhance the learning experience.
Using the mouse to pass the cursor over many of the graphics will cause diagrams to become labelled. Try this on the cell diagram below. You should know the names of three parts!.

animal cell, e.g. cheek epithelium
In many units, rolling the cursor over hidden text may be revealed, so that you can > test yourself!

In some units I have extended the hidden text idea to allow sections to be revealed and left visible when clicked. I hope this might be useful in a classroom group context, especially with tables and genetic diagrams.

These techniques form the basis of on-line tutorials. With tablets or smartphones, (double-?) tapping performs the same function.

I am also increasingly likely to use pop-up windows that respond to passing the mouse cursor over words in the text in order to give definitions or further explanations to cover technical terms etc. This is not available on tablets and smartphones, however.

Animations are used where there is an educational benefit, such as this illustration of plasmolysis. Being in GIF format, these do not require plug-ins such as Flash to be loaded. Try clicking on the image below.
click to replay animationplasmolysis animation - click to re-run

Image maps and tool tips are also sometimes used to append extra detail on demand. Leave your mouse pointer resting on the different parts of the diagram of a glucose molecule below!
I think this only works on [Windows] desktops/laptops.

Glucose molecule Carbon 4 Carbon 5 carbon 6 Oxygen Carbons 2+3 have -H + -OH projecting in different directions -OH group on carbon 1 projects downwards in alpha-glucose

Manageable menus

Each of the main sections of the site has its own menu, and I have tried to also put drop-down menus across the top of most units. But as the number of topics grows, it becomes tedious to update the list on each page. So I have instituted a flexible arrangement: self-populating menus. These menus are simply lists, and CSS (cascading style sheets) format them into boxes. I made them simply refer to the main menus, but when the top titles are moused over or tapped, they call in extra data from a separate list, and this is all that has to be updated by me to be displayed on any of the main topics pages. I have included extra information (sub-units on each topic, etc) which comes up on mouseover (again only on laptops/desktop computers).


A major section of the site has involved me in the production of pages devoted to interactive 3-dimensional molecular models - usable at a number of different levels.

At the moment I have converted the original files (and extended some) to use a format (Jsmol) which utilises HTML5 and javascript. This gives a reliable high-quality image that is easily moveable by the computer user. Sections can be highlighted or emphasised by clicking on text links. This section is more acceptable on tablet computers (and even phones). These JSMol files are accessible from this link.

Originally these were based on JMOL Java applets, which gives a more reliable high-quality image with smoother and faster interactivity, but this is unavailable on some computer platforms. Unfortunately, some browsers interpret this technology as a security risk, and require users to click on a warning page before proceeding. There is no intrinsic risk from using these pages on this site. These JMOL files are accessible from this link.

Another experimental feature : audio.

OK I have tried to put in sound in various formats in the past, but this was not supported by all browsers. The HTML5 format is more flexible, although different browsers have different preferences!
I have used this to give a spoken version of some topics, as well as single words which some find difficult.

How do you say 'systole':

and 'diastole':

I would appreciate feedback to tell me if these (and other features) work on your system, at home or in a school/college, on a stand-alone or networked computer, or a tablet iPad or Android device - please click on the FeedBack icon on the bottom left of this page.

As a matter of fact I note that some Android devices do not respond well to this feature - they may play a chopped up squeaky sound and perhaps they will not move on to the next audio segment (although it may seem to work if the progress bar is dragged back to zero on the first segment played). I have actually inserted a few tedious lines of code to do that above, but it does make it less flexible if there are no 'controls'.
Any suggestions (on how to correct that)? On reflection I think this is probably more of a problem with my older tablet than the code on the page.

Watch out for these icons which bring up animations or photos when clicked.

The site is very stable and continues to be developed, although not quite at the pace I would like!

Richard Steane

Author and Webmaster

Please give some feedback to BioTopics so we know if this works on your machine Back to the BioTopics index page?