Quiz z wykorzystaniem pól formularza

HTML to podstawy w dziedzinie tworzenia stron WWW, Style CSS warto opanować, bowiem za ich pomocą można dostosować odpowiednio wygląd swojej witryny WWW. Zagłębiamy się dalej i udostępniamy w tym forum możliwość zadawania pytań o JavaScript.
ODPOWIEDZ
KaRoL
Działa
Działa
Posty: 1071
Rejestracja: czw kwie 03, 2003 2:40 pm

Quiz z wykorzystaniem pól formularza

Post autor: KaRoL »

Chciałbym zrobić na stronie quiz z pytaniem i trzema odpowiedziami a, b i c. Chciałbym przy każdej odpowiedzi postawić kółeczko, w którym zaznaczałoby się poprawną odpowiedź (no wiecie, pole z dziurką).
Teraz chciałbym by na końcu był przycisk "podlicz" i po kliknięciu wyliczałby średnią poprawnych odpowiedzi lub ocenę. Jak to zrobić?
Mayhen
Nowy
Nowy
Posty: 158
Rejestracja: śr lip 10, 2002 9:21 pm
Lokalizacja: 21°41' E | 50°35' N
Kontakt:

Re: Quiz z wykorzystaniem pól formularza

Post autor: Mayhen »

w javascript napisalem kiedys banalny taki skrypt. od razu mowie ze jest banalny moze miec sporo bugow itp. itd. Da sie latwo zobaczyc poprawne odpowiedzi, lepiej napisac to w php, ale ten mialem gotowy :) wiec go tu umieszczam:

Kod: Zaznacz cały

<SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
<!-- 
var zad1_odp = 0
var zad1_prw = 1
var zad1_pkt = 0

var zad2_odp = 0
var zad2_prw = 1
var zad2_pkt = 0


var zad3_odp = 0
var zad3_prw = 3
var zad3_pkt = 0


var zad4_odp = 0
var zad4_prw = 4
var zad4_pkt = 0


var zad5_odp = 0
var zad5_prw = 2
var zad5_pkt = 0


var zad6_odp = 0
var zad6_prw = 1
var zad6_pkt = 0


var zad7_odp = 0
var zad7_prw = 1
var zad7_pkt = 0


var zad8_odp = 0
var zad8_prw = 2
var zad8_pkt = 0


var zad9_odp = 0
var zad9_prw = 3
var zad9_pkt = 0


var zad10_odp = 0
var zad10_prw = 4
var zad10_pkt = 0

var suma_pkt = 0

