index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sortieralgorithmen Laufzeiten Vergleich (Interaktiv)</title>
<meta name="description" content="Vergleiche die Laufzeiten der Sortieralgorithmen Radixsort, Quicksort, Insertionsort und Bucketsort interaktiv in einem Graphen">
<link href="https://cdn.tmczs.de/bIgSJ1VGo2.css" rel="stylesheet"> <!-- Bootstrap CSS -->
<link rel="icon" href="https://cdn.tmczs.de/Logo.svg">
<script src="https://cdn.tmczs.de/BJO2Sc0Xlo"></script>
<script src="https://kit.fontawesome.com/a70d399742.js?v=1" crossorigin="anonymous"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container mt-3">
<h1>TMCZ Sortieralgorithmen Laufzeiten Graph</h1>
<div class="container">
<hr class="mt-3 mb-0">
<img src="tmp.png" width="100%" id="graph" class="mb-3">
<div class="btn-toolbar justify-content-between" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group">
<button type="button" class="btn btn-outline-secondary" onclick="openInNewTab()">Graph in neuem Tab Öffnen</button>
</div>
<div class="btn-group">
<a id="graphDownloadButton" href="tmp.png" download="Sortieralgorithmen_Laufzeiten_Graph - tmcz.de.png" type="button" class="btn btn-outline-secondary">Graph Herunterladen</a>
</div>
</div>
</div>
<hr class="mt-3">
<div class="container mt-3">
<h3>Einstellungen</h3>
<div class="mt-3">
<div class="row">
<div class="col-10">
<label for="yAchse" class="form-label">Y Achsen Schritte (in Tausend)</label>
<input type="range" oninput="updateY(this)" class="form-range" min="10" max="2000000" step="10" id="yAchse" value="400000">
</div>
<div class="col mt-4">
<input type="text" oninput="updateY(this)" class="form-control" id="yAchseInput" value="400000">
</div>
</div>
</div>
<div class="mt-3">
<div class="row">
<div class="col-10">
<label for="xAchse" class="form-label">X Achsen Schritte (in Tausend)</label>
<input type="range" oninput="updateX(this)" class="form-range" min="10" max="2500" step="10" id="xAchse" value="2500">
</div>
<div class="col mt-4">
<input type="text" oninput="updateX(this)" class="form-control" id="xAchseInput" value="2500">
</div>
</div>
</div>
<h4>Graphen Ausblenden</h4>
<div class="mt-3 mb-3">
<div class="row">
<div class="col">
<div class="form-check">
<input class="form-check-input" style="background-color: green;" onchange="updateGraphSelection()" type="checkbox" value="" id="radixSortCheck" checked>
<label class="form-check-label" for="radixSortCheck">
Radixsort Graph
</label>
</div>
<div class="form-check">
<input class="form-check-input" style="background-color: blue;" onchange="updateGraphSelection()" type="checkbox" value="" id="quickSortCheck" checked>
<label class="form-check-label" for="quickSortCheck">
Quicksort Graph
</label>
</div>
</div>
<div class="col">
<div class="form-check">
<input class="form-check-input" style="background-color: orange;" onchange="updateGraphSelection()" type="checkbox" value="" id="insertionSortCheck" checked>
<label class="form-check-label" for="insertionSortCheck">
Insertionsort Graph
</label>
</div>
<div class="form-check">
<input class="form-check-input" style="background-color: #dcc200;" onchange="updateGraphSelection()" type="checkbox" value="" id="bucketSortCheck" checked>
<label class="form-check-label" for="bucketSortCheck">
Bucketsort Graph
</label>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<hr class="mt-3">
<h3>Information zu diesem Programm</h3>
<p>Dieses Programm wurde mit PHP geschrieben. Die Daten basieren alle auf eigenen Ergebnissen und Funktionen, die bis 40.000.000 Elementen im Array sortierten, und dies von 0 an in 10.000er Schritten durchführten. Alle Sortieralgorithmen haben dasselbe Array bekommen.</p>
<p>Die Logs, sowie Punkte für den Graphen findet ihr hier: </p>
<ul>
<li><a href="/log.php?s=log">Log Datei</a></li>
<li><a href="/log.php?s=json&t=radixsort">Radixsort Punkte ([Anzahl Elemente | Anzahl Durchläufe])</a></li>
<li><a href="/log.php?s=json&t=quicksort">Quicksort Punkte ([Anzahl Elemente | Anzahl Durchläufe])</a></li>
<li><a href="/log.php?s=json&t=insertionsort">Insertionsort Punkte ([Anzahl Elemente | Anzahl Durchläufe])</a></li>
<li><a href="/log.php?s=json&t=bucketsort">Bucketsort Punkte ([Anzahl Elemente | Anzahl Durchläufe])</a></li>
</ul>
</div>
<?php
include($_SERVER['DOCUMENT_ROOT'] . '/templates/footer.html');
?>
<script>
let xAchseRange = document.getElementById('xAchse');
let xAchseInput = document.getElementById('xAchseInput');
let yAchseRange = document.getElementById('yAchse');
let yAchseInput = document.getElementById('yAchseInput');
let radixSortCheck = document.getElementById('radixSortCheck');
let quickSortCheck = document.getElementById('quickSortCheck');
let insertionSortCheck = document.getElementById('insertionSortCheck');
let bucketSortCheck = document.getElementById('bucketSortCheck');
let graph = document.getElementById('graph');
let graphParam = '&r&q&i&b';
let graphDownloadButton = document.getElementById('graphDownloadButton');
function updateX(e){
if (e === xAchseInput){
if (e.value > 2500){
e.value = 2500;
}
if (e.value < 0){
e.value = 0;
}
xAchseRange.value = xAchseInput.value;
}else {
xAchseInput.value = xAchseRange.value;
}
if (e.value !== 0){
updateGraph();
}
}
function updateY(e){
if (e === yAchseInput){
if (e.value > 2000000){
e.value = 2000000;
}
if (e.value < 0){
e.value = 0;
}
yAchseRange.value = yAchseInput.value;
}else {
yAchseInput.value = yAchseRange.value;
}
if (e.value !== 0){
updateGraph();
}
}
function updateGraphSelection(){
graphParam = '';
if (radixSortCheck.checked){
graphParam += '&r';
}
if (quickSortCheck.checked){
graphParam += '&q';
}
if (insertionSortCheck.checked){
graphParam += '&i';
}
if (bucketSortCheck.checked){
graphParam += '&b';
}
updateGraph();
}
function updateGraph(){
graph.src = '/graph.php?xScale='+xAchseInput.value+'&yScale='+yAchseInput.value + graphParam;
graphDownloadButton.href = '/graph.php?xScale='+xAchseInput.value+'&yScale='+yAchseInput.value + graphParam;
}
function openInNewTab(){
window.open(
'/graph.php?xScale='+xAchseInput.value+'&yScale='+yAchseInput.value + graphParam,
'_blank'
);
}
updateGraph();
</script>
</body>
</html>