-3

I am a beginner to JavaScript.

Can Some one help me?

How can i highlight the texts of Textarea with background, when press the star button. and Cursor should stop with highlighted background when click Stop.

And When press the stop button, it would show the words count, lines count.

for example:

The time between the two button pressed will give us the time it took for the user to read. And because the text area has the number of words, can calculate the "Reading Speed" For example: 120 words per minute, that is like 2 words a second. 1200 words in 10 minutes.

This is how I calculated that. Lets say a book page typically has: 30 lines * 8 words per line that is 240 words a page time 600 pages that is 144,000 words all together divide that by 120 words a minute reading speed that is 1200 minutes divide by 60 minutes an hour: 20 hours

The below link has related to my Question. But the text has highlighted the text into another textarea. I want to be highlight the text in same textbox.

How to highlight text in TextArea

This is my html code:

<div id="startbtn"> <button id="start" onclick="startHighlight()">Start!</button> </div> <div id="stoptbtn"> <button id="stop" onclick="stopHighlight()">Stop!</button> </div> <div id="container"> <textarea id="inputText"></textarea> </div>
Improve this question
6
  • By "highlight" do you mean "select"? By "cursor" do you mean "caret"? The cursor is the mouse pointer. You haven't shown any code that you've tried, and the answer you linked to says "you can't do that". Commented Jun 2, 2015 at 8:03
  • stackoverflow.com/questions/5797539/… please refer to this. Commented Jun 2, 2015 at 8:04
  • Hi @raz. select the words one by one, when press start button. Commented Jun 2, 2015 at 8:15
  • Wow... Nice question... Uses the time required to read. Commented Jun 2, 2015 at 8:15
  • 1
    he basically wants a reading simulation which starts by pressing "start button" -> the triggered event should highlight word by word untill "stop button" is pressed. After that the highlighted words should be count together and the time passed should be parsed out Commented Jun 2, 2015 at 8:25

1 Answer 1

Reset to default
4

Latest Update : Reading Simulator now reads every word based on Users inputSpeed AND based on the length of the word to provide a more realistic reading flow. https://jsfiddle.net/8Lwm6gh1/40/

Sourcode for the js:

Updated Code

 $('#sim').each(function(){ this.contentEditable = true; }); var go = $('#go'); var stop = $('#stop'); var wordCount = 0; var wordCountBox = $('#wordCountBox'); var timepassed = $('#timepassed'); var textRead = $('#textRead'); var small = $('small'); go.on("click", function(e){ e.preventDefault(); startSim(); }); function startSim(){ var speed = $('#speed').val(); timeStart = $.now(); var sim = $('#sim').text(); var wordArray = sim.split(" "); var simWrap = $('#sim'); var loopCount = 0; var arrCount = wordArray.length; var alreadyRead = []; loopDat(); var i = loopCount; function loopDat(){ var pos = loopCount; var realSpeed = wordArray[pos].length; realSpeed = (realSpeed * (speed / 5)); // realSpeed = Math.round((realSpeed * 0.1) * speed); console.log('Reading speed of current word: '+realSpeed); if(loopCount == pos){ setTimeout(function() { if(pos < 0){ pos = 0; } alreadyRead.push(wordArray[pos]); wordArray[pos] = '<b>'+wordArray[pos]+'</b>'; small.text('Current reading speed: '+realSpeed); var words = wordArray.join(" "); simWrap.html(words); wordCount++; if(pos == (arrCount - 1)){ triggerDone(); } loopCount++; if(loopCount < arrCount){ loopDat(); } }, realSpeed); } } // Function done function triggerDone(){ wordCountBox.text('Words counted: '+wordCount); var timeEnd = $.now(); var timeRes = timeEnd - timeStart; timeRes = parseInt(timeRes); timeRes = timeRes / 1000; timepassed.text(timeRes+" seconds have passed"); alreadyRead = alreadyRead.join(" "); textRead.text(alreadyRead); var summary = $('#summary'); summary.show(); return; } stop.on("click", function(e){ e.preventDefault(); triggerDone(); }); }
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Hi @noa-dev, firsrt, thanks you for your response. its working in the JSfiddle only. not working in browser.
it works in the browser as well - i am using jquery in that case. google jquery and implement it to your <head> before the script
ya, now is working cool. thanks @noa-dev. when i am using more than 100 words, overflow the words. better if it will the textarea, but when i was used the textarea, word count shows 1 only.
Textbox appears with scrollbar if there is too much text in it now. jsfiddle.net/8Lwm6gh1/38 P.S. Next time when u are asking a question try to solve it yourself first with basic javascript tutorials etc - you didnt get any answers beside mine because all you did yourself was writting a html markup that takes 1minute ;)
ok. thanks for your i have added overflow:auto; in #sim class. now its fine.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.