Make save and exit button javascript

Hi, i am new in javascript and php. i want to make toefl online test. i want to make save and exit button, so if user doesn’t have enough time or disturbing while doing the test, user can save the test and logout. then if user login back, user can continue do the test with the question that already answered. what should i do? please help

Don’t wait for the user to manually decide. Frequently it’s too late for the user to decide that they need it. For example, accidentally closing the tab. The computer shutting down for an update. Coming back later to find someone else used the machine. Accidentally clicking a bookmark. etc.

Instead, always autosave the info and recover that information when they revisit the page, and give them the option to start over.

1 Like

ok i got it, thank you.

i display the answer of question by using radio button. so if user accidentally closing the tab and then user open it again the time will be continue but the question that already answered not display. can you help me?

[quote=“endone, post:3, topic:225697, full:true”]can you help me?
[/quote]

This autosave as you type plugin does the job well.

can you help me with the script please? i dont know where to put the code on my script

this is my test.php

<?php
session_start();
require_once("connection.php");
if ($_SESSION['email']=='') {
    header("location: index.php");
  }else{
    mysql_error();
  }

  include("lib_function.php");
?>

<!DOCTYPE html>
<html lang="en">
<head>
<title>TOEFL Online</title>
<meta charset="utf-8">
<link rel="icon" href="">
<link rel="stylesheet" href="css/style.css">
<script language="JavaScript" src="js/button.js"></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.10.2.min.js'></script>

<script>
  var times = 150;
  var time;
  var go = 0;
  var end = 0;
  
  function init(){
checkCookie()
start();
  }

  function keluar(){
if(end==0){
  setCookie('waktux',time,1);
}else{
  setCookie('waktux',0,-1);
}
  }
  
  function start(){
hour = Math.floor(time/3600);
sisa = time%3600;
minute = Math.floor(sisa/60);
sisa2 = sisa%60
second = sisa2%60;

if(minute < 1 && hour == 0){
  var peringatan = 'style="color:red"';
}

if(second<10){
  detikx = "0"+second;
}else{
  detikx = second;
}

if(minute<10){
  menitx = "0"+minute;
}else{
  menitx = minute;
}

if(hour<10){
  jamx = "0"+hour;
}else{
  jamx = hour;
}

  document.getElementById("divwaktu").innerHTML = '<h4 align="right"'+peringatan+' style="color:#991111;" >time: &nbsp;&nbsp;&nbsp;'+ menitx + ' : ' + detikx + '</h4>'
time --;
if(time>0){
  t = setTimeout("start()",1000);
  go = 1;
}else{
  if(go==1){
    clearTimeout(t);
  }
  end = 1;
  document.getElementById("formulir").submit();
  }
}

  function selesai(){
document.getElementById("formulir").submit();
  }

  function getCookie(c_name){
if (document.cookie.length>0){
  c_start=document.cookie.indexOf(c_name + "=");
    if (c_start!=-1){
      c_start=c_start + c_name.length+1;
      c_end=document.cookie.indexOf(";",c_start);
      if (c_end==-1) c_end=document.cookie.length;
        return unescape(document.cookie.substring(c_start,c_end));
    }
}
return "";
  }

  function setCookie(c_name,value,expiredays){
var exdate=new Date();
exdate.setDate(exdate.getDate()+expiredays);
document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString());
  }

  function checkCookie(){
waktuy=getCookie('waktux');
if (waktuy!=null && waktuy!=""){
  time = waktuy;
}else{
  time = times;
  setCookie('waktux',times,7);
}
  }
</script>
</head>
<body onload="init()" onunload="keluar()">

<!--Start Header-->
<header class="page1">
  <div class="container_12">
    <div class="grid_12">
      <h1><a href="#" onClick="goToByScroll('page1'); return false;"><img height="30px" width="1300px" src="images/logo2.png" alt=""></a></h1>
        <div class="menu_block">
        <nav class="">
          <ul class="sf-menu">
            <li class="timer"><div id="divwaktu"></div></li>
            <li class="men1"><a href="index.php">Home</a><strong class="hover"></strong></li>
            <li class="men1"><a href="#">Save and Exit</a><strong class="hover"></strong></li>
            <li class="men1"><a href="index.php">End</a><strong class="hover"></strong></li>
            <?php 
            $cek = cek_login();
            
            if ($cek == 0){
              echo "<li class=\"men4\"><a href=\"index.php\">Login</a> <strong class=\"hover\"></strong></li>";
            }else{
              echo "<li class=\"men4\"><a href=\"proseslogout.php\">Logout</a> <strong class=\"hover\"></strong></li>";
            }
          ?>
        </ul>
        </nav>
      </div>
    </div>
  </div>
</header>
<!--End Header-->

<div id="page2" class="content">
<div class="container_12">
  <div class="grid_14">
    <div class="box">
    <div style="color:#666666; font-size:30px; padding-bottom:20px; ">Structure and Written Expression
      </div>

          <div class="box3"> <br>
          <form action="hasil_structure.php" method="POST" id="formulir">
            <?php
              include "connection.php";
              $soal = mysql_query("SELECT * FROM structure order by rand() limit 40");
              $no = 1;
              while($s = mysql_fetch_array($soal)){
              echo "$no. <b>".$s['pertanyaan']."</b><br>\n";
              echo "<input type=radio name=soal[".$s['no']."] value='a'>A. ".$s['a']."<br>\n";
              echo "<input type=radio name=soal[".$s['no']."] value='b'>B. ".$s['b']."<br>\n";
              echo "<input type=radio name=soal[".$s['no']."] value='c'>C. ".$s['c']."<br>\n";
              echo "<input type=radio name=soal[".$s['no']."] value='d'>D. ".$s['d']."<br><br><br>\n";
              $no++;
              }
              $jumlahsoal = $no - 1;
              echo "<input type='hidden' name='jumlahsoal' value= $jumlahsoal>";
            ?>
            <input style="width:200px; margin-left:180px; height:30px; border:1px; font-family:'Trebuchet MS'; font-size:15px;" type="submit" value="DONE"/><br><br>
        
          </form>
          
        </div>
    </div>
  </div>    
</div>
</div>
</body>
</html>

It looks like you have already started a new thread already asking for further help. Closing this thread.

1 Like