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. Modify tests to accommodate new changes.
ubc · Nov 2, 2016 · 616399d · 616399d
1 parent 7eaefea
commit 616399d
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 33 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
@@ -78,7 +78,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>
@@ -128,13 +128,17 @@ <h2 id="pi-question-h" class="question-text">Question</h2>
             <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,7 +156,7 @@ <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>

diff --git a/ubcpi/static/html/ubcpi_edit.html b/ubcpi/static/html/ubcpi_edit.html
@@ -15,7 +15,7 @@
                 <li class="field comp-setting-entry is-set">
                     <div class="wrapper-comp-setting pi-wrapper-comp-setting">
                         <div class="pi-label-and-hint">
-                            <label class="label setting-label pi-setting-label" for="pi-display-name" aria-describedby="pi-display-name-tip">Display Name</label>
+                            <label class="label setting-label pi-setting-label" for="pi-display-name" aria-describedby="pi-display-name-tip">Display Name <font color="red">*</font></label>
                             <span class="tip setting-help" id="pi-display-name-tip">This name appears in the horizontal navigation at the top of the page.</span>
                         </div>
                         <input class="input setting-input" name="display_name" id="pi-display-name" ng-model="esc.data.display_name" ng-model-options="{ debounce: 500 }" type="text" required />
@@ -25,15 +25,15 @@
 
                 <li class="field comp-setting-entry is-set ubcpi-weight">
                     <div class="wrapper-comp-setting">
-                        <label class="label setting-label pi-setting-label" for="pi-display-name">Problem Weight<br /><span class="tip setting-help">Defines the number of points each problem is worth. If the value is not set, the problem is worth the sum of the option point values.</span></label>
+                        <label class="label setting-label pi-setting-label" for="pi-display-name">Problem Weight <font color="red">*</font><br /><span class="tip setting-help">Defines the number of points each problem is worth. If the value is not set, the problem is worth the sum of the option point values.</span></label>
                         <input class="input setting-input" name="weight" id="pi-weight" ng-model="esc.data.weight" ng-model-options="{ debounce: 500 }" type="text" required />
                     </div>
                 </li>
 
                 <li class="field comp-setting-entry is-set">
                     <div class="wrapper-comp-setting pi-wrapper-comp-setting">
                         <div class="pi-label-and-hint">
-                            <label class="label setting-label pi-setting-label" for="pi-question-text" aria-describedby="pi-question-text-tip">Question Text</label>
+                            <label class="label setting-label pi-setting-label" for="pi-question-text" aria-describedby="pi-question-text-tip">Question Text <font color="red">*</font></label>
                             <span class="tip setting-help" id="pi-question-text-tip">The question appears above the possible answers that you set below. You can use text, an image, or a combination of both. If you wish to add an image to your question, press the "Add Image To Question" button.</span> <input type="button" class="button action-primary add-image-button" value="{{esc.data.question_text.image_show_fields ? 'Remove Image' : 'Add Image To Question'}}" ng-click="esc.image_show_fields(false)" name="add-image-button" />
                         </div>
                         <textarea class="input setting-input" name="question_text" id="pi-question-text" ng-model="esc.data.question_text.text" ng-model-options="{ debounce: 500 }"></textarea>
@@ -53,14 +53,14 @@
                 <li class="field comp-setting-entry is-set">
                     <div class="wrapper-comp-setting pi-wrapper-comp-setting">
                         <div class="pi-label-and-hint">
-                            <label class="label setting-label pi-setting-label" for="pi-rationale-min" aria-describedby="pi-rationale-min-tip">Minimum Characters</label>
+                            <label class="label setting-label pi-setting-label" for="pi-rationale-min" aria-describedby="pi-rationale-min-tip">Minimum Characters <font color="red">*</font></label>
                             <span id="pi-rationale-min-tip" class="tip setting-help">This is the minimum number of characters the student explanations must contain.</span>
                         </div>
                         <input class="input setting-input" name="pi-rationale-min" id="pi-rationale-min" ng-model="esc.data.rationale_size.min" ng-model-options="{ debounce: 500 }" type="text" required />
                     </div>
                     <div class="wrapper-comp-setting pi-wrapper-comp-setting">
                         <div class="pi-label-and-hint">
