Matching drag and drop activity

JoC62​  I've created and ran a script in Rise that you should be able to use to build what you want; as long as I understood your requirement exactly! Here's what to do:

In the builder

1. Design your activity (add items, set colours, sizes, etc.)
2. Click Copy HTML button

Create the HTML file

1. Open Notepad (Windows) or TextEdit (Mac)
   • On Mac, also go to Format → Make Plain Text (Cmd+Shift+T) so it doesn't save as RTF
2. Press Ctrl+V (or Cmd+V on Mac) to paste the HTML
3. Save the file:
   • File → Save As
   • Filename: index.html (this exact name matters — Storyline looks for it)
   • Save as type dropdown: change from "Text Documents" to "All Files"
   • Save it somewhere you'll find it — e.g. Desktop

Put it in a folder

1. Create a new folder, e.g. Desktop/dragdrop-activity
2. Move your index.html into that folder

So you should have: Desktop/dragdrop-activity/index.html

Insert into Storyline

1. Open Storyline and go to the slide where you want the activity
2. Top ribbon: Insert tab → click Web Object
3. In the Address field, click the small folder icon at the right
4. Browse to and select the FOLDER (dragdrop-activity) — not the file itself
5. In the dialog:

• "Display in slide" — selected (don't pick "new browser window")

1. Click OK
2. A grey placeholder rectangle appears on the slide. Drag its corners to size and position it where you want the activity to show

You won't be able to view the interaction in the web object until you publish

https://share.articulate.com/i2cyT-u4hHgZUzGx7mnAW