Interactive: Sortable Content

Sortable Content

 

Want to add a little bit of interaction to your course without using another program? Try Sortable Content. In order to use this feature, just copy and paste the code below and add your own content within the <p> tags. 

*HT to Amanda Webster of Weber State University for sharing this in the Canvas Community!

<div class="enhanceable_content sortable" style="display: none;">
<div style="text-align: center; background-color: #68838b; color: #ffffff; width: 300px; height: 50px;">
<p style="padding: 15px;">Box 1 - Click and Drag to Re-sort</p>
</div>
<div style="text-align: center; background-color: #50a6c2; color: #ffffff; width: 300px; height: 50px;">
<p style="padding: 15px;">Box 2 - Click and Drag to Re-sort</p>
</div>
<div style="text-align: center; background-color: #009acd; color: #ffffff; width: 300px; height: 50px;">
<p style="padding: 15px;">Box 3 - Click and Drag to Re-sort</p>
</div>
</div>

 

Example

 

 

Box 1 - Click and Drag to Re-sort

Box 2 - Click and Drag to Re-sort

Box 3 - Click and Drag to Re-sort