Trouble: Timer countdown and alert

JavaScript
1

i want to make a multiple choice that the question will be displaying one by one by clicking next. i make the time in 10 minute. but when i click next, the time was staring again from 10 minute. not continue. and i want to make an alert if the time was over, then it directly go to result. please help

code:

<?php
error_reporting(0);

$randomizequestions ="yes";
$a = array(
1 => array(
   0 => "____ is a question that concerns the researchers who have been studying it.",
   1 => "Because the spotted owl’s survival",
   2 => "Whether the spotted owl can survive",
   3 => "Can the spotted owl’s survival",
   4 => "The spotted owl could survive",
   6 => 2
),
2 => array(
   0 => "Most shrubs should be fertilized early in the summer ____ late fertilizing can damage some plants.",
   1 => ". Only if",
   2 => "; in fact,",
   3 => ", which",
   4 => ": because",
   6 => 2
),
3 => array(
   0 => "In the eighth century, the calendar used in Europe was not as _____ used by the Mayans in Central America.",
   1 => "accurately as",
   2 => "accurate than",
   3 => "accurate as that",
   4 => "accurate that was",
   6 => 3
),
4 => array(
   0 => "_____ crude hydrocarbons into such products as gasoline and petrochemicals is at the heart of the petroleum industry.",
   1 => "Refine",
   2 => "Are refined",
   3 => "By refining",
   4 => "Refining",
   6 => 4
),
5 => array(
   0 => "We ____ visit Eric when we are in London.",
   1 => "ought  ",
   2 => "should  ",
   3 => "didn’t ought   ",
   4 => "ought to",
   6 => 2
),
6 => array(
   0 => "I hardly ever go swimming _______.",
   1 => "nowadays",
   2 => "soon",
   3 => "today",
   4 => "everydays",
   6 => 1
),
7 => array(
   0 => "Which word goes in the space? Can you look after the ___ rabbit while we are on holiday?",
   1 => "childrens’s  ",
   2 => "childrens’  ",
   3 => "children’s ",
   4 => "child",
   6 => 3
),
8 => array(
   0 => "The hummingbird’s agility in flight lets it ____ from flower to flower like an insect.",
   1 => "flit",
   2 => "flitting",
   3 => "to flit",
   4 => "flits",
   6 => 1
),
9 => array(
   0 => "We went to the cinema and we went out for a drink ___.",
   1 => "afterwards",
   2 => "after",
   3 => "then",
   4 => "and then",
   6 => 1

),
10 => array(
   0 => "Do ____ of you have any money I can borrow?",
   1 => "either  ",
   2 => "both  ",
   3 => "neither",
   4 => "Theres No Answer",
   6 => 1
),
11 => array(
   0 => "Justice Sandra Day O'connor was _____ to serve on the U.S Supreme Court.",
   1 => "the women who first",
   2 => "the first woman ",
   3 => "who the fisrt woman",
   4 => "the first and a woman",
   6 => 2
),
12 => array(
   0 => "North Carolina is well known not only for the Great Smoky Mountains National Park ____ for the Cherokee settlements",
   1 => "but also",
   2 => "also",
   3 => "because",
   4 => "because of",
   6 => 1
),
13 => array(
   0 => "Humans _____ by what holds objects together.",
   1 => "always fascinated",
   2 => "have always fascinated",
   3 => "always has been fascinated",
   4 => "have always been fascinated",
   6 => 4
),
14 => array(
   0 => "In eastern Canada _____ approaches two hundred inches in Quebec and Newfoundland.",
   1 => "where the seasonal rainfall",
   2 => "the seasonal rainfall",
   3 => "that the seasonal rainfall",
   4 => "the seasonal rainfall it",
   6 => 4
),
15 => array(
   0 => "Large, fast–moving trucks have been known to create blasts of wind _____ a motorcyclist.",
   1 => "can startle",
   2 => "can they startle",
   3 => "that can startle",
   4 => "are startling",
   6 => 3
),
);

$max=15;

$question=$_POST["question"] ;

if ($_POST["Randon"]==0){
        if($randomizequestions =="yes"){$randval = mt_rand(1,$max);}else{$randval=1;}
        $randval2 = $randval;
        }else{
        $randval=$_POST["Randon"];
        $randval2=$_POST["Randon"] + $question;
                if ($randval2>$max){
                $randval2=$randval2-$max;
                }
        }

$ok=$_POST["ok"] ;

if ($question==0){
        $question=0;
        $ok=0;
        $percentaje=0;
        }else{
        $percentaje= Round(100*$ok / $question);
        }

