Rozwiązanie arkusza E.14-01-16.08

Przykładowe rozwiązanie zadania egzaminacyjnego

Prościej się nie da

ta 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
Wskazówki i uwagi:
  1. Do wykonania obrazu najlepiej użyć programu do obróbki grafiki wektorowej Inkscape.
  2. 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:
  1. Do napisania kodu najlepiej użyć edytora formatującego składnie Notepad++.
  2. Rozwiązanie należy traktować jako przykładowe zgodne z zasadami oceniania.

Zadania

  1. Sprawdź poprawność rozwiązania wykorzystując Kryteria oceny E.14-01-16.08.
  2. Rozwiąż analogiczny arkusz E.14-02-16.08.