Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

creating a table using javascript and the options are based previous answer

More
4 years 2 weeks ago #232100 by Joffm
Replied by Joffm on topic creating a table using javascript and the options are based previous answer
This is what I sent

So you should be able to import.

But nevertheless, here again.
 

File Attachment:

File Name: limesurvey... (2).lss
File Size:38.46 KB


In about an hour I show you again the script.


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

Please Log in to join the conversation.

More
4 years 2 weeks ago #232102 by jelo
Replied by jelo on topic creating a table using javascript and the options are based previous answer
Your first file was fine. I was able to import it in demo.limesurvey.org (LS5).

Perhaps the file download was incomplete or the cloud version has a bug (it's not 100% identically to the community version.
The meaning of the word "stable" for users
www.limesurvey.org/forum/development/117...ord-stable-for-users

Please Log in to join the conversation.

More
4 years 2 weeks ago #232105 by qiangqi
Replied by qiangqi on topic creating a table using javascript and the options are based previous answer
Hi Joffm,

I have known the reason. because the limesurvey of mine is a group account, so I have to create a new account for open the file you sent to me, and the new account is version 5.xx. Now, I just use other version 3 to try it and it could be imported. but it still has problem and now I am not sure it is why. I am trying to solve it.
from the first picture, this is the command from you and it shows undefined variable ,so I change it to my vatiable from ptm_1 to ptransportmode_PT1, but the errors appear more, shown as second picture. and the last picture is the command after I changed the variable name.

Best,
Qiang

Please Log in to join the conversation.

More
4 years 2 weeks ago #232106 by qiangqi
Replied by qiangqi on topic creating a table using javascript and the options are based previous answer
Hi jelo,

thanks for your reply. you are right, the cause is version. and then I think the HTML editor also play a important role.

Best,
Qiang

Please Log in to join the conversation.

More
4 years 2 weeks ago #232107 by Joffm
Replied by Joffm on topic creating a table using javascript and the options are based previous answer
And I imported right now into the cloud

But usually the TUE Installation works fine.
There were a lot of questions of several students in the past.

Well, here the script:
First:
I renamed
the question "ptransportmode" to "ptm"
the subquestions "PT1".. "PT5" to 1,2,3,4,5

In this script only items that were selected in ptm are displayed in the array.
If this is not the correct understanding and only the "not selected" are displayed,
either switch "hidden","tdn/f"
or change the condition from "==" to "!="

There are nested quotes only in the section "Move the radios". Keep an eye on them.
Code:
<table style="border:0;padding:0;border-collapse:collapse;color:#000;width:100%">   <thead>     <tr>       <td class="td1">Which of the following are the BEST OPTIONS for you?</td>       <td class={if(ptm_1=="Y","tdf","hidden")}> </td>       <td class={if(ptm_1=="Y","tdn","hidden")}><strong>car</strong></td>       <td class={if(ptm_3=="Y","tdf","hidden")}> </td>       <td class={if(ptm_3=="Y","tdn","hidden")}><strong>bike</strong></td>       <td class={if(ptm_2=="Y","tdf","hidden")}> </td>       <td class={if(ptm_2=="Y","tdn","hidden")}><strong>ebike</strong></td>     </tr>   </thead>   <tbody>     <tr style="height: 3px; text-align: center;">     </tr>     <tr>       <td class="td1">riding time</td>       <td class={if(ptm_1=="Y","tdf","hidden")}> </td>       <td class={if(ptm_1=="Y","tdn","hidden")}>Option 1</td>       <td class={if(ptm_3=="Y","tdf","hidden")}> </td>       <td class={if(ptm_3=="Y","tdn","hidden")}>Option 2</td>       <td class={if(ptm_2=="Y","tdf","hidden")}> </td>       <td class={if(ptm_2=="Y","tdn","hidden")}>Option 3</td>     </tr>     <tr style="height: 3px; text-align: center;">     </tr>     <tr>       <td class="td1">cost</td>       <td class={if(ptm_1=="Y","tdf","hidden")}> </td>       <td class={if(ptm_1=="Y","tdn","hidden")}>Option 1</td>       <td class={if(ptm_3=="Y","tdf","hidden")}> </td>       <td class={if(ptm_3=="Y","tdn","hidden")}>Option 2</td>       <td class={if(ptm_2=="Y","tdf","hidden")}> </td>       <td class={if(ptm_2=="Y","tdn","hidden")}>Option 3</td>     </tr>     <tr style="height: 3px; text-align: center;">     </tr>     <tr>       <td class="td1"><strong>Which option would you prefer?</strong></td>       <td class={if(ptm_1=="Y","tdf","hidden")}> </td>       <td class={if(ptm_1=="Y","tdn","hidden")}> </td>       <td class={if(ptm_3=="Y","tdf","hidden")}> </td>       <td class={if(ptm_3=="Y","tdn","hidden")}> </td>       <td class={if(ptm_2=="Y","tdf","hidden")}> </td>       <td class={if(ptm_2=="Y","tdn","hidden")}> </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     {if(ptm_1=="Y","$('.question-text table:eq(0) tr:last td:eq(2)', thisQuestion).append($('.subquestion-list .answers-list:eq(0) .answer-item:eq(0) *', thisQuestion));","")}     {if(ptm_3=="Y","$('.question-text table:eq(0) tr:last td:eq(4)', thisQuestion).append($('.subquestion-list .answers-list:eq(0) .answer-item:eq(1) *', thisQuestion));","")}     {if(ptm_2=="Y","$('.question-text table:eq(0) tr:last td:eq(6)', thisQuestion).append($('.subquestion-list .answers-list:eq(0) .answer-item:eq(2) *', 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'     });   }); </script> <style type="text/css">   thead td.tdn {    background-color:#D4D7E4;    text-align:center;    font-size:11pt;    padding-top:1em;    padding-bottom:1em;    vertical-align:middle;   }   tbody td.tdn {    background-color:#f2f2f2;    text-align:center;    font-size:11pt;    vertical-align:middle;   }   tbody td.tdf {     width: 0px;   } </style>

Here the script as *.txt file
 

File Attachment:

File Name: TUE_script.txt
File Size:3.95 KB


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

Please Log in to join the conversation.

More
4 years 2 weeks ago #232116 by qiangqi
Replied by qiangqi on topic creating a table using javascript and the options are based previous answer
Hi Joffm,

Thanks for your patience. Because the problem of my version of limesurvey, the code of "<td class={if(ptm_1=="Y","tdf","hidden")}> </td>" would change to "<td class={if(ptm_1==&quot;Y&quot;,&quot;tdf&quot;,&quot;hidden&quot;)}"> </td>". I am so ashamed for wasting you so much time on my problem. thank you again. I will try my best to solve this question. you really give me big help. thank you very much.

Best,
Qiang

Please Log in to join the conversation.

More
4 years 2 weeks ago #232123 by qiangqi
Replied by qiangqi on topic creating a table using javascript and the options are based previous answer
Hi Hoffm,

it works!!! the command I use is shown as first figure, but from question summary, you could not see the if-statement. this condition is weird. but anyway, it works, when i choose car or bike, the alternative in the table could change in terms of my choice.

Thanks for your help. It is hard for me to describe my grateful for you. Thanks again!!!

Best,
Qiang

Please Log in to join the conversation.

More
4 years 2 weeks ago #232155 by Joffm
Replied by Joffm on topic creating a table using javascript and the options are based previous answer
Now spomething quite different.
I already asked why you did not use the work of your (former) fellow student (user name here: Xueting)?
I already proposed a quite better display of the trips like
 
And instead of the time picker use a input mask. More convenient for respondents.

Especially because of your 0-5 subtrips this dynamic display of lines seems to be the best way to display it.

So you can save a lot of space and make it more pleasant for the respondent.

You shouldn't use an array(5-point) if you have to explain the scale.
 
Use an array
 


And still there is no option (j1purpose) to go to a train station for national travalling.
only To get to airport or train station for international traveling 
A bit strange.

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

Please Log in to join the conversation.

More
4 years 2 weeks ago #232182 by qiangqi
Replied by qiangqi on topic creating a table using javascript and the options are based previous answer
Hi Joffm,

Actually, my questionnaire starts from "personnel or household information". the part before that is just a reference and no sense in my survey. The table I want to design is shown as the picture in attachment. the alternatives of transport modes could change in terms of the previous answers. I hope to inset some small icon in the table and keep aligning for the green part and blue part. Do you think if it is possible for the table design in limesurvey.

Best,
Qiang

Please Log in to join the conversation.

More
4 years 1 week ago - 4 years 1 week ago #232387 by Joffm
Replied by Joffm on topic creating a table using javascript and the options are based previous answer
Hi, sorry for delay.
What are these circles? 
Are these radio buttons?

And the table below. What will be inserted there?
Some fixed text or text from previous answers or input fields?

As this is a normal HTML table I do not see anything why it shouldn't work.


BUT: What do you want to ask here?
What are the respondents to answer?

Joffm
 
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 4 years 1 week ago by Joffm.

Please Log in to join the conversation.

More
4 years 1 week ago #232421 by qiangqi
Replied by qiangqi on topic creating a table using javascript and the options are based previous answer
Hi Joffm,

I have designed a table, as shown in the picture in attachment, but it has several problems I don't know how to deal with. I want to show the red box to respondent firstly and only when respondent choose a mode in the red box, the rest part would appear. So, the first question is how i could do this except setting if-statement in each cell generation. I tried to use <div> to make the rest part as a block, but it doesn't work.

When the whole picture is shown, respondent could re-select a mode in the bottom of the picture and the option description is based on the choice in the red box and I have give a example using If-Statement in the list of Answer Option. the problem of re-selecting is that everytime i select a option in the red box, it will show the corresponding option description, but actually, I want it hide, as shown in picture.  

and the last question, as you see, the buttons are not in the center of a cell, although i use the script that you told Shangqi before, as shown below, but it doesn't work.
<style type="text/css">.dir-ltr .radio-item .ls-label-xs-visibility, .dir-ltr .checkbox-item .ls-label-xs-visibility {
    left: auto;
    margin-left: 0px;
}
</style>

Thanks for your help.
Best wishes,
Qiang   

Please Log in to join the conversation.

More
4 years 1 week ago #232425 by Joffm
Replied by Joffm on topic creating a table using javascript and the options are based previous answer
Hi,
1. this question is quite different from your initial question of this thread.
You dhould have opened a new thread.
Unfortunately this happens many times and therefore we read quite often "I searched the forum but I did not find". Not very surprising with such misleading topics.

2.

I have designed a table, as shown in the picture in attachment, but it has several problems I don't know how to deal with. I want to show the red box to respondent firstly and only when respondent choose a mode in the red box, the rest part would appear. So, the first question is how i could do this except setting if-statement in each cell generation. I tried to use <div> to make the rest part as a block, but it doesn't work.

Did you consider to use two questions merged with classes ".no-bottom" and ".no-question".
You'll find them somewhere in the forum.

3.

When the whole picture is shown, respondent could re-select a mode in the bottom of the picture and the option description is based on the choice in the red box and I have give a example using If-Statement in the list of Answer Option. the problem of re-selecting is that everytime i select a option in the red box, it will show the corresponding option description, but actually, I want it hide, as shown in picture. 


I do not understand.
and the option description is based on the choice in the red box
everytime i select a option in the red box, it will show the corresponding option description
So what do you want?
Is the description shown or not?

And to be honest, I do not understand the image without box.
"Ride-hailing" is selected.
Now the question is "Do you want to re-select...?" with answer options "No" and "keep ride hailing"
Wouldn't it be better to insert the transportation mode into the question "Do you want to re-select ride-hailing?" anser options "Yes" and "No"?

and the last question, as you see, the buttons are not in the center of a cell, although i use the script that you told Shangqi before, as shown below, but it doesn't work.


Unfortunately I cannot check anything.
Never provide lsq nor lsg exports, only lss.

Joffm

But one general word:
Split the question. Simplify it.
Your respondents will be grateful.
Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

More
4 years 4 days ago #232458 by qiangqi
Replied by qiangqi on topic creating a table using javascript and the options are based previous answer
Hi Joffm,

the aim of survey is to know if people want to take a parcel for others on their way to destination. so ,first, people choose transport modes without an available parcel. after that, I will show them a parcel information and they could decide if they want to accept the parcel and change a mode to destination. so, this is why I use two parts. in terms of the re-select options, other modes also should be included, so the options are not just ride-hailing and no.

i have seen the method using two questions merged with classes ".no-bottom" and ".no-question". but because i use  a group account,  I can't change the css class. therefore, I try to use if-statement to generate the second part. I use the question of "re-select a mode" as an experience, but the question appears anyway. you could see the if-statement in the figure below and you could see the lss file.

Thanks for your help.

Best wishes,
Qiang
 

Please Log in to join the conversation.

More
4 years 2 days ago #232539 by Joffm
Replied by Joffm on topic creating a table using javascript and the options are based previous answer
Hi,
1.

I can't change the css class.

Of course you can.
You can enter it into the question text as you do with otherf css-snippets.

Here is something I created with your previous screenshot and your "second" page.
I captured the images from the screen.

First you see only the upper part


After you selected a transportation mode the second part (the second question) gets visible
 


How can I understand this question?
Do you want to take a parcel and re-select a transportation mode?

YES, I want to take a parcel and NO I don't want to re-select.
What do I click? YES or NO?

Or are there radio buttons to select one of the packages  OR "No"?
Volunteers are not paid.
Not because they are worthless, but because they are priceless

Please Log in to join the conversation.

More
4 years 2 days ago - 4 years 2 days ago #232556 by Joffm
Replied by Joffm on topic creating a table using javascript and the options are based previous answer
By the way:
If you change the equation "numberofprivatemode" to 
{2*(intval(ptransportmode_PT1=="Y")+intval(ptransportmode_PT2=="Y")+intval(ptransportmode_PT3=="Y"))+7}
there is this IF sequence in the table
<td class="tdf" colspan="{if(numberofprivatemode=='3','13',if(numberofprivatemode=='2','11',if(numberofprivatemode=='1','9','7')))}" ...
not necessary. You already have the correct value.
<td class="tdf" colspan="{numberofprivatemode}" ...

It is always better to calculate things only once.
And are these long variable names really necessary and also the doubling with the subquestion code "PTx"?
Volunteers are not paid.
Not because they are worthless, but because they are priceless
Last edit: 4 years 2 days ago by Joffm.

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