diff --git a/common/lib/capa/capa/inputtypes.py b/common/lib/capa/capa/inputtypes.py
index 466adcbf01..41b98eacae 100644
--- a/common/lib/capa/capa/inputtypes.py
+++ b/common/lib/capa/capa/inputtypes.py
@@ -624,3 +624,20 @@ def imageinput(element, value, status, render_template, msg=''):
         }
     html = render_template("imageinput.html", context)
     return etree.XML(html)
+
+
+#-----------------------------------------------------------------------------
+@register_render_function
+def crystallography(element, value, status, render_template, msg=''):
+    eid = element.get('id')
+    height = element.get('height')
+    width = element.get('width')
+    display_file = element.get('display_file')
+    context = {
+        'id': eid,
+        'width': width,
+        'height': height,
+        'display_file': display_file,
+        }
+    html = render_template("crystallography.html", context)
+    return etree.XML(html)
\ No newline at end of file
diff --git a/common/lib/capa/capa/templates/crystallography.html b/common/lib/capa/capa/templates/crystallography.html
new file mode 100644
index 0000000000..104092a2ca
--- /dev/null
+++ b/common/lib/capa/capa/templates/crystallography.html
@@ -0,0 +1,11 @@
+
+
+<section id="cryst_${id}" class="cryst" >
+ <div id="holder" style="width:${width};height:${height}"></div>
+    <div class="script_placeholder" data-src="/static/js/jquery.js"></div>
+    <div class="script_placeholder" data-src="/static/js/raphael.js"></div><div class="script_placeholder" data-src="/static/js/sylvester.js"></div><div class="script_placeholder" data-src="/static/js/underscore-min.js"></div>
+    <div class="script_placeholder" data-src="/static/js/${display_file}"></div>
+  
+   <input type="hidden" name="answer_${id}" id="answer_${id}" class="asnwer"/>
+
+</section>