Reset answers in a table question, using a button and javascript

More
5 years 2 months ago #80879 by Qat
Qat created the topic: Reset answers in a table question, using a button and javascript
Hello everyone

Sorry to bother you with this question, but it would take me hours to gain enough knowledge in javascript/limesurvey syntax to perform this simple task :

Context : I have a Non Mandatory Table Question and the option Hide "No answer" is active at survey level. So every line of the table initially diplays an empty row of radio buttons, but when one choice has been made for one row, the user can't revert to "no answer" (since it is hidden).

Better with an exemple : The question is "What's your opinion about the food". The rows are "Temperature, Taste, Quantity and Suited to children". The options are "Good, Neutral, Bad and (hidden) No answer"

We want the user to feel that he must answer the first rows, so we don't want to display the "no answer" option. But people without children should be able to revert to an empty row, if they mistakenly checked something.

My idea is to insert a button inside the subquestion, and use javascript to revert the radiobutton to an empty state.

FYI, I use v1.91, the question ID is 139, the Subquestion is 3x3a5, so the code I get for one on of the radiobuttons on that row is :

<input class="radio" type="radio" name="81328X6X1393x3a5" value="C04h2" id="answer81328X6X1393x3a5-C04h2" title="Neutral " onclick="noop_checkconditions(this.value, this.name, this.type)">

Can you help me with this one ?

Please Log in to join the conversation.

More
5 years 2 months ago #80891 by tpartner
tpartner replied the topic: Reset answers in a table question, using a button and javascript
1) Set up your survey to use JavaScript .

2) Add the following script to the source of the array. Replace "QQ" with the array question ID .

The script inserts a button in each answer-text cell of the array. When clicked, the button unchecks all radios in that row.
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function(){
 
		addReset(QQ);
 
		function addReset(qID) {
			$('#question'+qID+' th.answertext').append('<input type="button" value="Reset" class="resetButton" />');
 
			$('#question'+qID+' .resetButton').click(function(e){
				var el = $(this).parents('tr:eq(0)');
				$('input.radio', el).attr('checked', false);
			});
		}
	});
 
</script>

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: kachne

Please Log in to join the conversation.

More
5 years 2 months ago - 5 years 2 months ago #80910 by Qat
Qat replied the topic: Reset answers in a table question, using a button and javascript
Thanks a lot for your reply. It works just as you say.

Now if i may, I have one more question to fit perfectly my initial request :

Your solution inserts a reset button for each 'th'(row header) inside the question with the id I provide.

I would like to insert the reset button in only one specific row header.
When I inspect the code of the page, I can see that each row is enclosed in a tbody with a specidic ID. So I tried to replace the question ID by the specific tbody ID, but this didn't work :
<script type="text/javascript" charset="utf-8"> 	
$(document).ready(function(){ 		
addReset(javatbd81328X6X1393x3a5); 		
function addReset(tbID) {
  $('#tbody'+tbID+' th.answertext').append('<input type="button" value="Reset" class="resetButton" />'); 
  $('#tbody'+tbID+' .resetButton').click(function(e){
    var el = $(this).parents('tr:eq(0)');
    $('input.radio', el).attr('checked', false);
 });
 }
 });
</script>
 
Is it possible to achieve this ? What am I doing wrong ?
Thanks for your replies !
Last Edit: 5 years 2 months ago by Qat.

Please Log in to join the conversation.

More
5 years 2 months ago #80924 by tpartner
tpartner replied the topic: Reset answers in a table question, using a button and javascript
You were close...
<script type="text/javascript" charset="utf-8">
 
	$(document).ready(function(){
 
		addReset('javatbd81328X6X1393x3a5');
 
		function addReset(tbID) {
			$('#'+tbID+' th.answertext').append('<input type="button" value="Reset" class="resetButton" />');
 
			$('#'+tbID+' .resetButton').click(function(e){
				var el = $(this).parents('tr:eq(0)');
				$('input.radio', el).attr('checked', false);
			});
		}
	});
 
</script>

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

Please Log in to join the conversation.

  • Jules
  • Jules's Avatar
  • Visitor
  • Visitor
