62 lines
2.1 KiB
HTML
62 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<!-- Author: Evan Lee -->
|
|
<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="../../konva.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>
|