Welcome to the LimeSurvey Community Forum

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

Populating a short response with the html of the question text

  • zacharyt
  • zacharyt's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
2 years 7 months ago #230813 by zacharyt
Please help us help you and fill where relevant:
Your LimeSurvey version: Version 3.28.21
Own server or LimeSurvey hosting: LimeSurvey partner hosting
Survey theme/template: minimal?
==================
Is it possible to populate the response for one of the short responses in a text array (or other question type) with the html of the question text?
 
I've attached an lss. Basically, I want the first short text to populate with 
Code:
<p>ok</p>
 
<p>This is a question with lots of text</p>
 
<p><strong>This is a question with lots of text</strong></p>
...

I'm new to JavaScript (and only have learned from these forums - so thank you for getting me started) but have attempted the following
Code:
<script type="text/javascript" charset="utf-8">
 
    $(document).on('ready pjax:scriptcomplete',function(){
        var thisQuestion = $('#question{QID}');
 
        // Insert selects into row 1
        if($('tr.subquestion-list:eq(0) .answer-item .inserted-select', thisQuestion).length == 0) {
            $('tr.subquestion-list:eq(0) .answer-item', thisQuestion).on('mousedown', function(){
                       var  htmlstuff = document.getElementsByClassName("question-text");
              $( this).val( htmlstuff.outerHTML);
 
        } 
 
 
 
        // Clean-up styles
        $('select.inserted-select', thisQuestion).css({
            'max-width': '100%'
        });
        $('.with-select input:text', thisQuestion).css({
            'position': 'absolute',
            'left': '-9999em'
        });
    });
</script>

Thanks for any advice!

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 7 months ago #230828 by Joffm
Hi,
There is no lss attached.

And why do you show a script that is used to insert drop-downs into an array(text)?
What really are you going to achieve?

JOffm

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

Please Log in to join the conversation.

  • zacharyt
  • zacharyt's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
2 years 7 months ago #230835 by zacharyt
Thanks for the reply. The lss file is attached to this one. 

I'm unsure how to set values for the text array inputs, so I was hoping to use code that specifies these values (which happened to originate from a dropdown list). As I said, I've only used JavaScript from this forum to hack things together, so I would really appreciate any specific direction.

Cheers,

Please Log in to join the conversation.

  • Joffm
  • Joffm's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 7 months ago #230839 by Joffm
Still no idea what you want.

To populate the fields of an array you usually use Expression Manager.
In a (hidden) question of type "equation" you preset the fields like

{array_Y001_X001='Text of first row, first column"}
{array_Y001_X002='Text of first row, second column"}
...
{array_Y005_X004='Text of fifth row, fourth column"}
​​​​​​​
Joffm

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

Please Log in to join the conversation.

  • zacharyt
  • zacharyt's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
2 years 7 months ago #230841 by zacharyt
Sorry, it's a strange request so I should have been more clear.

I attached an image of what I'm trying to do. I want to write a script that allows for the html of the 'question-text' div into a text box. So the highlighted yellow text in that image should go into the first row of a multi-rowed text array. I don't think this can be done without JavaScript.

My thoughts were that I need to
  1. capture the html - I tried using 
    Code:
    var  htmlstuff = document.getElementsByClassName("question-text")
    htmlstuff.outerHTML
    for this
  2. select the first row. I tried using 
    Code:
    if($('tr.subquestion-list:eq(0) .answer-item .inserted-select', thisQuestion).length == 0) {
                $('tr.subquestion-list:eq(0) .answer-item', thisQuestion)
    for this
  3. enter the html into that first row, which tried using 
    Code:
    $( this).val()
    for.
I'm a bit out of my depth to troubleshoot which part(s) aren't working.

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 7 months ago #230892 by tpartner
As Joffm, I have no idea why you would want to load HTML that you already know into a text input.

Having said that, this will work but bear in mind that the script is also HTML so will also be loaded into that text input.

Code:
<script type="text/javascript" data-author="Tony Partner">
 
  $(document).on('ready pjax:scriptcomplete',function(){
    var thisQuestion = $('#question{QID}');
 
    $('input:text.form-control:first', thisQuestion).val($.trim($('.ls-label-question', thisQuestion).html()));
  });
</script>

 

Sample survey attached:  

File Attachment:

File Name: limesurvey...9(1).lss
File Size:17 KB

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.
The following user(s) said Thank You: zacharyt

Please Log in to join the conversation.

  • holch
  • holch's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 7 months ago #230896 by holch

As Joffm, I have no idea why you would want to load HTML that you already know into a text input.


My best guess would be that it is some kind of HTML training and the respondents should modify the HTML code. But who knows?!

I feel there are so many questions that could be answered so much quicker if people would just explain what they really want to do.

Help us to help you!
  • Provide your LS version and where it is installed (own server, uni/employer, SaaS hosting, etc.).
  • Always provide a LSS file (not LSQ or LSG).
Note: I answer at this forum in my spare time, I'm not a LimeSurvey GmbH employee.

Please Log in to join the conversation.

  • zacharyt
  • zacharyt's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
2 years 7 months ago - 2 years 7 months ago #230904 by zacharyt
Thanks Tony, that works brilliantly! 

@holch (and others) - this is a pet project of mine that I've asked about previously:  forums.limesurvey.org/forum/can-i-do-thi...ht-text-like-doccano

That initial post didn't get any responses; I think it was too broad of a question.

Apologies for being vague. This was my current roadblock, but ultimately I'm working towards a question that:
  1. allows for highlighting of text (preferably being able to toggle between colours that indicate a label)
  2. converts the number of highlighted texts into a number (with different numbers for different labels) and displays the sum those numbers
  3. records each individual highlighted text against its colour/label
  4. records the overall html of the page to allow for the highlighted text to be reproduced
Ultimately, the highlights (and numerical output) will need to be displayed alongside another respondent - probably one on each half of the screen, so that they can be reviewed by a third party.

Edit - this is where I'm up to... 
Code:
<script type="text/javascript">
 
    $(document).on('mouseup',function(){
        var thisQuestion = $('#question{QID}');
 
        $('input:text.form-control:first', thisQuestion).val($.trim($('.ls-label-question', thisQuestion).html()));
    });
</script><script type="text/javascript" charset="utf-8">
 
document.onmousedown = () => {
                sel = window.getSelection();
                if (sel.rangeCount &amp;&amp; sel.getRangeAt) {
                    range = sel.getRangeAt(0);
                }
                // Set design mode to on
                document.designMode = "on";
                if (range) {
                    sel.removeAllRanges();
                    sel.addRange(range);
                }
                // Colorize text
                document.execCommand("BackColor", false, "#FF0011");
                // Set design mode to off
                document.designMode = "off";
            }    
 
</script>

I imagine the next steps will be figuring out how to have each highlighted text be put into its own short response and using regex to do so. Can 'input:text.form-control:first' be modified to specify the first unpopulated text box?
Last edit: 2 years 7 months ago by tpartner. Reason: Renove script credit

Please Log in to join the conversation.

  • tpartner
  • tpartner's Avatar
  • Offline
  • LimeSurvey Community Team
  • LimeSurvey Community Team
More
2 years 7 months ago #230920 by tpartner
I have removed the credit from the script above - I did not author it.

Can 'input:text.form-control:first' be modified to specify the first unpopulated text box?


This will find the first empty input:

Code:
<script type="text/javascript" data-author="Tony Partner">
 
  $(document).on('ready pjax:scriptcomplete',function(){
 
    // Define this question
    var thisQuestion = $('#question{QID}');
 
    // Find the first empty input
    var firstEmptyInput = $('input:text.form-control', thisQuestion).filter(function() {
      return $.trim($(this).val()) == '';
    })[0];
 
    // Now, load that input
    $(firstEmptyInput).val($.trim($('.ls-label-question', thisQuestion).html()));
  });
</script>

Cheers,
Tony Partner

Solutions, code and workarounds presented in these forums are given without any warranty, implied or otherwise.

Please Log in to join the conversation.

Moderators: tpartnerholch

Lime-years ahead

Online-surveys for every purse and purpose