forked from JaydaJ1/KAJJ
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathintro1.html
148 lines (141 loc) · 5.78 KB
/
intro1.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="intro1.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Document</title>
</head>
<body>
<!-- Things to cover:
Camel Case
Javascript
Statements
How to use the website
Flow of execution
Operations
Variables
-->
<div class="top">
</div>
<div class="top content">
<div class="mid statements">
<p>Code is made of lines of commands, which help us tell the computer what to do!
I want you to practice giving the computer some basic math problems, you can use + and -,
and also * for multiplication and / for division. Run each line with the button below,
</p>
<div class="formula">
<textarea id="cmd1" cols="10" rows="1" placeholder="1+1"></textarea>=<div id="p1" class="oneline">__</div>
<button id="cmd1_b">Run Command 1</button><br>
<textarea id="cmd2" cols="10" rows="1" placeholder="2+2"></textarea>=<div id="p2" class="oneline">__</div>
<button id="cmd2_b">Run Command 2</button><br>
<textarea id="cmd3" cols="10" rows="1" placeholder="3+3"></textarea>=<div id="p3" class="oneline">__</div>
<button id="cmd3_b">Run Command 3</button><br>
<textarea id="cmd4" cols="10" rows="1" placeholder="4+4"></textarea>=<div id="p4" class="oneline">__</div>
<button id="cmd4_b">Run Command 4</button><br>
<div class="placeholder"></div>
</div>
</div>
<div class="mid variables">
<p>Variables are use to store something we want to use or remember later. It's kind of like a box, but for
data! We can store different things in variables, like numbers, words, and even True/False!<br>
Before we start writing our code, we want to explain two things. One is how we actually <em>make</em>
variables. We make variables like this:<br>
<span class="codeblock">someVar = 42;</span><br>
Notice that we named our variable, 'someVar', which is short for 'some variable'! Also notice how we
started with a lowercase letter, and instead of using spaces for words, we just smushed them together and
capitalized the first letter of every following word. Here's an extreme example:<br>
<span class="codeblock">theVarIMadeAndThatIReallyLike = 42;</span><br>
Wow, that's a long variable haha. Notice how we started with a lowercase and every following word was
capitalized? In coding, we call that <em>Camel Case</em>.<br>
Alright, I think you're ready to tackle coding. In this course we'll be learning a language called
Javascript. If you haven't already, do the practice problems to the left, then move on when the buttom
is green!<br>
</p>
</div>
<div class="mid">
</div>
<div class="mid">
</div>
</div>
<a class="highlight">Let's Start!</a>
</body>
<script>
let q1 = false;
let q2 = false;
let q3 = false;
let q4 = false;
function check_p1() {
if (q1&&q2&&q3&&q4) {
$('.placeholder').text('When we move to the next session, our code is going to look kind of similar. We\'ll write it\
line by line, and it\'s going to execute line by line! We\'ll be working with numbers, but also with variables,\
which is in the next box! When you\'re done reading, click the button below to move on to the next session!');
$('a').attr('href', 'level1.html');
$('a').attr('style', 'color: green;');
}
}
$('#cmd1_b').click(function()
{
let cmd = $('#cmd1').val();
try
{
let x = eval(cmd);
$('#p1').text(x);
q1 = true;
check_p1();
}
catch(err)
{
alert(err+"\n\n"+"Did you try just a simple math problem?");
}
})
$('#cmd2_b').click(function()
{
let cmd = $('#cmd2').val();
try
{
let x = eval(cmd);
$('#p2').text(x);
q2 = true;
check_p1();
}
catch(err)
{
alert(err+"\n\n"+"Did you try just a simple math problem?");
}
})
$('#cmd3_b').click(function()
{
let cmd = $('#cmd3').val();
try
{
let x = eval(cmd);
$('#p3').text(x);
q3 = true;
check_p1();
}
catch(err)
{
alert(err+"\n\n"+"Did you try just a simple math problem?");
}
})
$('#cmd4_b').click(function()
{
let cmd = $('#cmd4').val();
try
{
let x = eval(cmd);
$('#p4').text(x);
q4 = true;
check_p1();
}
catch(err)
{
alert(err+"\n\n"+"Did you try just a simple math problem?");
}
})
</script>
</body>
</html>