-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathrandom-stuff.html
82 lines (74 loc) · 5.1 KB
/
random-stuff.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
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
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<script type="text/javascript" src="./js/deployggb.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="./css/main.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/solid.js" integrity="sha384-+Ga2s7YBbhOD6nie0DzrZpJes+b2K1xkpKxTFFcx59QmVPaSA8c7pycsNaFwUK6l" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome.js" integrity="sha384-7ox8Q2yzO/uWircfojVuCQOZl+ZZBg2D2J5nkpLqzH1HY0C1dHlTKIbpRz/LG23c" crossorigin="anonymous"></script>
<script type="text/javascript" src="./js/random-stuff.js"></script>
<title>JS♥GeoGebra</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">JS♥GeoGebra</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="./index.html">Function Quiz</a>
</li>
</li>
<a class="nav-link" href="./random-stuff.html">Random Stuff</a>
</li>
<li class="nav-item">
<a class="nav-link" href="explanations.html">Explanations</a>
</ul>
</div>
</nav>
<div style="height:20px;"></div>
<div class="container">
<h3>Random Stuff Generator
<span tabindex="0" data-trigger="focus" style="cursor:pointer;" id="popover-title" data-toggle="popover" title="Welcome to Random Stuff Generator" data-content="This example, basically demonstrates simple interaction between the DOM and GeoGebra Api realized via JavaScript. The DOM can easily be updated based on the current context in the applet. Press the button 'Draw random stuff' to generate 80 random points in [-5,5] x [-5,5] and connect a subset of them with lines. Press the button again to regenerate this piece of art. The points can be made invisible and another option lets them dance. The party can be stopped by pressing 'Stop Dance'. Both buttons change based on the current context.">
<i class="fas fa-info-circle"></i>
</span></h3>
<div class="row">
<button type="button" class="btn btn-primary" onclick="drawRandomPoints()">Draw Random Stuff</button>
<span style="display:none" id="pointsShown">
<button class='btn btn-success' onclick='toggleVisibility()'>Points Shown - Click to Hide</button>
<button id="startDanceButton" class="btn btn-primary" onclick="letsDance()">Let's Dance</button>
</span>
<button style="display:none" id="pointsHidden" class='btn btn-danger' onclick='toggleVisibility()'>Points Hidden - Click to Show</button>
<button style="display:none" id="stopDanceButton" class="btn btn-primary" onclick="stopDance()">Stop Dance</button>
</div>
<div style="height:20px;"></div>
<div class="container-fluid">
<div id="applet_container"></div>
</div>
</div>
<!-- /.container -->
<footer class="footer">
<div class="container">
<span class="text-muted"><a href="mailto:[email protected]">Matthias Danzinger</a></span>
</div>
</footer>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$(function() {
$('#popover-title').popover({
container: 'body',
trigger: 'focus'
})
})
</script>
</body>
</html>