Here is the script:
<script type="text/javascript" src="
code.jquery.com/jquery-3.6.0.min.js
">
<script type="text/javascript">
$(document).ready(function() {
var checkClosest = function(event) {
event.target.firstElementChild.click();
};
var thisQuestion = $('#question{QID}');
// Insert dropdowns
if (!thisQuestion.find(".inserted-dropdown").length) {
var dropdownTemplate = '<div style="text-align: left" class="list-question-select">\
<span class="clickable-span">\
<select class="inserted-dropdown" name="dropdown_{QID}">\
<option value="">Please choose</option>\
<option value="rare, not severe">rare, not severe</option>\
<option value="rare, severe">rare, severe</option>\
<option value="occasional, not severe">occasional, not severe</option>\
<option value="occasional, severe">occasional, severe</option>\
<option value="frequent, not severe">frequent, not severe</option>\
<option value="frequent, severe">frequent, severe</option>\
<option value="No">Not Applicable</option>\
</select>\
</span>\
</div>';
$('.answer-item', thisQuestion).addClass('with-select').each(function() {
var dropdownHtml = dropdownTemplate.replace(/{QID}/g, $(this).data('qid'));
$(this).append(dropdownHtml);
});
}
// Insert date fields with "Know" and "Don't know" options
if (!thisQuestion.find(".date-fields").length) {
var dateFieldsTemplate = '<div class="date-fields" style="display: none;">\
<div class="date-field-container">\
<label>Approx date of onset (if known):</label><br>\
<label class="know-label">Know:</label>\
<input type="date" class="date-field large-date" id="onset-date_{QID}">\
<br>\
<label class="dont-know-label">Don\'t know:</label>\
<input type="checkbox" class="dont-know-checkbox" id="dont-know-onset-date_{QID}">\
</div>\
<div class="date-field-container">\
<label>Approx end date (if at all):</label><br>\
<label class="know-label">Know:</label>\
<input type="date" class="date-field large-date" id="end-date_{QID}">\
<br>\
<label class="dont-know-label">Don\'t know:</label>\
<input type="checkbox" class="dont-know-checkbox" id="dont-know-end-date_{QID}">\
</div>\
<div class="inline-fields">\
<textarea class="comment-box" rows="3" cols="40" style="width: 100%;" placeholder="Comments"></textarea>\
</div>\
</div>';
$('.answer-item', thisQuestion).each(function() {
var dateFieldsHtml = dateFieldsTemplate.replace(/{QID}/g, $(this).data('qid'));
$(this).append(dateFieldsHtml);
});
}
thisQuestion.find("select[name^='dropdown']").each(function() {
var currName = $(this).attr('name').substr(
;
var listQuestionSelect = $(this).closest(".answer-item").find(".list-question-select");
var dateFields = $(this).closest(".answer-item").find(".date-fields");
listQuestionSelect.find('select').each(function() {
$(this).attr('name', 'dropdown' + currName);
});
listQuestionSelect.find('select.inserted-dropdown').on("change", function(event) {
var answerItem = $(this).closest('.answer-item');
var selectedValue = $(this).val();
var dateFields = answerItem.find('.date-fields');
if (selectedValue !== '' && selectedValue !== 'No') {
dateFields.show();
} else {
dateFields.hide();
}
});
listQuestionSelect.find('.comment-box').on('click', function(event) {
event.stopPropagation();
});
});
// Clean-up styles
$('select.inserted-dropdown').addClass('big-dropdown');
$('.list-question-select span').addClass('clickable-span');
$('.with-select input:text', thisQuestion).css({
'position': 'absolute',
'left': '-9999em'
});
// Hide all rows in the array text question initially
$('[id^="javatbd128651X28X6425SQ"]').hide();
//$('.ls-heading.ls-header .answertext.control-label[role="columnheader"]').hide(); // Hides the headers
//$('.ls-heading.ls-heading-repeat').hide();
$('#question6425').hide();
$('[id^="answer128651X28X6347SQ"]').change(function() {
// Extract the subquestion code from the checkbox ID
var row = this.id.match(/SQ\d+$/)[0];
console.log('row:', row);
});
var checkedQuestionCodes = []; // Initialize an empty array to store checked question codes
// Event handler for radio button changes
$('input.inserted-radio[type=radio]').change(function() {
// Extract the last part of the name attribute which is the subQuestionCode
var subQuestionCode = $(this).attr('name').split('_').pop();
console.log('SubQuestionCode:', subQuestionCode);
var name = $(this).attr('name');
var sqIndex = name.indexOf('SQ'); // Find the index of 'SQ' in the string
var questionCode = sqIndex !== -1 ? name.substring(sqIndex, sqIndex + 5) : null; // Extract 'SQ' and the following three characters
// Check if the selected radio button's value is "1"
if ($(this).val() === "1") {
if (checkedQuestionCodes.indexOf(questionCode) === -1) {
checkedQuestionCodes.push('#javatbd128651X28X6425' + questionCode);
}
$('#javatbd128651X28X6425' + questionCode).show();
$('.ls-heading.ls-header .answertext.control-label[role="columnheader"]').show();
$('#question6425').show();
} else {
var index = checkedQuestionCodes.indexOf('#javatbd128651X28X6425' + questionCode);
if (index !== -1) {
checkedQuestionCodes.splice(index, 1);
}
$('#javatbd128651X28X6425' + questionCode).hide();
}
console.log('Checked Question Codes:', checkedQuestionCodes);
});
$('input.inserted-radio[type=radio][value="1"]:checked').each(function() {
$(this).trigger('change');
});
});
</script>
<style>
.know-label,
.dont-know-label {
text-indent: 10px;
}
.ls-heading.ls-header .answertext.control-label[role="columnheader"] {
background-color: #add8e6; /* Light blue color */
}
</style>
