-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathinstructions.html
93 lines (83 loc) · 3.13 KB
/
instructions.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
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
overflow: hidden;
margin: 0;
padding: 0;
height: 100%;
}
.button:hover {
opacity: 0.7;
}
.container {
width: 100%;
height: 100%;
position: relative;
display: flex; /* Add Flexbox */
align-items: center; /* Align children vertically center */
}
img {
width: 100%;
height: 100%;
position: absolute;
object-fit: cover;
}
.textbox {
width: 55vw;
height: 65vh;
left: 4%;
font-size: 1.2vw;
color: white;
margin-top: 80vh;
margin-bottom: 80vh;
border: 0.5vw solid #ccc;
border-radius: 5vw;
padding: 4vw;
box-sizing: border-box;
z-index: 3;
position: absolute;
background-color: rgba(0, 100, 0, 0.5);
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
button {
position: absolute;
z-index: 2;
width: 30.5%;
height: 12%;
top: 80%;
left: 80%;
margin-top: 2vh;
transform: translateX(-50%);
background-image: url('static/start.png');
background-size: cover;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div style="width: 100vw; height: 1vh; left: -1.5%; top: 5%; position: absolute; display: flex; justify-content: center; align-items: center; font-size: 5vw; text-align: center; color: white; text-shadow: 0.2vw -0.1vw 0.25vw #006400,0.2vw -0.1vw 0.25vw #006400; font-family: 'Bradley Hand', cursive; z-index: 2;">
Fauna Forest ---Introduction
</div>
<div class="container">
<img id="BackgroundImage" style="width: 100%; height: 100%; left: 0%; top: 0%; opacity: 50%; position: absolute" src="static/bgexample3.png" alt="Background Image" />
<img style="z-index: -1;" src="static/backgroundcolorgreen.png" alt="Background Color Green" />
<p class="textbox">
A decision tree is a simple algorithm that works like a flowchart, helping the computer make choices by asking questions and following different paths to reach an end.
<br><br>They start with a question or decision at the top, then branch out into different choices. Each choice leads to more questions until they reach the end. For example, if the answer to the question is yes, it follows the yes branch and vice versa if the answer is no.
<br><br>In the Fauna Forest game, you will come across incomplete decision trees that will represent this algorithm.
<br><br>Finish them to help the computer classify various animals correctly (like in the picture)!
</p>
<img style="z-index: 4; left: 62%; width: 35%; height: 60%;" src="static/decisionTreeEx.png" alt="Decision Tree Example" />
<img id="start" class="button" style="width: 27%; height: 10%; left: 50%; top: 86%; position: absolute; transform: translateX(-50%);" src="static/start.png" onclick="startLevel1();" alt="Start Button" />
</div>
<script>
function startLevel1() {
// Redirect to puzzle1.html on button click
window.location.href = 'puzzle1.html'; // Assuming the next page is puzzle1.html
}
</script>
</body>
</html>