I am trying to set a "Timer" for my online exam page using html and JavaScript where you can see code below. But I have problems:
Problem :
a) I need to show the time on fixed time where exam should plete on fixed time .If examiner is not able to plete the exam in time, then the page should show alert message about "Time up" and must show the last page of total answer that user has attempted,grade and time that user has finished the exam.
b)we can see running as following "Your Left Time is :1 Minutes :53 Seconds" at the bottom of my page where I have kept min=1 .But it show like this Your Left Time is 0 Minutes :59 Seconds because I have kept min=1
c) Here I want to show the perfect time with hours,minutes and seconds where in future if there any changes in hours,minutes and sec.
JSFiddle: /
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UFT-8">
<link rel="stylesheet" href="menu.css">
<link rel="stylesheet" href="layout.css">
<script>
var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
var questions = [
[ "Which of the following a is not a keyword in Java ?", "class", "interface", "extends", "C" ],
[ "Which of the following is an interface ?", "Thread", "Date", "Calender", "A" ],
[ "Which pany released Java Version 8 ?", "Sun", "Oracle", "Adobe", "A" ],
[ "What is the length of Java datatype int ?", "32 bit", "16 bit", "None", "C" ],
[ "What is the default value of Java datatype boolean?","true","false","0","A"]
];
function _(x){
return document.getElementById(x);
}
function renderQuestion(){
test = _("test");
var showscore=Math.round(correct/questions.length*100);
if(pos >= questions.length){
document.getElementById("online_start").src = "animatedthankyou.gif";
test.innerHTML = "<h3>You got "+correct+" correct of "+questions.length+" questions</h3>";
test.innerHTML += "<h3> Your Grade : "+showscore +"% </h3>";
test.innerHTML +="<h4>Exam Finished in Time:" + sec+" Seconds</h4>";
test.innerHTML += "<button onclick='EndExam()'>End the Exam</button>";
_("test_status").innerHTML = "<h3>Test Completed</h3>";
pos = 0;
correct = 0;
clearTimeout(tim);
//document.getElementById("endtime").innerHTML = "<h4>Finished Time:"+min+" Minutes :" + sec+" Seconds</h4>";
document.getElementById("starttime").style.display += 'none';
document.getElementById("showtime").style.display += 'none';
//document.getElementById("showtime").style.display += 'block';
return false;
}
_("test_status").innerHTML = "<h3>Question "+(pos+1)+" of "+questions.length+"</h3>";
question = questions[pos][0];
chA = questions[pos][1];
chB = questions[pos][2];
chC = questions[pos][3];
test.innerHTML = "<h3>"+question+"</h3>";
test.innerHTML += "<input type='radio' name='choices' value='A'> "+chA+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='B'> "+chB+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='C'> "+chC+"<br><br>";
test.innerHTML += "<button onclick='checkAnswer()'>Next</button><br><br>";
}
function checkAnswer(){
choices = document.getElementsByName("choices");
choice=-1;
for(var i=0; i<choices.length; i++){
if(choices[i].checked){
choice = choices[i].value;
}
}
if(choice == questions[pos][4]){
correct++;
}
pos++;
renderQuestion();
}
window.addEventListener("load", renderQuestion, false);
function EndExam(){
location.href="Loginpage.htm";
}
var tim;
var showscore=Math.round(correct/questions.length*100);
var min = 1;
var sec = 60;
var f = new Date();
function starttime() {
showtime();
document.getElementById("starttime").innerHTML = "<h4>You started your Exam at " + f.getHours() + ":" + f.getMinutes()+"</h4>";
}
function showtime() {
if (parseInt(sec) > 0) {
sec = parseInt(sec) - 1;
document.getElementById("showtime").innerHTML = "Your Left Time is :"+min+" Minutes :" + sec+" Seconds";
tim = setTimeout("showtime()", 1000);
}
else {
if (parseInt(sec) == 0) {
min = parseInt(min) - 1;
document.getElementById("showtime").innerHTML = "Your Left Time is :"+min+" Minutes :" + sec+" Seconds";
if (parseInt(min) == 0) {
clearTimeout(tim);
alert("Time Up");
/*_("test_status").innerHTML = "Test Completed";
test.innerHTML = "<h2>You got "+correct+" of "+questions.length+" questions correct</h2>";
test.innerHTML = "<h2>You got "+showscore +"% out of "+questions.length+"</h2>";
test.innerHTML = "<button onclick='EndExam()'>End the Exam</button>";
pos = 0;
correct = 0;
clearTimeout(tim);
document.getElementById("endtime").innerHTML = "You Finished exam at Time is :"+min+" Minutes :" + sec+" Seconds";
document.getElementById("starttime").style.display += 'none';
document.getElementById("showtime").style.display += 'none';
//document.getElementById("showtime").style.display += 'block';
return false;*/
window.location.href = "Loginpage.htm";
}
else {
sec = 60;
document.getElementById("showtime").innerHTML = "Your Left Time is :" + min + " Minutes :" + sec + " Seconds";
tim = setTimeout("showtime()", 1000);
}
}
}
}
</script>
</head>
<body onload="starttime()" >
<div id="Holder">
<div id="Header"></div>
<div id="NavBar">
<nav>
<ul>
<li><a href="Loginpage.htm"> Login</a></li>
<li><a href="Registrationpage.htm">Registration</a></li>
</ul>
</div>
<div id="Content">
<div id="PageHeading">
<h1><marquee direction="right" behavior="alternate">All the Best</marquee></h1>
</div>
<div id="ContentLeft">
<h2></h2><br>
<img id="online_start">
<br>
<h6>Online Examination System(OES) is a Multiple Choice Questions(MCQ) based
examination system that provides an easy to use environment for both
Test Conducters and Students appearing for Examination.</h6>
</div>
<div id="ContentRight">
<section class="loginform_cf">
<table>
<tr>
<td id="test_status" style="text-align:left" ></td>
<td id="starttime" style="text-align:right"></td>
</tr>
<tr>
<td id="test" colspan="2"></td>
</tr>
</table>
<div id="showtime" ></div>
</section>
</div>
</div>
<div id="Footer">Developed by - K.P.RAJU</div>
</div>
</body>
</html>
can any help for this problem.
I am trying to set a "Timer" for my online exam page using html and JavaScript where you can see code below. But I have problems:
Problem :
a) I need to show the time on fixed time where exam should plete on fixed time .If examiner is not able to plete the exam in time, then the page should show alert message about "Time up" and must show the last page of total answer that user has attempted,grade and time that user has finished the exam.
b)we can see running as following "Your Left Time is :1 Minutes :53 Seconds" at the bottom of my page where I have kept min=1 .But it show like this Your Left Time is 0 Minutes :59 Seconds because I have kept min=1
c) Here I want to show the perfect time with hours,minutes and seconds where in future if there any changes in hours,minutes and sec.
JSFiddle: https://jsfiddle/fs6xaeox/
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UFT-8">
<link rel="stylesheet" href="menu.css">
<link rel="stylesheet" href="layout.css">
<script>
var pos = 0, test, test_status, question, choice, choices, chA, chB, chC, correct = 0;
var questions = [
[ "Which of the following a is not a keyword in Java ?", "class", "interface", "extends", "C" ],
[ "Which of the following is an interface ?", "Thread", "Date", "Calender", "A" ],
[ "Which pany released Java Version 8 ?", "Sun", "Oracle", "Adobe", "A" ],
[ "What is the length of Java datatype int ?", "32 bit", "16 bit", "None", "C" ],
[ "What is the default value of Java datatype boolean?","true","false","0","A"]
];
function _(x){
return document.getElementById(x);
}
function renderQuestion(){
test = _("test");
var showscore=Math.round(correct/questions.length*100);
if(pos >= questions.length){
document.getElementById("online_start").src = "animatedthankyou.gif";
test.innerHTML = "<h3>You got "+correct+" correct of "+questions.length+" questions</h3>";
test.innerHTML += "<h3> Your Grade : "+showscore +"% </h3>";
test.innerHTML +="<h4>Exam Finished in Time:" + sec+" Seconds</h4>";
test.innerHTML += "<button onclick='EndExam()'>End the Exam</button>";
_("test_status").innerHTML = "<h3>Test Completed</h3>";
pos = 0;
correct = 0;
clearTimeout(tim);
//document.getElementById("endtime").innerHTML = "<h4>Finished Time:"+min+" Minutes :" + sec+" Seconds</h4>";
document.getElementById("starttime").style.display += 'none';
document.getElementById("showtime").style.display += 'none';
//document.getElementById("showtime").style.display += 'block';
return false;
}
_("test_status").innerHTML = "<h3>Question "+(pos+1)+" of "+questions.length+"</h3>";
question = questions[pos][0];
chA = questions[pos][1];
chB = questions[pos][2];
chC = questions[pos][3];
test.innerHTML = "<h3>"+question+"</h3>";
test.innerHTML += "<input type='radio' name='choices' value='A'> "+chA+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='B'> "+chB+"<br>";
test.innerHTML += "<input type='radio' name='choices' value='C'> "+chC+"<br><br>";
test.innerHTML += "<button onclick='checkAnswer()'>Next</button><br><br>";
}
function checkAnswer(){
choices = document.getElementsByName("choices");
choice=-1;
for(var i=0; i<choices.length; i++){
if(choices[i].checked){
choice = choices[i].value;
}
}
if(choice == questions[pos][4]){
correct++;
}
pos++;
renderQuestion();
}
window.addEventListener("load", renderQuestion, false);
function EndExam(){
location.href="Loginpage.htm";
}
var tim;
var showscore=Math.round(correct/questions.length*100);
var min = 1;
var sec = 60;
var f = new Date();
function starttime() {
showtime();
document.getElementById("starttime").innerHTML = "<h4>You started your Exam at " + f.getHours() + ":" + f.getMinutes()+"</h4>";
}
function showtime() {
if (parseInt(sec) > 0) {
sec = parseInt(sec) - 1;
document.getElementById("showtime").innerHTML = "Your Left Time is :"+min+" Minutes :" + sec+" Seconds";
tim = setTimeout("showtime()", 1000);
}
else {
if (parseInt(sec) == 0) {
min = parseInt(min) - 1;
document.getElementById("showtime").innerHTML = "Your Left Time is :"+min+" Minutes :" + sec+" Seconds";
if (parseInt(min) == 0) {
clearTimeout(tim);
alert("Time Up");
/*_("test_status").innerHTML = "Test Completed";
test.innerHTML = "<h2>You got "+correct+" of "+questions.length+" questions correct</h2>";
test.innerHTML = "<h2>You got "+showscore +"% out of "+questions.length+"</h2>";
test.innerHTML = "<button onclick='EndExam()'>End the Exam</button>";
pos = 0;
correct = 0;
clearTimeout(tim);
document.getElementById("endtime").innerHTML = "You Finished exam at Time is :"+min+" Minutes :" + sec+" Seconds";
document.getElementById("starttime").style.display += 'none';
document.getElementById("showtime").style.display += 'none';
//document.getElementById("showtime").style.display += 'block';
return false;*/
window.location.href = "Loginpage.htm";
}
else {
sec = 60;
document.getElementById("showtime").innerHTML = "Your Left Time is :" + min + " Minutes :" + sec + " Seconds";
tim = setTimeout("showtime()", 1000);
}
}
}
}
</script>
</head>
<body onload="starttime()" >
<div id="Holder">
<div id="Header"></div>
<div id="NavBar">
<nav>
<ul>
<li><a href="Loginpage.htm"> Login</a></li>
<li><a href="Registrationpage.htm">Registration</a></li>
</ul>
</div>
<div id="Content">
<div id="PageHeading">
<h1><marquee direction="right" behavior="alternate">All the Best</marquee></h1>
</div>
<div id="ContentLeft">
<h2></h2><br>
<img id="online_start">
<br>
<h6>Online Examination System(OES) is a Multiple Choice Questions(MCQ) based
examination system that provides an easy to use environment for both
Test Conducters and Students appearing for Examination.</h6>
</div>
<div id="ContentRight">
<section class="loginform_cf">
<table>
<tr>
<td id="test_status" style="text-align:left" ></td>
<td id="starttime" style="text-align:right"></td>
</tr>
<tr>
<td id="test" colspan="2"></td>
</tr>
</table>
<div id="showtime" ></div>
</section>
</div>
</div>
<div id="Footer">Developed by - K.P.RAJU</div>
</div>
</body>
</html>
can any help for this problem.
Share Improve this question edited Aug 9, 2016 at 5:32 invernomuto 10.2k5 gold badges42 silver badges53 bronze badges asked Aug 9, 2016 at 5:13 user3172464user3172464 911 silver badge9 bronze badges 3- please create a demo – brk Commented Aug 9, 2016 at 5:19
- updated fiddle, jsfiddle/fs6xaeox/4 totalsec introduced, min and sec is calculated from totalsec – lordkain Commented Aug 9, 2016 at 5:49
- Be careful, everyone can read the answers to your questions. They just have to open the developers tools..... I would advise to do the checking of the correct answer on the server side, and limit the checking of a correct answer per user to once. – LEDfan Commented Aug 9, 2016 at 6:05
2 Answers
Reset to default 3First off, you might be better using either PHP, or using a program for the testbuilding. This is simply because I can trick the timer by either inputting my own time left, or bypassing the time's up portion. And trust me as a student when I say that if this is discovered, you will literally never get your tests.
Here you are specifying that they only have 60 seconds left, as you call the value of sec when displaying the time, rather than the actual current time
else {
sec = 60;
Supposed to be time?
tim = setTimeout("....
I may have missed other things, so do get back and tell me if I was any way helpful
just to be safe take notice of that everyone can manipulate the time here and see full answers. If this is just a pre check for subsribe to a course then this is a "good" way. But don't use this for live exams.
A, show time to plete
make use of library to add seconds, and so to display
var showcurtime = moment();
var curtimeformat = showcurtime.format('h:mm:ss a');
var showendtime = showcurtime.add(totalsec, 's');
var endtimeFormat = showendtime.format('h:mm:ss a');
console.log(curtimeformat);
console.log(endtimeFormat);
B, show time left
keep total time and subtract in beginning of function showtime()
C format time
I suggest you use moment.js to format the time. dont reinvent the wheel. to display the time you can use this syntax
moment().format('h:mm:ss a');
I adjust your fiddle here
https://jsfiddle/fs6xaeox/13/