Is it possible to include a counter (total sum) for each cotainer

Question

I have created a categorization question that has 2 containers/categories:
     1.  Important factors
     2.  Least Importance (insert 10 factors)

I added the categories Min and Max syntax and this works beautifully.

Now, my client has came back and asked if it is possible to include a sum/counter of how many items are in each container.

For example:
             Importance Factors
                    Number of items in the container

            Lower importance
                 Number of items in the container

Can someone assistance me with this as I don't know how to make this happen?

Thank you in advance

Answer 1

Start by adding this HTML to wherever you want the count to display on the page:

<span class="containerCount1"></span>

Note that the "1" should be replaced with the number of category to display at this position.

Then add this script to the Categorization question:

<script>
$(document).ready(function(){
    $('#[% QuestionName() %]_div .sortable').on('sortstop', function(){
        $('#[% QuestionName() %]_div .rankedSortable').each(function(){
            var cat = $(this).data('col');
            var count = $(this).children().length;
            $('.containerCount' + cat).text(count);
        });
    });
    $('#[% QuestionName() %]_div .sortable').trigger('sortstop');
})
</script>

Comments

Hi Zachary,

It is not working and I don't know the reason why.   I have tried different things with no luck. May I send my .ssi file for you to have a look?

Thank you

---

Alright.

---

Your classes ought to be "containerCount1" and "containerCount2".

---

Yes,  I tried that too and it still didn't work.

---

I changed those two numbers and am seeing the totals get updated when I place items into either category.  If that's not what you're seeing, I'd need another .ssi.

---

The numbers are changing for me when I drop an item in.  If you want the values to change on hover, then change both "sortstop" to "sortchange".

---

Hi Zachary,

I am using Chrome as the browser and the number is not being displayed when I switch to another browser such as Edge or Firefox, the number is appearing.  How do I solve this so that the number appears in Chrome.

Thank you