Has anyone managed to implement a slider GUI element for a Webform grid field?

Comments

quicksketch’s picture

quicksketch
he/him
commented
Status: Active » Closed (fixed)

This *is* possible through theming the existing grid component. Since help on theming is not provided in the Webform queue, I'm closing this one.

wOOge’s picture

wOOge commented

For those of you looking for a solution:

Step 1: Install jQuery IU.

I downloaded the latest jQuery UI, installed it into my theme folder under a subfolder called js, then added it into my .info file for my theme, with these lines:

stylesheets[all][] = js/jquery-ui/css/smoothness/jquery-ui-1.8.17.custom.css
scripts[] = js/jquery-ui/js/jquery-ui-1.8.17.custom.min.js

Step 2: Setup the grid question in your Webform.
You must set the answer value keys to the % of the slider that they represent. For example, if you have a question with 4 answers to choose from like:

Rate how much you like puppies: Not at all, Somewhat, Neutral, Lots, Tonnes

Each answer's key value must be as such:

Not at all = 0
Somewhat = 25
Neutral = 50
Lots = 75
Tonnes = 100

The numbers correspond to a percentage out of 100%.
If you have more or less answer possibilities, then you need to figure out the percentage of each by dividing the # of answers out of 100%.

Step 3: Insert the jQuery code
Copy the file /modules/system/html.tpl.php to your theme directory and paste the following code into the <head> area.

<script language="javascript">
(function ($) {
$(document).ready(function() {

$("#QUESTION1_ID .webform-grid tr.odd, #QUESTION1_ID .webform-grid tr.even").each(function() {
    var radios = $(this).find(":radio")//.hide();
   	$(this).find(".webform-grid-option").hide();
    	$(this).append("<td colspan='10' class='webform-grid-option-slider'></td>");
	
	var groupName = $(this).find(":checked").attr("value");	
	
	var newCell = $(this).find('.webform-grid-option-slider');

    $("<div></div>").slider({
      min: parseInt(radios.first().val(), 10),
      max: parseInt(radios.last().val(), 10),
      step: 25,
      animate: true,
      value: groupName,
      range: "min",
      slide: function(event, ui) {
        radios.filter("[value='" + ui.value + "']").click();
        $("label[for='" + ui.value + "']").addClass("slider-selected");
      },
      start: function(event, ui) {
        radios.filter("[value='" + ui.value + "']").click();
        $("label[for='" + ui.value + "']").addClass("slider-selected");
      }
    }).appendTo(newCell);
});

});
}(jQuery));
</script>

NOTE: You must set the step: 25 to the increment that your answers go in. So for this example it's increments of 25%.

Step 4: Get the ID(s) of the question(s).
In the above code you'll see QUESTION1_ID and QUESTION2_ID — you have to replace this with the actual html ID of the grid question. To get this ID you must look at the rendered source of your grid question. Once you get the ID — replace QUESTION1_ID with the ID. For each grid question you want to add sliders to you must add #QUESTION1_ID .webform-grid tr.odd, #QUESTION1_ID .webform-grid tr.even, — replacing QUESTION1_ID with the specific question's unique html ID.

Step 5: Clear your caches!
Clear your caches, and visit your webform, you should see some shiny sliders.

Hope that helps save someone some time.

rosso69’s picture

rosso69 commented

it is exact the solution i need. ANd looks like it could save a lot of time. But i can;t make it work somehow.
I check with an alert ("this works"); that works. But when i put in the code from your need example nothing happens in css or anywhere else.

try to make a custom module, but it in script.js. Nothing works.

Do i need to add an extra module next to jquery_update?