Learn also –
Now, let’s start its coding from the next step. But to understand it, you should have a basic understanding of calculating the percentage of a Number. So I have explained it in the next steps with some examples –
Percentage of a Number
Mathematically, A percentage is a number that is expressed like a fraction of 100 and denoted by %.
10% of 250 = 250 x 10/100 = 25
5% of 300 = 300 x 5/100 = 15
Exam Marks Percentage
In order to calculate the percentage of total marks, we have to divide the obtained marks by the total markes of the all subjects and then multiply by 100.
For Example –
200/500 x 100 = 40%
250/500 x 100 = 50%
320/500 x 100 = 64%
339/500 x 100 = 67.80%
Marks Percentage Formula
Marks Percentage = (Obtained Marks/Total Marks) x 100
For Example –
Suppose you have obtained 300 marks out of 500 marks in the examination , then to caluclate total percnetage of your obtained marks using the above marks percentage formula, you will have to divide 300 by 500, and then multiply it by 100.
Marks percentage = (300/500) x 100 = 0.60 x 100 = 60%
Therefore, the percentage of marks your obtained marks is 60%
Create Marks Input Fields
Here I have created marks Input fields using Bootsrap4 CDN. So, You can use this code directory in your website. But before it, you have to understand the following points
|Input Field||Input Field Id|
Note – If you need to add only input fields then you can copy as it is given and paste it into your existing registration form. It will work well.
<!DOCTYPE html> <head> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col-sm-4"> <h3 class="text-primary">Calculate Marks Percentage</h3> <!--=== Marks Input Fields=== --> <div class="form-group"> <label>Total Marks</label> <input type="text" class="form-control" placeholder="Total Marks" id="totalMarks"> </div> <div class="form-group"> <label>Obtained Marks</label> <input type="text" class="form-control" placeholder="Obtained Markes" id="obtainedMarks"> </div> <div class="form-group input-group"> <input type="text" class="form-control" placeholder="Marks Percentage" id="marksPercentage" disabled> <div class="input-group-append"> <span class="input-group-text">%</span> </div> </div> <!--=== Marks Input Fields=== --> </div> <div class="col-sm-4"></div> </div> </div> </body> </html>
Calculate marks percentage
marksPresentagae() – This function can calulate percentage of the obtained marks of the exam marks and display in the result input field.
You can just copy this code and use in your website. Here I have called marksPresentagae() function on focusout event so that it function can execute after filling total marks & obtained marks and can display the result automatically in the precentage input field.
If you need to caluclate exam marks perventage on another event then you can just call this custom function with that events.
Test It Yourself by Entering Marks
After Implementing previous steps, You can test it yourself by opening in the web broeser and entering total marks and obtained marks in the examination.