[JavaScript][PHP]test z ograniczoną ilością czasu Opcje

[blade-mrn]

Jestem tu nowy więc Witam wszystkich i do rzeczy.
Piszę właśnie stronę na której będzie można przeprowadzać testy i stanąłem w jednym miejscu, mianowicie na rozwiązanie każdego testu jest określona ilość czasu i nie było by tu dużego problemu gdyby nie fakt iż pytania są wyświetlane pojedynczo (stronicowanie) i po każdej udzielonej odpowiedzi skrypt jest przekierowywany do innego pliku gdzie następuje zapis udzielonej odpowiedzi do bazy MySql oraz inkrementacja zmiennych stronicowania i na końcu przekierowanie z powrotem. Mój problem polega na tym, że początkowo użyłem JS do odliczania czasu i przekierowania na stronę z wynikiem gdy on upłynie ale po wprowadzeniu opisanego powyżej rozwiązania to się nie sprawdza bo JS po każdym odświeżeniu strony zaczyna odliczanie od początku. Myślałem nad zapisem aktualnego czasu do zmiennej w sesji przed przekierowanie a potem ponowne jej odczytanie tyle, że nie wiem jak to można zrobić :/ Czy ktoś mi podsunie rozwiązanie tego problemu, a może ktoś ma lepszy pomysł
Poniżej przedstawiam kod źródłowy wspomnianych wcześniej plików.
Plik wyświetlający test:

[PHP] pobierz, plaintext 
<?php
	@$db = new mysqli ($db_host, $db_user, $db_pass, $db_name);
	if (mysqli_connect_errno()) {echo 'Błąd połączenia z bazą!'; exit;}
	$zap_test = $db->query("SELECT * FROM testy WHERE id_test=".$id_test);
	$rek_test = $zap_test->fetch_assoc();
	for ($i=0;$i<=strlen($rek_test['czas']);$i++)
		{
			if ($i<2) {$godz = $godz.$rek_test['czas'][$i];}
			if (($i>2) && ($i<5)) {$min = $min.$rek_test['czas'][$i];}
			if ($i>5) {$sek = $sek.$rek_test['czas'][$i];}
		}
	if (($godz == 0) && ($min == 0) && ($sek == 0))
		{	echo 'Brak limitu czasu.';}
	else
		{	
			echo 'Pozostało Ci <span id="sekundy" style="font-size: 20px"></span> sekund. ';
			echo $godz.'h '.$min.' min '.$sek;
		}
	if (is_numeric($_REQUEST['page'])) 
		{
			$page = (int) $_REQUEST['page'];
			if ($page < 1) {	$page = 1;	}
		}
	else {	$page = 1;	}
	$start = ($page - 1);
	$_SESSION['page'] = $page;
	$zap_ile_pyt = $db->query("SELECT * FROM pytania WHERE id_test=".$rek_test['id_test']);
	$result = $db->query("SELECT * FROM pytania WHERE id_test = ".$rek_test['id_test']." LIMIT $start, 1");
	echo '<form action="index.php?id=7" method="POST" id="form">';
	echo '<ol type="I">';
	for ($i=1;$i<=$result->num_rows;$i++)
		{
			$rek_pyt = $result->fetch_assoc();
			echo '<input type="hidden" name="id_pyt" value="'.$rek_pyt['id_pytania'].'">';
			echo $rek_pyt['pytanie'].'<br />';
			$zap_odp = $db->query("SELECT * FROM odpowiedzi WHERE id_test=".$rek_test['id_test']." AND id_pyt=".$rek_pyt['id_pytania']);
			echo '<ol>';
			for ($j=1; $j<=$zap_odp->num_rows; $j++)
				{
					$rek_odp = $zap_odp->fetch_assoc();
					echo '<li>'.$rek_odp['odpowiedz'].'<input type="checkbox" name=checkodp'.$j.'></li>';
				}
			echo '</ol>';
		}
	echo '<input type="submit" value="dalej">';
	echo "<br /><a href='index.php?id=0'>Wróć</a></div>";
	echo '</form>';
