I would like to design a connect the dot game for 3 to 5 year olds at our preschool. I saw this somewhere in the ZIM website, or perhaps on a youtube video.
Could someone direct me where to find a starting point for learning how to do this in ZIM? I am working in Adobe Animate.
Many thanks
Rod
Hey I made a tool for creating a connector game
My video in dutch
Zapp tool
example apple with FIT
example cathead to FULL
the original code has not the cat in the centered
what was original avaliable on codepen but not worling in ZIM editor
What a great resource! It may take me some time over the next few days to work through this but I will get back to you as I work through it. Thank you for taking the time to share this. It is quite a steep learning curve for me but this really helps so much.
Warm regards
Rod
no problem,
ask me question
free to help you
and spread the word ZIM to teachers
use SLATE - ZIM Kids Online Code Editor and Viewer for Kids Learning Code! and HELP to learn more 
I'm working through this post slowly for understanding. Do you know where I can see the code for the following link so I can work through it?
https://zimjs.com/cat/connectors.html
If you are viewing any HTML page you can right click and select View Source - or use CTRL U as a hot key - at least on PC browsers.
Thank you for help so far. I think I am almost where I need to be at this stage.
In the code below and in the diagram, you will see that the connectors are there, but they are automatically being centred in the screen rather than appearing in their absolute position (in the corners of the house).
I think there must only be a small change to the code but I can't seem to work it out. I have removed the center() but it doesn't work.
Are you able to see what I have missed here?
// Define the coordinates for the connectors
const points = [[992,592],[955,294],[1217,362],[1178,592]];
const connectors = new Connectors({
points: points,
node: new Circle(10, red).centerReg(),
line: new Line({
color: green,
thickness: 10
}),
nodeRollColor: orange,
dropType: "on",
dblclick: false,
deleteNode: false,
//max: 70
}).center();
Well, I think I have worked this out .... this I what I did......
I added the pos.... (you will see this in the code below.....
The last thing I have to do in this little project for our preschool is to work out how to reset the whole thing when the button is clicked...
// Define the coordinates for the connectors
const points = [[546,497.9],[509,199.9],[491.25,195.9],[489.75,152],[789.25,229],[789.25,271.4],[771,267.9],[732,497.9]];
const connectors = new Connectors({
points: points,
node: new Circle(7.5, red).centerReg(),
line: new Line({
color: green,
thickness: 10
}),
nodeRollColor: orange,
dropType: "on",
dblclick: false,
deleteNode: false,
//max: 70
}).pos(479.75,142)
this.replay.on("click", reset);
function reset() {
// I'm trying to reset so that students can connect again from the start.
// It is part of an early art class idea the teacher wanted.
}
If I am being too much of a pain in asking these questions, let me know!!!! It has been so helpful for me who really has limited programming experience. The kids are loving the results.
Sometimes for reset, the easiest thing is zgo("pagename.html"); and it just refreshes the page.
Otherwise, resets are often a bunch of steps to.... um... reset things ;-). It is bedtime and I teach all day tomorrow... so maybe later... but keep at it.
