Welcome, Guest
Username: Password: Remember me

TOPIC: Script: Make multiple choice easier

Script: Make multiple choice easier 6 months 1 week ago #100505

  • urbana
  • urbana's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 7
  • Thank you received: 1
  • Karma: 1
Hi guys,
first of all thanks to all developers for Limesurvey - what a great system!!
Thank you very much.

I wrote a small script for multiple choices with many possible answers.
I want to share it, perhaps somebody else can use it too.
(I don't know whether this is the right place within the forum or not. If not, please move it to the right location :) or give me a hint )

The problem:
We often have multiple choice question, where the user has to select 4 elements out of 78 possible answers or 3 out of 25 and so on.
If we use pen and paper version for this questions, we noticed that the participants go through the whole list and if an answer doesn't suit on the first sight, they cross it out.

The solution:
The script gives the participant the possibility to cross out this answers in a digital way. The script adds a small "X" before the checkbox. When it is clicked, the label text of the checkbox turns grey.
(see the attached screenshot for an example)

Here is the script, just add it to help text
<script type="text/javascript">
 
/**
* Small script that adds a small "X" before a checkbox. 
* On click the text color of the label of the checkbox turns grey
* If the user has to choose some answers from many options, he can "delete" answers, that on first sight looks wrong
* Add the script to the question in Limesurvey (for example within the source code of the help text)
*/
 
//Define the X (standard is a X in capitals)
var x = "X";
css_class = "x";
 
/*
* Define the style of the X
* Of course you can define the style in the stylesheet - if so, the script ignores the following settings
* Be aware, if you define any style for the element - every of the following style settings will be ignored
* If there is a style, than set style var to 1
*/
var style = 0;
var size = "12px";
var weight = "bold";
var color = "red";
var cursor = "pointer";
 
//element type - standard is a span element
var type = "span";
 
//Define the new font color of the checkbox label
label_color = "#bfbfbf";
 
 
//End of configuration - start of the function
if(style == 1) {
	ele = "<"+type+" class='"+css_class+"'>"+x+"</"+type+">";
}
else {
	ele = "<"+type+" class='"+css_class+"' style='font-size:"+size+"; font-weight:"+weight+"; color:"+color+"; cursor:"+cursor+";'>"+x+"</"+type+">";
}
 
//insert the X before the checkboxes
$(document).ready(function() { 
	$("li").each(function(){
		$(this).prepend(ele);
	});
});
 
//bind an eventhandler on the X (delegate is used, because Limesurvey uses an old jQuery version)
var css_class_c = "."+css_class;
$(document).delegate(css_class_c,"click",function() {
    $(this).siblings("label").css("color",label_color);
});
</script>

I hope that helps anyone and I appreciate your feedback and suggestions.

Have a nice day, urban-a :)
Attachments:
The administrator has disabled public write access.

Script: Make multiple choice easier 6 months 3 days ago #100784

  • trivender
  • trivender's Avatar
  • OFFLINE
  • Expert Lime
  • Posts: 118
  • Thank you received: 3
  • Karma: 4
Nice:)

I really appreciate that you come up with something new and shared it with us. What do you say about little change in the script . If the check box is checked then clicking on the "X" symbol should uncheck the check box and If we check the check box then the label fade out effect get reversed.
Trivender Singh
Survey Designer and Programmer
"I always suggest to have a group by group display layout and create a seprate group for each question. This will be extra work but you will get flexiblity to create your question by using more than more lime survey question types."
The administrator has disabled public write access.

Script: Make multiple choice easier 6 months 3 days ago #100789

  • Mazi
  • Mazi's Avatar
  • OFFLINE
  • LimeSurvey Team
  • Posts: 5279
  • Thank you received: 289
  • Karma: 246
This is a great solution. Since the forum is cleaned up regularly and it would be a loss to lose your solution, please port it to our manual. There is a special section at manual -> workarounds ->JavaScript where you can best add your code.

Thanks!

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.

Script: Make multiple choice easier 6 months 2 days ago #100790

  • urbana
  • urbana's Avatar
  • OFFLINE
  • Fresh Lemon
  • Posts: 7
  • Thank you received: 1
  • Karma: 1
Hi!
Thank you all for your feedback.
@trivender - that are great ideas and I allready changed the script.

Here is the new one:
<script type="text/javascript">
 
/**
* Small script that adds a "X" before a checkbox. 
* On click the text color of the label of the checkbox turns grey
* If the user has to choose some answers from many options, he can "delete" answers, that on first sight looks wrong
* Add the script to the question in Limesurvey (for example within the source code of the help text)
*/
 
//Define the X (standard is a X in capitals)
var x = "X";
css_class = "x";
 
/*
* Define the style of the X
* Of course you can define the style in the stylesheet - if so, the script ignores the following settings
* If there is a style, than set style var to 1
*/
var style = 0;
var size = "12px";
var weight = "bold";
var color = "red";
var cursor = "pointer";
 
//element type - standard is a span element
var type = "span";
 
//Define the new font color of the checkbox label
label_color = "#bfbfbf";
 
 
//End of configuration - start of the function
 
//Define the element that is added
if(style == 1) {
	ele = "<"+type+" class='"+css_class+"'>"+x+"</"+type+">";
}
else {
	ele = "<"+type+" class='"+css_class+"' style='font-size:"+size+"; font-weight:"+weight+"; color:"+color+"; cursor:"+cursor+";'>"+x+"</"+type+">";
}
 
//Get the standard font-color of the used style
st_color = $("label").css("color");
 
//insert the X before the checkboxes
$(document).ready(function() { 
	$("li").each(function(){
		$(this).prepend(ele);
	});
});
 
//bind an eventhandler on the X (delegate is used, because Limesurvey uses an old jQuery version)
var css_class_c = "."+css_class;
$(document).delegate(css_class_c,"click",function() {
	var color_check = $(this).siblings("label").data("color");
	if(color_check != "true") {
    	$(this).siblings("label").css("color",label_color).data("color","true");
    	$(this).siblings('input').attr('checked', false);
 
	}
	else {
		$(this).siblings("label").css("color",st_color).data("color","false");
 
	}
});
 
$(".checkbox").click(function () {
	$(this).siblings("label").css("color",st_color).data("color","false");
});
 
</script>

@Mazi - thanks for the hint; I'll put it there
The administrator has disabled public write access.
Moderators: ITEd
Time to create page: 0.125 seconds
Donation Image