Have an idea?

Visit Sawtooth Software Feedback to share your ideas on how we can improve our products.

Sliders For Grids

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
asked May 14, 2012 by nlaban (180 points)
retagged Aug 13, 2014 by Walter Williams

1 Answer

+1 vote
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: https://www.sawtoothsoftware.com/forum/1214/using-jquery-inside-ssi-web

Hope it can help you, regards,
João
answered May 15, 2012 by João Fernandes Bronze (2,040 points)
João,
    Thank you so much for your response and your time. I sincerely appreciate it. I am currently trying to get that to work. I believe the only difference with v8.0 is that the links for jquery are automatically incorporated into the header. I am trying to make it work but I am trying to figure out what the question name is. I am unsure as to what the difference is between "amount" and "PerguntaVAS1_v1." I am thinking amount is the ID that is called up from the script and PerguntaVAS1_v1 is the ID used to make the question in Sawtooth. Please correct me if I am wrong.

What kind of numeric answer do you get from this slider? Is it defined within that range of 1 to 60 and 30 is the middle point? I'm pretty sure I just answered my own question there but it never hurts to check.

Thank you for your time. I'm having a blast with the new version!

-Nate
Alright! Update: I got the slider to sow up and function. It does not return any data right now but I imagine I will get that when I figure out the ID situation. I have tried replacing the current ID "hidden_somevalue" my free format question name "td_a" and that doesn't seem to work. I'm almost there though! I just need a push in the right direction. This is great. Thank you!
So. first things first: this code gets a slider to work, combined with a text box where its current value is displayed, as the user moves the slider. "amount" is the variable with the value that is displayed. "PerguntasVAS1_v1" is the hidden variable that was defined in the "PerguntasVAS1" question, and holds the answer given (i. e., the final value given by the respondent).

What kind of numeric answer do you get from this slider? Is it defined within that range of 1 to 60 and 30 is the middle point? I'm pretty sure I just answered my own question there but it never hurts to check. 

Exactly! :]

The only thing I think I forgot to mention is the fact that in version 7.0.26 you'll have to copy the jQuery library folder into the "graphics" one on your project folder.

I hope I was clear, any doubt just ask (I also adapted that code, I don't master it at 100%, but what I know, I'll tell you).
(also, I think I got this code from here -> http://jqueryui.com/demos/slider/#rangemin - it has the source code there, give it a look! ;] )
That was very clear João, thank you! I got the slider and the text box to return the value. So neat! Thank you for your help! The value is still being returned as the text "amount," but I'm sure I just need to tweak the code a little to return the numeric value.  I really appreciate your help. Have a great day!
Ok, good luck, then! :] (don't forget that if you consider an answer useful you can vote it up or select it as best answer, it can be helpful for other users with the same doubts ;] )
Thanks João. Will do. Did you ever figure out how to return the actual value of the javascript variable so that it would export with your data set? value="" returns nothing for me and value="amount" just returns the word, amount.

    <input name="amount_a" id="amount_a" type="hidden" value="">
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!
Verify that slider has been moved
...