Welcome to the LimeSurvey Community Forum

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

Assigning new class to question using JavaScript and question code placeholder

  • eirikat
  • eirikat's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
8 years 8 months ago #122706 by eirikat
I was hoping to be able to add the question code as a new class to each of the questions in a survey, so that I can format the questions individually without using the question ID (which requires me to update template.css each time I make a new version of the survey). This script allows me to add a new class, but needs to be modified for each question:

Code:
<script type="text/javascript" charset="utf-8_general_ci">
 
  $(document).ready(function(){ 
    $('#question{QID}').addClass('Potatoes');  // "Potatoes" would be the question code for this particular question
  });
 
</script>
As you see, the placeholder {QID} may be used for question ID. However, I have not been able to find a placeholder that works for question code. None of the question-related placeholders listed in the EM Roadmap provide the information I need. Many of them, such as {QUESTION_CODE}, seem not to be working in this context.

I'd appreciate your help in finding a placeholder I can use. Alternatively, any other way of implementing question-specific styling that is not broken upon copy/update would work for me :)

Thanks,
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 8 months ago #122708 by DenisChenu
Hi,

{QUESTION_CODE} is added only if you set "Show question number and/or code: " to both or Question Code Only in survey settings.

After you can use it in your template
manual.limesurvey.org/Survey_settings#Pr...ation_.26_navigation

class="{QUESTION_CODE} {MANDATORY_CLASS}....

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
The following user(s) said Thank You: eirikat
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 8 months ago - 8 years 8 months ago #122709 by tpartner
If you enable "Show question number and/or code", you can use the {QUESTION_CODE} placeholder. So, you can do something like this in question.pstpl, which will add a class like "question-code-Potatoes".

Code:
<div {QUESTION_ESSENTIALS} class="question-wrapper {QUESTION_CLASS}{QUESTION_MAN_CLASS}{QUESTION_INPUT_ERROR_CLASS}{if(!is_empty(QUESTION_CODE),' question-code-'+QUESTION_CODE, '')}">

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last edit: 8 years 8 months ago by tpartner.
The topic has been locked.
  • eirikat
  • eirikat's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
8 years 8 months ago #122714 by eirikat
Thanks, DenisChenu, I was hoping there would be a simple solution to this. After enabling "Show question code", the following script works (as inserted into question source):
Code:
<script type="text/javascript" charset="utf-8_general_ci">
 
  $(document).ready(function(){ 
 
    $('#question{QID}').addClass('{QUESTION_CODE}');
 
  });
 
</script>
The topic has been locked.
  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 8 months ago #122716 by tpartner
I don't understand using JavaScript here - that will require inserting in all questions, all languages. Modifying question.pstpl will automatically handle that.

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: eirikat
The topic has been locked.
  • eirikat
  • eirikat's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
8 years 8 months ago #122717 by eirikat
And thank you, tpartner, your solution is even slicker! ;)

Simply adding {QUESTION_CODE} to the first line in question.pstpl adds the question code as a new class for each of the questions in the survey. My first line now looks like this (note that I added a space to separate the question code class from previous classes):
Code:
<div {QUESTION_ESSENTIALS} class="{QUESTION_CLASS}{QUESTION_MAN_CLASS}{QUESTION_INPUT_ERROR_CLASS} {QUESTION_CODE}">
Now I won't have to add scripts to each of the questions, I'll simply call my questions directly in template.css. Smooth! B)
The topic has been locked.
  • eirikat
  • eirikat's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
8 years 8 months ago - 8 years 8 months ago #122718 by eirikat

tpartner wrote: I don't understand using JavaScript here - that will require inserting in all questions, all languages. Modifying question.pstpl will automatically handle that.


Sorry, tpartner, I just wasn't quick enough to respond. Both of the solutions are potentially useful, but I would prefer yours in my case. Especially since I do handle a lot of different languages in this particular survey!

If you only need to edit a few questions, DenisChenu's solution works well, and you don't have to edit question.pstpl (I suppose that might matter in some cases, due to permissions)
Last edit: 8 years 8 months ago by eirikat.
The topic has been locked.
  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
8 years 8 months ago #122719 by DenisChenu

class="{QUESTION_CODE} {MANDATORY_CLASS}....

Think it's better to use question.pstpl too :whistle: but i leave less advice than Tony ;)

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand , plugin development .
I don't answer to private message.
The topic has been locked.

Lime-years ahead

Online-surveys for every purse and purpose