Skip to content

E
edx-ora2
Commit 410adc80 by Eric Fischer Committed by GitHub
Options

Merge pull request #1017 from open-craft/bdero/feedback-latex-preview 

Added LaTeX preview feature to all comment/feedback fields
parents 46d58e52 8fb5af0e
Showing with 126 additions and 87 deletions
openassessment/templates/openassessmentblock/oa_latex_preview.html 0 → 100644
{% 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 %}
openassessment/templates/openassessmentblock/oa_rubric.html
......@@ -48,12 +48,14 @@
class="answer__value"
id="{{ rubric_type }}__assessment__rubric__question--{{ criterion.order_num }}__feedback__{{ xblock_id }}"
value="{{ criterion.name }}"
data-preview="criteria__{{ criterion.name }}"
data-criterion-name="{{ criterion.name }}"
aria-describedby="{{ rubric_type }}__assessment__rubric__prompt--{{ criterion.order_num }}"
maxlength="1000"
{% if criterion.feedback == 'required' %}required{% endif %}
>
</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>
......@@ -70,10 +72,12 @@
<textarea
class="assessment__rubric__question--feedback__value"
id="{{ rubric_type }}__assessment__rubric__question--feedback__value__{{ xblock_id }}"
data-preview="feedback"
placeholder="{{ rubric_feedback_default_text }}"
maxlength="1000"
>
</textarea>
{% include "openassessmentblock/oa_latex_preview.html" with id="feedback__"|add:rubric_type elem="div" preview_name="feedback" submit_enabled=True %}
</div>
</li>
</ol>
......
openassessment/templates/openassessmentblock/response/oa_response.html
......@@ -87,6 +87,7 @@
<textarea
id="submission__answer__part__text__{{ forloop.counter }}__{{ xblock_id }}"
class="submission__answer__part__text__value"
data-preview="submission"
aria-labelledby="submission__answer__part__text__title__{{ forloop.counter }}__{{ xblock_id }}"
aria-describedby="submission__answer__tip__{{ xblock_id }}"
placeholder="{% trans "Enter your response to the prompt above." %}"
......@@ -115,25 +116,7 @@
{{ save_status }}
</div>
</li>
{% if allow_latex %}
<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 %}
{% include "openassessmentblock/oa_latex_preview.html" with id="submission__"|add:xblock_id elem="li" preview_name="submission" %}
</ul>
</div>
</li>
......
openassessment/xblock/static/css/openassessment-ltr.css
This source diff could not be displayed because it is too large. You can view the blob instead.
openassessment/xblock/static/css/openassessment-rtl.css
This source diff could not be displayed because it is too large. You can view the blob instead.
openassessment/xblock/static/js/fixtures/templates.json
......@@ -100,7 +100,8 @@
"save_status": "This response has not been saved.",
"submit_enabled": false,
"submission_due": "",
"file_upload_type": "image"
"file_upload_type": "image",
"xblock_id": "b1436dfc-5c65-11e7-b5b2-080027880ca6"
},
"output": "oa_response.html"
},
......@@ -343,7 +344,8 @@
}
]
}
]
],
"xblock_id": "b1436dfc-5c65-11e7-b5b2-080027880ca6"
},
"output": "oa_peer_assessment.html"
},
......@@ -1023,7 +1025,8 @@
"feedback": "required",
"options": []
}
]
],
"xblock_id": "b1436dfc-5c65-11e7-b5b2-080027880ca6"
},
"output": "oa_rubric.html"
},
......@@ -1230,7 +1233,8 @@
},
"save_status": "This response has not been saved.",
"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"
},
......
openassessment/xblock/static/js/openassessment-lms.min.js
This source diff could not be displayed because it is too large. You can view the blob instead.
openassessment/xblock/static/js/openassessment-studio.min.js
This source diff could not be displayed because it is too large. You can view the blob instead.
openassessment/xblock/static/js/src/lms/oa_base.js
......@@ -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.
*/
getUsageID: function() {
......
openassessment/xblock/static/js/src/lms/oa_peer.js
......@@ -115,6 +115,9 @@ OpenAssessment.PeerView.prototype = {
// Install a click handler for collapse/expand
this.baseView.setUpCollapseExpand(sel);
// Install click handler for the preview button
this.baseView.bindLatexPreview(sel);
// Initialize the rubric
var rubricSelector = $(".peer-assessment--001__assessment", this.element);
if (rubricSelector.size() > 0) {
......
openassessment/xblock/static/js/src/lms/oa_response.js
......@@ -92,8 +92,6 @@ OpenAssessment.ResponseView.prototype = {
var handlePrepareUpload = function(eventData) { view.prepareUpload(eventData.target.files, uploadType); };
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);
this.textResponse = $(submit).attr('text_response');
......@@ -118,19 +116,7 @@ OpenAssessment.ResponseView.prototype = {
);
// Install click handler for the preview button
sel.find('.submission__preview').click(
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]]);
}
);
this.baseView.bindLatexPreview(sel);
// Install a click handler for the save button
sel.find('.file__upload').click(
......
openassessment/xblock/static/js/src/lms/oa_self.js
......@@ -58,6 +58,9 @@ OpenAssessment.SelfView.prototype = {
// Install a click handler for collapse/expand
this.baseView.setUpCollapseExpand(sel);
// Install click handler for the preview button
this.baseView.bindLatexPreview(sel);
// Initialize the rubric
var rubricSelector = $(".self-assessment--001__assessment", this.element);
if (rubricSelector.size() > 0) {
......
openassessment/xblock/static/sass/oa/utilities/_extends.scss
......@@ -153,6 +153,57 @@
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
// --------------------
......
openassessment/xblock/static/sass/oa/views/_oa-base.scss
......@@ -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 {
.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;
}
}
@extend %action-items
}
}
......@@ -708,6 +661,7 @@
// assessment form
.peer-assessment__assessment {
@extend %action-items;
// fields
.assessment__fields {
......@@ -775,6 +729,7 @@
// assessment form
.self-assessment__assessment {
@extend %action-items;
// fields
.assessment__fields {
......@@ -917,7 +872,6 @@
@extend %ui-subsection-content;
padding: ($baseline-v/2) ($baseline-h/4) $baseline-v ($baseline-h/4);
background: $color-decorative-quaternary;
border-radius: ($baseline-v/10);
list-style: none;
......@@ -1129,6 +1083,10 @@
margin-top: ($baseline-v/4);
}
.action--save {
@extend %action-button
}
.feedback {
@extend %no-list;
@extend %wipe-last-child;
......
scripts/render_templates.py
......@@ -99,6 +99,7 @@ def render_templates(root_dir, template_json):
for template_dict in template_json:
template = get_template(template_dict['template'])
context = parse_dates(template_dict['context'])
print "Rendering template: {}".format(template_dict['template'])
rendered = template.render(Context(context))
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