Welcome, Guest
Username: Password: Remember me

TOPIC: Ranking Question Layout Too Wide

Ranking Question Layout Too Wide 3 years 3 months ago #59132

  • MHarnar
  • MHarnar's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 7
  • Karma: 0
Hi, I'm new to the forum, but I did a search on this topic to no avail. I've also put in a Support Trouble Query, but that answer has left me stumped and they are not responding to my follow up. So, here goes...

I am using LimeService to host my solution.
One of my questions is a Ranking question.
I want my respondents to rank their top 4 choices from 9, relatively long answer choices.
All the templates that come with LimeSurvey have pretty poor layouts for such long answer choices. They all put the choices and the ranked answers side by side and that pushes the screen to be twice as wide as a normal screen - not very user friendly for survey respondents.

I've made a copy of the "best" template for this type of question and then I've gone into Template Edit mode. I've been able to make some changes, like a line return here and there, but I can't seem to access the right file that affects the ranking tables.

When I asked Support for help, they provided this response:
"Try using the following Javascript code

$(document).ready(function() {
$("td.output:first").parent().after(' ')
$("#moved").append($('td.output table'));
$("#moved").addClass('rank').addClass('output');
});

I've tried to put this code into a number of files through the Template Editor, but I'm not having any luck. I wrote back to "Support" asking for a little more guidance because I'm a total javascript novice and I've gotten no response in almost 2 weeks.

Is this something I can't do because I'm using LimeService to host my solution?
Can anyone give me more explicit guidance on where and in what file this javascript code should go?

Please help!! ;)

Thanks!!!!
- Michael
The administrator has disabled public write access.

Re: Ranking Question Layout Too Wide 3 years 3 months ago #59139

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4069
  • Thank you received: 747
  • Karma: 341
Hmm, I have no idea what that code was to accomplish.

If I'm not mistaken, you want to display the ranking output below the ranking options.

1) Set up your survey to use JavaScript.

2) Add the following script to the source of the ranking question. Replace "QQ" (line 6) with the ID of the ranking question.

The script inserts a new row into the "rank" table and moves the ranking output cell to the new row.
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function(){
 
		// The ranking question ID
		var qID = QQ;
 
		// Insert a new row
		$('#question'+qID+' td.label').parent().after('<tr class="newRow"></tr>');
 
		//Move the ranking output to the new row
		$('#question'+qID+' td.output').appendTo('#question'+qID+' .newRow');
 
		// Remove the colspan attribut on the help cell
		$('#question'+qID+' td.helptext').attr('colSpan', '');
 
	});
 
</script>

Untitled-1_2011-04-02.gif
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.
Last Edit: 3 years 3 months ago by tpartner.
The administrator has disabled public write access.

Re: Ranking Question Layout Too Wide 3 years 3 months ago #59164

  • MHarnar
  • MHarnar's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 7
  • Karma: 0
Tony,
Thanks for your reply! It seems like LimeService may not allow me access to the "question source". Do you have a sense for that?
thanks
The administrator has disabled public write access.

Re: Ranking Question Layout Too Wide 3 years 3 months ago #59211

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4069
  • Thank you received: 747
  • Karma: 341
Are you sure?

Click the full-screen button:
Capture2.PNG



And then the "Source" button:
Capture3_2011-04-05.PNG
Attachments:
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.
Last Edit: 3 years 3 months ago by tpartner.
The administrator has disabled public write access.

Re: Ranking Question Layout Too Wide 3 years 3 months ago #59280

  • MHarnar
  • MHarnar's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 7
  • Karma: 0
:woohoo:

Thanks Tony! I finally got a response from LimeService Support and they also walked me through getting to the "Source" code. You can probably tell by that how much of a novice I am.

But, your solution worked and theirs did not. So, THANK YOU!!!
The administrator has disabled public write access.

Re: Ranking Question Layout Too Wide 3 years 3 months ago #60168

  • MHarnar
  • MHarnar's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 7
  • Karma: 0
Tony, your help with moving the ranking boxes worked great, but most of the layout templates in the basic LimeService offerings still have some issues with adapting to long sentences in the ranking choices.

They either let the "Choices" run off the right end of a "fixed length" box so that you can't read the whole choice, or the boxes don't adjust to the size of the screen. I like this particular template, "business_grey", but it lays out the ranking questions wicked. Here's an image of what I mean.



PoorLayout2.gif


Notice how the page goes wider than the width allowed by the browser? And, the black frame is a fixed width frame that now sits behind the text boxes and doesn't look right.

Can you help me with these issues?

THANKS!
- Michael
Last Edit: 3 years 3 months ago by MHarnar.
The administrator has disabled public write access.

Re: Ranking Question Layout Too Wide 3 years 3 months ago #60170

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4069
  • Thank you received: 747
  • Karma: 341
Michael, can you attach a sample survey or group so I can test?
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.

Re: Ranking Question Layout Too Wide 3 years 3 months ago #60171

  • MHarnar
  • MHarnar's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 7
  • Karma: 0
I tried to add this image to the last post but it didn't load. So, I'm trying again. This is the left side of the screen. Notice the large amount of space to the left of the Choices frame.
:unsure:


PoorLayout1.jpg
The administrator has disabled public write access.

Re: Ranking Question Layout Too Wide 3 years 3 months ago #60172

  • MHarnar
  • MHarnar's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 7
  • Karma: 0
I'm attaching an .lss Survey Structure output.

Let me know if this works.
Attachments:
The administrator has disabled public write access.

Re: Ranking Question Layout Too Wide 3 years 2 months ago #60239

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4069
  • Thank you received: 747
  • Karma: 341
Unfortunately, there is no way to get select options to wrap so you're stuck with the width of the choices list.

You can fix the width of the survey container by adding the following line to your script (adjust the width as required for each question.
$('.surveyBorder').css({'width':'1100px'});
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.
Last Edit: 3 years 2 months ago by tpartner.
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.129 seconds
Donation Image