Skip to content
This repository has been archived by the owner on Oct 31, 2024. It is now read-only.

Commit

Permalink
Merge a51b720 into 0dc71fe
Browse files Browse the repository at this point in the history
  • Loading branch information
@jleong-openedx
jleong-openedx authored Jan 17, 2017
2 parents 0dc71fe + a51b720 commit a707732
Show file tree
Hide file tree
Showing 3 changed files with 101 additions and 56 deletions.
123 changes: 70 additions & 53 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;">{{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">
<ol 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>
</ol>
</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">

<ol 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>
</ol>
</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 All @@ -116,12 +125,12 @@ <h4 class="other-answer" ng-if="options[answer.option].text">Student Answer: {{o
<div class="ubcpi-staff-statistics" ng-show="collapse">

<div class="original-answers results-container choicegroup">
<pi-barchart options="options" stats="rc.stats.original" correct="rc.correct_answer" role="user_role"></pi-barchart>
<pi-barchart options="options" stats="rc.stats.original" correct="rc.correct_answer" data-role="user_role"></pi-barchart>
<p class="ubcpi-chart-label">Original Answer</p>
</div><!-- .original-answers -->

<div class="revised-answers results-container choicegroup">
<pi-barchart options="options" stats="rc.stats.revised" correct="rc.correct_answer" role="user_role"></pi-barchart>
<pi-barchart options="options" stats="rc.stats.revised" correct="rc.correct_answer" data-role="user_role"></pi-barchart>
<p class="ubcpi-chart-label">Revised Answer</p>
</div><!-- .revised-answers -->
</div>
Expand All @@ -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;">{{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">
<ol 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>
</ol>

</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,33 +227,37 @@ <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>
<pi-barchart options="options" stats="rc.stats.original" correct="rc.correct_answer" data-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>
<pi-barchart options="options" stats="rc.stats.revised" correct="rc.correct_answer" data-role="user_role"></pi-barchart>
</div><!-- .revised-answers -->

</div>
Expand Down
Loading

0 comments on commit a707732

Please sign in to comment.