function okno()
{
if ( zad1_odp == zad1_prw) { zad1_pkt=1}
if ( zad2_odp == zad2_prw) { zad2_pkt=1}
if ( zad3_odp == zad3_prw) { zad3_pkt=1}
if ( zad4_odp == zad4_prw) { zad4_pkt=1}
if ( zad5_odp == zad5_prw) { zad5_pkt=1}
if ( zad6_odp == zad6_prw) { zad6_pkt=1}
if ( zad7_odp == zad7_prw) { zad7_pkt=1}
if ( zad8_odp == zad8_prw) { zad8_pkt=1}
if ( zad9_odp == zad9_prw) { zad9_pkt=1}
if ( zad10_odp == zad10_prw) { zad10_pkt=1}

suma_pkt =zad1_pkt+zad2_pkt+zad3_pkt+zad4_pkt+zad5_pkt+zad6_pkt+zad7_pkt+zad8_pkt+zad9_pkt+zad10_pkt 

if (suma_pkt == 0) { wynik="No coż poszło ci kiepsko, "+suma_pkt+" na 10 to słaby wynik ucz się dalej."}
if (suma_pkt == 1) { wynik="No coż poszło ci kiepsko, "+suma_pkt+" na 10 to słaby wynik ucz się dalej."}
if (suma_pkt == 2) { wynik="No coż poszło ci kiepsko, "+suma_pkt+" na 10 to słaby wynik ucz się dalej."}

if (suma_pkt == 3) { wynik="Hmm... Słabo ale nie najgorzej, pytania były łatwe, powiniene¶ uzyskać co najmniej 5 punktów. Wynik "+suma_pkt+" to naprawdę kiepsko"}
if (suma_pkt == 4) { wynik="Hmm... Słabo ale nie najgorzej, pytania były łatwe, powiniene¶ uzyskać co najmniej 5 punktów. Wynik "+suma_pkt+" to naprawdę kiepsko"}
if (suma_pkt == 5) { wynik="Hmm... Słabo ale nie najgorzej, pytania były łatwe, powiniene¶ uzyskać co najmniej 5 punktów. Wynik "+suma_pkt+" to naprawdę kiepsko"}

if (suma_pkt == 6) { wynik="No cóż mogłe¶ lepiej się postarać taki wynik, jest już w miarę do przyjęcia gdy zajmujesz się czym¶ innych niż grafika i programowanie. Ale te podstawy powinno się umieć"}
if (suma_pkt == 7) { wynik="No cóż mogłe¶ lepiej się postarać taki wynik, jest już w miarę do przyjęcia gdy zajmujesz się czym¶ innych niż grafika i programowanie. Ale te podstawy powinno się umieć"}

if (suma_pkt == 8) { wynik="NieĽle. Mniej więcej znasz podstawy i wiesz o co biega. Pewnie się gdzie¶ pomyliłe¶. No ale nie ma osób nieomylnych"}
if (suma_pkt == 9) { wynik="NieĽle. Mniej więcej znasz podstawy i wiesz o co biega. Pewnie się gdzie¶ pomyliłe¶. No ale nie ma osób nieomylnych"}

if (suma_pkt == 10) { wynik="Spoko. Ale to jeszcze nic nie znaczy, wiedzę masz, tylko z komputerami jest tak, że cały czas musisz się uczyć."}

document.open();

document.write("<HTML><HEAD><TITLE> Wyniki</TITLE></HEAD><LINK REL=stylesheet HREF=style.css TYPE=text/css ><BODY bgcolor=white > ");
document.write("<table border=2 bordercolor=#004478 CELLSPACING=0 CELLPADDING=0 BORDER=0 NOWRAP> <tr>   <td width=30>	 <B>Zad.</B>	</TD>		<td width=100>	  <B>Twój wybór</B>	</TD>		<td width=100>	  <B>Prawidłowy</B>	</TD>		<td width=50>	  <B>Punkty</B>	  </TD>		</TR>	<tr>		<td>	<CENTER>1.</CENTER>	</TD>		<td>	"+zad1_odp+" 	</TD>		<td>	 "+zad1_prw+"	</TD>		<td>	 "+zad1_pkt+"	  </TD>   </tr>   <tr>		<td>	  <CENTER>2.</CENTER>	</TD>		<td>	 "+zad2_odp+"	</TD>		<td>	  "+zad2_prw+"	</TD>		<td>	 "+zad2_pkt+"	</TD> 		</tr>	<tr>		<td>	<CENTER>3.</CENTER> 	</TD>		<td>	 "+zad3_odp+"	</TD>	<td>	 "+zad3_prw+"	</TD> 		<td>	 "+zad3_pkt+"	</TD>		</TR>	<tr>		<td>	<CENTER>4.</CENTER>	</TD>		<td>	"+zad4_odp+"	</TD>		<td>	"+zad4_prw+"	</TD>		<td>	"+zad4_pkt+"	</TD>				</TR>	<tr>		<td>	<CENTER>5.</CENTER>	</TD>		<td>	"+zad5_odp+"	</TD>		<td>	"+zad5_prw+"		</TD>		<td>	"+zad5_pkt+"		</TD>			</TR>	<tr>		<td>	<CENTER>6.</CENTER>	</TD>		<td>	"+zad6_odp+"		</TD>		<td>	"+zad6_prw+"	</TD>		<td>	"+zad6_pkt+"	</TD>		</TR>	<tr>		<td>	<CENTER>7.	</CENTER>	</TD>		<td>	"+zad7_odp+"	</TD>		<td>	"+zad7_prw+"	</TD>		<td>	"+zad7_pkt+"	</TD>		</TR>	<tr>		<td>	<CENTER>8.</CENTER>	</TD>		<td>	"+zad8_odp+"	</TD>		<td>	"+zad8_prw+"	</TD>		<td>	"+zad8_pkt+"	</TD>		</TR>	<tr>		<td>	<CENTER>9.</CENTER>	</TD>		<td>	"+zad9_odp+"	</TD>		<td>	"+zad9_prw+"	</TD>		<td>	"+zad9_pkt+"	</TD>		</TR>	<tr>	<td> <CENTER>10.</CENTER>  </TD>	<td>	"+zad10_odp+"	</TD>		<td>	"+zad10_prw+"	</TD>			<td>	"+zad10_pkt+"	</TD>	</TR>			 </Table>");
document.write("Uzyskałe¶/a¶ "+suma_pkt+" na maxymaln± ilo¶ć punktów 10. "+wynik+".");
document.write("<br><A HREF=test_inf.htm>Wróć do testu</A>");
document.write("</body></HTML>");

}
-->
</SCRIPT>

