Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

Vote for top 3 photos with LimeSurvey?

More
8 months 3 weeks ago #268408 by manu_p
Vote for top 3 photos with LimeSurvey? was created by manu_p
Hi there !

Before I start anything with LimeSurvey, I'd like to know if what I want to do is possible: I want to make a page with N photos and ask visitors to vote for their top 3 preferred ones.

The vote could be using stars, numbers or whatever that can order their choice as long as when, say for instance, 3 stars are given to a pic, no other pic can be chosen to gain 3 stars, or in that case, the previous one looses the 3 stars, etc.

Each picture should be clickable to open a new tab on a specific page related to that pic. I also want to be able to put a caption for each photo.

In the end, I'll need to have synthesized results, obviously. 
[img
manu'

Please Log in to join the conversation.

More
8 months 3 weeks ago #268409 by Joffm
Replied by Joffm on topic Vote for top 3 photos with LimeSurvey?
Hi,
Some questions for clarification.
1. What is N photos?
about 10
about 50
about 500

2.

to open a new tab on a specific page related to that pic

What for is this?
Only to show some more details of the photo? About how long will it be=
Or to enter some remarks about the photo?
Or?

Joffm
 
Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

More
8 months 3 weeks ago #268410 by manu_p
Replied by manu_p on topic Vote for top 3 photos with LimeSurvey?
Hi, thanks @Joffm for your questions.

Hi,
Some questions for clarification.
1. What is N photos?
about 10
about 50
about 500


 
About 30 to 50.

2.

to open a new tab on a specific page related to that pic

What for is this?
Only to show some more details of the photo? About how long will it be=
Or to enter some remarks about the photo?
Or?

 
Yes, to show the Wordpress post where the photo was used as a "featured image".

Up to now, my trials with LimeSurvey have not enabled me to classify just 3 photos from a larger quantity.
manu'

Please Log in to join the conversation.

More
8 months 3 weeks ago - 8 months 3 weeks ago #268411 by Joffm
Replied by Joffm on topic Vote for top 3 photos with LimeSurvey?
Hi,

Up to now, my trials with LimeSurvey have not enabled me to classify just 3 photos from a larger quantity.

What did you try?
You see there are several build-in options
As this is generally a simple ranking, you may use a question of type "ranking"
Maybe better to display pictures, there is the type "ranking(advanced)"

And you may use a question of type "array" with three answer options (1st, 2nd, 3rd)
Either with "radio buttons" or with drop-down" display.

Here a small example (build-in with some bootstap HTML)
 
Here you see a bootstrap popover, but you may also use a modal.
Meaning you can use all bootstrap features.
You may read here
[url] getbootstrap.com/docs/5.3/getting-started/introduction/ [/url]

You wrote about "a new tab"
I wouldn't recommend this. There is a new tab open each time the respondent clicks a photo, but then there may be 20 open tabs which have to be closed manually.

Unfortunately you did not answer the questions that appeared when you started the thread.
Have you rights to use javascript?
This is needed if you want to create something like this.
 

Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 8 months 3 weeks ago by Joffm.

Please Log in to join the conversation.

More
8 months 3 weeks ago #268412 by Joffm
Replied by Joffm on topic Vote for top 3 photos with LimeSurvey?
Here some examples with modals.



These two are based on a simple "array" question. So you will get results and "statistics" as usual.


And as the last one is highly customized, based on array(text) with several rows), you will have to build your own way to calculate results.
Well, shouldn't be too difficult with ExpressionScript or in your analizing tool.

Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

More
8 months 3 weeks ago #268414 by Joffm
Replied by Joffm on topic Vote for top 3 photos with LimeSurvey?
In my opinion a rather appealing layout.
 

Now it's your turn.

Create a sample and if there are questions, send the lss export.

Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

More
8 months 2 weeks ago #268424 by manu_p
Replied by manu_p on topic Vote for top 3 photos with LimeSurvey?
Thanks @Joffm for the time you spent for my question and for the suggestions you're proposing me.

