Improve scenario with no correct answer

In studio view, change "No correct answer" to "n/a". Insert red asterisks to indicate required fields and add "optional" for Explanation field on-select of "n/a" for Correct Answer. Make Explanation/rationale field optional if instructor chooses to not specify a correct answer. In student view, add "RATIONALE" heading for final section if no correct answer is specified and a rationale is entered by the instructor. Display "CORRECT ANSWER" if a correct answer is specified. Fix bug where progress bar showing in studio view. Modify tests to accommodate new changes.
ubc · Nov 2, 2016 · 0db389c · 0db389c
1 parent 7eaefea
commit 0db389c
Show file tree

Hide file tree

Showing 11 changed files with 98 additions and 48 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,5 @@
 .idea
+.env
 *.iml
 .classpath
 .project

diff --git a/.travis.yml b/.travis.yml
@@ -16,6 +16,6 @@ after_success:
   - "coveralls-lcov -v -n build/coverage/report-lcov/lcov.info > js-coverage.json"
   - "coveralls --merge=js-coverage.json"
 
-branches:
-    only:
-      - master
+#branches:
+#    only:
+#      - master
diff --git a/requirements/test.txt b/requirements/test.txt
@@ -3,11 +3,11 @@
 
 coverage==3.7.1
 ddt==1.0.0
-django-nose==1.3
+django-nose==1.4.1
 mock==1.3.0
 pep8==1.5.7
 pylint<1.0
 
 git+https://github.com/pmitros/django-pyfs.git@d175715e0fe3367ec0f1ee429c242d603f6e8b10#egg=djpyfs
 git+https://github.com/edx/i18n-tools.git@56f048af9b6868613c14aeae760548834c495011#egg=i18n_tools
-git+https://github.com/edx/xblock-sdk.git@e12e35159ed7733543778f1ddc26ca227d36632b#egg=xblock-sdk
+git+https://github.com/edx/xblock-sdk.git@e12e35159ed7733543778f1ddc26ca227d36632b#egg=xblock-sdk
diff --git a/ubcpi/answer_pool.py b/ubcpi/answer_pool.py
@@ -119,7 +119,7 @@ def validate_seeded_answers_simple(answers, options, algo):
     index = 1
     for option in options:
         key = option.get('text') + option.get('image_url') if option.get('image_url') else option.get('text')
-        if option.get('text') != 'No correct answer':
+        if option.get('text') != 'n/a':
             if seen_options.get(key, 0) == 0:
                 missing_options.append('Option ' + str(index))
             index += 1

diff --git a/ubcpi/static/html/ubcpi.html b/ubcpi/static/html/ubcpi.html
@@ -15,9 +15,19 @@ <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" />
 
+            <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>
+                </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>
 
-                <h3 id="ubcpi-other-answers-head">Step 2) Read Other Student Answers</h3>
+                <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>
 
                 <ul class="ubcpi-other-answers">
@@ -34,14 +44,22 @@ <h4 class="other-answer" ng-if="options[answer.option].text">Student Answer: {{o
                 </ul>
 
             </div><!-- .others-responses -->
-
+            <span id="answer" ng-if="rc.status() == rc.ALL_STATUS.NEW && user_role == 'student'">
+                <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>
+                </ul>
+            </span>
             <form name="answerForm" class="choicegroup your-answer-and-rationale">
 
                 <fieldset>
 
                     <legend>
-                        <span class="ubcpi-legend-instruction" ng-if="rc.status() == rc.ALL_STATUS.NEW">Step 1) Your Initial Answer <span class="inline-hint">You can change this answer later, if you change your mind.</span></span>
-                        <span class="ubcpi-legend-instruction" ng-if="rc.status() == rc.ALL_STATUS.ANSWERED">Step 3) Your Final Answer <span class="inline-hint">You now have the option to change your initial selection and explanation, if you wish.</span></span>
+                        <span class="ubcpi-legend-instruction" ng-if="rc.status() == rc.ALL_STATUS.NEW">Step 1) YOUR INITIAL ANSWER <span class="inline-hint">You can change this answer later, if you change your mind.</span></span>
+                        <span class="ubcpi-legend-instruction" ng-if="rc.status() == rc.ALL_STATUS.ANSWERED">Step 3) YOUR FINAL ANSWER <span class="inline-hint">You now have the option to change your initial selection and explanation, if you wish.</span></span>
                     </legend>
 
                     <div class="ubcpi-possible-options">
