Welcome to the LimeSurvey Community Forum

Ask the community, share ideas, and connect with other LimeSurvey users!

Format answers with iframes as a table?

  • bubbagump210
  • bubbagump210's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
3 months 1 week ago - 3 months 1 week ago #254818 by bubbagump210
Replied by bubbagump210 on topic Format answers with iframes as a table?
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>
 
Last edit: 3 months 1 week ago by bubbagump210.

Please Log in to join the conversation.

  • bubbagump210
  • bubbagump210's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
3 months 1 week ago #254819 by bubbagump210
Replied by bubbagump210 on topic Format answers with iframes as a table?
Ignore me... I realized I also have to add answers, not just update the script.

Also, the .asterisk {display: none;} won't work at all in the custom.css but it does work in the CSS of the question. I am not sure the reason. In any event, I am in good shape and thank you again for all of the help.

Please Log in to join the conversation.

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source