Timing feature utilized in a Web Application

My latest project involves developing a web-based testing application using CakePHP.

Here's how it works: when a user starts a test, the exact start time is stored on the web server. Once the test is completed and the answers are submitted, the server cross-checks the submission time with the initial start time. If the total time falls within a specified margin of error (e.g. 5 minutes), the test result is deemed valid.

I've successfully implemented this functionality and currently utilize the jQuery Countdown Plugin to display a timer for the client in their browser. This same timer also triggers an automatic form submission upon expiration.

The issue arises when the page is refreshed or navigated back and forth, as this inadvertently resets the timer. Although the total test duration is tracked and verified on the server side (thus preventing users from manipulating the timer and submitting fraudulent results), I'm curious if there's a way to address or warn against this behavior, or even better, automatically submit flagged instances of tampering (which would subsequently be rejected).

I have considered incorporating AJAX for this purpose, but have been advised against doing so by management citing bandwidth concerns (which I personally doubt). Does anyone have any suggestions or workarounds?

Thank you in advance!

javascriptajaxcakephptimer

Answer №1

To determine how much time a user has left in the test, first find the current server time and the start time of the test. Calculate the difference between these two times to know how long the user has been taking the test. Subtract this duration from the total time limit of 5 minutes to get the remaining time. If the result is less than zero, it indicates that the test time has expired.

Answer №2

To facilitate the synchronization of client-side timers, it is essential to consider setting the timer on page load by the server rather than relying solely on AJAX. While AJAX can be used to request the current time upon document.ready(), unnecessary HTTP requests can be avoided by initializing this value directly from the original server-provided page.

For instance, within the ExamsController::page() method for a page like /exams/page, you can implement the following:

$this->set( 'cur_time', date( 'm-d-Y', strtotime() );

In the corresponding view template, include the following code snippet:

<?php echo $cur_time; ?>

Enclose the above snippet in a JavaScript block to assign a JS variable for initializing the jQuery counter, which can resume counting post-page load completion. This approach ensures efficient utilization of resources without unnecessary data transfer!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Develop an ngDialog template that can be easily reused across different projects

I am interested in developing a reusable template for my application. As far as I know, it seems like you can't directly pass the title and body to ngDialog. What I'm looking for is something similar to the following : <div> <h2>{{ ...

javascriptangularjsng-dialog

Display a div every 3 seconds with the help of jQuery

I am seeking a solution to display the second div (box2) every 3 seconds. Can anyone help me achieve this using jQuery? <div id="box1" style="background-color:#0000FF"> <h3>This is a heading in a div element</h3> <p>This ...

javascriptjqueryhtmlcss

Using Angular.js to fetch information from a MySQL database

I'm currently trying to retrieve data from a MySQL database in an Angular.js application. I have gone through multiple tutorials, but unfortunately, none of them have been successful for me. I have a PHP script that returns a JSON array with example ...

javascriptphpmysqlangularjs

Drag and Drop File Upload plugin

I need a comprehensive example with code for the Really simple jQuery Ajax File Upload plugin. Unfortunately, the download links don't provide the complete code and example. Can someone please direct me to where I can find this information? ...

phpajax

Vue components failing to reflect code changes and update accordingly

Initially, the component functions properly, but subsequent changes require me to restart the server in order to see any updates. ...

javascriptlaravelvue.jswebvue-component

The action 'onDeleteClick' cannot be executed as the property is undefined

Why is the onDeleteClick function working on the first <div>, but returning undefined on the second one? I am able to access the reference of this, but when clicking, it shows "onDeleteClick of undefined". I am confused as to why the onDeleteClick f ...

javascriptreactjs

The closing dialogue feature is not functioning properly

Currently, I am working with primefaces version 5.0 and I have come across this particular scenario: <composite:implementation> <p:dialog id="confirmDialog#{cc.attrs.someParam}" rendered="#{cc.attrs ...

ajaxprimefaces

Is there a way to retrieve the dynamically generated text content of an element using document.write?

I am encountering an issue similar to the following: <div id="myDiv"><script>document.write('SOMETHING');</script></div> My goal is to extract the content inside the script tag, which in this case is "SOMETHING" ...

javascriptjquery

Is your custom login form in Web2py not submitting properly?

My attempt to customize the login form for web2py has hit a roadblock. Despite adding the necessary fields and submit button, nothing seems to be happening. Here's what the code in the form's view looks like: {{include 'web2py_ajax.html&apo ...

javascriptpythonhtmlformsweb2py

Changing a numeric string into a number within an Angular 2 application

Looking for advice on comparing Angular 2 expressions. I have an array of data stored as numeric strings in my database and I need to convert them to numbers before applying a condition with ngClass for styling purposes. Any suggestions on how to perform ...

javascriptangular

A guide to removing functions from the render method

Greetings! Currently, I am in the process of creating a simple webpage that utilizes a map function to display all details to the user. Some fellow developers have advised me to remove my functions from the render method, as it continuously renders unneces ...

javascriptreactjs

Using AJAX to dynamically load content from a Wordpress website

Currently, I have been experimenting with an AJAX tutorial in an attempt to dynamically load my WordPress post content onto the homepage of my website without triggering a full page reload. However, for some reason, when clicking on the links, instead of ...

javascriptjqueryhtmlajaxwordpress

Conceal All Other Divs upon Clicking on a New Div Bearing the Identical Class

I'm having trouble implementing the feature that closes other divs when I click on a new div with the same class. It seems like it should be straightforward, but for some reason, it's not working for me. Here is the link to the fiddle where I&apo ...

javascriptjqueryhtml

Next.js has a problem where it displays incorrect data when users navigate rapidly between pages

An unusual challenge has emerged while rendering data on a Next.js page in my application. Here's the scenario: I've created a Next.js page that showcases customer details based on a query parameter called cid. The page retrieves customer data an ...

javascriptreactjsnext.jsreact-hooksaxios

Durable Container for input and select fields

I need a solution for creating persistent placeholders in input and select boxes. For instance, <input type="text" placeholder="Enter First Name:" /> When the user focuses on the input box and enters their name, let's say "John", I want the pl ...

javascriptjqueryhtmldomplaceholder

Upon transitioning from typescript to javascript

I attempted to clarify my confusion about TypeScript, but I'm still struggling to explain it well. From my understanding, TypeScript is a strict syntactical superset of JavaScript that enhances our code by allowing us to use different types to define ...

javascripttypescripttsc

When a fetch request is called inside a map function in React, the return

I attempted to retrieve a map array through fetch resolves so that each element inside favoriteCards would return a value and assign it to the test variable useEffect(() => { const test = favoriteCards.map((card) => { accuWeatherApi.getCurrentW ...

javascriptreactjs

Facing an ESIDIR error in NextJs, despite the fact that the code was sourced from the official documentation

For an upcoming interview, I decided to dive into learning Next.js by following the tutorial provided on Next.js official website. Everything was going smoothly until I reached this particular section that focused on implementing getStaticProps. Followin ...

javascriptreactjsnext.js

Which HTML tags can be activated with JavaScript to be interactive?

I'm currently diving into the world of JavaScript and one of the initial code snippets I've encountered is onclick. So far, I've seen it utilized in form buttons like this: <input type="button" onclick="checkName()" value="Check name" / ...

javascripthtml

Issue - The module ./en.json could not be located when using the vue-i18n plugin

I recently integrated the i18n plugin into my existing Vue project to add localization. After following all the installation instructions from various sources (such as here), I made sure that each locale has its own file under /src/locales with the correct ...

javascriptjsonvue.jswebpackvue-i18n