Question

我正在尝试设置＆＃34;计时器＆＃34;对于使用html和JavaScript的在线考试页面，您可以在下面看到代码。但我有问题：

问题：

a）我需要在固定时间显示考试应该在固定时间内完成的时间。如果考官未能及时完成考试，那么页面应显示关于＆＃34;时间的警告信息up＆＃34; 并且必须显示用户尝试的总答案的最后一页，用户完成考试的成绩和时间。

b）我们可以看到在＆＃34;你的左手时间是：1分钟：53秒＆＃34; 在我的页面底部保持 min = 1 。但它显示如下你的左手时间是0分钟：59秒因为我保持min = 1

c）在这里，我希望显示小时，分钟和秒的完美时间，如果小时，分钟和秒有任何变化，将来会如何。

代码：

<!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 company 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>

可以解决这个问题。

Answer 1

首先，您可能更好地使用PHP或使用程序进行测试。这只是因为我可以通过输入我自己的时间或绕过时间的上行部分来欺骗计时器。当我说如果发现这一点时，相信我作为一名学生，你将永远不会得到你的考试。

在这里你指定他们只剩下60秒，因为你在显示时间而不是实际当前时间时调用秒的值

            else {
                sec = 60;

假设是时间？

   tim = setTimeout("....

我可能错过了其他的东西，所以请回去告诉我，我是否有任何帮助

Answer 2

为了安全注意每个人都可以在这里操纵时间并查看完整的答案。如果这只是对课程的潜在检查，那么这是一种“好”的方式。但是不要将它用于现场考试。

A，显示完成时间

利用库添加秒数，以便显示

  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，显示剩余时间

保持总时间并在函数showtime（）的开头减去

C格式时间

我建议你使用moment.js格式化时间。不要重新发明轮子。显示您可以使用此语法的时间

moment().format('h:mm:ss a');

我在这里调整你的小提琴

https://jsfiddle.net/fs6xaeox/13/

使用javascript和html设置在线考试的计时器

2 个答案: