The average rate of change of a function measures how much the function's output changes, on average, for a given change in its input over an interval. Mathematically, for a function \(f(x)\) and an interval from \(x_1\) to \(x_2\), the average rate of change is calculated as:
$$ \text{Average Rate of Change} = \frac{f(x_2) – f(x_1)}{x_2 – x_1} $$
This calculator helps you compute this value given a function and two x-values.
function calculateAverageRateOfChange() {
var functionString = document.getElementById("functionString").value;
var x1 = parseFloat(document.getElementById("x1").value);
var x2 = parseFloat(document.getElementById("x2").value);
var resultDiv = document.getElementById("result");
if (isNaN(x1) || isNaN(x2) || functionString.trim() === "") {
resultDiv.innerHTML = "Please enter valid numbers for x1 and x2, and a function.";
return;
}
if (x1 === x2) {
resultDiv.innerHTML = "The interval width (x2 – x1) cannot be zero.";
return;
}
try {
// Safely evaluate the function for x1 and x2
// Using a simple substitution for demonstration. For complex functions or untrusted input,
// a more robust math expression parser (like math.js) would be recommended.
var f_x1 = evaluateFunction(functionString, x1);
var f_x2 = evaluateFunction(functionString, x2);
if (isNaN(f_x1) || isNaN(f_x2)) {
resultDiv.innerHTML = "Could not evaluate the function at the given points. Ensure your function is valid (e.g., 'x^2', '2*x+1').";
return;
}
var avgRateOfChange = (f_x2 – f_x1) / (x2 – x1);
resultDiv.innerHTML = "Average Rate of Change: " + avgRateOfChange.toFixed(4);
} catch (e) {
resultDiv.innerHTML = "An error occurred during calculation. Please check your function syntax. Error: " + e.message;
}
}
// A basic, insecure function evaluator. FOR DEMONSTRATION ONLY.
// In a real-world application, use a secure math parsing library.
function evaluateFunction(funcStr, x) {
// Replace common math operations and variables
var safeFuncStr = funcStr.replace(/x/g, '(' + x + ')');
safeFuncStr = safeFuncStr.replace(/\^/g, '**'); // Handle exponentiation
safeFuncStr = safeFuncStr.replace(/sin/g, 'Math.sin');
safeFuncStr = safeFuncStr.replace(/cos/g, 'Math.cos');
safeFuncStr = safeFuncStr.replace(/tan/g, 'Math.tan');
safeFuncStr = safeFuncStr.replace(/log/g, 'Math.log');
safeFuncStr = safeFuncStr.replace(/sqrt/g, 'Math.sqrt');
safeFuncStr = safeFuncStr.replace(/PI/g, 'Math.PI');
// Extremely basic sanitization – DO NOT use in production for untrusted input
var allowedChars = /^[0-9+\-*/.()eE*]+$/;
if (!allowedChars.test(safeFuncStr.replace(/Math\.[a-zA-Z]+/g, "))) {
throw new Error("Invalid characters in function string.");
}
// Evaluate the string as JavaScript code. THIS IS INSECURE FOR UNTRUSTED INPUT.
return new Function('return ' + safeFuncStr)();
}
.calculator-container {
font-family: 'Arial', sans-serif;
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
max-width: 600px;
margin: 20px auto;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
background-color: #f9f9f9;
}
.calculator-title {
text-align: center;
color: #333;
margin-bottom: 15px;
}
.calculator-description {
color: #555;
line-height: 1.6;
margin-bottom: 25px;
font-size: 0.95em;
}
.calculator-description p {
margin-bottom: 10px;
}
.input-section {
display: grid;
grid-template-columns: 1fr;
gap: 15px;
margin-bottom: 25px;
}
.input-section label {
font-weight: bold;
color: #444;
display: block;
margin-bottom: 5px;
}
.input-section input[type="text"] {
width: calc(100% – 20px);
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1em;
}
.input-section button {
background-color: #007bff;
color: white;
border: none;
padding: 12px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 1.1em;
transition: background-color 0.3s ease;
}
.input-section button:hover {
background-color: #0056b3;
}
.result-section {
text-align: center;
font-size: 1.2em;
color: #28a745;
font-weight: bold;
background-color: #e9f7ef;
padding: 15px;
border-radius: 5px;
border: 1px solid #c3e6cb;
}