Welcome, Guest
Username: Password: Remember me

TOPIC: Custom jQuery to reveal conditional questions?

Custom jQuery to reveal conditional questions? 3 years 4 months ago #61048

Is it possible to use something like jQuery to tweak how conditional questions are revealed? I'd like to use something like fadein() or a roll down effect to display a conditional question if it is on the same page as the current question. Ideally, I'd like to do this in a custom onload, but I'm open to minor source tweak if that what it takes.

Any thoughts?

(sorry if this is answered in a previous post, forum search isn't working at the moment for some reason)
The administrator has disabled public write access.

Re: Custom jQuery to reveal conditional questions? 3 years 4 months ago #61049

  • Mazi
  • Mazi's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 5325
  • Thank you received: 296
  • Karma: 249
I first start might be to trigger the "display" event to use a fading option when it switches from "display:none" to a visible state?!

Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)limesurvey.org'"
The administrator has disabled public write access.

Re: Custom jQuery to reveal conditional questions? 3 years 4 months ago #61060

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4207
  • Thank you received: 791
  • Karma: 360
I can't think of any way to dynamically modify checkconditions() function (after page load) but you can modify the core code in group.php.

Fading the questions in may be a little tricky because they are initially hidden with a CSS rule "display:none" and fadeIn() uses the opacity.

To slow the rate at which the questions are shown/hidden, modify the following lines in group.php:

Change:
$endzone .= "document.getElementById('question$cd[0]').style.display='';\n";
To:
$endzone .= "$('#question$cd[0]').show('slow');\n";

Change:
$endzone .= "document.getElementById('question$cd[0]').style.display='none';\n";
To:
$endzone .= "$('#question$cd[0]').hide('slow');\n";

The param "slow" can be replaced with a number of milliseconds.
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: Custom jQuery to reveal conditional questions? 3 years 4 months ago #61094

  • Mazi
  • Mazi's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 5325
  • Thank you received: 296
  • Karma: 249
johnichiban, if you get this working, can you set up a sample survey and add the link here?
I'm really keen on seeing this live.

Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)limesurvey.org'"
The administrator has disabled public write access.

Re: Custom jQuery to reveal conditional questions? 3 years 4 months ago #61107

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4207
  • Thank you received: 791
  • Karma: 360
You can also add jQuery UI easings to the transition.

Something like:
$endzone .= "$('#question$cd[0]').show(400, 'easeInExpo');\n";

See - jqueryui.com/demos/effect/easing.html
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 4 months ago by tpartner.
The administrator has disabled public write access.

Re: Custom jQuery to reveal conditional questions? 3 years 4 months ago #61108

This works beautifully. I had no problem using fadeIn() and fadeOut() instead of show() and hide().

I played around a bit to try slideUp() and slideDown(), but those are a bit trickier. To make those work, I had to first show 'question$cd[0]' and then apply the slide to the first child div ('question$cd[0] :first-child'). It doesn't work particularly smoothly in my testing.

As a more permanent solution, I wonder if group.php could be modified to use a custom function to show/hide questions which could be overridden in a template javascript file to allow customization at the template level.

Thanks a lot for the assistance!
The administrator has disabled public write access.

Re: Custom jQuery to reveal conditional questions? 3 years 4 months ago #61109

  • Mazi
  • Mazi's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 5325
  • Thank you received: 296
  • Karma: 249
johnichiban wrote:
As a more permanent solution, I wonder if group.php could be modified to use a custom function to show/hide questions which could be overridden in a template javascript file to allow customization at the template level.

Thanks a lot for the assistance!
You can add this as a feature request at our feature tracker . Please describe your idea as detailed as possible and try to outline a suitable solution/implementation as well.

Can you post a link to a demo survey?

Best regards/Beste Grüße,
Dr. Marcel Minke
(Limesurvey Head of Support)
Need Help? We offer professional Limesurvey support
Contact: marcel.minke(at)limesurvey.org'"
The administrator has disabled public write access.

Re: Custom jQuery to reveal conditional questions? 3 years 4 months ago #61116

  • tpartner
  • tpartner's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 4207
  • Thank you received: 791
  • Karma: 360
As a more permanent solution, I wonder if group.php could be modified to use a custom function to show/hide questions which could be overridden in a template javascript file to allow customization at the template level.
Well, that's possible but we would need to have a check to see if the new custom function exists in the template.js file and, if not, revert to the old hide/show script. Otherwise old custom templates would stop working.

Something like:
if(typeof window.customHide == 'function') {
	customHide('question123');
}
else {	
	document.getElementById('question123').style.display='none';
}
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.
Moderators: ITEd
Time to create page: 0.391 seconds
Donation Image