Przykładowe rozwiązanie zadania egzaminacyjnego
Prościej się nie data zasada obowiązuje przy rozwiązywaniu zadań egzaminacyjnych. Jej konsekwencją jest oszczędność czasu i zmniejszenie ryzyka popełnienia błędów.
Grafika
haslo.png |
- Do wykonania obrazu najlepiej użyć programu do obróbki grafiki wektorowej Inkscape.
- W zadaniu jest błąd - nie podano jednostek dla rozmiaru czcionki i należy dobrać wielkość fontu "na oko".
Witryna internetowa
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Miernik jakości hasła</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1><a href="index.html">Sprawdź swoje hasło</a></h1>
</header>
<nav>
<h2>Wybierz</h2>
<ol>
<li><a href="haslo.html">Sprawdź hasło</a></li>
<li><a href="zasady.html">Zasady tworzenia hasła</a></li>
</ol>
</nav>
<main>
<img src="haslo.png" alt="obraz haslo" />
</main>
<footer>
<h3>Miernik jakości hasła</h3>
<p>Stronę opracował: 00000000003</p>
</footer>
</body>
</html>
zasady.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Miernik jakości hasła</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1><a href="index.html">Sprawdź swoje hasło</a></h1>
</header>
<nav>
<h2>Wybierz</h2>
<ol>
<li><a href="haslo.html">Sprawdź hasło</a></li>
<li><a href="zasady.html">Zasady tworzenia hasła</a></li>
</ol>
</nav>
<main>
<table>
<tr>
<th>Jakość hasła</th>
<th>Opis</th>
</tr>
<tr>
<td>dobre</td>
<td>długość 7 znaków i więcej, zawiera przynajmniej jedną cyfrę</td>
</tr>
<tr>
<td>średnie</td>
<td>długość 4 do 6 znaków, zawiera przynajmniej jedną cyfrę</td>
</tr>
<tr>
<td>słabe</td>
<td>inne przypadki</td>
</tr>
</table>
</main>
<footer>
<h3>Miernik jakości hasła</h3>
<p>Stronę opracował: 00000000003</p>
</footer>
</body>
</html>
haslo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Miernik jakości hasła</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1><a href="index.html">Sprawdź swoje hasło</a></h1>
</header>
<nav>
<h2>Wybierz</h2>
<ol>
<li><a href="haslo.html">Sprawdź hasło</a></li>
<li><a href="zasady.html">Zasady tworzenia hasła</a></li>
</ol>
</nav>
<main>
<p>Twoje hasło
<input type="password" id="input1">
<input type="button" value="sprawdź" onclick="f()">
</p>
<p id="p1"></p>
</main>
<footer>
<h3>Miernik jakości hasła</h3>
<p>Stronę opracował: 00000000003</p>
</footer>
<script>
function f(){
var x = input1.value
if(x==""){
p1.style.color="red"
p1.innerHTML="WPISZ HASŁO"
}
else if(x.search("[0-9]")>=0 && x.length>6){
p1.style.color="green"
p1.innerHTML="DOBRE"
}
else if(x.search("[0-9]")>=0 && x.length>=4 && x.length<=6){
p1.style.color="blue"
p1.innerHTML="ŚREDNIE"
}
else {
p1.style.color="yellow"
p1.innerHTML="SŁABE"
}
}
</script>
</body>
</html>
styl.css
header {
background: #829EB9;
height: 50px;
font-family: Arial;
text-align: center;
}
nav {
background: #B3C6D9;
height: 600px;
width: 25%;
float: left;
}
main {
background: #E0E9F1;
height: 600px;
width: 75%;
text-align: center;
float: left
}
footer {
background: #829EB9;
font-family: Arial;
text-align: right;
clear: both;
}
img{
margin: 30px;
padding: 10px;
border: 2px dotted #B3C6D9;
}
table {
margin: 30px;
border: 2px solid;
width: 70%;
}
td, th {
border: 2px solid;
}
th {
background: #B3C6D9;
}
tr:hover * {
background: blue;
color: white;
}
p {
margin: 30px;
}
Wskazówki i uwagi:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Miernik jakości hasła</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1><a href="index.html">Sprawdź swoje hasło</a></h1>
</header>
<nav>
<h2>Wybierz</h2>
<ol>
<li><a href="haslo.html">Sprawdź hasło</a></li>
<li><a href="zasady.html">Zasady tworzenia hasła</a></li>
</ol>
</nav>
<main>
<img src="haslo.png" alt="obraz haslo" />
</main>
<footer>
<h3>Miernik jakości hasła</h3>
<p>Stronę opracował: 00000000003</p>
</footer>
</body>
</html>
zasady.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Miernik jakości hasła</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1><a href="index.html">Sprawdź swoje hasło</a></h1>
</header>
<nav>
<h2>Wybierz</h2>
<ol>
<li><a href="haslo.html">Sprawdź hasło</a></li>
<li><a href="zasady.html">Zasady tworzenia hasła</a></li>
</ol>
</nav>
<main>
<table>
<tr>
<th>Jakość hasła</th>
<th>Opis</th>
</tr>
<tr>
<td>dobre</td>
<td>długość 7 znaków i więcej, zawiera przynajmniej jedną cyfrę</td>
</tr>
<tr>
<td>średnie</td>
<td>długość 4 do 6 znaków, zawiera przynajmniej jedną cyfrę</td>
</tr>
<tr>
<td>słabe</td>
<td>inne przypadki</td>
</tr>
</table>
</main>
<footer>
<h3>Miernik jakości hasła</h3>
<p>Stronę opracował: 00000000003</p>
</footer>
</body>
</html>
haslo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Miernik jakości hasła</title>
<link rel="stylesheet" href="styl.css">
</head>
<body>
<header>
<h1><a href="index.html">Sprawdź swoje hasło</a></h1>
</header>
<nav>
<h2>Wybierz</h2>
<ol>
<li><a href="haslo.html">Sprawdź hasło</a></li>
<li><a href="zasady.html">Zasady tworzenia hasła</a></li>
</ol>
</nav>
<main>
<p>Twoje hasło
<input type="password" id="input1">
<input type="button" value="sprawdź" onclick="f()">
</p>
<p id="p1"></p>
</main>
<footer>
<h3>Miernik jakości hasła</h3>
<p>Stronę opracował: 00000000003</p>
</footer>
<script>
function f(){
var x = input1.value
if(x==""){
p1.style.color="red"
p1.innerHTML="WPISZ HASŁO"
}
else if(x.search("[0-9]")>=0 && x.length>6){
p1.style.color="green"
p1.innerHTML="DOBRE"
}
else if(x.search("[0-9]")>=0 && x.length>=4 && x.length<=6){
p1.style.color="blue"
p1.innerHTML="ŚREDNIE"
}
else {
p1.style.color="yellow"
p1.innerHTML="SŁABE"
}
}
</script>
</body>
</html>
styl.css
header {
background: #829EB9;
height: 50px;
font-family: Arial;
text-align: center;
}
nav {
background: #B3C6D9;
height: 600px;
width: 25%;
float: left;
}
main {
background: #E0E9F1;
height: 600px;
width: 75%;
text-align: center;
float: left
}
footer {
background: #829EB9;
font-family: Arial;
text-align: right;
clear: both;
}
img{
margin: 30px;
padding: 10px;
border: 2px dotted #B3C6D9;
}
table {
margin: 30px;
border: 2px solid;
width: 70%;
}
td, th {
border: 2px solid;
}
th {
background: #B3C6D9;
}
tr:hover * {
background: blue;
color: white;
}
p {
margin: 30px;
}
Wskazówki i uwagi:
- Do napisania kodu najlepiej użyć edytora formatującego składnie Notepad++.
- Rozwiązanie należy traktować jako przykładowe zgodne z zasadami oceniania.