diff --git a/csfieldguide/interactives/content/en/interactives.yaml b/csfieldguide/interactives/content/en/interactives.yaml index 02040ae625..15d21e6e5a 100644 --- a/csfieldguide/interactives/content/en/interactives.yaml +++ b/csfieldguide/interactives/content/en/interactives.yaml @@ -52,6 +52,8 @@ confusing-error: name: Confusing Error data-bias: name: Data Bias +data-size: + name: Data Size data-visualisation: name: Data Visualisation date-picker: diff --git a/csfieldguide/interactives/content/structure/interactives.yaml b/csfieldguide/interactives/content/structure/interactives.yaml index 5d0759718b..fde71a1945 100644 --- a/csfieldguide/interactives/content/structure/interactives.yaml +++ b/csfieldguide/interactives/content/structure/interactives.yaml @@ -126,6 +126,10 @@ data-bias: languages: en: interactives/data-bias.html is_interactive: true +data-size: + languages: + en: interactives/data-size.html + is_interactive: true data-visualisation: languages: en: interactives/data-visualisation.html diff --git a/csfieldguide/package.json b/csfieldguide/package.json index 5425b13d36..1540716b0a 100644 --- a/csfieldguide/package.json +++ b/csfieldguide/package.json @@ -51,6 +51,7 @@ "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-data-size": "file:./static/interactives/data-size/", "csfg-interactive-data-visualisation": "file:./static/interactives/data-visualisation/", "csfg-interactive-frequency-anaylsis": "file:./static/interactives/frequency-analysis/", "csfg-interactive-jpeg-compression": "file:./static/interactives/jpeg-compression/", diff --git a/csfieldguide/static/interactives/data-size/README.md b/csfieldguide/static/interactives/data-size/README.md new file mode 100644 index 0000000000..940853f677 --- /dev/null +++ b/csfieldguide/static/interactives/data-size/README.md @@ -0,0 +1,7 @@ +# Data Size interactive + +## TODO + +- this interactive +- this README +- add original authors to commcontribs diff --git a/csfieldguide/static/interactives/data-size/js/data-size.js b/csfieldguide/static/interactives/data-size/js/data-size.js new file mode 100644 index 0000000000..85e09a2124 --- /dev/null +++ b/csfieldguide/static/interactives/data-size/js/data-size.js @@ -0,0 +1,103 @@ +const DRAGULA = require('dragula'); +const HTML_BOXES = [ + 'Bit', + 'Byte', + 'Kilobyte', + 'Megabyte', + 'Gigabyte', + 'Terabyte', + 'Petabyte', + 'Exabyte', +]; + +const TXT_CORRECT_ORDER = gettext("The boxes are in order!"); +const TXT_INCORRECT_ORDER = gettext("The boxes are not in order! Try again"); +const TXT_EXAMPLE_SORT = gettext("Try to match the examples below with their relative size."); + +$(document).ready(function() { + //shuffleBoxes(); + + var containerList = $('.dashed-box').toArray(); + var drakeSorting = DRAGULA(containerList); + drakeSorting.on('drop', (div, target, source) => { + // When an image is dropped on top of another image + if (target.children.length == 2) { + source.appendChild(target.children[0]); + } + }); + + var exampleList = $('.example-container').toArray(); + var drakeExamples = DRAGULA(exampleList); + + $('#submit-button').on('click', submit); + $('#continue-button').on('click', nextPhase); +}); + +/** + * Checks if each box is where it should be if they were in order. Highlights accordingly + */ +function submit() { + $('#status-text').html(''); + $('.dashed-box').each(function() { + var box = $(this); + var child = box.children().eq(0); + if (box.attr('data-size') == child.attr('id')) { + box.removeClass('bg-danger'); + } else { + box.addClass('bg-danger'); + } + }); + if ($('.bg-danger').length > 0) { + $('#status-text').html('' + TXT_INCORRECT_ORDER + ''); + } else { + $('#status-text').html('' + TXT_CORRECT_ORDER + ''); + $('#submit-button').addClass('d-none'); + $('#continue-button').removeClass('d-none'); + } +} + +/** + * TODO More functionality to be added + */ +function nextPhase() { + $('#example-boxes').addClass('d-flex').removeClass('d-none'); + $('#example-items').addClass('d-flex').removeClass('d-none'); + $('#continue-button').addClass('d-none'); + $('#submit-button').removeClass('d-none'); + $('#status-text').html(''); +} + +/** + * Shuffles the order of the size boxes + */ +function shuffleBoxes() { + var newOrder = shuffle(HTML_BOXES); + var boxes = $('.dashed-box'); + for (var i=0; i < newOrder.length; i++) { + $('#' + newOrder[i]).appendTo(boxes.eq(i)); + } +} + +/** + * Returns a shuffled copy of the given array. + * + * Shuffle function adapted from https://bost.ocks.org/mike/shuffle + */ +function shuffle(array) { + var clone = array.slice(0); + var elementIndex = clone.length; + var randomIndex; + var currentElement; + + while (elementIndex) { + // Pick a remaining element + randomIndex = Math.floor(Math.random() * elementIndex--); + + // And swap it with the current element + currentElement = clone[elementIndex]; + clone[elementIndex] = clone[randomIndex]; + clone[randomIndex ] = currentElement; + } + + return clone; +} diff --git a/csfieldguide/static/interactives/data-size/package.json b/csfieldguide/static/interactives/data-size/package.json new file mode 100644 index 0000000000..8686fa456f --- /dev/null +++ b/csfieldguide/static/interactives/data-size/package.json @@ -0,0 +1,8 @@ +{ + "name": "csfg-interactive-data-size", + "version": "1.0.0", + "private": true, + "dependencies": { + "dragula": "3.7.2" + } +} diff --git a/csfieldguide/static/interactives/data-size/scss/data-size.scss b/csfieldguide/static/interactives/data-size/scss/data-size.scss new file mode 100644 index 0000000000..2100fd1eba --- /dev/null +++ b/csfieldguide/static/interactives/data-size/scss/data-size.scss @@ -0,0 +1,119 @@ +@import "node_modules/dragula/dist/dragula"; +@import "node_modules/bootstrap/scss/functions"; +@import "node_modules/bootstrap/scss/variables"; +@import "node_modules/bootstrap/scss/mixins"; + +.dashed-box { + background-color: #ffffff; + border: 2px dashed #777777; +} + +.square { + margin: 0.2em; + $box-size: 30px; + width: $box-size; + height: $box-size; + max-width: $box-size; + @each $size, $width in $container-max-widths { + @include media-breakpoint-only($size) { + $box-size: $width / 10; + width: $box-size; + height: $box-size; + max-width: $box-size; + } + @include media-breakpoint-down(xs) { + $box-size: 2rem; + width: $box-size !important; + height: $box-size !important; + max-width: $box-size !important; + } + } +} + +.size-box { + touch-action: none; + height: 100%; + width: 100%; + overflow: hidden; + display: none; + position: relative; + &:last-child { + display: block; + } + cursor: grab; + &.gu-mirror { + cursor: grabbing; + } +} + +.box-image { + height: 100%; + width: 100%; + padding: 2px; + overflow: hidden; + user-select: none; + position: absolute; + z-index: 1; +} + +.box-text { + height: 100%; + width: 100%; + overflow: hidden; + user-select: none; + position: absolute; + z-index: 2; +} + +.unit { + padding: 0px; + font-size: 3rem; + @each $size, $width in $container-max-widths { + @include media-breakpoint-only($size) { + font-size: $width / 20; + } + @include media-breakpoint-down(xs) { + text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; // For clarity + font-size: 1rem !important; + } + } +} + +.name { + position: absolute; + bottom: 4px; + padding: 0px; + @include media-breakpoint-down(md) { + font-size: 0.7rem; + } + @include media-breakpoint-down(sm) { + display: none; + } +} + +.txt-red { + color: red; +} + +.txt-grn { + color: green; +} + +.example-item { + background-color: rgba(0, 0, 0, 0.25); + padding-left: 5px; + padding-right: 5px; + text-align: center; +} + +.example-container { + background-color: rgba(97, 2, 2, 0.25); + &.source { + min-height: 3rem; + + } + &.dest { + min-height: 1.5rem; + min-width: 10%; + } +} diff --git a/csfieldguide/templates/interactives/data-size.html b/csfieldguide/templates/interactives/data-size.html new file mode 100644 index 0000000000..934af82a83 --- /dev/null +++ b/csfieldguide/templates/interactives/data-size.html @@ -0,0 +1,177 @@ +{% extends interactive_mode_template %} + +{% load i18n %} +{% load static %} + +{% block html %} +
+

{% trans "Data Size" %}

+

{% trans "Arrange the units by size, smallest to largest." %}

+
+
+ +
+
+ +
+
+ + b +
+
+ {% trans 'Bit' %} +
+
+
+
+ +
+
+ +
+
+ B +
+
+ {% trans 'Byte' %} +
+
+
+
+ +
+
+ +
+
+ KB +
+
+ {% trans 'Kilobyte' %} +
+
+
+
+ +
+
+ +
+
+ MB +
+
+ {% trans 'Megabyte' %} +
+
+
+
+ +
+
+ +
+
+ GB +
+
+ {% trans 'Gigabyte' %} +
+
+
+
+ +
+
+ +
+
+ TB +
+
+ {% trans 'Terabyte' %} +
+
+
+
+ +
+
+ +
+
+ PB +
+
+ {% trans 'Petabyte' %} +
+
+
+
+ +
+
+ +
+
+ EB +
+
+ {% trans 'Exabyte' %} +
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
+
+ +
+ {% trans 'The CSFG' %} +
+
+
+
+ + +
+
+
+{% endblock html %} + +{% block css %} + +{% endblock css %} + +{% block js %} + +{% endblock js %}