Added LaTeX preview feature to all comment/feedback fields

parent 93e0ca47
{% spaceless %}
{% load i18n %}
{% if allow_latex %}
<{{ elem }} class="list--actions__item">
<button type="submit" class="submission__preview action action--save" aria-describedby="response__preview_explanation__{{ id }}" data-input="{{ preview_name }}"
{{submit_enabled|yesno:",disabled" }}>
{% trans "Preview in LaTeX"%}
</button>
<div id="response__preview_explanation__{{ id }}" class="response__submission__label">
{% trans "Click to preview your submission in LaTeX."%}
</div>
</{{ elem }}>
<{{ elem }} class="submission__preview__item list--actions__item">
<article class="submission__answer__display">
<h5 class="submission__answer__display__title">{% trans "Preview Response"%}</h5>
<div class="submission__answer__display__content">
<p class="preview_content" data-preview="{{ preview_name }}"></p>
</div>
</article>
</{{ elem }}>
{% endif %}
{% endspaceless %}
...@@ -48,12 +48,14 @@ ...@@ -48,12 +48,14 @@
class="answer__value" class="answer__value"
id="{{ rubric_type }}__assessment__rubric__question--{{ criterion.order_num }}__feedback__{{ xblock_id }}" id="{{ rubric_type }}__assessment__rubric__question--{{ criterion.order_num }}__feedback__{{ xblock_id }}"
value="{{ criterion.name }}" value="{{ criterion.name }}"
data-preview="criteria__{{ criterion.name }}"
data-criterion-name="{{ criterion.name }}" data-criterion-name="{{ criterion.name }}"
aria-describedby="{{ rubric_type }}__assessment__rubric__prompt--{{ criterion.order_num }}" aria-describedby="{{ rubric_type }}__assessment__rubric__prompt--{{ criterion.order_num }}"
maxlength="1000" maxlength="1000"
{% if criterion.feedback == 'required' %}required{% endif %} {% if criterion.feedback == 'required' %}required{% endif %}
> >
</textarea> </textarea>
{% include "openassessmentblock/oa_latex_preview.html" with id="criteria__"|add:rubric_type|add:criterion.order_num elem="div" preview_name="criteria__"|add:criterion.name submit_enabled=True %}
</div> </div>
</div> </div>
</div> </div>
...@@ -70,10 +72,12 @@ ...@@ -70,10 +72,12 @@
<textarea <textarea
class="assessment__rubric__question--feedback__value" class="assessment__rubric__question--feedback__value"
id="{{ rubric_type }}__assessment__rubric__question--feedback__value__{{ xblock_id }}" id="{{ rubric_type }}__assessment__rubric__question--feedback__value__{{ xblock_id }}"
data-preview="feedback"
placeholder="{{ rubric_feedback_default_text }}" placeholder="{{ rubric_feedback_default_text }}"
maxlength="1000" maxlength="1000"
> >
</textarea> </textarea>
{% include "openassessmentblock/oa_latex_preview.html" with id="feedback__"|add:rubric_type elem="div" preview_name="feedback" submit_enabled=True %}
</div> </div>
</li> </li>
</ol> </ol>
......
...@@ -87,6 +87,7 @@ ...@@ -87,6 +87,7 @@
<textarea <textarea
id="submission__answer__part__text__{{ forloop.counter }}__{{ xblock_id }}" id="submission__answer__part__text__{{ forloop.counter }}__{{ xblock_id }}"
class="submission__answer__part__text__value" class="submission__answer__part__text__value"
data-preview="submission"
aria-labelledby="submission__answer__part__text__title__{{ forloop.counter }}__{{ xblock_id }}" aria-labelledby="submission__answer__part__text__title__{{ forloop.counter }}__{{ xblock_id }}"
aria-describedby="submission__answer__tip__{{ xblock_id }}" aria-describedby="submission__answer__tip__{{ xblock_id }}"
placeholder="{% trans "Enter your response to the question above." %}" placeholder="{% trans "Enter your response to the question above." %}"
...@@ -115,25 +116,7 @@ ...@@ -115,25 +116,7 @@
{{ save_status }} {{ save_status }}
</div> </div>
</li> </li>
{% if allow_latex %} {% include "openassessmentblock/oa_latex_preview.html" with id="submission__"|add:xblock_id elem="li" preview_name="submission" %}
<li class="list--actions__item">
<button type="submit" class="submission__preview action action--save" aria-describedby="response__preview_explanation__{{ xblock_id }}"
{{submit_enabled|yesno:",disabled" }}>
{% trans "Preview in LaTeX"%}
</button>
<div id="response__preview_explanation__{{ xblock_id }}" class="response__submission__label">
{% trans "Click to preview your submission in LaTeX."%}
</div>
</li>
<li class="submission__preview__item list--actions__item">
<article class="submission__answer__display">
<h5 class="submission__answer__display__title">{% trans "Preview Response"%}</h5>
<div class="submission__answer__display__content">
<p class="preview_content"></p>
</div>
</article>
</li>
{% endif %}
</ul> </ul>
</div> </div>
</li> </li>
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -100,7 +100,8 @@ ...@@ -100,7 +100,8 @@
"save_status": "This response has not been saved.", "save_status": "This response has not been saved.",
"submit_enabled": false, "submit_enabled": false,
"submission_due": "", "submission_due": "",
"file_upload_type": "image" "file_upload_type": "image",
"xblock_id": "b1436dfc-5c65-11e7-b5b2-080027880ca6"
}, },
"output": "oa_response.html" "output": "oa_response.html"
}, },
...@@ -343,7 +344,8 @@ ...@@ -343,7 +344,8 @@
} }
] ]
} }
] ],
"xblock_id": "b1436dfc-5c65-11e7-b5b2-080027880ca6"
}, },
"output": "oa_peer_assessment.html" "output": "oa_peer_assessment.html"
}, },
...@@ -1023,7 +1025,8 @@ ...@@ -1023,7 +1025,8 @@
"feedback": "required", "feedback": "required",
"options": [] "options": []
} }
] ],
"xblock_id": "b1436dfc-5c65-11e7-b5b2-080027880ca6"
}, },
"output": "oa_rubric.html" "output": "oa_rubric.html"
}, },
...@@ -1230,7 +1233,8 @@ ...@@ -1230,7 +1233,8 @@
}, },
"save_status": "This response has not been saved.", "save_status": "This response has not been saved.",
"submit_enabled": true, "submit_enabled": true,
"submission_due": "2020-01-01T00:00" "submission_due": "2020-01-01T00:00",
"xblock_id": "b1436dfc-5c65-11e7-b5b2-080027880ca6"
}, },
"output": "oa_response_date.html" "output": "oa_response_date.html"
}, },
......
This source diff could not be displayed because it is too large. You can view the blob instead.
This source diff could not be displayed because it is too large. You can view the blob instead.
...@@ -194,6 +194,30 @@ OpenAssessment.BaseView.prototype = { ...@@ -194,6 +194,30 @@ OpenAssessment.BaseView.prototype = {
}, },
/** /**
*Install click handler for the LaTeX preview button.
*
* @param {element} parentElement JQuery selector for the container element.
*/
bindLatexPreview: function(parentElement) {
// keep the preview as display none at first
parentElement.find('.submission__preview__item').hide();
parentElement.find('.submission__preview').click(
function(eventObject) {
eventObject.preventDefault();
var previewName = $(eventObject.target).data("input");
// extract typed-in response and replace newline with br
var previewText = parentElement.find('textarea[data-preview="' + previewName + '"]').val();
var previewContainer = parentElement.find('.preview_content[data-preview="' + previewName + '"]');
previewContainer.html(previewText.replace(/\r\n|\r|\n/g,"<br />"));
// Render in mathjax
parentElement.find('.submission__preview__item').show();
MathJax.Hub.Queue(['Typeset', MathJax.Hub, previewContainer[0]]);
}
);
},
/**
* Get usage key of an XBlock. * Get usage key of an XBlock.
*/ */
getUsageID: function() { getUsageID: function() {
......
...@@ -115,6 +115,9 @@ OpenAssessment.PeerView.prototype = { ...@@ -115,6 +115,9 @@ OpenAssessment.PeerView.prototype = {
// Install a click handler for collapse/expand // Install a click handler for collapse/expand
this.baseView.setUpCollapseExpand(sel); this.baseView.setUpCollapseExpand(sel);
// Install click handler for the preview button
this.baseView.bindLatexPreview(sel);
// Initialize the rubric // Initialize the rubric
var rubricSelector = $(".peer-assessment--001__assessment", this.element); var rubricSelector = $(".peer-assessment--001__assessment", this.element);
if (rubricSelector.size() > 0) { if (rubricSelector.size() > 0) {
......
...@@ -92,8 +92,6 @@ OpenAssessment.ResponseView.prototype = { ...@@ -92,8 +92,6 @@ OpenAssessment.ResponseView.prototype = {
var handlePrepareUpload = function(eventData) { view.prepareUpload(eventData.target.files, uploadType); }; var handlePrepareUpload = function(eventData) { view.prepareUpload(eventData.target.files, uploadType); };
sel.find('input[type=file]').on('change', handlePrepareUpload); sel.find('input[type=file]').on('change', handlePrepareUpload);
// keep the preview as display none at first
sel.find('.submission__preview__item').hide();
var submit = $('.step--response__submit', this.element); var submit = $('.step--response__submit', this.element);
this.textResponse = $(submit).attr('text_response'); this.textResponse = $(submit).attr('text_response');
...@@ -118,19 +116,7 @@ OpenAssessment.ResponseView.prototype = { ...@@ -118,19 +116,7 @@ OpenAssessment.ResponseView.prototype = {
); );
// Install click handler for the preview button // Install click handler for the preview button
sel.find('.submission__preview').click( this.baseView.bindLatexPreview(sel);
function(eventObject) {
eventObject.preventDefault();
// extract typed-in response and replace newline with br
var previewText = sel.find('.submission__answer__part__text__value').val();
var previewContainer = sel.find('.preview_content');
previewContainer.html(previewText.replace(/\r\n|\r|\n/g,"<br />"));
// Render in mathjax
sel.find('.submission__preview__item').show();
MathJax.Hub.Queue(['Typeset', MathJax.Hub, previewContainer[0]]);
}
);
// Install a click handler for the save button // Install a click handler for the save button
sel.find('.file__upload').click( sel.find('.file__upload').click(
......
...@@ -58,6 +58,9 @@ OpenAssessment.SelfView.prototype = { ...@@ -58,6 +58,9 @@ OpenAssessment.SelfView.prototype = {
// Install a click handler for collapse/expand // Install a click handler for collapse/expand
this.baseView.setUpCollapseExpand(sel); this.baseView.setUpCollapseExpand(sel);
// Install click handler for the preview button
this.baseView.bindLatexPreview(sel);
// Initialize the rubric // Initialize the rubric
var rubricSelector = $(".self-assessment--001__assessment", this.element); var rubricSelector = $(".self-assessment--001__assessment", this.element);
if (rubricSelector.size() > 0) { if (rubricSelector.size() > 0) {
......
...@@ -153,6 +153,57 @@ ...@@ -153,6 +153,57 @@
overflow-y: scroll; overflow-y: scroll;
} }
%action-items {
.response__submission__label {
@extend %t-score;
color: $copy-color;
display: inline-block;
vertical-align: middle;
@include margin-left(($baseline-h/4));
.list--actions {
@include text-align(left);
}
}
.list--actions__item {
@include text-align(left);
margin-top: 5px;
}
.action--save {
@extend %btn--secondary;
@extend %action-2;
display: block;
margin-bottom: ($baseline-v/2);
min-width: 215px;
@include media($bp-ds) {
display: inline-block;
@include margin-right(($baseline-v/2));
margin-bottom: 0;
}
@include media($bp-dm) {
display: inline-block;
@include margin-right(($baseline-v/2));
margin-bottom: 0;
}
@include media($bp-dl) {
display: inline-block;
@include margin-right(($baseline-v/2));
margin-bottom: 0;
}
@include media($bp-dx) {
display: inline-block;
@include margin-right(($baseline-v/2));
margin-bottom: 0;
}
}
}
// -------------------- // --------------------
// UI: rubric // UI: rubric
// -------------------- // --------------------
......
...@@ -617,55 +617,8 @@ ...@@ -617,55 +617,8 @@
} }
} }
.response__submission__label {
@extend %t-score;
color: $copy-color;
display: inline-block;
vertical-align: middle;
@include margin-left(($baseline-h/4));
.list--actions {
@include text-align(left);
}
}
.response__submission__actions { .response__submission__actions {
@extend %action-items
.list--actions__item {
@include text-align(left);
}
.action--save {
@extend %btn--secondary;
@extend %action-2;
display: block;
margin-bottom: ($baseline-v/2);
min-width: 215px;
@include media($bp-ds) {
display: inline-block;
@include margin-right(($baseline-v/2));
margin-bottom: 0;
}
@include media($bp-dm) {
display: inline-block;
@include margin-right(($baseline-v/2));
margin-bottom: 0;
}
@include media($bp-dl) {
display: inline-block;
@include margin-right(($baseline-v/2));
margin-bottom: 0;
}
@include media($bp-dx) {
display: inline-block;
@include margin-right(($baseline-v/2));
margin-bottom: 0;
}
}
} }
} }
...@@ -708,6 +661,7 @@ ...@@ -708,6 +661,7 @@
// assessment form // assessment form
.peer-assessment__assessment { .peer-assessment__assessment {
@extend %action-items;
// fields // fields
.assessment__fields { .assessment__fields {
...@@ -775,6 +729,7 @@ ...@@ -775,6 +729,7 @@
// assessment form // assessment form
.self-assessment__assessment { .self-assessment__assessment {
@extend %action-items;
// fields // fields
.assessment__fields { .assessment__fields {
...@@ -917,7 +872,6 @@ ...@@ -917,7 +872,6 @@
@extend %ui-subsection-content; @extend %ui-subsection-content;
padding: ($baseline-v/2) ($baseline-h/4) $baseline-v ($baseline-h/4); padding: ($baseline-v/2) ($baseline-h/4) $baseline-v ($baseline-h/4);
background: $color-decorative-quaternary;
border-radius: ($baseline-v/10); border-radius: ($baseline-v/10);
list-style: none; list-style: none;
...@@ -1129,6 +1083,10 @@ ...@@ -1129,6 +1083,10 @@
margin-top: ($baseline-v/4); margin-top: ($baseline-v/4);
} }
.action--save {
@extend %action-button
}
.feedback { .feedback {
@extend %no-list; @extend %no-list;
@extend %wipe-last-child; @extend %wipe-last-child;
......
...@@ -99,6 +99,7 @@ def render_templates(root_dir, template_json): ...@@ -99,6 +99,7 @@ def render_templates(root_dir, template_json):
for template_dict in template_json: for template_dict in template_json:
template = get_template(template_dict['template']) template = get_template(template_dict['template'])
context = parse_dates(template_dict['context']) context = parse_dates(template_dict['context'])
print "Rendering template: {}".format(template_dict['template'])
rendered = template.render(Context(context)) rendered = template.render(Context(context))
output_path = os.path.join(root_dir, template_dict['output']) output_path = os.path.join(root_dir, template_dict['output'])
......
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