Skip to content

Commit

Permalink
Merge b4e89eb into 0dc71fe
Browse files Browse the repository at this point in the history
  • Loading branch information
@jleong-openedx
jleong-openedx committed Jan 4, 2017
2 parents 0dc71fe + b4e89eb commit c83f362
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 52 deletions.
115 changes: 66 additions & 49 deletions ubcpi/static/html/ubcpi.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@

<div class="question-other-explain" data-ng-if="rc.status() == rc.ALL_STATUS.NEW || rc.status() == rc.ALL_STATUS.ANSWERED">

<h2 id="pi-question-h" class="question-text">{{display_name}}</h2>
<h3 id="pi-question-h" class="question-text" style="display:inline;text-transform:uppercase">{{display_name}}</h3>
<div class="question-weight" ng-if="weight < 1"></div>
<div class="question-weight" ng-if="weight == 1">&nbsp;({{weight}} point possible)</div>
<div class="question-weight" ng-if="weight > 1">&nbsp;({{weight}} points possible)</div>

<div style="padding: .5em; margin-bottom: 0px; background: #ddd;"><h2 id="pi-question-h" class="question-text" style="margin-bottom:0">QUESTION</h2></div>
<div style="padding: .5em; margin-bottom: 0px; margin-top: 10px; background: #ddd;"><h4 id="pi-question-h2" class="question-text" style="margin-bottom:0;color:#414141">QUESTION</h4></div>
<div style="margin: 0 0 1.5em 0; padding: 1em; background: #f8f8f8;">
<img ng-src="{{question_text.image_url}}" id="question-image" alt="{{question_text.image_alt}}" ng-if="question_text.image_position == 'above' && question_text.image_url" />

Expand All @@ -19,27 +19,31 @@ <h2 id="pi-question-h" class="question-text">{{display_name}}</h2>
</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"><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 role="group" aria-label="Progress Indicator">
<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:#414141;padding-top:.3em"><span class="fa fa-check-circle" aria-hidden="true" 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" aria-hidden="true"></span>
<span class="sr">Answer</span>
<li style="display:inline-block;width:30%;text-align:center;font-weight:bold;color:#111111;padding-top:.3em;text-transform:uppercase;"><span class="fa fa-arrow-circle-down" aria-hidden="true" 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" aria-hidden="true"></span>
<span class="sr">Reflection</span>
<li style="display:inline-block;width:30%;text-align:center;color:#414141"><span class="fa fa-circle-o" aria-hidden="true" style="font-size:1.4em;"></span><br>Results</li>
<span class="sr">Results</span>
</ul>
</span>
</div>

<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">
<div class="others-responses" id="others-responses" data-ng-if="rc.status() == rc.ALL_STATUS.ANSWERED" tabindex="-1" role="region" aria-labelledby="ubcpi-other-answers-head">

<h3 id="ubcpi-other-answers-head">Step 2) READ OTHER STUDENT ANSWERS</h3>
<h5 id="ubcpi-other-answers-head" style="color:#414141">Step 2) READ OTHER STUDENT ANSWERS</h5>
<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">
<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>
<b><div class="other-answer" ng-if="options[answer.option].text">Student Answer: {{options[answer.option].text}}</div></b>

