Chalkboard

Chalkboard is my latest web authorizing tool for active essay. I have just uploaded it here http://tinlizzie.org/chalkboard/. I tested both Firefox and Safari. I know there are still a lot of UI / technical issues though, I am sure that basic feature is enough for my purpose, and I will keep it simple.

My biggest concern at now is supporting Internet Explorer. I thought it was not so difficult for such a simple web application. But actually it was horrible! and I couldn't solve yet. I might go bad direction though, I was really disappointed about different behavior of layout. One can say that it is unnecessary to support various platforms for such an experimental project. But I think it is important because I hope it will get real users finally.

When I had to decide a name of directory for this project. I named it "chalkboard". I felt the spell was too long as a directory name, but I'm comfortable about this naming now.

Here are features.

The screen have three areas, editor, play area, and transcript. You can write text or source code on the editor. Any text is executed as a JavaScript program with [do it] or [print it] command. [do it] command prints the answer on the transcript, and [print it] shows the answer on the point of cursor. The play area provides a free space to user. It is used any purpose, for example, you can make a drawing tool to attach canvas element on it. See http://tinlizzie.org/chalkboard/#Scribble.

The Chalkboard includes a bunch of pages. Each page consists text and source code. Sauce code is usually written on <pre> tag.

All source codes written on <pre> tag in a page are invoked with [run] from top to bottom. This is useful when you encounter unknown page, and want to try at first. <pre> tag is used when the project is called by includes function. See http://tinlizzie.org/chalkboard/#Polygon

You can make a new page to specify new name after hash mark of the URL like http://tinlizzie.org/chalkboard/#NewPage. In this case, a page named NewPage will be made.

Here are some design decisions.

The editor allows only paragraph level editing. You can make a line become h1 (header 1), p (paragraph), or pre (program), but you cannot make a word become bold or italic. Link command is only exception case (you can make a word become a link). The reason is web browsers have different behavior on the editor component, and I don't want to support each corner case. Rather than that, decided to provide minimal set of features.

Chalkboard uses IFRAME + editorMode property for the rich text editor. There were another possibility. One is DIV + contentEditable, and another one is FRAMESET. Those were pros and cons. I use IFRAME simply because it was easiest way in Firefox and Safari to make available this layout configuration, but I might change my mind.