Creating Interactive Webpages and Exercises


An exciting feature of Cinderella is its ability to create interactive webpages. You can publish any construction, even those using several views, within seconds, and without further knowledge about HTML.

This chapter explains the three scenarios for export: Plain examples, animations and construction exercises. You also find detailed information on the exported HTML code and instructions for post-processing of the web pages, e.g. adding explanatory text.

Glossary


If you are familiar with the World Wide Web and its technical background or if you do not want to bother with technicalities right now you can safely skip this section. As an aid for the further description we want to explain a few of the terms used below.

HTML is the page description language (or format) for web pages. It can be created and edited with any plain text editor, but it is much more convenient to use a special HTML editor. You can view the HTML code of a web page with the "view source" option in your web browser.

The HTML code mainly consist of the text which will be shown, enhanced by tags which describe the appearance and structure of this text. Here is an example:

<p>This is a paragraph containing some <b>bold text</b> 
and some <i>italics text</i>.</p> 
<p>This picture <img src="pappos.gif"> was produced
 with <a href="http://www.cinderella.de">Cinderella</a>!</p>


This fragment describes two paragraphs marked by <p>...</p>. The first paragraph contains two regions which should be typeset with special fonts, the first one, marked by <b>...</b>, in bold, the second one in italics. You might recognize the easy structure of HTML, most of the elements are marked with opening (<something>) and closing tags (</something>).

The second paragraph in the example shows how to include an image using the <img> tag. This tag does not have a closing companion, but it uses an option (src=...) to reference the image file. You also find a hyperlink, which is the most powerful element in HTML. You name a location which can be reached by clicking on the phrase included by <a>...</a>.

Hyperlinks are usually given by an URL, an uniform resource locator. These describe resources by the protocols which give access to them. For the WWW most communication is done with the Hypertext Transfer Protocol, short for http. This explains the http:-part of the WWW addresses, which can be left out since most browsers assume it as a default. Other examples are ftp, the File Transfer Protocol, or the prefix file: which describes files that reside locally on your harddisk.

A special tag is reserved for Java integration into web pages. Whenever a Java compatible browser encounters an applet tag it tries to load the java program referenced by the code option and runs it inside a rectangle on the web page. The size of the rectangle is given by the width and height options. These programs are called Applets, as opposed to standalone applications. The diminutive is a little misleading, since applets can be as powerful as full applications.

The applet tag can also contain an archive option which describes the location of the java code. For Cinderella we provide an archive called cindyrun.jar which contains all the code needed for showing and manipulating constructions. This is an example how the applet tag produced by Cinderella's web export functions could look like:


<apple t code    = "de.cinderella.CindyApplet"
        archive = "cindyrun.jar"
        width   = 435
        height  = 231>
<param...
< /applet>


You find many <param> tags which pass additional parameters like the filename of the construction to the applet. Never change or delete these parameters without exactly knowing what they mean.

Exporting Plain Examples
This is the easiest way to create a webpage with Cinderella. Whenever you have created a configuration you can use the export button to create an interactive webpage showing this construction in exactly the views that you are currently using. Each view will be a separate applet, and these applets communicate using a kernel ID which you find as a parameter of the applet.

The construction itself is not saved in the HTML code, but in a separate file with the extension ".cdy". Whenever you create a web page you are prompted to save your file, if you have not done so before. The applet expects the file in the same directory as the html file of the web page.

Next you will be asked for a filename of the web page. This should end in ".html" or ".htm", depending on your local standards. If you do not supply one of these extensions, Cinderella will assume ".html" as a default. This step finishes the web export, and you should be able to view the result in a Java-1.1 compatible web browser, after you have copied the runtime library into the export directory.

More specifically: The applet expects a file called "cindyrun.jar" in the same directory, which contains the necessary code to show and manipulate constructions. You find this file in the installation directory and you have to copy it into the directory containing the interactive web page. Consult the section on advanced options for further help.

If you experience any problems, be sure to check whether:

  • The file ending in ".htm" or ".html" exists and is readable.
  • The file mentioned as value in <param name=filename> section of the html file exists and is readable (you should be able to load it with Cinderella)
  • The file "cindyrun.jar" is present in the same directory as the two files above and is referenced in the archive option of the applet tag.
  • You are using a Java 2 compatible browser. We recommend using the most recent version of Internet Explorer, Firefox, Safari or similar browsers.

The exported construction is always in move mode. That means that movable elements can be dragged around within the applet rectangle. If you want to prevent elements from being movable, please use the pinning option in the Appearance Editor.

Exporting Animations


Exporting automatic animations is as easy as exporting interactive examples. Unlike earlier versions of Cinderella, Cinderella.2 does not distinguish between animations and ordinary constructions. Using the "Autostart Animations" option available in the Inspector you can make sure that an animation is automatically running when a user visits your page.

While exporting animations please keep in mind that the potential visitors of your web page might have slower computers than you. You should adjust the animation speed accordingly.

Creating Interactive Exercises


You can use Cinderella to create interactive exercises for students. However, the design of a good exercise is much more involved than the creation of an interactive construction. The export itself is easy, but for a educationally valuable exercise you should have some experience with geometry, Cinderella and teaching.

Right now, we are revising the exercise editor. The basic funtionality is available, though, but it is not documented yet.

Post-Processing


The web site containing your construction or exercise is very basic. Cinderella does not try to be a full-featured web editor. You can use any other web editor for post-processing the HTML files.

The width and height parameters of the applets can be changed, if you want to. This is important for the exercise console and control panel, since their sizes are fixed within Cinderella. We recommend that the view sizes should be set to the correct size before you export the construction.

Never change the kernelID parameter of the applet, it is important for inter-applet communication. The order and placement of the applets can be changed arbitrarily. You can also merge two different HTML pages, which gives you the possibility of showing different constructions on one web page.

If you have several Cinderella-enabled pages on your web site you can use a single cindyrun.jar for all these. Then you will have to change the archive parameter of all your applets to reflect the location of your central cindyrun.jar. It should be sufficient to include the complete URL of its location in the archive tag, like in this example:

Legal Issues


With Cinderella you purchased the license to redistribute the necessary runtime library for interactive web pages under certain conditions. We want to summarize these conditions, but keep in mind that the only legally binding terms can be found in the Software License.

You should not try to make money out of your examples, that is, sell them or put them onto a commercial online service. You can certainly use them for teaching (even if you get paid for this). If you want to publish a book or CD-ROM which uses Cinderella, you should contact the Cinderella authors to get a written permission.

Whenever you are unsure about your license, please contact us in writing or via eMail. You can find contact details on the Cinderella website.




Page last modified on Tuesday 30 of May, 2006 [15:47:36 UTC].
The original document is available at http://doc.cinderella.de/tiki-index.php?page=HTML%20Export