Add second short term memory interactive

csfieldguide/interactives/content/en/interactives.yaml

@@ -100,6 +100,8 @@ no-help:
   name: No Help
 number-generator:
   name: Number Generator
+number-memory:
+  name: Number Memory
 off-by-one:
   name: Off By One
 packet-attack:

csfieldguide/interactives/content/structure/interactives.yaml

@@ -231,6 +231,10 @@ number-generator:
   languages:
     en: interactives/number-generator.html
   is_interactive: true
+number-memory:
+  languages:
+    en: interactives/number-memory.html
+  is_interactive: true
 off-by-one:
   languages:
     en: interactives/off-by-one.html

csfieldguide/static/interactives/number-memory/README.md

@@ -0,0 +1,6 @@
+# Number Memory Interactive
+
+**Author:** Alasdair Smith
+
+This interactive demonstrates the limitations of short term memory by getting the user to remember a number.
+If the user gets it right, they then need to remember a larger number during a period of distractions.

csfieldguide/static/interactives/number-memory/js/number-memory.js

@@ -0,0 +1,202 @@
+const STALL_TEXT = [
+  [1000, gettext("Finding some paper...")],
+  [300, gettext("*BONK*")],
+  [500, gettext("Ow!")],
+  [1000, gettext("Bumped my head.")],
+  [1500, gettext("Got it, now where was that pen?")],
+  [300, gettext("Ah ha!")],
+  [500, gettext("*Tap tap tap*")],
+  [800, gettext("Empty. :(")],
+  [500, gettext("Hmmm")],
+  [2000, gettext("Really need to sort out this room someday...")],
+  [600, gettext("There you are.")],
+  [500, gettext("*scribble scribble*")],
+  [500, gettext("It works!")]
+];
+const MIN = 100000;
+const MAX = 999999;
+const HARD_MIN = 10000000;
+const HARD_MAX = 99999999;
+const TXT_WHAT_WAS = gettext("What was the number?");
+const TXT_REMEMBER = gettext("Remember this number!");
+const TXT_CORRECT = gettext("Correct!");
+const TXT_INCORRECT = gettext("That wasn't the number!");
+var generatedNumber;
+var isHardMode;
+
+$(document).ready(function() {
+  isHardMode = false;
+  showStartScreen();
+  $('#start-button').on('click', function() {
+    start();
+  });
+  $('#submit-button').on('click', function() {
+    submit();
+  });
+  $('#reset-button').on('click', function() {
+    reset(false);
+  });
+  $('#reset-hard-button').on('click', function() {
+    reset(true);
+  });
+
+  $(document).on('keypress', function(key) {
+    if(key.which == 13 && !$('#submit-button').hasClass('d-none')) {
+      // Enter was pressed, act like submit button was clicked
+      submit();
+    }
+  });
+});
+
+/**
+ * Hides the number to remember and starts the game
+ */
+function start() {
+  $('#number-text').html('');
+  showStallScreen();
+  stall();
+}
+
+/**
+ * If the interactive is in Hard Mode, runs a stalling function to distract the user.
+ * Else it skips that and shows the submit screen
+ */
+function stall() {
+  if (!isHardMode) {
+    showSubmitScreen();
+  } else {
+    recursiveStall(0);
+  }
+}
+
+/**
+ * Checks the number entered in the input box against the saved value.
+ * Displays a message and reveals either the reset or reset-hard buttons depending on if the user is correct.
+ */
+function submit() {
+  showEndScreen();
+  if ($('#number-input').val() == generatedNumber) {
+    $('#middle-text').html('<span class="green">' + TXT_CORRECT + '</span>');
+    $('#reset-hard-button').removeClass('d-none');
+  } else {
+    $('#middle-text').html('<span class="red">' + TXT_INCORRECT + '</span><br>' + generatedNumber);
+    $('#reset-button').removeClass('d-none');
+  }
+}
+
+/**
+ * Resets the game to as it was when first loaded. If runHardMode, starts the game in Hard mode.
+ */
+function reset(runHardMode) {
+  isHardMode = runHardMode;
+  showStartScreen();
+}
+
+/**
+ * Recursively displays each string in STALL_TEXT for the amount of time also defined in it (ms)
+ */
+function recursiveStall(x) {
+  if (x >= STALL_TEXT.length) {
+    showSubmitScreen();
+  } else {
+    $('#middle-text').html(STALL_TEXT[x][1]);
+    setTimeout(function() {recursiveStall(x + 1)}, STALL_TEXT[x][0]);
+  }
+}
+
+/**
+ * Hides irrrelevant HTML divs, then reveals relevant ones.
+ * Also resets the number input box and sets the title to the remember text.
+ */
+function showStartScreen() {
+  $('#number-input').val('');
+  $('#number-memory-title').html(TXT_REMEMBER);
+  generateNumber();
+
+  // Hide
+  $('#number-input-form').addClass('d-none');
+  $('#middle-text').addClass('d-none');
+  $('#submit-button').addClass('d-none');
+  $('#reset-button').addClass('d-none');
+  $('#reset-hard-button').addClass('d-none');
+
+  // Show
+  $('#number-memory-title').removeClass('d-none');
+  $('#number-text-container').removeClass('d-none');
+  $('#start-button').removeClass('d-none');
+}
+
+/**
+ * Hides irrrelevant HTML divs, then reveals relevant ones.
+ */
+function showStallScreen() {
+  // Hide
+  $('#number-memory-title').addClass('d-none');
+  $('#number-text-container').addClass('d-none');
+  $('#number-input-form').addClass('d-none');
+  $('#start-button').addClass('d-none');
+  $('#submit-button').addClass('d-none');
+  $('#reset-button').addClass('d-none');
+  $('#reset-hard-button').addClass('d-none');
+
+  // Show
+  $('#middle-text').removeClass('d-none');
+}
+
+/**
+ * Hides irrrelevant HTML divs, then reveals relevant ones.
+ * Also sets the title to the submit text and focuses the input box.
+ */
+function showSubmitScreen() {
+  $('#number-memory-title').html(TXT_WHAT_WAS);
+
+  // Hide
+  $('#number-text-container').addClass('d-none');
+  $('#middle-text').addClass('d-none');
+  $('#start-button').addClass('d-none');
+  $('#reset-button').addClass('d-none');
+  $('#reset-hard-button').addClass('d-none');
+
+  // Show
+  $('#number-memory-title').removeClass('d-none');
+  $('#number-input-form').removeClass('d-none');
+  $('#submit-button').removeClass('d-none');
+
+  // Focus on the input
+  $('#number-input').focus();
+}
+
+/**
+ * Hides irrrelevant HTML divs, then reveals relevant ones.
+ */
+function showEndScreen() {
+  // Hide
+  $('#number-text-container').addClass('d-none');
+  $('#start-button').addClass('d-none');
+  $('#submit-button').addClass('d-none');
+
+  // Show
+  $('#number-memory-title').removeClass('d-none');
+  $('#number-input-form').removeClass('d-none');
+  $('#middle-text').removeClass('d-none');
+}
+
+/**
+ * Generates a random 6-digit number and displays it appropriately
+ */
+function generateNumber() {
+  if (isHardMode) {
+    generatedNumber = getRandomInteger(HARD_MIN, HARD_MAX);
+  } else {
+    generatedNumber = getRandomInteger(MIN, MAX);
+  }
+  $('#number-text').html(generatedNumber);
+}
+
+/**
+ * Returns a random integer between min and max inclusive.
+ * From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
+ */
+function getRandomInteger(min, max) {
+  return Math.floor(Math.random() * (max - min + 1)) + min;
+}

