Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

Format answers with iframes as a table?

More
1 year 7 months ago - 1 year 7 months ago #254763 by bubbagump210
Format answers with iframes as a table? was created by bubbagump210
Please help us help you and fill where relevant:
Your LimeSurvey version: 6.4.1 CE
Own server or LimeSurvey hosting: Self hosted
Survey theme/template: Vanilla
==================
I am trying to setup a voting system for my son's school. They are posting videos and voters are allowed to vote for one best winner. I think I have everything figured out except the answer formatting. Currently I have a answers like:
Code:
<span style="display: none;">Option 1</span><iframe allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen="" frameborder="0" height="315" sandbox="allow-scripts allow-same-origin" src="https://www.youtube.com/embed/dQw4w9WgXcQ?si=a6VETbKPaM6S-B3K" title="YouTube video player" width="560"></iframe><center>Rick is number 1 best!</center>

This creates a long list of options with a radio button at the upper left of the iframe.

Ideally I would like to create a table of answers ( 2 wide or 3 wide and however many long), put the radio button next to the Text in the <Center> tag, and get rid of the red asterisk.

Can I do this?

Screen shot of current attached.

FWIW, I tried to remove the red asterisk using .asterisk {display: none;} ala the FAQ. I chose Vanilla, extend, clicked the custom.css, added that line, and "copy to this theme and save". When I previewed the survey I got a blank white page - so I did something wrong. When I viewed source and clicked into the custom.css in the preview the code show was as follows:
Code:
/******************
User custom CSS
---------------
 
In this file you can add your own custom CSS
It will be loaded last, so you can override any other property.
Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/
 
.table-bordered > thead > tr > th {
border: 1px solid #dadada;
}
.table-bordered > thead > tr > td {
border: 1px solid #dadada;
}
.asterisk {display: none;}

So it sure seems the CSS is loading that new line but not behaving as expected.
 
Last edit: 1 year 7 months ago by bubbagump210.

Please Log in to join the conversation.

More
1 year 7 months ago #254772 by Joffm
Replied by Joffm on topic Format answers with iframes as a table?
To show more than one video in a row is easy. Set the "columns" accordingly.
 

Here two images to show that it is possible to center the buttons.
This is a HTML table in the question text and the buttons are moved there by javascript.

 



Now pülease send a lss export of these relevant questions and we will see.

Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

More
1 year 7 months ago #254774 by bubbagump210
Replied by bubbagump210 on topic Format answers with iframes as a table?
Aha, I see the columns setting. That was easy enough. Thank you!

So it's down to the red asterisk and your JavaScript mention. The LSS is attached.

I know how to create a table easily enough in the question. So I am curious to know how to link the question to the answer.

Please Log in to join the conversation.

More
1 year 7 months ago - 1 year 7 months ago #254775 by Joffm
Replied by Joffm on topic Format answers with iframes as a table?
Quick test

 
 
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 1 year 7 months ago by Joffm.

Please Log in to join the conversation.

More
1 year 7 months ago #254776 by Joffm
Replied by Joffm on topic Format answers with iframes as a table?
And I do not see any issue setting

in the "custoom.css" of the extended theme.

And why do you make us first unzip your file?
Attach the lss. It's small enough.

Joffm
 
Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

More
1 year 7 months ago #254777 by bubbagump210
Replied by bubbagump210 on topic Format answers with iframes as a table?
Sorry, I simply posted it exactly as it came out of LimeSurvey. I didn't know the convention.

Please Log in to join the conversation.

More
1 year 7 months ago #254778 by Joffm
Replied by Joffm on topic Format answers with iframes as a table?
But then it seemed to be a lsa export.
You see there are several different export options

lsq (q=question)  exports a single question
lsg (g=group) exports a single group
lss (s=survey (or structure)) exports the structure of the entire survey including survey wide settings
lsa (a=archive) exports the structure of the survey AND the responses.

We always ask for lss, because lsq and lsg are language sensitive, while lss contains everything needed to ease the work of us volunteers.

Joffm
Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

More
1 year 7 months ago #254779 by bubbagump210
Replied by bubbagump210 on topic Format answers with iframes as a table?
Try this... it doesn't seem to give me any option as to if I can use a ZIP or not.

I am totally bewildered on the CSS issue. I also enabled debug as I saw elsewhere that the cache theme can be an issue and it didn't change anything. It's a minor issue which I can continue to chase after. The JavaScript is beyond me though. Thank you for your help so far!

Please Log in to join the conversation.

More
1 year 7 months ago - 1 year 7 months ago #254796 by Joffm
Replied by Joffm on topic Format answers with iframes as a table?
Hi, here is the question with 5 videos.
Your three and - just to show - two more Ricks.
 

Up to you to adapt to your number of videos (or display only two in a row)

 

File Attachment:

File Name: limesurvey...6577.lss
File Size:32.65 KB


Joffm

By the way:
You used an image-select question.
This is to display images. And here you enter only the path to the image without any HTML.
And you click the image to select
 

Otherwise it is displayed as a normal list(radio), as you see in your example.
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 1 year 7 months ago by Joffm.
The following user(s) said Thank You: DenisChenu

Please Log in to join the conversation.

More
1 year 7 months ago #254799 by DenisChenu
Replied by DenisChenu on topic Format answers with iframes as a table?

You used an image-select question.
 
I don't recommend using this theme for reasons of accessibility and web quality.
Assistance on LimeSurvey forum and LimeSurvey core development are on my free time.
I'm not a LimeSurvey GmbH member. - Professional support - Plugins, theme and development .
I don't answer to private message.

Please Log in to join the conversation.

More
1 year 7 months ago #254800 by Joffm
Replied by Joffm on topic Format answers with iframes as a table?
Nor do I.
I only mentioned it because the TO used it by mistake.

Joffm 
Volunteers are not paid.
Not because they are worthless, but because they are priceless
The following user(s) said Thank You: DenisChenu

Please Log in to join the conversation.

More
1 year 7 months ago #254816 by bubbagump210
Replied by bubbagump210 on topic Format answers with iframes as a table?
This is fantastic, thank you! I would have never have gotten all of that JS and CSS figured out.

As for image radio vs list radio - don't give credit for a mistake when it was ignorance.

Thank you again!

Please Log in to join the conversation.

More
1 year 7 months ago - 1 year 7 months 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: 1 year 7 months ago by bubbagump210.

Please Log in to join the conversation.

More
1 year 7 months 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.

Moderators: tpartner, holch

Lime-years ahead

Online-surveys for every purse and purpose

Pricing & Plans
Get started

Legal

About Us

Open Source