Draw a line through the dots exercise

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.