Skip to content

P
problem-builder
Commit 8133e633 by Tim Krones
Options

Move logic for displaying grade and review links to review step.

parent 026446e4
Showing with 112 additions and 93 deletions
problem_builder/public/js/mentoring_with_steps.js
function MentoringWithStepsBlock(runtime, element) {
var steps = runtime.children(element).filter(
var children = runtime.children(element);
var steps = children.filter(
function(c) { return c.element.className.indexOf('sb-step') > -1; }
);
var reviewStep;
for (var i = 0; i < children.length; i++) {
var child = children[i];
if (child.type === 'sb-review-step') {
reviewStep = child;
break;
}
}
var activeStep = $('.mentoring', element).data('active-step');
var gradeTemplate = _.template($('#xblock-review-template').html());
var reviewStepsTemplate = _.template($('#xblock-review-steps-template').html());
var reviewTipsTemplate = _.template($('#xblock-review-tips-template').html()); // Tips about specific questions the user got wrong
var attemptsTemplate = _.template($('#xblock-attempts-template').html());
var reviewStep, checkmark, submitDOM, nextDOM, reviewDOM, tryAgainDOM,
var checkmark, submitDOM, nextDOM, reviewDOM, tryAgainDOM,
assessmentMessageDOM, gradeDOM, attemptsDOM, reviewTipsDOM, reviewLinkDOM, submitXHR;
function isLastStep() {
......@@ -19,10 +27,6 @@ function MentoringWithStepsBlock(runtime, element) {
return (activeStep === -1);
}
function reviewStepPresent() {
return reviewStep.length > 0;
}
function someAttemptsLeft() {
var data = attemptsDOM.data();
if (data.max_attempts === 0) { // Unlimited number of attempts available
......@@ -97,7 +101,7 @@ function MentoringWithStepsBlock(runtime, element) {
if (nextDOM.is(':visible')) { nextDOM.focus(); }
if (atReviewStep()) {
if (reviewStepPresent()) {
if (reviewStep) {
reviewDOM.removeAttr('disabled');
} else {
if (someAttemptsLeft()) {
......@@ -160,7 +164,7 @@ function MentoringWithStepsBlock(runtime, element) {
showActiveStep();
validateXBlock();
nextDOM.attr('disabled', 'disabled');
if (isLastStep() && reviewStepPresent()) {
if (isLastStep() && reviewStep) {
reviewDOM.attr('disabled', 'disabled');
reviewDOM.show();
}
......@@ -173,23 +177,13 @@ function MentoringWithStepsBlock(runtime, element) {
}
function showReviewStep() {
reviewStep.show();
var data = gradeDOM.data();
// Links for reviewing individual questions (WIP)
var enableExtendedFeedback = (!someAttemptsLeft() && data.extended_feedback);
// Forward to review step to render grade data
var showExtendedFeedback = (!someAttemptsLeft() && data.extended_feedback);
reviewStep.renderGrade(gradeDOM, showExtendedFeedback);
_.extend(data, {
'runDetails': function(correctness) {
if (!enableExtendedFeedback) {
return '';
}
var self = this;
return reviewStepsTemplate({'questions': self[correctness], 'correctness': correctness});
}
});
gradeDOM.html(gradeTemplate(data));
// Add click handler that takes care of showing associated step to step links
$('a.step-link', element).on('click', getStepToReview);
if (someAttemptsLeft()) {
......@@ -221,7 +215,6 @@ function MentoringWithStepsBlock(runtime, element) {
function jumpToReview(stepIndex) {
activeStep = stepIndex;
cleanAll();
reviewStep.hide();
showActiveStep();
if (isLastStep()) {
......@@ -322,7 +315,6 @@ function MentoringWithStepsBlock(runtime, element) {
function handleTryAgain(result) {
activeStep = result.active_step;
updateDisplay();
reviewStep.hide();
tryAgainDOM.hide();
submitDOM.show();
if (! isLastStep()) {
......@@ -342,9 +334,6 @@ function MentoringWithStepsBlock(runtime, element) {
}
function initXBlockView() {
reviewStep = $('.sb-review-step', element);
reviewStep.hide();
checkmark = $('.assessment-checkmark', element);
submitDOM = $(element).find('.submit .input-main');
......
problem_builder/public/js/review_step.js 0 → 100644
function ReviewStepBlock(runtime, element) {
var gradeTemplate = _.template($('#xblock-feedback-template').html());
var reviewStepsTemplate = _.template($('#xblock-step-links-template').html());
return {
'renderGrade': function(gradeDOM, showExtendedFeedback) {
var data = gradeDOM.data();
_.extend(data, {
'runDetails': function(correctness) {
if (!showExtendedFeedback) {
return '';
}
var self = this;
return reviewStepsTemplate({'questions': self[correctness], 'correctness': correctness});
}
});
gradeDOM.html(gradeTemplate(data));
}
};
}
problem_builder/step.py
......@@ -260,4 +260,6 @@ class ReviewStepBlock(XBlockWithPreviewMixin, XBlock):
fragment.add_content(loader.render_template('templates/html/review_step.html', {
'self': self,
}))
fragment.add_javascript_url(self.runtime.local_resource_url(self, 'public/js/review_step.js'))
fragment.initialize_js('ReviewStepBlock')
return fragment
problem_builder/templates/html/mentoring_review_templates.html
<script type="text/template" id="xblock-review-template">
<div class="grade-result">
<h2>
<%= _.template(gettext("You scored {percent}% on this assessment."), {percent: score}, {interpolate: /\{(.+?)\}/g}) %>
</h2>
<hr/>
<span class="assessment-checkmark icon-2x checkmark-correct icon-ok fa fa-check"></span>
<div class="results-section">
<p>
<%= _.template(
ngettext(
"You answered 1 question correctly.",
"You answered {number_correct} questions correctly.",
correct_answer
), {number_correct: correct_answer}, {interpolate: /\{(.+?)\}/g})
%>
</p>
<%= runDetails('correct') %>
</div>
<div class="clear"></div>
<span class="assessment-checkmark icon-2x checkmark-partially-correct icon-ok fa fa-check"></span>
<div class="results-section">
<p>
<%= _.template(
ngettext(
"You answered 1 question partially correctly.",
"You answered {number_partially_correct} questions partially correctly.",
partially_correct_answer
), {number_partially_correct: partially_correct_answer}, {interpolate: /\{(.+?)\}/g})
%>
</p>
<%= runDetails('partial') %>
</div>
<div class="clear"></div>
<span class="assessment-checkmark icon-2x checkmark-incorrect icon-exclamation fa fa-exclamation"></span>
<div class="results-section">
<p>
<%= _.template(
ngettext(
"You answered 1 question incorrectly.",
"You answered {number_incorrect} questions incorrectly.",
incorrect_answer
), {number_incorrect: incorrect_answer}, {interpolate: /\{(.+?)\}/g})
%>
</p>
<%= runDetails('incorrect') %>
</div>
<div class="clear"></div>
<hr/>
</div>
</script>
<!-- Template for extended feedback: Show extended feedback details when all attempts are used up. -->
<script type="text/template" id="xblock-review-steps-template">
<% var q, last_question; %>
<ul class="review-list <%= correctness %>-list">
<% for (var question in questions) {{ q = questions[question]; last_question = question == questions.length - 1; %>
<li><a href="#" class="step-link" data-step="<%= q.step %>"><%= _.template(gettext("Question {number}"), {number: q.number}, {interpolate: /\{(.+?)\}/g}) %></a></li>
<% }} %>
</ul>
</script>
<!-- Tips about specific questions the student got wrong. From pb-message[type=on-assessment-review-question] blocks -->
<script type="text/template" id="xblock-review-tips-template">
<p class="review-tips-intro"><%= gettext("You might consider reviewing the following items before your next assessment attempt:") %></p>
......
problem_builder/templates/html/review_step.html
<div class="sb-review-step">
<h3>...</h3>
<script type="text/template" id="xblock-feedback-template">
<div class="grade-result">
<h2>
<%= _.template(gettext("You scored {percent}% on this assessment."), {percent: score}, {interpolate: /\{(.+?)\}/g}) %>
</h2>
<hr/>
<span class="assessment-checkmark icon-2x checkmark-correct icon-ok fa fa-check"></span>
<div class="results-section">
<p>
<%= _.template(
ngettext(
"You answered 1 question correctly.",
"You answered {number_correct} questions correctly.",
correct_answer
), {number_correct: correct_answer}, {interpolate: /\{(.+?)\}/g})
%>
</p>
<%= runDetails('correct') %>
</div>
<div class="clear"></div>
<span class="assessment-checkmark icon-2x checkmark-partially-correct icon-ok fa fa-check"></span>
<div class="results-section">
<p>
<%= _.template(
ngettext(
"You answered 1 question partially correctly.",
"You answered {number_partially_correct} questions partially correctly.",
partially_correct_answer
), {number_partially_correct: partially_correct_answer}, {interpolate: /\{(.+?)\}/g})
%>
</p>
<%= runDetails('partial') %>
</div>
<div class="clear"></div>
<span class="assessment-checkmark icon-2x checkmark-incorrect icon-exclamation fa fa-exclamation"></span>
<div class="results-section">
<p>
<%= _.template(
ngettext(
"You answered 1 question incorrectly.",
"You answered {number_incorrect} questions incorrectly.",
incorrect_answer
), {number_incorrect: incorrect_answer}, {interpolate: /\{(.+?)\}/g})
%>
</p>
<%= runDetails('incorrect') %>
</div>
<div class="clear"></div>
<hr/>
</div>
</script>
<!-- Template for extended feedback: Show extended feedback details when all attempts are used up. -->
<script type="text/template" id="xblock-step-links-template">
<% var q, last_question; %>
<ul class="review-list <%= correctness %>-list">
<% for (var question in questions) {{ q = questions[question]; last_question = question == questions.length - 1; %>
<li><a href="#" class="step-link" data-step="<%= q.step %>"><%= _.template(gettext("Question {number}"), {number: q.number}, {interpolate: /\{(.+?)\}/g}) %></a></li>
<% }} %>
</ul>
</script>
</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment