Sliders For Grids

Question

Hey everyone! Has anyone had any luck yet getting the slider elements from semantic differential questions into grid style or free format questions in v8.0? Would I be better of getting the JQuery script and modifying from there or manipulating a free format? Currently I am approaching it from the perspective that I need to manipulate the free format question but I am open to giving JQuery a shot in the new version. I appreciate your time in advance!

-Nate

Answer 1

Hi Nate,

I don't know if it this is helpful to you, but I got to put a jQuery slider to work in a free format question in version 7.0.26. Here you can see the details: http://www.sawtoothsoftware.com/forum/1214/using-jquery-inside-ssi-web

Hope it can help you, regards,
João

Comments

One more thing. With 8.0 you do not have to put this in the global header since jquery is available on all pages.

---

Well, I got it after modifying the code. To sum up what was done:

In order to get a slider on a free format variable here are the steps:

1. Create a free format variable in this case mine is called "amount_a"
2. On the advanced tab copy and paste this into the head:
<script>
    $(function()
    {
        $( "#slider" ).slider(
        {
            range: "min",
            value: 30,
            min: 1,
            max: 60,
            slide: function(event, ui)
            {
                      $( "#amount_a" ).val( "$" + ui.value );
                  }
        });
        $( "#amount_a" ).val( "$" + $( "#slider" ).slider( "value" ) );
    });
</script>

3. Under the "Variables / Question HTML" menu within the free format question "amount_a" is defined as a text variable type.

4. Add this to your HTML

<div id="slider"></div>
 
<input type="hidden" name="somevalue" id="hidden_somevalue" value="">
 
<script type="text/javascript">
$(document).ready(function(){
  $("#slider").slider({
    stop: function(event, ui) {
      $("#hidden_somevalue").val(ui.value);
    }
  });
});
</script>

<p>
    <label for="amount">Valor actual:</label>
    <input type="text" id="amount_a" name="amount_a" style="border:0; color:#f6931f; font-weight:bold;" />
    <input name="amount_a" id="amount_a" type="hidden" value="">
</p>

That's it. Keep in mind you will need to change the variable names in the function for each question so the values are returned correctly into your sawtooth database. Big thanks to João Fernandes for all of your help.

---

Sorry for the late reply, Nate. Yup, jQuery comes bundled with SSI Web 8.0, so no need to import it. 7.0.26 was the last version to incorporate MooTools instead of jQuery, what explains the need of the imports.

Hummm, looking at your code, I might be wrong but I think you're doing the same thing I did: "PerguntasVAS1_v1" is a hidden variable that is defined in my question, and stores the slider value. As a hidden variable, you can get its value to be exported into your dataset. Or maybe I got a little bit confused! :]

---

Hey João! As the function was written before it did not store the value of the answer in the SQL database therefore it did not return a value when the answer was submitted (maybe this is an 8.0 thing?). What I did was name my question "amount_a" and used that text within the function as well as the HTML input tag. This solved the issue of returning the value to the database.

I tried to organize and post your modified finalized code on the forum so that others could easily understand how to accomplish getting the slider on their page without having to read through an entire thread. That said, I still haven't figured out how to get these sliders into a grid so I'm really only half way there.

---

Maybe I forgot to mention something on the other thread, but in my case the hidden variable defined in the free format question actually stored the slider's value into the dataset. Nevertheless, you got it to work, that's what matters.

In what concerns to grids, I've never used them, so good luck!