4 years 4 weeks ago #98387 by Jules
Jules replied the topic: Reset answers in a table question, using a button and javascript
Hi everybody,

I am wondering if there is a possibility to change the positioning of the reset button. Would it be possible to…

a) …place it on the right side behind the cells with the answers (i.e.,: Question text | Option 1| Option 2| Option 3| Reset button)?

or

b) …have a reset button for the whole question (i.e., if there a five subquestions there would be one reset button which resets all choice for all five subquestions)?

Thanks in advance for any comments and suggestions!

Please Log in to join the conversation.

More
4 years 4 weeks ago #98391 by tpartner
tpartner replied the topic: Reset answers in a table question, using a button and javascript
What version of LimeSurvey are you using?

Where would you want the whole-question reset button to be placed?

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

Please Log in to join the conversation.

  • Jules
  • Jules's Avatar
  • Visitor
  • Visitor
4 years 4 weeks ago #98393 by Jules
Jules replied the topic: Reset answers in a table question, using a button and javascript
Hi,

I am using Version 2.00+ (Build 130611) and I think the button would best fit below the subquestions, for instance in the lower right corner of the question.

Thanks a lot!

Please Log in to join the conversation.

More
4 years 4 weeks ago #98398 by tpartner
tpartner replied the topic: Reset answers in a table question, using a button and javascript
To insert a row reset button for every row at the right, add this to the source of the question text:
<script type="text/javascript" charset="utf-8">	
	$(document).ready(function(){
 
		addReset('{QID}');
 
		function addReset(qID) {
			$('#question'+qID+' table.subquestions-list thead tr').append('<th />');
			$('#question'+qID+' tr.answers-list').append('<td class="buttonCell"><input type="button" value="Reset" class="resetButton" /></td>');
 
			$('#question'+qID+' .resetButton').click(function(e){
				var parentRow = $(this).closest('tr');
				$('input.radio', parentRow).attr('checked', false);
			});
		}
	});
</script>


To insert a question rest button below and to the right of the array, add this to the source of the question text:
<script type="text/javascript" charset="utf-8">	
	$(document).ready(function(){
 
		addReset('{QID}');
 
		function addQuestionReset(qID) {
			$('#question'+qID+' table.subquestions-list').after('<input type="button" style="float:right;" value="Reset Question" class="resetQuestionButton" />');
 
			$('#question'+qID+' .resetQuestionButton').click(function(e){
				var parentQuestion = $(this).closest('.array-flexible-row');
				$('input.radio', parentQuestion).attr('checked', false);
			});
		}
	});
</script>

Attachment Capture_2013-07-23.JPG not found


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: Jules

Please Log in to join the conversation.

  • Jules
  • Jules's Avatar
  • Visitor
  • Visitor
4 years 4 weeks ago #98429 by Jules
Jules replied the topic: Reset answers in a table question, using a button and javascript
Hi Tony,

Thanks a lot for your help.

Unfortunately, the second version (add reset button for the whole question) does not work with me. I don't know what's wrong... I even tried to replicate it using the exact same layout that you used but I could not get it to work.

Concerning the first option, I have a follow up question. Using my layout, you have to scroll to access the reset button. Is there any way to avoid that?

Attachment Reset.JPG not found



I tried to add this to the template.css hoping that the remaining 15% would be taken for the reset button but the code does not affect the layout of my question at all.

#question18463 col.col-answers {
width: 25% !important;
}
#question18463 col.odd,
#question18463 col.even {
width: 20% !important;
}

Thanks again!
Julia
Attachments:

Please Log in to join the conversation.

More
4 years 4 weeks ago #98434 by DenisChenu
DenisChenu replied the topic: Reset answers in a table question, using a button and javascript
Julia,

For citronade, table are set to table-layout:fixed.

Than update template to have
table-layout:auto.

Denis

Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member, professional service on demand (or search sondages pro).
An error happen ? Before make a new topic : remind the Debug mode .
The following user(s) said Thank You: Jules

Please Log in to join the conversation.

