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);
        }
      });
      		
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us