-
Notifications
You must be signed in to change notification settings - Fork 0
/
level2.html
177 lines (157 loc) · 5.3 KB
/
level2.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
<!DOCTYPE html>
<html>
<!-- Basic Meta -->
<title>Level 2 | The Coding Game</title>
<meta name="title" content="The Coding Game" />
<meta name="description" content="Learn to code using this fun and silly game! Play it twice a day and within a few weeks, you'll already be mastering JavaScript." />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://game.xcore.tk" />
<meta property="og:title" content="The Coding Game" />
<meta property="og:description" content="Learn to code using this fun and silly game! Play it twice a day and within a few weeks, you'll already be mastering JavaScript." />
<meta property="og:image" content="https://game.xcore.tk/TheCodingGame.png" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://game.xcore.tk" />
<meta property="twitter:title" content="The Coding Game" />
<meta property="twitter:description" content="Learn to code using this fun and silly game! Play it twice a day and within a few weeks, you'll already be mastering JavaScript." />
<meta property="twitter:image" content="https://game.xcore.tk/TheCodingGame.png" />
<!-- Other Stuff -->
<link href="style.css" rel="stylesheet" />
</html>
<body>
<div class='navbar'>
<div class='logo'>
<span
class='logo firstInNav'
id='piece1'>The Coding Game</span>
<span
class='logo'
id='piece2'></></span>
<span
class='logo'
id='piece3'>| </span>
<a
href="javascript:void(0)"
onclick="c()">
Credits</a>
<span id="dv">/</span>
<a
href="javascript:void(0)"
onclick="e()">
Home</a>
</div>
</div>
<div class="content">
<div class="levelCard">
<h2
class="logo"
id="piece1">
The Coding Game
</h2>
<h2
class="logo"
id="piece2">
</>
</h2><h2> - Level 2</h2><br><br>
<span id="pageText">This level is a work-in-progress. Come back soon!</span><br><br>
<!-- <next-step></next-step> -->
<div id="scriptOutput" hidden>
</div>
</div>
</div>
<div class="floatingAlert">
PUBLIC PREVIEW
</div>
<script src='script.js'></script>
<script>
window.content = document.querySelector(".content");
const pt = document.querySelector("#pageText");
var opt = document.querySelector("#scriptOutput");
var parser = new DOMParser();
let output = parser.parseFromString(
opt.innerHTML,
"text/html"
).getElementsByTagName("body")[0];
const q = new URLSearchParams(window.location.search);
function setText(element, text) {
element.innerText = text;
if (element.innerText == text) {
return true;
} else {
throw new Error("Whoops, it seems that there was an error.. (not in your code, in your computer, or in our code.)");
}
__updateScreen();
}
function getElement(id) {
const elem = output.getElementById(id);
if (elem) return elem;
else throw new Error("Whoops, it looks like you made a mistake! That element doesn't exist!");
}
function createText(text, id) {
const elem = document.createElement("span");
elem.innerText = text;
elem.style.fontFamily = '\"Poppins\", sans-serif';
elem.style.color = "black";
output.append(elem);
__updateScreen();
return elem;
}
function __updateScreen() {
opt.innerHTML = output.innerHTML;
}
function __updateSearchParams() {
window.location.search = q.toString();
}
class NextButton extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
this.innerHTML = `
<button>
<img src="next-page.svg" /> Next Step
</button>
`;
this.className = "nextBtn";
this.onclick = () => {
q.set("page", (parseInt(q.get("page"))+1) || 1);
__updateSearchParams();
}
}
}
customElements.define("next-step", NextButton);
if (q.get("page") == 2) {
pt.innerHTML = `
With that being said, or written .. let's begin with: Elements!<br>
Elements are visual components on your screen. Elements make up the web as you know it!<br>
Elements can be text, images, videos, portals into other websites, and more!<br>
Elements are the very core of the internet.
`;
} else if (q.get("page") == 3) {
pt.innerHTML = `
Now, off of elements, onto functions. Functions are re-usable lines of code.<br>
I can set a function, and then, later on in my code, I can call it to run it's code.<br>
And functions <b>don't have a use limit!</b> Meaning.. that's right! They're re-usable.<br>
To call a function, you just have to do <code>function-name-here()</code>.<br>
You will learn how to create them in later levels.
`;
} else if (q.get("page") == 4) {
pt.innerHTML = `
That's all for today lesso- oops, I meant level!
This was not really a level, but it was an introduction to two<br>basic concepts that will be widely used throughout the game.
Thank you for trying The Coding Game, I hope you enjoy later levels!
`;
let t = document.querySelector(".nextBtn");
t.style.backgroundColor = "#48e827";
t.style.color = "white";
t.style.padding = "3px";
t.style.borderRadius = "5px";
t.innerHTML = "Next Level";
t.onclick = () => {
localStorage.setItem("level", "2");
e();
}
}
</script>
</body>