Script: Drag and Drop Buckets - Show Card Counter

This article will show you how to add a Card Counter in a Drag and Drop Bucket question

Background

Lets say you have programmed a 'Drag and Drop Bucket' question with the drag items stacked on top of each other so you only see one at a time. In this scenario you may want to add a counter so a respondent knows how many items are left to rate. 

Below is a very basic example:

Instructions

1. Program your 'Drag & Drop Bucket' question
2. Access the HTML editor tied to the 'Instructions' field
   
   1. Access the Source Code Editor
      • See article: Source Code Editor
      • Add the following code to this field
        

        <div style="text-align: center;">Item <span class="items-left-container">1</span> of <span class="items-total-container">99</span>.</div>
        			

      • You can add any additional styling you wish
3. Add the following code to the '</> Add Javascript' field:
   • See article: Adding JavaScript and/or CSS to a Question
   • Update the question number to match your exercise
     

     var $ = jQuery,
         q = $("#question-Q84"), /* UPDATE YOUR QUESTION NUMBER HERE */
         items = q.find(".cm-dd-drag-item"),
         items_total = items.length;
     
     q.find(".items-total-container").text(items_total);
     
     items.bind("dragstop", function() {
       var items_dropped = $(".cm-dd-bucket .cm-dd-drag-item").length;
       if (items_dropped == items_total) {
         q.find(".cm-instructions").slideUp("slow");
       }
       else {
         q.find(".cm-instructions").show();
         q.find(".items-left-container").text(items_dropped + 1);
       }
     });