Webbased Visual DOM Training Tool

Hi all

I made a web based visual Document Object Model (DOM) Training Tool for
my students:

http://test.datenkueche.com (you need Firefox !!!)


Before I torture my students with this tools, I would like to have some
feedback from php mailinglist.

This tool should help to learn the DOM Object of PHP5
http://www.php.net/manual/de/ref.dom.php

There are 3 demos that shows you the functionality of the tool.

For interactive training there are some html/xml files in a drop down
list. You can also load files from http sources.

There are also some "special" training files. The time you need to
finish an exercise will be stored in a "hi score" list.

have fun, give feedback

Bernhard

On Thu, November 30, 2006 6:56 am, Bernhard Zwischenbrugger wrote:
> I made a web based visual Document Object Model (DOM) Training Tool
> for
> my students:
>
> http://test.datenkueche.com (you need Firefox !!!)

I found it annoying that I couldn't break out of "demo1" by clicking
on "demo2"

demo1 demo2 demo3 should probably change cursor or something to appear
more "clickable"

I didn't really understand what I was looking at, or why I'd want it
or what I was supposed to learn from it...

It looked very slick, but had an awful lot of repition of filling in
some DOM field and clicking "do it".

I don't really need to see that more than a couple times to know I can
fill in those fields and click "do it".

What I *do* need to know is what they heck to put in those boxes...
bodylist
listbody
bodyList
listBody
I have no idea which of the above 4, if any, is the "right thing" to
put in the box, and doubt that I'd figure it out any time soon...

> There are also some "special" training files. The time you need to
> finish an exercise will be stored in a "hi score" list.

I'm not sure I even figured out how to START an exercise, much less
finish it...

Maybe I'm just the village idiot, but I needed a bit more instruction
on what the heck I was supposed to be doing... Or maybe that's
covered in a classroom somewhere.

It was definitely very slick though, whatever it was.

--
Some people have a "gift" link here.
Know what I want?
I want you to buy a CD from some starving artist.
http://cdbaby.com/browse/from/lynch
Yeah, I get a buck. So?

Richard Lynch wrote:
> On Thu, November 30, 2006 6:56 am, Bernhard Zwischenbrugger wrote:
>> I made a web based visual Document Object Model (DOM) Training Tool
>> for
>> my students:
>>
>> http://test.datenkueche.com (you need Firefox !!!)
>
> I found it annoying that I couldn't break out of "demo1" by clicking
> on "demo2"
>
> demo1 demo2 demo3 should probably change cursor or something to appear
> more "clickable"
>
> I didn't really understand what I was looking at, or why I'd want it
> or what I was supposed to learn from it...
>
> It looked very slick, but had an awful lot of repition of filling in
> some DOM field and clicking "do it".
>
> I don't really need to see that more than a couple times to know I can
> fill in those fields and click "do it".
>
> What I *do* need to know is what they heck to put in those boxes...
> bodylist
> listbody
> bodyList
> listBody
> I have no idea which of the above 4, if any, is the "right thing" to
> put in the box, and doubt that I'd figure it out any time soon...
>
>> There are also some "special" training files. The time you need to
>> finish an exercise will be stored in a "hi score" list.
>
> I'm not sure I even figured out how to START an exercise, much less
> finish it...
>
> Maybe I'm just the village idiot, but I needed a bit more instruction
> on what the heck I was supposed to be doing... Or maybe that's
> covered in a classroom somewhere.
>
> It was definitely very slick though, whatever it was.

my thoughts exactly.

>

Hi
> >
> > http://test.datenkueche.com (you need Firefox !!!)
>
> I found it annoying that I couldn't break out of "demo1" by clicking
> on "demo2"

I have so many "setTimout" in javascript... but good point, I will
change that. Reload the page can be a workaround for now.

>
> demo1 demo2 demo3 should probably change cursor or something to appear
> more "clickable"

done.

>
> I didn't really understand what I was looking at, or why I'd want it
> or what I was supposed to learn from it...
>

It's for learning DOM. There are the same commands in Javascript and PHP
(diffent syntax "." instand of "->").
It's very usefull for AJAX, Webservices,...

To start, here is a simple example:
http://www.khtml.org/guestbook/
http://www.khtml.org/guestbook/index.phps
(a guestbook)

> It looked very slick, but had an awful lot of repition of filling in
> some DOM field and clicking "do it".

That's DOM. There are only low level functions. The good thing is, that
you can do really a lot if you know about 10 DOM Methods. And the
methods are the same in Javascript !!!

>
> I don't really need to see that more than a couple times to know I can
> fill in those fields and click "do it".
>
> What I *do* need to know is what they heck to put in those boxes...
> bodylist
> listbody
> bodyList
> listBody
> I have no idea which of the above 4, if any, is the "right thing" to
> put in the box, and doubt that I'd figure it out any time soon...

bodylist, body, divElement,... are variable names. You can fill in what
you want. The "variables" are Objects. If you click on a variable (on
the right side) the object will be highlighted in the Tree.

"body" and "div" are tagNames - the names of HTML Elements.
Everything with a $ is a variable.


>
> > There are also some "special" training files. The time you need to
> > finish an exercise will be stored in a "hi score" list.
>
> I'm not sure I even figured out how to START an exercise, much less
> finish it...

choose "guestbook2", "guestbook3"

>
> Maybe I'm just the village idiot, but I needed a bit more instruction
> on what the heck I was supposed to be doing... Or maybe that's
> covered in a classroom somewhere.

If you never did something with DOM, this tool is not really useable
without more instructions. Maybe I will add a documentation.
At the moment the starting point for learning is:
http://www.php.net/dom

The first thing you need to know is what an "element", "attribute" and
"textNode" is.

Simple_xml maybe is a little bit simpler then DOM, but DOM you can also
use in Javascript, Java, Python, Perl,... for HTML, SVG, MathML,...
Together with XSLT it is really powerfull.

>
> It was definitely very slick though, whatever it was.
>

Thank you. And thank you for testing and your comment!!!

Bernhard