Update to new JSON format and remove button styles

danielghost · Apr 23, 2014 · 4d0e6dc · 4d0e6dc
1 parent 923f7fc
commit 4d0e6dc
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 88 deletions.
diff --git a/example.json b/example.json
@@ -11,26 +11,26 @@
 	"_selectable":1,
 	"title": "MCQ",
 	"body": "Which of the following options would you consider to be correct?",
-	"items": [
+	"_items": [
 		{
 			"text": "This is option 1.",
-			"shouldBeSelected":true
+			"_shouldBeSelected":true
 		},
 		{
 			"text": "This is option 2.",
-			"shouldBeSelected":false
+			"_shouldBeSelected":false
 		},
 		{
 			"text": "This is option 3.",
-			"shouldBeSelected":false
+			"_shouldBeSelected":false
 		}
 	],
-	"feedback":{
+	"_feedback":{
 		"correct":"Congratulations, this is the correct feedback.",
 		"partly":"This is the partly correct feedback.",
 		"incorrect":"Unfortunately this is the incorrect feedback."
 	},
-	"buttons":{
+	"_buttons":{
 		"submit":"Submit",
 		"reset":"Reset",
 		"showCorrectAnswer":"Model Answer",

diff --git a/js/adapt-contrib-mcq.js b/js/adapt-contrib-mcq.js
@@ -24,7 +24,7 @@ define(function(require) {
             QuestionView.prototype.preRender.apply(this);
 
             if (this.model.get('_isRandom') && this.model.get('_isEnabled')) {
-                this.model.set("items", _.shuffle(this.model.get("items")));
+                this.model.set("_items", _.shuffle(this.model.get("_items")));
             }
         },
 
@@ -38,7 +38,7 @@ define(function(require) {
         resetQuestion: function(properties) {
         	QuestionView.prototype.resetQuestion.apply(this, arguments);
 
-        	_.each(this.model.get('items'), function(item) {
+        	_.each(this.model.get('_items'), function(item) {
                 item.selected = false;
             }, this);
         },
@@ -52,8 +52,8 @@ define(function(require) {
         },
 
         forEachAnswer: function(callback) {
-            _.each(this.model.get('items'), function(item, index) {
-                var correctSelection = item.selected == item.shouldBeSelected;
+            _.each(this.model.get('_items'), function(item, index) {
+                var correctSelection = item.selected == item._shouldBeSelected;
                 if(item.selected && correctSelection) {
                 	this.model.set('_isAtLeastOneCorrectSelection', true);
                 }
@@ -78,21 +78,21 @@ define(function(require) {
         getNumberOfOptionsSelected:function() {
         	var count = 0;
 
-        	_.each(this.model.get('items'), function(item) {
+        	_.each(this.model.get('_items'), function(item) {
         		if (item.selected) count++;
         	}, this);
 
         	return count;
         },
 
         deselectAllItems: function() {
-            _.each(this.model.get('items'), function(item) {
+            _.each(this.model.get('_items'), function(item) {
                 item.selected = false;
             }, this);
         },
 
         setAllItemsEnabled: function(enabled) {
-            _.each(this.model.get('items'), function(item, index){
+            _.each(this.model.get('_items'), function(item, index){
                 var $itemLabel = this.$('label').eq(index);
                 var $itemInput = this.$('input').eq(index);
 
@@ -115,7 +115,7 @@ define(function(require) {
 
         storeUserAnswer:function() {
         	var userAnswer = [];
-        	_.each(this.model.get('items'), function(item, index) {
+        	_.each(this.model.get('_items'), function(item, index) {
         		userAnswer.push(item.selected);
         	}, this);
         	this.model.set('_userAnswer', userAnswer);
@@ -130,7 +130,7 @@ define(function(require) {
         },
 
         onItemSelected: function(event) {
-            var selectedItemObject = this.model.get('items')[$(event.currentTarget).parent('.mcq-item').index()];
+            var selectedItemObject = this.model.get('_items')[$(event.currentTarget).parent('.mcq-item').index()];
 
             if(this.model.get('_isEnabled') && !this.model.get('_isSubmitted')){
                 this.toggleItemSelected(selectedItemObject, event);
@@ -139,7 +139,7 @@ define(function(require) {
 
         toggleItemSelected:function(item, clickEvent) {
             var selectedItems = this.model.get('_selectedItems');
-            var itemIndex = _.indexOf(this.model.get('items'), item),
+            var itemIndex = _.indexOf(this.model.get('_items'), item),
                 $itemLabel = this.$('label').eq(itemIndex),
                 $itemInput = this.$('input').eq(itemIndex),
                 selected = !$itemLabel.hasClass('selected');
@@ -186,13 +186,13 @@ define(function(require) {
         },
 
         onModelAnswerShown: function() {
-        	_.each(this.model.get('items'), function(item, index) {
-        		this.setOptionSelected(index, item.shouldBeSelected);
+        	_.each(this.model.get('_items'), function(item, index) {
+        		this.setOptionSelected(index, item._shouldBeSelected);
         	}, this);
         },
 
         onUserAnswerShown: function(event) {
-        	_.each(this.model.get('items'), function(item, index) {
+        	_.each(this.model.get('_items'), function(item, index) {
         		this.setOptionSelected(index, this.model.get('_userAnswer')[index]);
         	}, this);
         }

diff --git a/less/mcq.less b/less/mcq.less
@@ -67,35 +67,9 @@
         z-index: 0;
     }
 
-    .button {
-        outline: none;
-        text-decoration: none;
-        padding: @button-padding;
-        color: @button-text-color;
-        background-color: @button-color;
-        display: none;
-        margin-top:8px;
-
-        &.submit {
-            display: inline-block;
-        }
-    }
-
     .mcq-widget {
 
-        &.submitted {
-            .button.submit {
-                display: none;
-            }
-            .button.reset {
-                display: inline-block;
-            }
-        }
-
         &.user {
-            .button.model {
-                display: inline-block;
-            }
             .mcq-item-icon {
                 display: none;
             }
@@ -112,9 +86,6 @@
         }
 
         &.model {
-            .button.user {
-                display: inline-block;
-            }
             .mcq-item-icon {
                 display: none;
             }
@@ -124,9 +95,6 @@
         }
 
         &.disabled {
-            .button.reset {
-                display: none;
-            }
             .mcq-item label.selected.disabled {
                 color:@item-text-selected-color;
                 background-color:@item-selected-color;
@@ -146,27 +114,12 @@
                 color:@icon-incorrect-color;
             }
         }
-
-        &.correct {
-            .button {
-                visibility: hidden;
-            }
-        }
     }
 }
 
 .no-touch {
 
     .mcq-component {
-
-        .button.submit:hover,
-        .button.reset:hover,
-        .button.user:hover,
-        .button.model:hover {
-            background-color:@button-hover-color;
-            color:@button-text-hover-color;
-        }
-
         .mcq-widget {
             &:not(.disabled) {
                 .mcq-item label:hover {

diff --git a/templates/mcq.hbs b/templates/mcq.hbs
@@ -1,7 +1,7 @@
 <div class="mcq-inner component-inner">
     {{> component this}}
     <div class="mcq-widget component-widget {{#unless _isEnabled}} disabled {{#if _isComplete}} complete submitted user {{#if _isCorrect}}correct{{/if}} {{/if}} {{/unless}}">
-        {{#each items}}
+        {{#each _items}}
         <div class="mcq-item item {{#unless ../_isEnabled}} {{#if _isCorrect}}correct{{else}}incorrect{{/if}} {{/unless}} item-{{@index}}">
             <label for="{{../_id}}-{{@index}}" class="{{#if selected}}selected{{/if}}">
                 <div class="mcq-item-state">
@@ -16,26 +16,8 @@
             <input type="checkbox" id="{{../_id}}-{{@index}}"/>
         </div>
         {{/each}}
-        <a href="#" class="button submit">
-            <span>  
-                {{{buttons.submit}}} 
-            </span>
-        </a>
-        <a href="#" class="button reset">
-            <span>
-                {{{buttons.reset}}} 
-            </span>
-        </a> 
-        <a href="#" class="button model">
-            <span> 
-                {{{buttons.showCorrectAnswer}}} 
-            </span>
-        </a>
-
-        <a href="#" class="button user">
-            <span>
-                {{{buttons.hideCorrectAnswer}}} 
-            </span>
-        </a>
+        <div class="buttons">
+            {{> buttons this}}
+        </div>
     </div>
 </div>