-
Notifications
You must be signed in to change notification settings - Fork 0
/
form_assignment.html
249 lines (216 loc) · 11.9 KB
/
form_assignment.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Edit your account</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap/css/custom.css">
</head>
<body>
<div>
<!--header section-->
<!---- <header class="container"> -->
<header>
<div class="collapse bgcol" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-blue" style="text-decoration: underline;">About the Marks Calculator</h4>
<p class="text-muted">
This Marks Calculator is used to calculate the Final Exam mark of a student.
It takes in input of two test marks - test Mark 1 and test Mark 2, compares them and
gets the best done of the two. A coursework mark out of 100 is input, that is added to
the <strong>best test Mark</strong> and an <strong>average</strong> of the two
calculated, then converted to <strong>40%</strong>. This gives the general
<strong>Coursework Mark</strong>. Then an exam mark out of 100 is input, converted to
<strong>60%</strong> and then added to the general Course Work Mark. This gives the
<strong>Final Exam mark </strong>for the student.
</p>
<a href="javascript:window.location.reload(true)" style="text-decoration: none">
<h3>Home</h3>
</a>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-blue">Contact Me</h4>
<ul class="list-unstyled">
<li><a href="https://twitter.com/akonya_john" class="text-teal" target="_blank">Follow me on Twitter</a></li>
<li><a href="https://www.facebook.com/akonya.john.9" class="text-teal"
target="_blank">Like me on Facebook</a></li>
<li><a href="#" class="text-teal">Email me</a></li>
</ul>
</div>
</div>
</div>
</div>
<!--main nav-->
<div class="navbar navbar-dark mynav shadow-sm">
<div class="container d-flex justify-content-between">
<a href="" class="navbar-brand d-flex align-items-center">
<img src="images/form.png" width="20" height="20" alt="smart parking icon" ill="none"
stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
aria-hidden="true" class="mr-2" viewBox="0 0 24 24" focusable="false">
<strong>Marks Calculator</strong>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader"
aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</div>
</header>
<p>
<h3 style="text-align: center; text-decoration: underline; color: teal;">Please enter your test marks,
coursework mark and exam mark here below !</h3>
</p><br>
<!-- different forms here-->
<div class="container">
<div class="row">
<!--marks div-->
<div class="col-6 col-md-4">
<form class="form-signin">
<div class="text-center mb-4">
<img class="mb-4" src="images/utests.png" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Test Marks</h1>
<p>Enter your <code style="color: blue;">test marks</code> here. </p>
</div>
<div class="form-row">
<div class="col">
<!-- <input type="text" class="form-control" placeholder="First name"> -->
<div class="form-label-group">
<input type="text" name="name" id="inputMark1" class="form-control"
placeholder="Test Mark" required autofocus>
<label for="inputMark">Mark 1</label>
</div>
</div>
<div class="col">
<!-- <input type="text" class="form-control" placeholder="Last name"> -->
<div class="form-label-group">
<input type="text" name="name" id="inputMark2" class="form-control"
placeholder="Test Mark" required autofocus>
<label for="inputMark">Mark 2</label>
</div>
</div>
</div>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Confirm test marks
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" value="submit" type="button"
onclick="testMark()">submit</button>
</form>
</div>
<!-- enf of the test marks-->
<!--course mark div-->
<div class="col-6 col-md-4">
<form class="form-signin">
<div class="text-center mb-4">
<img class="mb-4" src="images/coursework.png" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Coursework</h1>
<p>Enter your <code style="color: blue;">coursework mark</code> here. </p>
</div>
<div class="form-label-group">
<input type="text" id="courseworkMark" class="form-control" placeholder="Course work"
required autofocus>
<label for="inputCourseWork">Coursework mark</label>
</div>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Confirm coursework
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" value="submit" type="button"
onclick="courseWork()">submit</button>
</form>
</div>
<!--exam amrk div-->
<div class="col-6 col-md-4">
<form class="form-signin">
<div class="text-center mb-4">
<img class="mb-4" src="images/exam.png" alt="" width="72" height="72">
<h1 class="h3 mb-3 font-weight-normal">Exam Mark</h1>
<p>Enter your <code style="color: blue;">Exam mark</code> here. </p>
</div>
<div class="form-label-group">
<input type="mark" id="examMark" class="form-control" placeholder="Exam Mark" required
autofocus>
<label for="inputExamMark">Exam mark</label>
</div>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me"> Confirm exam mark
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" value="submit" type="button"
onclick="examMarkScore()">submit</button>
</form>
</div>
</div>
</div>
<!-- different forms-->
</div> <br>
<!-- show results here, for highest test mark, computed coursweork and final exam mark-->
<footer>
<h5 style="color: teal; text-align: center;">Results shall go here</h5>
</footer>
<!-- script for the test marks ----------------------------------------->
<script>
function testMark() {
// var textValue = document.getElementById('inputMark')
var test1 = document.getElementById('inputMark1')
var test2 = document.getElementById('inputMark2')
if ((test1.value == '') && (test2.value == '')) {
alert('Please input in your marks for test1 and test2 results to proceed!')
// return false
} else if((test1.value != '') && (test2.value == '')){
alert('Ooops, you are missing marks for test2! input both to proceed!')
}else if((test1.value == '') && (test2.value != '')){
alert('Ooops, you are missing marks for test1! input both to proceed!')
}
else if((test1.value != '') && (test2.value != '')){
if(test1.value > test2.value){
alert('Your high score from the test marks is : ' + test1.value)
}else{
alert('Your high score from the test marks is : ' + test2.value)
}
}
}
</script>
<!-- end of script for the test marks ---------------------------------------->
<!-- script for the coursework marks ----------------------------------------->
<script>
function courseWork() {
var cosworkMark = document.getElementById('courseworkMark')
if (cosworkMark.value == '') {
alert('Please enter in your coursework mark to proceed!')
} else if(cosworkMark.value != ''){
alert('Your Couserwork mark is ' + cosworkMark.value + ' and has been entered successfuly.')
}
}
</script>
<!-- end of script for the coursework marks ---------------------------------->
<!-- script for the coursework marks ----------------------------------------->
<script>
function examMarkScore() {
var exMark = document.getElementById('examMark')
if (exMark.value == '') {
alert('Please enter in your exam mark to proceed!')
} else if(exMark.value != ''){
alert('Your exam mark is ' + exMark.value + ' and has been entered successfuly.')
}
}
</script>
<!-- end of script for the coursework marks ---------------------------------->
<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>
</body>
</html>