<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>
Expand All @@ -50,23 +54,28 @@ <h4 class="other-answer" ng-if="options[answer.option].text">Student Answer: {{o

</div><!-- .others-responses -->

<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"><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>
<div role="group" aria-label="Progress Indicator">
<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:#111111;padding-top:.3em"><span class="fa fa-arrow-circle-down" aria-hidden="true" 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>
<span class="sr">Answer</span>
<li style="display:inline-block;width:30%;text-align:center;color:#414141;padding-top:.3em;text-transform:uppercase;"><span class="fa fa-circle-o" aria-hidden="true" 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>
<span class="sr">Reflection</span>
<li style="display:inline-block;width:30%;text-align:center;color:#414141"><span class="fa fa-circle-o" aria-hidden="true" style="font-size:1.4em;"></span><br>Results</li>
<span class="sr">Results</span>
</ul>
</span>
</div>
<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" style="color:#414141">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" style="color:#414141">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">
Expand Down Expand Up @@ -98,7 +107,7 @@ <h4 class="other-answer" ng-if="options[answer.option].text">Student Answer: {{o
</span>
</p>

<div id="button-disabled-reason">
<div id="button-disabled-reason-label">
<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>
Expand Down Expand Up @@ -135,14 +144,14 @@ <h4 class="other-answer" ng-if="options[answer.option].text">Student Answer: {{o

<div class="correct-revised-chart" data-ng-if="rc.status() == rc.ALL_STATUS.REVISED" data-ng-init="rc.getStats()">

<h2 id="pi-question-h" class="question-text">{{display_name}}</h2>
<div class="question-weight" ng-if-"rc.weight < 1"></div>
<h3 id="pi-question-h" class="question-text" style="display:inline;text-transform:uppercase">{{display_name}}</h3>
<div class="question-weight" ng-if="rc.weight < 1"></div>

<div class="question-weight" ng-if="rc.weight == 1">({{weight}} point possible)</div>

<div class="question-weight" ng-if="rc.weight > 1">({{weight}} points possible)</div>

<div style="padding: .5em; margin-bottom: 0px; background: #ddd;"><h2 id="pi-question-h" class="question-text" style="margin-bottom:0">QUESTION</h2></div>
<div style="padding: .5em; margin-bottom: 0px; margin-top: 10px; background: #ddd;"><h4 id="pi-question-h2" class="question-text" style="margin-bottom:0;color:#414141">QUESTION</h4></div>
<div style="margin: 0 0 1.5em 0; padding: 1em; background: #f8f8f8;">

<img ng-src="{{question_text.image_url}}" id="question-image" alt="{{question_text.image_alt}}" ng-if="question_text.image_position == 'above' && question_text.image_url" />
Expand All @@ -152,24 +161,28 @@ <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>

<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"><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>

<div role="group" aria-label="Progress Indicator">
<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:#414141;padding-top:.3em"><span class="fa fa-check-circle" aria-hidden="true" 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>
<span class="sr">Answer</span>
<li style="display:inline-block;width:30%;text-align:center;color:#414141;padding-top:.3em;text-transform:uppercase;"><span class="fa fa-check-circle" aria-hidden="true" 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>
<span class="sr">Reflection</span>
<li style="display:inline-block;width:30%;text-align:center;font-weight:bold;color:#111111"><span class="fa fa-arrow-circle-down" aria-hidden="true" style="font-size:1.4em;"></span><br>Results</li>
<span class="sr">Results</span>
</ul>

</span>
</div>
<section class="solution-span correct-answer-and-rationale" tabindex="-1" aria-labelledby="correct-option-head" role="region">

<div class="detailed-solution" id="detailed-solution">

<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">INSTRUCTOR'S EXPLANATION</h2>
<h5 id="correct-option-head" ng-if="options.length > rc.correct_answer">Correct Answer</h5>
<h5 id="correct-option-head" ng-if="!rc.correct_rationale.text"></h5>
<h5 id="correct-option-head" ng-if="options.length == rc.correct_answer && rc.correct_rationale.text">INSTRUCTOR'S EXPLANATION</h5>

<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" />
Expand Down Expand Up @@ -214,31 +227,35 @@ <h2 id="correct-option-head" ng-if="options.length == rc.correct_answer && rc.co
<div class="ubcpi-class-breakdown">

<a name="classbreakdown"></a>
<h3 class="ubcpi-class-breakdown-head">Class Breakdown</h3>
<h5 class="ubcpi-class-breakdown-head">Class Breakdown</h5>
<p>This is a look at how your classmates answered the question during the initial and final rounds.</p>
<h4>Answer Options</h4>
<h6>Answer Options</h6>
<div class="ubcpi-breakdown-answer-options">

<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" 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="sr">{{rc.calc($index)}}</span>
<span ng-if="rc.correct_answer !== $index" class="ubcpi-breakdown-answer-text">{{option.text}}</span>
<span ng-if="rc.correct_answer !== $index" class="sr">{{rc.calc($index)}}</span>

<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>
</p>

</div>
<h4>Initial Answer Selection</h4>

<h6>Initial Answer Selection</h6>
<div class="original-answers results-container choicegroup">

<pi-barchart options="options" stats="rc.stats.original" correct="rc.correct_answer" role="user_role"></pi-barchart>
</div><!-- .original-answers -->
<div ></div>

<h4>Final Answer Selection</h4>
<h6>Final Answer Selection</h6>
<div class="revised-answers results-container choicegroup">
<pi-barchart options="options" stats="rc.stats.revised" correct="rc.correct_answer" role="user_role"></pi-barchart>
</div><!-- .revised-answers -->
Expand Down
6 changes: 3 additions & 3 deletions ubcpi/static/js/spec/ubcpi_spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,7 @@ describe('UBCPI module', function () {
controller.answer_revised = 0;
controller.rationale_revised = 'This is my revised rationale';
expect(controller.status()).toBe(controller.ALL_STATUS.REVISED);
})
});
});

describe('clickSubmit', function() {
Expand Down Expand Up @@ -400,6 +400,7 @@ describe('UBCPI module', function () {
});
controller.getStats();
expect(controller.stats).toEqual(response);
expect(controller.calc(0)).toBe(" Initial Answer Selection: 100% Final Answer Selection: 0%");
});

it('should call notify with error when backend errors', function() {
Expand All @@ -416,8 +417,7 @@ describe('UBCPI module', function () {
'message': 'Please refresh the page and try again!'
});
});

})
});
})
});

Expand Down

0 comments on commit c83f362

Please sign in to comment.