Forum Discussion
Drawing Annotation on Storyline Slide
Demo: https://360.articulate.com/review/content/518383b2-1161-408d-b9f5-adb9a6f57a11/review Inspired by code discussed on: https://img.ly/blog/how-to-draw-on-an-image-with-javascript/ Using C...
Offcourse i cannot resist a challenge. So to detect whether a user's drawing is valid you need to convert the image to base64. Do try it with 2 similar but different images.
https://www.base64-image.de/
Here you can create base64 encoding.
Then you compare the outputs like here.
https://codepen.io/rosca/pen/NWLqLJ
And you get a result in amounts of pixels that differ. If you would want this to work in Storyline, you need to do some testruns...how much pixels the endresult may vary. I made 2 images, i with an ok-selection...that varied 750 pixels, and one completely off..that varied > 8000 pixels.
If time permits i make a demo of this.
I recently started looking at this project again. I adapted the annotation example I posted earlier and added some test code for assessing the user-drawn input versus a couple of predetermined keys. This example used Resemble.js to compare the images. It has a numer of options that could be useful for finetuning comparisons.
Demo- https://360.articulate.com/review/content/868a0b98-e757-4355-909f-85d09337f2eb/review
The script is a hot mess right now and it is a bit slow due to a lot of extraneous debugging code, but it does a fair job at assigning a score to the user input. This example is contrived, but think of somethng like asking someone to draw in the missing path (in this case, the Arkansas River).
When I get a chance to clean this up, I will post a more complete example.
