หมวดหมู่: jQuery

เก็บ session ทำข้อสอบออนไลน์เก็บ session ทำข้อสอบออนไลน์

ตัวอย่างระบบข้อสอบ online โดยนักเรียน นักศึกษา จะต้อง login ก่อนโดยจะเก็บข้อมูลส่วนตัว และลำดับคำถามไว้ในเซคชั่น

และเพราะว่า php ตั้งเวลาไว้ให้เซคชั่นมีอายุ 20 นาที แต่มีเวลาทำข้อสอบ 120 นาที ทำให้เซคชั่นหมดเวลาไปก่อน จึงต้องใช้ jQuery มาต่ออายุให้เซคชั่นทุก ๆ 10 นาที เพื่อรักษาข้อมูลเอาไว้

ไฟล์แสดงข้อสอบ (ใช้จริง ๆ ควรแยก javascript ไปไว้ในอีกที่หนึ่ง)

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>ข้อสอบ</title>
 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
 </head>
 <body>
<?php
if (empty ($_POST)) {
?>
 <div class="container">
 <h2>Vertical (basic) form</h2>
 <div class="row">
 <div class="col-md-2"><b>Stat :</b></div>
 <div class="col-md-2" id="startA"></div>
 <div class="col-md-2"><b>End :</b></div>
 <div class="col-md-2" id="endA"></div>
 <div class="col-md-2"><b>Last Update :</b></div>
 <div class="col-md-2" id="periodsA"></div>
 </div>
 <form id="examinationF" action="examination.php" method="post">
 <div class="form-group">
 <label for="name">Name :</label>
 <input type="text" name="name" id="name" class="form-control" placeholder="Enter your name">
 </div>
 <div class="form-group">
 <label for="surname">Surname :</label>
 <input type="text" name="surname" id="surname" class="form-control" placeholder="Enter your surname">
 </div>
 <div class="checkbox">
 <label><input type="checkbox" name="accept">พร้อมทำข้อสอบในเวลาที่กำหนด</label>
 </div>
 <button type="submit" class="btn btn-default">Submit</button>
 </form>
 </div>
 <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
 <script>
 $ (function () {

 /* keep session */
 function sessionPostpone () {
 $.ajax ({
 "cache" : false,
 "type" : "post",
 "success" : function (datas) {
 $ ('#endA') .text (datas.time_end) ;
 $ ('#periodsA') .text (datas.update+ ' ('+datas.periods+') ') ;
 $ ('#startA') .text (datas.time_start) ;
 },
 "url" : "session.php"
 }) ;
 }

 sessionPostpone () ;
 var interval = 1000 * 60 * 10; // every 10 minutes
 setInterval (function () {
 sessionPostpone () ;
 }, interval) ;

 /* submit form */
 var timeout = 1000 * 60 * 120; // 120 minutes
 setTimeout (function () {
 $ ('#examinationF') .submit () ;
 }, timeout) ;

 }) </script>
<?php
}
else
{
 echo'<h1>คำตอบของคุณคือ</h1>',
 '<pre>',print_r ($_POST, true) ,'</pre>';
}
?>
 </body>
</html>

ไฟล์ไว้เรียกดูข้อมูล และยืดอายุ session ออกไป

<?php
session_start () ;

$time = new DateTime () ;

if (! isset ($_SESSION['id'])) {
	$datas = [];
	$_SESSION['id'] = session_id () ;
	$_SESSION['time_start'] = $time->format ('H:i:s') ;

	$time_end = $time->modify ('+2 hour') ;
	$_SESSION['time_end'] = $time_end->format ('H:i:s') ;
	$_SESSION['time_end_timestamp'] = time ($time_end) ;
}

$period = 10;
$_SESSION['periods'] = round ( (strtotime ($_SESSION['time_end']) - time ($time)) / 60 / $period) ;
$_SESSION['update'] = $time->format ('H:i:s') ;

header ("Content-type: application/json; charset=utf-8") ;
echo json_encode ($_SESSION) ;