Resizing Rectangle with Drag Interaction

Forum|Forum|8 years ago
December 7, 2017
3 replies
403 views

I have Captivate 2017 and am running on Windows 7. I am simulating a system and teaching students how to resize a window by clicking and dragging the side. The system isn't built yet, so I need to create the simulation manually. Is there a way to have students interact with a rectangle on the screen and resize it? Or maybe control an animation of the window resizing based on cursor position? Does captivate have system variables for cursor position (x and y)? Thanks!

This topic has been closed for replies.

nancyh26439098Author

Participating Frequently

Thanks! These are great suggestions. I haven't worked with javascript before. Can you suggest any resources to look at on how to use javascript with Captivate and common javascript commands?

With Konvajs, what do I need to do to incorporate the code you referenced into Captivate (https://konvajs.github.io/docs/sandbox/Image_Resize.html)? I created a new project and saved darth-vader.jpg and yoda.jpg to a folder assets in the same directory as the Captivate project. I selected On Enter, Execute JavaScript and pasted the code into the script window. I previewed the project In Browser and HTML5 in Browser, but it didn't work. I also tried inserting the images into the Captivate page, but that didn't work, either.

Jeremy Shimmerman

Participating Frequently

It is possible but I wouldn't bother trying to customize Captivate's built in drag and drop functions- it's deeply embedded in the CPM file and is probably more trouble than its worth.

What you could do, if you are using captivate, is import a separate HTML file as an HTML5 animation using a separate javascript library. I've used Konvajs.

https://konvajs.github.io/docs/sandbox/Image_Resize.html