TestAssignment/index.html at master · Niam-Sword/TestAssignment · GitHub

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
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
<!DOCTYPE html>
<html>
<!-- The following code has been developed by students and/or researchers of the Freshman Research Initiative DIY Diagnostics 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 DIY 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

Research Educator:
Timothy Riedel
triedel@utexas.edu

Brief Description of Goal of Code:
Generate an app to guide the user through a test assignment.

Known Issues:
None
-->

<!--Header displays app title at the top of the page.-->

   <head>
      <title>Test Assignment</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>


<script>

</script>


<!--Allows for multiple mini pages to be displayed within the single overall app, and describes the format.-->
<style>
.body {
     margin: 0em;
}

.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>


<!--Describes the content of the pages within the app.-->
<body>
<div id="header" class="w3-container w3-flat-carrot">
	<h1>Test Assignment</h1>
</div>

<!--This represents the home page and contains a description of the app and its purpose.-->

<div id="content" class="w3-container" id="home">
	<center><p>Welcome to your first assignment! The goal of this assignment is to [...] Navigate to any step of this assignment using the page directory in the footer. Ready?</p>

	<!--The following button takes the user to the beginning of the assignment.-->
	<a href="#rubric" class="w3-btn w3-grey w3-round">Get Started</a>
	</center>


<!--This represents the preliminary subpage and contains the assignment rubric.-->

<div class="page" id="rubric">

	<!--Rubric.-->

	<div id="header" class="w3-container w3-flat-carrot">
		<h1>Rubric</h1>
	</div>

    	<div id="content" class="w3-container">
        <p>Your assignment will be graded on the following criteria.</p>

		<!--The following two buttons take the user to the previous page or the next page.-->
		<center>
		      <a href="#home" class="w3-btn w3-black">Home</a>
         	<a href="#one"  class="w3-btn w3-black">Next</a>
		</center>
    	</div>


</div>

<!--This represents the first subpage and contains the first assignment step.-->

<div class="page" id="one">

	<!--Step 1.-->

	<div id="header" class="w3-container w3-flat-carrot">
		<h1>Step 1</h1>
	</div>

    	<div id="content" class="w3-container">
        <p>To begin this assignment, you must first [...]</p>

		<!--The following two buttons take the user to the previous page or the next page.-->
		<center>
		<a href="#rubric" class="w3-btn w3-black">Rubric</a>
		<a href="#home"	class="w3-btn w3-black">Home</a>
         	<a href="#two"  class="w3-btn w3-black">Next</a>
		</center>
    	</div>


</div>

<!--This represents the second page and contains the second assignment step.-->

<div class="page" id="two">

	<!--Step 2.-->

	<div class="w3-container w3-flat-carrot">
		<h1>Step 2</h1>
	</div>

	<div id="content" class="w3-container">
	<p>The next step of this assignment is to [...]</p>

		<!--The following buttons take the user to the previous page or the next page.-->
		<center>
		      <a href="#one"    class="w3-btn w3-black">Previous</a>
          <a href="#home"   class="w3-btn w3-black">Home</a>
         	<a href="#three"  class="w3-btn w3-black">Next</a>
		</center>
	</div>
</div>

<!--This represents the third page and contains the third assignment step.-->

<div class="page" id="three">

	<!--Step 3.-->

	<div class="w3-container w3-flat-carrot">
		<h1>Step 3</h1>
	</div>

	<div id="content" class="w3-container">
	<p>The third step of this assignment is to [...]</p>

		<!--The following buttons take the user to the previous page or the next page.-->
		<center>
		      <a href="#two"   class="w3-btn w3-black">Previous</a>
          <a href="#home"  class="w3-btn w3-black">Home</a>
         	<a href="#four"  class="w3-btn w3-black">Next</a>
		</center>
	</div>
</div>

<!--This represents the fourth page and contains the fourth assignment step.-->

<div class="page" id="four">

	<!--Step 4.-->

	<div class="w3-container w3-flat-carrot">
		<h1>Step 4</h1>
	</div>

	<div id="content" class="w3-container">
	<p>The fourth step of this assignment is to [...]</p>

		<!--The following buttons take the user to the previous page or the final page.-->
		<center>
		      <a href="#three"  class="w3-btn w3-black">Previous</a>
          <a href="#home"   class="w3-btn w3-black">Home</a>
         	<a href="#five"   class="w3-btn w3-black">Next</a>
		</center>
	</div>
</div>

<!--This represents the fifth page and contains the fifth assignment step.-->

<div class="page" id="five">

	<!--Step 5.-->

	<div class="w3-container w3-flat-carrot">
		<h1>Step 5</h1>
	</div>

	<div id="content" class="w3-container">
	<p>The final step of this assignment is to [...]</p>

		<!--The following buttons take the user to the previous page or the final page.-->
		<center>
		      <a href="#four" class="w3-btn w3-black">Previous</a>
          <a href="#home" class="w3-btn w3-black">Home</a>
         	<a href="#six"  class="w3-btn w3-black">Next</a>
		</center>
	</div>
</div>

<!--This represents the sixth page and contains the final assignment step.-->

<div class="page" id="six">

	<!--Final Page.-->

	<div class="w3-container w3-flat-carrot">
		<h1>Good work.</h1>
	</div>

	<div id="content" class="w3-container">
	<center><p>Congratulations! You have just completed your first DIY assignment. Make sure you have [...] Review the rubric at any time using the page directory below, and be sure to submit your assignment [...]</p>

		<!--The following buttons take the user to the previous page or the home page.-->
		      <a href="#five"   class="w3-btn w3-black">Previous</a>
         	<a href="#home"   class="w3-btn w3-black">Home</a>
		<a href="#rubric"	class="w3-btn w3-black">Rubric</a>
		</center>
	</div>
</div>


<footer class="w3-bottom w3-container w3-flat-carrot">
	<center><p>DIY! Go to page:
		<a href="#home">Home</a>
		<a href="#rubric">Rubric</a>
		<a href="#one">1</a>
		<a href="#two">2</a>
		<a href="#three">3</a>
		<a href="#four">4</a>
		<a href="#five">5</a>
		<a href="#six">End</a>
		</p></center>
</footer>

</body>
</html>