1

I am looking to make an educational web app that helps people identify key phrases in the text. The user would select a word(s) out of a paragraph with a mouse or finger. Now drag n drop is a standard feature, my issue is I would need to preprocess the paragraph into chunks ala

<P>
   <span> This is not important</span>
   <span> This is important</span>
   <span> This is not important</span>
<p>

Now I can apply CSS and whatever to these chunks, but I would correlate the difficulty to how coarse the chunking would be. Ideally I would like the ability to select any set of words and be able to pull a chunk based on what the user highlights not how I chunk. The only idea I have in how to do this would be the absurdity of 

<p>
  <span>Tommy</span><span> buys </span><span> 2 </span><span> apples.</span>
<p>

In the example above I would want to the user to define the chunk by highlight any number of words. So the user could chunk

Tom buys 2 apples, Tom buys, 2 apples, buys 2 apples, etc...

I would enforce the word phrase to be connected aka Tom apples would not be valid. Once selected I would apply a drag-drop & highlighting features to the chunk. I am hoping there is a more elegant way to do this. I hope this was a clear enough description of what I intended.

Thanks in advance.

update

I alluded to my approach in my original text and below is what I was referring too which is adaptation of what is in the link. I do not think I should be down voted for this post. 

function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
#div1 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
<!DOCTYPE HTML>
<html>
<head>
  <title>Test</title>
</head>

<body>

  <p>Drag the W3Schools image into the rectangle:</p>
  <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <span id="drag1" draggable="true" ondragstart="drag(event)">This is not 
important</span><br>
  <span id="drag2" draggable="true" ondragstart="drag(event)">This is 
important</span><br>
  <span id="drag3" draggable="true" ondragstart="drag(event)">This is not 
imporant</span>

</body>
</html>
Rick Sibley
  • 605
  • 7
  • 18
TheCodeNovice
  • 750
  • 14
  • 35
  • 1
    What have you tried so far? – Ullas Hunka Jul 18 '18 at 14:05
  • 2
    While this is an interesting problem you're trying to solve, you should attempt to solve it on your own first instead of asking SO to do the work for you. – Bucket Jul 18 '18 at 14:06
  • take a look at this post: https://stackoverflow.com/questions/17227070/can-i-get-highlighted-text-with-jquery there someone anwsered how to get the selected text of the user.. If im right you then only have to make that draggable.. – Christopher Supertramp Jul 18 '18 at 14:11
  • @UllasHunka I updated my post but it is not much different from the W3schools. I am looking for a pathway that makes this feasible. My current approach does not scale. – TheCodeNovice Jul 18 '18 at 14:30
  • @Bucket I did, and it is now posted. – TheCodeNovice Jul 18 '18 at 14:31
  • @TheCodeNovice I tried giving it another go but it seems like this is too in-depth for me. I updated my code so it doesnt validate immediately but then upon further investigation I found a loophole, so I decided to scrap the whole thing since it didn't seem of any value to the situation. Sorry I couldn't help any further. I'm sure someone else will pick up on this. – Rick Sibley Jul 19 '18 at 21:30

0 Answers0