Commit 01ea5936 authored by William Paul Liggett's avatar William Paul Liggett

Countdown Timer: Built an efficient and elegant countdown timer script to be...

Countdown Timer: Built an efficient and elegant countdown timer script to be used during the breaks.
parent 45d5af74
......@@ -39,7 +39,7 @@
<p class="version_info"><strong>TO DO:</strong></p>
<ol>
<li>Test Conditions #1, 3, and 4: Visually show the correct durations for the tasks and break depending on the test
condition. This includes the countdown clocks and embedding a nature video for test condition #3. [Estimate: 3 hours]</li>
condition. This includes embedding a nature video for test condition #3. [Estimate: 3 hours]</li>
<li>Log Data to CSV: Using the two raw CSV files, build a single, collated CSV to produce a data analysis report.
[Estimate: 2 hours remaining]</li>
......@@ -51,8 +51,11 @@
</ol>
<p class="version_info">Version 1.7.5 (2018-03-19):</p>
<p><em>Estimated labor time: <span id="hours_logged_for_update_16">0.25</span> hours.</em></p>
<p><em>Estimated labor time: <span id="hours_logged_for_update_16">2.75</span> hours.</em></p>
<ul>
<li>
Countdown Timer: Built an efficient and elegant countdown timer script to be used during the breaks.
</li>
<li>
App Settings: A site-wide settings file has now been defined to ensure the app works on different web
servers to avoid configuration headaches.
......
......@@ -79,6 +79,55 @@ var ov_participant_response_time = -1;
// (57.5/60) * 1000 = 958.333333333 ms [Note: 1000 ms = 1 second]
const EVENTS_PER_MINUTE = (57.5/60) * 1000;
// Countdown Timer: Used during the breaks between vigilance tasks.
function countdownTimer(seconds_remaining = 30) {
// Efficient jQuery selectors.
var ov_timer_minutes = $("#ov_timer_minutes");
var ov_timer_minutes_label = $("#ov_timer_minutes_label");
var ov_timer_seconds = $("#ov_timer_seconds");
// Gets the current time (ms since Unix epoch) and adds the seconds remaining (in ms).
var countdown_to_time = Date.now() + (seconds_remaining * 1000);
// Performs the countdown, updates the display, and does this every 1 second.
var countdown_interval = setInterval(function() {
// Unix epoch format (in ms).
var remaining_time_in_ms = countdown_to_time - Date.now();
// Converts the remaining time to a Date() object and tracks the minutes and seconds left.
var remaining_time_object = new Date(remaining_time_in_ms);
var minutes_left = remaining_time_object.getMinutes();
var seconds_left = remaining_time_object.getSeconds();
// If the remaining time is within the 1 minute range, then it'll say "minute". Otherwise it'll say "minutes".
// This is because it sounds better to say "1 minute", "2 minutes", and so on.
if(remaining_time_in_ms <= 120000 && remaining_time_in_ms >= 60000) {
ov_timer_minutes_label.html(" minute and ");
}
// If the time is less than 1 minute, then we'll remove the "X minutes" display to only show the seconds remaining.
else if(remaining_time_in_ms <= 60000) {
ov_timer_minutes.html("");
ov_timer_minutes_label.html("");
minutes_left = "";
}
// For any time at or above 2 minutes, it'll show: X minutes and Y seconds
else {
ov_timer_minutes_label.html(" minutes and ");
}
// Stops the countdown timer at 0 minutes and 0 seconds.
if(remaining_time_in_ms <= 1000) {
clearInterval(countdown_interval);
}
// Outputs the time left to the user.
ov_timer_minutes.html(minutes_left);
ov_timer_seconds.html(seconds_left);
}, 1000); // The timer updates every 1000 ms (1 sec).
}
// Function by Mozilla Contributors, Feb 2018
// Source: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
// License: CC By-SA 2.5 [http://creativecommons.org/licenses/by-sa/2.5/]
......@@ -433,11 +482,11 @@ var ov_participant_response_time = -1;
var thirty_seconds_in_ms = parseFloat(30000); // 30 seconds = 30,000 ms [Used between the practice and the real test.]
var practice_time_in_ms = thirty_seconds_in_ms; // Practice Test is only 30 seconds for now.
//var twelve_minutes_in_ms = parseFloat(720000); // 12 minutes = 720,000 ms
//var four_minutes_in_ms = parseFloat(240000); // 4 minutes = 240,000 ms
var four_minutes_in_ms = parseFloat(240000); // 4 minutes = 240,000 ms
// Inaccurate... TESTING VALUES.
var twelve_minutes_in_ms = parseFloat(120000); // 2 minutes = 120,000 ms
var four_minutes_in_ms = thirty_seconds_in_ms;
//var four_minutes_in_ms = thirty_seconds_in_ms;
//var twelve_minutes_in_ms = parseFloat(360000); // 6 minutes = 360,000 ms
//var four_minutes_in_ms = parseFloat(240000); // 4 minutes = 240,000 ms
......@@ -454,7 +503,8 @@ var ov_participant_response_time = -1;
showVigilanceDisplay("Practice Test");
// Stops the practice test and gives the user a 30-second mini-break.
setTimeout(hideVigilanceDisplay, practice_time_in_ms, "Break (30 seconds)");
setTimeout(hideVigilanceDisplay, practice_time_in_ms, "Break: <span id=\"ov_timer_minutes\"></span><span id=\"ov_timer_minutes_label\"></span><span id=\"ov_timer_seconds\">30</span> seconds");
setTimeout(countdownTimer, practice_time_in_ms, 30);
// Starts the real test after the 30-second mini-break.
setTimeout(showVigilanceDisplay, (practice_time_in_ms + thirty_seconds_in_ms));
......@@ -466,7 +516,8 @@ var ov_participant_response_time = -1;
else if(ov_test_condition === 2) {
// Hides the initial OV display after 12 minutes to show a blank screen.
setTimeout(hideVigilanceDisplay, (practice_time_in_ms + thirty_seconds_in_ms + twelve_minutes_in_ms), "Break (4 minutes)");
setTimeout(hideVigilanceDisplay, (practice_time_in_ms + thirty_seconds_in_ms + twelve_minutes_in_ms), "Break: <span id=\"ov_timer_minutes\">4</span><span id=\"ov_timer_minutes_label\"> minutes and </span><span id=\"ov_timer_seconds\">0</span> seconds");
setTimeout(countdownTimer, (practice_time_in_ms + thirty_seconds_in_ms + twelve_minutes_in_ms), 240); // 240 seconds = 4 minutes
// Shows the OV display again after the 4 minute break.
setTimeout(showVigilanceDisplay, (practice_time_in_ms + thirty_seconds_in_ms + twelve_minutes_in_ms + four_minutes_in_ms));
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment