mumuki-laboratory 7.10.3 → 7.12.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bbad2f51a31216e426cce2ee48a7588c5eeea4df4873030f8c1df14aba21cc1f
-  data.tar.gz: 4be9b7426c73cc44f2993fff346054d0022918b0d49c86456047556b62238f1f
+  metadata.gz: f6139ebdb5d0f4a7148fb6fd64c07a2b7c28ea534fdafe4593cb185ab2b95371
+  data.tar.gz: cea3b7ec16acc73e48a58a9257194a22ad5cf6c46e4dc0530d2b2a92c93dc0cd
 SHA512:
-  metadata.gz: 9c7d92aabcdcfb6c188bc2ac57219ef53beeda954df0dc70b4702ed61feaa13a3c8d3558b7910aa5b602b510db42a10e22803e9f0560b3a1f27284120ad95b99
-  data.tar.gz: 9a3401a323fd4e792d65d6a3c937dd56813bd39db61f48f1fc8f3c7b8813b4346cda3e8977348200de5e525333ad6a0f127219756cfb6c2d20649c889539f98c
+  metadata.gz: 95b409773eb897492565a17980ae66cb30e8fbb341edc2034b83d01f117b1f6d6ac1a47c7367179cbf67c430b3c02208c2bda9e5dbc347cd19e3de91ee4d3543
+  data.tar.gz: d58e05c853128d3d12b188160066231494945cc571704b588899f4bf61a88b69054d7c50ffca51478328a39110cc346f24008dbccdd907c22a197515a60987b9

data/README.md

