Skip to content

Commit

Permalink
Emphasize student reflection
Browse files Browse the repository at this point in the history 
Add front-end changes to help the user reflect on their answer.
This includes presenting them with an explicit choice to either update
or submit their response.
  • Loading branch information
@jleong-openedx
jleong-openedx committed Aug 8, 2017
1 parent 8857b8a commit c051da2
Showing 1 changed file with 22 additions and 8 deletions.
30 changes: 22 additions & 8 deletions ubcpi/static/html/ubcpi.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ <h3 id="pi-question-h" class="question-text" style="display:inline;">{{display_n

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

<span id="ubcpi-other-answers-heading" style="color:#414141" translate>Step 2) Read Other Students Answers</span>
<span id="ubcpi-other-answers-heading" style="color:#414141" translate>Step 2a) Read Other Students Answers</span>
<p class="ubcpi-other-answers-instructions" translate>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">
Expand All @@ -49,6 +49,18 @@ <h3 id="pi-question-h" class="question-text" style="display:inline;">{{display_n
</li>
</ul>


<span id="ubcpi-init-answer-heading" style="color:#414141" translate>Step 2b) Compare Your Answer</span>

<ul class="ubcpi-other-answers">

<li>
<b><div class="other-answer" translate>Your Answer: {{options[rc.answer_original].text}}</div></b>
<span class="sr" translate>Student Rationale</span><i aria-hidden="true" class="icon fa fa-user"></i>
<span class="other-rationale">"{{rc.rationale_original}}"</span>
</li>
</ul>

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

<div role="group" aria-label="Progress Indicator">
Expand All @@ -69,10 +81,10 @@ <h3 id="pi-question-h" class="question-text" style="display:inline;">{{display_n

<legend>
<span ng-if="rc.status() == rc.ALL_STATUS.NEW" style="color:#414141" translate>Step 1) Your Initial Answer <span class="inline-hint">You can change this answer later, if you change your mind.</span></span>
<span ng-if="rc.status() == rc.ALL_STATUS.ANSWERED" style="color:#414141" translate>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 id="hiding-section" ng-if="rc.status() == rc.ALL_STATUS.ANSWERED" style="color:#414141;display:none;" translate>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">
<div id="hiding-options-div" class="ubcpi-possible-options">
<p class="ubcpi-option" data-ng-repeat="option in options track by $index">
<label class="ubcpi-label ubcpi-answer" for="original-option-input-{{ $index }}">
<input class="ubcpi-field" type="radio" id="original-option-input-{{ $index }}" name="q" data-ng-model="rc.answer" value="{{$index}}" required integer>
Expand All @@ -89,7 +101,7 @@ <h3 id="pi-question-h" class="question-text" style="display:inline;">{{display_n
</div>

</fieldset>

<div id="hiding-rationale-div">
<label class="ubcpi-label" for="rationale" translate>Explain to other students why you chose this answer (Required):</label>
<textarea class="ubcpi-field ubcpi-rationale" id="rationale" name="rationale" data-ng-model="rc.rationale" required ng-minlength="{{rationale_size.min}}" ng-maxlength="{{rationale_size.max}}"></textarea>
<p class="ubcpi-rationale-warning" ng-if="((rationale_size.max - rc.rationale.length) <= (rationale_size.max/10)) && (rc.rationale.length <= rationale_size.max)" translate>You are approaching the limit of {{rationale_size.max}} characters for this answer. Characters left: {{rationale_size.max - rc.rationale.length}}</p>
Expand Down Expand Up @@ -128,10 +140,12 @@ <h3 id="pi-question-h" class="question-text" style="display:inline;">{{display_n
<p class="ubcpi-chart-label">Revised Answer</p>
</div><!-- .revised-answers -->
</div>
</div>

<input data-ng-disabled="answerForm.$invalid" type='button' class='ubcpi_submit' value="{{ 'Next Step' | translate }} &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'"/>

</div></div>
<p id="decision-prompt" style="text-align:center;display:none;">What would you like to do?</p>
<div style="text-align:center">
<input id="update-button" style="display:none; margin-right:5px" type='button' class='ubcpi_submit' value="{{ 'Update Answer' | translate }}" name='ubcpi_update_step' ng-click="rc.jump();" onclick="document.getElementById('hiding-options-div').style.display='block';document.getElementById('hiding-rationale-div').style.display='block';document.getElementById('hiding-section').style.display='block';this.style.display='none';document.getElementById('decision-prompt').style.display='none';"/>
<input id="submit-button" onclick="this.value='Submit Answer';document.getElementById('update-button').style.display='inline';document.getElementById('hiding-options-div').style.display='none';document.getElementById('hiding-rationale-div').style.display='none';document.getElementById('decision-prompt').style.display='block';" style="display:inline; margin-left:5px" data-ng-disabled="answerForm.$invalid" type='button' class='ubcpi_submit' value="{{ 'Next Step' | translate }}" name='ubcpi_next_step' data-ng-click="rc.clickSubmit($event); location.href='#reflecting;'" aria-describedby="button-disabled-reason ubcpi-next-inline-hints"/>
</div>
</form>

</div><!-- .question-other-explain -->
Expand Down

0 comments on commit c051da2

Please sign in to comment.