change-log.html 23.2 KB
Newer Older
William Paul Liggett's avatar
William Paul Liggett committed
<!DOCTYPE html>
<html lang="en">
William Paul Liggett's avatar
William Paul Liggett committed
        <meta charset="utf-8" />
William Paul Liggett's avatar
William Paul Liggett committed
        <title>OpenVigilance Task: Change Log</title>
6 7 8
        <!-- Copyright (C) 2018 by William Paul Liggett (
             This Source Code Form is subject to the terms of the Mozilla Public License (MPL), v. 2.0.
             If a copy of the MPL was not distributed with this file, You can obtain one at -->
William Paul Liggett's avatar
William Paul Liggett committed
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
William Paul Liggett's avatar
William Paul Liggett committed
11 12 13 14 15 16 17 18 19 20 21 22 23
            h1 {
                margin-bottom: 0.2rem;
            h2 {
                margin-top: 0;
                font-size: 12pt;
            .version_info {
                text-decoration: underline;
                margin-top: 2rem;
William Paul Liggett's avatar
William Paul Liggett committed
25 26 27 28
            li {
                margin-bottom: 0.5rem;
William Paul Liggett's avatar
William Paul Liggett committed
30 31 32 33 34 35
        <h1>OpenVigilance Task: Change Log</h1>
        <h2>Programmer: William Paul Liggett (</h2>
        <p><em>Total labor time: <span id="total_labor_hours"></span> hours.</em></p>
38 39
        <p class="version_info"><strong>TO DO:</strong></p>
41 42
            <li>OPTIONAL -- 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
43 44 45
                CSV file. However, I could create the ability to download all of the files as a ZIP archive if desired. Or I
                could at least create a less-annoying version of how the download links are displayed, since the sorting order
                is a bit confusing as it uses the web server's default order (i.e., 10, 11, 12, ... 1, 20, 21, 22, ... 2, etc).
46 47
                [Estimate: 2-4 hours]
50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67
        <p class="version_info">Version 1.10.2 (2018-04-07):</p>
        <p><em>Estimated labor time: <span id="hours_logged_for_update_24">2.5</span> hours.</em></p>
                CSV Reports: The collated CSV is now automatically created after a participant completes a test. Also, the
                date/time stamp on the raw & collated CSV files are now set to when the participant clicks on the "Start Test"
                button (after they login) instead of when they submitted the test to the server. Extensive system tests were
                conducted to ensure the flow still works accurately.
                Older CSV Reports: The date/time stamps on all of the older tests that were already taken by participants were
                changed to also show when they actually began the test.
                Refactored some of the code to reduce the number of Ajax calls and I de-duplicated an authentication process.
68 69 70 71 72 73 74 75 76 77
        <p class="version_info">Version 1.10.1 (2018-04-05):</p>
        <p><em>Estimated labor time: <span id="hours_logged_for_update_23">1</span> hours.</em></p>
                Collated CSV Reports: Added the column "TestCondition" to the collated CSV files. Also, any previously-generated
                collated report was updated with this change and placed in the newly created "collated" sub-directory under the
                "user-data-files" folder.
78 79 80 81 82 83 84 85 86 87 88
        <p class="version_info">Version 1.10.0 (2018-03-29 to 2018-04-01):</p>
        <p><em>Estimated labor time: <span id="hours_logged_for_update_22">12</span> hours.</em></p>
                Collated CSV Reports: The generator function for creating a single, collated CSV file report based upon the
                two raw CSV files (random letter times and user activity) is now working! The code was securely designed
                to help avoid injection attacks, data loss, and cross-site scripting (XSS). The only portion that remains is
                to embed this generator function to execute automatically after every test is completed.
89 90 91 92 93 94 95 96 97 98 99 100 101
        <p class="version_info">Version 1.9.2 (2018-03-28):</p>
        <p><em>Estimated labor time: <span id="hours_logged_for_update_21">1</span> hours.</em></p>
                Test Condition #4: Fixed a glitch on how the test block values were recorded. Also, I corrected any 
                previously-created raw CSV files for participants that had taken condition #4 recently. The corrected CSV files 
                are still valid as the test block values that were amended were minor and obvious to spot. Furthermore, the 
                original inaccurate values had no impact on the more important timing (millisecond time stamps) or similar 
                values which were recorded in the raw CSV files. So, to be clear, there was no data loss, just a minor data 
                revision. All is well!
102 103 104 105 106 107
        <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>
                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
108 109 110 111 112 113 114 115 116 117 118
                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. 
                        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.
119 120

122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145
        <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>
                Test Condition #3: This now works and includes an embedded video!
                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.
                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.
146 147 148 149 150 151 152 153 154 155
        <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>
                Modified how a number of functions operate to accommodate different break messages so that the mini-break between
                the practice test and the real test can have its own title and descriptive text labels during the break, while
                the larger 4-minute break between two 12-minute vigilance tasks can have its own break text labels.
        <p class="version_info">Version 1.8.0 (2018-03-21):</p>
        <p><em>Estimated labor time: <span id="hours_logged_for_update_17">4.5</span> hours.</em></p>
158 159
160 161
                Test Conditions #1 and #4: These conditions now work and flow as expected! So, this means that conditions #1, #2,
                and #4 are good to go.
162 163 164 165 166 167 168 169 170 171 172 173
                Participant Login Management: Fixed a glitch with regards to different users logging onto the same computer
                would accidentally inherit the past user's test condition scenario. For example, person A with condition #1 begins 
                a test while person B with condition #2 is waiting for person A to finish. Then, person A finishes, so person B 
                logs in and accidentally inherits person A's test condition of the value of #1 (when person B should have #2).
                Participant Login Management: A "Sign Out" button was added at the end of the test so that it was clear what the
                next person should do when sitting down at the same computer that a previous participant used.
174 175
        <p class="version_info">Version 1.7.5 (2018-03-19):</p>
        <p><em>Estimated labor time: <span id="hours_logged_for_update_16">2.75</span> hours.</em></p>
178 179 180
                Countdown Timer: Built an efficient and elegant countdown timer script to be used during the breaks.
181 182 183 184 185 186
                App Settings: A site-wide settings file has now been defined to ensure the app works on different web
                servers to avoid configuration headaches.
187 188 189 190
        <p class="version_info">Version 1.7.4 (2018-03-18):</p>
        <p><em>Estimated labor time: <span id="hours_logged_for_update_15">0.5</span> hours.</em></p>
            <li>Log Data to CSV: Ensured that the user's activity data will not breach PHP's max_input_vars setting.</li>
191 192 193 194 195
                Log Data to CSV: Built a way to detect a rare instance where a network outage would not be reported.
                But, I now force an error message if this incident occurs, with the test data captured for manual 
                processing to occur. This way there should be absolutely no way that a participant's test data will be lost.
196 197 198 199
        <p class="version_info">Version 1.7.3 (2018-03-09 to 2018-03-17):</p>
        <p><em>Estimated labor time: <span id="hours_logged_for_update_14">4.5</span> hours.</em></p>
200 201 202 203 204 205 206 207 208 209 210 211 212 213 214
            <li>Log Data to CSV: More time was spent on this feature than the hours listed, as I am providing a free feature
                to detect when there is a network problem when a participant finishes a test. Meaning, that the data can be saved
                locally and emailed to me (William) for manual processing. This way a bad network connection shouldn't make a test
                worthless :-).
                Log Data to CSV: The two essential raw CSV files are now properly processed by the server! This took a lot of
                effort to nail down, as I needed to re-design the way all of the data for the random letter times were submitted
                to the server since there was so much data that it reached PHP's max_input_vars setting, which was not obvious 
                until lots of bug hunting. Anyways, the problem was solved and things seem to work as expected now.
            <li>Improved some security aspects in terms of how the data is processed.</li>

215 216 217
        <p class="version_info">Version 1.7.2 (2018-03-05 to 2018-03-08):</p>
        <p><em>Estimated labor time: <span id="hours_logged_for_update_13">6</span> hours.</em></p>
218 219 220
            <li>Summary: Essentially, all of the client-side code should be completed with regards to recording the user's 
                activity data! Now, the remaining aspect is getting the server-side portions to process the data into CSV files.
221 222 223 224 225 226 227 228 229
            <li>Log Data to CSV: Embedded more JS vars to an authorized OV user to help make the web app more resilient to PHP 
                session timeout issues.</li>
            <li>Log Data to CSV: The raw data has been broken down into two JS arrays to allow more flexibility in terms of 
                processing a correlated single CSV later for analysis.</li>
            <li>Refactored some of the code to make the design better.</li>
            <li>Log Data to CSV: Modified some aspects to handle the user's activity data.</li>
            <li>Changed some default JS var assignments.</li>
            <li>More of the JS was built to handle the user response data. Also, a few CSS changes were applied.</li>
230 231
        <p class="version_info">Version 1.7.1 (2018-03-04):</p>
        <p><em>Estimated labor time: <span id="hours_logged_for_update_12">6</span> hours.</em></p>
234 235
            <li>Log Data to CSV: Much of the JavaScript was built to handle the recording of the user activity. This will be 
                finalized and then the backend PHP portion will eventually convert the user data to a CSV file.</li>
236 237 238 239
            <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>

        <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</span> hours.</em></p>
243 244 245 246 247 248 249 250
            <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>
            <li>Subject Login: Once the user logs in, their welcome message will be different depending if they have a break or
                not in the middle of their test, depending on which test condition they have been assigned to.</li>
            <li>Vigilance Tests: Removed the "OpenVigilance Task" page title to reduce a user's eye wandering impulses.</li>
251 252 253 254 255 256
        <p class="version_info">Version 1.6.0 (2018-02-28):</p>
        <p><em>Estimated labor time: <span id="hours_logged_for_update_10">3</span> hours.</em></p>
            <li>Subject Login Page: A test participant can now login if they have a test scheduled.</li>
257 258 259 260 261 262 263 264
        <p class="version_info">Version 1.5.2 (2018-02-27):</p>
        <p><em>Estimated labor time: <span id="hours_logged_for_update_9">3</span> hours.</em></p>
            <li>Admin Page: The capability to remove user tests now works.</li>
            <li>Improved the interface to be more seamless and less confusing when adding, editing, and removing tests.</li>
            <li>Fixed a database permission issue.</li>
        <p class="version_info">Version 1.5.1 (2018-02-26):</p>
        <p><em>Estimated labor time: <span id="hours_logged_for_update_8">2.5</span> hours.</em></p>
            <li>Admin Page: The capability to add user tests with an auto-generated login code works!</li>
269 270
            <li>Admin Page: Made the process to update a scheduled test to be less fragile by confirming the database was updated correctly.</li>
271 272
        <p class="version_info">Version 1.5.0 (2018-02-21 to 2018-02-25):</p>
        <p><em>Estimated labor time: <span id="hours_logged_for_update_7">8</span> hours.</em></p>
274 275 276 277 278 279 280
                Admin Page: The capability to edit tests have been fully implemented! Utilizes advanced JavaScript, GUI controls,
                Ajax, and PHP to keep the front-and-backend aspects in sync.
            <li>Implemented PHP user sessions to help improve the security and to incorporate more advanced web app functionality.</li>
281 282

        <p class="version_info">Version 1.4.1 (2018-02-20):</p>
        <p><em>Estimated labor time: <span id="hours_logged_for_update_6">1</span> hour.</em></p>
284 285 286 287
            <li>Placed form buttons on the scheduled tests control section. However, the buttons don't do much yet.</li>
            <li>Styled the buttons to be centered correctly and to react as intended (e.g., radio grouping).</li>
288 289
        <p class="version_info">Version 1.4.0 (2018-02-19):</p>
        <p><em>Estimated labor time: <span id="hours_logged_for_update_5">2.5</span> hours.</em></p>
291 292 293 294 295
            <li>Built a web database to store and manage the user tests.</li>
            <li>Put mock tests in the database and have confirmed it is accurate for both when there are tests scheduled and when they are not.</li>
            <li>Styled the table and the other layout elements so that everything is easy to understand.</li>
296 297
        <p class="version_info">Version 1.3.0 (2018-02-18):</p>
        <p><em>Estimated labor time: <span id="hours_logged_for_update_4">1.5</span> hours.</em></p>
299 300
            <li>Added an admin page. The login process works. The rest of the functionality will be incorporated later.</li>
            <li>Made the admin login form look a bit nicer.</li>
303 304
        <p class="version_info">Version 1.2.0 (2018-02-16):</p>
        <p><em>Estimated labor time: <span id="hours_logged_for_update_3">1.5</span> hours.</em></p>
306 307 308
            <li>The duration of the random letters have been set to only show on the screen for 50 ms.</li>
William Paul Liggett's avatar
William Paul Liggett committed
        <p class="version_info">Version 1.1.0 (2018-02-07 to 2018-02-09):</p>
        <p><em>Estimated labor time: <span id="hours_logged_for_update_2">6</span> hours.</em></p>
William Paul Liggett's avatar
William Paul Liggett committed
312 313
            <li>Randomization function added and the capability for a random letter to update automatically works at the rate of 57.5 events per minute.</li>
314 315
            <li>Older MATLAB code from Mr. Adamo: I installed Octave and Psychtoolbox-3 on my computer and ran the old MATLAB code, but it wasn't able to fully run correctly. Nonetheless I have explored some of the older code and determined the color value used for the random letters.</li>
            <li>Constrast Ratios: I found a web tool from the Utah State University to help in determining the contrast ratios for the random letters of the 59% (easy) and 45% (hard) gray values. Awaiting confirmation that these colors I found were accurate.</li>
William Paul Liggett's avatar
William Paul Liggett committed
316 317 318
        <p class="version_info">Version 1.0.0 (2018-01-31):</p>
        <p><em>Estimated labor time: <span id="hours_logged_for_update_1">8</span> hours.</em></p>
William Paul Liggett's avatar
William Paul Liggett committed
320 321 322 323 324 325 326
            <li>Initial codebase. Main HTML and CSS files were created, with a focus on display precision by using a real-world ruler (in millimeters)!</li>
            <li>Smaller Background Circles: Exact dimensions in millimeters to 1360x768 pixel resolution. This took a while as converting a pixel-based image to the correct millimeter equivalent was extremely tedious.</li>
            <li>CSS: The random letter is at the exact millimeter dimensions (8x6mm), and it is precisely in the middle of the image, and uses the same gray color from the older paper.</li>
            <li>CSS: Backwards D letter renders correctly.</li>
            <li>Font: TeX Gyre Adventor Bold is an open source font replacement for the costly and legally-restrictive ITC Avant Garde Gothic font. The ITC font was designed by Herb Lubalin and Tom Carnase in 1970. Here is the EULA for that ITC Avant Garde font (which is why we're not using this font): <br /><a href="" target="_blank"></a></li>
327 328
        <script src="js/jquery-3.3.1.min.js"></script>
            // Calculates the amount of time spent on the project to reduce human error.
330 331 332 333 334 335 336 337
            var calculated_labor_time = parseFloat($("#hours_logged_for_update_1").html()) +
                                        parseFloat($("#hours_logged_for_update_2").html()) +
                                        parseFloat($("#hours_logged_for_update_3").html()) +
                                        parseFloat($("#hours_logged_for_update_4").html()) +
                                        parseFloat($("#hours_logged_for_update_5").html()) +
                                        parseFloat($("#hours_logged_for_update_6").html()) +
                                        parseFloat($("#hours_logged_for_update_7").html()) +
                                        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_12").html()) +
                                        parseFloat($("#hours_logged_for_update_13").html()) +
                                        parseFloat($("#hours_logged_for_update_14").html()) +
                                        parseFloat($("#hours_logged_for_update_15").html()) +
                                        parseFloat($("#hours_logged_for_update_16").html()) +
                                        parseFloat($("#hours_logged_for_update_17").html()) +
347 348
                                        parseFloat($("#hours_logged_for_update_18").html()) +
                                        parseFloat($("#hours_logged_for_update_19").html()) +
                                        parseFloat($("#hours_logged_for_update_20").html()) +
                                        parseFloat($("#hours_logged_for_update_21").html()) +
                                        parseFloat($("#hours_logged_for_update_22").html()) + 
352 353
                                        parseFloat($("#hours_logged_for_update_23").html()) +
            // Displays the total labor hours at the top of the page.
356 357
William Paul Liggett's avatar
William Paul Liggett committed
358 359