The Drag and Drop element can be added by itself from the element dropdown, or we can add a Drag and Drop template together with a Page or Scrolling section element. The latter is the recommended option, as the single element is empty, but the template is pre-filled and works from the moment it is added.
Kindly note that you need Edit content permission to access the Content editor.
General set up
1. To add the Drag and Drop template, please follow this article called Adding Page Templates.
2. The screenshot below shows how the template looks once added. All that is needed is to edit the category headings and the draggable options.
3. Select the Edit button to make changes.
4. To edit the categories and options, scroll to the bottom of the Content section.
5. To add or remove a category, add or remove category headings. There can be up to four categories, and they appear in the order they are set up. You'll need to add or remove the options as well.
6. To add or remove options, please use the plus and minus buttons. You can also edit the text of the existing options. The options are randomly shown to the user to be dragged to the correct category.
Please keep the options text as short as possible - up to 104 characters.
Settings
Below are all the Drag and Drop element settings. They can be adjusted as needed.
Kindly note that the exercise can switch to Multiple Choice Questions (MCQ), where the user is presented with the option/statement and given the categories as multiple-choice options. The switch is automatic for mobile device users, but we can also show a toggle button if there are users with accessibility requirements.
Therefore, there are settings for both standard and accessible/mobile exercise versions.
Setting name | Default | What does it do? |
No correct/incorrect answers feedback | Unticked | When ticked, the user doesn't see correct and incorrect options feedback. |
Instructions | Drag each item to the appropriate column and then select Submit | Instructs the user what to do on a computer screen. |
Remove instructions when completed | Unticked | When ticked, the instructions text will disappear once the exercise is complete. |
Completion Action | SKILLCASTAPI.showNext(); | Add this code to ensure the next button appears when the exercise is complete. |
Set data - success | Empty | We can insert Variable and Value that can be used in more complex custom-code solutions. Please leave it empty. |
Set data - error | Empty | We can insert Variable and Value that can be used in more complex custom-code solutions. Please leave it empty. |
Success Message | You have now completed this exercise - select the Next arrow to proceed | A message that appears when the exercise is completed successfully - all options are dragged to the correct categories. |
Error Message | Not quite - select 'Correct Answers' to find out where you went wrong before you can proceed | A message that appears when the exercise is completed with mistakes - not all options are dragged to the correct categories. |
Accessible Version Alert | Please check one of the options! | This message appears if the user is trying to Submit without an option selected. |
MCQ Instructions | Select the correct category for each statement below | Instructs the user what to do. This instruction appears for the accessible/mobile exercise version. |
MCQ Success Message | Correct | A message that is shown when the answer is correct. This instruction appears for the accessible/mobile exercise version. |
MCQ Error Message | Incorrect. The correct option is [correctOption] | A message that is shown when the answer is wrong. This instruction appears for the accessible/mobile exercise version. |
Action Buttons | Submit | Buttons text. When the user completes the exercise, they select the Submit button. It locks the answers and shows which are correct or wrong. If the exercise is wrong, the user must select the Correct Answers button to see the correct answers and complete the exercise. They can then choose to select the Your Answers button to check how they answered. |
Accessible Button | Show button - Yes Accessible version | You can choose to allow users to switch to the accessible exercise version by having the Show button setting set to Yes.
Choose to add the button name or show the icon only by leaving the Name field empty.
 
When there is no Name, add an Aria-Label for accessibility.
Add a title for the hover-over message. 
|
Standard Button | Standard Version | If the Accessible Button is set not to show, the Standard Button won't appear either.
Similarly, here, you can set the Name, Aria-Label and Title of this button.
  |
Accessible Submit Button | Submit | An action button for the accessible/mobile exercise version. |
Use accessible button instructions | Unchecked | You can choose to show user instructions explaining what the accessibility and standard buttons do. |
Accessible button instructions | Select the icon to complete the exercise in accessible mode | An instruction next to the Accessibility button.
|
Standard button instructions | Select the icon to complete the exercise in standard mode | An instruction next to the Standard button.
 |
Set drag and drop summary | Unchecked | Please leave unchecked. |
Show one by one statement in accessible version | Unchecked | When checked, the options appear one at a time in the accessible/mobile exercise version. |
If you have completed all the module changes, please refer to the article titled What do I do when I finish creating or editing my module?.
*If you think you have the incorrect permissions, please contact your company admin or Customer success manager at [email protected].