The average rate of change will be displayed here.
var calculateAverageRateOfChange = function() {
var functionString = document.getElementById("functionInput").value;
var x1String = document.getElementById("x1").value;
var x2String = document.getElementById("x2").value;
var resultDiv = document.getElementById("result");
try {
var x1 = parseFloat(x1String);
var x2 = parseFloat(x2String);
if (isNaN(x1) || isNaN(x2)) {
resultDiv.innerHTML = "Please enter valid numbers for both x-values.";
return;
}
if (x1 === x2) {
resultDiv.innerHTML = "The two x-values cannot be the same for calculating the average rate of change.";
return;
}
// Safely evaluate the function at x1 and x2
var evaluateFunction = function(funcStr, xVal) {
// Basic sanitization: remove potentially dangerous characters
funcStr = funcStr.replace(/[^-()\w\s.^*+=\/]/g, ");
// Replace 'x' with the value
var expression = funcStr.replace(/x/g, '(' + xVal + ')');
// Using a safe evaluation method. For more complex scenarios, consider libraries like math.js
// This example uses eval() cautiously after basic sanitization.
// In a production environment, a dedicated math parser is highly recommended.
try {
return eval(expression);
} catch (e) {
throw new Error("Invalid function expression.");
}
};
var y1 = evaluateFunction(functionString, x1);
var y2 = evaluateFunction(functionString, x2);
if (isNaN(y1) || isNaN(y2)) {
resultDiv.innerHTML = "Could not evaluate the function with the provided inputs. Please check your function format.";
return;
}
var deltaY = y2 – y1;
var deltaX = x2 – x1;
var averageRateOfChange = deltaY / deltaX;
resultDiv.innerHTML =
"Function:
f(x) = " + functionString + "" +
"Point 1: (
x₁ = " + x1 + ",
f(x₁) = " + y1.toFixed(4) + ")" +
"Point 2: (
x₂ = " + x2 + ",
f(x₂) = " + y2.toFixed(4) + ")" +
"
Average Rate of Change = " + averageRateOfChange.toFixed(4) + "";
} catch (error) {
resultDiv.innerHTML = "Error: " + error.message + " Please check your inputs.";
}
};
.calculator-wrapper {
font-family: sans-serif;
border: 1px solid #ddd;
padding: 20px;
border-radius: 8px;
max-width: 500px;
margin: 20px auto;
background-color: #f9f9f9;
}
.calculator-form h2 {
text-align: center;
margin-bottom: 15px;
color: #333;
}
.calculator-form p {
text-align: center;
margin-bottom: 25px;
color: #555;
font-size: 0.95em;
line-height: 1.5;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #444;
}
.form-group input[type="text"] {
width: calc(100% – 22px);
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 1em;
}
.calculator-form button {
width: 100%;
padding: 12px 15px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
font-size: 1.1em;
cursor: pointer;
transition: background-color 0.3s ease;
}
.calculator-form button:hover {
background-color: #0056b3;
}
.calculator-result {
margin-top: 25px;
padding: 15px;
border: 1px dashed #ccc;
border-radius: 4px;
background-color: #fff;
text-align: left;
min-height: 100px;
}
.calculator-result p {
margin-bottom: 10px;
color: #333;
font-size: 1em;
line-height: 1.6;
text-align: left;
}
.calculator-result strong {
color: #007bff;
}