Commit 7eb8d312 authored by William Paul Liggett's avatar William Paul Liggett

Test Conditions (all): Visually, the flow and UI elements now properly begin...

Test Conditions (all): Visually, the flow and UI elements now properly begin with a practice test, a 30-second gap between the practice and the real test, and the user is more aware of what is going on by adding the banner text of "Practice Test" or "Break" where appropriate.
parent 8ea91c22
......@@ -35,14 +35,22 @@
<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. [Estimate: 4.0 hours]</li>
<li>Vigilance Tests: Record the activity of each subject during the test and save it as a CSV data file on the server. [Estimate: 5.0 to 10.0 hours]</li>
<li>Test Conditions #1, 3, and 4: Visually show the correct durations for the tasks and break depending on the test condition. [Estimate: 3 hours]</li>
<li>Vigilance Tests: Record the activity of each subject during the test and save it as a CSV data file on the server. [Estimate: 5 to 10 hours]</li>
<li>Admin Page: Add a section to show the stored CSV files so that they can be downloaded at will. This section will not be fancy, as it will just be a bunch of links
and maybe an ability to download all of the files as a ZIP archive. [Estimate: 2.0 hours]</li>
and maybe an ability to download all of the files as a ZIP archive. [Estimate: 2 hours]</li>
</ol>
<p class="version_info">Version 1.7.1 (2018-03-04):</p>
<p><em>Estimated labor time: <span id="hours_logged_for_update_12">1</span> hour.</em></p>
<ul>
<li>Test Conditions (all): Visually, the flow and UI elements now properly begin with a practice test, a 30-second gap
between the practice and the real test, and the user is more aware of what is going on by adding the banner text
of "Practice Test" or "Break" where appropriate.</li>
</ul>
<p class="version_info">Version 1.7.0 (2018-03-01):</p>
<p><em>Estimated labor time: <span id="hours_logged_for_update_11">4.0</span> hours.</em></p>
<p><em>Estimated labor time: <span id="hours_logged_for_update_11">4</span> hours.</em></p>
<ul>
<li>Test Condition #2: Visually, the display for this vigilance test now works as intended. This is the 12 min task +
4 min break (with a blank screen) + 12 min task. However, the data collection is not operational yet.</li>
......@@ -140,7 +148,8 @@
parseFloat($("#hours_logged_for_update_8").html()) +
parseFloat($("#hours_logged_for_update_9").html()) +
parseFloat($("#hours_logged_for_update_10").html()) +
parseFloat($("#hours_logged_for_update_11").html());
parseFloat($("#hours_logged_for_update_11").html()) +
parseFloat($("#hours_logged_for_update_12").html());
// Displays the total labor hours at the top of the page.
$("#total_labor_hours").html(calculated_labor_time);
......
......@@ -27,6 +27,33 @@ h2 {
margin-top: 2rem;
}
#vigilance_display_banner_text {
font-size: 16pt;
text-align: center;
display: block;
margin-bottom: 1rem;
font-weight: bold;
}
#login_welcome_msg {
width: 80%;
display: block;
margin: auto;
text-align: justify;
}
#StartTestButton {
margin: auto;
display: block;
}
#vigilance_display_extra_text {
width: 80%;
display: block;
margin: auto;
text-align: center;
}
/* Background image container to have the random letter to be centered vertically. */
.container {
position: relative;
......
......@@ -92,9 +92,9 @@
$login_welcome_msg_no_break = "<div id=\"login_welcome_msg\"><p>" .
"In this experiment, letters will appear rapidly in the center of the screen. They will appear behind a " .
"large pattern that is made up of small circles. The letters will either be an O, D, or a backwards D. " .
"Your task is to detect the letter O. Each time that a letter O appears, press the space bar. You will " .
"have approximately 1 second to respond before the next letter appears so respond as rapidly as you can " .
"while being accurate.</p>" .
"Your task is to detect the letter O. <strong>Each time that the letter O appears, press the space bar." .
"</strong> You will have approximately 1 second to respond before the next letter appears so respond as " .
"rapidly as you can while being accurate.</p>" .
"<p>When either the letter D or backwards D appears, you should not make any response. There will be a " .
"short practice block before the task begins. After the practice block, the task will last approximately " .
......@@ -106,9 +106,9 @@
$login_welcome_msg_with_break = "<div id=\"login_welcome_msg\"><p>" .
"In this experiment, letters will appear rapidly in the center of the screen. They will appear behind a " .
"large pattern that is made up of small circles. The letters will either be an O, D, or a backwards D. " .
"Your task is to detect the letter O. Each time that a letter O appears, press the space bar. You will " .
"have approximately 1 second to respond before the next letter appears so respond as rapidly as you can " .
"while being accurate.</p>" .
"Your task is to detect the letter O. <strong>Each time that the letter O appears, press the space bar." .
"</strong> You will have approximately 1 second to respond before the next letter appears so respond as " .
"rapidly as you can while being accurate.</p>" .
"<p>When either the letter D or backwards D appears, you should not make any response. There will be a " .
"short practice block before the task begins. After the practice block, the task will last approximately " .
......@@ -144,7 +144,9 @@
echo $start_test_button;
// Displays the OV test (images and so forth) to the user. JavaScript is used to unhide it.
echo "<div class=\"container hidden\" id=\"VigilanceDisplay\">" . PHP_EOL .
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<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 .
"$tab$tab$tab$tab<span class=\"letter_o\">O</span>" . PHP_EOL .
......
......@@ -93,17 +93,54 @@
}, DISPLAY_LETTER_DURATION);
}
function showVigilanceDisplay() {
function showVigilanceDisplay(banner_text = "", extra_text = "") {
// Outputs the "Practice Test" banner when needed.
if(banner_text !== "") {
$("#vigilance_display_banner_text").html(banner_text);
}
else {
$("#vigilance_display_banner_text").html("&nbsp;");
}
// Any extra text supplied. It's diplayed in a smaller font below the banner text.
if(extra_text !== "") {
$("#vigilance_display_extra_text").html(extra_text);
}
else {
$("#vigilance_display_extra_text").html("");
}
$("#VigilanceDisplay").removeClass("hidden");
}
function hideVigilanceDisplay() {
function hideVigilanceDisplay(banner_text = "", extra_text = "") {
// Outputs the "Break" banner when needed.
if(banner_text !== "") {
$("#vigilance_display_banner_text").html(banner_text);
}
else {
$("#vigilance_display_banner_text").html("&nbsp;");
}
// Any extra text supplied. It's diplayed in a smaller font below the banner text.
if(extra_text !== "") {
$("#vigilance_display_extra_text").html(extra_text);
}
else {
$("#vigilance_display_extra_text").html("");
}
$("#VigilanceDisplay").addClass("hidden");
}
function concludeTest() {
$("#VigilanceDisplay").remove();
$("body").append("<p>Test Complete! Thank you for participating.</p>");
$("#vigilance_display_banner_text").html("Test Complete");
$("#vigilance_display_extra_text").html("We know this test was difficult, so we thank you very much for participating!");
}
// An event is a random letter change set to the rate of EVENTS_PER_MINUTE.
......@@ -116,12 +153,14 @@
$("#login_welcome_msg").remove();
$("#StartTestButton").remove();
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 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
// Inaccurate... TESTING VALUES.
//var twelve_minutes_in_ms = parseFloat(30000); // 30 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.
......@@ -131,23 +170,30 @@
// Test Condition #3: 12 minute task. Break w/a nature video. 12 minute task again.
// Test Condition #4: 12 minute task. Break w/random letters still flashing. 12 minute task again.
// -----------------------------------------------------------------------------------------------------------------
// Begins the OV test regardless of which condition is used.
showVigilanceDisplay();
// Begins the 30-second practice test regardless of which condition is used.
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)", "The test will automatically begin after the break. Please be ready.<br />Again, press the <strong>space bar</strong> only when you see the letter <strong>O</strong>, not for any other letter.");
// Starts the real test after the 30-second mini-break.
setTimeout(showVigilanceDisplay, (practice_time_in_ms + thirty_seconds_in_ms));
if(ov_test_condition === 1) {
// Concludes the test once 24 minutes have passed.
setTimeout(concludeTest, (twelve_minutes_in_ms * 2));
setTimeout(concludeTest, (practice_time_in_ms + thirty_seconds_in_ms + twelve_minutes_in_ms * 2));
}
else if(ov_test_condition === 2) {
// Hides the initial OV display after 12 minutes to show a blank screen.
setTimeout(hideVigilanceDisplay, twelve_minutes_in_ms);
setTimeout(hideVigilanceDisplay, (practice_time_in_ms + thirty_seconds_in_ms + twelve_minutes_in_ms), "Break");
// Shows the OV display again after the 4 minute break.
setTimeout(showVigilanceDisplay, (twelve_minutes_in_ms + four_minutes_in_ms));
setTimeout(showVigilanceDisplay, (practice_time_in_ms + thirty_seconds_in_ms + twelve_minutes_in_ms + four_minutes_in_ms));
// Concludes the test once 28 minutes have passed (12 min + 4 min + 12 min).
setTimeout(concludeTest, (twelve_minutes_in_ms * 2 + four_minutes_in_ms));
setTimeout(concludeTest, (practice_time_in_ms + thirty_seconds_in_ms + twelve_minutes_in_ms * 2 + four_minutes_in_ms));
}
else if(ov_test_condition === 3) {
......
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