?>
<script type="text/javascript">
	o=document.getElementById('sekundy')
	function odliczaj(o,sek)
		{
			o.innerHTML=sek
			if(sek>0)setTimeout(function(){odliczaj(o,--sek)},1e3)
			if(sek==0){window.location ="index.php?id=6";}
		}
	odliczaj(document.getElementById('sekundy'),<?php echo ($godz*60*60)+($min*60)+$sek; ?>)
</script>
</body>
</html>
[PHP] pobierz, plaintext 

Plik dokonujący zapisu i inkrementacji:

[PHP] pobierz, plaintext 
<?php
	session_start();
	require_once ('common.php');
	$id_test = $_SESSION['ide'];
	$nr_ucznia = $_SESSION['nr_ucznia'];
	$klasa = $_SESSION['klasa'];
	$id_pyt = $_POST['id_pyt'];
	date_default_timezone_set ("Europe/Warsaw");
	$data = date('Ymd');	
	$czas = date('His');	
	$ip = getenv('REMOTE_ADDR');
	@$db = new mysqli ($db_host, $db_user, $db_pass, $db_name);
	if (mysqli_connect_errno()) {echo 'Błąd połączenia z bazą!'; exit;}
	$zap_odp = $db->query("SELECT * FROM odpowiedzi WHERE id_test=".$id_test." AND id_pyt=".$id_pyt);
	for ($j=1; $j<=$zap_odp->num_rows; $j++)
		{
			$rek_odp = $zap_odp->fetch_assoc();
			if ($_POST['checkodp'.$j] == on)
				{
					$zap_roz = $db->query("INSERT INTO roz VALUES (NULL,'".strtoupper($klasa)."',".$nr_ucznia.",".$id_test.",".$rek_odp['id_odp'].",".$data.",".$czas.",'".$ip."'".")");							
				}
		}
//----------------START Zmiana strony w stronicowaniu---------------
	$next = $_SESSION['next'];
	$next = $_SESSION['page'] + 1;
	$_SESSION['next'] = $next;
	$zap_ile_pyt = $db->query("SELECT id_pytania FROM pytania WHERE id_test=".$id_test);
	if ($next <= $zap_ile_pyt->num_rows)
		{
			echo '<META HTTP-EQUIV="Refresh" CONTENT="0;URL='.$_SERVER['PHP_SELF'].'?id=5&page='.$next.'">';
		}
	else
		{
			echo '<META HTTP-EQUIV="Refresh" CONTENT="0;URL=index.php?id=6">';
		}
//-------------STOP zmiana strony w stronicowaniu-------------------
?>
[PHP] pobierz, plaintext 

[robal94]

A może czas do bazy mysql?

[thek]

Uważam, że nie tyle powinieneś zapisywać aktualny czas, co jego początek lub czas zakończenia i na podstawie tego kontrolować upływ. Tę informację można zapisać, jak sam zauważasz, w sesji. JS mając ją sam sobie może czas liczyć, bo jest ona dla niego niezmienna. A o to Ci chodzi.

[blade-mrn]

Dzięki za sugestię, zaraz się pobawię.

Moich zmagań ciąg dalszy. Wykombinowałem coś takiego, że w chwili wyświetlenia pierwszego pytania testu do pliku cooki zapisywany jest aktualny czas Unix. Następnie do tego czasu dodaję czas trwania testu w sekundach teoretycznie otrzymując czas w którym ma się zakończyć test. Aby to sprawdzić porównuję wynik z aktualnym czasem. Cały problem w tym, że test ma trwać np. 10 sekund a przekierowanie następuje już po 1 sekundzie. Czy to założenie jest zle czy ja coś knocę
Wklejam tylko zmienione/dopisane fragmenty kodu bo reszta jest wyżej.

