1) Create a multiple-numeric question with one sub-question and slider enabled.
2) Insert the table HTML in the question sourcelike this:
Code:
<table>
<tr>
<td>Definitely Would</td>
<td>Probably Would</td>
<td>Might / Might Not</td>
<td>Probably Not</td>
<td>Definitely Not</td>
</tr>
<td class="slider-cell" colspan="5"></td>
</tr>
</table>
3) Insert this script in the question source. It will move the slider into the table:
Code:
<script type="text/javascript" data-author="Tony Partner">
$(document).on('ready pjax:scriptcomplete',function(){
// Identify this question
var thisQuestion = $('#question{QID}');
// Move the slider
$('.question-text tr:eq(1) td:eq(0)', thisQuestion).append($('.slider-container', thisQuestion));
});
</script>
4) Insert some clean-up styles in the question source like this:
Code:
<style type="text/css" data-author="Tony Partner">
#question{QID} .answer-container,
#question{QID} .tooltip {
display: none !important;
}
#question{QID} .question-text table {
margin: 20px auto;
width: 95%;
max-width: 800px;
border-collapse: collapse;
}
#question{QID} .question-text td {
padding: 5px 10px;
text-align: center;
background-color: #FFFFFF;
border: 1px solid #E7E7E7;
}
#question{QID} .question-text td.slider-cell {
padding: 15px 10px;
}
</style>
Sample survey attached:
Topic Author
