Non coder needs equation help

I have an easy one! I have no proficiency in javascript, so I am reaching out to the community for a little help!

I use a calculation in darts called a player rating. I have a page where I would like to offer a person who wants to know where they stand to be able to perform an easy check as to what their player rating may be to help decide what level league they should join.

essentially, I tell them to shoot three games of 501 and three games of Cricket. I want them to be able to go on my website, and type the six results to produce a rudimentary player rating. 501 is measured as PPD (points per dart) and Cricket is measured as MPR (marks per round).

here’s how I want it to go.

501 game 1 PPD - (field to enter PPD scored)
501 game 2 PPD - (field to enter PPD scored)
501 game 3 PPD - (field to enter PPD scored)
Crk game 1 MPR - (field to enter MPR scored)
Crk game 2 MPR - (field to enter MPR scored)
Crk game 3 MPR - (field to enter MPR scored)

Your Player Rating Is - (Calculation Result)

Here is what I need…
To calculate the average of the three 501 games
To calculate the average of the three Crk games
then calculate a player rating… 501 average + (10 x Crk average) = player rating
an example 23.54 + (10 x 2.15) expressed as 23.54 + 21.50 = 45.04 player rating

I hope my explanation wasnt too confusing. My goal is to be able to add this into a webpage for people to use. Hopefully i can figure out whatever css is necessary to make it look good.

thanks
jeff

Don’t you mean, “(field to enter score)”?

Hello. forgive me for that. when we play 501, the score is referred to as your average. from your perspective, yes, that would be the score. let me see if can edit that. PPD and MPR is an "average in and of itself. so please forgive me for not clarifying that.

What inputs can the fields accept? Only 0-9? Include decimals?

Here is a very basic implemenation:

With calculations like this I like to add code to delete the result of the calculation as soon as any of the input values are changed.

1 Like

JMacintosh,

Just be aware that there is no form validation in the code above, meaning that an experienced hacker can inject code that could wreak havoc with your site. Instead of the fields accepting only digits, in other words, the fields may accept entire scripts and open up your site to hackers.

This code is WAY beyond my JavaScript for Web Developers 3rd Ed. 2012 book!

Do you have a recommendation for a newer book?

I guess the question is… even though this would be sitting on just one page on the site with no data retention, and no connection to anything else on the site, it could still get hacked and ruin the site in general?

what Archibald has there is perfect, just needs to get dressed up to match the rest of the site.

Yes.
Look up Form Validation or JavaScript Validation.

I don’t see any way that this could allow the website to be hacked. This is not a form and no data is being sent to the server.

In this second version I have given the containing <div> a class of ‘widget’ and amended the CSS accordingly so the CSS will not now affect the style of any other buttons on the web page. Obviously the appearance could be improved greatly! The JavaScipt has also been edited so it now only interacts with elements that are within the widget <div>.

I have added code so the result of calculating the rating disappears as soon as any change is made to any input value.

If a non-numeric character is entered the rating would have shown “NaN”. As very few website users would know what this means I have inserted JavaScript so “Error” now shows instead.

You might also want to be aware that there is no form at all in that code. With no form there is no submit, and with no submit there is full and complete safety from all injection concerns.

2 Likes

I will get to work on this, and I already have a page setup ready to accept this. I can offer a link once I am done. If I may offer a note on that page to give you credit for providing the code, please let me know how to recognize your effort!

1 Like

It’s kind of you to offer to put a note on your web page but I do not wish to be mentioned.

I see I did not link to my second version CodePen in the post above. I have now included the link. Sorry!

It’s easy to comment, when someone else has already done the work :slight_smile:

Form validation

I think it could be quite useful to take advantage of using a form and submit, specifically for the purpose of error checking.

The html could be amended like so, taking advantage of the browser’s built-in validation.

<form id='form-widget' class='widget'>
  <label>501 <input id='501a' type='number' min='1' max='501' required></label>
  <label>501 <input id='501b' type='number' min='1' max='501' required></label>
  <label>501 <input id='501c' type='number' min='1' max='501' required></label>
  <label>Crk <input id='Crk1' type='number' min='1' max='301' required></label>
  <label>Crk <input id='Crk2' type='number' min='1' max='301' required></label>
  <label>Crk <input id='Crk3' type='number' min='1' max='301' required></label>
  <button type='submit'>Calculate</button>
</form>

<div id='rating'>Rating: <span id='rating-value'></span></div>

This will prevent the user from typing letters and invalid characters.

validate

Note: You can enter ‘e + and -’, but it won’t let you submit that and will ask for a valid number.

As in the image above, you can also use CSS to style input with :valid and :invalid pseudo selectors, giving the user immediate feedback

.widget input:valid {
  color: green;
}

.widget input:invalid {
  color: red;
}

I did have to amend Archibald’s javascript a small bit to get this to work, the rest is untouched :slight_smile:

const formWidget = document.querySelector('#form-widget');

// listen on submit instead of click
formWidget.addEventListener('submit', calculate);

inputs = document.querySelectorAll('.widget input');

inputs.forEach((element) => element.addEventListener('input', clear));

function calculate(event) {
  const form = event.target;

  // check the browser built in error checking and if no good return
  if (!form.checkValidity()) return false

  event.preventDefault() // prevent the form from submitting to a URL

  let Average501 = (IDv('501a') + IDv('501b') + IDv('501c')) / 3;
  let AverageCrk = (IDv('Crk1') + IDv('Crk2') + IDv('Crk3')) / 3;

  let result = (Average501 + 10 * AverageCrk).toFixed(2);

  if ( isNaN(result) ) result = 'Error';

  // Not an input now, so using textContent instead of value
  document.getElementById('rating-value').textContent = result;
}

function IDv(x) {
  return Number(document.getElementById(x).value);
}

function clear(){
  document.getElementById('rating-value').textContent = '';
}

Codepen here

Having this sort of validation might be quite useful when you’re on your 4th or 5th pint :biggrin:

1 Like

My view is that validation here achieves virtually nothing. The user can easily enter say 13 instead of 14 by mistake or even 114 instead of 14. Validation can’t pick that up.

I considered using type=‘number’ but do not like the ‘spinner’ that appears. In situations like this I sometimes use a regular expression to instantly delete any non-numeric character.

At least there are some loose parameters that eliminate some potential nonsense being entered, which saves then maybe having to do the work in javascript. I haven’t checked but do you still need the following with valid numbers being entered?

if ( isNaN(result) ) result = 'Error';

The spinner can be removed, but is possibly a bit hacky?

It’s no comment on your solution @Archibald, it was just some thoughts that came to mind.

if it helps any…
MPR (Marks Per Round) caps at 9
PPD (Points Per Dart) caps at 50.1

if there are ranges, that would be it, and averages normally aren’t computed beyond 2 decimal points.

I will work on integrating the widget into my page, and post a link! I would say the spinner is unnecessary given the increments you would have to list going with two decimal places. it would be best to let the visitor input those numbers directly.

1 Like

I think that’s still needed in case of division by zero.

Would a widget roughly like this be helpful?

darts

1 Like

considering the board will be calculating the score for each game automatically, there wont be a need to input anything other than the PPD or MPR displayed after each game concludes.