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.
Baner
baner.jpg |
- Do wykonania obrazu najlepiej użyć programu do obróbki grafiki wektorowej Inkscape.
- 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.cssbody {
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:
- Do napisania kodu najlepiej użyć edytora formatującego składnię Notepad++.
- Rozwiązanie należy traktować jako przykładowe, zgodne z zasadami oceniania, niestety z zasadami matematyki nie ma ono wiele wspólnego.