Commit 13bf5482 authored by William Paul Liggett's avatar William Paul Liggett

Test Condition #3 works (embedded nature video). Also, there's a pop-up break...

Test Condition #3 works (embedded nature video). Also, there's a pop-up break reminder message for people taking Test Condition #4.
parent f10cc21e
......@@ -38,18 +38,55 @@
<p class="version_info"><strong>TO DO:</strong></p>
<ol>
<li>Test Conditions #3: Visually show the correct durations for the tasks and break depending on the test
condition. This includes embedding a nature video for test condition #3. [Estimate: 2 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>
[Estimate: 5 hours remaining]</li>
<li>Download CSV Files: All of the user data CSV files are stored under the 'user-data-files' directory, beneath the
main OpenVigilance Task URL. At present, this is nothing fancy, as it just contains a link to each CSV file.
However, I could create the ability to download all of the files as a ZIP archive if desired. Therefore, this
is an <em>optional</em> feature [Estimate: 0-2 hours]</li>
</ol>
<p class="version_info">Version 1.9.1 (2018-03-27):</p>
<p><em>Estimated labor time: <span id="hours_logged_for_update_20">3</span> hours.</em></p>
<ul>
<li>
Test Condition #4: Created an image to be used to pop-up and remind the user that a break is in session to
help them relax. This feature was requested as condition #4 has a short break but will continue to flash the
random letters on the screen. So, some participants were not aware that a break had started.
<br /><br />
The pop-up now shows whenever a user presses the space bar during the break. The reminder currently stays on
the screen for 3.5 seconds and has a nice fade-out animation.
<br /><br />
Also, I forced this reminder image to download before a participant for condition #4 can begin the test,
since we want the image available in case a user gets disconnected while taking the the test.
</li>
</ul>
<p class="version_info">Version 1.9.0 (2018-03-22 to 2018-03-23):</p>
<p><em>Estimated labor time: <span id="hours_logged_for_update_19">6.5</span> hours.</em></p>
<ul>
<li>
Test Condition #3: This now works and includes an embedded video!
</li>
<li>
Nature Video: Modified the original file by precisely cutting it down to the timeline specified by the client of
00:00:14 (14 secs) to 00:04:14 (4 min and 14 secs) to give it a total length of 4.0 minutes. Furthermore, the
video was reduced in dimensions to decrease the file size in order to accommodate users who might have a slow
connection or those that get disconnected after starting the test.
</li>
<li>
Nature Video: Since a user might have a slow connection and because the video is ~40 MB (even with the smaller
size aspects mentioned above), additional safeguards
were placed so that the entire video will be downloaded before allowing a participant with test condition #3
to even begin the test. This is because the nature video should immediately start playing, with no buffering, or
odd stops and starts, otherwise it kind of defeats the purpose of having a relaxing nature video to watch during
a break between the two lengthy vigilance tasks. This aspect was tricky as it is not a standard procedure to do
so with regards to HTML5, CSS3, or JavaScript. I actually stayed up all night to get this aspect implemented
before the OpenVigilance Task app was scheduled to be used by a real participant for condition #3 the next day.
</li>
</ul>
<p class="version_info">Version 1.8.1 (2018-03-22):</p>
<p><em>Estimated labor time: <span id="hours_logged_for_update_18">0.5</span> hours.</em></p>
<ul>
......@@ -251,7 +288,9 @@
parseFloat($("#hours_logged_for_update_15").html()) +
parseFloat($("#hours_logged_for_update_16").html()) +
parseFloat($("#hours_logged_for_update_17").html()) +
parseFloat($("#hours_logged_for_update_18").html());
parseFloat($("#hours_logged_for_update_18").html()) +
parseFloat($("#hours_logged_for_update_19").html()) +
parseFloat($("#hours_logged_for_update_20").html());
// Displays the total labor hours at the top of the page.
$("#total_labor_hours").html(calculated_labor_time);
......
......@@ -48,6 +48,10 @@ h2 {
display: block;
}
#nature_video_div {
text-align: center;
}
#vigilance_display_extra_text {
width: 80%;
display: block;
......@@ -118,6 +122,13 @@ h2 {
display: none;
}
/* Test Conditon #4: Break Reminder Pop-Up Image */
#break_reminder_popup_image {
position: absolute;
top: 200px;
left: 500px;
}
/* For styles affecting a <form>. */
form#UserLogin label,
form#AdminLogin label {
......
......@@ -199,6 +199,26 @@
"$tab$tab$tab</div>" . PHP_EOL .
"$tab$tab</div>" . PHP_EOL;
// This special if-else block is here because this web app is unique in that it needs the media to be
// present immediately with no download delays. Also, doing this ensures that if a user gets disconnected,
// they can still have the same experience as fully online test takers.
//
// Test Condition #3 needs the nature video to be downloaded and ready to play.
if($_SESSION['ov_test_condition'] === 3) {
echo "<div id=\"nature_video_div\" class=\"hidden\">" . PHP_EOL .
"$tab$tab<video id=\"nature_video\" width=\"640\" height=\"360\">" . PHP_EOL .
// The file "media/OpenVigilance_Nature_Video.mp4" will be added to this <div>'s src via JS later.
"$tab$tab</video>" . PHP_EOL .
"</div>" . PHP_EOL;
}
// Test Condtion #4 needs the extra `break_reminder_for_condition_4.png' so it can pop-up when needed.
else if($_SESSION['ov_test_condition'] === 4) {
echo "<div id=\"break_reminder_popup\" class=\"hidden\">" . PHP_EOL .
// The <img> tag will be added here via JavaScript later.
"</div>" . PHP_EOL;
}
// Sets up a hidden form to be used to sign-out a user after they've finished taking a test.
echo "$tab$tab<div id=\"user_sign_out\" class=\"hidden\">" . PHP_EOL .
"$tab$tab$tab<form action=\".\" name=\"UserSignOut\" id=\"UserSignOut\" method=\"GET\">" . PHP_EOL .
......
......@@ -232,7 +232,7 @@ var ov_participant_response_time = -1;
}
// Shows the vigilance test (small background circles and flashing random letters) when needed.
function showVigilanceDisplay(banner_text = "", each_test_block_duration = 0) {
function showVigilanceDisplay(banner_text = "", hide_nature_video = false) {
// Let's the primary keydown() script know that any space bar presses should be counted in the user activity array.
// The only reason this should be set to `false' is for Test Condition #4 as the break still shows random letter,
// but we're not supposed to record the user's activity in this instance.
......@@ -267,12 +267,19 @@ var ov_participant_response_time = -1;
ov_test_block_timer_id = setInterval(function() {++ov_test_block; }, OV_TEST_BLOCK_EACH_DURATION);
}
// For: Test Condition #3. Hides the nature video.
if(hide_nature_video) {
var nature_video = $("#nature_video").get(0);
nature_video.pause();
$("#nature_video_div").addClass("hidden").css({"display": "none"});
}
// Shows the flashing random letters and small background circles to the user.
$("#VigilanceDisplay").removeClass("hidden");
}
// Hides the vigilance test (small background circles and flashing random letters) when needed.
function hideVigilanceDisplay(banner_text = "", extra_text = "") {
function hideVigilanceDisplay(banner_text = "", extra_text = "", play_nature_video = false) {
// Let's the primary keydown() script know that any space bar presses should NOT be counted in the user activity array.
ov_record_user_activity = false;
......@@ -300,6 +307,14 @@ var ov_participant_response_time = -1;
// Hides the flashing random letters and small background circles to the user.
$("#VigilanceDisplay").addClass("hidden");
// For: Test Condition #3. Plays the nature video.
if(play_nature_video) {
$("#nature_video_div").removeClass("hidden").css({"display": "block"});
var nature_video = $("#nature_video").get(0);
nature_video.volume = 1.0;
nature_video.play();
}
}
// Stops the test and submits the user's activity array (space bar responses) to the server.
......@@ -473,6 +488,80 @@ var ov_participant_response_time = -1;
setInterval(changeRandomLetter, EVENTS_PER_MINUTE);
$(document).ready(function() {
// For: Test Condition #3. Ensures that the entire nature video is downloaded, since a user may get disconnected!
if(ov_test_condition === 3) {
// Script code modified from: http://dinbror.dk/blog/how-to-preload-entire-html5-video-before-play-solved/
var nature_video_download_complete = false;
$("#StartTestButton").val("Please wait. Downloading assets...");
var req = new XMLHttpRequest();
// The video clip is from: https://www.youtube.com/watch?v=MjCorj48dEw (Creative Commons Attribution)
// Clip title: National Geographic 2018 | The Most Peaceful Places on Earth | New Documentary 2018
// YouTube Channel: Breakthrough GO (https://www.youtube.com/channel/UCYuVc2_bO0HAWpqVvF2Mr-A)
// Published on YouTube: January 1st, 2018
// Clip was shortended to a 4-minute segment by William Paul Liggett (2018).
req.open('GET', 'media/OpenVigilance_Nature_Video.mp4', true);
req.responseType = 'blob';
req.onload = function() {
// Onload is triggered even on 404
// so we need to check the status code
if(this.status === 200) {
var videoBlob = this.response;
var vid = URL.createObjectURL(videoBlob); // IE10+
// Video is now downloaded
// and we can set it as source on the video element
var nature_video = $("#nature_video").get(0);
nature_video.src = vid;
nature_video_download_complete = true;
$("#StartTestButton").val("Start Test");
}
};
req.onerror = function() {
// Error
};
req.send();
}
// For: Test Condition #4. Ensures that the user has the `break_reminder_for_test_condition_4.png',
// since a user may get disconnected!
if(ov_test_condition === 4) {
// Script code modified from: http://dinbror.dk/blog/how-to-preload-entire-html5-video-before-play-solved/
var break_reminder_download_complete = false;
$("#StartTestButton").val("Please wait. Downloading assets...");
var req = new XMLHttpRequest();
// Break Reminder Image created by William Paul Liggett (2018).
req.open('GET', 'media/break_reminder_for_test_condition_4.png', true);
req.responseType = 'blob';
req.onload = function() {
// Onload is triggered even on 404
// so we need to check the status code
if(this.status === 200) {
var imageBlob = this.response;
var image = URL.createObjectURL(imageBlob); // IE10+
// Video is now downloaded
// and we can set it as source on the video element
$("#break_reminder_popup").append("<img id=\"break_reminder_popup_image\" src=\"media/break_reminder_for_test_condition_4.png\" alt=\"Break Reminder Pop-Up\" />");
break_reminder_download_complete = true;
$("#StartTestButton").val("Start Test");
}
};
req.onerror = function() {
// Error
};
req.send();
}
// Records the user's reaction time when they press the space bar if a vigilance test is running.
$("body").keydown(function(event) {
// The space bar character in ASCII is #32.
......@@ -483,10 +572,31 @@ var ov_participant_response_time = -1;
// User Activity Log: Tracks the time of when the user pressed the space bar.
ov_user_activity_log.push([ov_global_trial_counter, ov_participant_response_time]);
}
// Test Condition #4: Reminders the participant that a break is occurring by showing a pop-up image.
else if((event.which === 32) && (ov_test_condition === 4) &&
(ov_record_user_activity === false) && (ov_test_block > 0)) {
// Displays the break reminder pop-up image.
$("#break_reminder_popup").removeClass("hidden").css({"display": "block"});
// Waits 3.5 seconds before fading out.
setTimeout(function() { $("#break_reminder_popup").fadeOut(); }, 3500);
}
});
// Starts the test after the participant presses the "Start Test" button.
$("body").on("click", "#StartTestButton", function(event) {
// For: Test Condition #3. Ensures the nature video is fully downloaded before allowing the user to begin the test.
if((ov_test_condition === 3) && (!nature_video_download_complete)) {
return;
}
// Same idea but for Test Condition #4 with the break reminder pop-up image.
else if((ov_test_condition === 4) && (!break_reminder_download_complete)) {
return;
}
// Hides the login welcome message.
$("#h1_page_title").remove();
$("#login_welcome_msg").remove();
......@@ -549,7 +659,15 @@ var ov_participant_response_time = -1;
}
else if(ov_test_condition === 3) {
// Hides the initial OV display after 12 minutes to show a nature video.
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", "", true);
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), "", true);
// Concludes the test once 28 minutes have passed (12 min + 4 min + 12 min).
setTimeout(concludeTest, (practice_time_in_ms + thirty_seconds_in_ms + twelve_minutes_in_ms * 2 + four_minutes_in_ms));
}
else {
......
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