jQuery: Script to calculate Words Per Minute - Script works on jsfiddle but not on my site?

Development Web Development
1

First, the script:

const $box = $(".typing_calc");
const $stats = $("#stats");

let startTime = null;

$(":input").on("input propertychange", () => {
	const val = $box.val();
  var keyspressed = 0;

  if(startTime === null)
  {
  	startTime = performance.now();
  }
  else
  {
    keyspressed++;
    wordswritten = keyspressed / 5.1;
  	$stats.html("WPM: " + calculateWpm(startTime, performance.now(), wordswritten));
  }
});

function calculateWpm(startTimeMs, currentTimeMs, totalWords) {
	const mins = ((currentTimeMs - startTimeMs) / 1000) / 60;
	return (totalWords / mins).toFixed(2);
}

jsfiddle example: https://jsfiddle.net/cjmoran/poLtwq48/

Note that the only things I’ve changed are:

  1. How the WPM are calculated, as it makes more sense to go by CPM and just divide by average word length (5.1 characters in English).
  2. What affects the WPM by changing it from the single textarea to any input using the :input selector from jQuery.

However, applying this to a website I’m tinkering with has no effect on the WPM counter.

The id of the div where the HTML updates the WPM counter is still stats. It either isn’t updating it or isn’t running the script at all. Not sure which, but inspecting the site shows the JS is loading correctly along with the jQuery libraries.

2

My guess would be that the JQuery used by the site isn’t using ES6 standards.

1 Like
3

If I were you, I’d use the dev tools in your browser to make sure the event is firing and that the element you’re trying to add text to exists. console.log() is your friend :wink:

1 Like
4

So, I’m using Laravel 5.4 Framework to produce this website. I’m not sure how I’d verify if it does use those standards, but this is in the code:

<script src="//code.jquery.com/jquery-3.2.1.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
{{ Html::script('js/typing_calc.js') }}</script>
{{ Html::script('js/date_picker_applicant.js') }}</script>

The scripts show like so in the final rendered HTML:

image

Going to those paths gives the corresponding javascript, so it’s definitely available.

Thanks, I’ll try this out and get the JS to update the log when it does things like register the key press and see if that is doing things even though the HTML isn’t updating yet.

Edit:

So I had it output a message to console.log when it did things like so:

  	$stats.html("WPM: " + calculateWpm(startTime, performance.now(), keyspressed));
    console.log('calculateWpm is' + calculateWpm(startTime, performance.now(), keyspressed) + '.');
  }
});

.appendTo('.js_submit'); // appends attributes to js_submit class element.
  console.log('Submit occurred. WPM is: ' + wpm + '.');
  return true; // Unsure if this is necessary?

However, nothing is appearing in the console log. When I try to manually run the function calculateWpm, it returns NaN. Running the function with values returns the correct math done. So calculateWpm(1000, 2000, 100) -> “6000.00”). Which is saying “pressing 100 keys in one second is typing at 6000 WPM.” So it is loading the JS at least.

I tried both clicking the submit button and typing. So it’s either not seeing those events even though the JS is loading, or there’s an error somewhere and the inspector isn’t listing it?

5

I believe this is caused by the code running before the page has loaded, there are a couple of ways of solving it:

Wrap the js in jquery’s $( document ).ready() :

$( document ).ready(function() {
    ... code here ...
});

Functions that you explicitly call don’t need to be in it, but anything that accesses the DOM does.

Moving the <script> tags to the end of the body should have the same effect

1 Like
6

This solved it! Thanks :D. The console log is working correctly now and outputting my WPM.

Now I guess I just need to figure out why:

  1. WPM is: 0 isn’t updating.
  2. The wpm variable value isn’t being assigned to the calculated_words_per_minute parameter name in the POST.

Edit:

After reading up on using document ready VS just putting it at the end, I chose to put it at the end so that the page would appear to load faster.

This fixed my issue with WPM is: 0 updating. However, the variable value still is not being set in the POST.