Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1
  • 2

TOPIC: Using pictures in ranking question

Using pictures in ranking question 4 years 11 months ago #57716

  • paulfiner
  • paulfiner's Avatar
  • Offline
  • Expert Lime
  • Posts: 92
  • Thank you received: 1
  • Karma: 1
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 administrator has disabled public write access.

Using pictures in ranking question 4 years 11 months ago #57723

  • DenisChenu
  • DenisChenu's Avatar
  • Online
  • Moderator Lime
  • Posts: 8214
  • Thank you received: 1119
  • Karma: 332
Hello Paul,

For me it work ?
There are some disgracious but it's need some modification in template.css
#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 :)
The administrator has disabled public write access.

Using pictures in ranking question 4 years 11 months ago #57725

  • paulfiner
  • paulfiner's Avatar
  • Offline
  • Expert Lime
  • Posts: 92
  • Thank you received: 1
  • Karma: 1
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 administrator has disabled public write access.

Using pictures in ranking question 4 years 11 months ago #57730

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5408
  • Thank you received: 1154
  • Karma: 479
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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Using pictures in ranking question 4 years 11 months ago #57731

  • paulfiner
  • paulfiner's Avatar
  • Offline
  • Expert Lime
  • Posts: 92
  • Thank you received: 1
  • Karma: 1
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 administrator has disabled public write access.

Using pictures in ranking question 4 years 11 months ago #57735

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5408
  • Thank you received: 1154
  • Karma: 479
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.
#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.

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Using pictures in ranking question 4 years 8 months ago #61066

  • mattias
  • mattias's Avatar
  • Offline
  • Senior Lime
  • Posts: 79
  • Karma: 1
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: 4 years 8 months ago by mattias.
The administrator has disabled public write access.

Using pictures in ranking question 4 years 5 months ago #65048

  • Hunch
  • Hunch's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 5
  • Karma: 0
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 administrator has disabled public write access.

Using pictures in ranking question 2 years 10 months ago #93810

  • nicktruch
  • nicktruch's Avatar
  • Offline
  • Junior Lime
  • Posts: 25
  • Karma: 0
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 :
$(document).ready(function(){
HERE
});
and second time here :
HERE
$(document).ready(function(){
 
});
3. I've placed the following code in the source of my ranking question :
<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.



To test that it works, I use the 'preview question' button...



Where am I wrong ?
The administrator has disabled public write access.

Using pictures in ranking question 2 years 10 months ago #93813

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5408
  • Thank you received: 1154
  • Karma: 479
Do you get any JavaScript errors in the console?

Can you activate a test survey for us to see?
Cheers,
Tony Partner

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

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Using pictures in ranking question 2 years 8 months ago #96130

  • nicktruch
  • nicktruch's Avatar
  • Offline
  • Junior Lime
  • Posts: 25
  • Karma: 0
Hi,

(sorry for the delay, I haven't seen your reply)

I've simplified to process just to test the drag and drop function (without images).

Here it is : I've checked both template.js and css and here is a screenshot of my question source...
The test survey is here : enquetes.univ-lyon2.fr/index.php?sid=87266&lang=fr

No more javascript errors in the console...

:-(
Attachments:
Last Edit: 2 years 8 months ago by nicktruch.
The administrator has disabled public write access.

Using pictures in ranking question 2 years 8 months ago #96138

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 5408
  • Thank you received: 1154
  • Karma: 479
You have the wrong question ID.

The script in the source should be:
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function() {
		dragDropRank(370);
	});
</script>
Cheers,
Tony Partner

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

LimeSurvey is open-source and run entirely by volunteers so please consider donating to support the project.
The administrator has disabled public write access.

Using pictures in ranking question 2 years 8 months ago #96141

  • nicktruch
  • nicktruch's Avatar
  • Offline
  • Junior Lime
  • Posts: 25
  • Karma: 0
It works !!!!!

Thanks 1000 times,
I love u LimeSurvey Team :-*
The administrator has disabled public write access.
  • Page:
  • 1
  • 2
Moderators: ITEd
Time to create page: 0.213 seconds