Assignment (Chained tasks 3-5 you should complete all tasks)
Create task 1 second update (expansion pack v1.2). Append your practice task 1 with these functions:
- Score System:
- create leaderboard for e.g. to display top 10-1000 players table;
- filter by some unique fields for e.g. achievment points, experience points, max level reached, enemies killed ect;
- Leaderboard Export:
- filter by some unique fields and export top score to output.html file;
- open output.html file to display information into web browser;
- style your top score output to output.html, more about html and css you will find here;
Example
“ZOMBIE WARS TOP 100” template output HTML + CSS format:
<!DOCTYPE html>
<html>
<head>
<style>
html{
background: url('https://image.ibb.co/cH625y/fonas.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
font-size: 30px;
font-weight: bold;
}
tr:nth-child(even) {
background-color: #dddddd;
opacity: 0.6;
}
tr:nth-child(odd) {
background-color: red;
opacity: 0.6;
}
</style>
</head>
<body>
<h1 align="center" style="color:white">ZOMBIE WARS TOP 100 SCOREBOARD</h2>
<table style="width:600px" align="center">
<tr>
<th>Player Name</th>
<th>Experience points</th>
<th>Zombies killed</th>
<th>Achievments points</th>
<th>Total Score</th>
</tr>
<tr>
<td>Fredy Kruger</td>
<td>12350</td>
<td>10</td>
<td>150</td>
<td>90</td>
</tr>
<tr>
<td>Vampire X</td>
<td>9350</td>
<td>7</td>
<td>100</td>
<td>70</td>
</tr>
<tr>
<td>Batman</td>
<td>7400</td>
<td>8</td>
<td>90</td>
<td>60</td>
</tr>
<tr>
<td>Fake Policeman</td>
<td>12350</td>
<td>2</td>
<td>78</td>
<td>59</td>
</tr>
<tr>
<td>Zombie</td>
<td>4000</td>
<td>1</td>
<td>20</td>
<td>8</td>
</tr>
<td>Fresh Butcher</td>
<td>3200</td>
<td>1</td>
<td>10</td>
<td>7</td>
</tr>
<td>Op Man</td>
<td>1800</td>
<td>1</td>
<td>7</td>
<td>5</td>
</tr>
</table>