To your question "Have you rights to use javascript?", I don't know. So far, I'm trying to do something using limesurvey.net. Maybe later on my own hosting, we'll see.

Your last suggestion is pretty much what I'm trying to do, but I'm afraid I don't know how to get there...
I'd need some entry points in the doc to understand how you arrived at this. You mention advanced ranking, and that's all I've found so far.
Or even a template from which I can adapt my survey
manu'

Please Log in to join the conversation.

More
8 months 2 weeks ago #268427 by Joffm
Replied by Joffm on topic Vote for top 3 photos with LimeSurvey?
Hi,
if "limesurvey.net" means the "LimeSurvey GmbH hosted version" you are allowed to use javascript.
And of course, if you host the installation by yourself on your own server (your own webspace)

Many admins of university installations ( or in big companies) do not allow their users to use javascript (for security reasons)

But I can't believe that you did not find this
[img

 
or this
 

Well, now my proposal.

Create a question of type "array(text)" with as many rows (y-scale) and columns (x-scale) as there are images.
If there are less images than the product y * x, we handle this.

In the question text enter the following script (in source code mode)
Code:
// Here I use a bootstrap 5 icon (bi-info-circle)
<link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" rel="stylesheet" />
// but the built-in fontawesome icons (e.g. fa-info or fa-info-circle) are usable as well.
// In this case you may omit this first css file.
 
<script type="text/javascript" data-author="Tony Partner">
// The original script to add a suffix in an array(text) by Tony Partner
// adapted to add an image and a button to open a new browser window by Joachim Klöfers
 
// Definition of images, caption, and shown web page, only different urls in the first three images.
// Please enter the correct path to the images
   var images = [
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_01.png", 'Romeo&amp;Julia 01', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_02.png", 'Romeo&amp;Julia 02', 'https://www.limesurvey.org/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_03.png", 'Romeo&amp;Julia 03', 'https://www.w3schools.com/js/default.asp'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_04.png", 'Romeo&amp;Julia 04', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_05.png", 'Romeo&amp;Julia 05', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_06.png", 'Romeo&amp;Julia 06', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_07.png", 'Romeo&amp;Julia 07', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_08.png", 'Romeo&amp;Julia 08', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_09.png", 'Romeo&amp;Julia 09', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_10.png", 'Romeo&amp;Julia 10', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_11.png", 'Romeo&amp;Julia 11', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_12.png", 'Romeo&amp;Julia 12', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_13.png", 'Romeo&amp;Julia 13', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_14.png", 'Romeo&amp;Julia 14', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_15.png", 'Romeo&amp;Julia 15', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_16.png", 'Romeo&amp;Julia 16', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_17.png", 'Romeo&amp;Julia 17', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_18.png", 'Romeo&amp;Julia 18', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_19.png", 'Romeo&amp;Julia 19', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_20.png", 'Romeo&amp;Julia 20', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_21.png", 'Romeo&amp;Julia 21', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_22.png", 'Romeo&amp;Julia 22', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_23.png", 'Romeo&amp;Julia 23', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_24.png", 'Romeo&amp;Julia 24', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_25.png", 'Romeo&amp;Julia 25', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_26.png", 'Romeo&amp;Julia 26', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_27.png", 'Romeo&amp;Julia 27', 'https://getbootstrap.com/'],
        ["/lime6/upload/surveys/{SID}/images//Ballett/Romeo_Julia_28.png", 'Romeo&amp;Julia 28', 'https://getbootstrap.com/'],
        ["", '', ''],
        ["", '', ''],
   ];
// If we display five rows with 6 images (30) there are two not used cells.
// If we display four rows with 7 images everything is fine
 
// A function to load the desired webpage and open the new browser window
   function newWindow(x) {
       myWindow = window.open(images[x][2], "_blank", "menubar=no,titlebar=no, toolbar=no, scrollbars=yes, resizable=yes, top=100, left=500, width=800, height=600");
   };
 
 
   $(document).on('ready pjax:scriptcomplete',function(){
 
// The images, captions, etc. are displayed in a loop
       for (let i=0;i<images.length;i++) {
 
// If there is an image, display it
           if(images[i][0]!='') {
               $('#question{QID} :text.form-control:eq('+i+')').before('<span class="inserted-suffix"><img class="img-fluid" src="'+images[i][0]+'" /><br />' +images[i][1]+'<button class="btn btn-link pull-right" type="button" onClick="newWindow(' +i+' )"><i class="bi bi-info-circle" style="font-size: 1.5rem; color: cornflowerblue;"></i></button><br/></span>');
           } else {
// else hide the form-control (the text field) in unused cells of the array
               $('#question{QID} :text.form-control:eq('+i+')').hide();
           }
       }
   });
 
</script>

and some css, adapt to your wishes!
Code:
<style type="text/css">
.form-control {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  color: #636363;
  font-size:18px;
  font-weight: bold;
  text-align: center;
  padding: 0;
  display: inline-block;
  width: 50%;
}
</style>


Last the validation
1. Only three ranks (1,2,3)
2. Each rank unique

a. Set the "Minimum answers" to "3"
b. Enter this question validation equation
countif("1",self.NAOK)<2 and countif("2",self.NAOK)<2 and countif("3",self.NAOK)<2 and countifop(">","3",self.NAOK)==0

And a question validation tip like
{if(countifop(">","3",self.NAOK)>0,'Please, only first three ranks',if(countif("1",self.NAOK)>1 or countif("2",self.NAOK>1) or countif("3",self.NAOK>1),'Please, each rank only once',''))}
But this is up to you.

Here the sample survey.
 

File Attachment:

File Name: limesurvey...1773.lss
File Size:37.14 KB


Joffm
 
Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

More
8 months 2 weeks ago - 8 months 2 weeks ago #268429 by manu_p
Replied by manu_p on topic Vote for top 3 photos with LimeSurvey?
Wow, thanks @Joffm!

I surely could and did find the question types array and ranking, but would never have figured out how to use them like that! 

Now, I feel like I must have done something wrong since I get the following ( see here , looks like I'm not allowed to post pics here)...

I guess the error message is the clue, but I can't interpret it.

activateActionLink(); $('#limesurvey').append(''); updateMandatoryErrorClass(); }); /*]]>*/

