Storyline drawing a line point to point

Mar 03, 2022

I really don't know where to start with this, so I hope someone can give me some guidance.

I would like to create an interactive thing, that users can place wires on a picture of a device and when they submit it, it can be determined if they have placed the wires in the correct places.

the wires need to be variable in length and it needs to have several points to connect wires to and from.

Any help would be very much appreciated.


8 Replies
Scott Wiley

I think you could accomplish most of what you're envisioning by breaking down the actions into steps, each with the user clicking something or entering text. These actions can have triggers/variables applied to them and check for correct/incorrect with feedback.

Do you have a visual example to share?

Scott Wiley

I like that example David, and could maybe work if the possible drags/drops were limited on a step by step basis, one wire at a time. Unfortunately, there are too many possible combinations of inputs i the rig-sample. I was thinking of avoiding any drag and drops, as they can be problematic. If you do want DnDs, I suggest extensive testing on multiple devices, browsers, etc.

Take a look at a very limited example, with a freeform pick many interaction, just dealing with the first red wire starting from the upper left as "step 1" and limited distractors. You'd have to decide if you want multiple tries, immediate response after a single placement or delayed response after all placements, and things like that.

Without knowing the proper context of this activity, and what common mistakes are made, it's hard to be more realistic, but hopefully generates some ideas and alternatives.

David Anderson

Nice example, Scott. You're right about possible combinations becoming unmanageable. That's why I would not build a complete simulation to account for all possible choices. Instead, it makes more sense (to me) to build a series of smaller interactions that focus narrowly on only a few steps at a time. You can still achieve the goal but in smaller events.

I remember contracting a Flash programmer to help build a fully working multimeter. The interaction turned out great, but it was $$$ to build.

Martin Gregson

OK let me see if I can put this another way,

How do I program Storyline with"If point A is clicked then corresponding point B is Clicked AND then point C is clicked then corresponding point D is clicked, show a line or an object?

But if any of these points are incorrectly clicked Reset all points A,B,C etc to unclicked?

Scott Wiley

@David, yeah, I started out as a Flash programmer, so did quite a few jobs like that. ;)

@Martin, in the sample, I just used the quizzing functionality built-in to Storyline as a "pick many" and any triggers can be handled on the various feedback layers. As for any custom trigger, you almost talked yourself through it. I believe it's one of David's favorite sayings - "What do you want to do, when do you want to do it, and what do you want to do it to?" In your case, I guess "where do you want to do it" may apply.

Walt Hamilton


See if the attached sample does what your most recent post asks for.

It is set up so when clicking point B or C (in sequence), they can click them, then change their mind, but if any other point is clicked out of sequence, everything restarts.

It is set up so if you return to the slide, the line will remain drawn, and points correctly selected will remain selected.