This repository has been archived by the owner on Mar 16, 2021. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
code.html
119 lines (92 loc) · 7.77 KB
/
code.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
<!DOCTYPE html>
<html>
<head>
<!-- Colors: Glenn Navy: #091f3f | Glenn Orange: #ef4b24 | Grizzly Bots Slate Blue: #2b354a -->
<!-- Bootstrap :) -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Custom CSS-->
<link type="text/css" rel="stylesheet" href="css/style.css">
<!-- Font Awesome for icons -->
<link type="text/css" rel="stylesheet" href="css/fontawesome/all.min.css">
<!-- Slick - used for lesson carousel-->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<!-- Slick-related styling - optional-->
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Grizzly Bots PIT</title>
</head>
<body class="ghs-navy" onload="inactivityTime()">
<div class="container-fluid align-items-center" id="code">
<div class="row">
<div class="col ghs-center align-items-center ghs-navy" id="code-back">
<a class="btn btn-lg btn-primary" href="index.html" role="button">Back</a>
</div>
<hr>
</div>
<div class="row text-white">
<div class="col-3 ghs-85vh ghs-center ghs-navy">
<br class="ghs-br">
<i class="far fa-arrow-alt-circle-right h3"></i>
<h3>Steps:</h3>
<p>This is Snap. It looks similar to Scratch, because it kind of is! Snap is a fork of Scratch 1.4 with extended features. We’re going to make a really basic drawing program, but feel free to mess around!
<br> Regardless, you’ll probably want to click the small screen icon so everything can fit. We had issues with embedding Snap, but if you happen to be pretty good with HTML, ask us to pull up the source so you can help us out!
<br> By the end of this, you’ll be able to use your mouse to draw simple pictures.
<br>
<br> 1. First, we need to go to the Control tab, and drag the when green flag clicked block into the scripting area. This will allow us to start our program by clicking the green flag button.
<br> 2. Now we need the code that makes our sprite move. In the control tab, grab the forever loop. This will execute, or run, any code inside of the loop, forever, or at least until it is stopped.
<br> 3. Now we need to go to motion, and look for the go to *blank* block. Put the block into the forever loop. Click on the dropdown, and set it to mouse pointer. This will tell the sprite to repeatedly go to the mouse, making it
look like it is following the mouse.
<br> 4. Press the green flag to test what we’ve done so far. Once you hover over to the stage, you should see that the sprite follows the mouse pointer. If you don’t, make sure your code looks like this. Press the red stop button to
stop your code from running when you are done.
<br> 5. Now, we need to do the drawing part. We’ll use the pen blocks to do this. Go to the pen section, and drag out the pen down block, and place it into the forever loop, like this. Now run your code again.
<br> 6. This works, but there is no way to stop inking, clear the screen, or to change the color of the ink. Let’s work on clearing the screen first.
<br> 7. Drag out the clear block from the pen section. We want to clear the screen once the program has started, but before we start following the mouse and put the pen down, so put the clear block in between the when green flag clicked
block and the forever loop, like this. Now let’s test.
<br> 8. It worked! Now let’s work on only inking when the mouse is pressed down. For this we’ll use a conditional statement. A conditional statement allows you to execute certain code if a condition is met, like the mouse button being
pressed down.
<br> 9. Go to the control tab and look for the if *blank* else block, and drag it out. You probably have to scroll down a bit.
<br> 10. Go to the sensing tab, and look for the mouse down? block, and drag it out. This is a reporter block, meaning it doesn’t actually do anything, it just reports, or returns a value. In this example, it reports true if the mouse
is pressed, and false if it isn’t.
<br> 11. Put the mouse down block into the hexagonal space in the if block. Your code should look like this at this point.
<br> 12. Now, instead of the pen always being down, we only want it to be down when the mouse is clicked, so take the pen down block from the forever loop and put it into the top of conditional block.
<br> 13. This conditional won’t run unless we put it into the forever loop, so move it into to the forever loop, like so. Let’s test.
<br> 14. Hmm. It doesn’t seem to work as it should. This is because we never tell the pen to go up. Go to the pen tab, and drag out the pen up block. Put it underneath the clear block. Add another pen up block underneath the ‘else’
part of the conditional block. Let’s test again.
<br> 15. It still seems not to work properly. But this time, it’s not a problem with our code. On top of the scripting area, is the sprite settings. Uncheck the ‘draggable’ checkbox. Now let’s test again!
<br> 16. It’s working now! The reason it didn’t work on our last test, is that whenever you clicked and dragged, Snap thought you were trying to drag the sprite! Now, it won’t let you drag the sprite.
<br> 17. Congrats! You have a working drawing program! Try to figure out how to change the pen’s color, or make a completely new program.
</p>
</div>
<div class="col-9 gb-slate" id="ghs-snap-pad">
<iframe src="snap/index.html" id="ghs-snap"></iframe>
</div>
</div>
</div>
<!-- SCRIPTS-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<!-- This code takes you back to the welcome page after you are inactive for 30 seconds. -->
<script>
var inactivityTime = function() {
var time;
window.onload = resetTimer;
// DOM Events
document.onkeypress = resetTimer;
document.onclick = resetTimer;
document.onmousedown = resetTimer;
function logout() {
window.location.href = 'index.html';
}
function resetTimer() {
clearTimeout(time);
time = setTimeout(logout, 60000)
// 1000 milliseconds = 1 second
}
};
</script>
<!-- SCRIPTS END -->
</body>
</html>