Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

Popups in survey or Hide/Show help text

  • Matadeleo
  • Matadeleo's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
9 years 9 months ago - 9 years 9 months ago #122597 by Matadeleo
Popups in survey or Hide/Show help text was created by Matadeleo
Hi, I'm trying to display a couple paragraphs of text as a refresher for people completing my survey -

I've tried using a JavaScript alert but this seems to reload the page when 'OK' is clicked
I've tried using a jQuery popup but without any luck

Basically I would like to have either some text, or a button in the help section which would either 'unhide' or activate a popup containing this chunk of text. The idea is to keep the page looking neat and clean, without large chunks of text in each help section.

I'm not sure if it's possible in limesurvey, but perhaps there is some way to create a Div within the help section, which when a button/link in the help section is pressed will unhide that div?

Any suggestions on how to achieve any of these things would be greatly appreciated
Last edit: 9 years 9 months ago by Matadeleo.
The topic has been locked.
  • gabrieljenik
  • gabrieljenik's Avatar
  • Offline
  • Official LimeSurvey Partner
  • Official LimeSurvey Partner
More
9 years 9 months ago #122600 by gabrieljenik
Replied by gabrieljenik on topic Popups in survey or Hide/Show help text
Hi,

Have you tried creating that DIV using JQuery?

If you need that DIV for all the questions you could try omdifying the template, copying the current template and using the Template Editor.

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

Checkout our Reporting Solutions and our plugin shop at www.encuesta.biz .

[img
The topic has been locked.
  • Matadeleo
  • Matadeleo's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
9 years 9 months ago #122604 by Matadeleo
Replied by Matadeleo on topic Popups in survey or Hide/Show help text
Unfortunately I don't know any javascript/jquery, I usually get by, by using tutorials or example code
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
9 years 9 months ago - 9 years 9 months ago #122625 by tpartner
Replied by tpartner on topic Popups in survey or Hide/Show help text
Here is an example of HTML and JavaScript that, when placed in the question help, will display two buttons that open jQuery UI modal dialogs (pop-ups).

Code:
<p>
  <button class="pop-up-button pop-up-button-1" type="button">Pop-up details 1</button><br /><br />
  <button class="pop-up-button pop-up-button-2" type="button">Pop-up details 2</button>
</p>
 
<div class="dialog-message dialog-message-1">
  <p>Some text for pop-up 1...</p>
</div>
<div class="dialog-message dialog-message-2">
  <p>Some text for pop-up 2...</p>
</div>
 
<script type="text/javascript" charset="utf-8">    
  $(document).ready(function() {
 
    // Apply jQuery UI to the buttons
    $('.pop-up-button').button();
 
    // Click events for the buttons
    $('.pop-up-button-1').on('click', function(e) {
      $('.dialog-message-1').dialog('open');
    });
    $('.pop-up-button-2').on('click', function(e) {
      $('.dialog-message-2').dialog('open');
    });
 
    // Define some pop-up options
    var dialogOptions = {
      modal: true,
      autoOpen: false,
      draggable: false,
      resizable: false,
      dialogClass: 'dialog-message-wrapper',
      buttons: {
        OK: function() {
          $(this).dialog('close');
        }
      }
    };
    // Initiate the modal pop-ups
    $('.dialog-message').dialog(dialogOptions);
 
    // Hide the pop-up title bars
    $('.dialog-message-wrapper .ui-dialog-titlebar').hide();    
  });
</script>

Sample survey attached:

File Attachment:

File Name: limesurvey...1599.lss
File Size:13 KB
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
Last edit: 9 years 9 months ago by tpartner.
The following user(s) said Thank You: Matadeleo
The topic has been locked.
  • Matadeleo
  • Matadeleo's Avatar Topic Author
  • Offline
  • Premium Member
  • Premium Member
More
9 years 8 months ago #123000 by Matadeleo
Replied by Matadeleo on topic Popups in survey or Hide/Show help text

tpartner wrote: Here is an example of HTML and JavaScript that, when placed in the question help, will display two buttons that open jQuery UI modal dialogs (pop-ups).

Code:
<p>
  <button class="pop-up-button pop-up-button-1" type="button">Pop-up details 1</button><br /><br />
  <button class="pop-up-button pop-up-button-2" type="button">Pop-up details 2</button>
</p>
 
<div class="dialog-message dialog-message-1">
  <p>Some text for pop-up 1...</p>
</div>
<div class="dialog-message dialog-message-2">
  <p>Some text for pop-up 2...</p>
</div>
 
<script type="text/javascript" charset="utf-8">    
  $(document).ready(function() {
 
    // Apply jQuery UI to the buttons
    $('.pop-up-button').button();
 
    // Click events for the buttons
    $('.pop-up-button-1').on('click', function(e) {
      $('.dialog-message-1').dialog('open');
    });
    $('.pop-up-button-2').on('click', function(e) {
      $('.dialog-message-2').dialog('open');
    });
 
    // Define some pop-up options
    var dialogOptions = {
      modal: true,
      autoOpen: false,
      draggable: false,
      resizable: false,
      dialogClass: 'dialog-message-wrapper',
      buttons: {
        OK: function() {
          $(this).dialog('close');
        }
      }
    };
    // Initiate the modal pop-ups
    $('.dialog-message').dialog(dialogOptions);
 
    // Hide the pop-up title bars
    $('.dialog-message-wrapper .ui-dialog-titlebar').hide();    
  });
</script>

Sample survey attached:

File Attachment:

File Name: limesurvey...1599.lss
File Size:13 KB


Hi tpartner,

This works fantastic, exactly what I was looking for.

I noticed that this seems to not be compatible with version 2.00, only with 2.05. As I have multiple instances of limesurvey running, some of them have yet to be updated to the latest version as they have on-going surveys. Is there any way I can make this code you supplied backwards compatible with version 2.00?
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
9 years 8 months ago #123146 by tpartner
Replied by tpartner on topic Popups in survey or Hide/Show help text
This will work in both 2.0 and 2.05:

Code:
<p>
  <button class="pop-up-button pop-up-button-1" type="button">Pop-up details 1</button><br /><br />
  <button class="pop-up-button pop-up-button-2" type="button">Pop-up details 2</button>
</p>
 
<div class="dialog-message dialog-message-1">
  <p>Some text for pop-up 1...</p>
</div>
<div class="dialog-message dialog-message-2">
  <p>Some text for pop-up 2...</p>
</div>
 
<script type="text/javascript" charset="utf-8">    
  $(document).ready(function() {
 
    // Apply jQuery UI to the buttons
    $('.pop-up-button').button();
 
    // Click events for the buttons
    $('.pop-up-button-1').click(function(e) {
      $('.dialog-message-1').dialog('open');
    });
    $('.pop-up-button-2').click(function(e) {
      $('.dialog-message-2').dialog('open');
    });
 
    // Define some pop-up options
    var dialogOptions = {
      modal: true,
      autoOpen: false,
      draggable: false,
      resizable: false,
      dialogClass: 'dialog-message-wrapper',
      buttons: {
        OK: function() {
          $(this).dialog('close');
        }
      }
    };
    // Initiate the modal pop-ups
    $('.dialog-message').dialog(dialogOptions);
 
    // Hide the pop-up title bars
    $('.dialog-message-wrapper .ui-dialog-titlebar').hide();    
  });
</script>
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The topic has been locked.
More
9 years 2 months ago #130833 by Gems1389
Replied by Gems1389 on topic Popups in survey or Hide/Show help text
Hi,

Sorry to be pain, I was wondering if anyone could please help. I'm trying to get this to work in my survey, however when I copy and paste it into my question help field, I just get the text that should be in the pop-ups, and no pop-up buttons. Please could someone tell me where I'm going wrong? Should I be editing it at all?

Thanks :)

