Update: Use Adapt logging, JSLint fixes, use color var in less, examp…

…le.json minor update (#97)

example.json

@@ -1,11 +1,11 @@
-// to go in config.json
+// config.json
 "_devtools": {
   "_isEnabled": true,
   "_debugFile": ""
 }
 
 /*
-  optionally, define dev.json in dev folder
+  _debugFile example (e.g. dev.json)
 
   _modelsToRemove - the identifiers of models (and their descendants) to be completely removed from the course
 */

js/adapt-devtools.js

@@ -353,7 +353,7 @@ class DevtoolsView extends Backbone.View {
   }
 
   onPassHalfFailComplete (tutorEnabled) {
-    console.log('onPassHalfFailComplete');
+    logging.debug('onPassHalfFailComplete');
     if (tutorEnabled) Adapt.devtools.set('_feedbackEnabled', true);
     $('.js-loading').hide();
   }

js/auto-answer.js

@@ -1,5 +1,6 @@
 import Adapt from 'core/js/adapt';
 import device from 'core/js/device';
+import logging from 'core/js/logging';
 import Hinting from './hinting';
 import isQuestionSupported from './is-question-supported';
 let ItemsQuestionModel;
@@ -22,7 +23,7 @@ class AutoAnswer extends Backbone.Controller {
   componentRendered (view) {
     if (!isQuestionSupported(view.model)) return;
     if (!view.buttonsView && Adapt.devtools.get('_debug')) {
-      console.warn('adapt-devtools: could not find submit button on ' + view.model.get('_id'));
+      logging.warn('adapt-devtools: could not find submit button on ' + view.model.get('_id'));
       return;
     }
     const handler = this.onQuestionMouseDown.bind(this, view);
@@ -58,7 +59,7 @@ class AutoAnswer extends Backbone.Controller {
   answer (view, incorrectly) {
     if (view.model.get('_isSubmitted')) return;
     if (Adapt.devtools.get('_debug')) {
-      console.log('adapt-devtools: answer ' + view.model.get('_id') + (incorrectly === true ? ' incorrectly' : ''));
+      logging.debug('adapt-devtools: answer ' + view.model.get('_id') + (incorrectly === true ? ' incorrectly' : ''));
     }
     if (incorrectly === true) {
       switch (view.model.get('_component')) {
@@ -130,7 +131,7 @@ class AutoAnswer extends Backbone.Controller {
     // and how many should be correct
     const nCorrect = nIncorrect === 0 ? _.random(1, Math.min(nShould - 1, nSelect)) : _.random(0, Math.min(nShould, nSelect - nIncorrect));
     if (itemCount === 1 || nSelect === 0) {
-      console.warn('adapt-devtools: not possible to answer ' + model.get('_id') + ' incorrectly');
+      logging.warn('adapt-devtools: not possible to answer ' + model.get('_id') + ' incorrectly');
       return;
     }
     for (let j = 0; j < nIncorrect; j++) {
@@ -353,7 +354,7 @@ class AutoAnswer extends Backbone.Controller {
       const pin = view.getNextUnusedPin();
       const x = zone.left + zone.width / 2;
       const y = zone.top + zone.height / 2;
-      console.log('using correct position', x + ',' + y);
+      logging.debug('using correct position', x + ',' + y);
       pin.setPosition(x, y);
       pin.$el.css({
         left: boardw * x / 100 - pin.$el.width() / 2,
@@ -379,7 +380,7 @@ class AutoAnswer extends Backbone.Controller {
     const $pinboard = view.$('.ppq-pinboard');
     const boardw = $pinboard.width();
     const boardh = $pinboard.height();
-    console.log('nIncorrect=', nIncorrect, 'nCorrect=', nCorrect);
+    logging.debug('nIncorrect=', nIncorrect, 'nCorrect=', nCorrect);
     const maxSize = zone => zone.left < 1 && zone.top < 1 && zone.width > 9999 && zone.height > 9999;
     // work with integers for accuracy and simplicity
     items = items.map(item => ({
@@ -389,7 +390,7 @@ class AutoAnswer extends Backbone.Controller {
       height: Math.round(item.height * 100)
     }));
     if (items.some(maxSize) || nSelect === 0) {
-      console.warn('adapt-devtools: not possible to answer ' + model.get('_id') + ' incorrectly');
+      logging.warn('adapt-devtools: not possible to answer ' + model.get('_id') + ' incorrectly');
       return;
     }
     view.resetPins();
@@ -415,7 +416,7 @@ class AutoAnswer extends Backbone.Controller {
       }
       x = x / 100;
       y = y / 100;
-      console.log('using incorrect position', x + ',' + y);
+      logging.debug('using incorrect position', x + ',' + y);
       const pin = view.getNextUnusedPin();
       pin.setPosition(x, y);
       pin.$el.css({
@@ -432,7 +433,7 @@ class AutoAnswer extends Backbone.Controller {
       let y = zone.top + zone.height / 2;
       x = x / 100;
       y = y / 100;
-      console.log('using correct position', x + ',' + y);
+      logging.debug('using correct position', x + ',' + y);
       pin.setPosition(x, y);
       pin.$el.css({
         left: boardw * x / 100 - pin.$el.width() / 2,

js/end-trickle.js

@@ -1,16 +1,17 @@
 import Adapt from 'core/js/adapt';
+import logging from 'core/js/logging';
 
 function onTrickleBegun() {
   if (!Adapt.devtools.get('_trickleEnabled')) {
-    console.log('Trickle started');
+    logging.debug('Trickle started');
     Adapt.devtools.set('_trickleEnabled', true);
     // listen for user request to end trickle
     Adapt.devtools.once('change:_trickleEnabled', onTrickleChange);
   }
 }
 
 function onTrickleEnded() {
-  console.log('Trickle ended');
+  logging.debug('Trickle ended');
   Adapt.devtools.off('change:_trickleEnabled', onTrickleChange);
   Adapt.devtools.set('_trickleEnabled', false);
 }

js/hinting.js

@@ -1,6 +1,7 @@
 import Adapt from 'core/js/adapt';
 import data from 'core/js/data';
 import location from 'core/js/location';
+import logging from 'core/js/logging';
 
 class Hinting extends Backbone.Controller {
 
@@ -142,7 +143,7 @@ class Hinting extends Backbone.Controller {
   }
 
   setPpqHinting ($el, model, hintingEnabled) {
-    console.log('setPpqHinting', hintingEnabled);
+    logging.debug('setPpqHinting', hintingEnabled);
     if (model.get('_developerMode')) return;
     $el.find('.ppq-correct-zone').toggleClass('display-none', !hintingEnabled);
     $el.find('.ppq-pinboard').toggleClass('developer-mode', hintingEnabled);

js/map.js

@@ -2,6 +2,7 @@ import Backbone from 'backbone';
 import Adapt from 'core/js/adapt';
 import data from 'core/js/data';
 import location from 'core/js/location';
+import logging from 'core/js/logging';
 import Router from 'core/js/router';
 
 class MapView extends Backbone.View {
@@ -28,7 +29,7 @@ class MapView extends Backbone.View {
     // var startTime = new Date().getTime();
     const template = Handlebars.templates.devtoolsMap;
     this.$('body').html(template(data));
-    // console.log('adapt-devtools: map rendered in ' + ((new Date().getTime())-startTime) + ' ms');
+    // logging.debug('adapt-devtools: map rendered in ' + ((new Date().getTime())-startTime) + ' ms');
   }
 
   remove () {
@@ -87,8 +88,8 @@ class MapView extends Backbone.View {
     if ((e.ctrlKey || e.altKey) && this.el.defaultView) {
       id = id.replace(/-/g, '');
       this.el.defaultView[id] = model;
-      this.el.defaultView.console.log('devtools: add property window.' + id + ':');
-      this.el.defaultView.console.log(model);
+      this.el.defaultView.logging.debug('devtools: add property window.' + id + ':');
+      this.el.defaultView.logging.debug(model);
     } else if (e.shiftKey) {
       this.navigateAndDisableTrickle(id);
     } else {
@@ -119,7 +120,7 @@ class MapView extends Backbone.View {
       // disable trickle on all preceeding article(s)|block(s)
       for (let i = 0, count = siblings.indexOf(level); i < count; i++) {
         sibling = siblings.at(i);
-        console.log('disabling trickle on ' + sibling.get('_id'));
+        logging.debug('disabling trickle on ' + sibling.get('_id'));
         if (sibling.has('_trickle')) {
           sibling.get('_trickle')._isEnabled = false;
         } else {
@@ -203,7 +204,7 @@ class MapView extends Backbone.View {
       model = model.getParent();
       id = model.get('_id');
     }
-    console.log('adapt-devtools::checkVisibility scrolling to ancestor ' + id);
+    logging.debug('adapt-devtools::checkVisibility scrolling to ancestor ' + id);
     Router.navigateToElement($('.' + id));
   }
 }
@@ -247,7 +248,7 @@ class CourseMap extends Backbone.Controller {
       let t = this.get('displayTitle');
       if (isStringEmpty(t)) t = this.get('title');
       if (isStringEmpty(t)) t = this.get('_id');
-      
+
       // Strip HTML tags
       t = $(`<div>${t}</div>`).text();
 
@@ -291,12 +292,12 @@ class CourseMap extends Backbone.Controller {
   }
 
   onMapClosed () {
-    console.log('onMapClosed');
+    logging.debug('onMapClosed');
     this.mapWindow = null;
   }
 
   onMapLoaded (mapWindow) {
-    console.log('onMapLoaded');
+    logging.debug('onMapLoaded');
     this.mapWindow = mapWindow;
     this.mapWindow.focus();
     $('html', this.mapWindow.document).addClass($('html', window.document).attr('class'));

js/pass-half-fail.js

@@ -2,6 +2,7 @@ import Adapt from 'core/js/adapt';
 import AutoAnswer from './auto-answer';
 import data from 'core/js/data';
 import location from 'core/js/location';
+import logging from 'core/js/logging';
 
 class PassHalfFail extends Backbone.Controller {
 
@@ -137,7 +138,7 @@ class PassHalfFail extends Backbone.Controller {
   }
 
   onPassHalfFailComplete (tutorEnabled) {
-    console.log('onPassHalfFailComplete');
+    logging.debug('onPassHalfFailComplete');
     if (tutorEnabled) Adapt.devtools.set('_feedbackEnabled', true);
   }
 

js/toggle-completion.js

@@ -1,6 +1,7 @@
 import Adapt from 'core/js/adapt';
 import data from 'core/js/data';
 import location from 'core/js/location';
+import logging from 'core/js/logging';
 import Utils from './utils';
 
 let mouseTarget = null;
@@ -28,11 +29,11 @@ function complete(element) {
   }
   const descendantComponents = model.findDescendantModels('components');
   if (!descendantComponents || descendantComponents.length === 0) {
-    console.log('devtools: completing', model.get('_id'));
+    logging.debug('devtools: completing', model.get('_id'));
     doCompletion(model);
     return;
   }
-  console.log('devtools: completing all components in', model.get('_id'));
+  logging.debug('devtools: completing all components in', model.get('_id'));
   descendantComponents.forEach(model => doCompletion(model));
 }
 
@@ -42,11 +43,11 @@ function reset(element) {
 
   const descendantComponents = model.findDescendantModels('components');
   if (!descendantComponents || descendantComponents.length === 0) {
-    console.log('devtools: resetting', model.get('_id'));
+    logging.debug('devtools: resetting', model.get('_id'));
     model.reset(true, true);
     return;
   }
-  console.log('devtools: resetting all components in', model.get('_id'));
+  logging.debug('devtools: resetting all components in', model.get('_id'));
   descendantComponents.forEach(model => {
     model.reset(true, true);
   });

js/toggle-feedback.js

@@ -1,5 +1,6 @@
 import Adapt from 'core/js/adapt';
 import data from 'core/js/data';
+import logging from 'core/js/logging';
 
 function onShowFeedback() {
   // trickle waits for tutor to close so pretend that this happens
@@ -42,7 +43,7 @@ function onFeedbackButtonClicked(e) {
     hushTutor();
     return;
   }
-  console.error('devtools:onFeedbackButtonClicked: malformed component class name');
+  logging.error('devtools:onFeedbackButtonClicked: malformed component class name');
 }
 
 Adapt.once('adapt:initialize devtools:enable', () => {
@@ -53,6 +54,6 @@ Adapt.once('adapt:initialize devtools:enable', () => {
     Adapt.devtools.on('change:_feedbackEnabled', onFeedbackToggled);
     return;
   }
-  console.warn('devtools: no tutor or multiple registrants of questionView:showFeedback so disabling ability to toggle feedback.');
+  logging.warn('devtools: no tutor or multiple registrants of questionView:showFeedback so disabling ability to toggle feedback.');
   Adapt.devtools.set('_toggleFeedbackAvailable', false);
 });

js/toggle-trace-focus.js

@@ -1,4 +1,5 @@
 import Adapt from 'core/js/adapt';
+import logging from 'core/js/logging';
 
 class TraceFocus extends Backbone.Controller {
 
@@ -24,23 +25,23 @@ class TraceFocus extends Backbone.Controller {
   }
 
   onFocusIn (e) {
-    if (!$('html').is('.ie, .Edge')) return console.log('%cfocussed', this.consoleStyle, e.target);
+    if (!$('html').is('.ie, .Edge')) return logging.debug('%cfocussed', this.consoleStyle, e.target);
     const $el = $(e.target);
-    if (!$el[0] || !$el[0].outerHTML) return console.log('focussed: ', e.target);
+    if (!$el[0] || !$el[0].outerHTML) return logging.debug('focussed: ', e.target);
     let openingTag = this.openingTags.exec($el[0].outerHTML)[0];
     if (!openingTag) {
-      console.log('focussed: ' + e.target);
+      logging.debug('focussed: ' + e.target);
       return;
     }
     // add some context if possible
     // strip leading whitespace/nbsp and get first line of text
     const tokens = $el.text().replace(/[\s\xA0]*/, '').split(/\r\n|\r|\n/);
     if (tokens[0]) openingTag = openingTag.slice(0, 20) + '[...]';
     if ($('html').is('.ie8')) {
-      console.log('focussed: ', openingTag, tokens[0]);
+      logging.debug('focussed: ', openingTag, tokens[0]);
       return;
     }
-    console.log('focussed: ', openingTag, tokens[0], $el);
+    logging.debug('focussed: ', openingTag, tokens[0], $el);
   }
 }
 

js/utils.js

@@ -1,8 +1,7 @@
 import Adapt from 'core/js/adapt';
-import AdaptModel from 'core/js/models/adaptModel';
-import QuestionView from 'core/js/views/questionView';
 import data from 'core/js/data';
 import drawer from 'core/js/drawer';
+import logging from 'core/js/logging';
 
 let mouseTarget = null;
 
@@ -22,8 +21,8 @@ function onKeypress(e) {
   if (!model) return;
   const id = model.get('_id').replace(/-/g, '');
   window[id] = model;
-  console.log('devtools: add property window.' + id + ':');
-  console.log(model.attributes);
+  logging.debug('devtools: add property window.' + id + ':');
+  logging.debug(model.attributes);
 }
 
 function onDrawerOpened() {
@@ -49,7 +48,7 @@ const Utils = {
 Adapt.once('adapt:initialize', () => {
   const str = 'Version of Adapt core detected: ' + getAdaptCoreVersion();
   const horz = getHorzLine();
-  console.log(horz + '\nVersion of Adapt core detected: ' + getAdaptCoreVersion() + '\n' + horz);
+  logging.debug('\n' + horz + '\nVersion of Adapt core detected: ' + getAdaptCoreVersion() + '\n' + horz);
   function getHorzLine() {
     let s;
     let i;

less/devtoolsMap.less

@@ -1,7 +1,7 @@
 .devtools-map-hatched {
   background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAEklEQVQYlWNgoBJooFjB0LcCALLcAwF+SpItAAAAAElFTkSuQmCC');
   background-color: unset;
-  color:black;
+  color: @black;
 }
 
 .devtools-map-font() {