csfieldguide/static/interactives/number-memory/scss/number-memory.scss

@@ -0,0 +1,24 @@
+#number-memory-title {
+  font-size: 24pt;
+}
+
+#number-text {
+  width: 12rem;
+  border-radius: 10px;
+  color: #FFFFFF;
+  background-color: #444444;
+  font-family: monospace;
+  font-size: 20pt;
+}
+
+#middle-text {
+  font-size: 14pt;
+}
+
+.red {
+  color: #dc3545;
+}
+
+.green {
+  color: #28a745;
+}

csfieldguide/templates/interactives/number-memory.html

@@ -0,0 +1,37 @@
+{% extends interactive_mode_template %}
+
+{% load i18n %}
+{% load static %}
+
+{% block html %}
+  <div class="container-fluid text-center my-3">
+    <div id="number-memory-title" class="col-12 number-memory-title"></div>
+    <div id="number-text-container" class="row justify-content-center mb-3">
+      <div id="number-text"></div>
+    </div>
+    <div id="number-input-form" class="row mb-3 justify-content-center d-none">
+      <input id="number-input" type="text" maxlength="10">
+    </div>
+    <div id="middle-text" class="col-12 d-none"></div>
+    <div class="col-12">
+      <button id="start-button" type="button" class="btn btn-success">{% trans 'Start' %}</button>
+    </div>
+    <div class="col-12">
+      <button id="submit-button" type="button" class="btn btn-primary d-none">{% trans 'Submit' %}</button>
+    </div>
+    <div class="col-12">
+      <button id="reset-button" type="button" class="btn btn-danger d-none">{% trans 'Restart' %}</button>
+    </div>
+    <div class="col-12">
+      <button id="reset-hard-button" type="button" class="btn btn-danger d-none">{% trans 'Hard Mode' %}</button>
+    </div>
+  </div>
+{% endblock html %}
+
+{% block css %}
+  <link rel="stylesheet" href="{% static 'interactives/number-memory/css/number-memory.css' %}">
+{% endblock css %}
+
+{% block js %}
+  <script type="text/javascript" src="{% static 'interactives/number-memory/js/number-memory.js' %}"></script>
+{% endblock js %}