From b79bb52971513bf799abd66e8367519978686432 Mon Sep 17 00:00:00 2001 From: courtneycb Date: Wed, 30 Oct 2019 12:47:51 +1300 Subject: [PATCH 01/20] Add initial files. --- csfieldguide/static/interactives/data-bias/css/data-bias.scss | 0 csfieldguide/static/interactives/data-bias/js/data-bias.js | 0 csfieldguide/templates/interactives/data-bias.html | 0 3 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 csfieldguide/static/interactives/data-bias/css/data-bias.scss create mode 100644 csfieldguide/static/interactives/data-bias/js/data-bias.js create mode 100644 csfieldguide/templates/interactives/data-bias.html diff --git a/csfieldguide/static/interactives/data-bias/css/data-bias.scss b/csfieldguide/static/interactives/data-bias/css/data-bias.scss new file mode 100644 index 000000000..e69de29bb diff --git a/csfieldguide/static/interactives/data-bias/js/data-bias.js b/csfieldguide/static/interactives/data-bias/js/data-bias.js new file mode 100644 index 000000000..e69de29bb diff --git a/csfieldguide/templates/interactives/data-bias.html b/csfieldguide/templates/interactives/data-bias.html new file mode 100644 index 000000000..e69de29bb From d83da0dc39c131e24c0f668b918808feab2c39a3 Mon Sep 17 00:00:00 2001 From: courtneycb Date: Wed, 30 Oct 2019 12:51:21 +1300 Subject: [PATCH 02/20] Add content files and outline template. --- .../interactives/content/en/interactives.yaml | 2 ++ .../content/structure/interactives.yaml | 4 ++++ .../templates/interactives/data-bias.html | 19 +++++++++++++++++++ 3 files changed, 25 insertions(+) diff --git a/csfieldguide/interactives/content/en/interactives.yaml b/csfieldguide/interactives/content/en/interactives.yaml index b3ee91f6e..13bedddc2 100644 --- a/csfieldguide/interactives/content/en/interactives.yaml +++ b/csfieldguide/interactives/content/en/interactives.yaml @@ -46,6 +46,8 @@ confused-buttons: name: Confused Buttons confusing-error: name: Confusing Error +data-bias: + name: Data Bias date-picker: name: Date Picker deceiver: diff --git a/csfieldguide/interactives/content/structure/interactives.yaml b/csfieldguide/interactives/content/structure/interactives.yaml index 1778c9124..4e8805c8a 100644 --- a/csfieldguide/interactives/content/structure/interactives.yaml +++ b/csfieldguide/interactives/content/structure/interactives.yaml @@ -111,6 +111,10 @@ confusing-error: de: interactives/confusing-error.html es: interactives/confusing-error.html is_interactive: false +data-bias: + languages: + en: interactives/data-bias.html + is_interactive: true date-picker: languages: en: interactives/date-picker.html diff --git a/csfieldguide/templates/interactives/data-bias.html b/csfieldguide/templates/interactives/data-bias.html index e69de29bb..b4dbd8703 100644 --- a/csfieldguide/templates/interactives/data-bias.html +++ b/csfieldguide/templates/interactives/data-bias.html @@ -0,0 +1,19 @@ +{% extends interactive_mode_template %} + +{% load i18n %} +{% load static %} + +{% block html %} +
+
+
+
+{% endblock html %} + +{% block css %} + +{% endblock css %} + +{% block js %} + +{% endblock js %} From acbbffb0afbcab3d068de6c8be6fd068b862f379 Mon Sep 17 00:00:00 2001 From: courtneycb Date: Wed, 30 Oct 2019 13:36:16 +1300 Subject: [PATCH 03/20] Add licence files. Update community contributors. Rename files. --- LICENCE-THIRD-PARTY | 9 ++++++++ .../interactives/content/en/interactives.yaml | 4 ++-- .../content/structure/interactives.yaml | 8 +++---- .../interactives/bias-in-big-data/README.md | 19 +++++++++++++++++ .../css/bias-in-big-data.scss} | 0 .../js/bias-in-big-data.js} | 0 .../templates/appendices/contributors.html | 4 ++++ .../{data-bias.html => bias-in-big-data.html} | 4 ++-- third-party-licences/bias-in-big-data.txt | 21 +++++++++++++++++++ 9 files changed, 61 insertions(+), 8 deletions(-) create mode 100644 csfieldguide/static/interactives/bias-in-big-data/README.md rename csfieldguide/static/interactives/{data-bias/css/data-bias.scss => bias-in-big-data/css/bias-in-big-data.scss} (100%) rename csfieldguide/static/interactives/{data-bias/js/data-bias.js => bias-in-big-data/js/bias-in-big-data.js} (100%) rename csfieldguide/templates/interactives/{data-bias.html => bias-in-big-data.html} (53%) create mode 100644 third-party-licences/bias-in-big-data.txt diff --git a/LICENCE-THIRD-PARTY b/LICENCE-THIRD-PARTY index c35283e64..b0053fce1 100644 --- a/LICENCE-THIRD-PARTY +++ b/LICENCE-THIRD-PARTY @@ -183,6 +183,15 @@ licensed under MIT licence. third-party-licences/cytoscape-no-overlap.txt ============================================================================== +============================================================================== +Bias in Big Data +------------------------------------------------------------------------------ +https://github.com/NCC74656/Bias-In-Big-Data-Interactive +Copyright (c) 2019 Mark Henszey Wolgin +licensed under MIT licence. +third-party-licences/bias-in-big-data.txt +============================================================================== + ============================================================================== del ------------------------------------------------------------------------------ diff --git a/csfieldguide/interactives/content/en/interactives.yaml b/csfieldguide/interactives/content/en/interactives.yaml index 13bedddc2..c1d7f7676 100644 --- a/csfieldguide/interactives/content/en/interactives.yaml +++ b/csfieldguide/interactives/content/en/interactives.yaml @@ -12,6 +12,8 @@ awful-calculator: name: Awful Calculator base-calculator: name: Base Calculator +bias-in-big-data: + name: Bias in Big Data big-number-calculator: name: Big Number Calculator bin-packing: @@ -46,8 +48,6 @@ confused-buttons: name: Confused Buttons confusing-error: name: Confusing Error -data-bias: - name: Data Bias date-picker: name: Date Picker deceiver: diff --git a/csfieldguide/interactives/content/structure/interactives.yaml b/csfieldguide/interactives/content/structure/interactives.yaml index 4e8805c8a..54eb9caa8 100644 --- a/csfieldguide/interactives/content/structure/interactives.yaml +++ b/csfieldguide/interactives/content/structure/interactives.yaml @@ -34,6 +34,10 @@ base-calculator: languages: en: interactives/base-calculator.html is_interactive: true +bias-in-big-data: + languages: + en: interactives/bias-in-big-data.html + is_interactive: true big-number-calculator: languages: en: interactives/big-number-calculator.html @@ -111,10 +115,6 @@ confusing-error: de: interactives/confusing-error.html es: interactives/confusing-error.html is_interactive: false -data-bias: - languages: - en: interactives/data-bias.html - is_interactive: true date-picker: languages: en: interactives/date-picker.html diff --git a/csfieldguide/static/interactives/bias-in-big-data/README.md b/csfieldguide/static/interactives/bias-in-big-data/README.md new file mode 100644 index 000000000..c43efae80 --- /dev/null +++ b/csfieldguide/static/interactives/bias-in-big-data/README.md @@ -0,0 +1,19 @@ +# Data Bias interactive + +**Created by:** + +- Sofia DiGirolamo - https://github.com/sdigiro +- Minji Kong - https://github.com/mkong001 +- Korey Mitchell - https://github.com/koreymitchell +- Mark Wolgin - https://github.com/NCC74656 + +The original can be found [here](https://github.com/NCC74656/Bias-In-Big-Data-Interactive). + +**Rebuilt by:** Courtney Bracefield + +This interactive demonstrates how small changes in selection and perception can change the result of a study or competition. +The user will learn how to better view data by altering their perspective. + +## Licences + +The licence of the original interactive can be found in `LICENCE-THIRD-PARTY` with a full copy available in the `third-party-licences` directory. diff --git a/csfieldguide/static/interactives/data-bias/css/data-bias.scss b/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss similarity index 100% rename from csfieldguide/static/interactives/data-bias/css/data-bias.scss rename to csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss diff --git a/csfieldguide/static/interactives/data-bias/js/data-bias.js b/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js similarity index 100% rename from csfieldguide/static/interactives/data-bias/js/data-bias.js rename to csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js diff --git a/csfieldguide/templates/appendices/contributors.html b/csfieldguide/templates/appendices/contributors.html index 7bd3e9fca..59b0d31db 100644 --- a/csfieldguide/templates/appendices/contributors.html +++ b/csfieldguide/templates/appendices/contributors.html @@ -139,6 +139,10 @@

