formularze w php – testy, dyktanda i inne pomoce

Transkrypt

VIII Konferencja Informatyka w Edukacji, Toruń, 5-6 lipca 2011
FORMULARZE W PHP – TESTY, DYKTANDA I INNE
POMOCE DYDAKTYCZNE
Borowiecka Agnieszka
Ośrodek Edukacji Informatycznej i Zastosowań Komputerów w Warszawie
02-026 Warszawa, ul. Raszyńska 8/10
[email protected]; http://agn.oeiizk.waw.pl
The Internet is a common medium among youngsters therefore it is advisable to use it during lessons.
Interactive web pages with forms can be important educational element. PHP language can be used
to create simple teaching aids like forms with quizzes, automatically checked spelling exercises or
word-guess puzzles.
1.
Wstęp
Działania interaktywne, a szczególnie róŜnego typu aktywności z wykorzystaniem technologii informacyjno-komunikacyjnej, stanowią waŜną część kaŜdej lekcji. Do przygotowania prostych testów, zagadek czy dyktand moŜemy wykorzystać formularze na stronie WWW. Do automatyzacji tworzenia bardziej rozbudowanych formularzy, a przede wszystkim do ich obsługi warto uŜyć skryptów PHP. Gotowe
strony z zadaniami dla uczniów moŜna następnie wykorzystać na lekcji lub udostępnić w sieci Internet
jako ćwiczenia domowe czy powtórzeniowe.
Pracę rozpoczynamy zwykle od przygotowania czystego kodu HTML generującego formularz i przechwycenia odpowiednim skryptem danych wprowadzonych do niego przez uŜytkownika. Nieco trudniejszym zadaniem jest odpowiednie „obsłuŜenie” formularza – nie tylko zapamiętanie wyników, ale i ich
analiza, wskazanie błędnych i poprawnych odpowiedzi. Jeśli często wykorzystujemy róŜne testy i zadania
umieszczane na stronach WWW powinniśmy przygotować proste skrypty i funkcje, dzięki którym utworzenie kolejnego ćwiczenia dla uczniów stanie się mało pracochłonne.
2.
Tworzenie testów
Formularze naleŜą do standardu HTML i są obsługiwane przez niemal wszystkie przeglądarki. Tworzymy je za pomocą znaczników <form> </form>. W nagłówku tworzonego formularza podajemy metodę przesyłania danych do skryptu, który je przetworzy (atrybut method), oraz adres URL, pod który
naleŜy przesłać zawartość pól formularza (atrybut action). Atrybut method moŜe przyjmować jedną
z dwóch wartości: post lub get. Wartość post oznacza, Ŝe dane zostaną przesłane jako oddzielny strumień
i pozwala przesyłać dowolne ilości danych.
Umieszczając na formularzu przycisk typu submit pozwalamy uŜytkownikowi na zatwierdzenie
wprowadzonych danych i przesłanie ich na adres wskazany w atrybucie action znacznika form. Dane
z formularza są przetwarzane automatycznie – PHP tworzy zmienne o nazwach identycznych z nazwami
pól w formularzu (określonymi przez atrybut name) i przypisuje im odpowiednie wartości. Aby uzyskać
dostęp do zmiennych formularza naleŜy skorzystać z odpowiedniej tablicy superglobalnej $_POST lub
$_REQUEST. W prawidłowo napisanym skrypcie powinniśmy takŜe sprawdzić, czy istnieją wszystkie
potrzebne nam zmienne – uŜytkownik mógł uruchomić skrypt obsługujący formularz bezpośrednio,
wprowadzając jego nazwę w polu adresu przeglądarki.
2
Agnieszka Borowiecka, Formularze w PHP – testy, dyktanda i inne pomoce dydaktyczne
Rysunek 1 Przykładowy fragment kodu generującego formularz i efekt wywołania
Przygotowując test najczęściej korzystamy z pytań jednokrotnego wyboru (pola opcji <input
type="radio">) lub pytań wielokrotnego wyboru (pola wyboru <input type="checkbox">). W przypadku pytań, dla których istnieje więcej niŜ jedna prawidłowa odpowiedź, udzielone odpowiedzi powinny
być przekazywane w postaci tablicy (name="odp[]"). NaleŜy takŜe pamiętać, by określić jaka wartość
będzie odpowiadała wybranej przez uŜytkownika odpowiedzi (atrybut value).
Pytania i odpowiedzi muszą zostać wpisane do źródła tworzonej strony i uzupełnione o odpowiednie
znaczniki formatujące. Jednak, aby skrócić kod strony i uprościć generowanie formularza moŜemy utworzyć specjalną tablicę pomocniczą, zawierającą wszystkie pytania i odpowiedzi, a następnie wykorzystać
odpowiednią pętlę do generowania testu.
Rysunek 2 Automatyczne generowanie testu
W kolejnym kroku przygotowujemy skrypt wypisujący wyniki testu. W najprostszej wersji, po sprawdzeniu, czy istnieją odpowiednie zmienne – czyli czy uŜytkownik zaznaczył wszystkie odpowiedzi, wypisujemy na ekranie odpowiednie komentarze. MoŜemy równieŜ wykorzystać pomocniczą tablicę zawierającą pytania i odpowiedzi do wypisania pełnej informacji o wyborach uŜytkownika.
3
Rysunek 3 Wypisanie wyników testu
Wyniki testu mogą być wypisane na ekranie, zapisane w pliku lub bazie danych. Jeśli uŜytkownik ma
od razu uzyskać informację o tym, które odpowiedzi były prawidłowe, naleŜy przechowywać taką informację w skrypcie, np. jako tablicę asocjacyjną, w której dane są trzymane w formie:
numer pytania=>prawidłowa odpowiedź.
3.
Dyktando
Często uŜywanym elementem formularza są listy wyboru (<select>... </select>). Stosujemy je zwykle
wtedy, gdy uŜytkownik wypełniający formularz powinien wybrać jedną z kilku krótkich pozycji, a nie
moŜemy wykorzystać pól opcji. Ciekawym zastosowaniem list wyboru mogą być np. testy z języka obcego, w których wybierana jest odpowiednia forma gramatyczna brakującego wyrazu w zdaniu. Innym zastosowaniem moŜe być proste dyktando.
Rysunek 4 Dyktando
Wpisywanie listy wyboru dla kaŜdego sprawdzanego słowa w dyktandzie jest dość uciąŜliwe. Warto
przygotować prostą funkcję fraza(), generującą odpowiednią listę, np. złoŜoną z fraz --, rz i Ŝ. Po wpisaniu treści dyktanda wystarczy w odpowiednie miejsca wpisać fragment kodu z wywołaniem funkcji:
<?php fraza($wyniki[9]); ?>, gdzie zmienna $wyniki będzie słuŜyła do przechowywania informacji,
jaka pozycja na danej liście została wybrana. Początkowo wszystkie listy wyświetlają pierwszą pozycję
(dwie kreski), po naciśnięciu przycisku Sprawdź – pozycje zmienione przez osobę wypełniającą formularz zachowają swoje nowe wartości.
Dyktando moŜna w prosty sposób rozbudować dodając wyświetlane poniŜej informacje takie, jak
liczba poprawnych i błędnych odpowiedzi, komentarz zachęcający do dalszej pracy itp. Warto takŜe wykorzystać arkusze stylów do czytelnego sformatowania dyktanda lub do zaznaczenia kolorem prawidłowych i błędnych odpowiedzi.
4.
Zgadywanka
Najpopularniejszym elementem formularzy jest pole tekstowe, jednocześnie jest ono najmniej wygodne w obsłudze – wymaga od piszących skrypty rozpatrzenia wszystkich moŜliwych wersji odpowiedzi,
popełnianych błędów, itp. Zwykle pola tekstowe stosujemy tylko wtedy, gdy uŜytkownik musi podać
jakąś wartość (np. swoje imię), a nie znamy lub nie moŜemy prosto utworzyć listy wszystkich moŜliwych
odpowiedzi. Jeśli jednak ograniczymy długość słowa wprowadzanego w polu tekstowym do jednego
4
znaku (atrybut maxlength="1"), to moŜemy w prosty sposób przygotować grę polegającą na odgadywaniu ukrytego wyrazu. Odgadnięte wcześniej litery przekazujemy jako ukryte pole formularza (<input
type="hidden" name="odp" value="<?php echo $odp; ?>" />), a szukany wyraz jest definiowany
w skrypcie jako wartość pomocniczej zmiennej $wyraz (np. $wyraz="marchew").
Rysunek 5 Zgadywanka
Zabawa będzie bardziej atrakcyjna dla uczniów, gdy będą mogli odgadywać róŜne wyrazy. Wymaga
to przygotowania zbioru wyrazów, np. w postaci tablicy, oraz wybrania (wylosowania) wyrazu odgadywanego przez ucznia i przekazywania pomiędzy poszczególnymi wywołaniami skryptu. Nie jest wskazane przekazywanie odgadywanego wyrazu jako ukrytego pola formularza, bo łatwo byłoby go podejrzeć
w kodzie strony. Lepiej zamiast tego wykorzystać ciasteczka lub sesje. Dodatkowym utrudnieniem moŜe
być ograniczenie liczby prób podczas odgadywania wyrazów, np. przez zliczanie błędnych odpowiedzi –
nie pozwalamy popełnić więcej niŜ 3 błędy.
5.
Formularze z grafiką
Innym elementem PHP, jaki moŜemy wykorzystać przy tworzeniu zadań dla uczniów, jest moŜliwość
generowania grafiki. Najprostsze zastosowanie automatycznie generowanych rysunków, to wyświetlanie
w postaci wykresu wyników testu. Oczywiście niezbędne będzie przechowywanie wyników np. w pliku
lub w bazie. Ale moŜna sobie równieŜ wyobrazić inny przykład automatycznie generowanej grafiki. Na
poniŜszym rysunku widoczny jest zegar, na którym naleŜy odczytać wskazywaną godzinę. Tarcza zegara
została wczytana z pliku pomocniczego, zaś połoŜenie wskazówek jest losowane i odpowiednio rysowane.
Rysunek 6 Generowanie grafiki do testu
6.
5
Skrypty PHP
6.1. Ankieta
Plik obsloga.php
<?php
if ((isset($_POST['p1']))&&(isset($_POST['p2'])) &&(isset($_POST['p3']))) {
$p1=$_POST['p1'];
echo "<p>W pytaniu 1 wybrałeś odpowiedź $p1</p>";
$p2=$_POST['p2'];
$p3=$_POST['p3'];
}
else { echo '<p>Wypełnij najpierw wszystkie pytania formularza! </p>'; }
?>
Tablica z pytaniami
<?php
$pytania=array(array('1. Według alergologów tego warzywa nie zaliczamy do uczulających:','pomidora','kalafiora','selera'),
array('2. OdświeŜającą moc arbuz zawdzięcza temu, Ŝe składa się z wody:','w ponad 60%','w ponad 75%','w ponad 90%'),
array('3. Według specjalistów, aby dziecko polubiło nowe warzywo, musi go
spróbować nawet:','3-5 razy','5-10 razy','10-15 razy'));
for ($i=0;$i<count($pytania);$i++) {
$p=$pytania[$i];
echo '<p>'.$p[0].'</p>';
echo '<p>';
for ($j=1;$j<count($p);$j++) {
echo '<input type="radio" name="p'.($i+1).'" value="'.($j).'" />' .$p[$j].
"<br />\n";
}
echo '</p>';
}
?>
6
6.2. Dyktando
Funkcja fraza() tworząca listę wyboru:
function fraza($i) {
$lit=array('--','Ŝ','rz');
echo '<select name="p[]">';
for ($x=0;$x<3;$x++) {
echo '<option value="'.$x.'"';
if ($x==$i) { echo ' selected="selected"'; }
echo '>'.$lit[$x].'</option>';
}
echo '</select>';
}
Wywołanie funkcji w miejscu wypisania listy:
<?php fraza($wyniki[0]); ?>
Zmienna tablicowa przechowująca informacje o prawidłowej odpowiedzi:
$odp=array(1,2,....);
Zmienna $wyniki przechowująca dotychczasowe odpowiedzi:
if (isset($_POST['p'])) { $wyniki=$_POST['p']; }
else { for ($x=0;$x<count($odp);$x++) { $wyniki[]=0; } }
Zliczanie poprawnych odpowiedzi:
if (isset($_POST['p'])) {
$ile=0;
for ($i=0;$i<count($odp);$i++) {
if ($wyniki[$i]==$odp[$i]) {$ile++;}
}
echo '<p>Poprawnych odpowiedzi: '.$ile.', błędnych: '.(count($odp)$ile).'.</p>';
}
7
6.3. Zagadka
Zmienna przechowująca odgadywany wyraz:
$wyraz='pomidor';
Wypisanie długości odgadywanego wyrazu:
echo strlen($wyraz);
Zmienna $odp przechowuje odgadnięte litery i kropki zamiast jeszcze nie odgadniętych:
if (isset($_POST['odp'])&&($_POST['odp']!='')) { $odp=$_POST['odp'];
}
else { $odp=str_repeat('.',strlen($wyraz)); }
Przekazywanie zmiennej $odp oprzy kolejnych przesyłaniach formularza:
<input type="hidden" name="odp" value="<?php
echo $odp;
?>" />
Wygenerowanie tabelki z ukrytymi literami
echo '<table><tr>';
for ($i=0;$i<strlen($odp);$i++) {
echo '<td class="wyraz">'.$odp[$i].'</td>';
}
echo '</tr></table>';
Losowanie wyrazu do odgadywania – wykorzystujemy sesje do przekazywania wylosowanego wyrazu,
zmienna $co przechowuje listę wszystkich odgadywanych wyrazów:
session_start();
if (isset($_SESSION["wyraz"])) { $wyraz=$_SESSION["wyraz"]; }
else {
$co=array('pomidor','marchew','pietruszka','ogórek','kapusta','sałata',
'bakłaŜan','ziemniak');
$wyraz=$co[array_rand($co)];
$_SESSION["wyraz"]=$wyraz;
$odp=str_repeat('.',strlen($wyraz));
}
8
6.4. Generowanie grafiki – zegarek
Kod rysujący wskazówki na tarczy zegarka:
<?php
Header("Content-type: image/png");
$obrazek=ImageCreateFromPNG("zegar.png");
$black=ImageColorExact ($obrazek, 255, 255, 255);
imagecolortransparent($obrazek, $black);
$i=$_GET['i']; $j=$_GET['j'];
$kolor=ImageColorExact ($obrazek, 100, 100, 100);
$j=($j/5)-3;
imagesetthickness($obrazek,18);
ImageLine($obrazek, 213, 213, 214+130*cos(deg2rad($j*30)),
214+130*sin(deg2rad($j*30)), $kolor);
$i=$i-3;
ImageLine($obrazek, 213, 213, 214+100*cos(deg2rad($i*30)),
214+100*sin(deg2rad($i*30)),$kolor);
imagefilledellipse($obrazek, 213, 213, 40, 40, $kolor);
ImagePNG($obrazek);
?>

formularze w php – testy, dyktanda i inne pomoce

Transkrypt

Podobne dokumenty

Wakacyjne "Echo" do czytania

Przykładowe pytania egzaminu PHP

rolety - Sieradzka TV Media

Młodszy Programista PHP

PHP Web Developer

PROGRAMISTA PHP - REKRUTACJA FCG

Wtorek, 2015.12.01 Kolokwium 1, Mechanika MT Zadanie 1. Oblicz

Programista PHP