Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Using pictures in ranking question

paulfiner
Offline
Premium Member

More

14 years 1 month ago - 14 years 1 month ago #57579 by paulfiner

Replied by paulfiner on topic Using pictures in ranking question

Hi Tony

Your picture example looks great and is exactly what I needed. However, when setting up the workaround I'm not getting the new drag and drop question.
I thought I'd try and get it working without pictures first but I just have the original ranking question showing.

The first javascript file has been copied to template.js and I have added the second smaller file to the actual ranking question.

Here's a link to my survey: finersurveys.limequery.com/19197/lang-en

Last edit: 14 years 1 month ago by paulfiner.

The topic has been locked.

DenisChenu
Offline
LimeSurvey Community Team & Official Partner

More

14 years 1 month ago #57588 by DenisChenu

Replied by DenisChenu on topic Using pictures in ranking question

paulfiner I don't see the template.js link in the source of your template.

The link have to be set in starpage.pstpl, you can found it in default template.

To tpartner you're right

, but we already made some modification woth some problems with old template .

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member. - Professional support - Plugins, theme and development .
I don't answer to private message.

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

14 years 1 month ago - 14 years 1 month ago #57634 by tpartner

Replied by tpartner on topic Using pictures in ranking question

Did you figure this out Paul?

As Shnoulle says, you need to add the following just before the </head> tag in startpage.pstpl:

Code:

<script type="text/javascript" src="{TEMPLATEURL}template.js"></script>

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Last edit: 14 years 1 month ago by tpartner.

The topic has been locked.

paulfiner
Offline
Premium Member

More

14 years 1 month ago #57716 by paulfiner

Replied by paulfiner on topic Using pictures in ranking question

Hi Tony

I finally got some time to try your workaround and managed to get the first part sorted.
However, the images part doesn't seem to work and the 3 images I have tried just appear in the question text.

My example survey is still live so you can see what I mean.

The topic has been locked.

DenisChenu
Offline
LimeSurvey Community Team & Official Partner

More

14 years 1 month ago #57723 by DenisChenu

Replied by DenisChenu on topic Using pictures in ranking question

Hello Paul,

For me it work ?
There are some disgracious but it's need some modification in template.css

Code:

#question2505 .dragDropTable li {
    background: none repeat scroll 0 50% transparent;
    border: 0 none;
    height: 80px;
    width: 80px;
}
#question2505 .dragDropTable .dragDropChoiceList, #question2505 .dragDropTable .dragDropRankList {
    min-height: 80px;
    min-width: 80px;
    width: auto;
}

Somethink like that

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member. - Professional support - Plugins, theme and development .
I don't answer to private message.

The topic has been locked.

paulfiner
Offline
Premium Member

More

14 years 1 month ago #57725 by paulfiner

Replied by paulfiner on topic Using pictures in ranking question

Hi

It seems to be working now. I added in your extra bit of CSS and everything works.
Thanks for all you help (and Tony!)

Cheers

Paul

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

14 years 1 month ago #57730 by tpartner

Replied by tpartner on topic Using pictures in ranking question

but it's need some modification in template.css

Yep, thanks Shnoulle, you need to modify the CSS for the size of your images as stated in the workaround:

These styles are for the default template using 50x50px images (as in the demo) and may need to be modified for other templates or image sizes.

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

The topic has been locked.

paulfiner
Offline
Premium Member

More

14 years 1 month ago #57731 by paulfiner

Replied by paulfiner on topic Using pictures in ranking question

I have now added in all the images to complete the question and it looks good.

How difficult would it be to arrange the images into 2 or 3 columns?
In my actual question I have 24 brands on the left and the respondent must rate their top 12.
Having all 24 brands in a long list doesn't look too nice.

Cheers

Paul

The topic has been locked.

tpartner
Offline
LimeSurvey Community Team

More

14 years 1 month ago #57735 by tpartner

Replied by tpartner on topic Using pictures in ranking question

There is no real way to force an unordered list to wrap into columns but adding something like the following to template.css should wrap the lists into rows. I'm not sure this behaviour is very intuitive though.

Code:

#question2505 .dragDropTable .dragDropChoiceList, 
#question2505 .dragDropTable .dragDropRankList {
    width: 285px;
}
 
#question2505 .dragDropTable li {
    float: left;    
}

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

The topic has been locked.

mattias01
Offline
New Member

More

13 years 10 months ago - 13 years 10 months ago #61066 by mattias01

Replied by mattias01 on topic Using pictures in ranking question

what kind of questions should I use to achieve that effect with drag and drop my images? libraries and documentation indicating where I add?

Last edit: 13 years 10 months ago by mattias01.

The topic has been locked.

Hunch
Offline
New Member

More

13 years 7 months ago #65048 by Hunch

Replied by Hunch on topic Using pictures in ranking question

Using pictures with drag and drop was exactly what i needed. Thanks!

I want people te drag 3 images in preferred order (within one column). I can solve this by hiding the ranking column, but limesurvey doesn't store this column.

Is it possible to load the images directly into the ranking column and hide the choises column?

The topic has been locked.

nicktruch
Offline
New Member

More

12 years 1 month ago #93810 by nicktruch

Replied by nicktruch on topic Using pictures in ranking question

Hi,

I'm desperately trying to implement the drag-and-drop function in LS 1.92, but I can't even see any effect on the ranking question which remains untouch. Here is what I've done, following this workaround instructions :
1. JS activated as told in set up your survey to use javascript'
2. I've placed the large script in my template.js file :
first time here :

Code:

$(document).ready(function(){
HERE
});

and second time here :

Code:

HERE
$(document).ready(function(){
 
});

3. I've placed the following code in the source of my ranking question :

Code:

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
   dragDropRank("99638X1X9");  
});
</script>

4. I've inserted the CSS at the end of the template.css and I'm using the default template
I've checked that template.js is called from startpage.psptl
Here is a screenshot of my question and of the preview.