Solution
index.php
<?php
$gravity = (isset($_GET['gravity']))?$_GET['gravity']:9.8;
$seconds = (isset($_GET['seconds']))?$_GET['seconds']:10;
echo '<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="/style.css" type="text/css" media="all">
<title>Regular Programming in PHP</title>
</head>
<body>
<h1>Controls</h1>
<form method="GET">
<label for="gravity">Gravity:</label>
<input type="range" id="gravity" name="gravity" min="0.001" max="100" value="'.$gravity.'" step="0.001" />
<span> <span id="g">'.$gravity.'</span> m/s<sup>2</sup></span>
<br />
<label for="seconds">Secodns:</label>
<input type="range" id="seconds" name="seconds" min="1" max="100" step="1" value="'.$seconds.'" />
<span> <span id="s">'.$seconds.'</span> s</span>
<br />
<button id="load" type="submit">Load</button>
</form>
<script>
document.getElementById("gravity").addEventListener("change", () => {
let g = document.getElementById("gravity").value;
document.getElementById("g").textContent=g;
});
document.getElementById("seconds").addEventListener("change", () => {
let s = document.getElementById("seconds").value;
document.getElementById("s").textContent=s;
});
</script>
<h1>Regular Coding</h1>
<p>In C++, the following code would produce the output listed below</p>
<pre><code class="language-cpp">'.htmlentities('
int main() {
const double GRAVITY_MPS2 = '.$gravity.';
int seconds = '.$seconds.';
std::cout << "Secs Distance" << endl
<< fixed << showpoint << setprecision(2);
for (int i = 1; i <= seconds; i++) {
std::cout << setw(4) << i << " " << (0.5*GRAVITY_MPS2*i*i) << endl;
}
return 0;
}').'
</code></pre>';
echo '<table><tr><th>Seconds</th><th>Distance</th></tr>';
for ($i = 1; $i <= $seconds; $i++) {
echo '<tr><td>'.$i.'</td><td>';
printf('%.2f',0.5*$gravity*$i*$i);
echo '</td></tr>';
}
echo '</table>';
echo ' <script type="text/javascript" src="/theme/prism.js"></script>
</body>
</html>';
?>
Go To Live Site