manu'
Last edit: 8 months 2 weeks ago by manu_p. Reason: Add comment on pic upload not allowed (?)

Please Log in to join the conversation.

More
8 months 2 weeks ago #268430 by Joffm
Replied by Joffm on topic Vote for top 3 photos with LimeSurvey?
How did you "post a picture"?
Did you attach?
Or did you try to "copy/paste"?
Or what?

And did xou import my lss?
What happened?

You may export this survey and send this lss export.
Maybe we see some difference.

Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

More
8 months 2 weeks ago #268431 by manu_p
Replied by manu_p on topic Vote for top 3 photos with LimeSurvey?
The photos are attached using their URLs.

I did not import your lss, and here's the one I could export right now. 

File Attachment:

File Name: limesurvey...9375.lss
File Size:35.41 KB
manu'

Please Log in to join the conversation.

More
8 months 2 weeks ago - 8 months 2 weeks ago #268432 by Joffm
Replied by Joffm on topic Vote for top 3 photos with LimeSurvey?
There is nothing in the question text (source code)
 

Now I see - you used this pcloud link.
Why don't you ease our life and just attach images - as you attached the file?

And it obviously shows that there is no script.

You can do a quick check if you have rights to use javascript
Enter this in the source code of the question text.
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
alert("Hello, javascript calling");
});
</script>

