Hi, to explain a bit.
One question of type "multiple" with only one subquestion "not relevant" (Q1).
Here you display the question text.
Followed by the array. (Q2)
The array is hidden, if the checkbox "not relevant" is selected -> relevance equation "Q1_SQ001!="Y"
Now a bit more styling by some css and javascript.
Merge the two questions with the classes "no-botton" in Q1 and "no question" in Q2.
Code:
.no-question { border-top:0; }
.no-question .question-title-container { display:none; }
.no-question .question-valid-container { display:none; }
.no-bottom { border-bottom:0;margin-bottom:0; }
.no-question .answer-container {
padding-top: 0em;
padding-bottom: 0.5em;
}
.no-bottom .answer-container {
padding-bottom: 0em;
}
And to insert the "Endiometriosis" text into the array this javascript
Code:
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
// Identify this question
var thisQuestion = $('#question{QID}');
// Insert header text
var insertedText = "Because of My Endometriosis:";
$('table.subquestion-list thead tr:last td:first', thisQuestion).addClass('inserted-header').append(insertedText);
});
</script>
Again with some css
Code:
<style type="text/css">td.inserted-header {
font-size:20px;
font-family:Arial,Helvetica,sans-serif;
font-weight: bold;
text-align: left;
vertical-align: middle !important;
}
</style>
Of course you may adapt to your needs.
Looks like this
Joffm