-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathviewer.html
42 lines (37 loc) · 1.88 KB
/
viewer.html
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
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="viewer.css">
</head>
<body>
<canvas id="canvas-main"></canvas>
<canvas id="canvas-hidden"></canvas>
<svg></svg>
<div id="help-menu" onclick="document.querySelector('#help-menu > .toggle-visible').classList.add('hidden');">
<span class="toggle-visible hidden">?</span>
<div>
<h1> Welcome to Knowledge Gap!</h1>
<p>Kowledge Gap is a tool to classify your notes automatically, find new connections between existing ideas and see a mind-map of everything you've learnt. It was made as part of the 2024 UQCS Hackathon, and what you're seeing is a live demo with Isaac Beh's notes. You can find more about Knowledge Gap <a href="https://github.com/49Indium/Knowledge-Gap">here</a>.<p>
<p>Some things to try:</p>
<ul>
<li>Hover over nodes to see the concepts they represent</li>
<li>See automatically generated connections between concepts via the edges of the graph</li>
<li>Move nodes around by dragging</li>
<li>Move the graph around by dragging with the middle mouse button</li>
<li>Create new edges or delete exising ones by clicking between nodes</li>
<li>Change the forces (bottom left) and see how the graph responds</li>
</ul>
</div>
</div>
<div id="inputs-container">
<div class="toggle-visible">
<div class="hline-bottom"></div>
<div class="hline-bottom"></div>
</div>
<div id="input-sliders">
</div>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="viewer.js"></script>
</body>
</html>