Kod: Zaznacz cały

<a name="zad1"></A>
<U><B>Zad 1.</B></U><BR>
Jakimi słowami zaczynamy i kończymy program lub funkcję w Pascalu?<BR>
<A HREF="#zad1" onMouseDown="zad1_odp='1'"><IMG SRC="pkt_1.gif" BORDER="0" ></A> Begin i End
<BR>
<A HREF="#zad1" onMouseDown="zad1_odp='2'"><IMG SRC="pkt_2.gif" BORDER="0" ></A> Start i end
<BR>
<A HREF="#zad1" onMouseDown="zad1_odp='3'"><IMG SRC="pkt_3.gif" BORDER="0" ></A> { i }
<BR>
<A HREF="#zad1" onMouseDown="zad1_odp='4'"><IMG SRC="pkt_4.gif" BORDER="0" ></A> repeat i until
<BR>
<BR>
<a name="zad2"></A>
<U><B>Zad 2.</B></U><BR>
Jak nazywa się język w którym napisane s± strony internetowe?<BR>
<A HREF="#zad2" onMouseDown="zad2_odp='1'"><IMG SRC="pkt_1.gif" BORDER="0" ></A> HTML
<BR>
<A HREF="#zad2" onMouseDown="zad2_odp='2'"><IMG SRC="pkt_2.gif" BORDER="0" ></A> WebPageLanuage
<BR>
<A HREF="#zad2" onMouseDown="zad2_odp='3'"><IMG SRC="pkt_3.gif" BORDER="0" ></A> Linux
<BR>
<A HREF="#zad2" onMouseDown="zad2_odp='4'"><IMG SRC="pkt_4.gif" BORDER="0" ></A> WWW
<BR>
<BR>
<a name="zad3"></A>
<U><B>Zad 3.</B></U><BR>
Co to jest system hex'owy?<BR>
<A HREF="#zad3" onMouseDown="zad3_odp='1'"><IMG SRC="pkt_1.gif" BORDER="0" ></A> Najnowszy sytsem firmy MicroSoft
<BR>
<A HREF="#zad3" onMouseDown="zad3_odp='2'"><IMG SRC="pkt_2.gif" BORDER="0" ></A> Odmiana Linuxa
<BR>
<A HREF="#zad3" onMouseDown="zad3_odp='3'"><IMG SRC="pkt_3.gif" BORDER="0" ></A> System szesnastkowy
<BR>
<A HREF="#zad3" onMouseDown="zad3_odp='4'"><IMG SRC="pkt_4.gif" BORDER="0" ></A> OdpowiedĽ A i B
<BR>
<BR>
<a name="zad4"></A>
<U><B>Zad 4.</B></U><BR>
Która liczba jest liczb± w systemie hex'owym<BR>
<A HREF="#zad4" onMouseOver="zad4_odp='1'"><IMG SRC="pkt_1.gif" BORDER="0" ></A> 001001110
<BR>
<A HREF="#zad4" onMouseOver="zad4_odp='2'"><IMG SRC="pkt_2.gif" BORDER="0" ></A> 255
<BR>
<A HREF="#zad4" onMouseOver="zad4_odp='3'"><IMG SRC="pkt_3.gif" BORDER="0" ></A> 16
<BR>
<A HREF="#zad4" onMouseOver="zad4_odp='4'"><IMG SRC="pkt_4.gif" BORDER="0" ></A> FF1A32
<BR>
<BR>
<a name="zad5"></A>
<U><B>Zad 5.</B></U><BR>
Co to jest Flash?<BR>
<A HREF="#zad5" onMouseOver="zad5_odp='1'"><IMG SRC="pkt_1.gif" BORDER="0" ></A> Odno¶nik
<BR>
<A HREF="#zad5" onMouseOver="zad5_odp='2'"><IMG SRC="pkt_2.gif" BORDER="0" ></A> Interaktywna (zazwyczaj) grafika
<BR>
<A HREF="#zad5" onMouseOver="zad5_odp='3'"><IMG SRC="pkt_3.gif" BORDER="0" ></A> Multimedialny system unixowy
<BR>
<A HREF="#zad5" onMouseOver="zad5_odp='4'"><IMG SRC="pkt_4.gif" BORDER="0" ></A> Inaczej FAT 32
<BR>
<BR>
<a name="zad6"></A>
<U><B>Zad 6.</B></U><BR>
Co oznaczza skrót RAM<BR>
<A HREF="#zad6" onMouseOver="zad6_odp='1'"><IMG SRC="pkt_1.gif" BORDER="0" ></A> Typ pamięci operacyjnej
<BR>
<A HREF="#zad6" onMouseOver="zad6_odp='2'"><IMG SRC="pkt_2.gif" BORDER="0" ></A> Internetowa gra FPP
<BR>
<A HREF="#zad6" onMouseOver="zad6_odp='3'"><IMG SRC="pkt_3.gif" BORDER="0" ></A> Najnowszy model G-Forca
<BR>
<A HREF="#zad6" onMouseOver="zad6_odp='4'"><IMG SRC="pkt_4.gif" BORDER="0" ></A> Jedstoka logiczna dysku zformatowanego
<BR>
<BR>
<a name="zad7"></A>
<U><B>Zad 7.</B></U><BR>
Ile cyfr jest w układzie hex"owyn"<BR>
<A HREF="#zad7" onMouseOver="zad7_odp='1'"><IMG SRC="pkt_1.gif" BORDER="0" ></A> 16 czyli od 0 do 9 i od A do F
<BR>
<A HREF="#zad7" onMouseOver="zad7_odp='2'"><IMG SRC="pkt_2.gif" BORDER="0" ></A> 255 Czyli od 0 do 255
<BR>
<A HREF="#zad7" onMouseOver="zad7_odp='3'"><IMG SRC="pkt_3.gif" BORDER="0" ></A> S± tylko dwie: 0 i 1
<BR>
<A HREF="#zad7" onMouseOver="zad7_odp='4'"><IMG SRC="pkt_4.gif" BORDER="0" ></A> Nieskończona ilo¶c liczb tylko dodatnich
<BR>
<BR>
<a name="zad8"></A>
<U><B>Zad 8.</B></U><BR>
Jak nazywa się firma która produkuje karty graficzne oparte na ko¶ciach np. Rivy TNT<BR>
<A HREF="#zad8" onMouseOver="zad8_odp='1'"><IMG SRC="pkt_1.gif" BORDER="0" ></A> 3D FX
<BR>
<A HREF="#zad8" onMouseOver="zad8_odp='2'"><IMG SRC="pkt_2.gif" BORDER="0" ></A> NVida
<BR>
<A HREF="#zad8" onMouseOver="zad8_odp='3'"><IMG SRC="pkt_3.gif" BORDER="0" ></A> MicroSoft
<BR>
<A HREF="#zad8" onMouseOver="zad8_odp='4'"><IMG SRC="pkt_4.gif" BORDER="0" ></A> Segate
<BR>
<BR>
<a name="zad9"></A>
<U><B>Zad 9.</B></U><BR>
Za pomoc± którego TAG'a wstawimy na stronę Odno¶nik?<BR>
<A HREF="#zad9" onMouseOver="zad9_odp='1'"><IMG SRC="pkt_1.gif" BORDER="0" ></A> <META CONTENT="text/html; charset=iso-8859-2">
<BR>
<A HREF="#zad9" onMouseOver="zad9_odp='2'"><IMG SRC="pkt_2.gif" BORDER="0" ></A> <IMG SRC="" HEIGHT="" WIDTH="" BORDER="" ALT="">
<BR>
<A HREF="#zad9" onMouseOver="zad9_odp='3'"><IMG SRC="pkt_3.gif" BORDER="0" ></A> <A HREF="" onMouseOver="self.status=''; return true"> </A>
<BR>
<A HREF="#zad9" onMouseOver="zad9_odp='4'"><IMG SRC="pkt_4.gif" BORDER="0" ></A> <HR LOCATION="" URL="" ALIGN="" COLOR="">
<BR>
<BR>
<a name="zad10"></A>
<U><B>Zad 10.</B></U><BR>
Do czego służy program Adobe PhotoShop?<BR>
<A HREF="#zad10" onMouseOver="zad10_odp='1'"><IMG SRC="pkt_1.gif" BORDER="0" ></A> Do obróbki Grafiki
<BR>
<A HREF="#zad10" onMouseOver="zad10_odp='2'"><IMG SRC="pkt_2.gif" BORDER="0" ></A> Do uzykania ciekawcyh efektów graficznych na grafikach
<BR>
<A HREF="#zad10" onMouseOver="zad10_odp='3'"><IMG SRC="pkt_3.gif" BORDER="0" ></A> Można nim konwertować grafiki do innych typów np. z jpg do gif
<BR>
<A HREF="#zad10" onMouseOver="zad10_odp='4'"><IMG SRC="pkt_4.gif" BORDER="0" ></A> Odpowiedzi A,B i C s± prawdziwe
<BR>
<BR>
<A HREF="#" onMouseDown="javascript:okno()"> KONIEC TESTU</A>
Musisz jescze poprawić ogonki bo sie posypaly :) W php bedzie to podobnie wygladalo, inaczej rozwiazane ale podobne. A i tu sa cztery odpowiedzi - ale to latwo zmienic.
Mayhen
Nowy
Nowy
Posty: 158
Rejestracja: śr lip 10, 2002 9:21 pm
Lokalizacja: 21°41' E | 50°35' N
Kontakt:

Re: Quiz z wykorzystaniem pól formularza

Post autor: Mayhen »

w javascript napisalem kiedys banalny taki skrypt. od razu mowie ze jest banalny moze miec sporo bugow itp. itd. Da sie latwo zobaczyc poprawne odpowiedzi, lepiej napisac to w php, ale ten mialem gotowy :) wiec go tu umieszczam:

http://80.55.127.74/~kekerott/my_stuff/quiz.php
(nie moglem wyslac na forum z powodu objetosci - Maximum execution time of 30 seconds exceeded)

Musisz jescze poprawić ogonki bo sie posypaly :) W php bedzie to podobnie wygladalo, inaczej rozwiazane ale podobne. A i tu sa cztery odpowiedzi - ale to latwo zmienic.
ODPOWIEDZ