Check out the LimeSurvey source code on GitHub!
Welcome, Guest
Username: Password:

TOPIC: Change color of chosen answer....

Change color of chosen answer.... 3 years 3 weeks ago #97666

  • jaytsang
  • jaytsang's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 4
  • Karma: 0
Hi,
I am newbie in using LimeSurvey. So I have question, is there a way to change the color of the selected answer(s)?

regards,
The administrator has disabled public write access.

Change color of chosen answer.... 3 years 3 weeks ago #97676

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 9254
  • Thank you received: 1319
  • Karma: 382
Hello,

You can use somethink like that for "radio" and "checkbox" button:
input.radio:checked + label,input.checkbox:checked + label{
color:red;
}
Work on real browser (not in IE6/7, to be tested in IE8).
Assistance on LimeSurvey forum and LimeSurvey core developpement are on my free time (Say thanks ?).
A bug not reported is a bug not corrected. | Please, read the documentation | La doc en français à besoin de vous
Last Edit: 3 years 3 weeks ago by DenisChenu.
The administrator has disabled public write access.

Change color of chosen answer.... 3 years 3 weeks ago #97681

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6114
  • Thank you received: 1356
  • Karma: 532
Here is a post about applying "unanswered" and "answered" classes to questions.
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.

Change color of chosen answer.... 3 years 3 weeks ago #97697

  • jaytsang
  • jaytsang's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 4
  • Karma: 0
Hi, thanks for replying. but I tried to inject the code in the template.js, but unfortantely it didn't work. I am using imagetick.js script to control the shape of the answers (especially radio buttons, and checkboxes).

is there any advice???
The administrator has disabled public write access.

Change color of chosen answer.... 3 years 2 weeks ago #97713

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 9254
  • Thank you received: 1319
  • Karma: 382
Hello,

This part:
input.radio:checked + label,input.checkbox:checked + label{
color:red;
}
is for template.css.

Denis
Assistance on LimeSurvey forum and LimeSurvey core developpement are on my free time (Say thanks ?).
A bug not reported is a bug not corrected. | Please, read the documentation | La doc en français à besoin de vous
The administrator has disabled public write access.

Change color of chosen answer.... 3 years 2 weeks ago #97723

  • jaytsang
  • jaytsang's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 4
  • Karma: 0
Hi Denis,
i tried the code you gave me but nothing cahnged. I put it at the end of the "template.css" file.


also, Tpartner;
I tried the code in "www.limesurvey.org/en/forum/design-issue...k-mark-when-answered"; it is not cahnged.

any help???
The administrator has disabled public write access.

Change color of chosen answer.... 3 years 2 weeks ago #97725

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 9254
  • Thank you received: 1319
  • Karma: 382
ts2k13 wrote:
Hi Denis,
i tried the code you gave me but nothing cahnged. I put it at the end of the "template.css" file.
Provide a test link (a survey activated with this template).

Denis
Assistance on LimeSurvey forum and LimeSurvey core developpement are on my free time (Say thanks ?).
A bug not reported is a bug not corrected. | Please, read the documentation | La doc en français à besoin de vous
The administrator has disabled public write access.

Change color of chosen answer.... 3 years 2 weeks ago #97830

  • jaytsang
  • jaytsang's Avatar
  • Offline
  • Fresh Lemon
  • Posts: 4
  • Karma: 0
Hi Denis,
How can I provide a test link? I tried to do it but unfortiantley I couldn't.

regards,
The administrator has disabled public write access.

Change color of chosen answer.... 3 years 2 weeks ago #97840

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 9254
  • Thank you received: 1319
  • Karma: 382
Hello,

Create a "simple survey" with only one or 2 question ( one single choice question radio button).
Put the template you made for this survey
Activate the survey
Send us the link for access to this survey.

A test link : limesurvey.sondages.pro/975921/lang-fr

Denis
Assistance on LimeSurvey forum and LimeSurvey core developpement are on my free time (Say thanks ?).
A bug not reported is a bug not corrected. | Please, read the documentation | La doc en français à besoin de vous
The administrator has disabled public write access.

Change color of chosen answer.... 2 years 7 months ago #102838

  • dweisser
  • dweisser's Avatar
  • Offline
  • Gold Lime
  • Posts: 222
  • Thank you received: 5
  • Karma: 5
Hi there,

With regard to this:
Hello,

This part:
input.radio:checked + label,input.checkbox:checked + label{
color:red;
}
is for template.css.
- which works perfectly, does anyone know how you might extend the style to encompass the entire li where the answer is found? I'm using ImageTick with multi-opt question type...

<li id="javatbd171641X190X1314SQ001" class="question-item answer-item checkbox-item">
<img src="/survey/upload/templates/Clear_logo_Clone/check.png" alt="no_tick" class="checkboxes" id="tick_img_answer171641X190X1314SQ001" style="opacity: 1;"><input class="checkbox" type="checkbox" name="171641X190X1314SQ001" id="answer171641X190X1314SQ001" value="Y" onclick="cancelBubbleThis(event);checkconditions(this.value, this.name, this.type)" style="position: absolute; left: -99999px;">
<label for="answer171641X190X1314SQ001" class="answertext">Completeness of communication</label>
<input type="hidden" name="java171641X190X1314SQ001" id="java171641X190X1314SQ001" value="Y">
</li>

Any advice would be appreciated.
The administrator has disabled public write access.

Change color of chosen answer.... 2 years 7 months ago #102843

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Team
  • Posts: 6114
  • Thank you received: 1356
  • Karma: 532
Hi David,

There is no way to select a parent of an element with CSS.

You will need to modify all of the listeners in imagetick_lime.js to add a class to the parent <li> element when a radio or checkbox is checked. Something like:
$('#tick_img_'+id).closest('li').addClass('checkedItem');

And then in template.css, something like this:
li.checkedItem {
	color:red;
}
Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The administrator has disabled public write access.

Change color of chosen answer.... 2 years 7 months ago #102849

  • dweisser
  • dweisser's Avatar
  • Offline
  • Gold Lime
  • Posts: 222
  • Thank you received: 5
  • Karma: 5
I'll give it a shot. Thank you!
The administrator has disabled public write access.

Change color of chosen answer.... 2 years 7 months ago #102854

  • DenisChenu
  • DenisChenu's Avatar
  • Offline
  • Moderator Lime
  • Posts: 9254
  • Thank you received: 1319
  • Karma: 382
:checked like this can be used only with css.

Here you need JS.

Denis
Assistance on LimeSurvey forum and LimeSurvey core developpement are on my free time (Say thanks ?).
A bug not reported is a bug not corrected. | Please, read the documentation | La doc en français à besoin de vous
The administrator has disabled public write access.

Change color of chosen answer.... 2 years 7 months ago #102866

  • dweisser
  • dweisser's Avatar
  • Offline
  • Gold Lime
  • Posts: 222
  • Thank you received: 5
  • Karma: 5
Thanks again guys,

I accomplished this by adding:

$('#tick_img_'+id).closest('li').addClass('uncheckedItem');
$('#tick_img_'+id).closest('li').removeClass('checkedItem');

and

$('#tick_img_'+id).closest('li').addClass('checkedItem');
$('#tick_img_'+id).closest('li').removeClass('uncheckedItem');

As you suggested. I hope it helps someone.
David
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.270 seconds
Imprint                   Data Protection Statement                  Revocation information and revocation form