-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
187 lines (179 loc) · 10 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
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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Quest</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Game Container (The Border) -->
<div id="game-container">
<h1>Code Quest</h1>
<!-- Toggle Mode (light mode and Dark Mode ) -->
<div class="mode-toggle-container">
<span>Light Mode</span>
<label class="switch">
<input type="checkbox" title="none" id="mode-toggle">
<span class="slider round"></span>
</label>
<span>Dark Mode</span>
</div>
<!-- Level 1 Test -->
<div id="level-1" class="level active">
<h2> Level 1 </h2>
<p id="challenge-1">Declare variables for wood, stone, and iron and initialize them with values.</p>
<textarea id="code-editor-1" rows="10" cols="50" placeholder="Write your JavaScript code here..."></textarea>
<div id="editor-info-1">
<span id="char-count-1">0 characters</span>
</div>
<button id="run-button-1" onclick="runCode(1)">Run Code</button>
<button id="prev-button-1" onclick="prevLevel()">Previous Challenge</button>
<pre id="output-1"></pre>
<button id="hint-button-1" onclick="showHint(1)">Show Hint</button>
<p id="hint-1" style="display: none;">Hint: Declare variables using `let` or `const` and assign values.</p>
</div>
<!-- Level 2 Test -->
<div id="level-2" class="level">
<h2> Level 2 </h2>
<p id="challenge-2">Create an array with three elements and log it to the console.</p>
<textarea id="code-editor-2" rows="10" cols="50" placeholder="Write your JavaScript code here..."></textarea>
<div id="editor-info-2">
<span id="char-count-2">0 characters</span>
</div>
<button id="run-button-2" onclick="runCode(2)">Run Code</button>
<button id="prev-button-2" onclick="prevLevel()">Previous Challenge</button>
<pre id="output-2"></pre>
<button id="hint-button-2" onclick="showHint(2)">Show Hint</button>
<p id="hint-2" style="display: none;">Hint: Use array methods like `push` and `pop` to manipulate arrays.</p>
</div>
<!-- Level 3 Test -->
<div id="level-3" class="level">
<h2> Level 3 </h2>
<p id="challenge-3">Write a function to calculate the factorial of a number and log the result.</p>
<textarea id="code-editor-3" rows="10" cols="50" placeholder="Write your JavaScript code here..."></textarea>
<div id="editor-info-3">
<span id="char-count-3">0 characters</span>
</div>
<button id="run-button-3" onclick="runCode(3)">Run Code</button>
<button id="prev-button-3" onclick="prevLevel()">Previous Challenge</button>
<pre id="output-3"></pre>
<button id="hint-button-3" onclick="showHint(3)">Show Hint</button>
<p id="hint-3" style="display: none;">Hint: Use recursion or a loop to calculate the factorial.</p>
</div>
<!-- Level 4 Test -->
<div id="level-4" class="level">
<h2> Level 4 </h2>
<p id="challenge-4">Create a function that takes an array of numbers and returns the largest number.</p>
<textarea id="code-editor-4" rows="10" cols="50" placeholder="Write your JavaScript code here..."></textarea>
<div id="editor-info-4">
<span id="char-count-4">0 characters</span>
</div>
<button id="run-button-4" onclick="runCode(4)">Run Code</button>
<button id="prev-button-4" onclick="prevLevel()">Previous Challenge</button>
<pre id="output-4"></pre>
<button id="hint-button-4" onclick="showHint(4)">Show Hint</button>
<p id="hint-4" style="display: none;">Hint: Use `Math.max()` or a loop to find the largest number.</p>
</div>
<!-- Level 5 Test -->
<div id="level-5" class="level">
<h2> Level 5 </h2>
<p id="challenge-5">Write a function to reverse a string and log the result.</p>
<textarea id="code-editor-5" rows="10" cols="50" placeholder="Write your JavaScript code here..."></textarea>
<div id="editor-info-5">
<span id="char-count-5">0 characters</span>
</div>
<button id="run-button-5" onclick="runCode(5)">Run Code</button>
<button id="prev-button-5" onclick="prevLevel()">Previous Challenge</button>
<pre id="output-5"></pre>
<button id="hint-button-5" onclick="showHint(5)">Show Hint</button>
<p id="hint-5" style="display: none;">Hint: Use string methods like `split()`, `reverse()`, and `join()`.</p>
</div>
<!-- Level 6 Test-->
<div id="level-6" class="level">
<h2> Level 6 </h2>
<p id="challenge-6">Create a function to find the sum of all even numbers in an array.</p>
<textarea id="code-editor-6" rows="10" cols="50" placeholder="Write your JavaScript code here..."></textarea>
<div id="editor-info-6">
<span id="char-count-6">0 characters</span>
</div>
<button id="run-button-6" onclick="runCode(6)">Run Code</button>
<button id="prev-button-6" onclick="prevLevel()">Previous Challenge</button>
<pre id="output-6"></pre>
<button id="hint-button-6" onclick="showHint(6)">Show Hint</button>
<p id="hint-6" style="display: none;">Hint: Use `filter()` and `reduce()` methods for arrays.</p>
</div>
<!-- Level 7 Test -->
<div id="level-7" class="level">
<h2> Level 7 </h2>
<p id="challenge-7">Write a function to check if a string is a palindrome.</p>
<textarea id="code-editor-7" rows="10" cols="50" placeholder="Write your JavaScript code here..."></textarea>
<div id="editor-info-7">
<span id="char-count-7">0 characters</span>
</div>
<button id="run-button-7" onclick="runCode(7)">Run Code</button>
<button id="prev-button-7" onclick="prevLevel()">Previous Challenge</button>
<pre id="output-7"></pre>
<button id="hint-button-7" onclick="showHint(7)">Show Hint</button>
<p id="hint-7" style="display: none;">Hint: Check if the string reads the same backward as forward.</p>
</div>
<!-- Level 8 Test -->
<div id="level-8" class="level">
<h2> Level 8 </h2>
<p id="challenge-8">Create a function that returns the Fibonacci sequence up to a given number.</p>
<textarea id="code-editor-8" rows="10" cols="50" placeholder="Write your JavaScript code here..."></textarea>
<div id="editor-info-8">
<span id="char-count-8">0 characters</span>
</div>
<button id="run-button-8" onclick="runCode(8)">Run Code</button>
<button id="prev-button-8" onclick="prevLevel()">Previous Challenge</button>
<pre id="output-8"></pre>
<button id="hint-button-8" onclick="showHint(8)">Show Hint</button>
<p id="hint-8" style="display: none;">Hint: Use a loop or recursion to generate the Fibonacci sequence.</p>
</div>
<!-- Level 9 Test -->
<div id="level-9" class="level">
<h2> Level 9 </h2>
<p id="challenge-9">Write a function that merges two arrays into a single array, removing any duplicate values.</p>
<textarea id="code-editor-9" rows="10" cols="50" placeholder="Write your JavaScript code here..."></textarea>
<div id="editor-info-9">
<span id="char-count-9">0 characters</span>
</div>
<button id="run-button-9" onclick="runCode(9)">Run Code</button>
<button id="prev-button-9" onclick="prevLevel()">Previous Challenge</button>
<pre id="output-9"></pre>
<button id="hint-button-9" onclick="showHint(9)">Show Hint</button>
<p id="hint-9" style="display: none;">Hint: Use `concat()` and `filter()` methods to merge arrays and remove duplicates.</p>
</div>
<!-- Level 10 Test -->
<div id="level-10" class="level">
<h2> Level 10 </h2>
<p id="challenge-10">Create a function that counts the frequency of each word in a given string.</p>
<textarea id="code-editor-10" rows="10" cols="50" placeholder="Write your JavaScript code here..."></textarea>
<div id="editor-info-10">
<span id="char-count-10">0 characters</span>
</div>
<button id="run-button-10" onclick="runCode(10)">Run Code</button>
<button id="prev-button-10" onclick="prevLevel()">Previous Challenge</button>
<pre id="output-10"></pre>
<button id="hint-button-10" onclick="showHint(10)">Show Hint</button>
<p id="hint-10" style="display: none;">Hint: Use `split()` and `reduce()` methods to count word frequency.</p>
</div>
<!-- Footer section-->
<footer>
<div class="footer-content">
<div class="footer-links">
<a href="https://www.linkedin.com/in/edward-marwa-99203b1b3/" target="">LinkedIn</a>
<a href="https://x.com/sudanesehumor" target="">Twitter</a>
<a href="https://github.com/EddMarwa" target="">GitHub</a>
</div>
<div class="footer-info">
<p>© 2024 Code Quest. All rights reserved.</p>
<p>Contact us at <a href="mailto:stingerchronicles254@gmail.com">stingerchronicles254@gmail.com</a></p>
</div>
</div>
</footer>
<script src="script.js"></script>
</div>
</body>
</html>