-                            <label class="label setting-label pi-setting-label" for="pi_rationale_max" aria-describedby="pi-rationale-max-tip">Maximum Characters</label>
+                            <label class="label setting-label pi-setting-label" for="pi_rationale_max" aria-describedby="pi-rationale-max-tip">Maximum Characters <font color="red">*</font></label>
                             <span id="pi-rationale-max-tip" class="tip setting-help">This is the maximum number of characters the student explanations may contain.</span>
                         </div>
                         <input class="input setting-input" name="pi-rationale-max" id="pi_rationale_max" ng-model="esc.data.rationale_size.max" ng-model-options="{ debounce: 500 }" type="text" required />
@@ -71,7 +71,7 @@
 
                     <div class="wrapper-comp-setting pi-wrapper-comp-setting">
                         <div class="pi-label-and-hint">
-                            <label class="label setting-label pi-setting-label" for="pi-option-0" aria-describedby="pi-option-tip">Possible Answers</label>
+                            <label class="label setting-label pi-setting-label" for="pi-option-0" aria-describedby="pi-option-tip">Possible Answers <font color="red">*</font></label>
                             <span id="pi-option-tip" class="tip setting-help">The answers appear as choices underneath the question, with a maximum of 10 allowed per question. Each answer may contain text, an image, or a combination of both. <br /><br />To add another answer press the "Add New Answer" button. To remove an answer press the blue "x" next to the blue option you want to remove.</span>
                         </div>
                         <div class="ubcpi-options-list-container">
@@ -105,32 +105,33 @@
                 <li class="field comp-setting-entry is-set">
                     <div class="wrapper-comp-setting pi-wrapper-comp-setting">
                         <div class="pi-label-and-hint">
-                            <label class="label setting-label pi-setting-label" for="pi-option-correct" aria-describedby="pi-option-correct-tip">Correct Answer</label>
+                            <label class="label setting-label pi-setting-label" for="pi-option-correct" aria-describedby="pi-option-correct-tip">Correct Answer <font color="red">*</font></label>
                             <span id="pi-option-correct-tip" class="tip setting-help">Choose the answer you consider correct.</span>
                         </div>
                         <select name="pi-option-correct" id="pi-option-correct" ng-model="esc.data.correct_answer" ng-model-options="{ debounce: 500 }" ng-options="esc.makeOptions().indexOf(opt) as opt for opt in esc.makeOptions()" required></select>
                     </div>
                     <div class="wrapper-comp-setting pi-wrapper-comp-setting">
                         <div class="pi-label-and-hint">
-                            <label class="label setting-label pi-setting-label" for="pi-correct-rationale" aria-describedby="pi-correct-rationale-tip">Explanation</label>
-                            <span id="pi-correct-rationale-tip" class="tip setting-help">Explain to students why this is the correct answer. Students see the correct answer and explanation after submitting their final answer.</span>
+                            <label class="label setting-label pi-setting-label" for="pi-correct-rationale" aria-describedby="pi-correct-rationale-tip" ng-if="esc.data.correct_answer!==esc.data.options.length">Explanation <font color="red">*</font></label>
+                            <label class="label setting-label pi-setting-label" for="pi-correct-rationale" aria-describedby="pi-correct-rationale-tip" ng-if="esc.data.correct_answer===esc.data.options.length">Explanation (optional)</label>
+                            <span id="pi-correct-rationale-tip" class="tip setting-help">Students see the explanation after seeing the final answer.</span>
                         </div>
-                        <textarea name="pi-correct-rationale" id="pi-correct-rationale" ng-model="esc.data.correct_rationale.text" ng-model-options="{ debounce: 500 }" required></textarea>
+                        <textarea name="pi-correct-rationale" id="pi-correct-rationale" ng-model="esc.data.correct_rationale.text" ng-model-options="{ debounce: 500 }" ng-required="esc.noCorrect()"></textarea>
                     </div>
                 </li>
 
                 <li class="field comp-setting-entry is-set">
                     <div class="wrapper-comp-setting pi-wrapper-comp-setting">
                         <div class="pi-label-and-hint">