P.s. I have no coding experience or Lime Survey experience, so if you could explain it like you're talking to a young child, that would be fantastic.
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
9 years 2 months ago #130948 by tpartner
Replied by tpartner on topic Popups in survey or Hide/Show help text
Here's a sample survey.

File Attachment:

File Name: limesurvey...-5-6.lss
File Size:14 KB
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The following user(s) said Thank You: Ben_V, Gems1389
The topic has been locked.
More
9 years 2 months ago #130950 by Gems1389
Replied by Gems1389 on topic Popups in survey or Hide/Show help text

tpartner wrote: Here's a sample survey.

File Attachment:

File Name: limesurvey...-5-6.lss
File Size:14 KB


Thanks for your help. Unfortunately I'm having problems importing the example (should've mentioned that in my previous post). I get an error message saying:
"Internal Server Error
Property "Survey.questionindex" is not defined.
An internal error occurred while the Web server was processing your request. Please contact the webmaster to report this problem.
Thank you."

Do you know if I'm doing something wrong?

Thanks again
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
9 years 2 months ago #130959 by tpartner
Replied by tpartner on topic Popups in survey or Hide/Show help text
What LimeSurvey version?
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: Gems1389
The topic has been locked.
More
9 years 2 months ago #130960 by Gems1389
Replied by Gems1389 on topic Popups in survey or Hide/Show help text

tpartner wrote: What LimeSurvey version?


Version 2.00+ (it says Build 130213 next to that too if that is relevant).

Thanks again
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
9 years 2 months ago #130962 by tpartner
Replied by tpartner on topic Popups in survey or Hide/Show help text
You should consider updating.

Here's a 2.0 survey:

File Attachment:

File Name: limesurvey...67-2.lss
File Size:14 KB
Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Attachments:
The following user(s) said Thank You: Gems1389
The topic has been locked.
Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source