Improve graph labels and section headings layout

Italicize graph and legend labels and move graph headings above graphs.
Change test to reflect added space in chart label. Add link in correct
answer area to anchor for graphs, remove "Frequency" label, and add
spacing to x-axis labels.

ubcpi/static/html/ubcpi.html

@@ -161,6 +161,7 @@ <h2 id="correct-option-head" ng-if="options.length > rc.correct_answer">Correct
                                 <span class="sr">Student Rationale</span><i aria-hidden="true" class="icon fa fa-user"></i><span class="ubcpi-solution-your-final-rationale ubcpi-solution-rationales">"{{rc.rationale_revised}}"</span>
                             </li>
                         </ul>
+                        <p>See how your classmates answered <a href="#classbreakdown">below</a></p>
 
                     </div>
                 </div><!-- .detailed-solution -->
@@ -169,17 +170,16 @@ <h2 id="correct-option-head" ng-if="options.length > rc.correct_answer">Correct
 
             <div class="ubcpi-class-breakdown">
 
+                <a name="classbreakdown"></a>
                 <h3 class="ubcpi-class-breakdown-head">Class Breakdown</h3>
                 <p>This is a look at how your classmates answered the question during the initial and final rounds.</p>
-
+                <h4>Answer Options</h4>
                 <div class="ubcpi-breakdown-answer-options">
 
-                    <h4>Answer Options</h4>
-
                     <p class="ubcpi-option" data-ng-repeat="option in options track by $index">
                         <img ng-src="{{option.image_url}}" id="original-option-image-{{ $index }}" alt="{{option.image_alt}}" ng-if="option.image_position == 'above' && option.image_url" />
 
-                        <span class="ubcpi-breakdown-option-num">Option {{$index + 1}}</span>&nbsp;<span class="ubcpi-breakdown-correct-option" ng-if="rc.correct_answer === $index">(Correct answer)</span>
+                        <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">(Correct answer)</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="ubcpi-breakdown-answer-text">{{option.text}}</span>
 
@@ -189,12 +189,14 @@ <h4>Answer Options</h4>
                     </p>
 
                 </div>
-
+                <h4>Initial Answer Selection</h4>
                 <div class="original-answers results-container choicegroup">
+
                     <pi-barchart options="options" stats="rc.stats.original" correct="rc.correct_answer" role="user_role"></pi-barchart>
                     <p class="ubcpi-chart-label">Original Answer</p>
                 </div><!-- .original-answers -->
 
+                <h4>Final Answer Selection</h4>
                 <div class="revised-answers results-container choicegroup">
                     <pi-barchart options="options" stats="rc.stats.revised" correct="rc.correct_answer" role="user_role"></pi-barchart>
                     <p class="ubcpi-chart-label">Revised Answer</p>

ubcpi/static/js/spec/ubcpi-barchar-directive_spec.js

@@ -77,7 +77,7 @@ describe('UBCPI', function () {
 
                 it('should mark the correct answer label', function () {
                     expect(element.find('g.axis').eq(0).find('text').eq(correct).text())
-                        .toBe('Option ' + (correct + 1) + '(correct)');
+                        .toBe('Option ' + (correct + 1) + ' (correct)');
                 });
 
                 it('should calculate percentage correctly', function() {

ubcpi/static/js/src/d3-pibar.js

@@ -72,6 +72,7 @@ d3.custom.barChart = function(scope) {
             svg.append("g")
                 .attr("class", "x axis")
                 .attr("transform", "translate(0," + height + ")")
+                .style("font-style", function(d) { return "italic";})
                 .call(xAxis);
 
             svg.append("g")
@@ -81,8 +82,7 @@ d3.custom.barChart = function(scope) {
                 .attr("transform", "rotate(-90)")
                 .attr("y", 6)
                 .attr("dy", ".71em")
-                .style("text-anchor", "end")
-                .text("Frequency");
+                .style("text-anchor", "end");
 
             var bars = svg.selectAll(".ubcpibar")
                 .data(data)
@@ -120,12 +120,13 @@ d3.custom.barChart = function(scope) {
                     return "1.25em";
 
                 })
-                .attr("dx", (x.rangeBand() / 2) - 15 + "px")
+                .attr("dx", (x.rangeBand() / 2) - 25 + "px")
                 .text(function (d) {
                     var percentage = (d.frequency / totalFreq) * 100;
                     var rounded = Math.round(percentage * 10) / 10;
                     return rounded.toFixed(1) + '%';
-                });
+                })
+                .style("font-weight", function(d) { return "bold";});
         });
 
     }

ubcpi/static/js/src/ubcpi-barchart-directive.js

@@ -22,7 +22,7 @@ angular.module('UBCPI').
                     for (var i = 0; i < scope.options.length; i++) {
                         data.push({
                             frequency: i in stats ? stats[i] : 0,
-                            label: 'Option ' + (i + 1) + (scope.correct == i ? '(correct)' : ''),
+                            label: 'Option ' + (i + 1) + (scope.correct == i ? ' (correct)' : ''),
                             class: 'ubcpibar' +  (scope.correct == i ? ' correct-answer' : '')
                         });
                     }