From 7198608a16698d06c753df8d4ca82a4fb10ddcd1 Mon Sep 17 00:00:00 2001 From: mattbk Date: Mon, 2 Nov 2015 11:37:20 -0600 Subject: [PATCH 01/12] Fix image css Closes https://github.com/mattbk/changeblindness/issues/21. --- css/style.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/css/style.css b/css/style.css index f65eb16..728221e 100644 --- a/css/style.css +++ b/css/style.css @@ -3,9 +3,10 @@ body { } #rotator { - background: #dddddd; - width: 960px; - height: 627px; + //background: #dddddd; + background: #ffffff; + // 90vh is 90% of viewer height: http://stackoverflow.com/a/16837667/2152245 + height:90vh;; overflow: hidden; cursor: pointer; } From a1245ef13ab24f833c58a12559d1605c19a8589d Mon Sep 17 00:00:00 2001 From: mattbk Date: Mon, 2 Nov 2015 11:44:07 -0600 Subject: [PATCH 02/12] Calculate total phases and display --- index.php | 5 +++-- views/change.html.twig | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/index.php b/index.php index b2e81e0..3b70036 100755 --- a/index.php +++ b/index.php @@ -66,9 +66,10 @@ switch ($mode) { break; case 'phase': $template = 'change.html.twig'; - $variables['imageWithElement'] = 'img/'.$phase.'-with.png'; - $variables['imageWithoutElement'] = 'img/'.$phase.'-without.png'; + $variables['imageWithElement'] = 'img/'.$phase.'-with.jpg'; + $variables['imageWithoutElement'] = 'img/'.$phase.'-without.jpg'; $variables['step_count'] = $index; + $variables['step_total'] = count($settings->phases); // Store the participant ID with some simple validation to prevent SQL injection if (isset($_POST['participantid'])) { $_SESSION['participantid'] = preg_replace('/[^A-Za-z0-9\. -]/', '', $_POST['participantid']); diff --git a/views/change.html.twig b/views/change.html.twig index c9e29ac..d63b4d9 100644 --- a/views/change.html.twig +++ b/views/change.html.twig @@ -2,7 +2,7 @@ {% block content %}
-

Change blindness test (step {{ step_count }} of 3)

+

Change blindness test (step {{ step_count }} of {{ step_total }})

Please wait while the images are loaded.

