Assignment 14

by sheila massey

HTML

<h1>Graphs Assignment</h1>

Please select two nodes to go between (one from and one to)

<br>
<br>


From Node:<select id = 'from'>
    <option  value="A"> A
    <option  value="B"> B
    <option  value="C"> C
    <option  value="D"> D
    <option  value="E"> E
    <option  value="F"> F
    <option  value="G"> G
</select>

<br>

To Node:<select id = 'to'>
    <option  value="A"> A
    <option  value="B"> B
    <option  value="C"> C
    <option  value="D"> D
    <option  value="E"> E
    <option  value="F"> F
    <option  value="G"> G
</select>

<br>
<br>

<button id = calculate onclick = 'Calc()'>
    Click to View Path
</button>

<p id = 'output'>
    
    
    <br>
    <br>
    
</p>

<div>

    <h2><u>Graph</u></h2>

    <svg width="300" height="325">
        <circle cx="150" cy="50" r="20" stroke="green" stroke-width="2" fill="white" />
        <text x="145" y="55" fill="black">A</text>
        b<circle cx="275" cy="100" r="20" stroke="green" stroke-width="2" fill="white" />
        <text x="270" y="105" fill="black">B</text>
        c<circle cx="50" cy="100" r="20" stroke="green" stroke-width="2" fill="white" />
        <text x="45" y="105" fill="black">C</text>
        d<circle cx="150" cy="150" r="20" stroke="green" stroke-width="2" fill="white" />
        <text x="145" y="155" fill="black">D</text>
        e<circle cx="50" cy="190" r="20" stroke="green" stroke-width="2" fill="white" />
        <text x="45" y="195" fill="black">E</text>
        f<circle cx="150" cy="250" r="20" stroke="green" stroke-width="2" fill="white" />
        <text x="145" y="255" fill="black">F</text>
        g<circle cx="275" cy="250" r="20" stroke="green" stroke-width="2" fill="white" />
        <text x="270" y="255" fill="black">G</text>
        <line x1="130" y1="50" x2="70" y2="100" style="stroke:red;stroke-width:2" />
        <text x="100" y="65" fill="black">1</text>
        <line x1="170" y1="50" x2="255" y2="100" style="stroke:red;stroke-width:2" />
        <text x="212.5"...

JavaScript

/////////////////////////////////////////////////////////////////////////////////////////////////// 
 function Graph() 
 {
    this.edges = [];
 }
//////////////////////////////////////////////////////////////////////////////////////////////////////////
Graph.prototype.addNode = function (name) 
  {
      this.edges[name] = [];
  }

Graph.prototype.addEdge = function (from, to, cost)
  {
       this.edges[from][to] = cost;
       this.edges[to][from] = cost;
  }

Graph.prototype.calculate = function (from, to, cost, edges) {
    edges.push (from)
    
    if (from == to) 
      {
          showEdge(edges, cost);
      }
    else {
        for (var between in this.edges[from]) 
          {
              if (edges.indexOf(between)<0) 
                {
                  var currentCost = this.edges[from][between];
                  this.calculate(between, to, cost + currentCost, edges);
                }
          } 
    }edges.pop();
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////
function Calc () {
     var from = document.getElementById('from').value;
     var to = document.getElementById('to').value;
     document.getElementById('output').innerHTML = '';

    var graph = new Graph();
    
////////////////////////////////////////////
graph.addNode('A');
graph.addNode('B');
graph.addNode('C');
graph.addNode('D');
graph.addNode('E');
graph.addNode('F');
graph.addNode('G');

graph.addEdge('A', 'B', 2);
graph.addEdge('A', 'C', 1);
graph.addEdge('B', 'D', 1);
graph.addEdge('B', 'G', 1);
graph.addEdge('C', 'D', 1);
graph.addEdge('C', 'E', 1);
graph.addEdge('D', 'E', 2);
graph.addEdge('D', 'F', 1);
graph.addEdge('D', 'G', 2);
////////////////////////////////////////////////

document.getElementById('output').innerHTML += from + ' to ' + to  + '<br><br>';

graph.calculate(from, to, 0, []);
}

/////////////////////////////////////////////////////////////////////////////////////////////////////////////
function...