UnionFind/index.html

<!DOCTYPE html>
<html>
<head>
    <title>Union Find</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="../JqueryAndBootstrap/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/union_style.css" rel="stylesheet">

    <script src="../JqueryAndBootstrap/jquery.min.js"></script>
    <script src="../JqueryAndBootstrap/jquery-ui-1.12.0/jquery-ui.min.js"></script>
    <script src="../JqueryAndBootstrap/bootstrap.min.js"></script>
    <script src="js/Controller.js"></script>
    <script src="js/View.js"></script>
    <script src="js/QuickUnion.js"></script>
    <script src="js/QuickFind.js"></script>
    <script src="js/WeightedUnion.js"></script>
    <script src="js/EventManager.js"></script>
    <script src="js/State.js"></script>
    <script src="js/StateController.js"></script>
    <script src="js/QuickUnionPathCompression.js"></script>
    <script src="js/WeightedUnionPathCompression.js"></script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-118868750-1"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());

        gtag('config', 'UA-118868750-1');
    </script>

</head>


<body onload="viewer.switchAlgorithm('QuickFind')">
<div class="text-center">
    <h1 id="headerText">Quick Find</h1>
    <div class="arrayRow">
        <div id="array">
            <ul id="arrayUL">
                <img id="arrow" class="hidden" src="assets/up_arrow.png"/>
                <img id="leftBracket" class="bracket" src="assets/square_left.png"/>
                <img id="rightBracket" class="bracket" src="assets/square_right.png"/>
            </ul>
        </div>
    </div>
    <div class="graphRow">
        <div id="nodes">
            <ul id="graphUL">
                <img class="hidden" src="assets/correct.png" id="correctImgA"/>
                <img class="hidden" src="assets/correct.png" id="correctImgB"/>
                <img class="hidden" src="assets/wrong.png" id="wrongImgA"/>
                <img class="hidden" src="assets/wrong.png" id="wrongImgB"/>
                <svg id="lines"></svg>
            </ul>
        </div>
    </div>
    <br><br><br><br>
    <div class="settingsWrapper">
        <div class="radioSettings">
            <form id="algorithm">
                <input id="Quick Find" type="radio" name="algorithm" value="quickFind" checked
                       onclick="viewer.switchAlgorithm('QuickFind')"> Quick Find<br>
                <input id="Quick Union" type="radio" name="algorithm" value="quickUnion"
                       onclick="viewer.switchAlgorithm('QuickUnion')"> Quick Union<br>
                <input id="Weighted Union" type="radio" name="algorithm" value="weightedUnion"
                       onclick="viewer.switchAlgorithm('WeightedUnion')"> Weighted Union<br>
                <input id="QuickUnionPathCompression" type="radio" name="algorithm" value="quickComp"
                       onclick="viewer.switchAlgorithm('QuickUnionPathCompression')"> Quick Union Path
                Compression<br>
                <input id="WeightedUnionPathCompression" type="radio" name="algorithm" value="weightComp" onclick="viewer.switchAlgorithm('WeightedUnionPathCompression')"> Weighted Union Path Compression<br>
            </form>
        </div>
        <div class="settings">
            <div class="buttons">
                <button id="reset" class="btn btn-primary" onclick="viewer.resetAll();">Reset</button>
                <button id="backward" class="btn btn-primary" onclick="stepBack();">Backward</button>
                <button id="forward" class="btn btn-primary"
                        onclick="viewer.stepForward(getGraphState(), getArrayState());">Forward
                </button>
            </div>
            <div class="buttons">
                <button id="slow" class="btn btn-success" onclick="setSlow()">Slow</button>
                <button id="medium" class="btn btn-success" onclick="setMedium()">Medium</button>
                <button id="fast" class="btn btn-success" onclick="setFast()">Fast</button>
            </div>
        </div>
        <div class="radioSettings">
            <form id="method">
                <input id="radio_id1" type="radio" name="method" value="Union" checked><span> union( _ , _ )</span><br>
                <input id="radio_id2" type="radio" name="method" value="Connected"><span> connected( _ , _ )</span><br>
                <input id="radio_id3" type="radio" name="method" value="Find"><span> find( _ )</span>
            </form>
        </div>
    </div>
</div>
</body>

<script src="js/insertArrayAndNodes.js"></script>
<script src="js/drawGraph.js"></script>
<script src="js/methods.js"></script>

</html>