@@ -78,7 +96,7 @@ <h4 class="other-answer" ng-if="options[answer.option].text">Student Answer: {{o
                     <div class="message has-warnings warning-notice option-details-text" data-ng-if="answerForm.$invalid">
                         <p role="alert" class="warning" id="button-disabled-reason">
                             <span class="sr">Warning</span>
-                            <i aria-hidden="true" class="icon fa fa-warning"></i>&nbsp;Note: 
+                            <i aria-hidden="true" class="icon fa fa-warning"></i>&nbsp;Note:
                             <span ng-if="answerForm.rationale.$error.minlength">Your rationale must be a minimum of {{rationale_size.min}} characters.</span>
                             <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>
@@ -125,16 +143,30 @@ <h2 id="pi-question-h" class="question-text">Question</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" />
 
+            <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>
+                </ul>
+            </span>
+
             <section class="solution-span correct-answer-and-rationale" tabindex="-1" aria-labelledby="correct-option-head" role="region" auto-focus>
 
                 <div class="detailed-solution" id="detailed-solution">
-                    <h2 id="correct-option-head">Correct Answer</h2>
+                    <h2 id="correct-option-head" ng-if="options.length > rc.correct_answer">Correct Answer</h2>
+                    <h2 id="correct-option-head" ng-if="!rc.correct_rationale.text"></h2>
+                    <h2 id="correct-option-head" ng-if="options.length == rc.correct_answer && rc.correct_rationale.text">Rationale</h2>
 
-                    <img ng-src="{{options[rc.correct_answer].image_url}}" alt="{{options[rc.correct_answer].image_alt}}" ng-if="options[rc.correct_answer].image_position == 'above' && options[rc.correct_answer].image_url" />
+                    <div id="correct-answer-choice" ng-if="options.length > rc.correct_answer">
+                        <img ng-src="{{options[rc.correct_answer].image_url}}" alt="{{options[rc.correct_answer].image_alt}}" ng-if="options[rc.correct_answer].image_position == 'above' && options[rc.correct_answer].image_url" />
 
-                    <p class="ubcpi-correct-answer-option ubcpi-show-correct" ng-if="options[rc.correct_answer].text">{{options[rc.correct_answer].text}}</p>
+                        <p class="ubcpi-correct-answer-option ubcpi-show-correct" ng-if="options[rc.correct_answer].text">{{options[rc.correct_answer].text}}</p>
 
-                    <img ng-src="{{options[rc.correct_answer].image_url}}" alt="{{options[rc.correct_answer].image_alt}}" ng-if="options[rc.correct_answer].image_position == 'below' && options[rc.correct_answer].image_url" />
+                        <img ng-src="{{options[rc.correct_answer].image_url}}" alt="{{options[rc.correct_answer].image_alt}}" ng-if="options[rc.correct_answer].image_position == 'below' && options[rc.correct_answer].image_url" />
+                    </div>
 
                     <span class="ubcpi-correct-answer-rationale">{{rc.correct_rationale.text}}</span>
 
@@ -152,13 +184,14 @@ <h2 id="correct-option-head">Correct Answer</h2>
                                 <p class="ubcpi-solution-your-final-answer">
                                     Your final answer:
                                     <span ng-if="rc.correct_answer === rc.answer_revised" class="ubcpi-initial-option-text ubcpi-correct-final-answer ubcpi-show-correct">{{options[rc.answer_revised].text}} </span>
-                                    <span ng-if="rc.correct_answer === rc.options.length" class="ubcpi-initial-option-text ubcpi-correct-final-answer ubcpi-show-correct">{{options[rc.answer_revised].text}} </span>
+                                    <span ng-if="rc.correct_answer === rc.options.length" class="ubcpi-initial-option-text ubcpi-correct-final-answer">{{options[rc.answer_revised].text}} </span>
                                     <span ng-if="rc.correct_answer !== rc.answer_revised && rc.correct_answer != rc.options.length" class="ubcpi-initial-option-text ubcpi-incorrect-final-answer ubcpi-show-incorrect">{{options[rc.answer_revised].text}} </span>
                                     <span class="ubcpi-initial-option-num">(Option {{rc.answer_revised + 1}})</span>
                                 </p>
                                 <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 -->
@@ -167,17 +200,16 @@ <h2 id="correct-option-head">Correct Answer</h2>
 
             <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>
 
@@ -187,12 +219,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>