-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
151 lines (143 loc) · 5.45 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/style.css">
<title>Student Performance</title>
</head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
<body>
<nav class="topnav">
<div class="search-bar">
<img src="/assets/img/search-rectangle.svg">
<input class="search-text" type="text" placeholder="search...">
<button class="search-button" type="submit"><img src="/assets/img/search-bar.svg"></button>
</div>
<div class="profile">
<div class="profile-picture">
<img src="/assets/img/Profile-picture.svg">
</div>
<div class="profile-name">
<h2 class="student-name">Teguh R</h2>
<h3 class="student-id">270904</h3>
</div>
</div>
</nav>
<div class="dashboard">
<section class="class">
<div class="class-header">
<h2>Class</h2>
<div class="contact-bar">
<div class="contact">
<img src="/assets/img/Vectorquestion-mark.svg" alt="contact-detail">
</div>
<div class="contact-detail">
<h3>Contact us below for help</h3>
<div class="whatsapp"><img src="/assets/img/whatsapp-background.svg"><img src="/assets/img/whatsapp.svg"><p>+60xxxxxxxxx</p></div>
<div class="facebook"><img src="/assets/img/facebook-bg.svg"><img src="/assets/img/facebook-icon.svg"><p>UUM Performance System</p></div>
<div class="twitter"><img src="/assets/img/twitter.svg"><p>@uumperformancesystem</p></div>
</div>
</div>
</div>
<ul class="class-list">
<li id="stat0">
<div>
<img src="/assets/img/statistic.svg" alt="Statistics for IT image" />
</div>
<h2>SCCT1093</h2>
<h3>Statistics for <br>IT</h3>
<h4>Group D</h4>
</li>
<li id="intro0">
<div>
<img src="/assets/img/data-integration.svg" alt="Introduction to Data Integration image" />
</div>
<h2>SCCT1093</h2>
<h3>Introduction to <br>Data Integration</h3>
<h4>Group D</h4>
</li>
<li id="stru0">
<div>
<img src="/assets/img/programming.svg" alt="Structured Programming image" />
</div>
<h2>SCCT1093</h2>
<h3>Structured <br>Programming</h3>
<h4>Group D</h4>
</li>
<li id="mach0">
<div>
<img src="/assets/img/data-learning.svg" alt="Machine Data Learning image" />
</div>
<h2>SCCT1093</h2>
<h3>Machine Data <br>Learning</h3>
<h4>Group D</h4>
</li>
</ul>
</section>
<section class="score-history">
<div id="stat" class="score-predicted">
<h1>Hi, Teguh</h1>
<h2>Your predicted score for Statistic for IT is</h2>
<p class="score">2.90</p>
<p class="score-explain">Your score is predicted from your historical data.<br> You need to improve your performance to get a<br> better score!</p>
</div>
<div id="intro" class="score-predicted">
<h1>Hi, Teguh</h1>
<h2>Your predicted score for Introduction to Data Integration</h2>
<p class="score">3.20</p>
<p class="score-explain">Your score is predicted from your historical data.<br> You need to improve your performance to get a<br> better score!</p>
</div>
<div id="stru" class="score-predicted">
<h1>Hi, Teguh</h1>
<h2>Your predicted score for Structured Programming</h2>
<p class="score">3.10</p>
<p class="score-explain">Your score is predicted from your historical data.<br> You need to improve your performance to get a<br> better score!</p>
</div>
<div id="mach" class="score-predicted">
<h1>Hi, Teguh</h1>
<h2>Your predicted score for Machine Data Learning</h2>
<p class="score">3.00</p>
<p class="score-explain">Your score is predicted from your historical data.<br> You need to improve your performance to get a<br> better score!</p>
</div>
<div id="chart" class="score-chart">
<canvas id="myChart" style="width:100%;max-width:700px"></canvas>
</div>
</section>
<script>
const stat0 = document.getElementById("stat0");
const intro0 = document.getElementById("intro0");
const stru0 = document.getElementById("stru0");
const mach0 = document.getElementById("mach0");
const stat = document.getElementById("stat");
const intro = document.getElementById("intro");
const stru = document.getElementById("stru");
const mach = document.getElementById("mach");
stat0.addEventListener("click", function onClick(event){
stat.style.display = "";
intro.style.display = "";
stru.style.display = "";
mach.style.display = "";
})
intro0.addEventListener("click", function onClick(event){
stat.style.display = "none";
intro.style.display = "block";
stru.style.display = "";
mach.style.display = "";
})
stru0.addEventListener("click", function onClick(event){
stat.style.display = "none";
intro.style.display = "";
stru.style.display = "block";
mach.style.display = "";
})
mach0.addEventListener("click", function onClick(event){
stat.style.display = "none";
intro.style.display = "";
stru.style.display = "";
mach.style.display = "block";
})
</script>
</body>
</html>