Welcome to the LimeSurvey Community Forum
Ask the community, share ideas, and connect with other LimeSurvey users!
Search Results (Searched for: html)
- r0bis
20 Nov 2023 17:59 - 20 Nov 2023 21:43
- r0bis
20 Nov 2023 17:44 - 20 Nov 2023 20:45
- tpartner
18 Nov 2023 15:38
- tpartner
18 Nov 2023 15:29
- bhavik
17 Nov 2023 22:52
Replied by bhavik on topic Custom javascript Question Data not being populated in exported CSV file
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>
<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>
- Joffm
16 Nov 2023 13:02 - 16 Nov 2023 13:08
- Joffm
15 Nov 2023 13:04 - 15 Nov 2023 13:59
Replied by Joffm on topic Are Bootstrap Buttons with different layout per Row possible? (and how)
Could look like this
And as you display four subquestions you have to create an array with four subquestions and 6 answer options (some are not used)
A simple HTML table with the images.and the shown script with the following changes.
In the script the radio buttons are in the same cells as the image.
In this example there is a separate row below each image.
And please clarify
Or one choice in each row?
Joffm
And as you display four subquestions you have to create an array with four subquestions and 6 answer options (some are not used)
A simple HTML table with the images.and the shown script with the following changes.
In the script the radio buttons are in the same cells as the image.
In this example there is a separate row below each image.
And please clarify
One choice of all 14?where you can only choose 1 option from all the options.
Or one choice in each row?
Joffm
- DenisChenu
15 Nov 2023 10:39 - 15 Nov 2023 10:42
- urbana
15 Nov 2023 10:36
Replied by urbana on topic Really strange HTTP 500 when installing
I am not 100% sure I follow you sorry 
You recommend:
Doing this once:
debug = 2 and asset_manger false
Than saving the HTML
Which HTML?
You recommend:
Doing this once:
debug = 2 and asset_manger false
Than saving the HTML
Which HTML?
- DenisChenu
15 Nov 2023 10:33
- fabionardecchia67
15 Nov 2023 09:33
- Joffm
15 Nov 2023 00:12
- Taliyah-M
13 Nov 2023 21:43 - 13 Nov 2023 21:44
Are Bootstrap Buttons with different layout per Row possible? (and how) was created by Taliyah-M
Your LimeSurvey version: [url=http://localhost/limesurvey/index.php/admin/questions/sa/editquestion/surveyid/841573/gid/4/qid/7#modalSystemInformation]Version 3.28.76+231018[/url]
Own server or LimeSurvey hosting: Own Server
Survey theme/template: Fruity Theme
==================
I started using LimeSurvey for a Uni-Project a llittle bit ago - so i am not that used to coding in Html
For our project we ideally need a selection field where you can only choose 1 option from all the options. I'm thinking that Bootstrap Buttons would be best kind of Selection.
But in that selection field we have a different amount of possible answers in each row - but the row of the answer-option is relevant.
Ive added an image with a drawing of the ideal layout.
I already learned how to put an image as an option, and in each row, the image would have a different width (therefore different amount of answers in each row)
Is it possible to have a different amount of answers in each row? I couldnt find anything online yet.
Im grateful for any help!
Own server or LimeSurvey hosting: Own Server
Survey theme/template: Fruity Theme
==================
I started using LimeSurvey for a Uni-Project a llittle bit ago - so i am not that used to coding in Html
For our project we ideally need a selection field where you can only choose 1 option from all the options. I'm thinking that Bootstrap Buttons would be best kind of Selection.
But in that selection field we have a different amount of possible answers in each row - but the row of the answer-option is relevant.
Ive added an image with a drawing of the ideal layout.
I already learned how to put an image as an option, and in each row, the image would have a different width (therefore different amount of answers in each row)
Is it possible to have a different amount of answers in each row? I couldnt find anything online yet.
Im grateful for any help!
- Joffm
13 Nov 2023 16:26 - 13 Nov 2023 16:27
Replied by Joffm on topic Antwortmöglichkeiten als Abbildungen
Weil in den Antwortoptionen von "image select" nicht das Bild mittels <img src=".../> angezeigt wird, sondern es wird nur der Pfad zum Bild eingegeben.
[url] forums.limesurvey.org/forum/design-issue...ltiple-choice#251338 [/url]
So, jetzt etwas Generelles; und warum ich zweimal erwähnte, 6 sei angenehmer gewesen.
Du weißt ja, dass LimeSurvey die bootstrap-Blbliothek für das Layout benutzt.
Diese basiert auf einem Gitter, das jeden Container in bis zu 12 Spalten unterteilt, von denen dann jede wieder in 12 Spalten unterteilt werden können.
Daher siehst Du auch (wenn Du "bootstrap-buttons" als Fragevorlage benutzt), dass Du zwischen 1,2,3,4,6,12 Buttons/pro Zeile wählen kannst.
Eben die Teiler von 12.
Langer Rede kutzer Sinn.
Um 7 Bildchen nebeneinander darzustellen, musst Du "12 Spalten " angeben; dann bleibt rechts eben ziemlich viel frei.
Und der Rahmen ist überdimensioniert.
Gut ein bisschen css hilft
Du siehst, ich habe die Farbe des Rahmens einmal in hsl-Syntax, einmal in rgb-Syntax angegeben.
Nimm, was Dir besser gefällt!
Und, wenn Du keinen Wert auf Durchsichtigkeit legst, eben einfach hex.
Findest Du bei "W3Schools"
[url] www.w3schools.com/html/html_colors.asp [/url]
Wie Du siehst ist es etwas fitzelig
Der Vergleich (nur 6 Bilder).
Aus diesem Grund würde ich diesen Fragetyp nicht nehmen, sondern doch eher eine Matrix.
So wie diese hier
Einfach mit css die Rähmchen entfernt.
Joffm
[url] forums.limesurvey.org/forum/design-issue...ltiple-choice#251338 [/url]
So, jetzt etwas Generelles; und warum ich zweimal erwähnte, 6 sei angenehmer gewesen.
Du weißt ja, dass LimeSurvey die bootstrap-Blbliothek für das Layout benutzt.
Diese basiert auf einem Gitter, das jeden Container in bis zu 12 Spalten unterteilt, von denen dann jede wieder in 12 Spalten unterteilt werden können.
Daher siehst Du auch (wenn Du "bootstrap-buttons" als Fragevorlage benutzt), dass Du zwischen 1,2,3,4,6,12 Buttons/pro Zeile wählen kannst.
Eben die Teiler von 12.
Langer Rede kutzer Sinn.
Um 7 Bildchen nebeneinander darzustellen, musst Du "12 Spalten " angeben; dann bleibt rechts eben ziemlich viel frei.
Und der Rahmen ist überdimensioniert.
Gut ein bisschen css hilft
Code:
<style type="text/css">li.imageselect-listitem .imageselect-container .imageselect-label { border: 3px solid hsla(0,0%,60%,0.9); } li.imageselect-listitem .imageselect-container input.imageselect-checkbox:checked+label { border: 3px solid rgb(255,0,0,0.9); } .radio-item input[type="radio"]:checked + label::after { display:none; } </style>
Du siehst, ich habe die Farbe des Rahmens einmal in hsl-Syntax, einmal in rgb-Syntax angegeben.
Nimm, was Dir besser gefällt!
Und, wenn Du keinen Wert auf Durchsichtigkeit legst, eben einfach hex.
Findest Du bei "W3Schools"
[url] www.w3schools.com/html/html_colors.asp [/url]
Wie Du siehst ist es etwas fitzelig
Der Vergleich (nur 6 Bilder).
Aus diesem Grund würde ich diesen Fragetyp nicht nehmen, sondern doch eher eine Matrix.
So wie diese hier
Einfach mit css die Rähmchen entfernt.
Code:
<style type="text/css"> .fruity .table-bordered>tbody>tr>th, .fruity .table-bordered>tbody>tr>td, .fruity .table-bordered>thead>tr>th, .fruity .table-bordered>thead>tr>td, .fruity .table-bordered { border: 0; } </style>
Joffm
- bdbp23
11 Nov 2023 02:07 - 11 Nov 2023 02:09