Diaplaying fixed Time using Angular Js

Question

I am trying to display the Starting and Ending Time in online exam page. I have displayed the Starting Time of my exam page and now I trying to display the Ending Time by increasing the time in 1 minute every time whenever I opening the page using AngularJs only as shown below:

Question 1 of 5
Starting Time 6:39:23 pm
Ending Time 6:40:22 pm

Here the Code:

<!DOCTYPE html>
<html>
<head>
<meta charset="UFT-8">
<link rel="stylesheet" href="menu.css">
<link rel="stylesheet" href="layout.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
<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");
    if(pos >= questions.length){

        var showscore=Math.round(correct/questions.length*100);
        var minuteleft = parseInt((totalsecoriginal-totalsec) / 60, 10);
            var sec = (totalsecoriginal-totalsec) - (minuteleft * 60);

        document.getElementById("online_start").src = "animatedthankyou.gif";
        document.getElementById("showtime")

        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 :" + minuteleft + " Minutes :" + 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("starttime").style.display += 'none';
        document.getElementById("showtime").style.display += 'none';
                document.getElementById("endtime").style.display += 'none';
        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 totalsec = 60;
    var totalsecoriginal = totalsec;
        var f = new Date();


        function starttime() {
            showtime();


        }


        function showtime() {

                     //console.log('showtime');
            // first check if exam finished
            if (pos >= questions.length) 
            {
            clearTimeout(tim);
            return;
            }

            totalsec--;

         var min = parseInt(totalsec / 60, 10);
            var sec = totalsec - (min * 60);

             if (parseInt(sec) > 0) {
            document.getElementById("showtime").innerHTML = "Your Left Time is :" + min + " Minutes :" + sec + " Seconds";
            tim = setTimeout("showtime()", 1000);
            }

         else {
            if (parseInt(sec) == 0) {
            document.getElementById("showtime").innerHTML = "Your Left Time is :" + min + " Minutes :" + sec + " Seconds";

            if (parseInt(min) == 0) {
                clearTimeout(tim);
                alert("Time Up");
        window.location.href = "Loginpage.htm";
                    }
                    else {

                        document.getElementById("showtime").innerHTML = "Your Left Time is :" + min + " Minutes :" + sec + " Seconds";
                        tim = setTimeout("showtime()", 1000);
                    }
                }

            }
        }



    var app = angular.module('MyApp',[])
        app.controller('MyController',function($scope,$window,$interval,$timeout,$filter){



                var date=new Date();
        $scope.hhmmss = $filter('date')(new Date(), 'hh:mm:ss a');



        //CountDown TImer uisng Angular JS

        var tim;
            $scope.totalsec = 60;
            var countdowntime= function(){
        $scope.totalsec--;
        $scope.min = parseInt($scope.totalsec / 60, 10);
            $scope.sec = $scope.totalsec - ($scope.min * 60);

        if($scope.sec >0){
        tim = $timeout(countdowntime, 1000);
        }else if($scope.sec ==0){
            $timeout.cancel(tim);
            $window.alert("Time Up");

        }

        };

        countdowntime();


});

</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">
<div ng-app="MyApp" ng-controller="MyController"  ng-init="StartTimer()">
<table>
    <tr>
          <td id="test_status"  style="text-align:left" ></td>
          <td id="starttime"    style="text-align:right"></td> 
     <td>Exam Starts :<span ng-bind = "hhmmss"></span></td>
      <td id="endtime"  style="text-align:right"></td>
    </tr>

    <tr>
    <td id="test" colspan="2"></td>
    </tr>


</table> 


  -----------  Angular Js Starting  -------------------
<br>
Your Left Time is :{{min}} Minutes:{{sec}} Seconds<br> 
</div>
-----------  Angular Js Ending -------------------
<br>

<div id="showtime" ></div>

</section>
</div>

</div>


<div id="Footer">Developed by - K.P.RAJU</div>


</div>

<script src="moment.js"></script>

</body>
</html>

Can anyone help to display the Ending Time?

score 0 · Answer 1 · answered Aug 16 '16 at 13:41

The amount of code is a bit too complex for me to edit myself, but I've written you a quick example of how I would go about representing a start time with a timer counting up. I included a stop button to tell it when to stop but you could stop it however you like:

https://plnkr.co/edit/ZBZDwC1qkh8S13vH0gSe?p=preview

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $timeout) {

  $scope.currentTime = new Date();
  $scope.startTime = angular.copy($scope.currentTime);

  var timer;

  $scope.stopCounter = function() {
      $timeout.cancel(timer);
  };

  var updateCounter = function() {
      $scope.currentTime.setSeconds($scope.currentTime.getSeconds() + 1)

      // Set the value to 60000 because you requested a minute apart

      timer = $timeout(updateCounter, 60000);
  };

  updateCounter();

});

Html

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js" data-semver="1.4.6"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <p>Start time : {{startTime | date : 'medium'}} </p>
    <p>Current time : {{currentTime | date : 'medium'}}</p>
    <p><button ng-click="stopCounter()">Stop</button></p>
  </body>

</html>

score 0 · Answer 2 · edited May 23 '17 at 12:14

0

Have you tried

var endTime= new Date();
endTime.setMinutes(endTime.getMinutes() + 1);

It'll also take care of hours, in case of 59 minutes

Credits to: How to add 20 minutes to a current date?

edited May 23 '17 at 12:14

Community

1
1

answered Aug 16 '16 at 13:46

madasu naga

154
8

Diaplaying fixed Time using Angular Js

2 Answers2