-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
111 lines (103 loc) · 5.12 KB
/
index.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
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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/main.css">
<title>Algorithm Sorting Game</title>
</head>
<body>
<div id="modal">
<div id="modal-textbox">
<h1>Algorithm Sorting Game</h1>
<h2>Instructions</h2>
<p>Follow the algorithm-specific instructions below to sort a list in
the correct order. Learn how a different sorting algorithm works on each level.
Use your newly-learned knowledge in the final level to choose the best
sorting algorithm to sort the list.</p>
<h2 id="algorithm-name">Bubble Sort</h2>
<input type="radio" id="bubble-sort" name="algorithm-level"
value="bubble-sort" autocomplete="off" checked>
<label for="bubble-sort">Bubble Sort</label>
<input type="radio" id="quicksort" name="algorithm-level"
value="quicksort" autocomplete="off">
<label for="quicksort">Quicksort</label>
<input type="radio" id="freesort" name="algorithm-level"
value="freesort" autocomplete="off">
<label for="freesort">Free Sort</label>
<p id="bubblesort-instructions">Swap each set of two adjacent numbers in
the correct order (smallest to largest) until you reach the end of the
list. Pass on numbers that are in the correct order. Start again from
the beginning of the list and repeat until all numbers in the list are
in the correct order. Press the 'Done' button if you are finished
or give up.</p>
<p id="quicksort-instructions"> Click the 'Select Pivot' button and then
click a card to select it as a pivot. Sort cards from smallest to
largest by moving cards smaller than the pivot to the left of it and
cards bigger than it to the right of it. When you are finished sorting
cards around a pivot, press the 'Deselect' button. Repeat selecting a
in each unsorted partition and sorting cards around it until you have
sorted the entire card list in the correct order. Press the 'Done'
button if you are finished or give up.</p>
<p id="freesort-instructions">In this final level, use your newly-learned
knowledge of algorithms to sort the list of cards from smallest to
largest. You're free to choose whatever algorithm you wish to use.
Press the 'Done' button if you are finished or give up.</p>
<h3>Game Mode</h3>
<input type="radio" id="practice-mode" name="game-mode" value="practice"
autocomplete="off" checked>
<label for="practice-mode">Practice</label>
<input type="radio" id="stopwatch-mode" name="game-mode"
value="stopwatch" autocomplete="off">
<label for="stopwatch-mode">Stopwatch</label>
<input type="radio" id="countdown" name="game-mode" value="countdown"
autocomplete="off">
<label for="countdown">Countdown</label>
<h3>Type of List</h3>
<input type="radio" id="numerical" name="list-type" value="numerical"
autocomplete="off" checked>
<label for="numerical">Numerical</label>
<input type="radio" id="alphabetical" name="list-type"
value="alphabetical" autocomplete="off" >
<label for="alphabetical">Alphabetical</label>
<h3>Scenario</h3>
<input type="radio" id="average-case" name="scenario"
value="average-case" autocomplete="off" checked>
<label for="average-case">Average Case</label>
<input type="radio" id="best-case" name="scenario" value="best-case"
autocomplete="off">
<label for="best-case">Best Case</label>
<input type="radio" id="worst-case" name="scenario" value="worst-case"
autocomplete="off">
<label for="worst-case">Worst Case</label>
<div id="modal-footer">
<button class="modal-buttons" id="startBtn" href="#">Start Game</button>
</div>
</div>
</div>
<div class="display-info">
<div id="pivot-info"></div>
<div id=timer></div>
<button class="modal-buttons" id="doneBtn" href="#">Done</button>
</div>
<ul id="card-list">
<!--Appending cards to the car list deletes the two cards selected div -->
<div class="two-cards-selected"> </div>
</ul>
<div id="action-buttons">
<div id="bubble-sort-buttons">
<button class="card-buttons" id="swapBtn" href="#">Swap</button>
<button class="card-buttons" id="passBtn" href="#">Pass</button>
</div>
<div id="quicksort-buttons">
<button class="card-buttons" id="pivotBtn" href="#">Select Pivot</button>
<button class="card-buttons" id="deselectBtn" href="#">Deselect Pivot</button>
</div>
</div>
<!-- JS Scripts -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" charset="utf-8"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"
integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="
crossorigin="anonymous"></script>
<script src="js/app.js" charset="utf-8"></script>
</body>
</html>