Have an idea?

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

Javascript, JQuery, HTML, CSS, programming, etc

Hi, I am looking for some good reference books on the various aspects of programming within Sawtooth. Any suggestions would be great!!
asked Jan 23, 2015 by ab3886 (310 points)
retagged Jan 23, 2015 by Walter Williams

1 Answer

+1 vote
I don't think there are any reference books on the subject.  Whenever I need to customize something, I talk to a web developer (who I found on www.freelancer.com) and describe to him how I want it customized and he usually can take care of it for me.  I will usually Google terms like "css example nice html table" which leads to links like this:
http://www.freshdesignweb.com/free-css-tables.html

Then I send these links to my developer and he can usually give me a CSS file or script to add to the SSIWeb Headers (in Survey Settings --> Headers and Footers --> Headers).  

Try to avoid HTML changes, because that usually requires free format questions.  CSS/jQuery/Javascript are best because you can usually just add them to the header (and sometimes need to give your images a class name).

For example, here's a script that we made just last week from him that makes it so that when you click on an image in a MaxDiff, it also selects the radio button below it.  (We used this inside a "Best only" MaxDiff using "Style 3".  It is new so I haven't tested to see if it works in other scenarios, but I plan to adapt it to others too when we have time)

Step 1: Each image needs to have "class=img4" in the html tag (e.g., <img src="[%GraphicsPath()%]image.jpg" class="img4" alt="" border="0">).

Step 2: The following goes in the SSIWeb headers.

-------

<style type="text/css">
.img4{
height:100px;
 vertical-align:middle;
margin-right:5px;
cursor: pointer;
}
</style>
<script type="text/javascript" src="/[projectfolder]/graphics/system/script.js"></script>

-------

Step 3: The following is all inside script.js in the project's system folder.

-------

$(document).ready(function(){
    $(".img4").click(function(){
        var index = $(this).parent().parent().index()+1;
        $(this).parent().parent().parent().siblings().children().children('.graphical_select').removeClass('radioboxselected');
        $(this).parent().parent().parent().siblings().children().children('.graphical_select').addClass('radiobox');
        $(this).parent().parent().parent().siblings().children().children('input[type=radio]').attr('checked',false);
   
   
        $(this).parent().parent().parent().siblings().children().eq(index-1).children('.graphical_select').removeClass('radiobox');
        $(this).parent().parent().parent().siblings().children().eq(index-1).children('.graphical_select').addClass('radioboxselected');
        $(this).parent().parent().parent().siblings().children().eq(index-1).children('input[type=radio]').attr('checked',true);
       
    });
   
   
    $(".img4").mouseenter(function(){
        var index = $(this).parent().parent().index()+1;
        $(this).parent().parent().parent().siblings().children().removeClass('highlight');
       
        $(this).parent().parent().parent().siblings().children().eq(index-1).addClass('highlight');
    });
   
   
    $(".img4").mouseleave(function(){
        var index = $(this).parent().parent().index()+1;
        $(this).parent().parent().parent().siblings().children().removeClass('highlight');
    });
   
   
   
   
});
answered Jan 26, 2015 by Joel Anderson Bronze (1,310 points)
...