csfieldguide/templates/interactives/matrix-simplifier.html
{% extends interactive_mode_template %}
{% load i18n static svg %}
{% block interactive_html %}
<div class="container">
<h3 class='text-center'>{% trans "Matrix Simplifier" %}</h3>
<p class="text-center">
{% blocktrans %}
This interactive combines multiple matrix transformations to just one matrix that can apply each transformation with one operation.<br>
Try dragging the matrices and vectors below to change their order. Does this affect the output?
{% endblocktrans %}
</p>
<div class="row mb-5">
<div class="col-md-6 col-sm-12 text-center mb-3">
<h5>{% trans "Matrices" %}</h5>
<div id="matrix-input-container" class="containers">
<div class="draggable content border rounded m-1 center-block">
<span class="close move-eqtn" aria-label="Move">
{% svg 'matrix-simplifier/icons8-drag-reorder' %}
<div class="handle cover"></div>
</span>
<button id="close-matrix-0" type="button" class="close dismiss-eqtn invisible" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<button id="edit-matrix-0" type="button" class="close edit-eqtn invisible" aria-label="Edit" data-toggle="modal" data-target="#matrix-modal">
{% svg 'matrix-simplifier/icons8-pencil' %}
</button>
<div id="matrix-0" class="matrix invisible" data-matrix-order=0>
\[
\begin{bmatrix}
cos(45) & 0 & sin(45) \\
0 & 1 & 0 \\
-sin(45) & 0 & cos(45) \\
\end{bmatrix}
\]
</div>
</div>
<div class="draggable content border rounded m-1 center-block">
<span class="close move-eqtn" aria-label="Move">
{% svg 'matrix-simplifier/icons8-drag-reorder' %}
<div class="handle cover"></div>
</span>
<button id="close-matrix-1" type="button" class="close dismiss-eqtn invisible" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<button id="edit-matrix-1" type="button" class="close edit-eqtn invisible" aria-label="Edit" data-toggle="modal" data-target="#matrix-modal">
{% svg 'matrix-simplifier/icons8-pencil' %}
</button>
<div id="matrix-1" class="matrix invisible" data-matrix-order=1>
\[
\begin{bmatrix}
10 & 0 & 0 \\
0 & 10 & 0 \\
0 & 0 & 10 \\
\end{bmatrix}
\]
</div>
</div>
</div>
<div class="d-flex justify-content-between btn-container">
<button id="add-matrix-btn" type="button" class="btn btn-primary d-none" data-toggle="modal" data-target="#matrix-modal">{% trans "Add matrix" %}</button>
<button id="remove-all-matrices" type="button" class="btn btn-danger d-none">{% trans "Remove all matrices" %}</button>
</div>
</div>
<div class="col-md-6 col-sm-12 text-center mb-3">
<h5>{% trans "Vectors" %}</h5>
<div id="vector-input-container" class="containers">
<div class="draggable content border rounded m-1 center-block">
<span class="close move-eqtn" aria-label="Move">
{% svg 'matrix-simplifier/icons8-drag-reorder' %}
<div class="handle cover"></div>
</span>
<button id="close-vector-0" type="button" class="close dismiss-eqtn invisible" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<button id="edit-vector-0" type="button" class="close edit-eqtn invisible" aria-label="Edit" data-toggle="modal" data-target="#vector-modal">
{% svg 'matrix-simplifier/icons8-pencil' %}
</button>
<div id="vector-0" class="vector invisible" data-vector-order=0>
\[
\begin{bmatrix}
10 \\
0 \\
0 \\
\end{bmatrix}
\]
</div>
</div>
</div>
<div class="d-flex justify-content-between btn-container">
<button id="add-vector-btn" type="button" class="btn btn-primary d-none" data-toggle="modal" data-target="#vector-modal">{% trans "Add vector" %}</button>
<button id="remove-all-vectors" type="button" class="btn btn-danger d-none">{% trans "Remove all vectors" %}</button>
</div>
</div>
</div>
<div class="row">
<h5 class="col-12 text-center">{% trans "Result" %}</h5>
</div>
<div class="row justify-content-center mb-3">
<div id="output-container" class="col-12 text-center invisible">
<div class="result-step mb-3">
\[
\begin{bmatrix}
x^\prime \\
y^\prime \\
z^\prime \\
\end{bmatrix}
\] =
<div id="matrix-output" class="d-inline"></div>
\[
\begin{bmatrix}
x \\
y \\
z \\
\end{bmatrix}
\] +
<div id="vector-output" class="d-inline"></div>
</div>
</div>
</div>
<div class="row justify-content-center mb-1">
<small class="text-muted text-center">{% trans "For convenience this code can be pasted into the Scene Editor interactive." %}</small>
</div>
<div class="row justify-content-center mb-2">
<textarea id="code-to-copy" class="form-control col-md-4 col-sm-12" rows="1" readonly></textarea>
</div>
<div class="row justify-content-center mb-5">
<button id="copy-eqtn" type="button" class="btn btn-primary col-md-2 col-sm-6 d-none" data-toggle="tooltip" data-placement="bottom" title="{% trans 'Copy to clipboard' %}">{% trans "Copy to clipboard" %}</button>
</div>
<div class="row justify-content-center">
<button id="remove-all" type="button" class="btn btn-danger btn-sm col-md-2 col-sm-6 d-none">{% trans "Remove all" %}</button>
</div>
<!-- Modal for adding a matrix -->
<div id="matrix-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 id="matrix-modal-title" class="modal-title">{% trans "Add a matrix" %}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="matrix-row">
<input class="form-control text-center" id="matrix-row-0-col-0" value=1>
<input class="form-control text-center" id="matrix-row-0-col-1" value=0>
<input class="form-control text-center" id="matrix-row-0-col-2" value=0>
</div>
<div class="matrix-row">
<input class="form-control text-center" id="matrix-row-1-col-0" value=0>
<input class="form-control text-center" id="matrix-row-1-col-1" value=1>
<input class="form-control text-center" id="matrix-row-1-col-2" value=0>
</div>
<div class="matrix-row">
<input class="form-control text-center" id="matrix-row-2-col-0" value=0>
<input class="form-control text-center" id="matrix-row-2-col-1" value=0>
<input class="form-control text-center" id="matrix-row-2-col-2" value=1>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary close-modal" data-dismiss="modal">{% trans "Close" %}</button>
<button id="add-matrix-from-input" type="button" class="btn btn-primary add-from-input" data-dismiss="modal">{% trans "Add matrix" %}</button>
<button id="update-matrix" type="button" class="btn btn-primary add-from-input d-none" data-dismiss="modal">{% trans "Update matrix" %}</button>
</div>
</div>
</div>
</div>
<!-- Modal for adding a vector -->
<div id="vector-modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 id="vector-modal-title" class="modal-title">{% trans "Add a vector" %}</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="matrix-row">
<input class="form-control text-center" id="vector-row-0" value=0>
</div>
<div class="matrix-row">
<input class="form-control text-center" id="vector-row-1" value=0>
</div>
<div class="matrix-row">
<input class="form-control text-center" id="vector-row-2" value=0>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary close-modal" data-dismiss="modal">{% trans "Close" %}</button>
<button id="add-vector-from-input" type="button" class="btn btn-primary add-from-input" data-dismiss="modal">{% trans "Add vector" %}</button>
<button id="update-vector" type="button" class="btn btn-primary add-from-input d-none" data-dismiss="modal">{% trans "Update vector" %}</button>
</div>
</div>
</div>
</div>
<!-- helper divs so we can access the SVG in the JS file -->
<div id="pencil-svg-helper" class="d-none">
{% svg 'matrix-simplifier/icons8-pencil' %}
</div>
<div id="dragger-svg-helper" class="d-none">
{% svg 'matrix-simplifier/icons8-drag-reorder' %}
</div>
</div>
{% endblock interactive_html %}
{% block interactive_css %}
<link rel="stylesheet" href="{% static 'interactives/matrix-simplifier/css/matrix-simplifier.css' %}">
{% endblock interactive_css %}
{% block interactive_js %}
<script type="text/javascript" src="{% static 'interactives/matrix-simplifier/js/matrix-simplifier.js' %}"></script>
{% endblock interactive_js %}