Add answer options of the close questions to the open questions

Add answer options of the close questions to the open questions (open/number/text/textgrid question type)

To add answer options of the close questions to the open questions (open/number/text/textgrid question type), please follow below steps:

1. Copy the Javascript function addCloseAO() into the Javascript area of the open question. Using guide about the function addCloseAO() are comments of below javascript code snippet. You also need to know about the Catglobe Replacement Tags to be able to use above function.

2. Add the answer options of the close questions to the open question by using above function addCloseAO() and put this part into the body of function quest.onInit(). This quest.onInit() code also must be put into the Javascript area of the open question.

3. The close question must be set to dummy. If not then the questionnaire will always stay at the open question when you click the next button, in other words the questionnaire can not move to the next question.

Below is an example about adding an answer option of a multi question into a text grid question. The final result of this text grid question will look like below:

To implement this, i created 2 questions:

• A text grid question which will contain all below Javascript codes. Name of this question is: Case1_Textgrid
• A multi question which contain the answer option will be added to above text grid question. Name of this question is:Case1_Multi

/**************************************************************************
 * ADD RADIO OR CHECKBOX OF ANSWER OPTIONS OF CLOSE QUESTIONS
 * @param object parameterObj The structure of this object 
 {
 containerSelector: string type, the location which this radio/checkbox will be appended into. Ex: '#page_question_text', 
 inputType: string type, there are 2 available values: 'radio' and 'checkbox', 
 questionName: string type, the name of the single/multi question. Ex: 'ChooseQnaireByCountry', 
 answerOptionValue: string type. Ex: '1', 
 answerValue: string type, must be the replacement tags. See this wiki link for more info: http://wiki.catglobe.com/index.php/Replacement_tags,
 answerOptionText: string type, the text of the answer option. Ex: 'this is answer option 1', 
 isHidden: boolean type, if true then the added radio/checkbox will be shown, else it will be hidden,
 disableOpenQuestionsIfChecked: string type, the name of open question which this close question will added into. If this option is set then the text boxes of open question will be disabled when this radio/checkbox is checked. Ex: 'Case1_Textgrid'
 } 
 * @return jqueryObject jquery radio/checkbox element
 **************************************************************************/
function addCloseAO(parameterObj) {

 var input = $('<input type="' + parameterObj.inputType + '"/>')
 .attr({
 'class': 'ao_InputElement ' + parameterObj.questionName + ' value_' + parameterObj.answerOptionValue,
 'name': 'QUESTION.' + parameterObj.questionName,
 'value': parameterObj.answerOptionValue,
 'checked': parameterObj.answerValue === parameterObj.answerOptionValue ? true : false
 });
 if(typeof parameterObj.disableOpenQuestionsIfChecked === 'string' && parameterObj.disableOpenQuestionsIfChecked !== '') {
 $(function() {
 $('input:submit[name=next]').click(function() {
 if(input.attr('checked'))
 $('input:text[name^="QUESTION.' + parameterObj.disableOpenQuestionsIfChecked + '"]').attr('disabled', false).val('');
 });
 });
 input.click(function() {
 if( $(this).attr('checked') ) 
 $('input:text[name^="QUESTION.' + parameterObj.disableOpenQuestionsIfChecked + '"]').attr('disabled', true).val('');
 else
 $('input:text[name^="QUESTION.' + parameterObj.disableOpenQuestionsIfChecked + '"]').attr('disabled', false);
 });
 
 }
 if(input.attr('checked'))
 $('input:text[name^="QUESTION.' + parameterObj.disableOpenQuestionsIfChecked + '"]').attr('disabled', true);
 
 var span = $('<span>')
 .addClass('ao_Text ' + parameterObj.questionName + ' value_' + parameterObj.answerOptionValue)
 .text(parameterObj.answerOptionText);

 var div = $('<div>')
 .attr({
 'class': 'ao_Container ' + parameterObj.questionName + ' value_' + parameterObj.answerOptionValue,
 'name': 'QUESTION.' + parameterObj.questionName,
 'value': parameterObj.answerOptionValue
 })
 .css('display', parameterObj.isHidden ? 'none' : 'block');
 
 div.append(input, span);
 $(parameterObj.containerSelector).append(div);
 
 if($('input[type="hidden"][name="QUESTION.' + parameterObj.questionName + '"]').length === 0)
 $(parameterObj.containerSelector).append( 
 $('<input type="hidden"/>').attr( {
 'name': 'QUESTION.' + parameterObj.questionName, 
 'value': ''
 } )
 );
 
 return input;
}

// DO THE JOB
quest.onInit = function() {
 // Add the close question
 window.checkboxInputElement = addCloseAO({
 containerSelector: '.QuestionSpace p:first', 
 inputType: 'checkbox', 
 questionName: 'Case1_Multi', 
 answerOptionValue: '1', 
 answerValue: '{{Case1_Multi[0].value}}', 
 answerOptionText: 'Don’t know / Do not wish to answer', 
 isHidden: false,
 disableOpenQuestionsIfChecked: 'Case1_Textgrid'
 });
};