if ($persentaje == 100){
        $hasil="C2 Proficiency";
      }elseif ($persentaje > 80) {
        $hasil="C1 Advanced";
      }elseif ($persentaje > 60) {
        $hasil="B2 Upper Intermediate";
      }elseif ($persentaje > 50) {
        $hasil="B1 Intermediate";
      }elseif ($persentaje > 40) {
        $hasil="A2 Pre Intermediate";
      }elseif ($persentaje > 30) {
        $hasil="A2 Elementary";
      }else {
        $hasil="A1 Beginner";
      }    
?>



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

<script language='JavaScript'>
<!-- 
function Goahead (number){
        if (document.percentaje.response.value==0){
                if (number==<?php print $a[$randval2][6] ; ?>){
                        document.percentaje.response.value=1
                        document.percentaje.question.value++
                        document.percentaje.ok.value++
                }else{
                        document.percentaje.response.value=1
                        document.percentaje.question.value++
                }
        }
        if (number==<?php print $a[$randval2][6] ; ?>){
                document.question.response.value="Correct"
        }else{
                document.question.response.value="Incorrect"
        }
}
$(document).ready(function() {
var detik = 3;
var menit = 0;
var jam = 1;
function hitung() {
setTimeout(hitung,1000);
$('#tampilkan').html( + menit + ' Menit ' + detik + ' Detik ');
detik --;
if(detik < 0) {
detik = 59;
menit --;
if(menit < 0) {
menit = 9;
jam --;
if(jam < 0) {
jam = 0;
menit = 0;
detik = 0;
}
}
}
}
hitung();
});
// -->
</script>

</head>
<body>
<div id="page2" class="content"> 
  <div class="container_12">\
  <div class="grid_14">
    <div class="box">
      <div id="tampilkan" class="slogan4" style="color:black; margin-left:150px; width:620px; padding:10px 0px; font-size:17px;">
      </div>
          <div class="box3">
            <table border="0" cellspacing="5px" width="580px">
              <?php if ($question<$max){ ?>
              <tr><td>
                <hr>
              </td></tr>


              <tr><td>
              <form method="POST" name="question" action="">
              <br><strong><?php print $question+1; ?>. </strong><?php print "<b>".$a[$randval2][0]."</b>"; ?>
                <br><input type="radio" name="option" value="1"  onClick="Goahead (1);"><?php print $a[$randval2][1] ; ?>
                <br><input type="radio" name="option" value="2"  onClick="Goahead (2);"><?php print $a[$randval2][2] ; ?>
                <?php if ($a[$randval2][3]!=""){ ?>
                <br><input type="radio" name="option" value="3"  onClick="Goahead (3);"><?php print $a[$randval2][3] ; } ?>
                <?php if ($a[$randval2][4]!=""){ ?>
                <br><input type="radio" name="option" value="4"  onClick="Goahead (4);"><?php print $a[$randval2][4] ; } ?>

                <br><br>
              </form>
              <tr><td>
              <form method="POST" name="percentaje" action="<?php print $URL; ?>">
                <input type="hidden" name="response" value=0>
                <input type="hidden" name="question" value=<?php print $question; ?>>
                <input type="hidden" name="ok" value=<?php print $ok; ?>>
                <input type="hidden" name="Randon" value=<?php print $randval; ?>>
                <input style="font-family:Trebuchet ms; font-size:14.5px; width:80px; border:1px;" type="submit" value="Next">

              <br><br></form>
              </td></tr>
              <?php
              }else{
              ?>
              <tr><td align="center">
              The Quiz has finished<br>
              <br>Percentage of correct responses: <?php print $percentaje ; ?> %
              <br>Hasil: <?php print $hasil ?>
              <p><a href="<?php print $address; ?>">Restart</a>

              <?php } ?>

              </td></tr>

            </table>
          </div>
        </div>
    </div>
  </div>
  </div>
</div>
</body>
</html>
2

Hi endone,

I’ll describe how I would approach it and you can see the different ways it can be done.

I can’t see anything in the PHP that the JavaScript can’t do so I would the remove the PHP entirely.

Mixing server-side and client-side code in the templates is usually a bad idea but if you wanted to keep the php all it should be doing is dumping a javascript object in the page and then the js has everything it needs, I think something like this should work.

<script>
var data = JSON.parse(<?php json_encode($a) ?>);
</script>

The data itself can be better structured than a multidimensional array.

var questions = [{
  question: "____ is a question that concerns the researchers who have been studying it.",
  answer: 2,
  answers: [
    "Because the spotted owl’s survival",
    "Whether the spotted owl can survive",
    "Can the spotted owl’s survival",
    "The spotted owl could survive"
  ]
}]

Something like that is much easier to work with in js because the properties have proper names.

Then I’d want to make a client side template which would render the form for a given question, add a timer for the countdown show messages if a selection is correct or incorrect.

It depends on what you need to save on the server.

3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.