Finish addressing changes based on edX a11y review

Add accessible percentage selected information to graphs options/legend.
ubc · Jan 4, 2017 · 826e4f2 · 826e4f2
1 parent 9509279
commit 826e4f2
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 0 deletions.
diff --git a/ubcpi/static/html/ubcpi.html b/ubcpi/static/html/ubcpi.html
@@ -237,14 +237,17 @@ <h6>Answer Options</h6>
 
                         <span class="ubcpi-breakdown-option-num"><i>Option {{$index + 1}}</i></span>&nbsp;<span class="ubcpi-breakdown-correct-option" ng-if="rc.correct_answer === $index" style="font-style:italic">(correct)</span>
                         <span ng-if="rc.correct_answer === $index" class="ubcpi-breakdown-answer-text ubcpi-show-correct">{{option.text}}</span>
+                        <span ng-if="rc.correct_answer === $index" class="sr">{{rc.calc($index)}}</span>
                         <span ng-if="rc.correct_answer !== $index" class="ubcpi-breakdown-answer-text">{{option.text}}</span>
+                        <span ng-if="rc.correct_answer !== $index" class="sr">{{rc.calc($index)}}</span>
 
                         <img ng-src="{{option.image_url}}" id="original-option-image-{{ $index }}" alt="{{option.image_alt}}" ng-if="option.image_position == 'below' && option.image_url" />
 
                         <span class="chosen-option option-details-text" ng-if="rc.answer_original == $index && rc.status() == rc.ALL_STATUS.ANSWERED">(You chose this option)</span>
                     </p>
 
                 </div>
+
                 <h6>Initial Answer Selection</h6>
                 <div class="original-answers results-container choicegroup">
 

diff --git a/ubcpi/static/js/src/ubcpi.js b/ubcpi/static/js/src/ubcpi.js
@@ -176,6 +176,34 @@ angular.module('UBCPI', ['ngSanitize', 'ngCookies'])
                 });
             };
 
+            self.calc = function(s) {
+                var originalPercentage = " Initial Answer Selection: ";
+                var revisedPercentage = " Final Answer Selection: ";
+                if (typeof self.stats.original[s] !== 'undefined') {
+                    var totalCounts = 0;
+                    for (var i = 0; i < data.options.length; i++) {
+                        if (typeof self.stats.original[i] !== 'undefined')
+                            totalCounts += self.stats.original[i];
+                    }
+                    originalPercentage += self.stats.original[s] / totalCounts * 100 + "%";
+                }
+                else
+                    originalPercentage += "0%";
+
+                if (typeof self.stats.revised[s] !== 'undefined') {
+                    var totalCounts = 0;
+                    for (var i = 0; i < data.options.length; i++) {
+                        if (typeof self.stats.revised[i] !== 'undefined')
+                            totalCounts += self.stats.revised[i];
+                    }
+                    revisedPercentage += self.stats.revised[s] / totalCounts * 100 + "%";
+                }
+                else
+                    revisedPercentage += "0%";
+
+                return originalPercentage + " " + revisedPercentage;
+            };
+
             function get_data() {
                 return backendService.get_data().then(function(data) {
                     return data;