Rozwiązanie arkusza E.14-15.08-10

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.

Grafiki

kolo.png
kwadrat.png
Wskazówki i uwagi:
  • Do wykonania obrazu najlepiej użyć programu do obróbki grafiki wektorowej Inkscape.

Witryna

plik index.html
<!DOCTYPE html>
<html>
 <head>
  <title>Strona główna</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <style>
span img {
position: absolute;
top: 200px;
display: none;
} 
span:hover img {
display: inline;
}
  </style>
 </head>
 <body>
  <header>
<a href="index.html">Figury Geometryczne i Matematycy</a>
  </header>
  <nav>
<h3>WYBIERZ FIGURĘ</h3>
<ol>
<li><a href="kwadrat.html">KWADRAT</a>
<ul>
<li>Obwód</li>
<li>Pole</li>
</ul>
</li>
<li><a href="kolo.html">KOŁO</a>
<ul>
<li>Obwód</li>
<li>Pole</li>
</ul>
</li>
</ol>
<h3>
<a href="baza/matematycy.accdb">BAZA DANYCH</a></h3>
</nav>
  <main>
   <h1>FIGURY GEOMETRYCZNE</h1>
<span>KWADRAT <img src=grafika/kwadrat.png alt="kwadrat"></span>
<span>KOŁO <img src=grafika/kolo.png alt="koło"></span>
  </main>
  <footer>
Strona stworzona przez: PESEL
  </footer> 
 </body>
</html>

plik kolo.html
<!DOCTYPE html>
<html>
 <head>
  <title>Koło</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <header>
<a href="index.html">FIGURY GEOMETRYCZNE I MATEMATYCY</a>
  </header>
  <nav>
<h3>WYBIERZ FIGURĘ</h3>
<ol>
<li><a href="kwadrat.html">KWADRAT</a>
<ul>
<li>Obwód</li>
<li>Pole</li>
</ul>
</li>
<li><a href="kolo.html">KOŁO</a>
<ul>
<li>Obwód</li>
<li>Pole</li>
</ul>
</li>
</ol>
<h3><a href="../baza/matematycy.accdb">BAZA DANYCH</a></h3>
  </nav>
  <main>
<i>Podstrona w trakcie budowy</i>
  </main>
  <footer>
Strona stworzona przez: PESEL
  </footer> 
 </body>
</html>

plik kolo.html
<!DOCTYPE html>
<html>
 <head>
  <title>Kwadrat</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <header>
<a href="index.html">FIGURY GEOMETRYCZNE I MATEMATYCY</a>
  </header>
  <nav>
<h3>WYBIERZ FIGURĘ</h3>
<ol>
<li><a href="kwadrat.html">KWADRAT</a>
<ul>
<li>Obwód</li>
<li>Pole</li>
</ul>
</li>
<li><a href="kolo.html">KOŁO</a>
<ul>
<li>Obwód</li>
<li>Pole</li>
</ul>
</li>
</ol>
<h3><a href="../baza/matematycy.accdb">BAZA DANYCH</a></h3>
  </nav>
  <main>
<h1>KWADRAT</h1>
<p><i>Podaj długość boku</i> <input id="input1" type="number"></p>
<p><button onclick="p()">licz pole</button> <button onclick="obw()">licz obwód</button></p>
<output id="output1"></output>
  </main>
  <footer>
Strona stworzona przez: PESEL
  </footer>
<script>
function p() {
 if (input1.value=="" || (typeof input1.value*1)=="") {
 alert("Należy wpisać wartość liczbową")
 }
 else {
 output1.innerHTML="P = a<sup>2</sup>= "+(input1.value*input1.value)
 }
}
function obw() {
 if (input1.value=="" || (typeof input1.value*1)=="") {
 alert("Należy wpisać wartość liczbową")
 }
 else {
 output1.innerHTML="Obw = 4a = "+(4*input1.value)
 }
}
</script>
 </body>
</html>

plik style.css
nav {
width: 20%;
height: 500px;
}
main {
width: 80%;
}
header, nav, footer {
background: #63b03c;
color: white;
}
header a, nav a, footer a {
color: white;
}
header {
font: small-caps 300% Arial;
}
header, footer {
text-align: center;
}
ul {
list-style-type: square;
}
nav, main {
float: left;
}
footer {
clear: left;
}

Wskazówki i uwagi:

  • Do napisania kodu najlepiej użyć edytora formatującego składnię Notepad++.
  • Rozwiązanie należy traktować jako przykładowe, zgodne z zasadami oceniania CKE.

Baza danych

Plik matematycy.(z odpowiednim do wersji programu rozszerzeniem) jest dostępny w sieciach społecznościowych.