From 0d853a1511d8fb1e37df4bdafd3b629e7ebd4388 Mon Sep 17 00:00:00 2001 From: mattbk Date: Mon, 2 Nov 2015 11:56:10 -0600 Subject: [PATCH 03/12] Add max-height to images themselves --- css/style.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/css/style.css b/css/style.css index 728221e..6e36cf1 100644 --- a/css/style.css +++ b/css/style.css @@ -6,12 +6,14 @@ body { //background: #dddddd; background: #ffffff; // 90vh is 90% of viewer height: http://stackoverflow.com/a/16837667/2152245 - height:90vh;; + height:80vh; overflow: hidden; cursor: pointer; } #rotator img { display: block; + max-height:80vh; + width:auto; margin: 0; } \ No newline at end of file From f9f4122f994d1a9b6184771aa20b3a485138a7fa Mon Sep 17 00:00:00 2001 From: mattbk Date: Mon, 2 Nov 2015 15:35:16 -0600 Subject: [PATCH 04/12] Targets are now read from CSV file on server --- index.php | 23 +++++++++++++++++------ targets.csv | 6 ++++++ 2 files changed, 23 insertions(+), 6 deletions(-) create mode 100644 targets.csv diff --git a/index.php b/index.php index 3b70036..95cd844 100755 --- a/index.php +++ b/index.php @@ -30,6 +30,18 @@ $variables = array( 'baseURL' => $settings->baseURL ); +//Pull targets from CSV file +if (($handle = fopen('targets.csv', 'r')) === false) { + die('Error opening file'); + } +$headers = fgetcsv($handle, 1024, ','); +$targets = array(); +while ($row = fgetcsv($handle, 1024, ',')) { + $targets[$row[0]] = array_combine($headers, $row); + } +fclose($handle); + + $template = false; $mode = !empty($_GET['mode']) ? $_GET['mode'] : 'start'; $phase = !empty($_GET['phase']) && in_array($_GET['phase'], $settings->phases) ? $_GET['phase'] : false; @@ -97,18 +109,17 @@ switch ($mode) { } //Calculate the score. Compare results with targets in settings.json. - if (($phasevalue['xcoordinate'] >= $settings->elementLocations->{$phasename }->topleft->x) - && ($phasevalue['xcoordinate'] < $settings->elementLocations->{$phasename}->bottomright->x) - && ($phasevalue['ycoordinate'] >= $settings->elementLocations->{$phasename}->topleft->y) - && ($phasevalue['ycoordinate'] < $settings->elementLocations->{$phasename}->bottomright->y)) { + if (($phasevalue['xcoordinate'] >= $targets[$phasename][topleftx]) + && ($phasevalue['xcoordinate'] < $targets[$phasename][bottomrightx]) + && ($phasevalue['ycoordinate'] >= $targets[$phasename][toplefty]) + && ($phasevalue['ycoordinate'] < $targets[$phasename][bottomrighty])) { //Put the correct score in the ready array array_push($ready, '1'); } else { //Put the incorrect score in the ready array array_push($ready, '0'); - } - + } //Building an INSERT query: //Include userid (once collection form is added into the start page) // DB fields are listed here: diff --git a/targets.csv b/targets.csv new file mode 100644 index 0000000..9f2c9ff --- /dev/null +++ b/targets.csv @@ -0,0 +1,6 @@ +phase,topleftx,toplefty,bottomrightx,bottomrighty +1,0,0,10,10 +2,0,0,20,20 +3,0,0,30,30 +4,0,0,40,40 +5,0,0,50,50 From 69cc135fe7b8e286c4e6ba8b1a8b870c9eebe85d Mon Sep 17 00:00:00 2001 From: mattbk Date: Mon, 2 Nov 2015 15:38:07 -0600 Subject: [PATCH 05/12] Remove elementLocations from settings.json Not needed, target locations are in targets.csv now. --- settings.json.example | 32 -------------------------------- 1 file changed, 32 deletions(-) diff --git a/settings.json.example b/settings.json.example index 63ca3df..85fe47b 100644 --- a/settings.json.example +++ b/settings.json.example @@ -12,37 +12,5 @@ "renoted" ], "baseURL": "/", - "elementLocations": { - "notable": { - "topleft": { - "x": 724, - "y": 340 - }, - "bottomright": { - "x": 884, - "y": 456 - } - }, - "unnoted": { - "topleft": { - "x": 48, - "y": 180 - }, - "bottomright": { - "x": 900, - "y": 200 - } - }, - "renoted": { - "topleft": { - "x": 48, - "y": 180 - }, - "bottomright": { - "x": 900, - "y": 204 - } - } - }, "debug": false } From 1491499d247c6810deb9bfcc55e9a735bd998123 Mon Sep 17 00:00:00 2001 From: mattbk Date: Tue, 3 Nov 2015 08:32:15 -0600 Subject: [PATCH 06/12] Unset $_SESSION['results'] on the start page --- index.php | 2 ++ 1 file changed, 2 insertions(+) diff --git a/index.php b/index.php index 95cd844..3baae56 100755 --- a/index.php +++ b/index.php @@ -75,6 +75,7 @@ switch ($mode) { case 'start': $template = 'index.html.twig'; $variables['start_url'] = 'index.php?mode=phase&phase='.$settings->phases[$index]; + unset($_SESSION['results']); break; case 'phase': $template = 'change.html.twig'; @@ -90,6 +91,7 @@ switch ($mode) { case 'phase_next': $template = 'next.html.twig'; $variables['next_url'] = 'index.php?mode=phase&phase='.$settings->phases[$index]; + $variables['prev_url'] = 'index.php?mode=phase&phase='.$settings->phases[$index-1]; $variables['step_count'] = $index; break; case 'finish': From 59d889abccfaa4f20ece5f77217e08e30d8b24fb Mon Sep 17 00:00:00 2001 From: mattbk Date: Tue, 3 Nov 2015 08:33:37 -0600 Subject: [PATCH 07/12] Add href for retry button --- views/next.html.twig | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/views/next.html.twig b/views/next.html.twig index d00cdf9..62c04ec 100644 --- a/views/next.html.twig +++ b/views/next.html.twig @@ -2,8 +2,8 @@ {% block content %}
-

Change blindness test (step {{ step_count }} of 3)

+

Change blindness test (step {{ step_count }} of {{ step_total }})

Your response has been recorded.

-

« Retry Continue to step {{ step_count + 1 }} »

+

« Retry Continue to step {{ step_count + 1 }} »

{% endblock %} \ No newline at end of file From 79e4dcd66567c234206c9684d118e233916d9e88 Mon Sep 17 00:00:00 2001 From: mattbk Date: Tue, 3 Nov 2015 11:51:28 -0600 Subject: [PATCH 08/12] Add copy of Twig license Twig's license at http://twig.sensiolabs.org/license allows for duplication. For now, creating this file even if the plan is to ask people to download Twig separately in the future. Closes https://github.com/mattbk/changeblindness/issues/8. --- Twig/TwigLicense.txt | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 Twig/TwigLicense.txt diff --git a/Twig/TwigLicense.txt b/Twig/TwigLicense.txt new file mode 100644 index 0000000..1e289e9 --- /dev/null +++ b/Twig/TwigLicense.txt @@ -0,0 +1,12 @@ +Twig License is at http://twig.sensiolabs.org/license. + +Copyright (c) 2009-2014 by the Twig Team, see AUTHORS for more details. + +Some rights reserved. + +Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: + +Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer. +Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution. +The names of the contributors may not be used to endorse or promote products derived from this software without specific prior written permission. +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. \ No newline at end of file From 75f143aa707fb27199187eb5220abb6352ba4706 Mon Sep 17 00:00:00 2001 From: mattbk Date: Tue, 3 Nov 2015 14:10:51 -0600 Subject: [PATCH 09/12] Add a timezone setting in settings.php --- index.php | 2 ++ settings.json.example | 3 ++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/index.php b/index.php index 3baae56..6804ec4 100755 --- a/index.php +++ b/index.php @@ -18,6 +18,8 @@ session_start(); $base_dir = dirname(__FILE__); $settings = json_decode(file_get_contents('settings.json')); +//Set timezone +date_default_timezone_set ($settings->timezone); $db = new mysqli($settings->database->host, $settings->database->username, $settings->database->password, $settings->database->name); diff --git a/settings.json.example b/settings.json.example index 85fe47b..9d5327a 100644 --- a/settings.json.example +++ b/settings.json.example @@ -12,5 +12,6 @@ "renoted" ], "baseURL": "/", - "debug": false + "debug": false, + "timezone": "America/Chicago" } From 88ff34bb65e048fa827057af88e5ee13768716c0 Mon Sep 17 00:00:00 2001 From: mattbk Date: Tue, 3 Nov 2015 14:43:39 -0600 Subject: [PATCH 10/12] File extension for images is now defined in settings.json --- index.php | 4 ++-- settings.json.example | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/index.php b/index.php index 6804ec4..e43c87a 100755 --- a/index.php +++ b/index.php @@ -81,8 +81,8 @@ switch ($mode) { break; case 'phase': $template = 'change.html.twig'; - $variables['imageWithElement'] = 'img/'.$phase.'-with.jpg'; - $variables['imageWithoutElement'] = 'img/'.$phase.'-without.jpg'; + $variables['imageWithElement'] = 'img/'.$phase.'-with.'.$settings->filetype; + $variables['imageWithoutElement'] = 'img/'.$phase.'-without.'.$settings->filetype; $variables['step_count'] = $index; $variables['step_total'] = count($settings->phases); // Store the participant ID with some simple validation to prevent SQL injection diff --git a/settings.json.example b/settings.json.example index 9d5327a..3a79f82 100644 --- a/settings.json.example +++ b/settings.json.example @@ -13,5 +13,6 @@ ], "baseURL": "/", "debug": false, - "timezone": "America/Chicago" + "timezone": "America/Chicago", + "filetype": "jpg" } From c034feec97668120b9cd9f7f6b73bdc2b6d9cf6b Mon Sep 17 00:00:00 2001 From: mattbk Date: Wed, 4 Nov 2015 15:18:02 -0600 Subject: [PATCH 11/12] Ad sorts to the results query --- index.php | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/index.php b/index.php index e43c87a..683f475 100755 --- a/index.php +++ b/index.php @@ -176,11 +176,11 @@ switch ($mode) { if ($filtered) { $variables['filtered'] = true; //tablename - $results = $db->query("select * from ".$settings->database->table." where host != '192.168.0.1' order by datetime asc"); + $results = $db->query("select * from ".$settings->database->table." where host != '192.168.0.1' order by datetime asc, participantid asc, phase asc"); } else { //tablename - $results = $db->query("select * from ".$settings->database->table." order by datetime asc"); + $results = $db->query("select * from ".$settings->database->table." order by datetime asc, participantid asc, phase asc"); } if ($results === false) { From 3e4a16ef004f5f8e73e9cca2659b680fb4f894df Mon Sep 17 00:00:00 2001 From: mattbk Date: Thu, 5 Nov 2015 15:42:34 -0600 Subject: [PATCH 12/12] Add a transparent div on top of the image Capture mouse clicks even when images aren't showing. --- css/style.css | 16 +++++++++++++--- js/change.js | 6 +++--- views/change.html.twig | 4 ++++ 3 files changed, 20 insertions(+), 6 deletions(-) diff --git a/css/style.css b/css/style.css index 6e36cf1..a5a2466 100644 --- a/css/style.css +++ b/css/style.css @@ -2,13 +2,23 @@ body { padding-top: 40px; } +#outside { + cursor: pointer; + z-index:10; + position:relative; +} + #rotator { - //background: #dddddd; background: #ffffff; // 90vh is 90% of viewer height: http://stackoverflow.com/a/16837667/2152245 height:80vh; - overflow: hidden; + width:auto; + //overflow: hidden; cursor: pointer; + z-index:0; + position: absolute; + left: 0px; + top: 0px; } #rotator img { @@ -16,4 +26,4 @@ body { max-height:80vh; width:auto; margin: 0; -} \ No newline at end of file +} diff --git a/js/change.js b/js/change.js index 8d32949..22c8bba 100644 --- a/js/change.js +++ b/js/change.js @@ -1,6 +1,6 @@ // Script settings. -var slideDuration = 500; -var blankDuration = 200; +var slideDuration = 600; +var blankDuration = 400; // Script internals. var $currentSlide; @@ -22,7 +22,7 @@ $(document).ready(function(){ startTime = d1.getTime(); - $('#rotator').mousedown(function(event){ + $('#outside').mousedown(function(event){ document.getElementById('xcoordinate').value = event.pageX - this.offsetLeft; document.getElementById('ycoordinate').value = event.pageY - this.offsetTop; var d2 = new Date(); var endTime = d2.getTime(); diff --git a/views/change.html.twig b/views/change.html.twig index d63b4d9..b688c6e 100644 --- a/views/change.html.twig +++ b/views/change.html.twig @@ -7,10 +7,14 @@

Please wait while the images are loaded.

+
+ +
+