Tag Archive setTimeout

Byphunsanit

เก็บ 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);