Commit de2e10e4 authored by William Paul Liggett's avatar William Paul Liggett

More of the JS was built to handle the user response data. Also, a few CSS changes were applied.

parent 41cfa61a
......@@ -31,6 +31,7 @@ h2 {
font-size: 16pt;
text-align: center;
display: block;
margin-top: 2rem;
margin-bottom: 1rem;
font-weight: bold;
}
......
......@@ -121,6 +121,11 @@
$start_test_button = "<input type=\"button\" name=\"StartTestButton\" id=\"StartTestButton\" value=\"Start Test\" />";
// JavaScript variables to properly initiate the correct test and to log the user's activity.
// The `$js_var_subject_id' may be unnecessary as long as the $_SESSION['ov_user'] does not timeout,
// however, I am including it to ensure that the OpenVigilance Task web application won't break if an admin
// want to later have longer tests. Plus, the default session timeout for PHP is 24 minutes, so each person
// who may host an OpenVigilance Task instance on their web host would need to configure their php.ini file
// correctly, which I don't want to depend upon. So, in short, this JS var is here to stay for now.
$js_var_test_condition = "<script>var ov_test_condition = parseInt(" . $_SESSION['ov_test_condition'] . ");" . PHP_EOL;
$js_var_subject_id = "var ov_subject_id = parseInt(" . $_SESSION['ov_user'] . ");</script>" . PHP_EOL;
......@@ -149,7 +154,7 @@
// Displays the OV test (images and so forth) to the user. JavaScript is used to unhide it.
echo "<span id=\"vigilance_display_banner_text\">&nbsp;</span>" . PHP_EOL .
"$tab$tab$tab<span id=\"vigilance_display_extra_text\"></span>" . PHP_EOL .
"$tab$tab$tab<span id=\"vigilance_display_extra_text\">&nbsp;</span>" . PHP_EOL .
"$tab$tab$tab<div class=\"container hidden\" id=\"VigilanceDisplay\">" . PHP_EOL .
"$tab$tab$tab<img id=\"background-smaller-circles\" src=\"media/background-smaller-circles_(936_by_466_px,_Resolution_at_1360x768_~16_by_9).png\" alt=\"Background of Smaller Circles\" />" . PHP_EOL .
"$tab$tab$tab<div class=\"random_letter\">" . PHP_EOL .
......
......@@ -27,16 +27,18 @@ function getCurrentDatetime() {
ov_seconds = "0" + String(ov_seconds); // If the seconds were 2 now they are "02".
}
// Saves the datetime in the format of: 3/4/2018 18:30:09
// Saves the date in the format of: "3/4/2018"
var ov_date = String(ov_datetime.getMonth() + 1) + "/" +
String(ov_datetime.getDate()) + "/" +
String(ov_datetime.getFullYear());
// Saves the time with milliseconds in the format of: "18:49:09:565"
var ov_time = String(ov_datetime.getHours()) + ":" +
ov_minutes + ":" + // Set above to fix a display issue.
ov_seconds + ":" + // Same thing here.
String(ov_datetime.getMilliseconds());
// Saves the datetime with milliseconds in the format of: "3/4/2018 18:49:09:565"
var ov_datetime = ov_date + " " + ov_time;
return [ov_datetime, ov_date, ov_time];
......@@ -49,24 +51,49 @@ function getCurrentDatetime() {
var ov_record_user_activity = false;
// Documents how well the user is doing during a test. The data is eventually submitted to the server.
// The heading of each cell is as follows:
var ov_user_activity_array = ["SID", "TimeStamp", "Type", "Block", "GlobalTrialCounter", "CurrentTrial", "Target", "Distractor", "FalseAlarm", "RT", "Correct"];
// Note: We don't need the following cells as we can create the information on the server: "SID", "Target", "Distractor", "FalseAlarm", and "Correct"
// The heading of each cell is listed below:
var ov_user_activity_array = ["TimeStamp", "Type", "Block", "GlobalTrialCounter", "CurrentTrial", "ov_random_letter_is_o", "RT"];
// Records the date and timestamp of when the test began. It'll be set once the test actually begins.
var ov_test_began_datetime = "";
// Records the datetime in ms since the Unix epoch. It'll be set once the test actually begins.
var ov_test_began_datetime = 0;
// Tracks whether it is a practice test or an actual experiment.
// Tracks whether it is a practice test ("P") or an actual experiment ("E").
var ov_test_type = "";
var ov_current_random_letter_time_as_string = "";
var ov_current_random_letter_time_as_ms_since_1970 = 0;
// A test block are 2-minute periods of time during the actual test.
// Note: The practice test should always be less than 2-mins or further calculations will be messed up.
// Block 0 = Practice. Block 1 = 1st 2-min period. Block 2 = 2nd 2-min period. Block 3 = 3rd 2-min period. And so on.
var ov_test_block = 0;
// Primarily used to outputting the time of the current random letter to the CSV.
//var ov_current_random_letter_time_as_string = "";
// This is used to measure the user's response time (RT). Eventually uses Unix epoch time format (ms).
var ov_current_random_letter_datetime = 0;
// Quick way to determine how to log certain fields in the CSV, such as: Target, Distractor, False Alarm, and Correct.
var ov_random_letter_is_o = false;
// Global Trial Counter: [Practice Test] + [Actual Test]
// Increments by one each time a new random letter is shown to the user. Eventually output in the CSV.
var ov_global_trial_counter = 0;
// Current Trial Counter: ONLY the Actual Test, as the Practice Test will just log zeroes.
// Increments by one each time a new random letter is shown to the user. Eventually output in the CSV.
var ov_current_trial_counter = 0;
// Response Time (RT): Measure the time in ms of how long it took them to press the space bar after a random letter was displayed.
// Note: It doesn't matter if the random letter was the correct letter 'O' as the RT is logged whenever the user presses the
// space bar or is set to -1 to indicate that the user did not respond to a random letter.
var ov_participant_response_time = -1;
;(function(window, $) {
// 50 ms display duration for the letter to appear and then disappear on the screen.
const DISPLAY_LETTER_DURATION = 50;
// 57.5 events per minute. An event is a random letter change.
// (57.5/60) * 1000 = 958.333333333 ms [Note: 1000 ms = 1 second]
const EVENTS_PER_MINUTE = (57.5/60) * 1000;
// Function by Mozilla Contributors, Feb 2018
......@@ -86,11 +113,15 @@ var ov_random_letter_is_o = false;
var random_int = getRandomInt(3);
var chosen_letter = "";
// Records when the time actually began in the format of: "3/4/2018 19:11:12:565 (the "565" is the milliseconds)
ov_current_random_letter_time_as_string = getCurrentDatetime()[0];
// Records when the time actually began in the format of: "19:11:12:565 (the "565" is the milliseconds)
//ov_current_random_letter_time_as_string = getCurrentDatetime()[2];
// Reports something like: 1520215907134. Used for calculating the user's response time.
ov_current_random_letter_time_as_ms_since_1970 = Date.now();
ov_current_random_letter_datetime = Date.now();
// Global Trial Counter: [Practice Test] + [Actual Test]
// Increments by one each time a new random letter is shown to the user. Eventually output in the CSV.
++ov_global_trial_counter;
// Letter: O
if(random_int === 0) {
......@@ -164,14 +195,14 @@ var ov_random_letter_is_o = false;
// Outputs the "Practice Test" banner when needed.
if(banner_text !== "") {
$("#vigilance_display_banner_text").html(banner_text); // This is a Practice Test.
$("#vigilance_display_extra_text").html("");
ov_test_type = "Practice"; // Included as part of the user's activity array.
$("#vigilance_display_extra_text").html("&nbsp;");
ov_test_type = "P"; // Practice Test. Included as part of the user's activity array.
}
else {
$("#vigilance_display_banner_text").html("&nbsp;"); // This is a real experiment.
$("#vigilance_display_extra_text").html("");
ov_test_type = "Experiment"; // Included as part of the user's activity array.
$("#vigilance_display_extra_text").html("&nbsp;");
ov_test_type = "E"; // Actual Test (experiment). Included as part of the user's activity array.
}
$("#VigilanceDisplay").removeClass("hidden");
......@@ -192,7 +223,7 @@ var ov_random_letter_is_o = false;
else {
$("#vigilance_display_banner_text").html("&nbsp;");
$("#vigilance_display_extra_text").html("");
$("#vigilance_display_extra_text").html("&nbsp;");
}
$("#VigilanceDisplay").addClass("hidden");
......@@ -230,23 +261,25 @@ var ov_random_letter_is_o = false;
}
});
// Starts the test after the participant presses the "Start Test" button.
$("body").on("click", "#StartTestButton", function(event) {
// Hides the login welcome message after the participant presses the "Start Test" button.
// Hides the login welcome message.
$("#h1_page_title").remove();
$("#login_welcome_msg").remove();
$("#StartTestButton").remove();
// Records when the time actually began in the format of: "3/4/2018 19:11:12:565 (the "565" is the milliseconds)
ov_test_began_datetime = getCurrentDatetime()[0];
//ov_test_began_datetime = getCurrentDatetime()[0];
ov_test_began_datetime = Date.now(); // Time in ms since the Unix epoch time
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 twelve_minutes_in_ms = parseFloat(720000); // 12 minutes = 720,000 ms
//var four_minutes_in_ms = parseFloat(240000); // 4 minutes = 240,000 ms
// Inaccurate... TESTING VALUES.
//var twelve_minutes_in_ms = parseFloat(20000); // 20 seconds
//var four_minutes_in_ms = parseFloat(10000); // 10 seconds
var twelve_minutes_in_ms = parseFloat(20000); // 20 seconds
var four_minutes_in_ms = parseFloat(10000); // 10 seconds
// -----------------------------------------------------------------------------------------------------------------
// The `ov_test_condition' var was set via PHP, which changes depending on which condition the user is assigned to.
......
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