Forum Discussion
Drag and Drop Help Needed
I have but I don't seem to be able to change any of the colors except for the background of the box. I don't like the way the buttons/draggable elements look. Do you know if there is a way to change them that I am not thinking of?
It doesn't look like that template is editable in any practical manner. The line numbers could be modified, but the rest seems to be linked to external resources. Sorry.
Other than using that built-in solution, you are rather limited. The normal drag & drop cannot be made to start in a "dropped" state, which is why things appeared to stack; nothing starts as dropped in a target. In any case, when another item is dropped over an existing drop state, the original returns to its non-dropped state and starting position. The items will never swap positions the way you desire.
This may be too much but: If you are JavaScript savvy, you could look at incorporating an H5P module like https://h5p.org/content-types/sort-the-paragraphs . The options here are to set it up on an external server and embed the content into your slide, or use a packaging utility to include all the content with your Storyline project, which you then can display on you slide as you see fit. Out of the box, there is still no direct style customization, but It seems more likely that this could be easily styled via some script. The H5P results are usually transferred via xAPI.
Thank you so much. I really appreciate your explanation and for looking into it for me. I hope that theyll someday make the sequence quiz more customizable.
How do you modify the line numbers?
You would need to modify the styling via JavaScript. Honestly, it would be lot easier to just hide all of the numbered markers and then place your own on the slide, styled however you like.
To hide all of the line markers, add this script to run on slide timeline start. Change the ID associated with the main Sequenced Drag & Drop container to match the one on your slide (right click one of the markers to see it at the top of the context menu).
/* The format of the numbered bullets for the Sequence Drag & Drop Question <svg xmlns="http://www.w3.org/2000/svg"> <g transform="translate(5.476041666666667, 9.778645833333334)"> <circle cx="0" cy="0" r="3.476041666666667" style="fill: black; stroke: white; stroke-width: 0.782292;"></circle> <text text-anchor="middle" x="0.19557291666666668" y="1.9557291666666667" fill="white"> <tspan>1.</tspan> </text> </g> </svg> */ const seqDDId = "6jH1j5KJI3x" //get this by right clicking on the main D&D container or a marker const seqDD = {name: 'list_' + seqDDId} //prefixed with 'list_' in the DOM const svgSeqDD = document.querySelectorAll("[data-model-id='" + seqDD.name + "'] svg") //get all of the numbered bullets for (let i = 0; i < svgSeqDD.length; i++) { svgSeqDD[i].style.visibility = "hidden" //Easiest to hide each of the numbered bullets }
