Knapsack/knapsack.html at master · peipeipei/Knapsack · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html>
<body>

    <title>Knapsack Problem</title>


<head>
    <link rel="stylesheet" type="text/css" href="knapsack.css">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">
    </script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.min.js">
    </script>


    <script src="knapsack.js"> </script>


</head>


<div class="main">

    <div class="alerts">
    </div>

    <div class="minor">
        <div class="top" id="houseTop">
            </br>
            <img src="house.png" data-name="house">
        </div>

        <div class="inner" id="house">

            <figure class="images"><img src="radio.png" data-value="20" data-weight="4" data-name="radio" class="stolen-item" title="radio"><figcaption class="caption"></figcaption></figure>
            <figure class="images"><img src="vase.png" data-value="50" data-weight="2" data-name="vase" class="stolen-item" title="vase"><figcaption class="caption"></figcaption></figure>
            <figure class="images"><img src="painting.png" data-value="90" data-weight="9" data-name="painting" class="stolen-item" title="painting"><figcaption class="caption"></figcaption></figure>
            <figure class="images"><img src="clock.png" data-value="175" data-weight="10" data-name="clock" class="stolen-item" title="clock"><figcaption class="caption"></figcaption></figure>
            <figure class="images"><img src="computer.png" data-value="200" data-weight="20" data-name="computer" class="stolen-item" title="computer"><figcaption class="caption" title="computer"></figcaption></figure>
            <figure class="images"><img src="book.png" data-value="10" data-weight="1" data-name="book" class="stolen-item" title="book"><figcaption class="caption"></figcaption></figure>


        </div>

        <div  class="instruct">Click item to move to knapsack</div >

    </div>

    <div class="minor">
        <div class="top" id="knaptop">
            <div class="topHalf">
            <img src="burglar.png" data-name="burglar">

                <text class="info">($</text>
                <text class="info" id="value" data-value="0"></text>
                <text class="info">, </text>
                <text class="info" id="weight" data-weight="0"></text>
                <text class="info">kg)</text>

            </div>

            <div class="bottomHalf">
                <text>Remaining Space: </text>
                <text class="stillSpace"></text>
            </div>
        </div>

        <div class="inner" id="knapsack">

        </div>

        <div class="instruct">Click item to move to house</div >

    </div>

    <div class="minor">
        <div class="top" id="scatter">
            <text class="states">States of the Knapsack</text>
            <div>
                <text class=extraInfo title="For each kg in your knapsack, what is potentially the largest value you can get for it? Of course, this does not mean your knapsack is full.">Maximum Value-to-Weight Ratio: </text>
                <text class="theInfo" id="ratio">0</text>
            </div>

            <div>
                <text class=extraInfo title="These are the items, and only these items, which contribute to the maximum value to weight ratio above">Items in Max Ratio: </text>
                <text class="theInfo" id="ratioItems">None</text>
            </div>

            <div>
                <text class=extraInfo title="This indicates the greatest dollar value that the knapsack can carry when stealing from this house">Maximum Value So Far: </text>
                <text class="theInfo" id="bestValue">0</text>
            </div>

            <div>
                <text class=extraInfo title="These are the items that will give you the maximum value in the knapsack">Items in Max Value: </text>
                <text class="theInfo" id="bestItems">None</text>
            </div>

            <br>
            <span><button class="clearValues">Clear Values</button></span>
            <span><button class="clearSc">Clear Scatter Plot</button></span>

        </div>
        <div class="inner" id="d3s">
            <svg class="chart" id="d3chart"></svg>
        </div>

    </div>

    <div class="minor" id="addon">
        <div class="top">
        </div>

        <div class="inner" id="spaces">

        </div>


    </div>

</div>


    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>


</body>
</html>