2023-10-24 16:42:28 +00:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
|
<style>
|
|
|
|
|
|
html, body {
|
|
|
|
|
|
background-color: #2c2c2c;
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
font-family: sans-serif
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
hr {
|
|
|
|
|
|
width: 40px;
|
|
|
|
|
|
margin-left: 0px;
|
|
|
|
|
|
color: red;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
::-moz-selection { /* Code for Firefox */
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
background: red;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
::selection {
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
background: red;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.content {
|
|
|
|
|
|
margin: 100px auto 0px;
|
|
|
|
|
|
max-width: 80%;
|
|
|
|
|
|
width: 360px;
|
|
|
|
|
|
padding: 15px 40px;
|
|
|
|
|
|
background-color: #444;
|
|
|
|
|
|
border: 2px solid red;
|
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
|
overflow: auto;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.title { padding-bottom: 10px; }
|
|
|
|
|
|
.title h1 { margin-bottom: 3px; }
|
|
|
|
|
|
.title p { margin: 0px; }
|
|
|
|
|
|
|
|
|
|
|
|
.inputs { margin-bottom: 10px; }
|
|
|
|
|
|
.inputs p { margin-bottom: 0px; }
|
|
|
|
|
|
.inputs input {
|
|
|
|
|
|
margin: 10px 0px;
|
|
|
|
|
|
padding: 7px;
|
|
|
|
|
|
width: calc(40% - 12px);
|
|
|
|
|
|
color: #fff;
|
|
|
|
|
|
background-color: #000;
|
|
|
|
|
|
border: 3px solid red;
|
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.result progress { width: 40%; display: block; }
|
|
|
|
|
|
.result ol { padding: auto; }
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<div class="content">
|
|
|
|
|
|
<div class="title">
|
|
|
|
|
|
<h1>Mitternachtsformel</h1>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Dies ist ein kleiner Mathematikhelfer.
|
|
|
|
|
|
<br>
|
|
|
|
|
|
Dieser kann mithilfe der Mitternachtsformel Gleichungen der Form <code>ax² + bx + c = 0</code> lösen.
|
|
|
|
|
|
</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<hr>
|
|
|
|
|
|
<div class="inputs">
|
|
|
|
|
|
<p>Koeffizienten</p>
|
|
|
|
|
|
<input id="a" type="number" placeholder="Koeffizent a" autofocus>
|
|
|
|
|
|
<br>
|
|
|
|
|
|
<input id="b" type="number" placeholder="Koeffizent b">
|
|
|
|
|
|
<br>
|
|
|
|
|
|
<input id="c" type="number" placeholder="Koeffizent c">
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<hr>
|
|
|
|
|
|
<div class="result">
|
|
|
|
|
|
<p>Lösung:</p>
|
|
|
|
|
|
<progress id="progress" id="file" max="100"></progress>
|
|
|
|
|
|
<ol id="result">
|
|
|
|
|
|
|
|
|
|
|
|
</ol>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
var a = document.getElementById("a")
|
|
|
|
|
|
var b = document.getElementById("b")
|
|
|
|
|
|
var c = document.getElementById("c")
|
|
|
|
|
|
var result = document.getElementById("result");
|
|
|
|
|
|
var progress = document.getElementById("progress");
|
|
|
|
|
|
var result_string = "";
|
|
|
|
|
|
|
|
|
|
|
|
var interval = setInterval(recalculate, 5);
|
|
|
|
|
|
|
|
|
|
|
|
function recalculate() {
|
|
|
|
|
|
if(a.value == "" || b.value == "" || c.value == "") {
|
|
|
|
|
|
result.innerHTML = ""; // hide any resulting instructions
|
|
|
|
|
|
progress.style.display = "block"; // show the progress bar
|
|
|
|
|
|
} else {
|
|
|
|
|
|
progress.style.display = "none"; // hide the progress bar
|
|
|
|
|
|
|
|
|
|
|
|
// calculate the discriminant
|
|
|
|
|
|
var d = b.value * b.value - 4*a.value*c.value
|
|
|
|
|
|
result_string_new = "<li>Diskriminante berechnen: <code>b² - 4ac = " + b.value + "² - 4×" + a.value + "×" + c.value + " = <mark>" + d + "</mark></code></li>";
|
|
|
|
|
|
|
|
|
|
|
|
// check if the discriminant is smaller than 0
|
|
|
|
|
|
result_string_new += "<li>Diskriminante <code>d < 0</code>: "
|
|
|
|
|
|
if(d < 0) {
|
|
|
|
|
|
result_string_new += "<mark>Ja.</mark></li><li>Keine Lösung!<br>W = {}</li>"
|
|
|
|
|
|
} else {
|
|
|
|
|
|
result_string_new += "<mark>Nein</mark>, weiter.</li>"
|
|
|
|
|
|
|
|
|
|
|
|
// calculate the rest of the formula:
|
|
|
|
|
|
result1 = (-b.value + Math.sqrt(d)) / (2*a.value)
|
|
|
|
|
|
result2 = (-b.value - Math.sqrt(d)) / (2*a.value)
|
|
|
|
|
|
|
|
|
|
|
|
if(result1 == result2) {
|
2023-10-24 16:44:24 +00:00
|
|
|
|
result_string_new += "<li>Lösung: \
|
2023-10-24 16:42:28 +00:00
|
|
|
|
<br>– <code>x<sub>1/2</sub> = <mark>" + result1 + "</mark></code></li>";
|
|
|
|
|
|
} else {
|
2023-10-24 16:44:24 +00:00
|
|
|
|
result_string_new += "<li>Lösung: \
|
2023-10-24 16:42:28 +00:00
|
|
|
|
<br>– <code>x<sub>1</sub> = <mark>" + result1 + "</mark></code>\
|
|
|
|
|
|
<br>– <code>x<sub>2</sub> = <mark>" + result2 + "</mark></code></li>";
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// write only if anything changed (as the function gets called every x ms)
|
|
|
|
|
|
if(result_string_new != result_string) {
|
|
|
|
|
|
result_string = result_string_new;
|
|
|
|
|
|
result.innerHTML = result_string;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
