Merge branch 'master' into enhancement-967

README.md

@@ -55,12 +55,16 @@ guide the learner’s interaction with the component.
 
 **_questionWeight** (number): A number which reflects the significance of the question in relation to the other questions in the course. This number is used in calculations of the final score reported to the LMS.
 
-**_selectable** (number): Defines the number of **_items**, or answers, that can be selected. If the value of **_selectable** is `1`, **_items** will be presented with HTML radio buttons. If the value is greater than `1`, they will be presented with HTML checkboxes. This number must match the number of **_items** whose **_shouldBeSelected** is set to `true`. The default is `1`.
+**_selectable** (number): Defines the number of **_items**, or answers, that can be selected. If the value of **_selectable** is `1`, **_items** will be presented with HTML radio buttons. If the value is greater than `1`, they will be presented with HTML checkboxes. This number must match or exceed the number of **_items** whose **_shouldBeSelected** is set to `true`. The default is `1`.
 
 **_canShowModelAnswer** (boolean): Setting this to `false` prevents the [**_showCorrectAnswer** button](https://github.com/adaptlearning/adapt_framework/wiki/Core-Buttons) from being displayed. The default is `true`.
 
+**_canShowMarking** (boolean): Setting this to `false` prevents ticks and crosses being displayed on question completion. The default is `true`.
+
 **_recordInteraction** (boolean) Determines whether or not the learner's answers will be recorded to the LMS via cmi.interactions. Default is `true`. For further information, see the entry for `_shouldRecordInteractions` in the README for [adapt-contrib-spoor](https://github.com/adaptlearning/adapt-contrib-spoor).
 
+**_columns** (number): Defines the number of columns wide the **_items** are displayed in. If the value of **_numberOfColumns** is `2`, each **_items** will be 50% wide. Similarly, if the value of **_numberOfColumns** is `3`, each **_items** will be 33.3% wide. In mobile view, the width of each **_items** is 100%.
+
 **_items** (array): Each *item* represents one choice for the multiple choice question and contains values for **_graphic**, **text**, and **_shouldBeSelected**.  
 
 >**text** (string): Optional text that is displayed as part of the multiple choice option.  
@@ -104,9 +108,9 @@ label is not a visible element. It is utilized by assistive technology such as s
 No known limitations.   
 
 ----------------------------
-**Version number:**  2.0.2   <a href="https://community.adaptlearning.org/" target="_blank"><img src="https://github.com/adaptlearning/documentation/blob/master/04_wiki_assets/plug-ins/images/adapt-logo-mrgn-lft.jpg" alt="adapt learning logo" align="right"></a> 
+**Version number:**  2.0.5   <a href="https://community.adaptlearning.org/" target="_blank"><img src="https://github.com/adaptlearning/documentation/blob/master/04_wiki_assets/plug-ins/images/adapt-logo-mrgn-lft.jpg" alt="adapt learning logo" align="right"></a> 
 **Framework versions:** 2.0  
 **Author / maintainer:** Adapt Core Team with [contributors](https://github.com/adaptlearning/adapt-contrib-gmcq/graphs/contributors)  
 **Accessibility support:** WAI AA   
 **RTL support:** yes  
-**Cross-platform coverage:** Chrome, Chrome for Android, Firefox (ESR + latest version), Edge 12, IE 11, IE10, IE9, IE8, IE Mobile 11, Safari for iPhone (iOS 8+9), Safari for iPad (iOS 8+9), Safari 8, Opera    
+**Cross-platform coverage:** Chrome, Chrome for Android, Firefox (ESR + latest version), Edge 12, IE 11, IE10, IE9, IE8, IE Mobile 11, Safari iOS 9+10, Safari OS X 9+10, Opera    

bower.json

@@ -1,9 +1,9 @@
 {
   "name": "adapt-contrib-gmcq",
-  "version": "2.0.2",
-  "framework": "^2.0.0",
+  "version": "2.0.5",
+  "framework": "^2.0.11",
   "homepage": "https://github.com/adaptlearning/adapt-contrib-gmcq",
-  "issues": "https://adaptlearning.atlassian.net/secure/CreateIssueDetails!init.jspa?pid=10100&issuetype=1&priority=6&components=10508",
+  "issues": "https://github.com/adaptlearning/adapt_framework/issues/new?title=contrib-gmcq%3A%20please%20enter%20a%20brief%20summary%20of%20the%20issue%20here&body=please%20provide%20a%20full%20description%20of%20the%20problem,%20including%20steps%20on%20how%20to%20replicate,%20what%20browser(s)/device(s)%20the%20problem%20occurs%20on%20and,%20where%20helpful,%20screenshots.",
   "displayName" : "Graphical Multiple Choice Question",
   "component" : "gmcq",
   "assetFields" : [

example.json

@@ -1,6 +1,6 @@
 {
-    "_id":"c-125",
-    "_parentId":"b-60",
+    "_id":"c-05",
+    "_parentId":"b-05",
     "_type":"component",
     "_component":"gmcq",
     "_classes":"",
@@ -11,7 +11,9 @@
     "_isRandom":false,
     "_selectable":1,
     "_canShowModelAnswer": true,
+    "_canShowMarking": true,
     "_recordInteraction":true,
+    "_columns": 3,
     "title": "GMCQ",
     "displayTitle": "GMCQ",
     "body": "Which of the following options would you consider to be correct?",

js/adapt-contrib-gmcq.js

@@ -40,18 +40,27 @@ define([
         setupQuestion: function() {
             Mcq.view.prototype.setupQuestion.call(this);
 
-            this.listenTo(Adapt, 'device:changed', this.resizeImage);
+            this.listenTo(Adapt, {
+                'device:changed': this.resizeImage,
+                'device:resize': this.onDeviceResize
+            });
+
         },
 
         onQuestionRendered: function() {
 
             this.resizeImage(Adapt.device.screenSize);
+            this.setUpColumns();
 
             this.$('label').imageready(_.bind(function() {
                 this.setReadyStatus();
             }, this));
 
         },
+
+        onDeviceResize: function() {
+            this.setUpColumns();
+        },
 
         resizeImage: function(width) {
 
@@ -64,6 +73,20 @@ define([
 
         },
 
+        setUpColumns: function() {
+            var columns = this.model.get('_columns');
+
+            if (!columns) return;
+
+            if (Adapt.device.screenSize === 'large') {
+                this.$el.addClass('gmcq-column-layout');
+                this.$('.gmcq-item').css('width', (100 / columns) + '%');
+            } else {
+                this.$el.removeClass('gmcq-column-layout');
+                this.$('.gmcq-item').css('width', '');
+            }
+        },
+
         // hack for IE8
         forceChangeEvent: function(event) {
 

less/gmcq.less

@@ -1,5 +1,42 @@
 .gmcq-component {
+    &.gmcq-column-layout {
+        .gmcq-widget {
+            // Font size set to 0 so there's no gap between items
+            font-size: 0;
+            text-align: center;
+        }
+
+        .gmcq-item {
+            display: inline-block;
+            float: none;
+            vertical-align: top;
+
+            .dir-rtl & {
+                float: none;
+            }
 
+            &.even,
+            &.odd {
+                label {
+                    margin: 2.5%;
+
+                    .dir-rtl & {
+                        margin: 2.5%;
+                    }
+                }
+            }
+        }
+
+        .gmcq-item-inner {
+            font-size: @body-text-font-size;
+            text-align: left;
+
+            .dir-rtl & {
+                text-align: right;
+            }
+        }
+    }
+
     .gmcq-item {
         position: relative;
         width: 50%;
@@ -173,7 +210,8 @@
             .gmcq-item-icon {
                 display: none;
             }
-            .selected .gmcq-correct-icon {
+            .incorrect .selected .gmcq-correct-icon,
+            .correct .selected .gmcq-correct-icon {
                 display: block;
             }
         }