This is a substantive application of changing images on the web page under the control of a JavaScript program. The different images represent different mitochondrial genotypes, and they are chosen randomly to simulate the passage through the generations. This produces a visual representation which is much more dramatic than the simple listing of numbers in the record box at the bottom of the page. It also provides, at a glance, the additional information on the relative frequencies of the different mitochondrial genotypes. (I was glad to finally find a good application for this web document object model capability, and am thankful that Ted Emigh presented me with the requirement to illustrate this topic for a course.)
The color bar at the top of the page has two purposes. The first is to dress up the page with a bit of extra color. (This does not quite fill the request I had from a colleague to provide "cute flying bunny rabbits" on the page. :-) The second purpose is a bit more subtle - it is to subliminally prepare the reader for the need to make color distinctions in the rest of the page. This color bar intentionally does not have exactly the same colors used in the exercise, and the shapes of the individual color units also differs from those used in the exercise, so it is not likely to confuse the reader. However it may subtly signal the need to make color distinctions.