If there is apopup window with this message - fine, if not, bad luck.
But this should be strange, if you really have your own account at the LimeSurvey GmbH.
Or dio you use something like university or so.

Maybe you do not know what "source code mode is.
It this, what you get when you click this in the "Inline HTML editor"
 

If you use a different editor like "sourcecode editor" - selection here in your account -
 
you are already in this one.


Would have been better you imported the sample. There you would have seen images and everything.
AND you would have noticed if something went wrong with th script.
Joffm

BTW: The setting of "Maximum answers" to "3" is nonsense.
It does not prevent a user to type "5", "8", "9".
You see the condition is fulfilled, but it's totally wrong.

 
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 8 months 2 weeks ago by Joffm.

Please Log in to join the conversation.

More
8 months 2 weeks ago - 8 months 2 weeks ago #268435 by Joffm
Replied by Joffm on topic Vote for top 3 photos with LimeSurvey?
Hi, sorry,
I did not expect that you put the script into the "script" tab (this is usually hidden in my GUI)

1. I did not advise to put it there
2. It doesn't work in this tab.

Now when I insert the script into the question text i see this.


or - as in my opinion the images are too bnig and the respondent has to scroll too much.
 

And the space at the left side (where the - not existing - subquestion text is displayed).
Check your question settings ("Subquestion width"). And though the tooltip there indicates "only values 1-100", just set it to "0".

Joffm

P.S. You should remove the comments from the script
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 8 months 2 weeks ago by Joffm.

Please Log in to join the conversation.

More
8 months 2 weeks ago #268436 by manu_p
Replied by manu_p on topic Vote for top 3 photos with LimeSurvey?

There is nothing in the question text (source code)
 

Now I see - you used this pcloud link.
Why don't you ease our life and just attach images - as you attached the file?

 

As I wrote before, I've not been allowed to post pics here, for some reason that was not given to me...

Now, I'm facing some other limitations: whenever I cut/paste what I put in the script tab into the question tab, and then save the survey, I see the following message:
<p>Could not store translation.We are sorry, but you are not allowed to save (external) links when using the free plan. Please upgrade your plan.</p>
And nothing is saved, that is: the previous survey config is back.

So I understand that, with the free plan I chose in order to see how I could use LimeSurvey for what I'd like to do, I can't use direct links to my pics.

In a last (I guess) try, I'll try to upload some pics (that seems possible) and try and find the way to replace their path in the script.
manu'

Please Log in to join the conversation.

More
8 months 2 weeks ago - 8 months 2 weeks ago #268437 by Joffm
Replied by Joffm on topic Vote for top 3 photos with LimeSurvey?
Hi,
I tried in my test "free plan".
Unfoirtunately I see no issues.

Did you remove all comments from the script?
Are you the only admin (superadmin) of this installation?
Or did you create further admins and set the XSS filter (in "Configuration / Security") to ON?

Nevertheless, here a lss export of my "free plan" installation.
 

File Attachment:

File Name: limesurvey...75_J.lss
File Size:36.88 KB


BTW: Please, change the question text.
The window does not open when you click the photo; you have to click the blue "information" sign.

If you want the click on the image, change this line to (you see, the "onClick" is now inside the image tag).
Code:
 
$('#question{QID} :text.form-control:eq('+i+')').before('<span class="inserted-suffix"><img onClick="newWindow(' +i+' )" class="img-fluid" src="'+images[i][0]+'" /><br />' +images[i][1]+'<br/></span>');
And remove the link to the bootstrap css at the beginning.

Joffm

And again, because I am really confused
You wrote

I've not been allowed to post pics here, for some reason that was not given to me...

Who didn't allow this?
You see this is the forum. Absolutely independent from any installations of LimeSurvey.

What happens, when you click this big button?
 
The only restriction is the max. file size of 1MB. But a screenshot is usually much smaller.

 
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 8 months 2 weeks ago by Joffm.

Please Log in to join the conversation.

Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source