Back to limesurvey.org

Welcome to the LimeSurvey Community Forum

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

Annotate or highlight text like doccano

  • zacharyt
  • zacharyt's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
2 years 8 months ago - 2 years 8 months ago #229167 by zacharyt
Annotate or highlight text like doccano was created by zacharyt
Please help us help you and fill where relevant:
Your LimeSurvey version: [see right hand bottom of your LimeSurvey admin screen]
Own server or LimeSurvey hosting:
Survey theme/template:
==================
I would like to ask a question that allows the respondent to select text from a block of text by highlighting it, and potentially labeling the highlighted text as different labels. The highlighted text could be any length, so simpler options such as splitting the paragraph into sentences and asking for sentence level labels wouldn't work.
  1. Is this possible with expression script?
  2. If not, is it feasible to develop (or rather have developed) a plug in or addin that could do this?
[Edit - I found a related but unaswered question after posting:  Interactive text-based question - LimeSurvey forums . This brought me to  GitHub - mir3z/texthighlighter: -- NO LONGER MAINTAINED -- TextHighlighter allows you to highlight text on web pages  and  javascript - Get the Highlighted/Selected text - Stack Overflow , but similar to that poster, I'm not sure where to get started with actually implementing to be a question.]

E.g. a question might look like:
 
Input 

Question 1 - highlight all text yellow for label1 and green for label2:
This is a paragraph.
This is some text in a div element.

Completed response

Question 1 - highlight all text yellow for label1 and green for label2:
This is a paragraph.
This is some text in a div element.

Example output 

[Question 1][label1] "this is"
[Question 1][label2] "paragraph"
[Question 1][label1] "this is"
[Question 1][label2] "some text in a div element"

A bare-boned implementation would be something like this example  styles - How to highlight selected text using css? - Stack Overflow  where the question saves the selected text each time it gets highlighted while the css displays all previously selected text as being highlighted. I could then have a subsequent question ask for labels. However, I don't know where I'd get started with trying to implement this type question. 

Another idea would be to embed doccano (pictured below) or some other external tool that allows for this...but I'm not sure this is possible either and I imagine this would be harder (e.g. require developing an add-in)
[img


 
Last edit: 2 years 8 months ago by zacharyt. Reason: Found additional information to include - edit noted in italics and brackets

Please Log in to join the conversation.

  • zacharyt
  • zacharyt's Avatar Topic Author
  • Offline
  • New Member
  • New Member
More
2 years 8 months ago #229363 by zacharyt
Replied by zacharyt on topic Annotate or highlight text like doccano
I've managed to add highlights to text but can't figure out how to use the output to add the selected text to a long text answer
Code:
 
// these two scripts add highlights
<script type="text/javascript" charset="utf-8">
 
document.onmouseup = () => {
                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><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
 
// I want to append the selection to a long text response.
    $(document).ready(function(){
        var whatiwant = window.getSelection().toString();
        $("#answer{SGQ}").val(whatiwant).trigger('keyup');
    });
</script>

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