More
4 years 3 weeks ago #98452 by tpartner
tpartner replied the topic: Reset answers in a table question, using a button and javascript

Unfortunately, the second version (add reset button for the whole question) does not work with me.

It works fine for me in citronade. Have you added any other JavaScript? Any JavaScript errors?

Using my layout, you have to scroll to access the reset button.

Yeah, Denis is correct, if using citronade, you need too change the table-layout rule:
<script type="text/javascript" charset="utf-8">	
	$(document).ready(function(){
 
		addReset('{QID}');
 
		function addReset(qID) {
			$('#question'+qID+' table.subquestions-list').css('table-layout', 'auto');
			$('#question'+qID+' table.subquestions-list thead tr').append('<th />');
			$('#question'+qID+' tr.answers-list').append('<td class="buttonCell"><input type="button" value="Reset" class="resetButton" /></td>');
 
			$('#question'+qID+' .resetButton').click(function(e){
				var parentRow = $(this).closest('tr');
				$('input.radio', parentRow).attr('checked', false);
			});
		}
	});
</script>

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: Jules

Please Log in to join the conversation.

  • lsorg
  • lsorg's Avatar
  • Visitor
  • Visitor
4 years 3 weeks ago - 4 years 3 weeks ago #98600 by lsorg
lsorg replied the topic: Reset answers in a table question, using a button and javascript
Hello,

tpartner

To insert a question rest button below and to the right of the array, add this to the source of the question text:

<script type="text/javascript" charset="utf-8">
$(document).ready(function(){

addReset('{QID}');

function addQuestionReset(qID) {
$('#question'+qID+' table.subquestions-list').after('<input type="button" style="float:right;" value="Reset Question" class="resetQuestionButton" />');

$('#question'+qID+' .resetQuestionButton').click(function(e){
var parentQuestion = $(this).closest('.array-flexible-row');
$('input.radio', parentQuestion).attr('checked', false);
});
}
});
</script>

The code works very well. But not for array dual scale. Knows everyone how I have to change the code that the reset button works with the array dual scale?

Best regards
lsorg
Last Edit: 4 years 3 weeks ago by lsorg.

Please Log in to join the conversation.

More
4 years 3 weeks ago - 4 years 3 weeks ago #98608 by tpartner
tpartner replied the topic: Reset answers in a table question, using a button and javascript

Knows everyone how I have to change the code that the reset button works with the array dual scale?


Here is a more generic version of the code:

<script type="text/javascript" charset="utf-8">	
	$(document).ready(function(){
 
		addReset('{QID}');
 
		function addQuestionReset(qID) {
			var thisQuestion = $('#question'+qID+'');
 
			$('table.subquestions-list', thisQuestion).after('<input type="button" style="float:right;" value="Reset Question" class="resetQuestionButton" />');
 
			$('#question'+qID+' .resetQuestionButton').click(function(e){
				$('input.radio', thisQuestion).attr('checked', false);
			});
		}
	});
</script>

Cheers,
Tony Partner
Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
Last Edit: 4 years 3 weeks ago by tpartner.

Please Log in to join the conversation.

  • lsorg
  • lsorg's Avatar
  • Visitor
  • Visitor
4 years 2 weeks ago #98886 by lsorg
lsorg replied the topic: Reset answers in a table question, using a button and javascript
Is it possible to set one reset button for two question which are in the same question group?

I have two dual scales side by side and want only one rest button for them.

Please Log in to join the conversation.

More
4 years 1 week ago #98936 by tpartner
tpartner replied the topic: Reset answers in a table question, using a button and javascript

Is it possible to set one reset button for two question which are in the same question group?

I have two dual scales side by side and want only one rest button for them.


To reset all radios in all dual-scale-arrays on a page, change this:
$('input.radio', thisQuestion).attr('checked', false);

To this:
$('.array-flexible-duel-scale input.radio').attr('checked', false);

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

Please Log in to join the conversation.

Did you already participate in our customer survey?

Don't miss your chance for great prices.

Please click here to participate:

Start now

Start now!

Just create your account and start using Limesurvey today.

Register now