Check out the LimeSurvey source code on GitHub!

Using pictures in ranking question

More
6 years 1 month ago #54631 by badronald
I am trying to use pictures in the ranking question type. I currently have Version 1.85+ (7191), and the images do not show up. I want to do this and I am thinking of using the drag and drop ranking style.

I have the answers in the ranking question like this
1<img width="225" height="225" src="/limesurvey/upload/surveys/52262/images.jpg" alt="" /><br />

Please Log in to join the conversation.

More
6 years 1 month ago #54634 by tpartner
I think you'll need to place the images in the question text with names and then place the names in the "choices" list to be dragged into the "ranking" fields.

Cheers,
Tony Partner

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

Please Log in to join the conversation.

More
6 years 2 days ago #57143 by paulfiner
Did you ever manage to find a solution to this?

I have a survey where the user is shown 20 brand images and then they must rank their top 10.
I tried using the images as the labels but, as you found out, this doesn't work.

Might this be possible using a jquery plugin?

Cheers

Paul

Please Log in to join the conversation.

More
6 years 2 days ago #57164 by Mazi
To my knowledge there is no such jQuery plugin (I might be wrong) and if so we'd have to recode the ranking question.

What about switching to a different question type?


Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)survey-consulting.com'"

Please Log in to join the conversation.

More
5 years 11 months ago - 5 years 11 months ago #57400 by badronald
I did solve this.
I created an array by column question.

For the Answers going down the left side I used div tags, see below, to insert the images and create the mouse hover effect.

For an example of the questions I set up I made this for you

www.nhs2survey.org/limesurvey2/index.php...63&newtest=Y&lang=en
<div style="display: none; position: absolute; border-style: solid; background-color: white; padding: 5px;" id="uniquename3">
 
<a href="javascript:ShowContent('uniquename3')" onmouseout="HideContent('uniquename3'); return true;" onmouseover="ShowContent('uniquename3'); return true;">Apri<img alt="Apri" src="http://www.nhs3.org/oc/images/apri.jpg" />
</a>
</div> 
 
<a href="javascript:ShowContent('uniquename3')" onmouseout="HideContent('uniquename3'); return true;" onmouseover="ShowContent('uniquename3'); return true;"> [Apri] 
</a> 
 
<div style="display: none; position: absolute; border-style: solid; background-color: white; padding: 5px;" id="uniquename3"></div>
Last Edit: 5 years 11 months ago by Mazi.

Please Log in to join the conversation.

More
5 years 11 months ago #57401 by tpartner
Nice!

Cheers,
Tony Partner

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

Please Log in to join the conversation.

More
5 years 11 months ago #57424 by paulfiner
This link Drag and Drop seems to be exactly what I want if I can use images instead of the text.

I have tried setting up a test survey using the code provided but I can't get it to work.
It correctly hides the original ranking question but doesn't do anything else.

I'd be willing to pay to get this functionality working.

Cheers

Paul

Please Log in to join the conversation.

More
5 years 11 months ago #57457 by Mazi
Tony is our JS expert and offers advanced, paid support.I'm sure he can help.


Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)survey-consulting.com'"

Please Log in to join the conversation.

More
5 years 11 months ago #57520 by tpartner

I have tried setting up a test survey using the code provided but I can't get it to work.
It correctly hides the original ranking question but doesn't do anything else.

I've updated the drag-and-drop ranking workaround here - docs.limesurvey.org/Workarounds%3A+Manip...rsion_1.90_and_newer

Still working on the image aspect...

Cheers,
Tony Partner

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

Please Log in to join the conversation.

More
5 years 11 months ago #57534 by tpartner
Okay, here we go with using images in a ranking question...



Use the above workaround to set up your ranking question as a drag-and-drop and then this workaround to use images instead of text.

There's a small demo here .

Cheers,
Tony Partner

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

Please Log in to join the conversation.

More
5 years 11 months ago - 5 years 11 months ago #57559 by DenisChenu
tpartner : what do you think to replace actual ranking javascript by jquery-ui sortable .

If you'r OK, i put this in bug tracker/ feature request ;)

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
Last Edit: 5 years 11 months ago by DenisChenu.

Please Log in to join the conversation.

More
5 years 11 months ago #57561 by tpartner

what do you think to replace actual ranking javascript by jquery-ui sortable

Well, I think it's a better interface but don't you think there may be too many people using the old format that may be messed up when updating?

Cheers,
Tony Partner

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

Please Log in to join the conversation.

More
5 years 11 months ago - 5 years 11 months ago #57579 by paulfiner
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: 5 years 11 months ago by paulfiner.

Please Log in to join the conversation.

More
5 years 11 months ago #57588 by DenisChenu
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 service on demand (or search sondages pro).

Please Log in to join the conversation.

More
5 years 11 months ago - 5 years 11 months ago #57634 by tpartner
Did you figure this out Paul?

As Shnoulle says, you need to add the following just before the </head> tag in startpage.pstpl:
<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: 5 years 11 months ago by tpartner.

Please Log in to join the conversation.

Imprint                   Privacy policy         General Terms & Conditions         Revocation information and revocation form