Solved
Counters for PGR Questions
I have a survey where respondents drag and drop items to groups in a PGR question, and have set validation such that an exact number of items is allowed in each group. Of course, if a respondent places more or less groups than the exact number allowed in each one, they'll get an error message upon trying to go to the next page.
However, we're interested in two things: a) showing respondents exactly how many items they've already included in each group as they're dragging and dropping, and b) if possible, showing an error message whenever more items are added to a group than allowed (i.e. in real-time, before the respondent even clicks on the "next" button). Right now, we're actually using the PGR question to have people categorize into groups, where the ranking within each group does not matter at all, and as such I made the "ranking" that shows up for an item when it's dragged into a group to be hidden. We could instead just leave the ranking information on the items whenever they're dragged into a group as visible (to have a version of a "count") as that will of course show the items as numbered with a "ranking" in each group. However, we think this will potentially give respondents the impression that they are indeed ranking the groups, so we ideally just want a counter next to each group that indicates how many items have been placed in that group.
As an additional extra feature, if there was some way to have an error message be triggered whenever that count surpassed the maximum amount of items allowed (already specified with validation), that would be fantastic.
Best answer by DRRTGCC
Figured this out; it's rather simple with some JQuery. Because I can't paste JQuery or Javascript code on here, even when formatted, I'm including a snapshot of the code I use, which updates the counter variables whenever the mouse is moved on the page. Anyone who might want to use this just needs to replace the selectors for the groups, and of course include in the question HTML a `<span class="total0"></span>` and `<span class="total100"></span>` , or however they wish to name their variables, along with whatever formatting or extra text they want to display those counters with. Hope this helps!
!
View original
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.