Online game for kids. Much ta if anyone can briefly check this.

[xoggoth]

Have had some HTML/jscript educational interactives on my site for a while which use absolute positioning on the full screen.

Have been trying to put them on a "pretty" page but it has proved a real problem trying to relate mouse coordinates on the screen to position on an element when there is other stuff that is not absolutely positioned and the user may have scrolled down. Apart from issue of sizing when people ctrl-mousewheel, I finally have something that works for me in the main browsers:

Gatekeeper Education Ltd - Primary Science Nature Software And Guides

Can any kind CUKers have a go? Scroll down a bit so the game is fully visible and then just see, if you drag one tile over another, if they swap places properly? Much appreciated.

[northernladuk]

Worked perfectly for me. Kids did 4 or 5 of them without a hitch...

Could you make it a bit easier before asking us to test it though :|

[Bacchus]

Worked brilliantly in Chrome (v23.0.1271.97)

I understand how much work goes into making something look that easy, but it really appears totally seamless

[adubya]

Buggy for me in Chrome 23.0.1271.97 m, sometimes it moves completely the wrong tile.

Can't complete the puzzle as it seems confused as to which tile I've selected, seems more prevalent when selecting tiles from the bottom row.

Edit: Seems to be related to the size of the puzzle image, when I went into the programmers tools (to see if any Javascript errors were reported) then the puzzle image shrank and I could complete it no probs. After quitting the prog. tools, the puzzle image resized to larger dimensions and I started to get the confused tile issue again.

[VectraMan]

Works for me in Chrome.

Are you using setCapture()? I did when I tired to do something similar, got it all working in IE and Firefox, and then discovered Chrome doesn't support mouse capture properly. Standard, my arse.

[xoggoth]

Cheers for all the comments. There is a resizing issue, which is odd as the full screen one resizes ok. Hoping is just a bit of a code cockup rather than something fundamental. Not using setcapture, just standard mouse event stuff.

PS Yeh bit of a minor ballsup, seems to do ctrl-mousewheel resize stuff ok now.

[eek]

Total off topic but Sesame Street has created a guide for creating apps for small fingers you can find it at

http://regmedia.co.uk/2012/12/19/ses..._practices.pdf

[xoggoth]

Cheers eek, that's a really good link for educational content design.

Technically, tablets are a huge issue I haven't even begun too look at, very little on the net how to do it. Not just a case of find/replace "mouse" for "finger" that's for sure.

[VectraMan]

Cheers eek, that's a really good link for educational content design.

Technically, tablets are a huge issue I haven't even begun too look at, very little on the net how to do it. Not just a case of find/replace "mouse" for "finger" that's for sure.

There's touchstart, touchmove and touchend events. It gives you an array of fingers, but assuming you're only interested in one it's pretty easy to connect that up to however you're handling mouse events and give you the same functionality as with a mouse.

[mudskipper]

Tile swapping worked OK - but had minor issues with text alignment

Chrome:

The 'Build a creature...' text is left aligned right at the edge of the grey border.

The 'All done! Click button 2 for another picture' - picture wrapped to a second line, but there was no space between the lines.

IE9:

'Build a creature...' centrally aligned, but bottom of text cut off a little. Same issue with lack of spacing on the 'all done' message.

Firefox:

Top text perfect. Same spacing issue on all done.


Edit: Not a bug - but took me a while to work out what Button 2 meant....