Hi,
yes you can do this
1. question of type "multiple" where you remove some checkboxes
You only enter this script into the source code of the question
Code:
<script charset="utf-8" type="text/javascript">
$(document).ready(function() {
$( '#question{QID} .question-item:eq(0)').addClass('hide-pseudo-elements').find('input.checkbox').remove();
$( '#question{QID} .question-item:eq(7)').addClass('hide-pseudo-elements').find('input.checkbox').remove();
$( '#question{QID} .question-item:eq(13)').addClass('hide-pseudo-elements').find('input.checkbox').remove();
});
</script>
You see here (eq(x) the rows where the checkbox is removed (starting with 0)
And some styling
I used a class called .myHeader to shorten the subquestion text
Code:
<style type="text/css">.hide-pseudo-elements label::before,
.hide-pseudo-elements label::after
{
display: none;
}
.hide-pseudo-elements .label-text
{
margin-left: -40px;
}
.myHeader
{
color: maroon;
font-weight: bold;
background-color: #eeeeee;
border: 1px solid #cccccc;
padding: 1px 5px;
margin-left: -25px;
display: inline-block;
min-width: 100%;
}
li.radio-item, li.checkbox-item, li.radio-text-item, li.checkbox-text-item {
margin-bottom: 0.5em;
}
.checkbox-item label {
min-width: 100%;
}
</style>
You see with your 70 items it will be a very long and boring list.
But it will get messy if you display in more than one column.
Therefore there ist a different solution based on a question "multiple with comments"
Now the items are ordered horizontally
This script
Code:
<script type="text/javascript" data-author="Tony Partner">
$(document).on('ready pjax:scriptcomplete',function(){
// Identify this question
var qID = '{QID}';
var thisQuestion = $('#question'+qID);
/****** HEADER ROWS ******/
// Find the header rows
var headerRowPrefix = 'O';
var headerRows = $('li[id^="javatbd"]', thisQuestion).filter(function() {
return $(this).attr('id').includes('X'+qID+headerRowPrefix+'');
});
// Loop through the header rows
$(headerRows).each(function(i) {
// Assign a class name
$(this).addClass('inserted-header-row')
// Move the label
.prepend($('label.control-label:eq(0)', this))
// Remove unecessary elements
.find('input, div').remove();
});
/****** ANSWERS INTO COLUMNS ******/
// Number of columns to display (max 4)
var columns = 4;
thisQuestion.addClass('with-inserted-columns columns-'+columns+'');
/****** REMOVE SOME TEXT INPUTS ******/
// Find the rows to keep text inputs
var textRowPrefix = 'oth';
var textRows = $('li[id^="javatbd"]', thisQuestion).filter(function() {
return $(this).attr('id').includes('X'+qID+textRowPrefix+'');
});
// Remove text inputs from all except those rows
$('li[id^="javatbd"]', thisQuestion).not(textRows).find('div.text-item').remove();
});
</script>
And the css
Code:
<style data-author="Tony Partner" type="text/css">li.inserted-header-row {
float: none;
clear: both;
flex: 0 0 100%;
}
li.inserted-header-row label {
/* Hier wird das Layout der Überschrift; kann man alles nach Gusto ändern */
padding-left: 15px;
padding-right: 15px;
padding-top:0 !important;
font-weight: bold;
width: 100%;
background-color:#e29514;;
border: 1px solid gray;
border-radius: 5px;
font-size: 18px;
color: #001957;
}
li.inserted-header-row label::before,
li.inserted-header-row label::after{
display: none;
}
@media only screen and (min-width: 768px) {
.with-inserted-columns ul.ls-answers {
display: flex;
flex-flow: row wrap;
}
.with-inserted-columns ul.ls-answers li {
margin: 0 0 1em 0;
padding: 0 15px 0 0;
}
.with-inserted-columns.columns-2 ul.ls-answers li { flex: 0 0 50%; }
.with-inserted-columns.columns-3 ul.ls-answers li { flex: 0 0 33%; }
.with-inserted-columns.columns-4 ul.ls-answers li { flex: 0 0 25%; }
.with-inserted-columns.columns-5 ul.ls-answers li { flex: 0 0 20%; }
.with-inserted-columns ul.ls-answers li.inserted-header-row {
flex: 0 0 100%;
padding: 0;
}
.with-inserted-columns ul.ls-answers li > div {
float: none;
width: auto;
}
.with-inserted-columns ul.ls-answers li label {
text-align: center;
}
.with-inserted-columns ul.ls-answers li input[type="text"] {
margin-top: 0.7em;
}
}
</style>
You see in the code that header rows, other items are marked by a special character in the subquestion code.
Of course you can change this.
var headerRowPrefix = 'O';
var textRowPrefix = 'oth';
Joffm
