Rozwiązanie arkusza E.14-01-15.01

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.

Baner

baner.jpg
Wskazówki i uwagi:
  1. Do wykonania obrazu najlepiej użyć programu do obróbki grafiki wektorowej Inkscape.
  2. Wymagane kodowanie ISO-8859-2 można sobie darować i tak nikt tego nie sprawdzi.

Strona główna

index.html 
<!DOCTYPE html>
<html>
 <head>
  <title>Strona główna</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <header>
<a href="index.html"><img src="baner.jpg" alt="baner"></a>
  </header>
  <nav>
<a href="strona1.html">- proste działania</a>
<a href="strona2.php">- potęgowanie</a>
  </nav>
  <main>
<p><i>Znajdujesz się na stronie o tematyce
 matematycznej.</i></p>
<p><i>Mój PESEL to: ......................</i></p>
  </main>
 </body>
</html>

Podstrona "Proste działania"

strona1.html
<!DOCTYPE html>
<html>
 <head>
  <title>PROSTE DZIAŁANIA</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <header>
<a href="index.html"><img src="baner.jpg" alt="baner"></a>
  </header>
  <nav>
<a href="strona1.html">- proste działania</a>
<a href="strona2.php">- potęgowanie</a>
  </nav>
  <main>
   <h1>PROSTE DZIAŁANIA</h1>
   <p><i>Podaj pierwszą liczbę:</i>
 <input type="number" id="i1"/></p>
   <p><i>Podaj drugą liczbę:</i>
 <input type="number" id="i2"/></p>
   <p>
 <button onclick="f(1)">DODAWANIE</button>
 <button onclick="f(2)">ODEJMOWANIE</button>
 <button onclick="f(3)">MNOŻENIE</button>
 <button onclick="f(4)">DZIELENIE</button>
   </p>
   <output id="o1"></output>
  </main>
  <script>
function f(x) {
var a=parseInt(i1.value)
var b=parseInt(i2.value)
var w
 if (isNaN(a) || isNaN(b)) {
 w = "Proszę uzupełnić obie liczby"
 }
 else if(x==4 && b==0) {
 w = "Nie wolno dzielić przez zero"
 }
 else { 
  if (x==1) w=a+b
  else if(x==2) w=a-b
  else if(x==3) w=a*b
  else if(x==4 && b!=0) w=a/b
  w="Wynik działania wynosi: "+w
 }
o1.value=w
}   
  </script>
 </body>
</html> 

Podstrona "Potęgowanie"

strona2.php
<!DOCTYPE html>
<html>
 <head>
  <title>POTĘGOWANIE</title>
  <meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
 <body>
<header>
<a href="index.html"><img src="baner.jpg" alt="baner"></a>
  </header>
  <nav>
<a href="strona1.html">- proste działania</a>
<a href="strona2.php">- potęgowanie</a>
  </nav>
  <main>
<h1>POTĘGOWANIE</h1>
  <form method="post" action="strona2.php">
<i>Podaj podstawę potęgi:</i>
 <input type="number" name="liczba1" /><br/>
<i>Podaj dodatni, całkowity wykładnik potęgi:</i>
 <input type="number" name="liczba2" /><br/>
<input type="submit" value="POTĘGOWANIE" name="oblicz"/>
</form>
<?php
if (empty($_POST['liczba1']) || (empty($_POST['liczba2'])
 && $_POST['liczba2']!=0)) {
    echo "Wpisz podstawę i wykładnik potęgi";
}
else {
 if ($_POST['liczba2']>=0) {    
 echo "Wynik działania wynosi: ";
 echo pow($_POST['liczba1'], $_POST['liczba2']);
 }
 else {
 echo "Wykładnik potęgi musi być dodatni";
 }
}  
?>
</main>
</body>
</html>

Styl witryny

style.css
body {
margin: 10px auto;
width: 800px;
}
nav , main {
float: left;
}
nav{
width: 25%;
}
main {
width: 75%;
}
p, nav  a {
margin: 10px;
}
a {
display: block;
}

Wskazówki i uwagi:
  1. Do napisania kodu najlepiej użyć edytora formatującego składnię Notepad++.
  2. Rozwiązanie należy traktować jako przykładowe, zgodne z zasadami oceniania, niestety z zasadami  matematyki nie ma ono wiele wspólnego.

Zadania


  1.  Wykorzystując zamieszczone kody i plik obrazu utwórz witrynę.
  2. Sprawdź poprawność rozwiązania wykorzystując Kryteria oceny E.14-01-15.01.