[JAVASCRIPT] pobierz, plaintext 
<head>
<?php
	naglowek_strony ();
?>
<script type="text/javascript">
	function zap_czas ()
		{
			offset = document.cookie.indexOf("czas=");
			if (offset == -1) // jeżeli ciasteczko istnieje
				{
					var today = new Date();
					document.cookie="czas="+today.getTime()
				}
		}
	function getCookie(Name)
  {
		var search = Name + "=";
		if (document.cookie.length > 0) 
			{
				offset = document.cookie.indexOf(search);
				if (offset != -1) 
					{
						offset += search.length;
						end = document.cookie.indexOf(";", offset) 
						if (end == -1) end = document.cookie.length 
						return unescape(document.cookie.substring(offset, end))
					}
			}
  }
</script>
</head>
<body onLoad="zap_czas ()">
.
.
.
<script type="text/javascript">
	o=document.getElementById('sekundy');
	function odliczaj(o,sek)
		{
			var obecny_czas = new Date ();
			var czas_startu = parseFloat(getCookie("czas"));
			var ilosc_czasu = <?php echo (($godz*60*60))+(($min*60))+($sek*10); ?>;
			o.innerHTML=sek
			if(sek>0){setTimeout(function(){odliczaj(o,--sek)},1e3)}
			var licz = czas_startu + ilosc_czasu;
			if(licz < obecny_czas.getTime()){window.location ="index.php?id=6";}
		}
	odliczaj(document.getElementById('sekundy'),<?php echo ($godz*60*60)+($min*60)+$sek; ?>);
</script>
[JAVASCRIPT] pobierz, plaintext 

Wydaje mi się że to już bardzie pasuje do działu "Po stronie przeglądarki" ale chyba tworzenie kolejnego tematu nie ma sensu.

Ten post edytował blade-mrn 21.10.2009, 10:52:01

[thek]

Problem w tym wypadku polega na tym, że czas startu nie jest równoznaczny z czasem przez Ciebie wybranym. Pamiętaj, że ileś czasu trwa renderowanie strony. Stąd licznik powinien startować dopiero PO jej pełnym wyświetleniu, a więc mogą nastąpić różnice czasu z tego powodu. Z tego co kojarzę to zdarzenie onLoad jest wywoływane w momencie gdy strona zostanie załadowana w pełni, czyli sadzę, że w tym momencie powinien startować licznik czasu na pytanie w teście, ale działo by się to niezależnie od znacznika startu/końca testu w cookie/na serwerze. Nie pamiętam czy było je można stosować do konkretnego elementu, bo wtedy czas wystartowałby po załadowaniu odpowiedniego elementu strony (choćby obrazków testowych). Zawsze bowiem może zajść sytuacja, że user zna odpowiedź na pytanie, zanim strona się załaduje w pełni, wpisze odpowiedź i da "Dalej". W ten sposób mimo faktu, iż licznik pytania nawet nie ruszył, czas całości testu upływa niezależnie od usera na serwerze. Problemem może być wolna strona, gdzie czas ładowania może stanowić dużą część całości testu, zmniejszając możliwy na odpowiedź. Dlatego ogranicz na stronach testu grafikę i wszelkie wodotryski/spowalniacze do niezbędnych. A timestamp startu/końca niech będzie niemożliwy do edycji w żaden sposób (zapis na serwerze) co sprawi, że będzie to miarodajne i uczciwe wobec większości userów. Dlatego to rozwiązanie jest mieszane, gdyż część rzeczy dzieje się po stronie serwera (kontrola całości testu i jego trwania), a część po stronie usera (ograniczony czas lokalny na jedno pytanie). To moim zdaniem najsensowniejsze rozwiązanie problemu.

[blade-mrn]

thek dzięki za uwagi ale z racji tego iż jestem raczej początkujący czy mógłbyś nieco bardziej rozjaśnić rozwiązanie tego problemu

