One last question... how do I get radio buttons in addition rows? I am trying to add a third row and the buttons won't show up. Note I added additional .question-text referencing the new row.
Code:
Please, select one of the videos
<table align="center" border="4" cellpadding="5" cellspacing="3" class="table table-responsive" style="width:1100px">
<tbody>
<tr style="height:80px;">
<td class="td0 center"><iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" frameborder="0" sandbox="allow-scripts allow-same-origin" src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=a6VETbKPaM6S-B3K" title="YouTube video player" width="260"></iframe>
<center>Rick is number 1 best!</center>
</td>
<td class="td0 center"><iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" frameborder="0" sandbox="allow-scripts allow-same-origin" src="https://www.youtube.com/embed/megGOXIJBEE?si=UphxFyIBF4jukAhM" title="YouTube video player" width="260"></iframe>
<center>I love dumb dog! Is best one!</center>
</td>
<td class="td0 center"><iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" frameborder="0" sandbox="allow-scripts allow-same-origin" src="https://www.youtube.com/embed/aFYsJYPye94?si=uo4ijj025WCqFSvf" title="YouTube video player" width="260"></iframe>
<center>Listen, Linda!</center>
</td>
</tr>
<tr style="height:40px;">
<td class="td0 center"> </td>
<td class="td0 center"> </td>
<td class="td0 center"> </td>
</tr>
<tr style="height:80px;">
<td class="td0 center"><iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" frameborder="0" sandbox="allow-scripts allow-same-origin" src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=a6VETbKPaM6S-B3K" title="YouTube video player" width="260"></iframe>
<center>Rick is number 2 best!</center>
</td>
<td class="td0 center"><iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" frameborder="0" sandbox="allow-scripts allow-same-origin" src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=a6VETbKPaM6S-B3K" title="YouTube video player" width="260"></iframe>
<center>Rick is number 3 best!</center>
</td>
<td class="td0 center"><iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" frameborder="0" sandbox="allow-scripts allow-same-origin" src="https://www.youtube.com/embed/9bZkp7q19f0?si=liCgEsZAzFwxta2R" title="YouTube video player" width="260"></iframe>
<center>Gangnam Style!!</center>
</td>
</tr>
<tr style="height:40px;">
<td class="td0 center"> </td>
<td class="td0 center"> </td>
<td class="td0 center"> </td>
</tr>
<tr style="height:80px;">
<td class="td0 center"><iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" frameborder="0" sandbox="allow-scripts allow-same-origin" src="https://www.youtube.com/embed/wyx6JDQCslE?si=iFz2VOnqOoF7dzQp" title="YouTube video player" width="260"></iframe>
<center>LMFAO!</center>
</td>
<td class="td0 center"><iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" frameborder="0" sandbox="allow-scripts allow-same-origin" src="https://www.youtube.com/embed/kfVsfOSbJY0?si=o-FHINPPM_RcWPQl" title="YouTube video player" width="260"></iframe>
<center>It's Friday!</center>
</td>
<td class="td0 center"><iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" frameborder="0" sandbox="allow-scripts allow-same-origin" src="https://www.youtube.com/embed/MtN1YnoL46Q?si=VQa44r3o7B3be6rY" title="YouTube video player" width="260"></iframe>
<center>Quack</center>
</td>
</tr>
<tr style="height:40px;">
<td class="td0 center"> </td>
<td class="td0 center"> </td>
<td class="td0 center"> </td>
</tr>
</tbody>
</table>
<script type="text/javascript" charset="utf-8">
$(document).on('ready pjax:scriptcomplete',function(){
// Identify this question
var thisQuestion = $('#question{QID}');
// Move the radios
$('.question-text table:eq(0) tr:eq(1) td:eq(0)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(0) *', thisQuestion));
$('.question-text table:eq(0) tr:eq(1) td:eq(1)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(1) *', thisQuestion));
$('.question-text table:eq(0) tr:eq(1) td:eq(2)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(2) *', thisQuestion));
$('.question-text table:eq(0) tr:eq(3) td:eq(0)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(3) *', thisQuestion));
$('.question-text table:eq(0) tr:eq(3) td:eq(1)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(4) *', thisQuestion));
$('.question-text table:eq(0) tr:eq(3) td:eq(2)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(5) *', thisQuestion));
$('.question-text table:eq(0) tr:eq(5) td:eq(0)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(6) *', thisQuestion));
$('.question-text table:eq(0) tr:eq(5) td:eq(1)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(7) *', thisQuestion));
$('.question-text table:eq(0) tr:eq(5) td:eq(2)', thisQuestion).prepend($('.subquestion-list .answers-list:eq(0) .answer-item:eq(8) *', thisQuestion));
// Some classes for presentation
$('.question-text table:eq(0) input:radio', thisQuestion).closest('td').addClass('answer-item radio-item text-center radio');
$('.question-text table:eq(0) .radio-item label', thisQuestion).show();
// Click event on the table cells
$('.question-text table:eq(0) .radio-item', thisQuestion).on('click', function(e) {
$('input:radio', this).trigger('click');
});
$('.question-text table:eq(0) input:radio', thisQuestion).on('click', function(e) {
e.stopPropagation();
});
// Clean-up styles
$('.answer-container', thisQuestion).hide();
$('.question-text table:eq(0) .label-text', thisQuestion).remove();
$('.question-text table:eq(0) .radio-text', thisQuestion).css({
'cursor': 'pointer'
});
$('td.radio', thisQuestion).css({
'display': 'table-cell',
'padding': '3px'
});
});
</script>
<style type="text/css">/* classes to display the form */
.dir-ltr .radio-item .ls-label-xs-visibility, .dir-ltr .checkbox-item .ls-label-xs-visibility {
left: auto;
margin-left: 0px;
}
.td0 {
text-align: left;
vertical-align: middle;
font-size:13px;
color:black;
padding-top:5px;
padding-bottom:5px;
border-left:0;
border-right:0;
}
.center {
text-align: center;
}
/* classes to change the size of radios */
.radio-item .ls-label-xs-visibility {
width: 30px;
height: 30px;
}
.radio-item label {
padding-left: 25px;
padding-top: 3px;
}
.radio-item label:before {
width: 30px;
height: 30px;
border-color: #aaa;
margin-right: 20px;
}
.radio-item label::after {
background-color: #702000;
width: 20px;
height: 20px;
left: 5px;
top: 5px;
}
</style>
Topic Author
