Forum Discussion
Draw a line through the dots exercise
I'm only an intermediate with coding and I need help with this. I have to rebuild a course that was done previously in Unity in Articulate Storyline. The exercise I have to recreate involves three rows and three columns of dots and the User has to draw a line through them all with their mouse not lifting up the mouse and draw four straight lines. There are two possible answers and both they are supposed to draw outside the dots to get it right. Does anyone have a storyline example on how to code something like this that I can download. Basically I need to be able to do a freestyle line drawing with the mouse anywhere on the slide but it will trigger when they have crossed over the dots.
I've researched this and haven't come up with anything that will teach me how to do this. or storyline file with the code example I can look at. I've attached a screen shot of what the correct answers are and the setup from the old course.
Is this even possible to do in Storyline?
Please any help would be greatly appreciated.
1 Reply
I do enjoy unique technical challenges to motivate learning.
Try this approach as a starting point. It pretty much does as you requested, with some minor limitations. The mechanics of drawing could be modified to your needs.
It uses a couple of older and lesser known JavaScript libraries, but they still work and do a great job.
Demo: https://360.articulate.com/review/content/d5ad20c2-a469-4c4e-9418-7b9b262b3894/review
Basically, we copy all of the individual dot shapes into a single SVG, position them according to the original layout, and then flatten the image into paths with explicit coordinates. We then draw lines on this SVG, and compare the lines to each of the paths to determine if they overlap. A custom class is used to draw lines onto the slide.
If you need it to detect intersects to the outside edge of a wide line, you could change the code to draw contiguous rectangles instead of lines.
Project file is attached.
