Forum Discussion
Sequence drag and drop colours
Hello, I'm working in a storyline document a previous colleague built. I'm trying to edit the design of the sequence drag and drop. There are limited things you can do to the design right?
When i select an item to drag it turns light purple. How do you change the colours of a selected item? There is no state on this layer, it doesn't even open up to select individually.
Interested to know if someone can help with this.
Thank you!
6 Replies
Hi EAB,
Thanks for reaching out!
There are limitations to design capabilities when creating a graded sequence drag-and-drop quiz. Our product team is tracking a feature request for more customization options for these questions. and I've shared your feedback with them, so we'll update you with any news.
In the meantime, you may want to check out this sample slide posted by my teammate, Lauren. It demonstrates how to create a sequence drag-and-drop interaction using a freeform question, which allows for a bit more design flexibility. Please let me know if you have any questions!
Hi EAB
This interaction can be customized by applying your own design style to the elements through JavaScript. Defining a color palette or theme is straightforward, and you can use it to style the components consistently in your code. If you’re interested in a JavaScript solution, I can upload my Storyline file example.oh yes please! looks fantastic!
All you need to do is execute a JavaScript trigger when the timeline starts using the code below. Focus only on the "theme" section of the code. This is where you define your custom colors, placed next to the descriptions indicating which feature or part of the shapes will be affected.
var theme = { dragShapeFill: "#3B2F2F", // Background of the draggable item dragShapeStroke: "#D97706", // Border of the draggable item dragShapeStrokeWidth: "2px", // Border width of the draggable item hoverStroke: "#C2410C", // Border when mouse is over item hoverFill: "#F4A261", // Background when mouse is over item dragText: "#FFF7ED", // Text color inside the drag container numberCircle: "#F6C453", // The circular background for sequence numbers numberText: "#3B2F2F" // The actual digit color inside the circle }; var style = document.createElement("style"); style.innerHTML = ` .slide-object-dragdrop-shape, .slide-object-dragdrop-shape rect { fill: ${theme.dragShapeFill} !important; stroke: ${theme.dragShapeStroke} !important; stroke-width: ${theme.dragShapeStrokeWidth} !important; } .slide-object-dragitem-hover .slide-object-dragdrop-shape { stroke: ${theme.hoverStroke} !important; fill: ${theme.hoverFill} !important; } .sequence-ctrl-drag-container text, .sequence-ctrl-drag-container tspan { fill: ${theme.dragText} !important; } .sequence-ctrl-num circle { fill: ${theme.numberCircle} !important; } .sequence-ctrl-num text, .sequence-ctrl-num tspan { fill: ${theme.numberText} !important; } `; document.head.appendChild(style);
Fantastic thank you very much!
