Merge pull request #110 from ubc/0.6-fix-107-final-changes-0.6

Make changes in preparation for 0.6 release

README.md

@@ -1,4 +1,4 @@
-## UBC Peer Instruction Tool for EdX
+## UBC Peer Rational Reflection Tool for edX
 
 [![Build Status](https://travis-ci.org/ubc/ubcpi.svg)](https://travis-ci.org/ubc/ubcpi) [![Coverage Status](https://coveralls.io/repos/ubc/ubcpi/badge.svg?branch=master&service=github)](https://coveralls.io/github/ubc/ubcpi?branch=master)
 
@@ -8,7 +8,7 @@ Over the last 20 years, Peer Instruction has become a widely-adopted instruction
 
 The learning and retention benefits of interactive engagement strategies has been convincingly demonstrated in a recent meta-analysis by Freeman et al which examined 225 published studies across various STEM disciplines and course contexts. Relating directly to peer instruction, and specifically the efficacy of peer discussion to improve student performance on concept questions posed in class, a 2009 study by Smith et al (Science 323, 122 (2009)) demonstrates this effect comes from enhanced learning, rather than simply peer influence. The impact peer instruction has had was recognized through the award of the inaugural Minerva prize for enhancement in higher education to Eric Mazur in 2014.
 
-One of the key features in the success of peer instruction in enhancing student learning is to promote higher-order cognitive activities (articulation, evaluation, synthesis etc.) within a learning sequence or activity (for example, within a lecture segment in the face-to-face environment). It is specifically this benefit that we seek to replicate and expose within the online environment through this suggestion to develop online Peer Instruction (oPI) in the functionality within edX.
+One of the key features in the success of peer instruction in enhancing student learning is to promote higher-order cognitive activities (articulation, evaluation, synthesis etc.) within a learning sequence or activity (for example, within a lecture segment in the face-to-face environment). It is specifically this benefit that we seek to replicate and expose within the online environment through this suggestion to develop online Peer Instruction (oPI) in the functionality within edX. To that effect, we have created the Peer Rationale Reflection Tool. In choosing a name, we wanted to emphasize the fact that a student reflects on their initial response using the responses of their peers, as well as highlight the importance of the student-provided rationale for their answer selection.
 
 ## Basic workflow
 
@@ -58,6 +58,19 @@ Single test:
 
 ## Changelog
 
+### [0.6](https://github.com/ubc/ubcpi/issues?q=milestone%3A0.6+is%3Aclosed)
+1. Allowed setup of a question with no correct answer.
+2. Made the instructor-entered rationale optional for case where there is no correct answer.
+3. Changed text in various locations to reflect option of scenario where there is no correct answer.
+4. Inserted red asterisks in Studio view as appropriate to further indicate fields as required.
+5. Fixed display of graphs on mobile.
+6. Introduced a progress bar, with anchoring as appropriate, to better orient students during each stage of a question.
+7. Changed colouring of both initial and final answers at last stage to correspond to correct answer, if specified, as appropriate. Initial and final answers are left black for the scenario where the instructor did not specify a correct answer.
+8. Changed text labels to emphasize answer chosen by student, as appropriate.
+9. Moved graphs headings above graphs for further emphasis.
+10. Styled (italicized, emboldened) various labels for further emphasis.
+3. Changed name of tool from Peer Instruction Tool to Peer Rationale Reflection Tool, and modified text in various locations as appropriate.
+
 ### [0.5.3](https://github.com/ubc/ubcpi/issues?q=milestone%3A0.5.3+is%3Aclosed)
 1. Introduced Esperanto (eo) language dummy translations.
 2. Added character limit warning for rationale.

ubcpi/static/css/ubcpi.css

@@ -96,7 +96,7 @@ fieldset .ubcpi-option:last-of-type .ubcpi-label {
     box-sizing: border-box;
     padding: 0;
     position: relative;
-    top: -3px;
+    top: 2px;
 }
 
 textarea.ubcpi-field {

ubcpi/static/html/ubcpi.html

@@ -17,17 +17,20 @@ <h2 id="pi-question-h" class="question-text">{{display_name}}</h2>
 
             <img ng-src="{{question_text.image_url}}" id="question-image" alt="{{question_text.image_alt}}" ng-if="question_text.image_position == 'below' && question_text.image_url" />
             </div>
+
+            <a name="reflecting"></a>
             <span id="reflect" ng-if="rc.status() == rc.ALL_STATUS.ANSWERED">
+
                 <ul style="background:#f8f8f8;border:2px solid #ddd;margin:1em 0;padding-top:.3em;text-transform:uppercase;">
-                    <li style="display:inline-block;width:30%;text-align:center;color:#aaa;padding-top:.3em"><i class="fa fa-check-circle" style="font-size:1.4em;"></i></span><br>Answer</li>
-                    <i class="fa fa-angle-double-right" style="color:#ddd;vertical-align:15%;font-size:2.2em"></i>
-                    <li style="display:inline-block;width:30%;text-align:center;font-weight:bold;color:#333;padding-top:.3em;text-transform:uppercase;"><i class="fa fa-arrow-circle-down" style="font-size:1.4em;"></i><br>Reflection</li>
-                    <i class="fa fa-angle-double-right" style="color:#ddd;vertical-align:15%;font-size:2.2em"></i>
-                    <li style="display:inline-block;width:30%;text-align:center;color:#aaa"><i class="fa fa-circle-o" style="font-size:1.4em;"></i><br>Results</li>
+                    <li style="display:inline-block;width:30%;text-align:center;color:#aaa;padding-top:.3em"><span class="fa fa-check-circle" style="font-size:1.4em;"></span></span><br>Answer</li>
+                    <span class="fa fa-angle-double-right" style="color:#ddd;vertical-align:15%;font-size:2.2em"></span>
+                    <li style="display:inline-block;width:30%;text-align:center;font-weight:bold;color:#333;padding-top:.3em;text-transform:uppercase;"><span class="fa fa-arrow-circle-down" style="font-size:1.4em;"></span><br>Reflection</li>
+                    <span class="fa fa-angle-double-right" style="color:#ddd;vertical-align:15%;font-size:2.2em"></span>
+                    <li style="display:inline-block;width:30%;text-align:center;color:#aaa"><span class="fa fa-circle-o" style="font-size:1.4em;"></span><br>Results</li>
                 </ul>
             </span>
 
-            <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>
+            <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">
 
                 <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>
@@ -50,11 +53,11 @@ <h4 class="other-answer" ng-if="options[answer.option].text">Student Answer: {{o
             <span id="answer" ng-if="rc.status() == rc.ALL_STATUS.NEW">
 
                 <ul style="background:#f8f8f8;border:2px solid #ddd;margin:1em 0;padding-top:.3em;text-transform:uppercase;">
-                  <li style="display:inline-block;width:30%;text-align:center;font-weight:bold;color:#333;padding-top:.3em"><i class="fa fa-arrow-circle-down" style="font-size:1.4em;"></i></span><br>Answer</li>
-                  <i class="fa fa-angle-double-right" style="color:#ddd;vertical-align:15%;font-size:2.2em"></i>
-                  <li style="display:inline-block;width:30%;text-align:center;color:#aaa;padding-top:.3em;text-transform:uppercase;"><i class="fa fa-circle-o" style="font-size:1.4em;"></i><br>Reflection</li>
-                  <i class="fa fa-angle-double-right" style="color:#ddd;vertical-align:15%;font-size:2.2em"></i>
-                  <li style="display:inline-block;width:30%;text-align:center;color:#aaa"><i class="fa fa-circle-o" style="font-size:1.4em;"></i><br>Results</li>
+                  <li style="display:inline-block;width:30%;text-align:center;font-weight:bold;color:#333;padding-top:.3em"><span class="fa fa-arrow-circle-down" style="font-size:1.4em;"></span></span><br>Answer</li>
+                  <span class="fa fa-angle-double-right" style="color:#ddd;vertical-align:15%;font-size:2.2em"></span>
+                  <li style="display:inline-block;width:30%;text-align:center;color:#aaa;padding-top:.3em;text-transform:uppercase;"><span class="fa fa-circle-o" style="font-size:1.4em;"></span><br>Reflection</li>
+                  <span class="fa fa-angle-double-right" style="color:#ddd;vertical-align:15%;font-size:2.2em"></span>
+                  <li style="display:inline-block;width:30%;text-align:center;color:#aaa"><span class="fa fa-circle-o" style="font-size:1.4em;"></span><br>Results</li>
                 </ul>
             </span>
             <form name="answerForm" class="choicegroup your-answer-and-rationale">
@@ -91,7 +94,7 @@ <h4 class="other-answer" ng-if="options[answer.option].text">Student Answer: {{o
 
                 <p class="ubc-pi-next">
                     <span id="ubcpi-next-inline-hints">
-                        <span class="inline-hint" ng-if="rc.status() == rc.ALL_STATUS.NEW"><span class="sr">Hint</span><i aria-hidden="true" class="icon fa fa-info-circle"></i> In the next step you will be shown a selection of other responses which may help you refine your answer.</span>
+                        <span class="inline-hint" ng-if="rc.status() == rc.ALL_STATUS.NEW"><span class="sr">Hint</span><i aria-hidden="true" class="icon fa fa-info-circle"></i> In the next step, you will be shown a selection of other responses that may help you refine your answer.</span>
                     </span>
                 </p>
 
@@ -104,7 +107,7 @@ <h4 class="other-answer" ng-if="options[answer.option].text">Student Answer: {{o
                             <span ng-if="answerForm.rationale.$error.maxlength">Your rationale must be a maximum of {{rationale_size.max}} characters.</span>
                             <span ng-if="answerForm.rationale.$invalid && answerForm.q.$valid">In order to move to the next step please briefly explain why you chose this answer.</span>
                             <span ng-if="answerForm.rationale.$valid && answerForm.q.$invalid">In order to move to the next step please choose an answer.</span>
-                            <span ng-if="answerForm.q.$invalid && answerForm.rationale.$invalid">In order to move to the next step please choose an answer and briefly explain your decision.</span>
+                            <span ng-if="answerForm.q.$invalid && answerForm.rationale.$invalid">In order to move to the next step, please choose an answer and briefly explain your choice.</span>
                         </p>
                     </div>
                 </div>
@@ -124,7 +127,7 @@ <h4 class="other-answer" ng-if="options[answer.option].text">Student Answer: {{o
                         </div>
                 </div>
 
-                <input data-ng-disabled="answerForm.$invalid" type='button' class='ubcpi_submit' value='Next Step &rarr;' name='ubcpi_next_step' data-ng-click="rc.clickSubmit($event)" aria-describedby="button-disabled-reason ubcpi-next-inline-hints" />
+                <input data-ng-disabled="answerForm.$invalid" type='button' class='ubcpi_submit' value='Next Step &rarr;' name='ubcpi_next_step' data-ng-click="rc.clickSubmit($event); location.href='#reflecting;'" aria-describedby="button-disabled-reason ubcpi-next-inline-hints" onclick="location.href='#reflecting'"/>
 
             </form>
 
@@ -151,15 +154,16 @@ <h2 id="pi-question-h" class="question-text">{{display_name}}</h2>
 
             <span id="test" ng-if="rc.status() == rc.ALL_STATUS.REVISED">
                 <ul style="background:#f8f8f8;border:2px solid #ddd;margin:1em 0;padding-top:.3em;text-transform:uppercase;">
-                    <li style="display:inline-block;width:30%;text-align:center;color:#aaa;padding-top:.3em"><i class="fa fa-check-circle" style="font-size:1.4em;"></i></span><br>Answer</li>
-                    <i class="fa fa-angle-double-right" style="color:#ddd;vertical-align:15%;font-size:2.2em"></i>
-                    <li style="display:inline-block;width:30%;text-align:center;color:#aaa;padding-top:.3em;text-transform:uppercase;"><i class="fa fa-check-circle" style="font-size:1.4em;"></i><br>Reflection</li>
-                    <i class="fa fa-angle-double-right" style="color:#ddd;vertical-align:15%;font-size:2.2em"></i>
-                    <li style="display:inline-block;width:30%;text-align:center;font-weight:bold;color:#333"><i class="fa fa-arrow-circle-down" style="font-size:1.4em;"></i><br>Results</li>
+                    <li style="display:inline-block;width:30%;text-align:center;color:#aaa;padding-top:.3em"><span class="fa fa-check-circle" style="font-size:1.4em;"></span></span><br>Answer</li>
+                    <span class="fa fa-angle-double-right" style="color:#ddd;vertical-align:15%;font-size:2.2em"></span>
+                    <li style="display:inline-block;width:30%;text-align:center;color:#aaa;padding-top:.3em;text-transform:uppercase;"><span class="fa fa-check-circle" style="font-size:1.4em;"></span><br>Reflection</li>
+                    <span class="fa fa-angle-double-right" style="color:#ddd;vertical-align:15%;font-size:2.2em"></span>
+                    <li style="display:inline-block;width:30%;text-align:center;font-weight:bold;color:#333"><span class="fa fa-arrow-circle-down" style="font-size:1.4em;"></span><br>Results</li>
                 </ul>
+
             </span>
 
-            <section class="solution-span correct-answer-and-rationale" tabindex="-1" aria-labelledby="correct-option-head" role="region" auto-focus>
+            <section class="solution-span correct-answer-and-rationale" tabindex="-1" aria-labelledby="correct-option-head" role="region">
 
                 <div class="detailed-solution" id="detailed-solution">
 
@@ -218,7 +222,7 @@ <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"><i>Option {{$index + 1}}</i></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" 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="ubcpi-breakdown-answer-text">{{option.text}}</span>
 

ubcpi/static/html/ubcpi_edit.html

@@ -8,7 +8,7 @@
 
                 <li class="ubcpi-pi-intro">
                     <p><strong>Peer Rationale Reflection</strong></p>
-                    <p>Peer-based reflection problems give learners more interactive engagement while they complete a multiple choice question that may or may not have a correct answer. The tool supports deeper consideration of the learner’s understanding of a concept and the correctness (if applicable) of an initial answer. Learners complete these problems in three steps.</p>
+                    <p>Peer rationale reflection problems give learners more interactive engagement while they complete a multiple choice question that may or may not have a correct answer. The tool supports deeper consideration of the learner’s understanding of a concept and the correctness (if applicable) of an initial answer. Learners complete these problems in three steps.</p>
                     <p>First, the learner answers a multiple choice question and provides an explanation for the answer. Next, the learner sees answers and explanations submitted by other learners. After reflecting on these peer responses, the learner can make revisions and submit a final answer and explanation. Finally, the learner sees the correct answer, if supplied, and any explanation that you provided for it.</p>
                 </li>