-
Notifications
You must be signed in to change notification settings - Fork 44
/
Copy pathindex.html
209 lines (146 loc) · 5.77 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
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
<!DOCTYPE html>
<html>
<!--The following code has been developed by students and/or researchers of the Freshman Research Initiative Maker Space Stream at The University of Texas at Austin. This code is shared for demonstration purposes and should not be considered a product -- it is for entertainment purposes only.
Any user of this code does so at their own risk. Members of the Maker Space Stream, FRI, and The University of Texas system are not liable for anything related to this code.
THIS CODE SHOULD NOT BE USED TO DIAGNOSE ANY KIND OF MEDICAL CONDITION.
Authors in chronological order of contribution:
Tim Riedel
Niam Kuttanna
[...]
Further Information:
http://cns.utexas.edu/fri
Brief summary of this code: [...]
Known issues: [...]
https://www.w3schools.com/w3css/default.asp
https://stackoverflow.com/questions/8211128/multiple-distinct-pages-in-one-html-file
-->
<!--Formatting source information and webpage title.-->
<head>
<title>APP NAME GOES HERE</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="w3-colors-flat.css">
</head>
<!--Javascript code.-->
<script>
var exampleVariable1 = 0;
var exampleVariable2 = 0;
var exampleVariable3 = 0;
function exampleFunction1()
{
// Assigns values to existing variables based on user input. The parseFloat() function converts string values to numerical values.
exampleVariable1 = parseFloat(document.getElementById("firstInputBox").value);
exampleVariable2 = parseFloat(document.getElementById("secondInputBox").value);
exampleVariable3 = exampleVariable1 + exampleVariable2;
alert("You just ran an addition function!");
console.log("Addition function was run.");
}
function exampleFunction2()
{
exampleVariable1 = parseFloat(document.getElementById("firstInputBox").value);
exampleVariable2 = parseFloat(document.getElementById("secondInputBox").value);
exampleVariable3 = exampleVariable1 * exampleVariable2;
alert("You just ran a multiplication function!");
console.log("Multiplication function was run.");
}
function exampleFunction3()
{
exampleVariable1 = parseFloat(document.getElementById("firstInputBox").value);
exampleVariable2 = parseFloat(document.getElementById("secondInputBox").value);
exampleVariable3 = exampleVariable1 ** exampleVariable2;
alert("You just ran an exponent function!");
console.log("Exponent function was run.");
}
function exampleResultsFunction()
{
document.getElementById("endResults").innerHTML = "Your final result is: " + exampleVariable3;
resetVariables();
}
function resetVariables()
{
exampleVariable1 = 0;
exampleVariable2 = 0;
exampleVariable3 = 0;
}
</script>
<!--CSS webpage style/format settings.-->
<style>
.body {
margin: 0 auto;
}
.page {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: -100vw;
overflow-y: auto;
z-index: 0;
background-color: hsl(0,0%,100%);
}
.page:target {
left: 0vw;
z-index: 1;
}
</style>
<!--Main HTML body section.-->
<body>
<!--Landing page content.-->
<div id="content" class="w3-container">
<!--Header!-->
<div id="header" class="w3-container w3-flat-carrot">
<h1>APP NAME GOES HERE</h1>
</div>
<p>INTRODUCTION/DESCRIPTION OF APP GOES HERE</p>
<a href="#one" class="w3-btn w3-grey w3-round">Get Started!</a>
<p>The following code has been developed by students and/or researchers of the Freshman Research Initiative Maker Space Stream at The University of Texas at Austin. This code is shared for demonstration purposes and should not be considered a product -- it is for entertainment purposes only. Any user of this code does so at their own risk. Members of the Maker Space Stream, FRI, and The University of Texas system are not liable for anything related to this code. THIS CODE SHOULD NOT BE USED TO DIAGNOSE ANY KIND OF MEDICAL CONDITION!</p>
<!--FIRST SUBPAGE-->
<div id="one" class="page">
<div id="header2" class="w3-container w3-flat-carrot">
<h1>Question 1</h1>
</div>
<center>
<div id="content2" class="w3-container">
<p>QUESTION 1 GOES HERE</p>
</div>
<!--Form element. This allows for user input in HTML.-->
<form>
<!--Label for first input field.-->
<label for="firstInputBox">Enter a number:</label><br>
<!--User input box.-->
<input type="number" id="firstInputBox" value="0"><br>
<!--Label for second input field.-->
<label for="secondInputBox">Enter another number:</label><br>
<!--User input box.-->
<input type="number" id="secondInputBox" value="0">
<br><br><br>
</form>
<a href="#finalpage" onclick="exampleFunction1();" class="w3-btn w3-grey">Button 1</a>
<a href="#finalpage" onclick="exampleFunction2();" class="w3-btn w3-grey">Button 2</a>
<a href="#finalpage" onclick="exampleFunction3();" class="w3-btn w3-grey">Button 3</a>
</center>
</div>
<!--LAST SUBPAGE-->
<div id="finalpage" class="page">
<div id="finalheader" class="w3-container w3-flat-carrot">
<h1>FINAL PAGE TITLE GOES HERE</h1>
</div>
<center>
<div id="finalcontent" class="w3-container">
<p id="endResults">FINAL PAGE CONTENT GOES HERE</p>
</div>
<a class="w3-btn w3-black" onclick="exampleResultsFunction();">Click me!
<br>
<img id="resultsButtonImg" src="https://i.imgur.com/rZOaHhx.png" width="30" alt="spongebob">
</a>
<a href="#content" onclick="resetVariables();" class="w3-btn w3-black">Return to Home Page</a>
</center>
</div>
<!--Footer!-->
<footer class="w3-bottom w3-container w3-flat-carrot">
<p>YOUR NAME (or anything you want) HERE</p>
</footer>
</div>
</body>
</html>