{% trans 'Comm
  • gmohler213 (Greg Mohler)
  • Rachel Muzzelo
  • aenkirch
    • +
  • sdigiro (Sofia DiGirolamo)
    • +
  • mkong001 (Minji Kong)
    • +
  • koreymitchell (Korey Mitchell)
    • +
  • NCC74656 (Mark Wolgin)

    • {% trans 'Note: If there is an error in the list, please contact Jack Morgan' %}

    diff --git a/csfieldguide/templates/interactives/data-bias.html b/csfieldguide/templates/interactives/bias-in-big-data.html similarity index 53% rename from csfieldguide/templates/interactives/data-bias.html rename to csfieldguide/templates/interactives/bias-in-big-data.html index b4dbd8703..ec0f4c286 100644 --- a/csfieldguide/templates/interactives/data-bias.html +++ b/csfieldguide/templates/interactives/bias-in-big-data.html @@ -11,9 +11,9 @@ {% endblock html %} {% block css %} - + {% endblock css %} {% block js %} - + {% endblock js %} diff --git a/third-party-licences/bias-in-big-data.txt b/third-party-licences/bias-in-big-data.txt new file mode 100644 index 000000000..ad2628b07 --- /dev/null +++ b/third-party-licences/bias-in-big-data.txt @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2019 Mark Henszey Wolgin + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. From eba07d08932465cec33fbdadbccc91fd51aa920f Mon Sep 17 00:00:00 2001 From: courtneycb Date: Wed, 30 Oct 2019 14:47:38 +1300 Subject: [PATCH 04/20] Add basic html. --- csfieldguide/package.json | 1 + .../static/interactives/bias-in-big-data/package.json | 8 ++++++++ .../templates/interactives/bias-in-big-data.html | 11 +++++++++-- 3 files changed, 18 insertions(+), 2 deletions(-) create mode 100644 csfieldguide/static/interactives/bias-in-big-data/package.json diff --git a/csfieldguide/package.json b/csfieldguide/package.json index adf4c76be..dea5b66b3 100644 --- a/csfieldguide/package.json +++ b/csfieldguide/package.json @@ -15,6 +15,7 @@ "gumshoejs": "5.1.2", "csfg-module-fsa": "file:./static/js/modules/fsa/", "csfg-interactive-algorithm-timer": "file:./static/interactives/algorithm-timer/", + "csfg-interactive-bias-in-big-data": "file:./static/interactives/bias-in-big-data/", "csfg-interactive-big-number-calculator": "file:./static/interactives/big-number-calculator/", "csfg-interactive-bin-packing": "file:./static/interactives/bin-packing/", "csfg-interactive-box-rotation": "file:./static/interactives/box-rotation/", diff --git a/csfieldguide/static/interactives/bias-in-big-data/package.json b/csfieldguide/static/interactives/bias-in-big-data/package.json new file mode 100644 index 000000000..11a6da964 --- /dev/null +++ b/csfieldguide/static/interactives/bias-in-big-data/package.json @@ -0,0 +1,8 @@ +{ + "name": "csfg-interactive-bias-in-big-data", + "version": "1.0.0", + "private": true, + "dependencies": { + "nouislider": "13.1.5" + } +} diff --git a/csfieldguide/templates/interactives/bias-in-big-data.html b/csfieldguide/templates/interactives/bias-in-big-data.html index ec0f4c286..aa74abf0b 100644 --- a/csfieldguide/templates/interactives/bias-in-big-data.html +++ b/csfieldguide/templates/interactives/bias-in-big-data.html @@ -4,8 +4,15 @@ {% load static %} {% block html %} -
    -
    +
    +
    +
    +

    {% trans "Click each dot that you see on the screen, then click 'Next stage' to reveal the answer!" %}

    +

    0

    + +
    +
    +
    {% endblock html %} From 07da80d59e6fa7728753cf93f1cfe9c0951d6253 Mon Sep 17 00:00:00 2001 From: courtneycb Date: Thu, 31 Oct 2019 11:59:15 +1300 Subject: [PATCH 05/20] Dynamically add circles in random positions with random colours. --- .../css/bias-in-big-data.scss | 54 +++++++++++++++++++ .../bias-in-big-data/js/bias-in-big-data.js | 37 +++++++++++++ .../interactives/bias-in-big-data.html | 20 +++---- 3 files changed, 102 insertions(+), 9 deletions(-) diff --git a/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss b/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss index e69de29bb..173a0579a 100644 --- a/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss +++ b/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss @@ -0,0 +1,54 @@ +.circle { + border-radius: 50%; + width: 3.125rem; + height: 3.125rem; + position: absolute; +} + +#circles-area { + position: relative; +} + +#bias-in-big-data-container { + padding: 6rem !important; +} + +.red { + background: red; +} + +.green { + background: green; +} + +.blue { + background: blue; +} + +.yellow { + background: yellow; +} + +.purple { + background: purple; +} + +.white { + background: white; +} + +.black { + background: black; +} + +.lime { + background: lime; +} + +.orange { + background: orange; +} + +.fuchsia { + background: fuchsia; +} diff --git a/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js b/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js index e69de29bb..2df02fd1a 100644 --- a/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js +++ b/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js @@ -0,0 +1,37 @@ +const COLOURS = ['red', 'green', 'blue', 'yellow', 'purple', 'white', 'black', 'lime', 'orange', 'fuchsia']; +const CIRCLE_RADIUS = 25; // 25 pixels +var count = 0; + +$(document).ready(function() { + $('#circles-area').css('background-color', 'black'); + for (i=0; i < 8; i++) { + createCircle(); + } + $('.circle').removeClass('d-none'); + $('.circle').click(function() { + count += 1; + $('#count').text(count); + // make clicked circle white + $(this).css('background', 'white'); + }) +}); + +function getRandomPosition() { + // minus CIRCLE_RADIUS so the middle of the circle doesn't get put on the edge of the container + var circlesAreaWidth = $('#circles-area').width() - CIRCLE_RADIUS; + var circlesAreaHeight = $('#circles-area').height() - CIRCLE_RADIUS; + var randWidth = Math.floor((Math.random() * circlesAreaWidth)) + var randHeight = Math.floor((Math.random() * circlesAreaHeight)) + + return { + top: randHeight, + left: randWidth + }; +} + +function createCircle() { + var colour = COLOURS[Math.floor(Math.random() * COLOURS.length)]; + var $circle = $("
    ").addClass('circle d-none ' + colour); + $circle.offset(getRandomPosition()); + $('#circles-area').append($circle); +} diff --git a/csfieldguide/templates/interactives/bias-in-big-data.html b/csfieldguide/templates/interactives/bias-in-big-data.html index aa74abf0b..af71dda7b 100644 --- a/csfieldguide/templates/interactives/bias-in-big-data.html +++ b/csfieldguide/templates/interactives/bias-in-big-data.html @@ -4,15 +4,17 @@ {% load static %} {% block html %} -
    -
    -
    -

    {% trans "Click each dot that you see on the screen, then click 'Next stage' to reveal the answer!" %}

    -

    0

    - -
    -
    -
    +
    +
    +

    {% trans "Click each dot that you see on the screen, then click 'Next stage' to reveal the answer!" %}

    +
    +

    0

    + +
    +
    +
    +
    +
    {% endblock html %} From 327b08ddb8c93274cc332f3f104cce3f61ab1987 Mon Sep 17 00:00:00 2001 From: courtneycb Date: Thu, 31 Oct 2019 12:55:55 +1300 Subject: [PATCH 06/20] add functionality for first stage. --- .../bias-in-big-data/css/bias-in-big-data.scss | 8 ++++++-- .../bias-in-big-data/js/bias-in-big-data.js | 17 +++++++++++++++-- .../interactives/bias-in-big-data.html | 2 +- 3 files changed, 22 insertions(+), 5 deletions(-) diff --git a/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss b/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss index 173a0579a..873d30754 100644 --- a/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss +++ b/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss @@ -13,6 +13,10 @@ padding: 6rem !important; } +.glow { + box-shadow: 0 0 1rem 0.5rem aqua; +} + .red { background: red; } @@ -45,8 +49,8 @@ background: lime; } -.orange { - background: orange; +.darkorange { + background: darkorange; } .fuchsia { diff --git a/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js b/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js index 2df02fd1a..f33616c18 100644 --- a/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js +++ b/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js @@ -1,8 +1,12 @@ -const COLOURS = ['red', 'green', 'blue', 'yellow', 'purple', 'white', 'black', 'lime', 'orange', 'fuchsia']; +const COLOURS = ['red', 'green', 'blue', 'yellow', 'purple', 'white', 'black', 'lime', 'darkorange', 'fuchsia']; const CIRCLE_RADIUS = 25; // 25 pixels +const missedCirclesText = gettext('You seem to have missed some dots! Forced perspective like this can be used in data representation and cause bias in the overall results.'); var count = 0; +var firstStage = true; $(document).ready(function() { + // randomly set position of 3 black circles already created. + $('.circle').offset(getRandomPosition()); $('#circles-area').css('background-color', 'black'); for (i=0; i < 8; i++) { createCircle(); @@ -12,8 +16,9 @@ $(document).ready(function() { count += 1; $('#count').text(count); // make clicked circle white - $(this).css('background', 'white'); + $(this).addClass('glow'); }) + $('#next-stage').click(loadNextStage); }); function getRandomPosition() { @@ -35,3 +40,11 @@ function createCircle() { $circle.offset(getRandomPosition()); $('#circles-area').append($circle); } + +function loadNextStage() { + if (firstStage) { + // what happens if they haven't missed any circles? + $('#circles-area').css('background-color', 'grey'); + $('#instruction-text').text(missedCirclesText); + } +} diff --git a/csfieldguide/templates/interactives/bias-in-big-data.html b/csfieldguide/templates/interactives/bias-in-big-data.html index af71dda7b..af4fd6bfc 100644 --- a/csfieldguide/templates/interactives/bias-in-big-data.html +++ b/csfieldguide/templates/interactives/bias-in-big-data.html @@ -9,7 +9,7 @@

    {% trans "Click each dot that you see on the screen, then click 'Next stage' to reveal the answer!" %}

    0

    - +
    From 07269b9056d2c484698006e63de2f2fc455c6a00 Mon Sep 17 00:00:00 2001 From: courtneycb Date: Thu, 31 Oct 2019 15:14:58 +1300 Subject: [PATCH 07/20] Add slider. --- .../css/bias-in-big-data.scss | 14 ++++++ .../bias-in-big-data/js/bias-in-big-data.js | 48 +++++++++++++++++-- .../bias-in-big-data/package.json | 3 +- .../interactives/bias-in-big-data.html | 6 ++- 4 files changed, 65 insertions(+), 6 deletions(-) diff --git a/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss b/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss index 873d30754..97a0c8dfd 100644 --- a/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss +++ b/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss @@ -1,3 +1,5 @@ +@import "node_modules/nouislider/distribute/nouislider"; + .circle { border-radius: 50%; width: 3.125rem; @@ -13,6 +15,18 @@ padding: 6rem !important; } +#background-colour-slider .noUi-pips { + padding-top: 5px; +} + +#background-colour-slider-container { + width: 80%; +} + +#background-colour-slider .noUi-connect { + background: aqua; +} + .glow { box-shadow: 0 0 1rem 0.5rem aqua; } diff --git a/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js b/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js index f33616c18..a5ffb74af 100644 --- a/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js +++ b/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js @@ -1,12 +1,20 @@ +const noUiSlider = require('nouislider'); +const wNumb = require('wnumb'); + const COLOURS = ['red', 'green', 'blue', 'yellow', 'purple', 'white', 'black', 'lime', 'darkorange', 'fuchsia']; -const CIRCLE_RADIUS = 25; // 25 pixels -const missedCirclesText = gettext('You seem to have missed some dots! Forced perspective like this can be used in data representation and cause bias in the overall results.'); +const CIRCLE_RADIUS = 40; // 25 pixels +const MISSED_CIRCLES_TEXT = gettext('You seem to have missed some dots! Forced perspective like this can be used in data representation and cause bias in the overall results.'); +const SLIDER_TEXT = gettext('Click and drag the slider to change background colour. What do you notice is happening?') +const SLIDER_MIN = 0; +const SLIDER_MAX = 255; var count = 0; var firstStage = true; $(document).ready(function() { // randomly set position of 3 black circles already created. - $('.circle').offset(getRandomPosition()); + $('.circle').each(function() { + $(this).offset(getRandomPosition()); + }); $('#circles-area').css('background-color', 'black'); for (i=0; i < 8; i++) { createCircle(); @@ -18,9 +26,37 @@ $(document).ready(function() { // make clicked circle white $(this).addClass('glow'); }) + createSlider(); $('#next-stage').click(loadNextStage); }); +function createSlider() { + var bgColourSlider = $('#background-colour-slider'); + noUiSlider.create(bgColourSlider[0], { + start: Math.floor(Math.random() * SLIDER_MAX), + step: 1, + connect: "lower", + orientation: "horizontal", + range: { + 'min': SLIDER_MIN, + 'max': SLIDER_MAX + }, + format: wNumb({ + decimals: 0 + }), + pips: { + mode: 'count', + values: 9, + density: 9, + stepped: true + } + }); + bgColourSlider[0].noUiSlider.on('update', function() { + var value = bgColourSlider[0].noUiSlider.get(); + var hexValue = value.toString(16); + }); +} + function getRandomPosition() { // minus CIRCLE_RADIUS so the middle of the circle doesn't get put on the edge of the container var circlesAreaWidth = $('#circles-area').width() - CIRCLE_RADIUS; @@ -45,6 +81,10 @@ function loadNextStage() { if (firstStage) { // what happens if they haven't missed any circles? $('#circles-area').css('background-color', 'grey'); - $('#instruction-text').text(missedCirclesText); + $('#instruction-text').text(MISSED_CIRCLES_TEXT); + firstStage = false; + } else { + $('#instruction-text').text(SLIDER_TEXT); + $('#background-colour-slider').removeClass('d-none'); } } diff --git a/csfieldguide/static/interactives/bias-in-big-data/package.json b/csfieldguide/static/interactives/bias-in-big-data/package.json index 11a6da964..1238a76fa 100644 --- a/csfieldguide/static/interactives/bias-in-big-data/package.json +++ b/csfieldguide/static/interactives/bias-in-big-data/package.json @@ -3,6 +3,7 @@ "version": "1.0.0", "private": true, "dependencies": { - "nouislider": "13.1.5" + "nouislider": "13.1.5", + "wnumb": "1.2.0" } } diff --git a/csfieldguide/templates/interactives/bias-in-big-data.html b/csfieldguide/templates/interactives/bias-in-big-data.html index af4fd6bfc..90646e107 100644 --- a/csfieldguide/templates/interactives/bias-in-big-data.html +++ b/csfieldguide/templates/interactives/bias-in-big-data.html @@ -7,8 +7,12 @@

    {% trans "Click each dot that you see on the screen, then click 'Next stage' to reveal the answer!" %}

    -

    0

    +
    +
    +
    +
    +
    From 5ce98732c4a49ba9fa032ceaefbab9da1b341f42 Mon Sep 17 00:00:00 2001 From: courtneycb Date: Fri, 1 Nov 2019 10:02:06 +1300 Subject: [PATCH 08/20] Make circles responsive. --- .../css/bias-in-big-data.scss | 11 ++++--- .../bias-in-big-data/js/bias-in-big-data.js | 31 +++++++++++++------ .../interactives/bias-in-big-data.html | 4 +-- 3 files changed, 29 insertions(+), 17 deletions(-) diff --git a/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss b/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss index 97a0c8dfd..35d1b907b 100644 --- a/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss +++ b/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss @@ -16,17 +16,18 @@ } #background-colour-slider .noUi-pips { - padding-top: 5px; -} - -#background-colour-slider-container { - width: 80%; + padding-top: 0.3125rem; } #background-colour-slider .noUi-connect { background: aqua; } +#background-colour-slider-container { + padding-left: 4rem !important; + padding-right: 4rem !important; +} + .glow { box-shadow: 0 0 1rem 0.5rem aqua; } diff --git a/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js b/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js index a5ffb74af..c3f1d6fdb 100644 --- a/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js +++ b/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js @@ -2,7 +2,7 @@ const noUiSlider = require('nouislider'); const wNumb = require('wnumb'); const COLOURS = ['red', 'green', 'blue', 'yellow', 'purple', 'white', 'black', 'lime', 'darkorange', 'fuchsia']; -const CIRCLE_RADIUS = 40; // 25 pixels +const MANIPULATE_BOUNDARY = 10; // reduce by 10% const MISSED_CIRCLES_TEXT = gettext('You seem to have missed some dots! Forced perspective like this can be used in data representation and cause bias in the overall results.'); const SLIDER_TEXT = gettext('Click and drag the slider to change background colour. What do you notice is happening?') const SLIDER_MIN = 0; @@ -13,7 +13,7 @@ var firstStage = true; $(document).ready(function() { // randomly set position of 3 black circles already created. $('.circle').each(function() { - $(this).offset(getRandomPosition()); + $(this).css(getRandomPosition()); }); $('#circles-area').css('background-color', 'black'); for (i=0; i < 8; i++) { @@ -58,22 +58,33 @@ function createSlider() { } function getRandomPosition() { - // minus CIRCLE_RADIUS so the middle of the circle doesn't get put on the edge of the container - var circlesAreaWidth = $('#circles-area').width() - CIRCLE_RADIUS; - var circlesAreaHeight = $('#circles-area').height() - CIRCLE_RADIUS; - var randWidth = Math.floor((Math.random() * circlesAreaWidth)) - var randHeight = Math.floor((Math.random() * circlesAreaHeight)) + var circlesAreaHeight = $('#circles-area').height(); + var circlesAreaWidth = $('#circles-area').width(); + var randHeight = Math.floor((Math.random() * circlesAreaHeight)); + var randWidth = Math.floor((Math.random() * circlesAreaWidth)); + + // convert px to % + heightInPercentage = Math.floor((randHeight / circlesAreaHeight) * 100); + widthInPercentage = Math.floor((randWidth / circlesAreaWidth) * 100); + + // reduces percentage by 6% to prevent circles going outside of parent + if (heightInPercentage >= 95) { + heightInPercentage -= 6; + } + if (widthInPercentage >= 95) { + widthInPercentage -= 6; + } return { - top: randHeight, - left: randWidth + top: heightInPercentage + '%', + left: widthInPercentage + '%' }; } function createCircle() { var colour = COLOURS[Math.floor(Math.random() * COLOURS.length)]; var $circle = $("
    ").addClass('circle d-none ' + colour); - $circle.offset(getRandomPosition()); + $circle.css(getRandomPosition()); $('#circles-area').append($circle); } diff --git a/csfieldguide/templates/interactives/bias-in-big-data.html b/csfieldguide/templates/interactives/bias-in-big-data.html index 90646e107..e5bd1e8bd 100644 --- a/csfieldguide/templates/interactives/bias-in-big-data.html +++ b/csfieldguide/templates/interactives/bias-in-big-data.html @@ -5,7 +5,7 @@ {% block html %}
    -
    +

    {% trans "Click each dot that you see on the screen, then click 'Next stage' to reveal the answer!" %}

    0

    @@ -15,7 +15,7 @@

    0

    -
    +
    From 268c98f4c8c7c26111308fe8b98f4d2e7d64df9f Mon Sep 17 00:00:00 2001 From: courtneycb Date: Fri, 1 Nov 2019 10:07:48 +1300 Subject: [PATCH 09/20] prevent magic numbers. --- .../bias-in-big-data/js/bias-in-big-data.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js b/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js index c3f1d6fdb..f3a4b973d 100644 --- a/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js +++ b/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js @@ -2,11 +2,12 @@ const noUiSlider = require('nouislider'); const wNumb = require('wnumb'); const COLOURS = ['red', 'green', 'blue', 'yellow', 'purple', 'white', 'black', 'lime', 'darkorange', 'fuchsia']; -const MANIPULATE_BOUNDARY = 10; // reduce by 10% const MISSED_CIRCLES_TEXT = gettext('You seem to have missed some dots! Forced perspective like this can be used in data representation and cause bias in the overall results.'); const SLIDER_TEXT = gettext('Click and drag the slider to change background colour. What do you notice is happening?') const SLIDER_MIN = 0; const SLIDER_MAX = 255; +const PERENTAGE_BOUNDARY = 95; // 95% +const REDUCE_PERCENTAGE = 6; // 6% var count = 0; var firstStage = true; @@ -68,11 +69,11 @@ function getRandomPosition() { widthInPercentage = Math.floor((randWidth / circlesAreaWidth) * 100); // reduces percentage by 6% to prevent circles going outside of parent - if (heightInPercentage >= 95) { - heightInPercentage -= 6; + if (heightInPercentage >= PERENTAGE_BOUNDARY) { + heightInPercentage -= REDUCE_PERCENTAGE; } - if (widthInPercentage >= 95) { - widthInPercentage -= 6; + if (widthInPercentage >= PERENTAGE_BOUNDARY) { + widthInPercentage -= REDUCE_PERCENTAGE; } return { From 58b1460413e6a1315eff65039c068d5c379b446b Mon Sep 17 00:00:00 2001 From: courtneycb Date: Fri, 1 Nov 2019 11:42:56 +1300 Subject: [PATCH 10/20] Playing with hex colours... --- .../interactives/bias-in-big-data/js/bias-in-big-data.js | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js b/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js index f3a4b973d..55383b402 100644 --- a/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js +++ b/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js @@ -34,7 +34,7 @@ $(document).ready(function() { function createSlider() { var bgColourSlider = $('#background-colour-slider'); noUiSlider.create(bgColourSlider[0], { - start: Math.floor(Math.random() * SLIDER_MAX), + start: 0, step: 1, connect: "lower", orientation: "horizontal", @@ -54,7 +54,12 @@ function createSlider() { }); bgColourSlider[0].noUiSlider.on('update', function() { var value = bgColourSlider[0].noUiSlider.get(); - var hexValue = value.toString(16); + value = value.toString(16); + // hexValue = '#' + value + value + value; + var hexValue = '#' + ('000000' + ((value + value + value)>>>0).toString(16)).slice(-6); + // ('000000' + ((number)>>>0).toString(16)).slice(-6) + console.log(hexValue); + $('#circles-area').css('background-color', hexValue); }); } From e3b2a6393c1fd3900e966d5c6350f4e768254c61 Mon Sep 17 00:00:00 2001 From: courtneycb Date: Fri, 1 Nov 2019 11:59:52 +1300 Subject: [PATCH 11/20] Trying to get colours working. --- .../bias-in-big-data/js/bias-in-big-data.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js b/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js index 55383b402..2b9f19e92 100644 --- a/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js +++ b/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js @@ -5,7 +5,7 @@ const COLOURS = ['red', 'green', 'blue', 'yellow', 'purple', 'white', 'black', ' const MISSED_CIRCLES_TEXT = gettext('You seem to have missed some dots! Forced perspective like this can be used in data representation and cause bias in the overall results.'); const SLIDER_TEXT = gettext('Click and drag the slider to change background colour. What do you notice is happening?') const SLIDER_MIN = 0; -const SLIDER_MAX = 255; +const SLIDER_MAX = 256 ** 3; const PERENTAGE_BOUNDARY = 95; // 95% const REDUCE_PERCENTAGE = 6; // 6% var count = 0; @@ -44,19 +44,17 @@ function createSlider() { }, format: wNumb({ decimals: 0 - }), - pips: { - mode: 'count', - values: 9, - density: 9, - stepped: true - } + }) }); bgColourSlider[0].noUiSlider.on('update', function() { var value = bgColourSlider[0].noUiSlider.get(); + // var blue = value % 256; + // var green = ((value - blue) / 256) % 256; + // var red = ((value - blue) / (256 ** 2)) - (green / 256); + // var colourValue = 'rgb(' + red + ', ' + green + ', ' + blue + ')'; value = value.toString(16); // hexValue = '#' + value + value + value; - var hexValue = '#' + ('000000' + ((value + value + value)>>>0).toString(16)).slice(-6); + var hexValue = '#' + ('000000' + ((value)>>>0).toString(16)).slice(-6); // ('000000' + ((number)>>>0).toString(16)).slice(-6) console.log(hexValue); $('#circles-area').css('background-color', hexValue); From 8c7689ddc424ad70846560c9a3695697068f923c Mon Sep 17 00:00:00 2001 From: courtneycb Date: Mon, 4 Nov 2019 10:43:22 +1300 Subject: [PATCH 12/20] Styling. Get colour slider working. --- .../css/bias-in-big-data.scss | 62 +++++++++++++------ .../bias-in-big-data/js/bias-in-big-data.js | 22 +++---- .../interactives/bias-in-big-data.html | 6 +- 3 files changed, 53 insertions(+), 37 deletions(-) diff --git a/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss b/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss index 35d1b907b..221eaa1b2 100644 --- a/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss +++ b/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss @@ -15,19 +15,45 @@ padding: 6rem !important; } -#background-colour-slider .noUi-pips { +.noUi-pips { padding-top: 0.3125rem; } -#background-colour-slider .noUi-connect { - background: aqua; -} - #background-colour-slider-container { padding-left: 4rem !important; padding-right: 4rem !important; } +.noUi-target { + background: linear-gradient( + to right, + hsl(0,100%,50%), + hsl(60,100%,50%), + hsl(120,100%,50%), + hsl(180,100%,50%), + hsl(240,100%,50%), + hsl(300,100%,50%), + hsl(360,100%,50%) + ); +} + +.noUi-handle { + border: 0.125rem white solid; + height: 1.75rem !important; + width: 1.75rem !important; + border-radius: 50%; + top: -6px !important; +} + +.noUi-handle:before, +.noUi-handle:after { + content: none; +} + +.noUi-connect { + background: none; +} + .glow { box-shadow: 0 0 1rem 0.5rem aqua; } @@ -36,8 +62,8 @@ background: red; } -.green { - background: green; +.lime { + background: lime; } .blue { @@ -49,19 +75,7 @@ } .purple { - background: purple; -} - -.white { - background: white; -} - -.black { - background: black; -} - -.lime { - background: lime; + background: #9d03fc; } .darkorange { @@ -71,3 +85,11 @@ .fuchsia { background: fuchsia; } + +.aquamarine { + background: #00ffcc; +} + +.deeppink { + background: #ff0088; +} \ No newline at end of file diff --git a/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js b/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js index 2b9f19e92..2d762dc64 100644 --- a/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js +++ b/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js @@ -1,11 +1,11 @@ const noUiSlider = require('nouislider'); const wNumb = require('wnumb'); -const COLOURS = ['red', 'green', 'blue', 'yellow', 'purple', 'white', 'black', 'lime', 'darkorange', 'fuchsia']; +const COLOURS = ['red', 'lime', 'blue', 'yellow', 'purple', 'darkorange', 'fuchsia', 'aquamarine', 'deeppink']; const MISSED_CIRCLES_TEXT = gettext('You seem to have missed some dots! Forced perspective like this can be used in data representation and cause bias in the overall results.'); const SLIDER_TEXT = gettext('Click and drag the slider to change background colour. What do you notice is happening?') const SLIDER_MIN = 0; -const SLIDER_MAX = 256 ** 3; +const SLIDER_MAX = 360; const PERENTAGE_BOUNDARY = 95; // 95% const REDUCE_PERCENTAGE = 6; // 6% var count = 0; @@ -16,7 +16,6 @@ $(document).ready(function() { $('.circle').each(function() { $(this).css(getRandomPosition()); }); - $('#circles-area').css('background-color', 'black'); for (i=0; i < 8; i++) { createCircle(); } @@ -24,7 +23,7 @@ $(document).ready(function() { $('.circle').click(function() { count += 1; $('#count').text(count); - // make clicked circle white + // add glow around clicked circle $(this).addClass('glow'); }) createSlider(); @@ -48,16 +47,9 @@ function createSlider() { }); bgColourSlider[0].noUiSlider.on('update', function() { var value = bgColourSlider[0].noUiSlider.get(); - // var blue = value % 256; - // var green = ((value - blue) / 256) % 256; - // var red = ((value - blue) / (256 ** 2)) - (green / 256); - // var colourValue = 'rgb(' + red + ', ' + green + ', ' + blue + ')'; - value = value.toString(16); - // hexValue = '#' + value + value + value; - var hexValue = '#' + ('000000' + ((value)>>>0).toString(16)).slice(-6); - // ('000000' + ((number)>>>0).toString(16)).slice(-6) - console.log(hexValue); - $('#circles-area').css('background-color', hexValue); + hslColour = 'hsl(' + value + ', 100%, 50%)'; + $('#circles-area').css('background-color', hslColour); + $('.noUi-handle').css('background-color', hslColour); }); } @@ -100,6 +92,8 @@ function loadNextStage() { firstStage = false; } else { $('#instruction-text').text(SLIDER_TEXT); + $('.circle').removeClass('glow'); + $('#circles-area').css('background-color', 'red'); $('#background-colour-slider').removeClass('d-none'); } } diff --git a/csfieldguide/templates/interactives/bias-in-big-data.html b/csfieldguide/templates/interactives/bias-in-big-data.html index e5bd1e8bd..892b4e9f0 100644 --- a/csfieldguide/templates/interactives/bias-in-big-data.html +++ b/csfieldguide/templates/interactives/bias-in-big-data.html @@ -16,9 +16,9 @@

    0

    -
    -
    -
    +
    +
    +
    {% endblock html %} From e04d63fdf07808d923d5119e10b9ad8b9ab809bf Mon Sep 17 00:00:00 2001 From: courtneycb Date: Mon, 4 Nov 2019 12:24:27 +1300 Subject: [PATCH 13/20] Add restart functionality and tidy up. --- .../css/bias-in-big-data.scss | 1 + .../bias-in-big-data/js/bias-in-big-data.js | 61 ++++++++++++++----- .../interactives/bias-in-big-data.html | 1 + 3 files changed, 48 insertions(+), 15 deletions(-) diff --git a/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss b/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss index 221eaa1b2..d94a76a25 100644 --- a/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss +++ b/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss @@ -9,6 +9,7 @@ #circles-area { position: relative; + border-radius: 1rem; } #bias-in-big-data-container { diff --git a/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js b/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js index 2d762dc64..1a7dbe487 100644 --- a/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js +++ b/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js @@ -2,17 +2,27 @@ const noUiSlider = require('nouislider'); const wNumb = require('wnumb'); const COLOURS = ['red', 'lime', 'blue', 'yellow', 'purple', 'darkorange', 'fuchsia', 'aquamarine', 'deeppink']; +const START_TEXT = gettext("Click each dot that you see on the screen, then click 'Next stage' to reveal the answer!"); const MISSED_CIRCLES_TEXT = gettext('You seem to have missed some dots! Forced perspective like this can be used in data representation and cause bias in the overall results.'); const SLIDER_TEXT = gettext('Click and drag the slider to change background colour. What do you notice is happening?') const SLIDER_MIN = 0; const SLIDER_MAX = 360; -const PERENTAGE_BOUNDARY = 95; // 95% -const REDUCE_PERCENTAGE = 6; // 6% +const PERENTAGE_BOUNDARY_UPPER = 95; // 95% +const PERCENTAGE_ADJUSTMENT = 5; // 5% +const PERENTAGE_BOUNDARY_LOWER = 5; // 5% var count = 0; var firstStage = true; +var bgColourSlider = $('#background-colour-slider'); $(document).ready(function() { - // randomly set position of 3 black circles already created. + init(); + createSlider(); + $('#next-stage').click(loadNextStage); + $('#start-again').click(restartInteractive); +}); + +function init() { + // randomly set position of 3 red circles already created. $('.circle').each(function() { $(this).css(getRandomPosition()); }); @@ -20,18 +30,18 @@ $(document).ready(function() { createCircle(); } $('.circle').removeClass('d-none'); + $('#count').text(count).removeClass('d-none'); $('.circle').click(function() { count += 1; $('#count').text(count); // add glow around clicked circle $(this).addClass('glow'); - }) - createSlider(); - $('#next-stage').click(loadNextStage); -}); + }); + $('#next-stage').removeClass('d-none'); + $('#start-again').addClass('d-none'); +} function createSlider() { - var bgColourSlider = $('#background-colour-slider'); noUiSlider.create(bgColourSlider[0], { start: 0, step: 1, @@ -63,12 +73,16 @@ function getRandomPosition() { heightInPercentage = Math.floor((randHeight / circlesAreaHeight) * 100); widthInPercentage = Math.floor((randWidth / circlesAreaWidth) * 100); - // reduces percentage by 6% to prevent circles going outside of parent - if (heightInPercentage >= PERENTAGE_BOUNDARY) { - heightInPercentage -= REDUCE_PERCENTAGE; + // reduces or increases percentage by 5% to prevent circles going outside of parent + if (heightInPercentage >= PERENTAGE_BOUNDARY_UPPER) { + heightInPercentage -= PERCENTAGE_ADJUSTMENT; + } else if (heightInPercentage <= PERENTAGE_BOUNDARY_LOWER) { + heightInPercentage += PERCENTAGE_ADJUSTMENT } - if (widthInPercentage >= PERENTAGE_BOUNDARY) { - widthInPercentage -= REDUCE_PERCENTAGE; + if (widthInPercentage >= PERENTAGE_BOUNDARY_UPPER) { + widthInPercentage -= PERCENTAGE_ADJUSTMENT; + } else if (widthInPercentage <= PERENTAGE_BOUNDARY_LOWER) { + widthInPercentage += PERCENTAGE_ADJUSTMENT; } return { @@ -79,7 +93,7 @@ function getRandomPosition() { function createCircle() { var colour = COLOURS[Math.floor(Math.random() * COLOURS.length)]; - var $circle = $("
    ").addClass('circle d-none ' + colour); + var $circle = $("
    ").addClass('circle dynamic d-none ' + colour); $circle.css(getRandomPosition()); $('#circles-area').append($circle); } @@ -94,6 +108,23 @@ function loadNextStage() { $('#instruction-text').text(SLIDER_TEXT); $('.circle').removeClass('glow'); $('#circles-area').css('background-color', 'red'); - $('#background-colour-slider').removeClass('d-none'); + $('#next-stage').addClass('d-none'); + $('#start-again').removeClass('d-none'); + bgColourSlider.removeClass('d-none'); + // disable click event for circles + $('.circle').off('click'); + $('#count').addClass('d-none'); } } + +function restartInteractive() { + $('.circle.dynamic').remove(); + bgColourSlider.addClass('d-none'); + $('.noUi-handle').css('background-color', 'red'); + bgColourSlider[0].noUiSlider.set(0); + firstStage = true; + count = 0; + $('#instruction-text').text(START_TEXT); + init(); + $('#circles-area').css('background-color', 'red'); +} diff --git a/csfieldguide/templates/interactives/bias-in-big-data.html b/csfieldguide/templates/interactives/bias-in-big-data.html index 892b4e9f0..ddb965e2a 100644 --- a/csfieldguide/templates/interactives/bias-in-big-data.html +++ b/csfieldguide/templates/interactives/bias-in-big-data.html @@ -14,6 +14,7 @@

    0

    +
    From 26cfd03b9c72795c4e803ded848316c854b1d8cd Mon Sep 17 00:00:00 2001 From: courtneycb Date: Mon, 4 Nov 2019 13:09:27 +1300 Subject: [PATCH 14/20] Styling. --- .../interactives/bias-in-big-data/css/bias-in-big-data.scss | 2 +- csfieldguide/templates/interactives/bias-in-big-data.html | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss b/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss index d94a76a25..8d69570ec 100644 --- a/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss +++ b/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss @@ -43,7 +43,7 @@ height: 1.75rem !important; width: 1.75rem !important; border-radius: 50%; - top: -6px !important; + top: -0.375rem !important; } .noUi-handle:before, diff --git a/csfieldguide/templates/interactives/bias-in-big-data.html b/csfieldguide/templates/interactives/bias-in-big-data.html index ddb965e2a..8ce4db010 100644 --- a/csfieldguide/templates/interactives/bias-in-big-data.html +++ b/csfieldguide/templates/interactives/bias-in-big-data.html @@ -5,7 +5,7 @@ {% block html %}
    -
    +

    {% trans "Click each dot that you see on the screen, then click 'Next stage' to reveal the answer!" %}

    0

    @@ -16,7 +16,7 @@

    0

    -
    +
    From 636ef286d82fb767f67f8c089f051496638f8c81 Mon Sep 17 00:00:00 2001 From: courtneycb Date: Mon, 4 Nov 2019 16:23:45 +1300 Subject: [PATCH 15/20] Make it pretty on smaller devices. --- .../css/bias-in-big-data.scss | 48 ++++++-- .../bias-in-big-data/js/bias-in-big-data.js | 103 +++++++++++------- .../interactives/bias-in-big-data.html | 15 +-- 3 files changed, 108 insertions(+), 58 deletions(-) diff --git a/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss b/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss index 8d69570ec..3d98e409f 100644 --- a/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss +++ b/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss @@ -1,4 +1,7 @@ @import "node_modules/nouislider/distribute/nouislider"; +@import "node_modules/bootstrap/scss/functions"; +@import "node_modules/bootstrap/scss/variables"; +@import "node_modules/bootstrap/scss/mixins"; .circle { border-radius: 50%; @@ -20,12 +23,8 @@ padding-top: 0.3125rem; } -#background-colour-slider-container { - padding-left: 4rem !important; - padding-right: 4rem !important; -} - .noUi-target { + border: none; background: linear-gradient( to right, hsl(0,100%,50%), @@ -56,7 +55,7 @@ } .glow { - box-shadow: 0 0 1rem 0.5rem aqua; + box-shadow: 0 0 1rem 0.5rem black; } .red { @@ -87,10 +86,37 @@ background: fuchsia; } -.aquamarine { - background: #00ffcc; +.deepskyblue { + background: deepskyblue; +} + +.grey { + background: grey !important; +} + +@include media-breakpoint-down(sm) { + #instruction-area, + #background-colour-slider-container { + padding: 0rem !important; + } + + #bias-in-big-data-container { + padding: 2rem !important; + } + + #instruction-text { + margin: 1rem 0rem; + } + + .circle { + width: 2.5rem !important; + height: 2.5rem !important; + } } -.deeppink { - background: #ff0088; -} \ No newline at end of file +@include media-breakpoint-up(xl) { + #background-colour-slider-container { + padding-left: 2rem !important; + padding-right: 2rem !important; + } +} diff --git a/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js b/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js index 1a7dbe487..ac3f38e8d 100644 --- a/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js +++ b/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js @@ -1,49 +1,69 @@ const noUiSlider = require('nouislider'); const wNumb = require('wnumb'); -const COLOURS = ['red', 'lime', 'blue', 'yellow', 'purple', 'darkorange', 'fuchsia', 'aquamarine', 'deeppink']; +const COLOURS = ['red', 'lime', 'blue', 'yellow', 'purple', 'darkorange', 'fuchsia', 'deepskyblue']; const START_TEXT = gettext("Click each dot that you see on the screen, then click 'Next stage' to reveal the answer!"); -const MISSED_CIRCLES_TEXT = gettext('You seem to have missed some dots! Forced perspective like this can be used in data representation and cause bias in the overall results.'); -const SLIDER_TEXT = gettext('Click and drag the slider to change background colour. What do you notice is happening?') +const MISSED_CIRCLES_TEXT = gettext('You seem to have missed some dots!

    Forced perspective like this can be used in data representation and cause bias in the overall results.'); +const SLIDER_TEXT = gettext('Click and drag the slider to change background colour.

    What do you notice is happening?') const SLIDER_MIN = 0; const SLIDER_MAX = 360; -const PERENTAGE_BOUNDARY_UPPER = 95; // 95% -const PERCENTAGE_ADJUSTMENT = 5; // 5% +const PERENTAGE_BOUNDARY_UPPER = 86; // 86% +const PERCENTAGE_ADJUSTMENT = 15; // 15% const PERENTAGE_BOUNDARY_LOWER = 5; // 5% -var count = 0; +const NUM_CIRCLES_TO_ADD = 8; // in addition to the 3 circles created that are the same colour as the background colour +// below dictionary holds the 'H' value of the HSL colours. +// these numbers correspond to the slider value of that colour, e.g blue is at value 240 on the slider. +const SLIDER_COLOUR_VALUES = { + 'red': 0, + 'lime': 120, + 'blue': 240, + 'yellow': 60, + 'purple': 277, + 'darkorange': 33, + 'fuchsia': 300, + 'deepskyblue': 195 +} var firstStage = true; var bgColourSlider = $('#background-colour-slider'); +var sliderStartPos = 0; +var startColour = 'red'; + $(document).ready(function() { init(); - createSlider(); $('#next-stage').click(loadNextStage); $('#start-again').click(restartInteractive); }); + function init() { - // randomly set position of 3 red circles already created. - $('.circle').each(function() { - $(this).css(getRandomPosition()); - }); - for (i=0; i < 8; i++) { + // get random background colour to start + startColour = getRandomColour(); + sliderStartPos = SLIDER_COLOUR_VALUES[startColour]; + $('#circles-area').addClass(startColour); + // make sure we have at least 3 circles that are the same as the background colour + createCircle(startColour); + createCircle(startColour); + createCircle(startColour); + // generate 8 more randomly coloured circles + for (i=0; i < NUM_CIRCLES_TO_ADD; i++) { createCircle(); } $('.circle').removeClass('d-none'); - $('#count').text(count).removeClass('d-none'); $('.circle').click(function() { - count += 1; - $('#count').text(count); // add glow around clicked circle $(this).addClass('glow'); }); $('#next-stage').removeClass('d-none'); $('#start-again').addClass('d-none'); + createSlider(); + bgColourSlider[0].noUiSlider.on('update', updateSlider); } + function createSlider() { noUiSlider.create(bgColourSlider[0], { - start: 0, + start: sliderStartPos, step: 1, connect: "lower", orientation: "horizontal", @@ -55,14 +75,17 @@ function createSlider() { decimals: 0 }) }); - bgColourSlider[0].noUiSlider.on('update', function() { - var value = bgColourSlider[0].noUiSlider.get(); - hslColour = 'hsl(' + value + ', 100%, 50%)'; - $('#circles-area').css('background-color', hslColour); - $('.noUi-handle').css('background-color', hslColour); - }); } + +function updateSlider() { + var value = bgColourSlider[0].noUiSlider.get(); + hslColour = 'hsl(' + value + ', 100%, 50%)'; + $('#circles-area').css('background', hslColour); + $('.noUi-handle').css('background', hslColour); +} + + function getRandomPosition() { var circlesAreaHeight = $('#circles-area').height(); var circlesAreaWidth = $('#circles-area').width(); @@ -91,40 +114,46 @@ function getRandomPosition() { }; } -function createCircle() { - var colour = COLOURS[Math.floor(Math.random() * COLOURS.length)]; + +function createCircle(colour) { + var colour = colour || getRandomColour(); var $circle = $("
    ").addClass('circle dynamic d-none ' + colour); $circle.css(getRandomPosition()); $('#circles-area').append($circle); } + function loadNextStage() { if (firstStage) { // what happens if they haven't missed any circles? - $('#circles-area').css('background-color', 'grey'); - $('#instruction-text').text(MISSED_CIRCLES_TEXT); + $('#circles-area').removeClass(startColour); + $('#circles-area').addClass('grey'); + $('#instruction-text').html(MISSED_CIRCLES_TEXT); firstStage = false; } else { - $('#instruction-text').text(SLIDER_TEXT); + $('#instruction-text').html(SLIDER_TEXT); $('.circle').removeClass('glow'); - $('#circles-area').css('background-color', 'red'); + $('#circles-area').removeClass('grey'); + $('#circles-area').addClass(startColour); $('#next-stage').addClass('d-none'); $('#start-again').removeClass('d-none'); - bgColourSlider.removeClass('d-none'); + $('#background-colour-slider-container').removeClass('d-none'); // disable click event for circles $('.circle').off('click'); - $('#count').addClass('d-none'); } } + function restartInteractive() { - $('.circle.dynamic').remove(); - bgColourSlider.addClass('d-none'); - $('.noUi-handle').css('background-color', 'red'); - bgColourSlider[0].noUiSlider.set(0); + $('.circle').remove(); + $('#background-colour-slider-container').addClass('d-none'); firstStage = true; - count = 0; - $('#instruction-text').text(START_TEXT); + $('#instruction-text').html(START_TEXT); + bgColourSlider[0].noUiSlider.destroy(); init(); - $('#circles-area').css('background-color', 'red'); +} + + +function getRandomColour() { + return COLOURS[Math.floor(Math.random() * COLOURS.length)]; } diff --git a/csfieldguide/templates/interactives/bias-in-big-data.html b/csfieldguide/templates/interactives/bias-in-big-data.html index 8ce4db010..d4d13efe3 100644 --- a/csfieldguide/templates/interactives/bias-in-big-data.html +++ b/csfieldguide/templates/interactives/bias-in-big-data.html @@ -4,23 +4,18 @@ {% load static %} {% block html %} -
    +
    -

    {% trans "Click each dot that you see on the screen, then click 'Next stage' to reveal the answer!" %}

    -

    0

    -
    +

    {% trans "Click each dot that you see on the screen, then click 'Next stage' to reveal the answer!" %}

    +
    -
    +
    -
    -
    -
    -
    -
    +
    {% endblock html %} From cddd322f556cda5d6cd95d0854cdb2668aa79154 Mon Sep 17 00:00:00 2001 From: courtneycb Date: Tue, 5 Nov 2019 09:55:29 +1300 Subject: [PATCH 16/20] Styling. --- .../bias-in-big-data/css/bias-in-big-data.scss | 10 +++++----- .../bias-in-big-data/js/bias-in-big-data.js | 2 +- .../templates/interactives/bias-in-big-data.html | 10 +++++----- 3 files changed, 11 insertions(+), 11 deletions(-) diff --git a/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss b/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss index 3d98e409f..bf174cd91 100644 --- a/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss +++ b/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss @@ -16,7 +16,7 @@ } #bias-in-big-data-container { - padding: 6rem !important; + padding: 4rem !important; } .noUi-pips { @@ -101,7 +101,7 @@ } #bias-in-big-data-container { - padding: 2rem !important; + padding: 1rem 3rem !important; } #instruction-text { @@ -115,8 +115,8 @@ } @include media-breakpoint-up(xl) { - #background-colour-slider-container { - padding-left: 2rem !important; - padding-right: 2rem !important; + #circles-area { + max-width: 60%; + max-height: 80%; } } diff --git a/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js b/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js index ac3f38e8d..67822c07d 100644 --- a/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js +++ b/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js @@ -7,7 +7,7 @@ const MISSED_CIRCLES_TEXT = gettext('You seem to have missed some dots!

    const SLIDER_TEXT = gettext('Click and drag the slider to change background colour.

    What do you notice is happening?') const SLIDER_MIN = 0; const SLIDER_MAX = 360; -const PERENTAGE_BOUNDARY_UPPER = 86; // 86% +const PERENTAGE_BOUNDARY_UPPER = 85; // 85% const PERCENTAGE_ADJUSTMENT = 15; // 15% const PERENTAGE_BOUNDARY_LOWER = 5; // 5% const NUM_CIRCLES_TO_ADD = 8; // in addition to the 3 circles created that are the same colour as the background colour diff --git a/csfieldguide/templates/interactives/bias-in-big-data.html b/csfieldguide/templates/interactives/bias-in-big-data.html index d4d13efe3..b5fc658bb 100644 --- a/csfieldguide/templates/interactives/bias-in-big-data.html +++ b/csfieldguide/templates/interactives/bias-in-big-data.html @@ -5,17 +5,17 @@ {% block html %}
    -
    -

    {% trans "Click each dot that you see on the screen, then click 'Next stage' to reveal the answer!" %}

    -
    -
    +
    +
    {% trans "Click each dot that you see on the screen, then click 'Next stage' to reveal the answer!" %}
    +
    +
    -
    +
    {% endblock html %} From 99d8f096483c1bd14828b83ac4ced829bc19e8b7 Mon Sep 17 00:00:00 2001 From: courtneycb Date: Tue, 5 Nov 2019 10:15:37 +1300 Subject: [PATCH 17/20] Explain interactive in readme. --- csfieldguide/static/interactives/bias-in-big-data/README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/csfieldguide/static/interactives/bias-in-big-data/README.md b/csfieldguide/static/interactives/bias-in-big-data/README.md index c43efae80..968ae67ba 100644 --- a/csfieldguide/static/interactives/bias-in-big-data/README.md +++ b/csfieldguide/static/interactives/bias-in-big-data/README.md @@ -14,6 +14,12 @@ The original can be found [here](https://github.com/NCC74656/Bias-In-Big-Data-In This interactive demonstrates how small changes in selection and perception can change the result of a study or competition. The user will learn how to better view data by altering their perspective. +## The interactive + +The user is presented with a number of coloured circles placed on a coloured background and is asked to click the visible circles. +Some circles are the same colour as the background and therefore near impossible to find. +The interactive then reveals the hidden circles and allows the user to change the background colour via a slider. + ## Licences The licence of the original interactive can be found in `LICENCE-THIRD-PARTY` with a full copy available in the `third-party-licences` directory. From e0bceefcc71049b81effc70ff097517bdf44b5d4 Mon Sep 17 00:00:00 2001 From: courtneycb Date: Tue, 5 Nov 2019 13:03:23 +1300 Subject: [PATCH 18/20] Review changes. --- LICENCE-THIRD-PARTY | 2 +- .../interactives/content/en/interactives.yaml | 4 +- .../content/structure/interactives.yaml | 8 ++-- csfieldguide/package.json | 2 +- .../{bias-in-big-data => data-bias}/README.md | 8 ++-- .../css/data-bias.scss} | 4 +- .../js/data-bias.js} | 38 +++++++++++++++++-- .../package.json | 2 +- .../{bias-in-big-data.html => data-bias.html} | 7 ++-- 9 files changed, 53 insertions(+), 22 deletions(-) rename csfieldguide/static/interactives/{bias-in-big-data => data-bias}/README.md (82%) rename csfieldguide/static/interactives/{bias-in-big-data/css/bias-in-big-data.scss => data-bias/css/data-bias.scss} (96%) rename csfieldguide/static/interactives/{bias-in-big-data/js/bias-in-big-data.js => data-bias/js/data-bias.js} (81%) rename csfieldguide/static/interactives/{bias-in-big-data => data-bias}/package.json (73%) rename csfieldguide/templates/interactives/{bias-in-big-data.html => data-bias.html} (71%) diff --git a/LICENCE-THIRD-PARTY b/LICENCE-THIRD-PARTY index b0053fce1..300edb7a7 100644 --- a/LICENCE-THIRD-PARTY +++ b/LICENCE-THIRD-PARTY @@ -187,7 +187,7 @@ third-party-licences/cytoscape-no-overlap.txt Bias in Big Data ------------------------------------------------------------------------------ https://github.com/NCC74656/Bias-In-Big-Data-Interactive -Copyright (c) 2019 Mark Henszey Wolgin +Copyright 2019 Mark Henszey Wolgin licensed under MIT licence. third-party-licences/bias-in-big-data.txt ============================================================================== diff --git a/csfieldguide/interactives/content/en/interactives.yaml b/csfieldguide/interactives/content/en/interactives.yaml index c1d7f7676..13bedddc2 100644 --- a/csfieldguide/interactives/content/en/interactives.yaml +++ b/csfieldguide/interactives/content/en/interactives.yaml @@ -12,8 +12,6 @@ awful-calculator: name: Awful Calculator base-calculator: name: Base Calculator -bias-in-big-data: - name: Bias in Big Data big-number-calculator: name: Big Number Calculator bin-packing: @@ -48,6 +46,8 @@ confused-buttons: name: Confused Buttons confusing-error: name: Confusing Error +data-bias: + name: Data Bias date-picker: name: Date Picker deceiver: diff --git a/csfieldguide/interactives/content/structure/interactives.yaml b/csfieldguide/interactives/content/structure/interactives.yaml index 54eb9caa8..4e8805c8a 100644 --- a/csfieldguide/interactives/content/structure/interactives.yaml +++ b/csfieldguide/interactives/content/structure/interactives.yaml @@ -34,10 +34,6 @@ base-calculator: languages: en: interactives/base-calculator.html is_interactive: true -bias-in-big-data: - languages: - en: interactives/bias-in-big-data.html - is_interactive: true big-number-calculator: languages: en: interactives/big-number-calculator.html @@ -115,6 +111,10 @@ confusing-error: de: interactives/confusing-error.html es: interactives/confusing-error.html is_interactive: false +data-bias: + languages: + en: interactives/data-bias.html + is_interactive: true date-picker: languages: en: interactives/date-picker.html diff --git a/csfieldguide/package.json b/csfieldguide/package.json index dea5b66b3..b7b4f4318 100644 --- a/csfieldguide/package.json +++ b/csfieldguide/package.json @@ -15,7 +15,6 @@ "gumshoejs": "5.1.2", "csfg-module-fsa": "file:./static/js/modules/fsa/", "csfg-interactive-algorithm-timer": "file:./static/interactives/algorithm-timer/", - "csfg-interactive-bias-in-big-data": "file:./static/interactives/bias-in-big-data/", "csfg-interactive-big-number-calculator": "file:./static/interactives/big-number-calculator/", "csfg-interactive-bin-packing": "file:./static/interactives/bin-packing/", "csfg-interactive-box-rotation": "file:./static/interactives/box-rotation/", @@ -24,6 +23,7 @@ "csfg-interactive-city-trip": "file:./static/interactives/city-trip/", "csfg-interactive-cmy-mixer": "file:./static/interactives/cmy-mixer/", "csfg-interactive-colour-matcher": "file:./static/interactives/colour-matcher/", + "csfg-interactive-data-bias": "file:./static/interactives/data-bias/", "csfg-interactive-frequency-anaylsis": "file:./static/interactives/frequency-analysis/", "csfg-interactive-jpeg-compression": "file:./static/interactives/jpeg-compression/", "csfg-interactive-matrix-simplifier": "file:./static/interactives/matrix-simplifier/", diff --git a/csfieldguide/static/interactives/bias-in-big-data/README.md b/csfieldguide/static/interactives/data-bias/README.md similarity index 82% rename from csfieldguide/static/interactives/bias-in-big-data/README.md rename to csfieldguide/static/interactives/data-bias/README.md index 968ae67ba..f6844f3aa 100644 --- a/csfieldguide/static/interactives/bias-in-big-data/README.md +++ b/csfieldguide/static/interactives/data-bias/README.md @@ -2,10 +2,10 @@ **Created by:** -- Sofia DiGirolamo - https://github.com/sdigiro -- Minji Kong - https://github.com/mkong001 -- Korey Mitchell - https://github.com/koreymitchell -- Mark Wolgin - https://github.com/NCC74656 +- Sofia DiGirolamo +- Minji Kong +- Korey Mitchell +- Mark Wolgin The original can be found [here](https://github.com/NCC74656/Bias-In-Big-Data-Interactive). diff --git a/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss b/csfieldguide/static/interactives/data-bias/css/data-bias.scss similarity index 96% rename from csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss rename to csfieldguide/static/interactives/data-bias/css/data-bias.scss index bf174cd91..474c9f6a3 100644 --- a/csfieldguide/static/interactives/bias-in-big-data/css/bias-in-big-data.scss +++ b/csfieldguide/static/interactives/data-bias/css/data-bias.scss @@ -15,7 +15,7 @@ border-radius: 1rem; } -#bias-in-big-data-container { +#data-bias-container { padding: 4rem !important; } @@ -100,7 +100,7 @@ padding: 0rem !important; } - #bias-in-big-data-container { + #data-bias-container { padding: 1rem 3rem !important; } diff --git a/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js b/csfieldguide/static/interactives/data-bias/js/data-bias.js similarity index 81% rename from csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js rename to csfieldguide/static/interactives/data-bias/js/data-bias.js index 67822c07d..39aa77737 100644 --- a/csfieldguide/static/interactives/bias-in-big-data/js/bias-in-big-data.js +++ b/csfieldguide/static/interactives/data-bias/js/data-bias.js @@ -4,7 +4,7 @@ const wNumb = require('wnumb'); const COLOURS = ['red', 'lime', 'blue', 'yellow', 'purple', 'darkorange', 'fuchsia', 'deepskyblue']; const START_TEXT = gettext("Click each dot that you see on the screen, then click 'Next stage' to reveal the answer!"); const MISSED_CIRCLES_TEXT = gettext('You seem to have missed some dots!

    Forced perspective like this can be used in data representation and cause bias in the overall results.'); -const SLIDER_TEXT = gettext('Click and drag the slider to change background colour.

    What do you notice is happening?') +const SLIDER_TEXT = gettext('Click and drag the slider to change the background colour.

    What do you notice is happening?') const SLIDER_MIN = 0; const SLIDER_MAX = 360; const PERENTAGE_BOUNDARY_UPPER = 85; // 85% @@ -36,13 +36,16 @@ $(document).ready(function() { }); +/** + * Returns everything to the inital 'page laoded' state. + */ function init() { // get random background colour to start startColour = getRandomColour(); sliderStartPos = SLIDER_COLOUR_VALUES[startColour]; $('#circles-area').addClass(startColour); - // make sure we have at least 3 circles that are the same as the background colour - createCircle(startColour); + // make sure we have at least 2 circles that are the same as the background colour + // a third circle is added later in loadNextStage to make sure the user NEVER finds all of the circles createCircle(startColour); createCircle(startColour); // generate 8 more randomly coloured circles @@ -61,6 +64,9 @@ function init() { } +/** + * Creates slider that controls background colour. + */ function createSlider() { noUiSlider.create(bgColourSlider[0], { start: sliderStartPos, @@ -78,6 +84,9 @@ function createSlider() { } +/** + * Updates background colour when slider is moved. + */ function updateSlider() { var value = bgColourSlider[0].noUiSlider.get(); hslColour = 'hsl(' + value + ', 100%, 50%)'; @@ -86,6 +95,9 @@ function updateSlider() { } +/** + * Returns a random position in the form of {top: ..., left: ...} to randomly place circles. + */ function getRandomPosition() { var circlesAreaHeight = $('#circles-area').height(); var circlesAreaWidth = $('#circles-area').width(); @@ -115,17 +127,29 @@ function getRandomPosition() { } +/** + * Creates a circle div and adds it to the page. + */ function createCircle(colour) { var colour = colour || getRandomColour(); var $circle = $("
    ").addClass('circle dynamic d-none ' + colour); $circle.css(getRandomPosition()); + // so overlapping circles don't give away the hidden circles + // brings non hidden circles up 1 layer + if (colour !== startColour) { + $circle.css('z-index', 1); + } $('#circles-area').append($circle); } +/** + * Loads the next stage which is either revealing the hidden circles or adjusting the background colour with the slider. + */ function loadNextStage() { if (firstStage) { - // what happens if they haven't missed any circles? + // add a sneaky extra circle in the off chance they find all of the hidden circles :P + createCircle(startColour); $('#circles-area').removeClass(startColour); $('#circles-area').addClass('grey'); $('#instruction-text').html(MISSED_CIRCLES_TEXT); @@ -144,6 +168,9 @@ function loadNextStage() { } +/** + * Resets the interactive and calls init() to return page to the 'page loaded' state. + */ function restartInteractive() { $('.circle').remove(); $('#background-colour-slider-container').addClass('d-none'); @@ -154,6 +181,9 @@ function restartInteractive() { } +/** + * Returns a random colour from the COLOURS array. + */ function getRandomColour() { return COLOURS[Math.floor(Math.random() * COLOURS.length)]; } diff --git a/csfieldguide/static/interactives/bias-in-big-data/package.json b/csfieldguide/static/interactives/data-bias/package.json similarity index 73% rename from csfieldguide/static/interactives/bias-in-big-data/package.json rename to csfieldguide/static/interactives/data-bias/package.json index 1238a76fa..0f41688d2 100644 --- a/csfieldguide/static/interactives/bias-in-big-data/package.json +++ b/csfieldguide/static/interactives/data-bias/package.json @@ -1,5 +1,5 @@ { - "name": "csfg-interactive-bias-in-big-data", + "name": "csfg-interactive-data-bias", "version": "1.0.0", "private": true, "dependencies": { diff --git a/csfieldguide/templates/interactives/bias-in-big-data.html b/csfieldguide/templates/interactives/data-bias.html similarity index 71% rename from csfieldguide/templates/interactives/bias-in-big-data.html rename to csfieldguide/templates/interactives/data-bias.html index b5fc658bb..992a015da 100644 --- a/csfieldguide/templates/interactives/bias-in-big-data.html +++ b/csfieldguide/templates/interactives/data-bias.html @@ -4,7 +4,8 @@ {% load static %} {% block html %} -
    +
    +

    {% trans "Data Bias" %}

    {% trans "Click each dot that you see on the screen, then click 'Next stage' to reveal the answer!" %}
    @@ -20,9 +21,9 @@
    {% trans "Click each dot that you see on the screen, t {% endblock html %} {% block css %} - + {% endblock css %} {% block js %} - + {% endblock js %} From 1839e8140847b5eb71239f8da005238f91c4edaa Mon Sep 17 00:00:00 2001 From: courtneycb Date: Tue, 5 Nov 2019 14:47:42 +1300 Subject: [PATCH 19/20] Review changes. --- .../static/interactives/data-bias/js/data-bias.js | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/csfieldguide/static/interactives/data-bias/js/data-bias.js b/csfieldguide/static/interactives/data-bias/js/data-bias.js index 39aa77737..08a86cb51 100644 --- a/csfieldguide/static/interactives/data-bias/js/data-bias.js +++ b/csfieldguide/static/interactives/data-bias/js/data-bias.js @@ -37,7 +37,7 @@ $(document).ready(function() { /** - * Returns everything to the inital 'page laoded' state. + * Returns everything to the inital 'page loaded' state. */ function init() { // get random background colour to start @@ -52,11 +52,6 @@ function init() { for (i=0; i < NUM_CIRCLES_TO_ADD; i++) { createCircle(); } - $('.circle').removeClass('d-none'); - $('.circle').click(function() { - // add glow around clicked circle - $(this).addClass('glow'); - }); $('#next-stage').removeClass('d-none'); $('#start-again').addClass('d-none'); createSlider(); @@ -132,7 +127,7 @@ function getRandomPosition() { */ function createCircle(colour) { var colour = colour || getRandomColour(); - var $circle = $("
    ").addClass('circle dynamic d-none ' + colour); + var $circle = $("
    ").addClass('circle ' + colour); $circle.css(getRandomPosition()); // so overlapping circles don't give away the hidden circles // brings non hidden circles up 1 layer @@ -140,6 +135,10 @@ function createCircle(colour) { $circle.css('z-index', 1); } $('#circles-area').append($circle); + $('.circle').click(function() { + // add glow around clicked circle + $(this).toggleClass('glow'); + }); } @@ -162,8 +161,6 @@ function loadNextStage() { $('#next-stage').addClass('d-none'); $('#start-again').removeClass('d-none'); $('#background-colour-slider-container').removeClass('d-none'); - // disable click event for circles - $('.circle').off('click'); } } From 51975ee0639dabf57d989615c240ae501ec33652 Mon Sep 17 00:00:00 2001 From: courtneycb Date: Tue, 5 Nov 2019 14:58:42 +1300 Subject: [PATCH 20/20] Review changes. --- csfieldguide/static/interactives/data-bias/js/data-bias.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/csfieldguide/static/interactives/data-bias/js/data-bias.js b/csfieldguide/static/interactives/data-bias/js/data-bias.js index 08a86cb51..843bb5932 100644 --- a/csfieldguide/static/interactives/data-bias/js/data-bias.js +++ b/csfieldguide/static/interactives/data-bias/js/data-bias.js @@ -135,9 +135,9 @@ function createCircle(colour) { $circle.css('z-index', 1); } $('#circles-area').append($circle); - $('.circle').click(function() { - // add glow around clicked circle - $(this).toggleClass('glow'); + $circle.click(function() { + // toggle glow around clicked circle + $circle.toggleClass('glow'); }); }