@@ -1,6 +1,5 @@
-[![Build Status](https://travis-ci.org/mumuki/mumuki-laboratory.svg?branch=master)](https://travis-ci.org/mumuki/mumuki-laboratory)
+[![Build Status](https://travis-ci.com/mumuki/mumuki-laboratory.svg?branch=master)](https://travis-ci.com/mumuki/mumuki-laboratory)
 [![Code Climate](https://codeclimate.com/github/mumuki/mumuki-laboratory/badges/gpa.svg)](https://codeclimate.com/github/mumuki/mumuki-laboratory)
-[![Test Coverage](https://codeclimate.com/github/mumuki/mumuki-laboratory/badges/coverage.svg)](https://codeclimate.com/github/mumuki/mumuki-laboratory)
 [![Issue Count](https://codeclimate.com/github/mumuki/mumuki-laboratory/badges/issue_count.svg)](https://codeclimate.com/github/mumuki/mumuki-laboratory)
 
 <img width="60%" src="https://raw.githubusercontent.com/mumuki/mumuki-laboratory/master/laboratory-screenshot.png"></img>
@@ -132,16 +131,35 @@ rails s
 ## Running tests
 
 ```bash
-bundle exec rspec
+# Run all tests
+bundle exec rake
+
+# Run only web tests (i.e. Capybara and Teaspoon)
+bundle exec rake spec:web
+```
+
+## Running Capybara tests with Selenium
+
+The Capybara config of this project supports running tests on Firefox, Chrome and Safari via Selenium. The [`webdrivers`](https://github.com/titusfortner/webdrivers) gem automatically installs (and updates) all the necessary Selenium webdrivers.
+
+By default, Capybara tests will run with the default dummy-driver (Rack test). If you want to run on a real browser, you should set `MUMUKI_SELENIUM_DRIVER` variable to `firefox`, `chrome` or `safari`. Also, a Rake task to run just the Capybara tests is available.
+
+Some examples:
+
+```bash
+# Run web tests, using Firefox
+MUMUKI_SELENIUM_DRIVER=firefox bundle exec rake spec:web
+
+# Run Capybara tests on Chrome
+MUMUKI_SELENIUM_DRIVER=chrome bundle exec rake spec:web:capybara
 ```
 
 ## Running JS tests
 
-> You need first to download [geckodriver](https://github.com/mozilla/geckodriver/releases/download/v0.27.0/geckodriver-v0.27.0-linux64.tar.gz), uncrompress
-> it and add it to your path
+The [`webdrivers`](https://github.com/titusfortner/webdrivers) gem also works with Teaspoon, no need to install anything manually. By default tests run on Firefox, but this behavior can be changed by setting `MUMUKI_SELENIUM_DRIVER` (see section above).
 
 ```bash
-MOZ_HEADLESS=1 bundle exec rake teaspoon
+bundle exec rake spec:web:teaspoon
 ```
 
 ## Running `eslint`
@@ -278,7 +296,8 @@ which are granted to be safe and stable.
   "status": "passed|passed_with_warnings|failed",
   "guide_finished_by_solution": "boolean",
   "html": "string",
-  "remaining_attempts_html": "string" ,
+  "remaining_attempts_html": "string",
+  "current_exp": "integer",
   "title_html": "string",                         // kids-only
   "button_html": "string",                        // kids-only
   "expectations": [                               // kids-only

data/Rakefile

@@ -25,7 +25,7 @@ require 'rspec/core'
 require 'rspec/core/rake_task'
 
 desc "Run all specs in spec directory (excluding plugin specs)"
-RSpec::Core::RakeTask.new(:spec => 'app:db:test:prepare')
+RSpec::Core::RakeTask.new
 
 desc "Force development environment, required by javascript specs"
 task :development do
@@ -33,8 +33,15 @@ task :development do
   ENV['RAILS_ENV'] = 'development'
 end
 
+RSpec::Core::RakeTask.new('spec:web:capybara') do |t|
+  t.pattern = 'spec/features/*_spec.rb'
+end
+
 desc "Run the javascript specs"
-task teaspoon: [:development, "app:teaspoon"]
+task 'spec:web:teaspoon': [:development, "app:teaspoon"]
+
+desc "Run all the web-related tests"
+task 'spec:web': ['spec:web:capybara', 'spec:web:teaspoon']
 
 task default: :spec
 

data/app/assets/javascripts/mumuki_laboratory/application/bridge.js

@@ -22,11 +22,32 @@
  */
 
 /**
- * @typedef {{
- *  "solution[content]"?:string,
- *  solution?: Solution,
- *  client_result?: SubmissionClientResult
- * }} Submission
+ * Contents of a submission expressed in the form of params
+ * generated and accepted by laboratory HTTP Controllers
+ *
+ * @typedef {{"solution[content]":string}} ClassicContents
+ */
+
+/**
+ * Contents of a submission expressed as an object
+ * that are created programatically
+ *
+ * @typedef {{solution: Solution}} ProgramaticContents
+ */
+
+/**
+ * Contents of a multifile submission expressed as dictionary of keys in the form
+ * `solution[content[the-filename-goes-here]]`
+ *
+ * @typedef {object} MutifileContents
+ */
+
+/**
+ * @typedef {ClassicContents|ProgramaticContents|MutifileContents} Contents
+ */
+
+/**
+ * @typedef {Contents & {client_result?: SubmissionClientResult}} Submission
  */
 
 /**

data/app/assets/javascripts/mumuki_laboratory/application/gamification.js

@@ -0,0 +1,85 @@
+mumuki.gamification = (() => {
+  class Formula {
+    static get QUADRATIC_COEFFICIENT()  { return 25; }
+    static get LINEAR_COEFFICIENT()     { return 100; }
+    static get CONSTANT_TERM()          { return -125; }
+  }
+
+  class LevelProgression {
+    constructor(currentExp) {
+      this.currentExp = currentExp;
+    }
+
+    expToLevelUp() {
+      return this.baseExpNextLevel() - this.currentExp;
+    }
+
+    baseExpNextLevel() {
+      return this.expFor(this.currentLevel() + 1);
+    }
+
+    expFor(level) {
+      const ax2 = Formula.QUADRATIC_COEFFICIENT * Math.pow(level, 2);
+      const bx = Formula.LINEAR_COEFFICIENT * level;
+      const c = Formula.CONSTANT_TERM;
+
+      return ax2 + bx + c;
+    }
+
+    currentLevel() {
+      return this.levelFor(this.currentExp);
+    }
+
+    levelFor(exp) {
+      const a = Formula.QUADRATIC_COEFFICIENT;
+      const b = Formula.LINEAR_COEFFICIENT;
+      const c = Formula.CONSTANT_TERM;
+
+      return Math.floor((-b + Math.sqrt(Math.pow(b, 2) - 4 * a * (c - exp))) / (2 * a));
+    }
+
+    triggersLevelChange(exp) {
+      return this.levelFor(exp) !== this.currentLevel();
+    }
+
+    currentLevelProgress() {
+      return (this.currentExp - this.baseExpCurrentLevel()) / (this.baseExpNextLevel() - this.baseExpCurrentLevel());
+    }
+
+    baseExpCurrentLevel() {
+      return this.expFor(this.currentLevel());
+    }
+
+    setExpMessage(exp) {
+      let expGained = exp - this.currentExp;
+
+      if (expGained > 0) {
+        this.currentExp = exp;
+        $('#mu-exp-points').html(expGained);
+        $('#mu-level-number').html(this.currentLevel());
+      }
+    }
+  }
+
+  function _setUpCurrentLevelProgression() {
+    mumuki.gamification._currentLevelProgression = new LevelProgression(currentExp());
+  }
+
+  function currentExp() {
+    return $('#mu-current-exp').val();
+  }
+
+  return {
+    Formula,
+    LevelProgression,
+
+    _setUpCurrentLevelProgression,
+
+    /** @type {LevelProgression} */
+    _currentLevelProgression: null
+  };
+})();
+
+mumuki.load(() => {
+  mumuki.gamification._setUpCurrentLevelProgression();
+});

data/app/assets/javascripts/mumuki_laboratory/application/kindergarten.js

@@ -0,0 +1,145 @@
+mumuki.load(() => {
+  mumuki.kindergarten = {
+    initialize() {
+      this.speech.verifyBrowserSupport();
+      this.hint.showOrHideExpandHintButton();
+      this.context.showNextOrCloseButton();
+      this.result.configureCallbacks();
+    },
+    speech: {
+      _isPlaying: false,
+      click(selector, locale) {
+        if (this._isPlaying) {
+          this.stop();
+        } else {
+          this.play(selector, locale);
+        }
+      },
+      play(selector, locale) {
+        const msg = new SpeechSynthesisUtterance();
+        msg.text = $(selector).text();
+        msg.lang = locale.split('_')[0];
+        msg.pitch = 0;
+        msg.onend = () => this.stop();
+        this._action('play', 'stop', true, (speech) => speech.speak(msg))
+      },
+      stop() {
+        this._action('stop', 'play', false, (speech) => speech.cancel())
+      },
+      _action(add, remove, isPlaying, callback = () => {}) {
+        callback(window.speechSynthesis);
+        const $button = $('.mu-kindergarten-play-description')
+        $button.find(`.mu-kindergarten-${add}`).addClass('hidden');
+        $button.find(`.mu-kindergarten-${remove}`).removeClass('hidden');
+        this._isPlaying = isPlaying;
+      },
+      verifyBrowserSupport() {
+        if (!window.speechSynthesis) {
+          const $button = $('.mu-kindergarten-play-description')
+          $button.prop('disabled', true);
+          $button.css('cursor', 'not-allowed');
+          this._action('play', 'stop', false)
+        }
+      }
+    },
+    hint: {
+      toggle() {
+        $('.mu-kindergarten-light-speech-bubble').toggleClass('open');
+      },
+      toggleMedia() {
+        const $hintMedia = $('.mu-kindergarten-hint-media');
+        const $i = $('.expand-or-collapse-hint-media').children('i');
+        $i.toggleClass('fa-caret-up').toggleClass('fa-caret-down');
+        $hintMedia.toggleClass('closed');
+      },
+      showOrHideExpandHintButton() {
+        const $button = $('.expand-or-collapse-hint-media');
+        const $hintMedia = $('.mu-kindergarten-hint-media');
+        if (!$hintMedia.get(0)) $button.addClass('hidden');
+      },
+    },
+    context: {
+      showContext() {
+        mumuki.kids.showContext();
+        this._showFirstSlideImage();
+      },
+      nextSlide() {
+        this._clickButton('next');
+      },
+      prevSlide() {
+        this._clickButton('prev');
+      },
+      _imageSlides() {
+        return $('.mu-kindergarten-context-image-slides');
+      },
+      _activeSlideImage() {
+        return this._imageSlides().find('.active');
+      },
+      _clickButton(prevOrNext) {
+        this._activeSlideImage().removeClass('active')[prevOrNext]().addClass('active');
+        this.showNextOrCloseButton();
+        this._hidePreviousButtonIfFirstImage();
+      },
+      showNextOrCloseButton() {
+        const $next = $('.mu-kindergarten-modal-button.mu-next');
+        const $close = $('.mu-kindergarten-modal-button.mu-close');
+        const isLastChild = this._activeSlideImage().is(':last-child');
+        this._addClassIf($next, 'hidden', () => isLastChild);
+        this._addClassIf($close, 'hidden', () => !isLastChild);
+      },
+      _hidePreviousButtonIfFirstImage() {
+        const $prev = $('.mu-kindergarten-modal-button.mu-previous');
+        this._addClassIf($prev, 'hidden', () => this._activeSlideImage().is(':first-child'))
+      },
+      _showFirstSlideImage() {
+        this._imageSlides().find('img').each((i, el) => this._addClassIf($(el), 'active', () => i === 0))
+        this.showNextOrCloseButton();
+        this._hidePreviousButtonIfFirstImage();
+      },
+      _addClassIf(element, clazz, criteria) {
+        if (criteria()) {
+          element.addClass(clazz)
+        } else {
+          element.removeClass(clazz);
+        }
+      }
+    },
+    result: {
+      configureCallbacks() {
+        mumuki.kids.resultAction.passed = this._showOnSuccessPopup;
+        mumuki.kids.resultAction.passed_with_warnings = this._showOnSuccessPopup;
+
+        mumuki.kids.resultAction.failed = this._showOnFailurePopup;
+        mumuki.kids.resultAction.errored = this._showOnFailurePopup;
+        mumuki.kids.resultAction.pending = this._showOnFailurePopup;
+      },
+      _showOnSuccessPopup(data) {
+        $('.submission-results').html(data.title_html);
+        mumuki.kids._showOnSuccessPopup(data);
+        $('#kids-results .modal-content').addClass(data.status);
+      },
+      _showOnFailurePopup(data) {
+        mumuki.kids._getResultsAbortedModal().modal();
+        $('#kids-results-aborted .modal-header').html(data.title_html);
+        $('#kids-results-aborted .modal-content').addClass(data.status);
+        mumuki.presenterCharacter.playAnimation('failure', mumuki.kids._getCharacterImage());
+      }
+    }
+  };
+
+  $(document).ready(() => {
+
+    if ($('.mu-kindergarten').get(0)) {
+
+      mumuki.resize(() => {
+        mumuki.kids.scaleState($('.mu-kids-states'), 100);
+        mumuki.kids.scaleBlocksArea($('.mu-kids-blocks'));
+      })
+
+      mumuki.kindergarten.initialize()
+
+    }
+
+  })
+
+});

data/app/assets/javascripts/mumuki_laboratory/application/profile.js

@@ -1,12 +1,13 @@
 mumuki.load(function() {
   let $userForm = $("#mu-user-form");
   let $userAvatar = $('#mu-user-avatar');
-  let $editButton = $('#mu-edit-profile-btn');
+  let $editButton = $('.mu-edit-profile-btn');
   let $avatarPicker = $('#mu-avatar-picker');
-  let $avatarItem = $('.mu-avatar-item');
+  let $avatarItem = $('.mu-avatar-item:not(.mu-locked)');
 
   let userImage = "";
   let avatarId = "";
+  let avatarType = "";
 
   let originalData = $userForm.serialize();
   let originalProfilePicture = $userAvatar.attr('src');
@@ -15,14 +16,18 @@ mumuki.load(function() {
     toggleEditButtonIfThereAreChanges();
   });
 
-  $avatarItem.on('click', function() {
-    $userAvatar.attr('src', $(this).attr('src'));
-    $avatarPicker.modal('hide');
+  $avatarItem.on('keypress click', function(e) {
+    onClickOrSpacebarOrEnter($(this), e, function() {
+      $userAvatar.attr('src', $(this).attr('src'));
+      $avatarPicker.modal('hide');
 
-    const clickedAvatarId = $(this).attr('mu-avatar-id');
-    avatarId = clickedAvatarId || "";
+      const clickedAvatarId = $(this).attr('mu-avatar-id');
+      const clickedAvatarType = $(this).attr('type');
+      avatarId = clickedAvatarId || "";
+      avatarType = clickedAvatarType || "";
 
-    toggleEditButtonIfThereAreChanges();
+      toggleEditButtonIfThereAreChanges();
+    });
   });
 
   function toggleEditButtonIfThereAreChanges() {
@@ -41,18 +46,20 @@ mumuki.load(function() {
 
   const avatarChanged = () => $userAvatar.attr('src') !== originalProfilePicture;
 
-  $('#mu-user-image').on('click', function(){
-    userImage = $userAvatar.attr('src');
+  $('#mu-user-image').on('keypress click', function(e){
+    onClickOrSpacebarOrEnter($(this), e, function() {
+      userImage = $userAvatar.attr('src');
+    });
   });
 
   $userForm.on('submit', function(){
     if (userImage) {
       setImageUrl($(this), userImage);
-      setAvatarId($(this), "");
+      setAvatarIdAndType($(this), "", "");
     }
 
     if (avatarId) {
-      setAvatarId($(this), avatarId);
+      setAvatarIdAndType($(this), avatarId, avatarType);
     }
   });
 
@@ -60,12 +67,20 @@ mumuki.load(function() {
     form.append(`<input type="hidden" name="user[image_url]" value="${url}"/>`);
   }
 
-  function setAvatarId(form, id) {
-    form.append(`<input type="hidden" name="user[avatar_id]" value=${id}/>`);
+  function setAvatarIdAndType(form, id, type) {
+    form.append(`<input type="hidden" name="user[avatar_id]" value="${id}"/>`);
+    form.append(`<input type="hidden" name="user[avatar_type]" value="${type}"/>`);
   }
 
-  $("#mu-edit-avatar-icon").on('click', function(){
-    $avatarPicker.modal();
+  $("#mu-edit-avatar-icon").on('keypress click', function(e) {
+    onClickOrSpacebarOrEnter($(this), e, function() {
+      $avatarPicker.modal();
+    });
   });
 
+  function onClickOrSpacebarOrEnter(element, e, func) {
+    if (e.which === 13 || e.which === 32 || e.type === 'click') {
+      func.apply(element);
+    }
+  }
 });