-                            <label class="label setting-label pi-setting-label" for="pi-algo" aria-describedby="pi-algo-tip">Answers Students See - Selection Logic</label>
+                            <label class="label setting-label pi-setting-label" for="pi-algo" aria-describedby="pi-algo-tip">Answers Students See - Selection Logic <font color="red">*</font></label>
                             <span id="pi-algo-tip" class="tip setting-help">"Simple" means examples for different answer possibilities are intentionally selected when students are viewing peer answers.<br />"Random" means examples are selected at random and may not include different answer possibilities.</span>
                         </div>
                         <select name="pi-algo" id="pi-algo" ng-model="esc.data.algo.name" ng-options="algo as algo for (algo, desc) in esc.algos" required></select>
                     </div>
                     <span class="tip setting-help">{{ esc.algos[esc.data.algo] }}</span>
                     <div class="wrapper-comp-setting pi-wrapper-comp-setting">
                         <div class="pi-label-and-hint">
-                            <label class="label setting-label pi-setting-label" for="pi-algo-num-responses" aria-describedby="pi-num-responses-tip">Answers Students See - Number Selected</label>
+                            <label class="label setting-label pi-setting-label" for="pi-algo-num-responses" aria-describedby="pi-num-responses-tip">Answers Students See - Number Selected <font color="red">*</font></label>
                             <span id="pi-num-responses-tip" class="tip setting-help">This is the number of examples shown to the students after they answer. Enter the # symbol to use the same number as the answer possibilities you've set.</span>
                         </div>
                         <input class="input setting-input pi-options" name="pi-algo-num-responses" id="pi-algo-num-responses" ng-model="esc.data.algo.num_responses" ng-model-options="{ debounce: 500 }" type="text" required />
@@ -140,7 +141,7 @@
                 <li class="field comp-setting-entry is-set">
 
                     <div class="pi-label-and-hint">
-                        <label class="label setting-label" for="pi-option-seeded-0" aria-describedby="pi-option-seeded-tip">Example Answers</label>
+                        <label class="label setting-label" for="pi-option-seeded-0" aria-describedby="pi-option-seeded-tip">Example Answers <font color="red">*</font></label>
                         <span id="pi-option-seeded-tip" class="tip setting-help">Add example answers to the answer pool for this question. Students most likely to see these answers are those completing the assignment first, when the answer pool is small.</span>
                     </div>
 

diff --git a/ubcpi/static/js/spec/ubcpi_edit_spec.js b/ubcpi/static/js/spec/ubcpi_edit_spec.js
@@ -264,10 +264,14 @@ describe('UBCPI_Edit module', function () {
             );
         });
 
-        it('should add "No correct answer" option to a return options array when makeOptions is called', function() {
+        it('should add "n/a" option to a return options array when makeOptions is called', function() {
             var options = controller.makeOptions();
             expect(controller.data.options.length+1).toBe(options.length);
-            expect(options[options.length-1]).toEqual("No correct answer");
+            expect(options[options.length-1]).toEqual("n/a");
+        });
+
+        it('should return false when noCorrect is called, given a correct answer of index 1', function() {
+            expect(controller.noCorrect()).toBe(true);
         });
 
         it('should fail silently when invalid index is give to delete_option', function() {

diff --git a/ubcpi/static/js/src/d3-pibar.js b/ubcpi/static/js/src/d3-pibar.js
@@ -41,9 +41,11 @@ d3.custom.barChart = function(scope) {
             var height = chartHeight - margin.top - margin.bottom;
 
             var svg = d3.select(this)
+                .classed("svg-container", true)
                 .append("svg")
-                .attr("width", chartWidth)
-                .attr("height", chartHeight);
+                .attr("preserveAspectRatio", "xMaxYMax meet")
+                .attr("viewBox", "0 0 800 250")
+                .classed("svg-content-responsive", true);
 
             var x = d3.scale.ordinal()
                 .rangeRoundBands([0, width], 0.1);
@@ -152,3 +154,4 @@ d3.custom.barChart = function(scope) {
 
     return chart;
 };
+