Change wording to improve student engagement

Change wording in second step to emphasize choices made by other
students and encourage reflection on initial answer selected.

ubcpi/static/html/ubcpi.html

@@ -17,14 +17,14 @@ <h2 id="pi-question-h" class="question-text">{{display_name}}</h2>
 
             <div class="others-responses" id="others-responses" data-ng-if="rc.status() == rc.ALL_STATUS.ANSWERED" tabindex="-1" role="region" aria-labelledby="others-respoonses-head" auto-focus>
 
-                <h3 id="ubcpi-other-answers-head">Step 2) Read Other Student Answers</h3>
-                <p class="ubcpi-other-answers-instructions">These are samples of other student answers for this question. Read them and then compare with your answer below.</p>
+                <h3 id="ubcpi-other-answers-head">Step 2a) Read Other Student Answers</h3>
+                <p class="ubcpi-other-answers-instructions">These are samples of other student answers picked at random for this question. Read them carefully to compare with your answer below.</p>
 
                 <ul class="ubcpi-other-answers">
                     <li data-ng-repeat="answer in rc.other_answers.answers">
                         <img ng-src="{{options[answer.option].image_url}}" alt="{{options[answer.option].image_alt}}" ng-if="options[answer.option].image_position == 'above' && options[answer.option].image_url" />
 
-                        <h4 class="other-answer" ng-if="options[answer.option].text">Student Answer: {{options[answer.option].text}}</h4>
+                        <h4 class="other-answer" ng-if="options[answer.option].text">"{{options[answer.option].text}}" chosen because:</h4>
 
                         <img ng-src="{{options[answer.option].image_url}}" alt="{{options[answer.option].image_alt}}" ng-if="options[answer.option].image_position == 'below' && options[answer.option].image_url" />
                         <span class="sr">Student Rationale</span><i aria-hidden="true" class="icon fa fa-user"></i>
@@ -55,7 +55,7 @@ <h4 class="other-answer" ng-if="options[answer.option].text">Student Answer: {{o
 
                                 <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>
+                                <span class="chosen-option option-details-text" ng-if="rc.answer_original == $index && rc.status() == rc.ALL_STATUS.ANSWERED">(You chose this in Step 1)</span>
                             </label>
                         </p>
                     </div>