60 lines
2.1 KiB
HTML
60 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Morris Post‑Order Traversal Animation & Code Display</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
<!-- Load Konva.js -->
|
||
<script src="https://cdn.jsdelivr.net/npm/konva@8.3.13/konva.min.js"></script>
|
||
<script src="script.js" defer></script>
|
||
</head>
|
||
<body>
|
||
<h1>Morris Post-Order Traversal Visualization</h1>
|
||
<p>This animation shows how the Morris post-order traversal algorithm works without using a stack or recursion. Click the "Next Step" button to run the animation step by step.</p>
|
||
|
||
<div class="visualization-container">
|
||
<div class="code-container">
|
||
<pre><code id="codeDisplay"></code></pre>
|
||
</div>
|
||
<div class="tree-container">
|
||
<div class="color-key">
|
||
<div class="color-item">
|
||
<div class="color-box" style="background-color: #ffeb3b;"></div>
|
||
<span>Current Node</span>
|
||
</div>
|
||
<div class="color-item">
|
||
<div class="color-box" style="background-color: #2196f3;"></div>
|
||
<span>Rightmost Node</span>
|
||
</div>
|
||
<div class="color-item">
|
||
<div class="color-box" style="background-color: #4caf50;"></div>
|
||
<span>Visited Node</span>
|
||
</div>
|
||
<div class="color-item">
|
||
<div class="color-box" style="background-color: #03a9f4;"></div>
|
||
<span>Thread Created</span>
|
||
</div>
|
||
<div class="color-item">
|
||
<div class="color-arrow" style="background-color: #888;"></div>
|
||
<span>Tree Edge</span>
|
||
</div>
|
||
<div class="color-item">
|
||
<div class="dotted-line"></div>
|
||
<span>Thread Edge</span>
|
||
</div>
|
||
<div class="color-item">
|
||
<div class="color-arrow" style="background-color: #e91e63;"></div>
|
||
<span>Reversed Edge</span>
|
||
</div>
|
||
</div>
|
||
|
||
<button id="nextStep">Next Step</button>
|
||
|
||
<div id="container"></div>
|
||
<div class="explanation" id="treeExplanation">
|
||
Post-order traversal output: <span id="output"></span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html> |