Ten post edytował blade-mrn 21.10.2009, 12:00:00

[thek]

Najprościej pisząc:
Na starcie testu zapisz sobie czas startu lub końca. W zdarzeniu onLoad uruchom liczniki czasu na pojedyncze pytanie i/lub całości testu jaki Ci pozostał. Nigdy nie modyfikuj czasu startu/końca, bo jest on dla Ciebie wzorcowym. Jeśli upłynie czas na jedno pytanie lub czas całego testu to przerwij go przekierowując na stronę wyniku/następnego pytania, o ile sam user tego nie zrobi dając submit w formularzu (czy to poprzez guzik submit czy wybór opcji, która wywoła zdarzenie submit() ).
Tak więc masz na stronie niejako 2 liczniki:
- lokalny dla pytania,
- globalny dla testu.
W zależności od sytuacji wywołają one określone zdarzenia. Upłynięcie pierwszego -> przekierowanie na następne pytanie, a jeśli to było ostatnie to do podsumowania testu. Koniec drugiego - od razu do podsumowania. Każde pytanie bez odpowiedzi niech przyjmuje jakąs z góry określona wartość. Choćby NULL, pustą czy inną nieokreśloną. To pozwoli oznaczyć pytania z odpowiedziami i bez nich.

Oczywiście pisze tutaj o sytuacji gdy każde pytanie to kolejna strona. Jeśli masz tak, że masz wszystkie pytania na jednej stronie, to wystarczy jeden licznik, ten lokalny, bo będzie on miał w sumie długi czas i te kilka sekund na przesłanie netem strony i jej rendering usera by nie zbawiło

[blade-mrn]

Tyle że ja właśnie coś takiego próbuję zrobić, mianowicie tak jak pisałem wcześniej.
1. Gdy zostanie wyświetlona strona z pierwszym pytaniem (oznacza to początek testu) zostaje zapisany do pliku cooki(jeśli już nie istnieje) aktualny czas Unix;
2. Potem skrypt odliczający dynamicznie czas na stronie co sekundę sprawdza czy czas początkowy plus czas trwania testu nie jest większy od czasu obecnego jeśli tak przekierowuje na stronę końcową jeśli nie nie robi nic.
Więc czas początkowy nigdy w trakcie rozwiązywania testu nie jest edytowany.
Cały problem polega na tym, że z dodawania czas_startu + ilosc_czasu; nie wychodzi mi czas zakończenia testu(czyli czas rozpoczęcia powiększony o czas trwania) i nie wiem dlaczego tak się dzieje .

[thek]

Myślę, że drugi przykład stąd (http://www.w3schools.com/js/js_timing.asp) Cię naprowadzi na rozwiązanie Tutaj leci w górę od 0... Ty zrobisz to samo, ale w dół. Gdy dojdzie do 0 -> przekierowanie Zerknij sobie tam a zauważysz, że całość metody jest banalna. Tylko sobie dopasuj do potrzeb ten prosty kod.

EDIT:
Przykładowo masz czas_startu testu i wiesz, że trwać on ma 5 minut (czas_testu) w sumie na 10 pytań, ale maksymalnie jest minuta na pytanie. Robisz więc na każdej stronie counter odliczający w dół od 60 (limit na pytanie). Masz też czas startu testu. Liczysz więc:
czas_testu + czas_startu - czas_obecny_w_chwili_startu_pytania
lub inaczej:
czas_testu - ( czas_obecny_w_chwili_startu_pytania - czas_zapisany)
co da nam czas jaki pozostaje na całość testu. Oba te liczniki sobie lecą w dół i dojście do 0 któregoś z nich wywołuje odpowiednie zdarzenie (albo nowe pytanie, albo koniec testu). Chyba prosto to opisałem?

Ten post edytował thek 21.10.2009, 13:40:36

[blade-mrn]

Na razie dzięki za pomoc, zobaczę co mi z tego wyjdzie.