Count Down Timer in Asp.Net MVC For Exams

 

Hi I search a lot on the Internet for the to make the timer control as in Asp.Net Web Forms. Which execute with every second and end the test once the time finished the exam will be submitted or showed message expired.

Then i right the custom javascript code to made the time in which we assign the end time for the timer and once the timer is finished. It will redirect to another page.

Let Start Demo.

 

First you have to Create a MVC Application. Here i m using the basic template for asp.net which comes with build in authentication features.

Once you creates the project you will get the Following Screen and Project Structure.

Project Structure

Now we have a 2 Goals Here

  1. Timer Should be Start from where we left after the post back.
  2. After the time finish user must redirect to Home Page.

 

For this First we have to set the end time of the Timer.

so for Example if i want to Set the time for 2 minutes. I will pass the end time to my View through “ViewBag“.

 public ActionResult Index()
 {
    if (Session["EndDate"] == null)
    {
      Session["EndDate"] = DateTime.Now.AddMinutes(1).ToString("dd-MM-yyyy h:mm:ss tt");
    }
    ViewBag.Message = "Modify this template to jump-start your ASP.NET MVC application.";
    ViewBag.EndDate = Session["EndDate"];
    return View();
 }



and Write the Following code on the View.

  <script>
    var dt = '@ViewBag.EndDate';
    var dateAr = dt.split('-');
    var newDate = dateAr[1] + '/' + dateAr[0] + '/' + dateAr[2];

    var end = new Date(dateAr[1] + '/' + dateAr[0] + '/' + dateAr[2]);

    var _second = 1000;
    var _minute = _second * 60;
    var _hour = _minute * 60;
    var _day = _hour * 24;
    var timer;

    function showRemaining() {
       var now = new Date();
       var distance = end - now;
       if (distance < 0) {
           clearInterval(timer);
           document.getElementById('countdown').innerHTML = 'EXPIRED!';
           window.location.href = '/Home/Index';

           return;
       }
    var days = Math.floor(distance / _day);
    var hours = Math.floor((distance % _day) / _hour);
    var minutes = Math.floor((distance % _hour) / _minute);
    var seconds = Math.floor((distance % _minute) / _second);


    document.getElementById('countdown').innerHTML = hours + 'hrs ';
    document.getElementById('countdown').innerHTML += minutes + 'mins ';
    document.getElementById('countdown').innerHTML += seconds + 'secs';
   }

    timer = setInterval(showRemaining, 1000);
 </script>
 And Create a element on with ID=countdown i prefer create grid.
I create this code on Layout page and and Element on the top of the page.
so once i run the site the timer starts and it will end after exact two minutes.
and if went 2 other page also then it runs from the same place where we left. so the student will get exact 2 min to finish the exam.

 

You can  download the Sample Here

3 Thoughts on “Count Down Timer in Asp.Net MVC For Exams

  1. I need to to thank you for this good read!! I definitely enjoyed every bit of it. I have you saved as a favorite to check out new stuff you post…

  2. Great blog right here! Additionally your website so much up
    fast! What web host are you using? Can I get your associate link for your host?

    I wish my site loaded up as fast as yours lol

  3. FabianKeync on February 22, 2019 at 8:53 am said:

    HELLO Nothing to say about me at all.
    Lovely to be a part of this site.
    I just wish I am useful at all

Leave a Reply

Your email address will not be published. Required fields are marked *

Post Navigation