WIP: Data size interactive

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:

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

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/",

csfieldguide/static/interactives/data-size/README.md

@@ -0,0 +1,7 @@
+# Data Size interactive
+
+## TODO
+
+- this interactive
+- this README
+- add original authors to commcontribs

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('<span class="txt-red">' + TXT_INCORRECT_ORDER + '</span>');
+ } else {
+ $('#status-text').html('<span class="txt-grn">' + TXT_CORRECT_ORDER + '</span>');
+ $('#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;
+}

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"
+ }
+}

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%;
+ }
+}