Articulate Storyline 360: Using JavaScript to control the Submit after Learner Interaction in a Sequence Drag-and-Drop Activity

Step 1: Set Up the Drag-and-Drop Interaction

✔ Open your project in Storyline 360.
✔ Here we have Inserted a slide with three draggable items (you can use any number of items for your activity).

Tip: Keep your design simple so learners can focus on the interaction itself. 

Step 2: Insert a Custom Submit Button

✔ Draw a shape (rectangle, rounded rectangle, or custom shape). 
✔ Label it “Submit.” 
✔ Place it where you’d like on the slide (usually at the bottom right).
✔ Change its initial state to Disabled. 

To check: Preview the slide. The Submit button should appear but remain unclickable. 

Step 3: Create a Control Variable

✔ Go to the Variables panel.
✔ Add a new variable: 

• Name: ‘submitEnabled’
• Type: True/False
• Default Value: False

This variable will control when the Submit button becomes active.

Step 4: Add JavaScript to Initialize the Variable

✔ Add a new trigger:

• Action: Execute JavaScript 
• When: Timeline starts 
• Object: This slide 

✔ Paste the following JavaScript code: 

const container = document.querySelector(‘.sequence-ctrl-scroll-area-contents’);
const checkInterval = setInterval(() => {
const draggableItems = document.querySelectorAll(‘.sequence-ctrl-drag-container’);
let anyOutside = false;
draggableItems.forEach(item => {
if (!container.contains(item)) {
anyOutside = true;
}
});
if (anyOutside) {
clearInterval(checkInterval);
console.log(‘Item moved out of container. Enabling Submit.’);
setVar(‘submitEnabled’, true);
}
}, 300);

This ensures that the ‘submitEnabled’ variable is set to false when the slide loads, keeping the Submit button disabled. 

Step 5: Enable the Submit Button Dynamically

Finally, connect the variable to the Submit button.

✔ Select the Submit button.
✔ Add a trigger: 

• Action: Change state of [Submit button] 
• To state: Normal 
• When: Variable changes 
• Variable: ‘submitEnabled‘ 
• Condition: ‘submitEnabled’ = True 

Now, when a learner interacts with the drag-and-drop activity, the Submit button will become enabled. 

Step 6: Test the Interaction

Finally, connect the variable to the Submit button.

✔ Preview the course.
✔ At the start, the Submit button should be disabled.
✔ Drag one item onto its target. 
✔ The Submit button should change to enabled (Normal state). 
✔ Continue testing with other items to confirm functionality.

Note: If the button does not enable, double-check your triggers and make sure the variable is linked correctly.