Wiki Page, Canvas HTML Goodies to Sweeten Learner Engagement: 🍬 Drag & Drops

Wiki Page
2023-01-04T12:28:46-07:00

Click and drag each blue box under the correct action.

Match each action in Launchpad to its directions.

⬇️ Create a folder ⬇️

⬇️ Close a folder ⬇️

⬇️ Rename a folder ⬇️

Click on its name. Then, enter a new name.

Click outside the folder.

Drag an app onto another app.

Learn more about the ingredients of the code.

Now, it's your turn! Copy the code below and paste it into a page in your sandbox course (a course you can "play" in). Add ingredients to make it your own.





ITEM 1





ITEM 2





🏆 PRO TIPS:

⭐ You can add images as draggable objects. Insert your images in the Rich Content Editor where the ITEMS are listed.

⭐ Use columns inside of the drag and drop code to make use of the horizontal space. Your draggable items can be in multiple columns.

⭐ Drag and drops can be used for sequencing, categorizing, and matching activities.

⭐ Add a pop-up after your activity to display the answer.

⭐ If you have content after the drag and drop activity, beware that when editing the page in the RCE, that content may be covered up. You may want to create that content before adding your drag and drop activity.

Now that you've had a chance to play with the code, how might you use Drag & Drops in your Canvas courses? Add your ideas to the Padlet below and then we'll discuss them!