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

Commit

Permalink
Render template for board and menu on the server.
Browse files Browse the repository at this point in the history
  • Loading branch information
@itsjeyd
itsjeyd committed Nov 3, 2015
1 parent 273232b commit 06d0cbb
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 46 deletions.
46 changes: 45 additions & 1 deletion vectordraw/static/html/vectordraw.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,51 @@ <h2>{{ self.display_name }}</h2>
</div>
{% endif %}

<div id="vectordraw" />
<div id="vectordraw">
<div class="jxgboard" style="width: {{ self.width }}px; height: {{ self.height }}px;" />
<div class="menu">
<div class="controls">
<select>
{% for vector in self.get_vectors %}
<option value="vector-{{ forloop.counter0 }}">
{{ vector.description }}
</option>
{% endfor %}

{% for point in self.get_points %}
{% if not point.fixed %}
<option value="point-{{ forloop.counter0 }}">
{{ point.description }}
</option>
{% endif %}
{% endfor %}
</select>
<button class="add-vector">
{{ self.add_vector_label }}
</button>
<button class="reset">Reset</button>
<button class="undo" title="Undo"><span class="fa fa-undo" /></button>
<button class="redo" title="redo"><span class="fa fa-repeat" /></button>
</div>
{% if self.show_vector_properties %}
<div class="vector-properties">
<h3>{{ self.vector_properties_label }}</h3>
<div class="vector-prop-name">
name: <span class="value vector-prop-bold">-</span>
</div>
<div class="vector-prop-length">
length: <span class="value">-</span>
</div>
<div class="vector-prop-angle">
angle: <span class="value">-</span>&deg;
</div>
<div class="vector-prop-slope">
slope: <span class="value">-</span>
</div>
</div>
{% endif %}
</div>
</div>

<div class="vectordraw-status">
<span class="correctness icon-2x"></span>
Expand Down
67 changes: 23 additions & 44 deletions vectordraw/static/js/src/vectordraw.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,45 +92,7 @@ function VectorDrawXBlock(runtime, element, init_args) {
return settings;
};

VectorDraw.prototype.template = _.template([
'<div class="jxgboard" style="width:<%= width %>px; height:<%= height %>px;" />',
'<div class="menu">',
' <div class="controls">',
' <select>',
' <% vectors.forEach(function(vec, idx) { %>',
' <option value="vector-<%= idx %>"><%= vec.description %></option>',
' <% }) %>',
' <% points.forEach(function(point, idx) { if (!point.fixed) { %>',
' <option value="point-<%= idx %>"><%= point.description %></option>',
' <% }}) %>',
' </select>',
' <button class="add-vector"><%= add_vector_label %></button>',
' <button class="reset">Reset</button>',
' <button class="undo" title="Undo"><span class="fa fa-undo" /></button>',
' <button class="redo" title="redo"><span class="fa fa-repeat" /></button>',
' </div>',
' <% if (show_vector_properties) { %>',
' <div class="vector-properties">',
' <h3><%= vector_properties_label %></h3>',
' <div class="vector-prop-name">',
' name: <span class="value vector-prop-bold">-</span>',
' </div>',
' <div class="vector-prop-length">',
' length: <span class="value">-</span>',
' </div>',
' <div class="vector-prop-angle">',
' angle: <span class="value">-</span>&deg;',
' </div>',
' <div class="vector-prop-slope">',
' slope: <span class="value">-</span>',
' </div>',
' </div>',
' <% } %>',
'</div>'
].join('\n'));

VectorDraw.prototype.render = function() {
this.element.html(this.template(this.settings));
// Assign the jxgboard element a random unique ID,
// because JXG.JSXGraph.initBoard needs it.
this.element.find('.jxgboard').prop('id', _.uniqueId('jxgboard'));
Expand Down Expand Up @@ -172,16 +134,33 @@ function VectorDrawXBlock(runtime, element, init_args) {
}
}

this.settings.points.forEach(function(point, idx) {
if (point.render) {
this.renderPoint(idx);
var noOptionSelected = true;

function renderOrEnableOption(element, idx, type, board) {
if (element.render) {
if (type === 'point') {
board.renderPoint(idx);
} else {
board.renderVector(idx);
}
} else {
// Enable corresponding option in menu ...
var option = board.getMenuOption(type, idx);
option.prop('disabled', false);
// ... and select it if no option is currently selected
if (noOptionSelected) {
option.prop('selected', true);
noOptionSelected = false;
}
}
}

this.settings.points.forEach(function(point, idx) {
renderOrEnableOption(point, idx, 'point', this);
}, this);

this.settings.vectors.forEach(function(vec, idx) {
if (vec.render) {
this.renderVector(idx);
}
renderOrEnableOption(vec, idx, 'vector', this);
}, this);

this.board.on('down', this.onBoardDown.bind(this));
Expand Down
10 changes: 9 additions & 1 deletion vectordraw/vectordraw.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -271,7 +271,15 @@ def get_points(self):
"""
Load info about points for this exercise from JSON string specified by course author.
"""
return json.loads(self.points)
points = json.loads(self.points)
for point in points:
# If author did not specify whether point should be drawn in fixed location (True)
# or placed by student (False), we default to True;
# template needs this info to determine whether it should add option
# for selecting point to dropdown menu:
if 'fixed' not in point:
point['fixed'] = True
return points

@property
def get_expected_result(self):
Expand Down

0 comments on commit 06d0cbb

Please sign in to comment.