Merge pull request #5230 from edx/markhoeber-doc913

WIP: edXML Doc Draft

docs/en_us/olx/Makefile

+# Makefile for Sphinx documentation
+#
+
+# You can set these variables from the command line.
+SPHINXOPTS    ?=
+SPHINXBUILD   ?= sphinx-build
+PAPER         ?=
+BUILDDIR      ?= build
+
+# User-friendly check for sphinx-build
+ifeq ($(shell which $(SPHINXBUILD) >/dev/null 2>&1; echo $$?), 1)
+$(error The '$(SPHINXBUILD)' command was not found. Make sure you have Sphinx installed, then set the SPHINXBUILD environment variable to point to the full path of the '$(SPHINXBUILD)' executable. Alternatively you can add the directory with the executable to your PATH. If you don't have Sphinx installed, grab it from http://sphinx-doc.org/)
+endif
+
+Q_FLAG        =
+
+ifeq ($(quiet), true)
+Q_FLAG = -Q
+endif
+
+# Internal variables.
+PAPEROPT_a4     = -D latex_paper_size=a4
+PAPEROPT_letter = -D latex_paper_size=letter
+ALLSPHINXOPTS   = $(Q_FLAG) -d $(BUILDDIR)/doctrees -c source $(PAPEROPT_$(PAPER)) $(SPHINXOPTS) source
+# the i18n builder cannot share the environment and doctrees with the others
+I18NSPHINXOPTS  = $(PAPEROPT_$(PAPER)) $(SPHINXOPTS) source
+
+.PHONY: help clean html dirhtml singlehtml pickle json htmlhelp qthelp devhelp epub latex latexpdf text man changes linkcheck doctest gettext
+
+help:
+	@echo "Please use \`make <target>' where <target> is one of"
+	@echo "  html       to make standalone HTML files"
+	@echo "  dirhtml    to make HTML files named index.html in directories"
+	@echo "  singlehtml to make a single large HTML file"
+	@echo "  pickle     to make pickle files"
+	@echo "  json       to make JSON files"
+	@echo "  htmlhelp   to make HTML files and a HTML help project"
+	@echo "  qthelp     to make HTML files and a qthelp project"
+	@echo "  devhelp    to make HTML files and a Devhelp project"
+	@echo "  epub       to make an epub"
+	@echo "  latex      to make LaTeX files, you can set PAPER=a4 or PAPER=letter"
+	@echo "  latexpdf   to make LaTeX files and run them through pdflatex"
+	@echo "  text       to make text files"
+	@echo "  man        to make manual pages"
+	@echo "  texinfo    to make Texinfo files"
+	@echo "  info       to make Texinfo files and run them through makeinfo"
+	@echo "  gettext    to make PO message catalogs"
+	@echo "  changes    to make an overview of all changed/added/deprecated items"
+	@echo "  linkcheck  to check all external links for integrity"
+	@echo "  doctest    to run all doctests embedded in the documentation (if enabled)"
+
+clean:
+	-rm -rf $(BUILDDIR)/*
+
+html:
+	$(SPHINXBUILD) -b html $(ALLSPHINXOPTS) $(BUILDDIR)/html
+	@echo
+	@echo "Build finished. The HTML pages are in $(BUILDDIR)/html."
+
+dirhtml:
+	$(SPHINXBUILD) -b dirhtml $(ALLSPHINXOPTS) $(BUILDDIR)/dirhtml
+	@echo
+	@echo "Build finished. The HTML pages are in $(BUILDDIR)/dirhtml."
+
+singlehtml:
+	$(SPHINXBUILD) -b singlehtml $(ALLSPHINXOPTS) $(BUILDDIR)/singlehtml
+	@echo
+	@echo "Build finished. The HTML page is in $(BUILDDIR)/singlehtml."
+
+pickle:
+	$(SPHINXBUILD) -b pickle $(ALLSPHINXOPTS) $(BUILDDIR)/pickle
+	@echo
+	@echo "Build finished; now you can process the pickle files."
+
+json:
+	$(SPHINXBUILD) -b json $(ALLSPHINXOPTS) $(BUILDDIR)/json
+	@echo
+	@echo "Build finished; now you can process the JSON files."
+
+htmlhelp:
+	$(SPHINXBUILD) -b htmlhelp $(ALLSPHINXOPTS) $(BUILDDIR)/htmlhelp
+	@echo
+	@echo "Build finished; now you can run HTML Help Workshop with the" \
+	      ".hhp project file in $(BUILDDIR)/htmlhelp."
+
+qthelp:
+	$(SPHINXBUILD) -b qthelp $(ALLSPHINXOPTS) $(BUILDDIR)/qthelp
+	@echo
+	@echo "Build finished; now you can run "qcollectiongenerator" with the" \
+	      ".qhcp project file in $(BUILDDIR)/qthelp, like this:"
+	@echo "# qcollectiongenerator $(BUILDDIR)/qthelp/edXDocs.qhcp"
+	@echo "To view the help file:"
+	@echo "# assistant -collectionFile $(BUILDDIR)/qthelp/edXDocs.qhc"
+
+devhelp:
+	$(SPHINXBUILD) -b devhelp $(ALLSPHINXOPTS) $(BUILDDIR)/devhelp
+	@echo
+	@echo "Build finished."
+	@echo "To view the help file:"
+	@echo "# mkdir -p $$HOME/.local/share/devhelp/edXDocs"
+	@echo "# ln -s $(BUILDDIR)/devhelp $$HOME/.local/share/devhelp/edXDocs"
+	@echo "# devhelp"
+
+epub:
+	$(SPHINXBUILD) -b epub $(ALLSPHINXOPTS) $(BUILDDIR)/epub
+	@echo
+	@echo "Build finished. The epub file is in $(BUILDDIR)/epub."
+
+latex:
+	$(SPHINXBUILD) -b latex $(ALLSPHINXOPTS) $(BUILDDIR)/latex
+	@echo
+	@echo "Build finished; the LaTeX files are in $(BUILDDIR)/latex."
+	@echo "Run \`make' in that directory to run these through (pdf)latex" \
+	      "(use \`make latexpdf' here to do that automatically)."
+
+latexpdf:
+	$(SPHINXBUILD) -b latex $(ALLSPHINXOPTS) $(BUILDDIR)/latex
+	@echo "Running LaTeX files through pdflatex..."
+	$(MAKE) -C $(BUILDDIR)/latex all-pdf
+	@echo "pdflatex finished; the PDF files are in $(BUILDDIR)/latex."
+
+text:
+	$(SPHINXBUILD) -b text $(ALLSPHINXOPTS) $(BUILDDIR)/text
+	@echo
+	@echo "Build finished. The text files are in $(BUILDDIR)/text."
+
+man:
+	$(SPHINXBUILD) -b man $(ALLSPHINXOPTS) $(BUILDDIR)/man
+	@echo
+	@echo "Build finished. The manual pages are in $(BUILDDIR)/man."
+
+texinfo:
+	$(SPHINXBUILD) -b texinfo $(ALLSPHINXOPTS) $(BUILDDIR)/texinfo
+	@echo
+	@echo "Build finished. The Texinfo files are in $(BUILDDIR)/texinfo."
+	@echo "Run \`make' in that directory to run these through makeinfo" \
+	      "(use \`make info' here to do that automatically)."
+
+info:
+	$(SPHINXBUILD) -b texinfo $(ALLSPHINXOPTS) $(BUILDDIR)/texinfo
+	@echo "Running Texinfo files through makeinfo..."
+	make -C $(BUILDDIR)/texinfo info
+	@echo "makeinfo finished; the Info files are in $(BUILDDIR)/texinfo."
+
+gettext:
+	$(SPHINXBUILD) -b gettext $(I18NSPHINXOPTS) $(BUILDDIR)/locale
+	@echo
+	@echo "Build finished. The message catalogs are in $(BUILDDIR)/locale."
+
+changes:
+	$(SPHINXBUILD) -b changes $(ALLSPHINXOPTS) $(BUILDDIR)/changes
+	@echo
+	@echo "The overview file is in $(BUILDDIR)/changes."
+
+linkcheck:
+	$(SPHINXBUILD) -b linkcheck $(ALLSPHINXOPTS) $(BUILDDIR)/linkcheck
+	@echo
+	@echo "Link check complete; look for any errors in the above output " \
+	      "or in $(BUILDDIR)/linkcheck/output.txt."
+
+doctest:
+	$(SPHINXBUILD) -b doctest $(ALLSPHINXOPTS) $(BUILDDIR)/doctest
+	@echo "Testing of doctests in the sources finished, look at the " \
+	      "results in $(BUILDDIR)/doctest/output.txt."

docs/en_us/olx/source/Images/AI_ScoredResponse.png

+../../../course_authors/source/Images/AI_ScoredResponse.png
\ No newline at end of file

docs/en_us/olx/source/Images/AdditionalFeedback.png

+../../../course_authors/source/Images/AdditionalFeedback.png
\ No newline at end of file

docs/en_us/olx/source/Images/AdvancedComponent.png

+../../../course_authors/source/Images/AdvancedComponent.png
\ No newline at end of file

docs/en_us/olx/source/Images/AnnotationExample.png

+../../../course_authors/source/Images/AnnotationExample.png
\ No newline at end of file

docs/en_us/olx/source/Images/CITL_AssmtTypes.png

+../../../course_authors/source/Images/CITL_AssmtTypes.png
\ No newline at end of file

docs/en_us/olx/source/Images/CITL_SA_Rubric.png

+../../../course_authors/source/Images/CITL_SA_Rubric.png
\ No newline at end of file

docs/en_us/olx/source/Images/CITLsample.png

+../../../course_authors/source/Images/CITLsample.png
\ No newline at end of file

docs/en_us/olx/source/Images/CheckboxExample.png

+../../../course_authors/source/Images/CheckboxExample.png
\ No newline at end of file

docs/en_us/olx/source/Images/ChemicalEquationExample.png

+../../../course_authors/source/Images/ChemicalEquationExample.png
\ No newline at end of file

docs/en_us/olx/source/Images/CircuitSchematicExample.png

+../../../course_authors/source/Images/CircuitSchematicExample.png
\ No newline at end of file

docs/en_us/olx/source/Images/CustomPythonExample.png

+../../../course_authors/source/Images/CustomPythonExample.png
\ No newline at end of file

docs/en_us/olx/source/Images/DragAndDropProblem.png

+../../../course_authors/source/Images/DragAndDropProblem.png
\ No newline at end of file

docs/en_us/olx/source/Images/DropdownExample.png

+../../../course_authors/source/Images/DropdownExample.png
\ No newline at end of file

docs/en_us/olx/source/Images/FeedbackNotAvailable.png

+../../../course_authors/source/Images/FeedbackNotAvailable.png
\ No newline at end of file

docs/en_us/olx/source/Images/FetchingNextSubmission.png

+../../../course_authors/source/Images/FetchingNextSubmission.png
\ No newline at end of file

docs/en_us/olx/source/Images/GeneExplorer.png

+../../../course_authors/source/Images/GeneExplorer.png
\ No newline at end of file

docs/en_us/olx/source/Images/GoogleHangout_WithPeople.png

+../../../course_authors/source/Images/GoogleHangout_WithPeople.png
\ No newline at end of file

docs/en_us/olx/source/Images/IFrame_1.png

+../../../course_authors/source/Images/IFrame_1.png
\ No newline at end of file

docs/en_us/olx/source/Images/IFrame_2.png

+/Users/markhoeber/Documents/edx/edx-platform/docs/en_us/course_authors/source/Images/IFrame_2.png
\ No newline at end of file

docs/en_us/olx/source/Images/IFrame_3.png

+/Users/markhoeber/Documents/edx/edx-platform/docs/en_us/course_authors/source/Images/IFrame_3.png
\ No newline at end of file

docs/en_us/olx/source/Images/IFrame_4.png

+/Users/markhoeber/Documents/edx/edx-platform/docs/en_us/course_authors/source/Images/IFrame_4.png
\ No newline at end of file

docs/en_us/olx/source/Images/ImageMappedInputExample.png

+../../../course_authors/source/Images/ImageMappedInputExample.png
\ No newline at end of file

docs/en_us/olx/source/Images/JavaScriptInputExample.png

+../../../course_authors/source/Images/JavaScriptInputExample.png
\ No newline at end of file

docs/en_us/olx/source/Images/LTIExample.png

+../../../course_authors/source/Images/LTIExample.png
\ No newline at end of file

docs/en_us/olx/source/Images/LTIPolicyKey.png

+../../../course_authors/source/Images/LTIPolicyKey.png
\ No newline at end of file

docs/en_us/olx/source/Images/Math5.png

+../../../course_authors/source/Images/Math5.png
\ No newline at end of file

docs/en_us/olx/source/Images/MathExpressionInputExample.png

+../../../course_authors/source/Images/MathExpressionInputExample.png
\ No newline at end of file

docs/en_us/olx/source/Images/MathJax_HTML.png

+../../../course_authors/source/Images/MathJax_HTML.png
\ No newline at end of file

docs/en_us/olx/source/Images/MathJax_Problem.png

+../../../course_authors/source/Images/MathJax_Problem.png
\ No newline at end of file

docs/en_us/olx/source/Images/Molecule_Editor.png

+../../../course_authors/source/Images/Molecule_Editor.png
\ No newline at end of file

docs/en_us/olx/source/Images/MultimpleChoiceExample.png

+../../../course_authors/source/Images/MultimpleChoiceExample.png
\ No newline at end of file

docs/en_us/olx/source/Images/MultimpleChoice_NumericalInput.png

+../../../course_authors/source/Images/MultimpleChoice_NumericalInput.png
\ No newline at end of file

docs/en_us/olx/source/Images/MultipleChoiceExample.png

+/Users/markhoeber/Documents/edx/edx-platform/docs/en_us/course_authors/source/Images/MultipleChoiceExample.png
\ No newline at end of file

docs/en_us/olx/source/Images/MultipleChoice_NumericalInput.png

+/Users/markhoeber/Documents/edx/edx-platform/docs/en_us/course_authors/source/Images/MultipleChoice_NumericalInput.png
\ No newline at end of file

docs/en_us/olx/source/Images/NoMoreSubmissions.png

+../../../course_authors/source/Images/NoMoreSubmissions.png
\ No newline at end of file

docs/en_us/olx/source/Images/NumbericalInput_Complex.png

+../../../course_authors/source/Images/NumbericalInput_Complex.png
\ No newline at end of file

docs/en_us/olx/source/Images/NumericalInput_Complex.png

+/Users/markhoeber/Documents/edx/edx-platform/docs/en_us/course_authors/source/Images/NumericalInput_Complex.png
\ No newline at end of file

docs/en_us/olx/source/Images/ORAComponentEditor.png

+../../../course_authors/source/Images/ORAComponentEditor.png
\ No newline at end of file

docs/en_us/olx/source/Images/ORA_Component.png

+../../../course_authors/source/Images/ORA_Component.png
\ No newline at end of file

docs/en_us/olx/source/Images/ORA_DuplicateWarning.png

+../../../course_authors/source/Images/ORA_DuplicateWarning.png
\ No newline at end of file

docs/en_us/olx/source/Images/ORA_ProblemName1.png

+../../../course_authors/source/Images/ORA_ProblemName1.png
\ No newline at end of file

docs/en_us/olx/source/Images/ORA_Prompt.png

+../../../course_authors/source/Images/ORA_Prompt.png
\ No newline at end of file

docs/en_us/olx/source/Images/ORA_Rubric.png

+../../../course_authors/source/Images/ORA_Rubric.png
\ No newline at end of file

docs/en_us/olx/source/Images/ORA_Settings.png

+/Users/markhoeber/Documents/edx/edx-platform/docs/en_us/course_authors/source/Images/ORA_Settings.png
\ No newline at end of file

docs/en_us/olx/source/Images/ORA_Tasks.png

+../../../course_authors/source/Images/ORA_Tasks.png
\ No newline at end of file

docs/en_us/olx/source/Images/OpenEndedConsole_NewSubmissions.png

+../../../course_authors/source/Images/OpenEndedConsole_NewSubmissions.png
\ No newline at end of file

docs/en_us/olx/source/Images/OpenEndedPanel.png

+../../../course_authors/source/Images/OpenEndedPanel.png
\ No newline at end of file

docs/en_us/olx/source/Images/PA_StaffDebug_Location.png

+../../../course_authors/source/Images/PA_StaffDebug_Location.png
\ No newline at end of file

docs/en_us/olx/source/Images/PGI_CompEditor_Settings.png

+../../../course_authors/source/Images/PGI_CompEditor_Settings.png
\ No newline at end of file

docs/en_us/olx/source/Images/PGI_Single.png

+../../../course_authors/source/Images/PGI_Single.png
\ No newline at end of file

docs/en_us/olx/source/Images/Peer_ScoredResponse.png

+../../../course_authors/source/Images/Peer_ScoredResponse.png
\ No newline at end of file

docs/en_us/olx/source/Images/Periodic_Table.png

+../../../course_authors/source/Images/Periodic_Table.png
\ No newline at end of file

docs/en_us/olx/source/Images/PollExample.png

+../../../course_authors/source/Images/PollExample.png
\ No newline at end of file

docs/en_us/olx/source/Images/ProbCompButton_Dropdown.png

+../../../course_authors/source/Images/ProbCompButton_Dropdown.png
\ No newline at end of file

docs/en_us/olx/source/Images/ProbCompButton_Explanation.png

+../../../course_authors/source/Images/ProbCompButton_Explanation.png
\ No newline at end of file

docs/en_us/olx/source/Images/ProbCompButton_MultChoice.png

+/Users/markhoeber/Documents/edx/edx-platform/docs/en_us/course_authors/source/Images/ProbCompButton_MultChoice.png
\ No newline at end of file

docs/en_us/olx/source/Images/ProbCompButton_MultipleChoice.png

+../../../course_authors/source/Images/ProbCompButton_MultipleChoice.png
\ No newline at end of file

docs/en_us/olx/source/Images/ProbCompButton_NumInput.png

+../../../course_authors/source/Images/ProbCompButton_NumInput.png
\ No newline at end of file

docs/en_us/olx/source/Images/ProbCompButton_TextInput.png

+../../../course_authors/source/Images/ProbCompButton_TextInput.png
\ No newline at end of file

docs/en_us/olx/source/Images/ProbComponent_CheckboxIcon.png

+../../../course_authors/source/Images/ProbComponent_Checkboxicon.png
\ No newline at end of file

docs/en_us/olx/source/Images/ProblemList-DemoCourse.png

+../../../course_authors/source/Images/ProblemList-DemoCourse.png
\ No newline at end of file

docs/en_us/olx/source/Images/ProblemWithAdaptiveHintExample.png

+../../../course_authors/source/Images/ProblemWithAdaptiveHintExample.png
\ No newline at end of file

docs/en_us/olx/source/Images/ProblemWrittenInLaTex.png

+../../../course_authors/source/Images/ProblemWrittenInLaTex.png
\ No newline at end of file

docs/en_us/olx/source/Images/ProblemsYouHaveSubmitted.png

+../../../course_authors/source/Images/ProblemsYouHaveSubmitted.png
\ No newline at end of file

docs/en_us/olx/source/Images/ProteinBuilder.png

+/Users/markhoeber/Documents/edx/edx-platform/docs/en_us/course_authors/source/Images/ProteinBuilder.png
\ No newline at end of file

docs/en_us/olx/source/Images/ResponseToGrade.png

+../../../course_authors/source/Images/ResponseToGrade.png
\ No newline at end of file

docs/en_us/olx/source/Images/TextInputExample.png

+../../../course_authors/source/Images/TextInputExample.png
\ No newline at end of file

docs/en_us/olx/source/Images/ThreeAssmts_NoResponse.png

+../../../course_authors/source/Images/ThreeAssmts_NoResponse.png
\ No newline at end of file

docs/en_us/olx/source/Images/VitalSource.png

+../../../course_authors/source/Images/VitalSource.png
\ No newline at end of file

docs/en_us/olx/source/Images/WordCloudExample.png

+../../../course_authors/source/Images/WordCloudExample.png
\ No newline at end of file

docs/en_us/olx/source/Images/ZoomingImage_Modified.png

+../../../course_authors/source/Images/ZoomingImage_Modified.png
\ No newline at end of file

docs/en_us/olx/source/Images/Zooming_Image.png

+../../../course_authors/source/Images/Zooming_Image.png
\ No newline at end of file

docs/en_us/olx/source/Images/external-grader-correct.png

+../../../course_authors/source/Images/external-grader-correct.png
\ No newline at end of file

docs/en_us/olx/source/Images/external-grader-incorrect.png

+../../../course_authors/source/Images/external-grader-incorrect.png
\ No newline at end of file

docs/en_us/olx/source/Images/google_login.png

+../../../course_authors/source/Images/google_login.png
\ No newline at end of file

docs/en_us/olx/source/Images/hangout_static_page.png

+../../../course_authors/source/Images/hangout_static_page.png
\ No newline at end of file

docs/en_us/olx/source/Images/hangout_unit.png

+../../../course_authors/source/Images/hangout_unit.png
\ No newline at end of file

docs/en_us/olx/source/Images/image-modal-window.png

+../../../course_authors/source/Images/image-modal-window.png
\ No newline at end of file

docs/en_us/olx/source/Images/image-modal-zoomed.png

+../../../course_authors/source/Images/image-modal-zoomed.png
\ No newline at end of file

docs/en_us/olx/source/Images/image-modal.png

+../../../course_authors/source/Images/image-modal.png
\ No newline at end of file

docs/en_us/olx/source/Images/image-modeal-zoomed.png

+/Users/markhoeber/Documents/edx/edx-platform/docs/en_us/course_authors/source/Images/image-modeal-zoomed.png
\ No newline at end of file

docs/en_us/olx/source/Images/image292.png

+../../../course_authors/source/Images/image292.png
\ No newline at end of file

docs/en_us/olx/source/Images/multiple-choice-shuffle-1.png

+/Users/markhoeber/Documents/edx/edx-platform/docs/en_us/course_authors/source/Images/multiple-choice-shuffle-1.png
\ No newline at end of file

docs/en_us/olx/source/Images/multiple-choice-shuffle-2.png

+/Users/markhoeber/Documents/edx/edx-platform/docs/en_us/course_authors/source/Images/multiple-choice-shuffle-2.png
\ No newline at end of file

docs/en_us/olx/source/about/index.rst

+.. _The Course About Pages:
+
+#################################
+The Course About Pages
+#################################
+
+Use the chapters in this section to create the information prospective students
+will see about your course.
+
+.. toctree::
+   :maxdepth: 2
+
+   overview
+   short-description
\ No newline at end of file

docs/en_us/olx/source/about/overview.rst

+.. _Course Overview:
+
+#################################
+Course Overview
+#################################
+
+Each course must have an overview page. Students see the overview page when
+searching and registering for the course.
+
+*********************************************
+Create the Overview File
+*********************************************
+
+You create an HTML file called ``overview.html`` in the ``overview`` directory.
+
+*********************************************
+Overview Sections
+*********************************************
+
+The ``overview.html`` must contain specific sections. 
+
+Each section is wrapped in ``section`` tags. The value of the ``class``
+attribute specifies what the section is for and how it is displayed to
+students. Within the ``section`` tags, you use valid HTML.
+
+The overview must contain sections named the following:
+
+* ``about``
+* ``prerequisites``
+* ``course-staff``
+* ``teacher``
+* ``faq``
+
+
+.. _A Template For Course Overview:
+
+************************************************
+ A Template For Your Course Overview
+************************************************
+  
+Replace the placeholders in the following template with your information.
+
+.. code-block:: html
+
+  <section class="about">
+    <h2>About This Course</h2>
+    <p>Include your long course description here. The long course description
+      should contain 150-400 words.</p>
+    <p>This is paragraph 2 of the long course description. Add more paragraphs
+      as needed. Make sure to enclose them in paragraph tags.</p>
+  <section>
+  <section class="prerequisites">
+    <h2>Prerequisites</h2>
+    <p>Add information about class prerequisites here.</p>
+  </section>
+  <section class="course-staff">
+    <h2>Course Staff</h2>
+    <article class="teacher">
+      <div class="teacher-image">
+        <!-- Replace the path below with the path to your faculty image. -->
+        <img src="/c4x/edX/edX101/asset/Placeholder_FacultyImage.jpg"
+          align="left" style="margin:0 20 px 0"/>
+      </div>
+      <h3>Staff Member</h3>
+      <p>Biography of instructor/staff member</p>
+    </article>
+    <article class="teacher">
+      <div class="teacher-image">
+        <img src="/c4x/edX/edX101/asset/Placeholder_FalcutyImage.jpg"/>
+      </div>
+      <h3>Staff Member Name</h3>
+      <p>Biography of instructor/staff member</p>
+    </article>
+  </section>
+  <section class="faq">
+    <section class="responses">
+      <h2>Frequently Asked Questions</h2>
+      <article class="response">
+        <h3>Do I need to buy a textbook?</h3>
+        <p>No, a free online version of Chemistry: Principles, Patterns, and
+          Applications, First Edition by Bruce Averill and Patricia Eldredge
+          will be available, though you can purchase a printed version
+          (published by FlatWorld Knowledge) if you'd like.</p>
+      </article>
+      <article class="response">
+        <h3>Question 2?</h3>
+        <p>Answer 2.</p>
+      </article>
+    </section>
+  </section>

docs/en_us/olx/source/about/short-description.rst

+.. _Short Description:
+
+#################################
+Short Description
+#################################
+
+Optionally, you can define a short description for your course.
+
+Students see the short description when they move their cursors over the course
+image in the catalog.
+
+*********************************************
+Create the Short Description File
+*********************************************
+
+You create an HTML file called ``short_description.html`` in the ``overview``
+directory.
+
+The short description is limited to 150 characters.
+
+Within that limit, you can add any text and HTML markup to the short
+description file within that.
\ No newline at end of file

docs/en_us/olx/source/advanced-components/annotation.rst

+.. include:: ../../../shared/exercises_tools/annotation.rst
+

docs/en_us/olx/source/advanced-components/index.rst

+.. _Advanced Components:
+
+#################################
+Advanced Components
+#################################
+
+Use the chapters in this section to create advanced course components.
+
+.. toctree::
+   :maxdepth: 2
+
+   annotation
+   lti_component
+   open_response_assessment
+   word_cloud
\ No newline at end of file

docs/en_us/olx/source/advanced-components/lti_component.rst

+.. include:: ../../../shared/exercises_tools/lti_component.rst
+

docs/en_us/olx/source/advanced-components/open_response_assessment.rst

+.. include:: ../../../shared/exercises_tools/open_response_assessment.rst
+

docs/en_us/olx/source/advanced-components/word_cloud.rst

+.. include:: ../../../shared/exercises_tools/word_cloud.rst
+

docs/en_us/olx/source/assets/assets.rst

+.. _Course Assets:
+
+#################################
+Course Assets
+#################################
+
+You must put all assets, or files that support your course, in the ``static``
+directory. Assets include any image files, textbooks, handouts, and supporting
+JavaScript files.
+
+You must also define the asset in the assets policy file.  See :ref:`Course
+Asset Policy` for more information.
\ No newline at end of file

docs/en_us/olx/source/change_log.rst

+############
+Change Log
+############
+       
+*****************
+September, 2014
+*****************
+
+.. list-table::
+   :widths: 10 70
+   :header-rows: 1
+
+   * - Date
+     - Change
+   * - 09/30/14
+     - Release of the *Alpha* version of this document.
+

docs/en_us/olx/source/components/discussion-components.rst

+#################################
+Discussion Components
+#################################
+
+You can add inline discussion components to a vertical, or unit, in your
+course.
+
+See:
+
+* `Create the XML File for a Discussion Component`_
+* `Discussion Component XML File Elements`_
+* `discussion Element Attributes`_
+* `Example Discussion Component XML File`_
+
+**********************************************
+Create the XML File for a Discussion Component
+**********************************************
+
+You create an XML file in the ``discussion`` directory for each inline
+discussion component in your course.
+
+The name of the XML file must match the value of the @url_name attribute of the
+``discussion`` element in the vertical XML file.
+
+For example, if the vertical XML file contains:
+
+.. code-block:: xml
+  
+   <vertical display_name="Lesson_1_Unit_1">
+      <discussion url_name="Introduce_Yourself"/>
+      . . .
+  </vertical>
+
+You create the file ``discussion/Introduce_Yourself.xml`` to define the inline
+discussion component.
+
+***************************************
+Discussion Component XML File Elements
+***************************************
+
+The root element of the XML file for the HTML component is file is
+``discussion``.
+
+The ``discussion`` element contains not children.
+
+*************************************
+``discussion`` Element Attributes
+*************************************
+
+.. list-table::
+   :widths: 10 70
+   :header-rows: 1
+
+   * - Attribute
+     - Meaning
+   * - ``display_name``
+     - The value that is displayed to students as the name of the discussion
+       component.
+   * - ``discussion_category``
+     - The name of the category for the inline discussion as shown in the main
+       **Discussion** tab of the course.
+   * - ``for``
+     - A string that describes the discussion for students.
+   * - ``id``
+     - The unique identifier that the discussion forum service uses to refer to
+       this inline discussion component. This value must be unique across all
+       courses in the edX deployment. Therefore it is recommended that you use
+       the standard *<course_name>_<course_run>_<descriptor>* as in the above
+       example. Do not use a period (.) in the ID value.
+   * - ``discussion_id``
+     - ???
+   * - ``discussion_target``
+     - ???
+
+
+*************************************
+Example Discussion Component XML File
+*************************************
+
+The following example shows an XML file for a discussion component:
+
+.. code-block:: xml
+  
+  <discussion 
+      discussion_category="Essays" 
+      discussion_id="6e51dd8f181b44ffa6d91303a287ed3f" 
+      discussion_target="Peer Grading" 
+      display_name="Peer Grading"
+   /> 

docs/en_us/olx/source/components/html-components.rst

+.. _HTML Components:
+
+#################################
+HTML Components
+#################################
+
+To add an HTML component to your course, you create both XML and HTML files.
+
+See:
+
+* `Create the XML File for an HTML Component`_
+* `HTML Component XML File Elements`_
+* `html Element Attributes`_
+* `Example HTML Component XML File`_
+* `Create the HTML File for an HTML Component`_
+* `Example HTML Component Content`_
+
+  
+Both files, for each component, must be in the ``html`` directory.
+
+*********************************************
+Create the XML File for an HTML Component
+*********************************************
+
+You create an XML file in the ``html`` directory for each HTML component in your course.
+
+The name of the XML file must match the value of the @url_name attribute of the ``html`` element in the vertical XML file.
+
+For example, if the vertical XML file contains:
+
+.. code-block:: xml
+  
+   <vertical display_name="Lesson_1_Unit_1">
+      <html url_name="Introduction"/>
+      . . .
+  </vertical>
+
+You create the file ``html/Introduction.xml`` to define the HTML component.
+
+*************************************
+HTML Component XML File Elements
+************************************* 
+
+The root element of the XML file for the HTML component is file is ``html``. 
+
+The ``html`` element contains not children.
+
+*************************************
+``html`` Element Attributes
+*************************************
+
+.. list-table::
+   :widths: 10 70
+   :header-rows: 1
+
+   * - Attribute
+     - Meaning
+   * - ``display_name``
+     - The value that is displayed to students as the name of the HTML
+       component.
+   * - ``file_name``
+     - The name of the HTML file that contains the content for the HTML
+       component, without the ``.HTML`` extension.
+
+*************************************
+Example HTML Component XML File
+*************************************
+
+The following example shows an XML file for an HTML component:
+
+.. code-block:: xml
+  
+  <html filename="Introduction" display_name="Unit Introduction"/>  
+
+
+*********************************************
+Create the HTML File for an HTML Component
+*********************************************
+
+You create an HTML file in the ``html`` directory for each HTML component in your course.
+
+The name of the HTML file must match the value of the @file_name attribute of the ``html`` element in the component's XML file.
+
+For example, if the component's XML file contains:
+
+.. code-block:: xml
+  
+  <html filename="Introduction" display_name="Unit Introduction"/> 
+
+You create the file ``html/Introduction.html`` to define the HTML component content.
+
+*************************************
+Example HTML Component Content
+*************************************
+
+In the component's HTML file, you add valid HTML to represent the content you
+want to be displayed to students. For example, the following is from an HTML
+file for the edX Demo course:
+
+.. code-block:: html
+  
+    <h2>Lesson 2: Let's Get INTERACTIVE!</h2> 
+    <p>
+    <img
+    src="/static/interactive_x250.png" alt="Interactive" width="250"
+    hspace="12" vspace="12" border="0" align="right" />Now that you know your
+    way around an edX course let's look at some of the exciting interactive
+    tools you may encounter. Use the learning sequence above to explore.
+    &nbsp;</p> 
+    <p>Once you have tried the interactive tools in this lesson,
+    make sure to check out the week 2 homework where we show you several of the
+    really cool interactive labs we&rsquo;ve created for past courses.
+    &nbsp;They&rsquo;re fun to play with. &nbsp;Many courses will have tools
+    and labs that you need to use to complete homework assignments.</p>
+
+
+

docs/en_us/olx/source/components/index.rst

+.. _Course Components:
+
+#################################
+Course Components
+#################################
+
+Use the chapters in this section to create course components.
+
+.. toctree::
+   :maxdepth: 2
+
+   html-components
+   discussion-components
+   video-components

docs/en_us/olx/source/components/video-components.rst

+.. _Video Components:
+
+#################################
+Video Components
+#################################
+
+You can add video components to a vertical, or unit, in your course.
+
+See:
+
+* `Create the XML File for a Video Component`_
+* `Video Component XML File Elements`_
+* `video Element Attributes`_
+* `Example Video Component XML File`_
+
+**********************************************
+Create the XML File for a Video Component
+**********************************************
+
+You create an XML file in the ``video`` directory for each video component in
+your course.
+
+The name of the XML file must match the value of the @url_name attribute of the
+``video`` element in the vertical XML file.
+
+For example, if the vertical XML file contains:
+
+.. code-block:: xml
+  
+   <vertical display_name="Lesson_1_Unit_1">
+      <video url_name="Introduction_Lecture"/>
+      . . .
+  </vertical>
+
+You create the file ``video/Introduction_Lecture.xml`` to define the video
+component.
+
+*************************************
+Video Component XML File Elements
+************************************* 
+
+The root element of the XML file for the HTML component is file is ``video``. 
+
+The ``video`` element contains a single ``source`` element.
+
+==============================
+``source`` Element
+==============================
+
+The ``source`` element contains one attribute:
+
+.. list-table::
+   :widths: 10 70
+   :header-rows: 1
+
+   * - Attribute
+     - Meaning
+   * - ``src``
+     - The file path for the video file.
+
+
+*************************************
+``video`` Element Attributes
+*************************************
+
+.. list-table::
+   :widths: 10 70
+   :header-rows: 1
+
+   * - Attribute
+     - Meaning
+   * - ``display_name``
+     - The value that is displayed to students as the name of the video
+       component.
+   * - ``youtube``
+     - The speed and ID pairings for the YouTube video source. The value can
+       contain multiple speed:ID pairs, separated by commas.
+   * - ``download_track``
+     - Whether students can download the video track. ``true`` or ``false``.
+   * - ``download_video``
+     - Whether students can download the video. ``true`` or ``false``.
+   * - ``html5_sources``
+     - The file path for the HTML5 version of the video.
+   * - ``show_captions``
+     - Whether students can view the video captions. ``true`` or ``false``.
+   * - ``source``
+     - ???
+   * - ``sub``
+     - ???
+   * - ``youtube_id_0_75``
+     - The YouTube ID for the video that plays at 75% normal speed.
+   * - ``youtube_id_1_0``
+     - The YouTube ID for the video that plays at 100% normal speed.
+   * - ``youtube_id_1_25``
+     - The YouTube ID for the video that plays at 125% normal speed.
+   * - ``youtube_id_1_5``
+     - The YouTube ID for the video that plays at 150% normal speed.
+       
+
+*************************************
+Example Video Component XML File
+*************************************
+
+The following example shows an XML file for a discussion component:
+
+.. code-block:: xml
+  
+  <video 
+    youtube="0.75:xGKlr7nT_Zw,1.00:o2pLltkrhGM,1.25:XGsB9bA6rGU,1.50:_HuIF16HdTA" 
+    url_name="Introduction_Lecture" 
+    display_name="Introduction Lecture" 
+    download_video="true" 
+    html5_sources="[&quot;https://s3.amazonaws.com/edx-course-videos/school/DemoCourseIntroductionVideo.mov&quot;]" 
+    source="" 
+    youtube_id_0_75="xGKlr7nT_Zw" 
+    youtube_id_1_0="o2pLltkrhGM" 
+    youtube_id_1_25="XGsB9bA6rGU" 
+    youtube_id_1_5="_HuIF16HdTA">
+  
+    <source src="https://s3.amazonaws.com/edx-course-videos/mit-6002x/6002-Tutorial-00010_100.mov"/>
+  </video>

docs/en_us/olx/source/conf.py

+# -*- coding: utf-8 -*-
+#
+
+import sys, os
+
+# on_rtd is whether we are on readthedocs.org, this line of code grabbed from docs.readthedocs.org
+on_rtd = os.environ.get('READTHEDOCS', None) == 'True'
+
+if not on_rtd:  # only import and set the theme if we're building docs locally
+    import sphinx_rtd_theme
+    html_theme = 'sphinx_rtd_theme'
+    html_theme_path = [sphinx_rtd_theme.get_html_theme_path()]
+
+sys.path.append(os.path.abspath('../../../'))
+sys.path.append(os.path.abspath('../../'))
+
+#from docs.shared.conf import *
+
+sys.path.insert(0, os.path.abspath('.'))
+
+master_doc = 'index'
+
+# Add any paths that contain templates here, relative to this directory.
+#templates_path.append('source/_templates')
+
+# Add any paths that contain custom static files (such as style sheets) here,
+# relative to this directory. They are copied after the builtin static files,
+# so a file named "default.css" will overwrite the builtin "default.css".
+#html_static_path.append('source/_static')
+
+project = u'edX Open Learning XML Guide - Alpha Version'
+copyright = u'2014, edX'
+
+# The short X.Y version.
+version = ''
+# The full version, including alpha/beta/rc tags.
+release = ''
+
+#Added to turn off smart quotes so users can copy JSON values without problems.
+html_use_smartypants = False
\ No newline at end of file

docs/en_us/olx/source/demo-course/index.rst

+########################
+Tour of the DemoX OLX
+########################
+
+TBP
+
+.. toctree::
+   :maxdepth: 2
+
+
+ 
\ No newline at end of file

docs/en_us/olx/source/directory-structure.rst

+.. _ODL Directory Structure with edX Studio:
+
+###############################################
+OLX Directory Structure
+###############################################
+
+See:
+
+* `OLX and Directory File Structures`_
+* `Top-level Directory`_
+* `about Directory`_
+* `html Directory`_
+* `info Directory`_
+* `policies Directory`_
+* `problem Directory`_
+* `static Directory`_
+* `tabs Directory`_
+* `video Directory`_
+
+
+
+****************************************
+OLX and Directory File Structures
+****************************************
+
+All files and sub-directories that comprise your OLX course are stored within
+a single directory.
+
+OLX provides for flexibility in the directory and file structure you use to
+build your course.
+
+************************
+Top-level Directory
+************************
+
+In most cases, it is easiest to create your courseware structure in a
+single file, the ``course.xml file``. 
+
+The ``course.xml`` file would contain the
+definition of all chapters (sections), sequentials (subsections), and verticals
+(units) in your courseware. The courseware structure would then refer to files
+for components, which are stored in a directory for each type of XBlock.
+
+For example, the edX Platform contains a directory called `manual-testing-complete`_ that contains a course with all component types for testing
+purposes.
+
+Course content, other than the courseware, is stored in separate directories
+and files as shown in the rest of this chapter.
+
+Following are descriptions of directories needed for a typical course. You
+should set up these directories in preparation for developing your course
+content.
+
+.. note::
+ If you are using custom XBlocks, you can have
+ additional directories that store the XML for XBlocks of that type.
+
+********************
+``about`` Directory
+********************
+
+The ``about`` directory contains:
+
+* ``overview.html``, which contains the content for the course overview page
+  students see the the Learning Management System (LMS).
+
+* ``short_description.html``, which contains the content for the course in the
+  course list.
+
+See :ref:`The Course About Pages` for more information.
+
+
+********************
+``html`` Directory
+********************
+
+The ``html`` directory contains an HTML file for each HTML component in
+the course.
+
+If you do not need HTML components in the course, you do not need to create
+this directory.
+
+See :ref:`HTML Components` for more information.
+
+********************
+``info`` Directory
+********************
+
+The ``info`` directory contains:
+
+* ``handouts.html``, which contains the contain for the Course Handouts page in
+  the course.
+
+* ``updates.html``, which contains the course updates students see when opening
+  a course.
+
+***********************
+``policies`` Directory
+***********************
+
+The ``policies`` directory contains:
+
+* ``grading_policy.json``, which defines how student work is graded in the
+  course.
+
+* ``policy.json``, which defines various settings in the course.
+
+* ``assets.json``, which defines all files used in the course, such as images.
+  
+See :ref:`Course Policies` for more information.
+
+**********************
+``problem`` Directory
+**********************
+
+The ``problem`` directory contains an XML file for each problem component you
+use in your course.
+
+If you do not need problem components in the course, you do not need to create
+this directory.
+
+See :ref:`Problems and Tools` for more information.
+
+********************
+``static`` Directory
+********************
+
+The ``static`` directory contains the files used in your course, such as images
+or PDFs.
+
+See :ref:`Course Assets` for more information.
+
+********************
+``tabs`` Directory
+********************
+
+The ``tabs`` directory contains an HTML file for each page you add to your
+course.
+
+See :ref:`Course Pages` for more information.
+
+********************
+``video`` Directory
+********************
+
+The ``video`` directory contains an XML file for each video component you use
+in your course.
+
+If you do not need video components in the course, you do not need to create
+this directory.
+
+See :ref:`Video Components` for more information.
+
+ .. include:: links.rst
\ No newline at end of file

docs/en_us/olx/source/drafts/index.rst

+#################################
+Draft Course Content
+#################################
+
+.. toctree::
+   :maxdepth: 2
+

docs/en_us/olx/source/getting-started.rst

+.. _Getting Started with OLX:
+
+###########################
+Getting Started with OLX
+###########################
+
+To develop your course in OLX, you complete the following steps:
+
+ #.  :ref:`Define course policies<Policies>`.
+ #.  :ref:`Add course assets<Course Assets>`.
+ #.  :ref:`Create the course About page<The Course About Pages>`.
+ #.  :ref:`Create pages in your course<Course Pages>`.
+ #.  :ref:`Organize Courseware<Organizing Courseware>`.
+ #.  :ref:`Create course components<Course Components>`.
+ #.  :ref:`Create problems and tools<Problems and Tools>`.
+ #.  :ref:`Create advanced components<Advanced Components>`.
\ No newline at end of file

docs/en_us/olx/source/index.rst

+############################
+edX Open Learning XML Guide
+############################
+
+This document is intended for those developing edX courses through Open Learning XML (OLX).
+
+.. toctree::
+   :maxdepth: 1
+
+   read_me
+   preface
+   change_log
+
+
+.. toctree::
+   :maxdepth: 2
+
+   what-is-olx
+   tasks/index
+   getting-started
+   directory-structure
+   policies/index
+   assets/assets
+   about/index
+   pages/pages
+   organizing-course/index
+   components/index
+   problem-xml/index
+   advanced-components/index
+   drafts/index
+   demo-course/index
+
+
+ 
\ No newline at end of file

docs/en_us/olx/source/links.rst

+
+.. Links
+
+.. _Wikipedia XML entry: http://en.wikipedia.org/wiki/XML
+
+.. _manual-testing-complete: https://github.com/edx/edx-platform/tree/master/common/test/data/manual-testing-complete
\ No newline at end of file

docs/en_us/olx/source/organizing-course/course-structure-overview.rst

+###############################
+OLX Course Building Blocks
+###############################
+
+Before you begin building OLX, you should understand the
+building blocks of an edX course. See:
+
+* `Courseware`_
+* `Supplemental Course Content`_
+* `Course Policies`_
+
+**************
+Courseware
+**************
+
+Courseware is the main content of your course, namely lessons and assessments.
+The following list describes how courseware is organized in OLX:
+
+* Course sections are at the top level of your course and typically represent a
+  time period. In OLX, sections are represented by ``chapter`` elements. 
+
+* A section contains one or more subsections. Course subsections are parts of a
+  section, and usually represent a topic or other organizing principle. In
+  OLX, subsections are represented by ``sequential`` elements. 
+
+* A subsection contains one or more units. In OLX, units are represented by
+  ``vertical`` elements.  
+
+* Course units are lessons in a subsection that students view as single pages.
+  A unit contains one or more components. Course components are objects within
+  units that contain your actual course content. For more information, see:
+
+  * :ref:`Course Components`
+  * :ref:`Problems and Tools`
+  * :ref:`Advanced Components`
+    
+For more information, see :ref:`The Courseware Structure`.
+
+****************************
+Supplemental Course Content
+****************************
+
+In addition to the courseware described above, you course can contain
+supplemental content, such as textbooks, custom pages, and files.  The
+following list describes the types of supported content:
+
+* Course about pages appear in the course list for prospective students and are
+  used to market your course. For more information, see :ref:`The Course About
+  Pages`.
+
+* Course assets are any supplemental files you use in your course, such as a
+  syllabus as a PDF file or an image that appears in an HTML component. For
+  more information, see :ref:`Course Assets`.
+
+* Course pages are custom pages that you can have appear in the top navigation
+  menu of your course.  For more information, see :ref:`Course Pages`.
+
+****************************
+Course Policies
+****************************
+
+Course policies determine how your course functions. For example, policies
+control grading and content experiments. For more information, see
+:ref:`Policies`.
\ No newline at end of file

docs/en_us/olx/source/organizing-course/course-xml-file.rst

+.. _The Courseware Structure:
+
+##########################
+The Courseware Structure
+##########################
+
+You develop the courseware structure in the ``course.xml`` file, in the top-
+level directory.
+
+See:
+
+* `The course.xml File`_
+* `Course Chapters`_
+* `Course Sequentials`_
+* `Course Verticals`_
+
+*************************************
+The ``course.xml`` File
+*************************************
+
+The root element of the ``course.xml`` file is ``course``. 
+
+The ``course`` element does not contain any child elements.
+
+For example, the ``course.xml`` file may contain:
+
+.. code-block:: xml
+  
+  <course advanced_modules="[&quot;concept&quot;, &quot;done&quot;,
+      &quot;profile&quot;, &quot;recommender&quot;]" course="edX_Insider"
+      course_image="code.png" display_name="edX Demo"
+      enrollment_start="2014-03-01T04:00:00Z" org="edX"
+      start="2014-03-03T00:00:00Z" url_name="Ongoing">
+      . . .
+      . . .
+
+==============================
+``course`` Attributes
+==============================
+
+.. list-table::
+   :widths: 10 70
+   :header-rows: 1
+
+   * - Attribute
+     - Meaning
+   * - ``advanced_modules``
+     - The list of advanced modules, or custom XBlocks, used in your course.
+   * - ``url_name``
+     - The value in the course URL path directly after the domain,
+       organization, and course name. The url_name must also be the name of the course outline XML file (without the ``.xml`` extension).
+   * - ``org``
+     - The organization sponsoring the course. This value is in the course URL
+       path, following the domain and ``/courses/``.
+   * - ``course``
+     - The name of the course. This value is in the course URL
+       path, following the organization.
+   * - ``course_image``
+     - The filename of the image used on the course About page.
+   * - ``enrollment_start``
+     - The date and time that students can start enrolling in the course.
+
+
+============================================================
+``course`` Element Attributes and Course URLS
+============================================================
+
+The attributes of the ``course`` element are used to construct URLs in the
+course.  The following course URL shows where these values are used:
+
+.. code-block:: html
+  
+  http://my-edx-server.org/courses/<@org value>/<@course value>/<@url_name value>/info
+
+For example:
+
+.. code-block:: html
+  
+  http://my-edx-server.org/courses/edX/DemoX/Demo_Course/info
+
+*******************************
+Course Chapters
+*******************************
+
+You create a course chapter with the ``chapter`` element, as a child of the root ``course`` element. 
+
+For example, if the course outline file contains:
+
+.. code-block:: xml
+  
+    <course> 
+      <chapter display_name="Exam Review" url_name="exam_review"> 
+      . . .
+    </course>
+
+==============================================
+``chapter`` Attributes
+==============================================
+
+.. list-table::
+   :widths: 10 70
+   :header-rows: 1
+
+   * - Attribute
+     - Meaning
+   * - ``display_name``
+     - The value that is displayed to students as the name of the chapter, or
+       section.
+   * - ``start``
+     - The date and time, in UTC, that the chapter is released to students.
+       Before this date and time, students do not see the chapter.
+
+=========================
+``chapter`` Children
+=========================
+
+The ``chapter`` element contains one or more child ``sequential`` elements. 
+
+The ``sequential`` element references a sequential, or subsection, in the
+course.
+
+The following example shows a chapter with two sequentials, or subsections. :
+
+.. code-block:: xml
+  
+  <chapter display_name="Example Week 2: Get Interactive">
+      <sequential display_name="Simulations" url_name="simulations"> 
+          . . .
+      <sequential display_name="Graded Simulations" 
+          url_name="graded_simulations"> 
+          . . .
+  </chapter>
+
+
+*******************************
+Course Sequentials
+*******************************
+
+You create a course sequential with the ``sequential`` element, for each
+subsection in the chapter.
+
+For example, the course may contain:
+
+.. code-block:: xml
+  
+    <course> 
+        <chapter url_name="exam_review"> 
+            <sequential display_name="Simulations" url_name="simulations">
+                . . .
+            </sequential>
+        </chapter>
+        . . .
+    </course>
+
+==============================================
+``sequential`` Attributes
+==============================================
+
+.. list-table::
+   :widths: 10 70
+   :header-rows: 1
+
+   * - Attribute
+     - Meaning
+   * - ``display_name``
+     - The value that is displayed to students as the name of the sequential,
+       or subsection.
+   * - ``start``
+     - The date and time, in UTC, that the sequential is released to students.
+       Before this date and time, students do not see the sequential.
+   * - ``graded``
+     - Whether the sequential is a graded subsection; ``true`` or ``false``.
+   * - ``format``
+     - If the sequential is graded, the assignment type.
+   * - ``graceperiod``
+     - If the sequential is graded, the number of seconds in the grace period.
+   * - ``rerandomize``
+     - TBP
+   * - ``showanswer``
+     - TBP
+   * - ``xqa_key``
+     - TBP
+
+==============================================
+``sequential`` Children
+============================================== 
+
+The ``sequential`` element contains one or more child ``vertical`` elements. 
+
+The ``veritical`` element references a vertical, or unit, in the course.
+
+The following example shows a chapter with a sequential that has three verticals, or units. :
+
+.. code-block:: xml
+  
+    <course> 
+        <chapter url_name="exam_review"> 
+            <sequential display_name="Simulations" url_name="simulations">
+                <vertical display_name: "Unit 1" url_name="Lesson_1_Unit_1">
+                    . . . .
+                <vertical display_name: "Unit 2" url_name="Lesson_1_Unit_2">
+                    . . . .
+            </sequential>
+        </chapter>
+        . . .
+    </course>
+
+
+*******************************
+Course Verticals
+*******************************
+
+A course vertical:
+
+* Defines the display name for the vertical, or unit.
+* Organizes components and other verticals in the vertical.
+
+You create a course vertical with the ``vertical`` element, for each
+unit in the subsection.
+
+For example, the course may contain:
+
+.. code-block:: xml
+  
+    <course> 
+        <chapter url_name="exam_review"> 
+            <sequential display_name="Simulations" url_name="simulations">
+                <vertical display_name="Unit 1" url_name="Lesson_1_Unit_1"/>
+                    . . .
+            </sequential>
+        </chapter>
+        . . .
+    </course>
+
+=========================
+``vertical`` Attributes
+=========================
+
+.. list-table::
+   :widths: 10 70
+   :header-rows: 1
+
+   * - Attribute
+     - Meaning
+   * - ``display_name``
+     - The value that is displayed to students as the name of the sequential,
+       or subsection.
+
+
+==============================
+``vertical`` Children
+============================== 
+
+The ``vertical`` element contains one or more child elements for each component
+in the vertical, or unit.
+
+note:: 
+  You can embed the content of components in the ``course.xml`` file, as
+  child elements of the ``vertical`` element. Hoever, you may want to store
+  components in separate files, to better enable content reuse across courses.
+
+A vertical element can also contain a vertical element. You can nest
+verticals, or units, recursively.
+
+Child elements of ``vertical`` refer to components in your course.  The edX
+Platform supports a wide range of components, including custom XBlocks.
+
+The following example shows a vertical with two components:
+
+.. code-block:: xml
+  
+  <vertical display_name="Lesson_1_Unit_1">
+      <html url_name="Introduction"/>
+      <video url_name="Unit_1_Video"/>
+  </vertical>

docs/en_us/olx/source/organizing-course/index.rst

+.. _Organizing Courseware:
+
+##################################
+Organizing Courseware
+##################################
+
+Use the chapters in this section to organize your courseware with OLX.
+
+.. toctree::
+   :maxdepth: 2
+
+   course-structure-overview
+   course-xml-file
\ No newline at end of file

docs/en_us/olx/source/pages/pages.rst

+.. _Course Pages:
+
+#################################
+Course Pages
+#################################
+
+You can add pages to your course. Each page appears in your course’s navigation
+bar.
+
+*********************************************
+Create the Page File
+*********************************************
+
+You create an HTML file for each page you want to add to the course in the
+``tabs`` directory.
+
+You can add any text and HTML markup to the page.
\ No newline at end of file

docs/en_us/olx/source/policies/assets-policy.rst

+.. _Course Asset Policy:
+
+#################################
+Course Asset Policy
+#################################
+
+You create an asset policy file to provide details of the assets used in your
+course. Assets can include image files, textbooks, handouts, and supporting
+JavaScript files.
+
+You must enter policy details for each asset you add the the ``static``
+directory. See :ref:`Course Assets` for more information.
+
+
+*******************************
+Create the Asset Policy File
+*******************************
+
+You define policies for your assets in the ``assets.json`` file. 
+
+Save the ``assets.json`` file in the ``policy`` directory. You use one
+``assets.json`` file for all of the courses you may have in your directory
+structure.
+
+
+************************************
+Asset Policy JSON Objects
+************************************
+
+  .. list-table::
+     :widths: 10 80
+     :header-rows: 0
+
+     * - ``contentType``
+       - The MIME type of the file.
+     * - ``displayname``
+       - The file name.
+     * - ``locked``
+       - ``true`` if users can only access the file from within your course.
+         ``false`` if users can access the file from outside of your course.
+     * - ``content_son``
+       - A collection that contains:
+         * ``category``:  Equal to ``asset``
+         * ``name``: The file name
+         * ``course``: The course number
+         * ``tag``: 
+         * ``org``: The organization that created the course
+         * ``revision``
+     * - ``filename``
+       - The full path and name of the file in the edX Platform.
+     * - ``import_path``
+       -
+     * - ``thumbnail_location``
+       - An array containing:
+         * ``c4x``
+         * The organization
+         * The course number
+         * ``thumbnail``
+         * The filename for the thumbnail
+
+        
+
+*******************************
+Example Asset Policy File
+*******************************
+
+The following example shows the JSON policy for one image file.
+
+.. code-block:: json
+
+    {
+        "dashboard.png": 
+            {
+                "contentType": "image/png", 
+                "displayname": "dashboard.png", 
+                "locked": false, 
+                "content_son": 
+                    {
+                        "category": "asset", 
+                        "name": "dashboard.png", 
+                        "course": "Course number", 
+                        "tag": "c4x", 
+                        "org": "Organization", 
+                        "revision": null
+                    }, 
+                    "filename": "/c4x/Organization/Course-number/asset/dashboard.png", 
+                    "import_path": null, 
+                    "thumbnail_location": 
+                        [
+                            "c4x", 
+                            "Organization", 
+                            "Course number", 
+                            "thumbnail", 
+                            "dashboard.jpg", 
+                            null
+                        ]
+            }
+    }
\ No newline at end of file

docs/en_us/olx/source/policies/content-experiments.rst

+.. _Group Configuration for Content Experiments:
+
+############################################
+Group Configuration for Content Experiments
+############################################
+
+You define group configurations in the ``policy.json`` file in the ``policies``
+directory.
+
+To specify group configurations, you modify the value for the
+``user_partitions`` policy key.
+
+.. note::  
+  ``user_partitions`` is the internal edX Platform name for group
+  configurations.
+
+The value for ``user_partitions`` is a JSON collection of group configurations,
+each of which defines the groups of students. 
+
+.. note:: 
+  Use names for group configurations that are meaningful. You select from the
+  list of group configuration names when you add a content experiment.
+
+See the following examples for more information.
+
+=============================================
+Example: One Group Configuration
+=============================================
+
+The following is an example JSON object that defines an group configuration
+with two student segments.
+
+.. code-block:: json
+
+    "user_partitions": [{"id": 0,
+                       "name": "Name of the group configuration",
+                       "description": "Description of the group configuration.",
+                       "version": 1,
+                       "groups": [{"id": 0,
+                                   "name": "Group 1",
+                                   "version": 1},
+                                  {"id": 1,
+                                   "name": "Group 2",
+                                   "version": 1}]
+                                }
+                       ]
+
+In this example:
+
+* The ``"id": 0`` identifies the group configuration. For XML courses, the
+  value is referenced in the ``user_partition`` attribute of the
+  ``<split_test>`` element in the content experiment file.
+* The ``groups`` array identifies the groups to which students are randomly
+  assigned. For XML courses, each group ``id`` value is referenced in the
+  ``group_id_to_child`` attribute of the ``<split_test>`` element.
+
+==========================================================
+Example: Multiple Group Configurations
+==========================================================
+
+The following is an example JSON object that defines two group configurations.
+The first group configuration divides students into two groups, and the second
+divides students into three groups.
+
+.. code-block:: json
+
+    "user_partitions": [{"id": 0,
+                         "name": "Name of Group Configuration 1",
+                         "description": "Description of Group Configuration 1.",
+                         "version": 1,
+                         "groups": [{"id": 0,
+                                     "name": "Group 1",
+                                     "version": 1},
+                                    {"id": 1,
+                                     "name": "Group 2",
+                                     "version": 1}]}
+                        {"id": 1,
+                         "name": "Name of Group Configuration 2",
+                         "description": "Description of Group Configuration 2.",
+                         "version": 1,
+                         "groups": [{"id": 0,
+                                     "name": "Group 1",
+                                     "version": 1},
+                                    {"id": 1,
+                                     "name": "Group 2",
+                                     "version": 1}
+                                     {"id": 2,
+                                     "name": "Group 3",
+                                     "version": 1}
+                                     ]}
+                       ]
+
+.. note:: 
+  As this example shows, each group configuration is independent.  Group IDs
+  and names must be unique within a group configuration, but not across all
+  group configurations in your course.
\ No newline at end of file

docs/en_us/olx/source/policies/course.rst

+.. _Course Policies:
+
+#################################
+Course Policies
+#################################
+
+You create a course policy file to specify metadata about your course.
+
+*******************************
+Create the Course Policy File
+*******************************
+
+You define policies for your course in the ``policy.json`` file. 
+
+Save the ``policy.json`` file in the ``policy/<course-name>`` directory. 
+
+The ``<course-name>`` directory  must match the value of the ``url_name`` attribute in the ``course.xml`` file.
+
+
+************************************
+Course Policy JSON Objects
+************************************
+
+  .. list-table::
+     :widths: 10 80
+     :header-rows: 0
+
+     * - ``start``
+       - The start date for the course.  For example: ``"2012-09-05T12:00"``.
+     * - ``advertised_start``
+       - The start date displayed in the course listing and course about pages.
+         For example: ``"2012-09-05T12:00``.
+     * - ``disable_policy_graph``
+       - Whether the policy graph should be disabled (``true``) or not (``false)``.  SUPORTED?
+     * - ``enrollment_start``, ``enrollment_end``
+       - The dates in which students can enroll in the course. For example, ``"2012-09-05T12:00"``. If not specified, students can enroll any time. 
+     * - ``end``
+       - The end date for the course.  For example: ``"2012-11-05T12:00"``.
+     * - ``end_of_course_survey_url``
+       - The url for an end of course survey. The link is shown after the course is over, next to certificate download links.
+     * - ``tabs``
+       - Custom pages, or tabs, in the courseware.  See below for details.
+     * - ``discussion_blackouts``
+       - An array of time intervals during which students cannot create or edit discussion posts. Moderators, Community TAs, and Administrators are not restricted by these dates. For example, you could specify blackout dates during exams. For example: ``[[""2012-10-29T04:00", "2012-11-03T04:00"], ["2012-12-30T04:00", "2013-01-02T04:00"]]``. Moderators, Community TAs, and Administrators are not restricted during blackout periods.
+     * - ``show_calculator``
+       - Whether the calculator is shown in the course (``true``) or not (``false)``.
+     * - ``days_early_for_beta``
+       - The number of days early that students in the beta-testers group can
+         access the course.
+     * - `cohort_config`
+       -
+          * ``cohorted`` : boolean.  Set to ``true`` if this course uses
+            student cohorts.  If so, all inline discussions are automatically
+            cohorted, and top-level discussion topics are configurable via the
+            cohorted_discussions list. Default is not cohorted).
+          * ``cohorted_discussions``: list of discussions that should be
+            cohorted.  Any not specified in this list are not cohorted.
+          * ``auto_cohort``: ???
+          * ``auto_cohort_groups``: ``["group name 1", "group name 2", ...]``
+            `If ``cohorted`` and ``auto_cohort`` are ``true``, automatically
+            put each student into a random group from the
+            ``auto_cohort_groups`` list, creating the group if needed.
+     * - ``pdf_textbooks``
+       - have pdf-based textbooks on tabs in the courseware.  See below for
+         details.
+     * - ``html_textbooks``
+       - have html-based textbooks on tabs in the courseware.  See below for
+         details.
+
+*******************************
+Example Course Policy File
+*******************************
+
+.. code-block:: json
+
+    {
+      "course/2014":
+          {
+	          "tabs": [{"type": "courseware", "name": "Courseware"}, 
+	                   {"type": "course_info", "name": "Course Info"}, 
+	                   {"type": "discussion", "name": "Discussion"}, 
+	                   {"type": "wiki", "name": "Wiki"}, 
+	                   {"type": "progress", "name": "Progress"}],
+	
+	           "display_name": "edX Demonstration Course",
+	           "discussion_topics": {"General": {"id": "i4x-General-course-2014"}}
+               
+                   "user_partitions": [{"id": 0,
+                                        "name": "Two Groups",
+                                        "description": "For 2-group experiments.",
+                                         "version": 1,
+                                         "groups": [{"id": 0,
+                                                     "name": "Group A",
+                                                     "version": 1},
+                                                    {"id": 2,
+                                                     "name": "Group B",
+                                                     "version": 1}]
+                                       }]
+          }
+    }
\ No newline at end of file

docs/en_us/olx/source/policies/grading.rst

+.. _Grading Policy:
+
+#################################
+Grading Policy
+#################################
+
+You create a grading policy file to specify how problems are graded in your
+course.
+
+*******************************
+Create the Grading Policy File
+*******************************
+
+You define policies for your course in the ``grading_policy.json`` file. 
+
+Save the ``grading_policy.json`` file in the ``policy/<course-name>``
+directory.
+
+The ``<course-name>`` directory  must match the value of the ``url_name``
+attribute in the ``course.xml`` file.
+
+************************************
+Course Policy JSON Objects
+************************************
+
+  .. list-table::
+     :widths: 10 80
+     :header-rows: 0
+
+     * - ``GRADE_CUTOFFS``
+       - The minimal grade for passing the course, and receiving a certificate
+         if offered.
+     * - ``GRADER``
+       - For each assignment type:
+
+         * ``min_count``:???
+         * ``weight``: The percentage of the total grade determined by
+            assignments of this type. The total value for all assignment types
+            must equal 1.0.
+         * ``type``: The name of the assignment type.
+         * ``short_label``: The label for the assignment type shown on the
+           student's Progress page.
+         * ``drop_count``: The number of assignments of this type that can be
+           dropped when calculating the final grade.
+
+*******************************
+Example Grading Policy File
+*******************************
+
+.. code-block:: json
+
+    {
+        "GRADE_CUTOFFS": {"Pass": 0.6}, 
+        "GRADER": [
+                    {
+                        "min_count": 3, 
+                        "weight": 0.75, 
+                        "type": "Homework", 
+                        "drop_count": 1, 
+                        "short_label": "Ex"
+                    }, 
+                    {
+                        "short_label": "", 
+                        "min_count": 1, 
+                        "type": "Exam", 
+                        "drop_count": 0, 
+                        "weight": 0.25
+                    }
+                  ]
+    }
\ No newline at end of file

docs/en_us/olx/source/policies/index.rst

+.. _Policies:
+
+#################################
+Policies
+#################################
+
+Use the chapters in this section to define policies for your course.
+
+.. toctree::
+   :maxdepth: 2
+
+   course
+   content-experiments
+   grading
+   assets-policy

docs/en_us/olx/source/preface.rst

+.. include:: ../../shared/preface.rst
\ No newline at end of file

docs/en_us/olx/source/problem-xml/checkbox.rst

+.. include:: ../../../shared/exercises_tools/checkbox.rst
+

docs/en_us/olx/source/problem-xml/chemical_equation.rst

+.. include:: ../../../shared/exercises_tools/chemical_equation.rst
+

docs/en_us/olx/source/problem-xml/circuit_schematic_builder.rst

+.. include:: ../../../shared/exercises_tools/circuit_schematic_builder.rst
+

docs/en_us/olx/source/problem-xml/conditional_module.rst

+.. include:: ../../../shared/exercises_tools/conditional_module.rst
+

docs/en_us/olx/source/problem-xml/custom_javascript.rst

+.. include:: ../../../shared/exercises_tools/custom_javascript.rst
+

docs/en_us/olx/source/problem-xml/custom_python.rst

+.. include:: ../../../shared/exercises_tools/custom_python.rst
+

docs/en_us/olx/source/problem-xml/drag_and_drop.rst

+.. include:: ../../../shared/exercises_tools/drag_and_drop.rst
+

docs/en_us/olx/source/problem-xml/dropdown.rst

+.. include:: ../../../shared/exercises_tools/dropdown.rst
+

docs/en_us/olx/source/problem-xml/full_screen_image.rst

+.. include:: ../../../shared/exercises_tools/full_screen_image.rst
+

docs/en_us/olx/source/problem-xml/gene_explorer.rst

+.. include:: ../../../shared/exercises_tools/gene_explorer.rst
+

docs/en_us/olx/source/problem-xml/google_hangout.rst

+.. include:: ../../../shared/exercises_tools/google_hangouts.rst
+

docs/en_us/olx/source/problem-xml/iframe.rst

+.. include:: ../../../shared/exercises_tools/iframe.rst
+

docs/en_us/olx/source/problem-xml/image_mapped_input.rst

+.. include:: ../../../shared/exercises_tools/image_mapped_input.rst
+

docs/en_us/olx/source/problem-xml/index.rst

+.. _Problems and Tools:
+
+#################################
+Problems and Tools
+#################################
+
+Use the chapters in this section to create course problems and tools.
+
+.. toctree::
+   :maxdepth: 2
+
+   checkbox
+   chemical_equation
+   circuit_schematic_builder
+   conditional_module
+   custom_javascript
+   custom_python
+   drag_and_drop
+   dropdown
+   full_screen_image
+   gene_explorer
+   google_hangout
+   iframe
+   image_mapped_input
+   math_expression_input
+   mathjax
+   molecule_editor
+   mult_choice_num_input
+   multiple_choice
+   numerical_input
+   periodic_table
+   poll
+   problem_in_latex
+   problem_with_hint
+   protein_builder
+   text_input
+   vitalsource
+   zooming_image
\ No newline at end of file

docs/en_us/olx/source/problem-xml/math_expression_input.rst

+.. include:: ../../../shared/exercises_tools/math_expression_input.rst
+

docs/en_us/olx/source/problem-xml/mathjax.rst

+.. include:: ../../../shared/exercises_tools/mathjax.rst
+

docs/en_us/olx/source/problem-xml/molecule_editor.rst

+.. include:: ../../../shared/exercises_tools/molecule_editor.rst
+

docs/en_us/olx/source/problem-xml/mult_choice_num_input.rst

+.. include:: ../../../shared/exercises_tools/mult_choice_num_input.rst
+

docs/en_us/olx/source/problem-xml/multiple_choice.rst

+.. include:: ../../../shared/exercises_tools/multiple_choice.rst
+

docs/en_us/olx/source/problem-xml/numerical_input.rst

+.. include:: ../../../shared/exercises_tools/numerical_input.rst
+

docs/en_us/olx/source/problem-xml/periodic_table.rst

+.. include:: ../../../shared/exercises_tools/periodic_table.rst
+

docs/en_us/olx/source/problem-xml/poll.rst

+.. include:: ../../../shared/exercises_tools/poll.rst
+

docs/en_us/olx/source/problem-xml/problem_in_latex.rst

+.. include:: ../../../shared/exercises_tools/problem_in_latex.rst
+

docs/en_us/olx/source/problem-xml/problem_with_hint.rst

+.. include:: ../../../shared/exercises_tools/problem_with_hint.rst
+

docs/en_us/olx/source/problem-xml/protein_builder.rst

+.. include:: ../../../shared/exercises_tools/protein_builder.rst
+

docs/en_us/olx/source/problem-xml/text_input.rst

+.. include:: ../../../shared/exercises_tools/text_input.rst
+

docs/en_us/olx/source/problem-xml/vitalsource.rst

+.. include:: ../../../shared/exercises_tools/vitalsource.rst
+

docs/en_us/olx/source/problem-xml/zooming_image.rst

+.. include:: ../../../shared/exercises_tools/zooming_image.rst
+

docs/en_us/olx/source/read_me.rst

+*******
+Read Me
+*******
+
+The *edX Open Learning XML Guide* provides the information you need to build an
+edX course through Open Learning XML (OLX) and supporting files, without using
+edX Studio.  This document is an Alpha version. We will continue to make
+significant updates to improve your ability to build XML-based courses.
+
+This documentation is created using RST_ files and Sphinx_. You, the
+user community, can help update and revise this documentation project on
+GitHub::
+
+  https://github.com/edx/edx-platform/docs/en_us/olx/source
+
+To suggest a revision, fork the project, make changes in your fork, and submit
+a pull request back to the original project: this is known as the `GitHub Flow`_.
+
+All pull requests need approval from edX. For more information, contact edX at `docs@edx.org`_.
+
+.. _docs@edx.org: docs@edx.org
+.. _Sphinx: http://sphinx-doc.org/
+.. _LaTeX: http://www.latex-project.org/
+.. _`GitHub Flow`: https://github.com/blog/1557-github-flow-in-the-browser
+.. _RST: http://docutils.sourceforge.net/rst.html
\ No newline at end of file

docs/en_us/olx/source/tasks/convert-to-olx.rst

+.. _Convert Content in Other Formats to OLX:
+
+###################################################
+Convert Content in Other Formats to OLX
+###################################################
+
+TBP
\ No newline at end of file

docs/en_us/olx/source/tasks/deploy-lms.rst

+.. _Build a Course in OLX and Deploy to the edX LMS:
+
+###################################################
+Build a Course in OLX and Deploy to the edX LMS
+###################################################
+
+TBP
\ No newline at end of file

docs/en_us/olx/source/tasks/index.rst

+######################
+Open Learning XML Uses
+######################
+
+
+.. toctree::
+  :maxdepth: 2
+
+  olx-studio
+  deploy-lms
+  convert-to-olx
\ No newline at end of file

docs/en_us/olx/source/tasks/olx-studio.rst

+.. _Use OLX with edX Studio:
+
+###################################################
+Use OLX with edX Studio
+###################################################
+
+TBP
\ No newline at end of file

docs/en_us/olx/source/what-is-olx.rst

+.. _What is Open Learning XML?:
+
+###########################
+What is Open Learning XML?
+###########################
+
+Open Learning XML (OLX) is the XML-based standard used to build courses for the
+edX Platform.
+
+With OLX, you can:
+
+* Move content between instances of Open edX.
+* Create course content outside of edX Studio, including by conversion from
+  other content formats.
+* Ensure content remains free of proprietary encoding and allow portability.
+
+**************
+XML Resources
+**************
+
+OLX is based on XML. XML, or Extensible Markup Language, is a set of rules
+for creating documents in a format that is both human-readable and machine-
+readable.
+
+To work with OLX, you should have a strong understanding of XML. This
+document presumes you understand XML and can use tools to create and edit XML
+files.
+
+For a primer on XML, see the `Wikipedia XML entry`_ . 
+
+
+.. include:: links.rst
\ No newline at end of file

docs/en_us/shared/exercises_tools/annotation.rst

+.. _Annotation:
+
+###################
+Annotation Problem
+###################
+
+
+In an annotation problem, the instructor highlights specific text inside a larger text block and then asks questions about that text. The questions appear when students hover the mouse over the highlighted text. The questions also appear in a section below the text block, along with space for students' responses.
+
+Annotation problems ask students to respond to questions about a specific block of text. The question appears above the text when the student hovers the mouse over the highlighted text so that students can think about the question as they read.
+
+.. image:: ../Images/AnnotationExample.png
+  :alt: Annotation problem
+
+****************************
+Create an Annotation Problem
+****************************
+
+To create an annotation problem, you'll add the Annotation advanced component to your course, add the **Instructions** and **Guided Discussion** segments of the problem, and then the **Annotation problem** segment of the problem.
+
+#. Add the Annotation advanced component. 
+
+    #. From the **Settings** menu select **Advanced Settings**.
+
+    #. In the field for the **Advanced Module List** policy key, place your
+       cursor between the brackets.
+
+    #. Enter the following value. Make sure to include the quotation marks.
+
+       ``"annotatable"``
+
+    4. At the bottom of the page, click **Save Changes**.
+
+       The page refreshes automatically. At the top of the page, you see a
+       notification that your changes have been saved.
+
+    5. Return to the unit where you want to add the specialized problem. The
+       list of possible components now contains an Advanced component.
+
+       .. image:: /Images/AdvancedComponent.png
+          :alt: Image of the Add a New Component panel with the Advanced component option
+
+2. Add the **Instructions** and **Guided Discussion** segments of the
+problem.
+
+    #. In the unit where you want to create the problem, under **Add New
+       Component** click **Advanced**.
+    #. In the list of problem types, click **Annotation**.
+    #. In the component that appears, click **Edit**.
+    #. In the component editor, replace the example code with your own code.
+    #. Click **Save**.
+
+3. Add the **Annotation problem** segment of the problem.
+
+    #. Under the Annotation component, create a new blank Advanced Problem
+       component.
+       
+    #. Paste the following code in the Advanced Problem component, replacing
+       placeholders with your own information.
+
+        .. code-block:: xml
+
+          <problem>
+              <annotationresponse>
+                  <annotationinput>
+                    <text>PLACEHOLDER: Text of annotation</text>
+                      <comment>PLACEHOLDER: Text of question</comment>
+                      <comment_prompt>PLACEHOLDER: Type your response below:</comment_prompt>
+                      <tag_prompt>PLACEHOLDER: In your response to this question, which tag below 
+                      do you choose?</tag_prompt>
+                    <options>
+                      <option choice="incorrect">PLACEHOLDER: Incorrect answer (to make this 
+                      option a correct or partially correct answer, change choice="incorrect" 
+                      to choice="correct" or choice="partially-correct")</option>
+                      <option choice="correct">PLACEHOLDER: Correct answer (to make this option 
+                      an incorrect or partially correct answer, change choice="correct" to 
+                      choice="incorrect" or choice="partially-correct")</option>
+                      <option choice="partially-correct">PLACEHOLDER: Partially correct answer 
+                      (to make this option a correct or partially correct answer, 
+                      change choice="partially-correct" to choice="correct" or choice="incorrect")
+                      </option>
+                    </options>
+                  </annotationinput>
+              </annotationresponse>
+              <solution>
+                <p>PLACEHOLDER: Detailed explanation of solution</p>
+              </solution>
+            </problem>
+
+#. Click **Save**.
+
+

docs/en_us/shared/exercises_tools/checkbox.rst

+.. _Checkbox:
+
+##################
+Checkbox Problem
+##################
+
+In checkbox problems, the student selects one or more options from a list of possible answers. The student must select all the options that apply to answer the problem correctly. Each checkbox problem must have at least one correct answer.
+
+.. image:: /Images/CheckboxExample.png
+ :alt: Image of a checkbox problem
+
+****************************
+Create a Checkbox Problem
+****************************
+
+You can create checkbox problems in the Simple Editor or in the Advanced Editor.
+
+.. note:: All problems must include labels for accessibility. The label generally includes the text of the main question in your problem. To add a label for a common problem, surround the text of the label with angle brackets pointed toward the text (>>label text<<).
+
+==================
+Simple Editor
+==================
+
+#. Under **Add New Component**, click **Problem**.
+#. In the **Select Problem Component Type** screen, click **Checkboxes** on the **Common Problem Types** tab.
+#. In the Problem component that appears, click **Edit**.
+#. In the component editor, replace the default text with the text of your 
+   problem. Enter each answer option on its own line.
+#. Determine the text of the problem to use as a label, and then surround that text with two sets of angle brackets (>><<).
+#. Select all the answer options, and then click the checkbox button. 
+
+   .. image:: /Images/ProbComponent_CheckboxIcon.png
+    :alt: Image of the checkbox button
+   
+   When you do this, brackets appear next to each answer choice.
+
+#. Add an **x** between the brackets for the correct answer or answers.
+#. In the component editor, select the text of the explanation, and then click the 
+   explanation button to add explanation tags around the text.
+
+   .. image:: /Images/ProbCompButton_Explanation.png
+    :alt: Image of the explanation button
+
+#. On the **Settings** tab, specify the settings that you want. 
+#. Click **Save**.
+
+For the example problem above, the text in the Problem component is the
+following.
+
+.. code-block:: xml
+
+    Learning about the benefits of preventative healthcare can be particularly 
+    difficult. >>Check all of the reasons below why this may be the case.<<
+
+    [x] A large amount of time passes between undertaking a preventative measure and seeing the result. 
+    [ ] Non-immunized people will always fall sick. 
+    [x] If others are immunized, fewer people will fall sick regardless of a particular individual's choice to get immunized or not. 
+    [x] Trust in healthcare professionals and government officials is fragile. 
+
+    [explanation]
+    People who are not immunized against a disease may still not fall sick from the disease. If someone is trying to learn whether or not preventative measures against the disease have any impact, he or she may see these people and conclude, since they have remained healthy despite not being immunized, that immunizations have no effect. Consequently, he or she would tend to believe that immunization 
+    (or other preventative measures) have fewer benefits than they actually do.
+    [explanation]
+
+==================
+Advanced Editor
+==================
+
+To create this problem in the Advanced Editor, click the **Advanced** tab in the Problem component editor, and then replace the existing code with the following code.
+
+.. code-block:: xml
+
+  <problem>
+    <p>Learning about the benefits of preventative healthcare can be particularly difficult. Check all of the reasons below why this may be the case.</p>
+
+  <choiceresponse>
+    <checkboxgroup direction="vertical" label="Check all of the reasons below why this may be the case">
+      <choice correct="true"><text>A large amount of time passes between undertaking a preventative measure and seeing the result.</text></choice>
+      <choice correct="false"><text>Non-immunized people will always fall sick.</text></choice>
+      <choice correct="true"><text>If others are immunized, fewer people will fall sick regardless of a particular individual's choice to get immunized or not.</text></choice>
+      <choice correct="true"><text>Trust in healthcare professionals and government officials is fragile.</text></choice>
+    </checkboxgroup>
+  </choiceresponse>
+
+   <solution>
+   <div class="detailed-solution">
+   <p>Explanation</p>
+   <p>People who are not immunized against a disease may still not fall sick from the disease. If someone is trying to learn whether or not preventative measures against the disease have any impact, he or she may see these people and conclude, since they have remained healthy despite not being immunized, that immunizations have no effect. Consequently, he or she would tend to believe that immunization (or other preventative measures) have fewer benefits than they actually do.</p>
+   </div>
+   </solution>
+  </problem>
+
+.. _Checkbox Problem XML:
+
+****************************
+Checkbox Problem XML 
+****************************
+
+============
+Template
+============
+
+.. code-block:: xml
+
+  <problem>
+    <p>Question text</p>
+
+  <choiceresponse>
+
+  <checkboxgroup direction="vertical" label="label text">
+  <choice correct="false"><text>Answer option 1 (incorrect)</text></choice>
+  <choice correct="true"><text>Answer option 2 (correct)</text></choice>
+  </checkboxgroup>
+  </choiceresponse>
+
+   <solution>
+   <div class="detailed-solution">
+   <p>Solution or Explanation Heading</p>
+   <p>Solution or explanation text</p>
+   </div>
+   </solution>
+
+  </problem>
+
+======
+Tags
+======
+
+* ``<choiceresponse>`` (required): Specifies that the problem contains options for students to choose from.
+* ``<checkboxgroup>`` (required): Specifies that the problem is a checkbox problem.
+* ``<choice>`` (required): Designates an answer option.
+
+**Tag:** ``<choiceresponse>``
+
+Specifies that the problem contains options for students to choose from.
+
+  Attributes
+
+  (none)
+
+  Children
+
+  * ``<checkboxgroup>``
+
+**Tag:** ``<checkboxgroup>``
+
+Specifies that the problem is a checkbox problem.
+
+  Attributes
+
+  .. list-table::
+     :widths: 20 80
+
+     * - Attribute
+       - Description
+     * - direction (optional)
+       - Specifies the orientation of the list of answers. The default is vertical.
+     * - label (required)
+       - Specifies the name of the response field.
+
+  Children
+
+  * ``<choice>`` 
+
+**Tag:** ``<choice>``
+
+Designates an answer option.
+
+  Attributes
+
+  .. list-table::
+     :widths: 20 80
+
+     * - Attribute
+       - Description
+     * - true (at least one required)
+       - Indicates a correct answer. For checkbox problems, one or more ``<choice>`` tags can contain a correct answer.
+     * - false (at least one required)
+       - Indicates an incorrect answer.
+
+  Children
+  
+  (none)

docs/en_us/shared/exercises_tools/chemical_equation.rst

+.. _Chemical Equation:
+
+################################
+Chemical Equation Problem
+################################
+
+The chemical equation problem type allows the student to enter text that represents a chemical equation into a text box. The system converts that text into a chemical equation below the text box. The grader evaluates the student's response by using a Python script that you create and embed in the problem.
+
+.. image:: /Images/ChemicalEquationExample.png
+ :alt: Image of a chemical equation response problem
+
+************************************
+Create the Chemical Equation Problem
+************************************
+
+Chemical equation problems use MathJax to create formulas. For more information about using MathJax in Studio, see :ref:`MathJax in Studio`.
+
+To create the above chemical equation problem:
+
+#. In the unit where you want to create the problem, click **Problem** under **Add New Component**, and then click the **Advanced** tab.
+#. Click **Blank Advanced Problem**.
+#. In the component that appears, click **Edit**.
+#. In the component editor, paste the code from below.
+#. Click **Save**.
+
+==========================================
+Sample Chemical Equation Problem Code
+==========================================
+
+.. code-block:: xml
+
+  <problem>
+    <startouttext/>
+    <p>Some problems may ask for a particular chemical equation. Practice by writing out the following reaction in the box below.</p>
+    
+  \( \text{H}_2\text{SO}_4 \longrightarrow \text { H}^+ + \text{ HSO}_4^-\)
+
+    <customresponse>
+      <chemicalequationinput size="50" label="Enter the chemical equation"/>
+      <answer type="loncapa/python">
+
+  if chemcalc.chemical_equations_equal(submission[0], 'H2SO4 -> H^+ + HSO4^-'):
+      correct = ['correct']
+  else:
+      correct = ['incorrect']
+
+      </answer>
+    </customresponse>
+    <p>Some tips:</p>
+    <ul>
+    <li>Use real element symbols.</li>
+    <li>Create subscripts by using plain text.</li>
+    <li>Create superscripts by using a caret (^).</li>
+    <li>Create the reaction arrow (\(\longrightarrow\)) by using "->".</li>
+    </ul>
+
+    <endouttext/>
+  
+   <solution>
+   <div class="detailed-solution">
+   <p>Solution</p>
+   <p>To create this equation, enter the following:</p>
+     <p>H2SO4 -> H^+ + HSO4^-</p>
+   </div>
+   </solution>
+  </problem>
+
+.. _Chemical Equation Problem XML:
+
+************************************
+Chemical Equation Problem XML
+************************************
+
+============
+Template
+============
+
+.. code-block:: xml
+
+  <problem>
+    <startouttext/>
+    <p>Problem text</p>
+
+    <customresponse>
+      <chemicalequationinput size="NUMBER" label="LABEL TEXT"/>
+      <answer type="loncapa/python">
+
+  if chemcalc.chemical_equations_equal(submission[0], 'TEXT REPRESENTING CHEMICAL EQUATION'):
+      correct = ['correct']
+  else:
+      correct = ['incorrect']
+
+      </answer>
+    </customresponse>
+
+    <endouttext/>
+  
+   <solution>
+   <div class="detailed-solution">
+   <p>Solution or Explanation Header</p>
+   <p>Solution or explanation text</p>
+   </div>
+   </solution>
+  </problem>
+
+======
+Tags
+======
+
+* ``<customresponse>``: Indicates that this problem has a custom response. 
+* ``<chemicalequationinput>``: Specifies that the answer to this problem is a chemical equation. 
+* ``<answer type=loncapa/python>``: Contains the Python script that grades the problem.
+
+**Tag:** ``<customresponse>``
+
+Indicates that this problem has a custom response. The ``<customresponse>`` tags must surround the ``<chemicalequation>`` tags.
+
+  Attributes
+
+  (none)
+
+  Children
+
+  * ``<chemicalequationinput>``
+  * ``<answer>``
+
+**Tag:** ``<chemicalequationinput>``
+
+Indicates that the answer to this problem is a chemical equation and creates a response field where the student enters an answer.
+
+  Attributes
+
+  .. list-table::
+     :widths: 20 80
+
+     * - Attribute
+       - Description
+     * - size 
+       - Specifies the size of the response field, in characters.
+     * - label (required)
+       - Contains the text of the principal question in the problem.
+
+  Children
+  
+  (none)
+
+**Tag:** ``<answer>``
+
+Contains the Python script that grades the problem.
+
+  Attributes
+
+  .. list-table::
+     :widths: 20 80
+
+     * - Attribute
+       - Description
+     * - type (required) 
+       - Must be "loncapa/python".
+
+  Children
+  
+  (none)
+     

docs/en_us/shared/exercises_tools/circuit_schematic_builder.rst

+.. _Circuit Schematic Builder:
+
+##################################
+Circuit Schematic Builder Problem
+##################################
+
+In circuit schematic builder problems, students can arrange circuit elements such as voltage sources, capacitors, resistors, and MOSFETs on an interactive grid. They then submit a DC, AC, or transient analysis of their circuit to the system for grading.
+
+.. image:: /Images/CircuitSchematicExample.png
+ :alt: Image of a circuit schematic builder
+
+*********************************************
+Create a Circuit Schematic Builder Problem
+*********************************************
+
+#. In the unit where you want to create the problem, click **Problem**
+   under **Add New Component**, and then click the **Advanced** tab.
+#. Click **Circuit Schematic Builder**.
+#. In the component that appears, click **Edit**.
+#. In the component editor, replace the example code with your own code.
+#. Click **Save**.
+
+**Problem Code**
+
+To create the problem in the image above, paste the following code into the Advanced Editor.
+
+.. code-block:: xml
+
+ <problem>
+    <p>Make a voltage divider that splits the provided voltage evenly.</p>
+      <schematicresponse>
+      <center>
+      <schematic height="500" width="600" parts="g,r" analyses="dc"
+      initial_value="[["v",[168,144,0],{"value":"dc(1)","_json_":0},["1","0"]],["r",[296,120,0],{"r":"1","_json_":1},["1","output"]],["L",[296,168,3],{"label":"output","_json_":2},["output"]],["w",[296,216,168,216]],["w",[168,216,168,192]],["w",[168,144,168,120]],["w",[168,120,296,120]],["g",[168,216,0],{"_json_":7},["0"]],["view",-67.49999999999994,-78.49999999999994,1.6000000000000003,"50","10","1G",null,"100","1","1000"]]"
+      />
+      </center>
+        <answer type="loncapa/python">
+      dc_value = "dc analysis not found"
+      for response in submission[0]:
+        if response[0] == 'dc':
+            for node in response[1:]:
+                dc_value = node['output']
+      if dc_value == .5:
+        correct = ['correct']
+      else:
+        correct = ['incorrect']
+      </answer>
+      </schematicresponse>
+    <schematicresponse>
+    <p>Make a high pass filter.</p>
+    <center>
+    <schematic height="500" width="600" parts="g,r,s,c" analyses="ac"
+    submit_analyses="{"ac":[["NodeA",1,9]]}"
+    initial_value="[["v",[160,152,0],{"name":"v1","value":"sin(0,1,1,0,0)","_json_":0},["1","0"]],["w",[160,200,240,200]],["g",[160,200,0],{"_json_":2},["0"]],["L",[240,152,3],{"label":"NodeA","_json_":3},["NodeA"]],["s",[240,152,0],{"color":"cyan","offset":"0","_json_":4},["NodeA"]],["view",64.55878906250004,54.114697265625054,2.5000000000000004,"50","10","1G",null,"100","1","1000"]]"/>
+    </center>
+    <answer type="loncapa/python">
+    ac_values = None
+    for response in submission[0]:
+      if response[0] == 'ac':
+          for node in response[1:]:
+              ac_values = node['NodeA']
+    print "the ac analysis value:", ac_values
+    if ac_values == None:
+      correct = ['incorrect']
+    elif ac_values[0][1] < ac_values[1][1]:
+      correct = ['correct']
+    else:
+      correct = ['incorrect']
+    </answer>
+    </schematicresponse>
+        <solution>
+            <div class="detailed-solution">
+                <p>Explanation</p>
+                <p>A voltage divider that evenly divides the input voltage can be formed with two identically valued resistors, with the sampled voltage taken in between the two.</p>
+                <p><img src="/c4x/edX/edX101/asset/images_voltage_divider.png"/></p>
+                <p>A simple high-pass filter without any further constaints can be formed by simply putting a resister in series with a capacitor. The actual values of the components do not really matter in order to meet the constraints of the problem.</p>
+                <p><img src="/c4x/edX/edX101/asset/images_high_pass_filter.png"/></p>
+            </div>
+        </solution>
+ </problem>
\ No newline at end of file

docs/en_us/shared/exercises_tools/conditional_module.rst

+.. _Conditional Module:
+
+####################
+Conditional Module
+####################
+
+********************
+Format description
+********************
+
+The main tag of conditional module input is:
+
+.. code-block:: xml
+
+    <conditional> ... </conditional>
+
+``conditional`` can include any number of any xmodule tags (``html``, ``video``, ``poll``, etc.) or ``show`` tags.
+
+================
+conditional tag
+================
+
+The main container for a single instance of a conditional module. The following attributes can
+be specified for this tag:
+
+.. code-block:: xml
+
+    sources - location id of required modules, separated by ';'
+    [message | ""] - message for case, where one or more are not passed. Here you can use variable {link}, which generate link to required module.
+
+    [submitted] - map to `is_submitted` module method.
+    (pressing RESET button makes this function to return False.)
+
+    [correct] - map to `is_correct` module method
+    [attempted] - map to `is_attempted` module method
+    [poll_answer] - map to `poll_answer` module attribute
+    [voted] - map to `voted` module attribute
+
+========
+show tag
+========
+
+Symlink to some set of xmodules. The following attributes can
+be specified for this tag:
+
+.. code-block:: xml
+
+    sources - location id of modules, separated by ';'
+
+*********
+Example
+*********
+
+========================================
+Examples of conditional depends on poll
+========================================
+
+.. code-block:: xml
+
+    <conditional sources="i4x://MITx/0.000x/poll_question/first_real_poll_seq_with_reset" poll_answer="man"
+    message="{link} must be answered for this to become visible.">
+        <html>
+            <h2>You see this because your vote value for "First question" was "man"</h2>
+        </html>
+    </conditional>
+
+========================================================
+Examples of conditional depends on poll (use <show> tag)
+========================================================
+
+.. code-block:: xml
+
+    <conditional sources="i4x://MITx/0.000x/poll_question/first_real_poll_seq_with_reset" poll_answer="man"
+    message="{link} must be answered for this to become visible.">
+        <html>
+            <show sources="i4x://MITx/0.000x/problem/test_1; i4x://MITx/0.000x/Video/Avi_resources; i4x://MITx/0.000x/problem/test_1"/>
+        </html>
+    </conditional>
+
+================================================
+Examples of conditional depends on problem
+================================================
+
+.. code-block:: xml
+
+    <conditional sources="i4x://MITx/0.000x/problem/Conditional:lec27_Q1" attempted="True">
+        <html display_name="HTML for attempted problem">You see this, cause "lec27_Q1" is attempted.</html>
+    </conditional>
+    <conditional sources="i4x://MITx/0.000x/problem/Conditional:lec27_Q1" attempted="False">
+        <html display_name="HTML for not attempted problem">You see this because "lec27_Q1" is not attempted.</html>
+    </conditional>

docs/en_us/shared/exercises_tools/create_exercises_and_tools.rst

+.. _Create Exercises:
+
+############################
+Creating Exercises and Tools
+############################
+
+************************************
+Introduction to  Exercises and Tools
+************************************
+
+Studio allows you to create a wide variety of exercises and tools for your course. Many of these exercises and tools have templates in Studio so that you can create them easily. In addition, individual course teams frequently create exercises that don't have templates in Studio. We're striving to make these tools available to all our course teams as well, and we have instructions for creating some of them in this section. 
+
+Depending on the exercise or tool, you'll use an HTML, Problem, or Advanced component. The page for each individual exercise or tool contains an example of each exercise or tool, together with all the files, code, and step-by-step instructions that you need to create the exercise or tool. 
+
+.. note:: Problems must include labels for accessibility. The label generally includes the text of the main question in your problem. Instructions for adding labels appear in the page for each individual problem.
+
+****************************
+General Exercises and Tools
+****************************
+
+.. list-table::
+   :widths: 25 25 50
+
+   * - .. image:: /Images/AnnotationExample.png
+          :width: 100
+          :alt: Example annotation problem
+     - :ref:`Annotation`
+     - Annotation problems ask students to respond to questions about a specific block of text. The question appears above the text when the student hovers the mouse over the highlighted text so that students can think about the question as they read.
+   * - .. image:: /Images/PollExample.png
+          :width: 100
+          :alt: Example poll
+     - :ref:`Conditional Module`
+     -  You can create a conditional module to control versions of content that groups of students see. For example, students who answer "Yes" to a poll question then see a different block of text from the students who answer "No" to that question.
+   * - .. image:: /Images/JavaScriptInputExample.png
+          :width: 100
+          :alt: Example JavaScript problem
+     - :ref:`Custom JavaScript`
+     - Custom JavaScript display and grading problems (also called *custom JavaScript problems* or *JS Input problems*) allow you to create a custom problem or tool that uses JavaScript and then add the problem or tool directly into Studio.
+   * - .. image:: /Images/external-grader-correct.png
+          :width: 100
+          :alt: Example external grader
+     - :ref:`External Grader`
+     - An external grader is a service that receives student responses to a problem, processes those responses, and returns feedback and a problem grade to the edX platform. You build and deploy an external grader separately from the edX platform. An external grader is particularly useful for software programming courses where students are asked to submit complex code.
+   * - .. image:: /Images/GoogleHangout_WithPeople.png   
+          :width: 100
+          :alt: Google Hangout
+     - :ref:`Google Instant Hangout`
+     - You can add the ability for students to participate in instant hangouts directly from your course. With instant hangouts, students can interact through live video and voice, share screens and watch videos together, and collaborate on documents. 
+   * - .. image:: /Images/IFrame_1.png
+          :width: 100
+          :alt: Example IFrame tool
+     - :ref:`IFrame`
+     - IFrames allow you to integrate ungraded exercises and tools from any Internet site into an HTML component in your course.
+   * - .. image:: /Images/LTIExample.png
+          :width: 100
+          :alt: Example LTI component
+     - :ref:`LTI Component`
+     - LTI components allow you to add an external learning application or non-PDF textbook to Studio.
+   * - .. image:: /Images/CITL_AssmtTypes.png
+          :width: 100
+          :alt: Example open response assessment
+     - :ref:`Open Response Assessment`
+     - In open response assessments, students receive feedback on written responses of varying lengths as well as files, such as computer code or images, that the students upload. Open response assessments include self assessment and peer assessment.
+   * - .. image:: /Images/PollExample.png
+          :width: 100
+          :alt: Example poll
+     - :ref:`Poll`
+     - You can run polls in your course so that your students can share opinions on different questions.
+   * - .. image:: /Images/ProblemWithAdaptiveHintExample.png
+          :width: 100
+          :alt: Example problem with adaptive hint
+     - :ref:`Problem with Adaptive Hint`
+     - A problem with an adaptive hint evaluates a student's response, then gives the student feedback or a hint based on that response so that the student is more likely to answer correctly on the next attempt. These problems can be text input or multiple choice problems.
+   * - .. image:: /Images/ProblemWrittenInLaTeX.png
+          :width: 100
+          :alt: Example problem written in LaTeX
+     - :ref:`Problem Written in LaTeX`
+     - If you have an problem that is already written in LaTeX, you can use this problem type to easily convert your code into XML.
+   * - .. image:: /Images/TextInputExample.png
+          :width: 100
+          :alt: Example text input problem
+     - :ref:`Text Input`
+     - In text input problems, students enter text into a response field. The response can include numbers, letters, and special characters such as punctuation marks.
+   * - .. image:: /Images/WordCloudExample.png
+          :width: 100
+          :alt: Example word cloud
+     - :ref:`Word Cloud`
+     - Word clouds arrange text that students enter - for example, in response to a question - into a colorful graphic that students can see.
+   * - .. image:: /Images/CustomPythonExample.png  
+          :width: 100
+          :alt: Example write-your-own-grader problem
+     - :ref:`Write Your Own Grader`
+     - In custom Python-evaluated input (also called "write-your-own-grader") problems, the grader uses a Python script that you create and embed in the problem to evaluates a student's response or provide hints. These problems can be any type.
+   * - .. image:: /Images/VitalSource.png
+          :width: 100
+          :alt: VitalSource e-book with highlighted note
+     - :ref:`VitalSource`
+     - The VitalSource Online Bookshelf e-reader allows students to read, browse, and search content (including figures and notes), as well as work with multiple highlighters and copy notes into external documents.
+
+********************************
+Image-Based Exercises and Tools
+********************************
+
+.. list-table::
+   :widths: 30 25 80
+
+   * - .. image:: /Images/DragAndDropProblem.png
+          :width: 100
+          :alt: Example drag and drop problem
+     - :ref:`Drag and Drop`
+     - In drag and drop problems, students respond to a question by dragging text or objects to a specific location on an image.
+   * - .. image:: /Images/image-modal.png
+          :width: 100
+          :alt: Example full screen image tool
+     - :ref:`Full Screen Image`
+     - The Full Screen Image tool allows a student to enlarge an image in the whole browser window. This is useful when the image contains a large amount of detail and text that is easier to view in context when enlarged.
+   * - .. image:: /Images/ImageMappedInputExample.png
+          :width: 100
+          :alt: Example image mapped input problem
+     - :ref:`Image Mapped Input`
+     - In an image mapped input problem, students click inside a defined area in an image. You define this area by including coordinates in the body of the problem.
+   * - .. image:: /Images/Zooming_Image.png
+          :width: 100
+          :alt: Example zooming image tool
+     - :ref:`Zooming Image`
+     - Zooming images allow you to enlarge sections of an image so that students can see the section in detail.
+
+************************************
+Multiple Choice Exercises and Tools
+************************************
+
+.. list-table::
+   :widths: 30 25 80
+
+   * - .. image:: /Images/CheckboxExample.png
+          :width: 100
+          :alt: Example checkbox problem
+     - :ref:`Checkbox`
+     - In checkbox problems, the student selects one or more options from a list of possible answers. The student must select all the options that apply to answer the problem correctly.
+   * - .. image:: /Images/DropdownExample.png
+          :width: 100
+          :alt: Example dropdown problem
+     - :ref:`Dropdown`
+     - Dropdown problems allow the student to choose from a collection of answer options, presented as a dropdown list. Unlike multiple choice problems, whose answers are always visible directly below the question, dropdown problems don't show answer choices until the student clicks the dropdown arrow.
+   * - .. image:: /Images/MultipleChoiceExample.png
+          :width: 100
+          :alt: Example multiple choice problem
+     - :ref:`Multiple Choice`
+     - In multiple choice problems, students select one option from a list of answer options. Unlike with dropdown problems, whose answer choices don't appear until the student clicks the drop-down arrow, answer choices for multiple choice problems are always visible directly below the question.
+   * - .. image:: /Images/MultipleChoice_NumericalInput.png
+          :width: 100
+          :alt: Example multiple choice and numerical input problem
+     - :ref:`Multiple Choice and Numerical Input`
+     - You can create a problem that combines a multiple choice and numerical input problems. Students not only select a response from options that you provide, but also provide more specific information, if necessary.
+
+********************************
+STEM Exercises and Tools
+********************************
+
+.. list-table::
+   :widths: 30 25 80
+
+   * - .. image:: /Images/ChemicalEquationExample.png
+          :width: 100
+          :alt: Example chemical equation problem
+     - :ref:`Chemical Equation`
+     - Chemical equation problems allow the student to enter text that represents a chemical equation into a text box. The grader evaluates the student's response by using a Python script that you create and embed in the problem.
+   * - .. image:: /Images/CircuitSchematicExample_short.png
+          :width: 100
+          :alt: Example circuit schematic builder problem
+     - :ref:`Circuit Schematic Builder`
+     - In circuit schematic builder problems, students can arrange circuit elements such as voltage sources, capacitors, resistors, and MOSFETs on an interactive grid. They then submit a DC, AC, or transient analysis of their circuit to the system for grading.
+   * - .. image:: /Images/GeneExplorer.png
+          :width: 100
+          :alt: Example gene explorer problem
+     - :ref:`Gene Explorer`
+     - The Gene Explorer (GeneX) simulates the transcription, splicing, processing, and translation of a small hypothetical eukaryotic gene. GeneX allows students to make specific mutations in a gene sequence, and it then calculates and displays the effects of the mutations on the mRNA and protein.
+   * - .. image:: /Images/MathExpressionInputExample.png
+          :width: 100
+          :alt: Example math expression input problem
+     - :ref:`Math Expression Input`
+     - The more complex of Studio's two types of math problems. In math expression input problems, students enter mathematical expressions to answer a question. These problems can include unknown variables and more complex symbolic expressions. You can specify a correct answer either explicitly or by using a Python script. 
+   * - .. image:: /Images/Molecule_Editor.png
+          :width: 100
+          :alt: Example molecule editor problem
+     - :ref:`Molecule Editor`
+     - The molecule editor allows students to draw molecules that follow the rules for covalent bond formation and formal charge, even if the molecules are chemically impossible, are unstable, or do not exist in living systems.
+   * - .. image:: /Images/image292.png
+          :width: 100
+          :alt: Example numerical input problem
+     - :ref:`Numerical Input`
+     - The simpler of Studio's two types of math problems. In numerical input problems, students enter numbers or specific and relatively simple mathematical expressions to answer a question. These problems only allow integers and a few select constants. You can specify a margin of error, and you can specify a correct answer either explicitly or by using a Python script.
+   * - .. image:: /Images/Periodic_Table.png
+          :width: 100
+          :alt: Example periodic table problem
+     - :ref:`Periodic Table`
+     - An interactive periodic table of the elements shows detailed information about each element as the student moves the mouse over the element.
+   * - .. image:: /Images/ProteinBuilder.png
+          :width: 100
+          :alt: Example protein builder problem
+     - :ref:`Protein Builder`
+     - The Protex protein builder asks students to create specified protein shapes by stringing together amino acids. 
\ No newline at end of file

docs/en_us/shared/exercises_tools/custom_javascript.rst

+.. _Custom JavaScript:
+
+###########################
+Custom JavaScript Problem
+###########################
+
+Custom JavaScript display and grading problems (also called *custom JavaScript problems*
+or *JS Input problems*) allow you to create a custom problem or tool that uses JavaScript
+and then add the problem or tool directly into Studio. When you create a JS Input problem,
+Studio embeds the problem in an inline frame (IFrame) so that your students can interact with
+it in the LMS. You can grade your students’ work using JavaScript and some basic Python, and
+the grading is integrated into the edX grading system.
+
+The JS Input problem that you create must use HTML, JavaScript, and cascading style sheets
+(CSS). You can use any application creation tool, such as the Google Web Toolkit (GWT), to
+create your JS Input problem.
+
+.. image:: /Images/JavaScriptInputExample.png
+ :alt: Image of a JavaScript Input problem
+
+************************************************************
+Create a Custom JavaScript Display and Grading Problem
+************************************************************
+
+#. Create your JavaScript application, and then upload all files associated with
+   that application to the **Files & Uploads** page.
+#. In the unit where you want to create the problem, click **Problem**
+   under **Add New Component**, and then click the **Advanced** tab.
+#. Click **Custom JavaScript Display and Grading**.
+#. In the component that appears, click **Edit**.
+#. In the component editor, modify the example code according to your problem.
+
+   - All problems have more than one element. Most problems conform to the same-origin
+     policy (SOP), meaning that all elements have the same protocol, host, and port.
+     For example, **http**://**store.company.com**:**81**/subdirectory_1/JSInputElement.html and
+     **http**://**store.company.com**:**81**/subdirectory_2/JSInputElement.js have the same protocol
+     (http), host (store.company.com), and port (81).
+
+     If any elements of your problem use a different protocol, host, or port, you need to
+     bypass the SOP. For example, **https**://**info.company.com**/JSInputElement2.html
+     uses a different protocol, host, and port. To bypass the SOP, change
+     **sop="false"** in line 8 of the example code to **sop="true"**. For more information, see the same-origin policy
+     page on the `Mozilla Developer Network <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript>`_
+     or on `Wikipedia <http://en.wikipedia.org/wiki/Same_origin_policy>`_.
+#. If you want your problem to have a **Save** button, click the **Settings** tab, and then set
+   **Maximum Attempts** to a number larger than zero.
+#. Click **Save**.
+
+================================
+Re-create the Example Problem
+================================
+
+To re-create the example problem above, you'll need the following files.
+
+   - webGLDemo.html
+   - webGLDemo.js
+   - webGLDemo.css
+   - three.min.js
+
+To download these files in a .zip archive, go to http://files.edx.org/JSInput.zip.
+
+.. note:: If you need to bypass the SOP, you'll also need the **jschannel.js** file, and your webGLDemo.html file will be slightly different. To download all these files in a .zip archive, go to http://files.edx.org/JSInput_BypassSOP.zip.
+
+#. Download and unpackage the files in either the JSInput.zip file or the JSInput_BypassSOP.zip file.
+#. On the **Files & Uploads** page, upload all the files from the .zip file.
+#. Create a new custom JavaScript display and grading problem component.
+#. On the **Settings** tab, set **Maximum Attempts** to a number larger than
+   zero.
+#. In the problem component editor, replace the example code with the code below.
+#. Click **Save.**
+
+================================
+JavaScript Input Problem Code
+================================
+
+.. code-block:: xml
+
+    <problem display_name="webGLDemo">
+    In the image below, click the cone.
+
+    <script type="loncapa/python">
+    import json
+    def vglcfn(e, ans):
+        '''
+        par is a dictionary containing two keys, "answer" and "state"
+        The value of answer is the JSON string returned by getGrade
+        The value of state is the JSON string returned by getState
+        '''
+        par = json.loads(ans)
+        # We can use either the value of the answer key to grade
+        answer = json.loads(par["answer"])
+        return answer["cylinder"]  and not answer["cube"]
+        # Or we can use the value of the state key
+        '''
+        state = json.loads(par["state"])
+        selectedObjects = state["selectedObjects"]
+        return selectedObjects["cylinder"] and not selectedObjects["cube"]
+        '''
+    </script>
+    <customresponse cfn="vglcfn">
+        <jsinput
+            gradefn="WebGLDemo.getGrade"
+            get_statefn="WebGLDemo.getState"
+            set_statefn="WebGLDemo.setState"
+            width="400"
+            height="400"
+            html_file="/static/webGLDemo.html"
+        />
+    </customresponse>
+    </problem>
+
+
+.. note::    When you create this problem, keep the following in mind.
+
+ - The webGLDemo.js file defines the three JavaScript functions (**WebGLDemo.getGrade**, **WebGLDemo.getState**, and **WebGLDemo.setState**).
+
+ - The JavaScript input problem code uses **WebGLDemo.getGrade**, **WebGLDemo.getState**, and **WebGLDemo.setState** to grade, save, or restore a problem. These functions must be global in scope.
+
+ - **WebGLDemo.getState** and **WebGLDemo.setState** are optional. You only have to define these functions if you want to conserve the state of the problem.
+
+ - **Width** and **height** represent the dimensions of the IFrame that holds the application.
+
+ - When the problem opens, the cone and the cube are both blue, or "unselected." When you click either shape once, the shape becomes yellow, or "selected." To unselect the shape, click it again. Continue clicking the shape to select and unselect it.
+
+ - The response is graded as correct if the cone is selected (yellow) when the user clicks **Check**.
+
+ - Clicking **Check** or **Save** registers the problem's current state.
+
+
+.. _JS Input Problem XML:
+
+******************************
+JavaScript Input Problem XML 
+******************************
+
+JSInput allows problem authors to turn stand-alone HTML files into problems that can be integrated into the edX platform. Since its aim is flexibility, it can be seen as the input and client-side equivalent of **CustomResponse**.
+
+A JSInput exercise creates an IFrame in a static HTML page, and passes the return value of author-specified functions to the enclosing response type (generally **CustomResponse**). JSInput can also store and retrieve state.
+
+========
+Template
+========
+
+The following is the basic format of a JSInput problem:
+
+.. code-block:: xml
+
+ <problem>
+        <script type="loncapa/python">
+ def all_true(exp, ans): return ans == "hi"
+        </script>
+        <customresponse cfn="all_true">
+            <jsinput gradefn="gradefn" 
+                height="500"
+                get_statefn="getstate"
+                set_statefn="setstate"
+                html_file="/static/jsinput.html"/>
+        </customresponse>
+ </problem>
+
+The accepted attributes are:
+
+==============  ==============  =========  ==========
+Attribute Name   Value Type     Required   Default
+==============  ==============  =========  ==========
+html_file        URL string     Yes        None
+gradefn          Function name  Yes        `gradefn`
+set_statefn      Function name  No         None
+get_statefn      Function name  No         None
+height           Integer        No         `500`
+width            Integer        No         `400`
+==============  ==============  =========  ==========
+
+========================
+Required Attributes
+========================
+
+* **html_file**
+
+  The **html_file** attribute specifies the HTML file that the IFrame will point to. The HTML file
+  must be located in the content directory.
+
+  The IFrame is created using the sandbox attribute. Although pop-ups, scripts, and pointer locks are allowed, the IFrame cannot access its parent's attributes.
+
+  The HTML file must contain a **gradefn** function that the JSInput file can access. To determine whether the **gradefn** function is accessible, in the console, make sure that **gradefn** returns the right thing. When JSInput uses the **gradefn** function, `gradefn` is called with `gradefn`.call(`obj`), where **obj** is the object-part of **gradefn**. For example, if **gradefn** is **myprog.myfn**, JSInput calls **myprog.myfun.call(myprog)**. (This is to ensure "`this`" continues to refer to what `gradefn` expects.)
+
+  Aside from that, more or less anything goes. Note that currently there is no support for inheriting CSS or JavaScript from the parent (aside from the Chrome-only **seamless** attribute, which is set to True by default).
+
+* **gradefn**
+
+  The **gradefn** attribute specifies the name of the function that will be called when a user clicks **Check**, and that returns the student's answer. Unless both the **get_statefn** and **set_statefn** attributes are also used, this answer is passed as a string to the enclosing response type. In the **customresponse** example above, this means **cfn** will be passed this answer as ``ans``.
+
+  If the **gradefn** function throws an exception when a student attempts to submit a problem, the submission is aborted, and the student receives a generic alert. The alert can be customised by making the exception name ``Waitfor Exception``; in that case, the alert message will be the exception message.
+
+  .. important:: To make sure the student's latest answer is passed correctly, make sure that the **gradefn** function is not asynchronous. Additionally, make sure that the function returns promptly. Currently the student has no indication that her answer is being calculated or produced.
+
+========================
+Optional Attributes
+========================
+
+* **set_statefn**
+
+  Sometimes a problem author will want information about a student's previous answers ("state") to be saved and reloaded. If the attribute **set_statefn** is used, the function given as its value will be passed the state as a string argument whenever there is a state, and the student returns to a problem. The function has the responsibility to then use this state approriately.
+
+  The state that is passed is:
+
+  * The previous output of **gradefn** (i.e., the previous answer) if **get_statefn** is not defined.
+  * The previous output of **get_statefn** (see below) otherwise.
+
+  It is the responsibility of the iframe to do proper verification of the argument that it receives via **set_statefn**.
+
+* **get_statefn**
+
+  Sometimes the state and the answer are quite different. For instance, a problem that involves using a javascript program that allows the student to alter a molecule may grade based on the molecule's hydrophobicity, but from the hydrophobicity it might be incapable of restoring the state. In that case, a
+  *separate* state may be stored and loaded by **set_statefn**. Note that if **get_statefn** is defined, the answer (i.e., what is passed to the enclosing response type) will be a json string with the following format:
+
+  .. code-block:: xml
+
+      {
+          answer: `[answer string]`
+          state: `[state string]`
+      }
+
+
+  The enclosing response type must then parse this as json.
+
+* **height** and **width**
+
+  The **height** and **width** attributes are straightforward: they specify the height and width of the IFrame. Both are limited by the enclosing DOM elements, so for instance there is an implicit max-width of around 900. 
+
+  In the future, JSInput may attempt to make these dimensions match the HTML file's dimensions (up to the aforementioned limits), but currently it defaults to `500` and `400` for **height** and **width**, respectively.
+
+

docs/en_us/shared/exercises_tools/custom_python.rst

+.. _Write Your Own Grader:
+
+##############################
+Write-Your-Own-Grader Problem
+##############################
+
+In custom Python-evaluated input (also called "write-your-own-grader" problems), the grader uses a Python script that you create and embed in the problem to evaluates a student's response or provide hints. These problems can be any type. Numerical input and text input problems are the most popular write-your-own-grader problems.
+
+.. image:: /Images/CustomPythonExample.png
+ :alt: Image of a write your own grader problem
+
+Custom Python-evaluated input problems can include the following:
+
+* :ref:`Chemical Equation`
+* :ref:`Custom JavaScript`
+* :ref:`Gene Explorer`
+* :ref:`Molecule Editor`
+* :ref:`Protein Builder`
+
+.. list-table::
+   :widths: 20 80
+
+   * - ``<script type="loncapa/python">``
+     - Indicates that the problem contains a Python script.
+   * - ``<customresponse cfn="test_add_to_ten">``
+     - 
+   * - ``<customresponse cfn="test_add" expect="20">``
+     - 
+   * - <textline size="10" correct_answer="3"/>
+     - This tag includes the ``size``, ``correct_answer``, and ``label`` attributes. The ``correct_answer`` attribute is optional.
+
+You can create one of these problems in :ref:`Answer Tag Format` or :ref:`Script Tag Format`.
+
+.. _Answer Tag Format:
+
+**************************
+Answer Tag Format
+**************************
+
+The answer tag format encloses the Python script in an ``<answer>`` tag:
+
+.. code-block:: xml
+
+  <answer>
+  if answers[0] == expect:
+      correct[0] = 'correct'
+      overall_message = 'Good job!'
+  else:
+      correct[0] = 'incorrect'
+      messages[0] = 'This answer is incorrect'
+      overall_message = 'Please try again'
+  </answer>
+
+.. important:: Python honors indentation. Within the ``<answer>`` tag, you must begin your script with no indentation.
+
+The Python script interacts with these variables in the global context:
+
+* ``answers``: An ordered list of answers the student provided. For example, if the student answered ``6``, ``answers[0]`` would equal ``6``.
+* ``expect``: The value of the ``expect`` attribute of ``<customresponse>`` (if provided).
+* ``correct``: An ordered list of strings indicating whether the student answered the question correctly.  Valid values are ``"correct"``, ``"incorrect"``, and ``"unknown"``.  You can set these values in the script.
+* ``messages``: An ordered list of messages that appear under each response field in the problem. You can use this to provide hints to users. For example, if you include ``messages[0] = "The capital of California is Sacramento"``, that message appears under the first response field in the problem.
+* ``overall_message``: A message that appears beneath the entire problem. You can use this to provide a hint that applies to the entire problem rather than a particular response field.
+
+========================================================================
+Create a Custom Python-Evaluated Input Problem in Answer Tag Format
+========================================================================
+
+To create a custom Python-evaluated input problem using an ``<answer>`` tag:
+
+#. In the unit where you want to create the problem, click **Problem**
+   under **Add New Component**, and then click the **Advanced** tab.
+#. Click **Custom Python-Evaluated Input**.
+#. In the component that appears, click **Edit**.
+#. In the component editor, replace the example code with the following code.
+#. Click **Save**.
+
+.. code-block:: xml
+
+    <problem>
+        <p>What is the sum of 2 and 3?</p>
+
+        <customresponse expect="5">
+        <textline math="1" />
+        </customresponse>
+
+        <answer>
+    if answers[0] == expect:
+        correct[0] = 'correct'
+        overall_message = 'Good job!'
+    else:
+        correct[0] = 'incorrect'
+        messages[0] = 'This answer is incorrect'
+        overall_message = 'Please try again'
+        </answer>
+    </problem>
+
+.. important:: Python honors indentation. Within the ``<answer>`` tag, you must begin your script with no indentation.
+
+.. _Script Tag Format:
+
+**************************
+Script Tag Format
+**************************
+
+The script tag format encloses a Python script that contains a "check function" in a ``<script>`` tag, and adds the ``cfn`` attribute of the ``<customresponse>`` tag to reference that function:
+
+.. code-block:: xml
+
+  <problem>
+
+  <script type="loncapa/python">
+
+  def test_add(expect, ans):
+      try:
+          a1=int(ans[0])
+          a2=int(ans[1])
+          return (a1+a2) == int(expect)
+      except ValueError:
+          return False
+
+  def test_add_to_ten(expect, ans):
+      return test_add(10, ans)
+
+  </script>
+
+  <p>Enter two integers that sum to 10. </p>
+  <customresponse cfn="test_add_to_ten">
+          <textline size="10"/><br/>
+          <textline size="10/>
+  </customresponse>
+
+    </problem>
+
+**Important**: Python honors indentation. Within the ``<script>`` tag, the ``def check_func(expect, ans):`` line must have no indentation.
+
+The **check** function accepts two arguments:
+
+* ``expect`` is the value of the ``expect`` attribute of ``<customresponse>`` (if provided)
+* ``answer`` is either:
+
+    * The value of the answer the student provided, if the problem only has one response field.
+    * An ordered list of answers the student provided, if the problem has multiple response fields.
+
+The **check** function can return any of the following to indicate whether the student's answer is correct:
+
+* ``True``: Indicates that the student answered correctly for all response fields.
+* ``False``: Indicates that the student answered incorrectly. All response fields are marked as incorrect.
+* A dictionary of the form: ``{ 'ok': True, 'msg': 'Message' }``
+  If the dictionary's value for ``ok`` is set to ``True``, all response fields are marked correct; if it is set to ``False``, all response fields are marked incorrect. The ``msg`` is displayed beneath all response fields, and it may contain XHTML markup.
+* A dictionary of the form 
+
+.. code-block:: xml
+      
+    
+    { 'overall_message': 'Overall message',
+        'input_list': [
+            { 'ok': True, 'msg': 'Feedback for input 1'},
+            { 'ok': False, 'msg': 'Feedback for input 2'},
+            ... ] }
+
+The last form is useful for responses that contain multiple response fields. It allows you to provide feedback for each response field individually, as well as a message that applies to the entire response.
+
+Example of a checking function:
+
+.. code-block:: python
+
+    def check_func(expect, answer_given):
+        check1 = (int(answer_given[0]) == 1)
+        check2 = (int(answer_given[1]) == 2)
+        check3 = (int(answer_given[2]) == 3)
+        return {'overall_message': 'Overall message',
+                    'input_list': [
+                        { 'ok': check1, 'msg': 'Feedback 1'},
+                        { 'ok': check2, 'msg': 'Feedback 2'},
+                        { 'ok': check3, 'msg': 'Feedback 3'} ] }
+
+The function checks that the user entered ``1`` for the first input, ``2`` for the  second input, and ``3`` for the third input. It provides feedback messages for each individual input, as well as a message displayed beneath the entire problem.
+
+========================================================================
+Create a Custom Python-Evaluated Input Problem in Script Tag Format
+========================================================================
+
+To create a custom Python-evaluated input problem using a ``<script>`` tag:
+
+#. In the unit where you want to create the problem, click **Problem**
+   under **Add New Component**, and then click the **Advanced** tab.
+#. Click **Custom Python-Evaluated Input**.
+#. In the component that appears, click **Edit**.
+#. In the component editor, replace the example code with the following code.
+#. Click **Save**.
+
+**Problem Code**:
+
+.. code-block:: xml
+
+  <problem>
+  <p>This question has two parts.</p>
+
+  <script type="loncapa/python">
+
+  def test_add(expect, ans):
+      try:
+          a1=int(ans[0])
+          a2=int(ans[1])
+          return (a1+a2) == int(expect)
+      except ValueError:
+          return False
+
+  def test_add_to_ten(expect, ans):
+      return test_add(10, ans)
+
+  </script>
+
+  <p>Part 1: Enter two integers that sum to 10. </p>
+  <customresponse cfn="test_add_to_ten">
+          <textline size="10" correct_answer="3" label="Integer #1"/><br/>
+          <textline size="10" correct_answer="7" label="Integer #2"/>
+  </customresponse>
+
+  <p>Part 2: Enter two integers that sum to 20. </p>
+  <customresponse cfn="test_add" expect="20">
+          <textline size="10" label="Integer #1"/><br/>
+          <textline size="10" label="Integer #2"/>
+  </customresponse>
+
+  <solution>
+      <div class="detailed-solution">
+          <p>Explanation</p>
+          <p>For part 1, any two numbers of the form <i>n</i> and <i>10-n</i>, where <i>n</i> is any integer, will work. One possible answer would be the pair 0 and 10.</p>
+          <p>For part 2, any pair <i>x</i> and <i>20-x</i> will work, where <i>x</i> is any real number with a finite decimal representation. Both inputs have to be entered either in standard decimal notation or in scientific exponential notation. One possible answer would be the pair 0.5 and 19.5. Another way to write this would be 5e-1 and 1.95e1.</p>
+      </div>
+  </solution>
+  </problem>
+
+**Templates**
+
+The following template includes answers that appear when the student clicks **Show Answer**. 
+
+.. code-block:: xml
+
+  <problem>
+
+  <script type="loncapa/python">
+  def test_add(expect,ans):
+    a1=float(ans[0])
+    a2=float(ans[1])
+    return (a1+a2)== float(expect)
+  </script>
+
+  <p>Problem text</p>
+  <customresponse cfn="test_add" expect="20">
+          <textline size="10" correct_answer="11" label="Integer #1"/><br/>
+          <textline size="10" correct_answer="9" label="Integer #2"/>
+  </customresponse>
+
+      <solution>
+          <div class="detailed-solution">
+            <p>Solution or Explanation Heading</p>
+            <p>Solution or explanation text</p>
+          </div>
+      </solution>
+  </problem>
+
+The following template does not return answers when the student clicks **Show Answer**. If your problem doesn't include answers for the student to see, make sure to set **Show Answer** to **Never** in the problem component.
+
+.. code-block:: xml
+
+  <problem>
+
+  <script type="loncapa/python">
+  def test_add(expect,ans):
+    a1=float(ans[0])
+    a2=float(ans[1])
+    return (a1+a2)== float(expect)
+  </script>
+
+  <p>Enter two real numbers that sum to 20: </p>
+  <customresponse cfn="test_add" expect="20">
+          <textline size="10"  label="Integer #1"/><br/>
+          <textline size="10"  label="Integer #2"/>
+  </customresponse>
+
+      <solution>
+          <div class="detailed-solution">
+            <p>Solution or Explanation Heading</p>
+            <p>Solution or explanation text</p>
+          </div>
+      </solution>
+  </problem>
+

docs/en_us/shared/exercises_tools/drag_and_drop.rst

+.. _Drag and Drop:
+
+##########################
+Drag and Drop Problem
+##########################
+
+In drag and drop problems, students respond to a question by dragging text or objects to a specific location on an image.
+
+.. image:: /Images/DragAndDropProblem.png
+ :alt: Image of a drag and drop problem
+
+*********************************
+Create a Drag and Drop Problem
+*********************************
+
+To create a simple drag and drop problem in which students drag labels onto an image, you'll upload the image that you want students to drag labels onto, and then create a Problem component.
+
+#. On the **Files & Uploads** page, upload your image file. For more information about uploading files, see :ref:`Add Files to a Course`.
+#. In the unit where you want to create the problem, click **Problem** under **Add New Component**, and then click the **Advanced** tab.
+#. Click **Drag and Drop**.
+#. In the component that appears, click **Edit**.
+#. In the component editor, replace the example text with the text of your problem.
+#. In the ``<drag_and_drop_input>`` tag, replace **https://studio.edx.org/c4x/edX/DemoX/asset/L9_buckets.png** with the URL of your image file on the **Files & Uploads** page (for example, **/static/Image.png**). 
+#. For at least one ``<draggable>`` tag, replace the text of the **label** attribute with the text of the label you want students to drag. For example, if you want students to drag the word "Iceland" onto your image, the new tag would resemble the following:
+   
+   ``<draggable id="1" label="Iceland"/>``
+
+8. Repeat the previous step for all the labels that you want to use. Make sure that the **id** attribute is different for each ``<draggable>`` tag.
+#. Determine the coordinates and radius of the correct area on the image.  
+#. Under ``correct_answer = {``, add an entry for each label, using the following format. These values are in pixels:
+
+    ``'id':    [[x coordinate, y coordinate], radius]``
+
+    For example, if your image is 600 pixels wide and 400 pixels high, and you want your students to drag the Iceland label to an area in the upper-left part of the image and drag a Sweden label near the lower-right part of your image, the code would resemble the following (where 2 is the ID for the Sweden label):
+
+    .. code-block:: xml
+
+        correct-answer = {
+                '1':    [[50, 50], 75]
+                '2':    [[550, 350], 75]}
+
+    .. note:: Make sure the code contains the closing curly brace (**}**). 
+#. Click **Save**.
+
+==========================================
+Sample Drag and Drop Problem Code
+==========================================
+
+To create the drag and drop problem that appears in the image above, you'll download two files from edX, upload these files to to the **Files & Uploads** page, and then add the code for the problem to a Problem component.
+
+#. Download the following files from edX:
+
+  * Allopurinol.gif
+  * AllopurinolAnswer.gif
+
+  To download both these files in a .zip archive, click http://files.edx.org/DragAndDropProblemFiles.zip.
+
+2. Upload the Allopurinol.gif and AllopurinolAnswer.gif files to the **Files & Uploads** page.
+#. In the unit where you want to create the problem, click **Problem** under **Add New Component**, and then click the **Advanced** tab.
+#. Click **Drag and Drop**.
+#. In the component that appears, click **Edit**.
+#. In the component editor, replace the example code with the following code.
+#. Click **Save**.
+
+**Problem Code**:
+
+.. code-block:: xml
+
+  <problem>
+    <p> Allopurinol is a drug used to treat and prevent gout, a very painful form of arthritis. Once only a “rich man’s disease”, gout has become more and more common in recent decades – affecting about 3 million people in the United States alone. Deposits of needle-like crystals of uric acid in connective tissue or joint spaces cause the symptoms of swelling, stiffness and intense pain. Individuals with gout overproduce uric acid because they cannot eliminate it efficiently. Allopurinol treats and prevents gout by stopping the overproduction of uric acid through inhibition of an enzyme required for the synthesis of uric acid. </p>
+    <p> You are shown one of many possible molecules. On the structure of allopurinol below, identify the functional groups that are present by dragging the functional group name listed onto the appropriate target boxes on the structure. If you want to change an answer, you have to drag off the name as well. You may need to scroll through the names of functional groups to see all options. </p>
+    <customresponse>
+      <drag_and_drop_input no_labels="true" one_per_target="true" target_outline="true" img="/static/Allopurinol.gif">
+        <draggable can_reuse="true" label="methyl" id="1"/>
+        <draggable can_reuse="true" label="hydroxyl" id="2"/>
+        <draggable can_reuse="true" label="amino" id="3"/>
+        <draggable can_reuse="true" label="carboxyl" id="4"/>
+        <draggable can_reuse="true" label="aldehyde" id="5"/>
+        <draggable can_reuse="true" label="phosphate" id="6"/>
+        <draggable can_reuse="true" label="sulfhydryl" id="7"/>
+        <draggable can_reuse="true" label="phenyl" id="8"/>
+        <draggable can_reuse="true" label="none" id="none"/>
+        <target id="0" h="53" w="66" y="55.100006103515625" x="131.5"/>
+        <target id="1" h="113" w="55" y="140.10000610351562" x="181.5"/>
+      </drag_and_drop_input>
+      <answer type="loncapa/python"> 
+  correct_answer = [ {'draggables': ['2'], 'targets': ['0' ], 'rule':'unordered_equal' }, 
+  {'draggables': ['none'], 'targets': ['1' ], 'rule':'unordered_equal' }] 
+  if draganddrop.grade(submission[0], correct_answer): 
+      correct = ['correct'] 
+  else: 
+      correct = ['incorrect'] 
+      </answer>
+    </customresponse>
+    <solution>
+      <img src="/static/AllopurinolAnswer.gif"/>
+    </solution>
+  </problem>
+
+
+.. _Drag and Drop Problem XML:
+
+*********************************
+Drag and Drop Problem XML
+*********************************
+
+================================
+Template for Simple Problem
+================================
+
+.. code-block:: xml
+
+  <problem>
+  <p>PROBLEM TEXT</p>
+   <customresponse>
+        <drag_and_drop_input img="/static/TARGET_IMAGE.png">
+            <draggable id="1" label="LABEL 1"/>
+            <draggable id="2" label="LABEL 2"/>
+        </drag_and_drop_input>
+        <answer type="loncapa/python">
+  correct_answer = {
+          '1':      [[x, y], radius],
+          '2':      [[x, y], radius]}
+  if draganddrop.grade(submission[0], correct_answer):
+      correct = ['correct']
+  else:
+      correct = ['incorrect']
+          </answer>
+      </customresponse>
+
+
+================================
+Template for Advanced Problem
+================================
+
+.. code-block:: xml
+
+  <problem>
+      <customresponse>
+          <text>
+              <p>PROBLEM TEXT</p>
+          </text>
+          <drag_and_drop_input img="/static/TARGET_IMAGE.png" target_outline="true" one_per_target="true" no_labels="true" label_bg_color="rgb(222, 139, 238)">
+              <draggable id="1" label="LABEL 1" />
+              <draggable id="2" label="LABEL 2" />
+              <target id="A" x="NUMBER" Y="NUMBER" w="X+WIDTH" h="Y+HEIGHT"/>
+              <target id="B" x="NUMBER" Y="NUMBER" w="X+WIDTH" h="Y+HEIGHT"/>
+          </drag_and_drop_input>
+          <answer type="loncapa/python">
+  correct_answer = [{
+      'draggables': ['1', '2'],
+      'targets': ['A', 'B' ],
+      'rule':'anyof'
+  }]
+  if draganddrop.grade(submission[0], correct_answer):
+      correct = ['correct']
+  else:
+      correct = ['incorrect']
+          </answer>
+      </customresponse>
+  </problem>
+
+========
+Tags
+========
+
+* ``<customresponse>``: Indicates that the problem is a custom response problem.
+* ``<drag_and_drop_input/>``: Indicates the custom response problem is a drag and drop problem.
+* ``<draggable/>``: Specifies a single object that a student will drag onto the base image.
+* ``<target>``: Specifies the location on the base image where a draggable must be dropped.
+
+**Tag:** ``<drag_and_drop_input/>``
+
+  Attributes
+
+  .. list-table::
+     :widths: 20 80
+
+     * - Attribute
+       - Description
+     * - img (required)
+       - Relative path to an image that will be the base image. All draggables can be dragged onto it.
+     * - target_outline 
+       - Specifies whether an outline (gray dashed line) should be drawn around targets (if they are specified). It can be either 'true' or 'false'. If not specified, the targets do not have outlines.
+     * - one_per_target 
+       - Specify whether to allow more than one draggable to be placed onto a single target. It can be either 'true' or 'false'. If not specified, the default value is 'true'.
+     * - no_labels (required)
+       - default is false, in default behaviour if label is not set, label is obtained from id. If no_labels is true, labels are not automatically populated from id, and one can not set labels and obtain only icons.
+
+  Children
+
+     * ``<draggable>``
+     * ``<target>``
+
+**Tag:** ``<draggable/>``
+
+Specifies a single draggable object in a drag and drop problem.
+
+A draggable is what the user must drag out of the slider and drop onto the base image. After a drag operation, if the center of the draggable is located outside the rectangular dimensions of the image, it will be returned to the slider.
+
+For the grader to work, each draggable must have a unique ID.
+
+  Attributes
+
+  .. list-table::
+     :widths: 20 80
+
+     * - Attribute
+       - Description
+     * - id (required)
+       - Unique identifier of the draggable object.
+     * - label (optional)
+       - Text label that the user sees.
+     * - icon (optional)
+       - For draggables that are images, the relative path to the image file.
+     * - can_reuse
+       - true or false, default is false. If true, same draggable can be used multiple times.
+
+  Children
+  
+  (none)
+
+**Tag:** ``<target>``
+
+Specifies the location on the base image where a student must drop a draggable item. By design, if the center of a draggable lies within the target (i.e. in the rectangle defined by [[x, y], [x + w, y + h]],  it is within the target. Otherwise, it is outside.
+
+If you specify at least one target, and a student drops a draggable item on a location that is outside a target, the draggable item returns to the slider.
+
+If you don't specify a target, a student can drop a draggable item anywhere on the base image.
+
+  Attributes
+
+  .. list-table::
+     :widths: 20 80
+
+     * - Attribute
+       - Description
+     * - id (required)
+       - Unique identifier of the target object.
+     * - x
+       - X-coordinate on the base image where the top left corner of the target will be positioned.
+     * - y
+       - Y-coordinate on the base image where the top left corner of the target will be positioned.
+     * - w
+       - Width of the target, in pixels.
+     * - h
+       - Height of the target, in pixels.
+
+  Children
+
+  (none)
+
+
+For more information about how to create drag and drop problems, see `XML Format of Drag and Drop Input
+<https://edx.readthedocs.org/en/latest/course_data_formats/drag_and_drop/drag_and_drop_input.html>`_.
+

docs/en_us/shared/exercises_tools/dropdown.rst

+.. _Dropdown:
+
+#####################
+Dropdown Problem
+#####################
+
+Dropdown problems allow the student to choose from a collection of answer options, presented as a dropdown list. Unlike multiple choice problems, whose answers are always visible directly below the question, dropdown problems don't show answer choices until the student clicks the dropdown arrow.
+
+.. image:: /Images/DropdownExample.png
+ :alt: Image of a dropdown problem
+
+********************************
+Create a Dropdown Problem
+********************************
+
+You can create dropdown problems in the Simple Editor or in the Advanced Editor.
+
+.. note:: All problems must include labels for accessibility. The label generally includes the text of the main question in your problem. To add a label for a common problem, surround the text of the label with angle brackets pointed toward the text (>>label text<<).
+
+================
+Simple Editor
+================
+
+To create a dropdown problem, follow these steps.
+
+#. Under **Add New Component**, click **Problem**.
+#. In the **Select Problem Component Type** screen, click
+   **Dropdown** on the **Common Problem Types** tab.
+#. In the new Problem component that appears, click **Edit**.
+#. Replace the default text with the text for your problem. Enter each of the possible 
+   answers on the same line, separated by commas.
+#. Determine the text of the problem to use as a label, and then surround that text with two sets of angle brackets (>><<).
+#. Select all the answer options, and then click the dropdown button. 
+      
+   .. image:: /Images/ProbCompButton_Dropdown.png
+    :alt: Image of the dropdown button
+      
+   When you do this, a double set of brackets ([[ ]]) appears and surrounds the 
+   answer options.
+      
+#. Inside the brackets, surround the correct answer with parentheses.
+#. In the component editor, select the text of the explanation, and then click the 
+   explanation button to add explanation tags around the text.
+
+   .. image:: /Images/ProbCompButton_Explanation.png
+    :alt: Image of the explanation button
+
+#. On the **Settings** tab, specify the settings that you want. 
+#. Click **Save**.
+
+For the example problem above, the text in the Problem component is the
+following.
+
+::
+
+    >>What type of data are the following?<<
+
+    Age:
+    [[Nominal, Discrete, (Continuous)]]
+    Age, rounded to the nearest year:
+    [[Nominal, (Discrete), Continuous]]
+    Life stage - infant, child, and adult:
+    [[(Nominal), Discrete, Continuous]]
+
+================
+Advanced Editor
+================
+
+To create this problem in the Advanced Editor, click the **Advanced** tab in the Problem component editor, and then replace the existing code with the following code.
+
+**Problem Code:**
+
+.. code-block:: xml
+
+  <problem>
+  <p>
+    <em>This exercise first appeared in HarvardX's PH207x Health in Numbers: Quantitative Methods in Clinical &amp; Public Health Research course, fall 2012.</em>
+  </p>
+  <p>What type of data are the following?</p>
+  <p>Age:</p>
+  <optionresponse>
+    <optioninput options="('Nominal','Discrete','Continuous')" correct="Continuous" label="Age"/>
+  </optionresponse>
+  <p>Age, rounded to the nearest year:</p>
+  <optionresponse>
+    <optioninput options="('Nominal','Discrete','Continuous')" correct="Discrete" label="Age, rounded to the nearest year"/>
+  </optionresponse>
+  <p>Life stage - infant, child, and adult:</p>
+  <optionresponse>
+    <optioninput options="('Nominal','Discrete','Continuous')" correct="Nominal" label="Life stage"/>
+  </optionresponse>
+  </problem>
+
+.. _Dropdown Problem XML:
+
+************************
+Dropdown Problem XML
+************************
+
+========
+Template
+========
+
+.. code-block:: xml
+
+  <problem>
+  <p>
+    Problem text</p>
+  <optionresponse>
+    <optioninput options="('Option 1','Option 2','Option 3')" correct="Option 2" label="label text"/>
+  </optionresponse>
+    <solution>
+      <div class="detailed-solution">
+      <p>Explanation or Solution Header</p>
+      <p>Explanation or solution text</p>
+      </div>
+    </solution>
+  </problem>
+
+.. code-block:: xml
+
+  <problem>
+   <p>Problem text</p>
+    <optionresponse>
+     options="('A','B')"
+      correct="A"/>
+      label="label text"
+    </optionresponse>
+   
+    <solution>
+      <div class="detailed-solution">
+      <p>Explanation or Solution Header</p>
+      <p>Explanation or solution text</p>
+      </div>
+    </solution>
+  </problem>
+
+========
+Tags
+========
+
+* ``<optionresponse>`` (required): Indicates that the problem is a dropdown problem.
+* ``<optioninput>`` (required): Lists the answer options.
+
+**Tag:** ``<optionresponse>``
+
+Indicates that the problem is a dropdown problem.
+
+  Attributes
+
+  (none)
+
+  Children
+
+  * ``<optioninput>``  
+
+**Tag:** ``<optioninput>``
+
+Lists the answer options.
+
+  Attributes
+
+  .. list-table::
+     :widths: 20 80
+
+     * - Attribute
+       - Description
+     * - options (required)
+       - Lists the answer options. The list of all answer options is surrounded by parentheses. Individual answer options are surrounded by single quotation marks (') and separated by commas (,).
+     * - correct (required)
+       - Indicates whether an answer is correct. Possible values are "true" and "false". Only one **correct** attribute can be set to "true".
+     * - label (required)
+       - Specifies the name of the response field.
+  
+  Children
+
+  (none)
\ No newline at end of file

docs/en_us/shared/exercises_tools/external_graders.rst

+.. _External Grader:
+
+###########################
+External Grader
+###########################
+
+
+.. _External Grader Overview:
+
+*******************
+Overview
+*******************
+
+An external grader is a service that receives student responses to a problem, processes those responses, and returns feedback and a problem grade to the edX platform. You build and deploy an external grader separately from the edX platform.
+
+See the following sections for more information:
+
+* :ref:`External Grader Example`
+* :ref:`External Graders and XQueue`
+* :ref:`The XQueue Interface`
+* :ref:`Building an External Grader`
+* :ref:`Create a Code Response Problem`
+
+.. _External Grader Example:
+
+***************************
+External Grader Example
+***************************
+
+An external grader is particularly useful for software programming courses where students are asked to submit complex code.  The grader can run tests that you define on that code and return results to a student.
+
+For example, you define a problem that requires students to submit Python code, and create a set of tests that an external grader can run to verify the submissions. When a student enters Python code for the problem and clicks **Check**, the code is sent to the grader for testing.  If the code passes all tests, the grader returns the score and a string indicating that the solution is correct.
+
+.. image:: /Images/external-grader-correct.png
+ :alt: Image of a students view of a programming problem that uses an external grader, with a correct result 
+
+
+The external grader can return a string with results, which the student can see by clicking **See full output**. This can be particularly useful when the solution is not correct and you want to return information about the failed tests. For example:
+
+.. image:: /Images/external-grader-incorrect.png
+ :alt: Image of a students view of a programming problem that uses an external grader, with a correct result 
+
+.. _External Graders and XQueue:
+
+**************************************
+External Graders and XQueue
+**************************************
+
+The edX Platform communicates with your external grader through XQueue.  XQueue provides students' input to the grader; it then receives results from the grader and returns them to students.  
+
+Student submissions are collected in XQueue, where they remain until the grader actively retrieves, or pulls, the next submission from the queue for grading.
+
+The external grader polls the XQueue through a RESTful interface at a regular interval. When the external grader pulls a submission, it runs the tests on it, then pushes the response back to XQueue through the RESTful interface. XQueue then delivers the response to the edX Learning Management System.
+
+For example code of an external grader that uses Pull mode, see the `Stanford-Online repository xqueue_pull_ref <https://github.com/Stanford-Online/xqueue_pull_ref>`_.
+
+
+============================
+External Grader Workflow
+============================
+
+The following steps show the complete process:
+
+#. The student either enters code or attaches a file for a problem, then clicks Check.
+#. The external grader pulls the code from XQueue.
+#. The external grader runs the tests that you created on the code.
+#. The external grader returns the grade for the submission, as well as any results in a string, to XQueue. 
+#. The XQueue delivers the results to the edX Learning Management System.
+#. The student sees the problem results and the grade.
+
+
+==================
+The XQueue Name
+==================
+
+Your course will use a specific XQueue name. You use this name when creating problems in edX Studio. You get this name from your edX Program Manager. As edX hosts many XQueues for different courses, it is critical that you use the exact XQueue name in your problems, as described in the section :ref:`Create a Code Response Problem`. 
+
+
+.. _The XQueue Interface:
+
+**************************************
+The XQueue Interface
+**************************************
+
+The student submission sent from XQueue to the grader, and the response sent from the grader to XQueue, are JSON objects, as described below.
+
+.. note:: XQueue does not send the the student ID to the external grader. Your grader cannot access student IDs or associate student IDs with submissions.
+
+For the code for the XQueue interface, see the file `urls.py in the edX XQueue repository <https://github.com/edx/xqueue/blob/master/queue/urls.py>`_.
+
+======================================================
+Inputs to the External Grader
+======================================================
+
+The grader receives student submissions as a JSON object with two keys:
+
+* **student_response**: A string containing the student's code submission.  The string comes from either input the student enters in the edX Learning Management System or a file the student attaches.
+
+* **grader_payload**: An optional string that you can specify when creating the problem. For more information, see the section :ref:`Create a Code Response Problem`.
+
+For example::
+
+ {
+   "xqueue_body":
+   "{
+     "student_response": "def double(x):\n return 2*x\n", 
+     "grader_payload": "problem_2"
+    }"
+ }
+
+======================================================
+External Grader Responses
+======================================================
+
+After running tests and recording results for a submission, the grader must return information by posting a JSON response. The JSON string contains an indication if the submission was correct, the score, and any message the tests create.
+
+In the following example, the grader returns a JSON string that indicates the submission was correct, the score was 1, and a message::
+
+ { 
+  "correct": true, 
+  "score": 1, 
+  "msg": "<p>The code passed all tests.</p>" 
+ }
+
+.. _Building an External Grader:
+
+****************************
+Building an External Grader
+****************************
+
+Course staff, not edX, is responsible for building and deploying the external grader. 
+
+In addition to creating tests that are specific to the problems you use in your course, there are four areas that you must plan for when building an external grader:
+
+* :ref:`Scale`
+* :ref:`Security`
+* :ref:`Reliability and Recovery`
+* :ref:`Testing`
+
+
+.. _Scale:
+
+==================
+Scale
+==================
+
+Your external grader must be able to scale to support the number of students in your course.
+
+Keep in mind that student submissions will likely come in spikes, not in an even flow.  For example, you should expect the load to be much greater than average in the hours before an exam is due.  Therefore, you should verify that the external grader can process submissions from a majority of students in a short period of time. 
+
+.. _Security:
+
+==================
+Security
+==================
+
+Students are submitting code that executes directly on a server that you are responsible for. It is possible that a student will submit malicious code. Your system must protect against this and ensure that the external grader runs only code that is relevant to the course problems.  How you implement these protections depends on the programming language you are using and your deployment architecture.  You must ensure that malicious code won't damage your server.
+
+.. _Reliability and Recovery:
+
+==============================
+Reliability and Recovery
+==============================
+
+Once your course starts, many students will submit code at any possible time, and expect to see results quickly.  If your external grader is prone to failure or unexpected delays, the student experience will be poor.
+
+Therefore, you must ensure that your grader has high availability and can recover from errors. Prior to your course starting, you must have a plan to immediately notify the team responsible for operating your grader, as well as edX operations, when the grader fails. In collaboration with edX, you should develop a procedure to quickly identify the cause of failure, which can be your grader or edX's XQueue.
+
+Contact your edX Program Manager for more information.
+
+If you know the grader will be unavailable at a certain time for maintenance, you should :ref:`Add a Course Update`. 
+
+.. _Testing:
+
+==================
+Testing
+==================
+
+You should test your grader thoroughly before your course starts.  Be sure to test incorrect code as well as correct code to ensure that the grader responds with appropriate scores and messages.
+
+.. _Create a Code Response Problem:
+
+********************************
+Create a Code Response Problem
+********************************
+
+You create a code response problem in edX Studio by adding a common blank problem, then editing the XML problem definition in the :ref:`Advanced Editor`.
+
+See :ref:`Working with Problem Components` for more information.
+
+Following is a basic example of the XML definition of a problem that uses an external grader::
+
+ <problem display_name="Problem 6">
+    <text>
+        <p>Write a program that prints "hello world".</p>
+    </text>
+    <coderesponse queuename="my_course_queue">
+        <textbox rows="10" cols="80" mode="python" tabsize="4"/>
+        <codeparam>
+            <initial_display>
+              # students please write your program here
+              print ""
+            </initial_display>
+            <answer_display>
+              print "hello world"
+            </answer_display>
+            <grader_payload>
+            {"output": "hello world", "max_length": 2}
+            </grader_payload>
+        </codeparam>
+    </coderesponse>
+ </problem>
+
+Note the following about the XML definition:
+
+* **queuename**: The value of the queuename attribute of the <coderesponse> element maps to an XQueue that edX sets up for the course.  You get this name from your edX Program Manager. You must use this exact name in order for the problem to communicate with the correct XQueue.
+
+* **Input Type**: In this example, the input type is specificed by the **<textbox>** element.  When you use <textbox>, the student enters code in a browser field when viewing the course unit.  The other element you can use to specify the input type is <filesubmission>, which enables the student to attach and submit a code file in the unit.
+
+* **<grader_payload>**: You can use the <grader_payload> element to send information to the external grader in the form of a JSON object. For example, you can use <grader_payload> to tell the grader which tests to run for this problem.
\ No newline at end of file

docs/en_us/shared/exercises_tools/full_screen_image.rst

+.. _Full Screen Image:
+
+######################
+Full Screen Image Tool
+######################
+
+Some large images are difficult for students to view in the courseware.  The full screen image tool allows students to enlarge the image, so they can see all the detail in context.
+
+****************************************
+The Student View of a Full Screen Image
+****************************************
+
+The student sees the full screen image in a unit page. When the student hovers the mouse pointer over the image, the **Fullscreen** button appears:
+
+.. image:: /Images/image-modal.png
+ :alt: Image of the full screen image tool with the Full Screen button.
+
+When the student clicks **Fullscreen**, the image opens and expands in the full browser window.  The buttons **Close**, **Zoom In**, and **Zoom Out** appear:
+
+.. image:: /Images/image-modal-window.png
+ :alt: Image of the Image Modal tool with the Full Screen button.
+
+The student can then zoom in on the image, and drag the image to view the desired part of it:
+
+.. image:: /Images/image-modeal-zoomed.png
+ :alt: Image of the Image Modal tool with the Full Screen button.
+
+******************************
+Create a Full Screen Image
+******************************
+
+#. Upload your image file to the **Files & Uploads** page. For more information about how to do this, see :ref:`Add Files to a Course`.
+
+#. Under **Add New Component**, click **html**, and then click **Full Screen Image**.
+
+#. In the new component that appears, click **Edit**.
+
+#. In the component editor, replace the default title, remove the instructional paragraph, and add text as needed.
+
+#. Switch to the **HTML** tab.
+
+#. Replace the following placeholders with your own content.
+
+   * Replace the value of the <a> element's href attribute with the path to your image. Do not change the value of the class attribute. For example:
+
+     **<a href="/static/Image1.jpg" class="modal-content">**
+
+   * Replace the value of the <img> element's src attribute with the path to your image. For example:
+     
+     **<img alt="Full screen image" src="/static/Image1.jpg"/>**
+
+   * Ensure that the value of the href and src attributes are the same, and that you do not change the class attribute. Your sample code should look like the following:
+
+   .. code-block:: xml
+
+     <h2>Sample Image Modal</h2>
+     <a href="/static/Image1.jpg" class="modal-content">
+     <img alt="Full screen image" src="/static/Image1.jpg"/>
+     </a>
+
+   .. note:: You can use this same HTML code in any HTML component, not just those components you created as full screen images.
+
+#. Click **Save** to save the HTML component.
\ No newline at end of file

docs/en_us/shared/exercises_tools/gene_explorer.rst

+.. _Gene Explorer:
+
+##################
+Gene Explorer Tool
+##################
+
+The Gene Explorer (GeneX), from the biology department at `UMB <http://www.umb.edu/>`_, simulates the transcription, splicing, processing, and translation of a small hypothetical eukaryotic gene. GeneX allows students to make specific mutations in a gene sequence, and it then calculates and displays the effects of the mutations on the mRNA and protein. 
+
+Specifically, the Gene Explorer does the following:
+
+#. Finds the promoter and terminator
+#. Reads the DNA sequence to produce the pre-mRNA
+#. Finds the splice sites
+#. Splices and tails the mRNA
+#. Finds the start codon
+#. Translates the mRNA
+
+.. image:: /Images/GeneExplorer.png
+  :alt: Image of the Gene Explorer
+
+For more information about the Gene Explorer, see `The Gene Explorer <http://intro.bio.umb.edu/GX/>`_.
+
+********************
+Gene Explorer Code
+********************
+
+.. code-block:: xml
+
+  <problem>
+  <p>Make a single base pair substitution mutation in the gene below that results in a protein that is longer than the protein produced by the original gene. When you are satisfied with your change and its effect, click the <b>SUBMIT</b> button.</p>
+  <p>Note that a "single base pair substitution mutation" is when a single base is changed to another base; for example, changing the A at position 80 to a T. Deletions and insertions are not allowed.</p>
+  <script type="loncapa/python">
+  def genex_grader(expect,ans):
+      if ans=="CORRECT": return True
+      import json
+      ans=json.loads(ans)
+      return ans["genex_answer"]=="CORRECT"
+  </script>
+  <customresponse cfn="genex_grader">
+  <editageneinput width="818" height="1000" dna_sequence="TAAGGCTATAACCGAGATTGATGCCTTGTGCGATAAGGTGTGTCCCCCCCCAAAGTGTCGGATGTCGAGTGCGCGTGCAAAAAAAAACAAAGGCGAGGACCTTAAGAAGGTGTGAGGGGGCGCTCGAT" genex_dna_sequence="TAAGGCTATAACCGAGATTGATGCCTTGTGCGATAAGGTGTGTCCCCCCCCAAAGTGTCGGATGTCGAGTGCGCGTGCAAAAAAAAACAAAGGCGAGGACCTTAAGAAGGTGTGAGGGGGCGCTCGAT" genex_problem_number="2"/>
+  </customresponse>
+  </problem>
+
+In this code:
+
+* **width** and **height** specify the dimensions of the application, in pixels.
+* **genex_dna_sequence** is the default DNA sequence that appears when the problem opens.
+* **dna_sequence** contains the application's state and the student's answer. This value must be the same as **genex_dna_sequence**. 
+* **genex_problem_number** specifies the number of the problem. This number is based on the five gene editor problems in the MITx 7.00x course--for example, if you want this problem to look like the second gene editor problem in the 7.00x course, you would set the **genex_problem_number** value to 2. The number must be 1, 2, 3, 4, or 5.
\ No newline at end of file

docs/en_us/shared/exercises_tools/google_hangouts.rst

+.. _Google Instant Hangout:
+
+###########################################
+Google Instant Hangout Tool
+###########################################
+
+This chapter describes how you can use instant hangouts in your course. See:
+
+* :ref:`Hangouts_Overview`
+* :ref:`Instant Hangouts in Your Course`
+* :ref:`The Student Experience`
+* :ref:`Limitations`
+* :ref:`Create the Instant Hangout`
+
+.. _Hangouts_Overview:
+
+*****************
+Overview
+*****************
+
+You can add the ability for students to participate in instant hangouts directly from your course.
+
+With instant hangouts, students can:
+
+* Interact through live video and voice.
+* Share screens and watch videos together.
+* Collaborate on documents.
+
+For a full list of instant hangout features, see the `Google Hangouts page <http://www.google.com/+/learnmore/hangouts/>`_.
+
+.. note:: Students who want to participate in instant hangouts must have a Google account.  You should note this in your course materials.
+
+.. _Instant Hangouts in Your Course:
+
+**********************************
+Instant Hangouts in Your Course
+**********************************
+
+You can add one or more instant hangouts in your course. For example, you can add an instant hangout:
+
+* In a page, to provide students with a hangout for the entire course. See :ref:`Adding Pages to a Course` for more information.
+
+* In an HTML component, to provide a hangout for students working on that specific course unit. See :ref:`Working with HTML Components` for more information about creating HTML components.
+
+An instant hangout is specific to the page it is opened from. For example, students who join a hangout from one course unit interact among themselves, while students who join a hangout from another unit interact in a different hangout.
+
+.. _The Student Experience:
+
+*************************
+The Student Experience
+*************************
+
+When you add the instant hangout to your course, a control for the hangout appears on that page. The following example shows the control in a course unit. The control shows that the student can start the hangout and be the first participant.
+
+.. image:: /Images/hangout_unit.png
+ :alt: Image of the instant hangout control on a unit
+
+To start the hangout, the student clicks **Start the Hangout**. (After the first student clicks **Start the Hangout**, other students see a **Join the Hangout** button.)
+
+The following example shows the control in a page when a hangout has already started. The control has a **Join the Hangout** button, and shows that one other student is already in the hangout.
+
+.. image:: /Images/hangout_static_page.png
+ :alt: Image of the instant hangout control on a page
+
+To join the hangout, the student clicks **Join the Hangout**.
+
+If not already logged in, the student is prompted to log in to Google:
+
+.. image:: /Images/google_login.png
+ :alt: Image of the Google login page
+
+Students who do not have a Google account can create one from the login page.
+
+After the student has logged in to Google, the hangout opens in a separate browser window:
+
+.. image:: /Images/GoogleHangout_WithPeople.png
+ :alt: Image of the instant hangout
+
+.. _Limitations:
+
+****************
+Limitations
+****************
+
+Currently, only ten students can join a single instant hangout. You should note this in your course materials.
+
+Students in hangouts that are started from different pages in your course are counted separately. So you can have ten students participating in a hangout started from one unit, and ten other students in a hangout started from a different unit.
+
+.. _Create the Instant Hangout:
+
+**************************************************
+Create the Instant Hangout
+**************************************************
+
+To create an instant hangout in your course:
+
+#. Get the `instant hangout JavaScript file from GitHub <https://raw.github.com/google/instant-hangouts/master/instanthangouts-0.1.0.js>`_.
+
+#. Copy the text of this file into a text editor on your computer, and save the file as a JavaScript file (that is, when you save the file, change the extension from .txt to .js).
+
+   .. note::  Make sure that you copy the raw GitHub file, which does not contain formatting. Do not copy the formatted file. Any formatting will cause the JavaScript to not work correctly.
+
+#. Upload the JavaScript file to the **Files & Uploads** page in your course. See :ref:`Add Files to a Course` for more information.
+
+#. In either a page or an HTML component, open the HTML editor.
+
+#. On the first line, add the JavaScript file you uploaded in a <script> tag. For example, if your JavaScript file is named **instanthangouts-0.1.0.js**, you would enter the following::
+  
+    <script src='/static/instanthangouts-0.1.0.js'/>
+
+#. After the <script> tag, add::
+  
+    <div class='instanthangouts'/>
+
+#. Add any additional text and tags that you want.
+
+   For example, the complete HTML could be::
+
+    <p>Join an instant hangout by clicking the button below. 
+    You can use the hangout to have live video discussions with other students.</p>
+    <script src='/static/instanthangouts-0.1.0.js'></script>
+    <div class='instanthangouts'/>
+
+#. Test the instant hangout in your course.
+
+=============================
+Updating the JavaScript File
+=============================
+
+Google will periodically update the instant hangouts JavaScript file.  To receive update notifications, go to the `instant hangouts repository page <https://github.com/google/instant-hangouts/>`_, and then click **Watch** in the upper-right area of the page. 
+
+To use an updated JavaScript file in your course, we recommend that you copy the JavaScript from the repository into a file that has the same name as the file that you uploaded to your course. When you upload the new file, the new file replaces the previous file.
+
+.. warning:: If you include version numbers in the file names of uploaded files, you will have to edit any HTML components or pages that include an instant hangout control every time that you update the JavaScript file.

docs/en_us/shared/exercises_tools/iframe.rst

+.. _IFrame:
+
+##################
+IFrame Tool
+##################
+
+An IFrame allows you to integrate ungraded exercises and tools from any Internet site into the body of your course. The IFrame appears inside an HTML component, and the exercise or tool appears inside the IFrame. IFrames can include your own tools or third-party tools. 
+
+.. image:: /Images/IFrame_1.png
+  :alt: IFrame tool showing a Euler line exercise
+  :width: 500
+
+IFrames are well-suited for tools that demonstrate a concept but that won't be graded or store student data. If you want to add a graded tool or exercise, add the tool as a :ref:`custom JavaScript problem<Custom JavaScript>` or an :ref:`LTI component<LTI Component>`. 
+
+For more information about IFrames, see the `IFrame specification <http://www.w3.org/wiki/HTML/Elements/iframe>`_.
+
+****************************
+Create an IFrame Tool
+****************************
+
+To add an exercise or tool in an IFrame, you'll create an IFrame HTML component and add the URL of the page that contains the exercise or tool to the component. You can also add text and images both before and after the IFrame.
+
+.. note:: The URL of the page that contains the exercise or tool must start with ``https`` instead of ``http``. If the URL starts with ``http``, you have to work with the owner of that page to find out if an ``https`` version is available. Some websites do not allow their content to be embedded in IFrames.
+
+#. Under **Add New Component**, click **html**, and then click **IFrame**.
+
+#. In the new component that appears, click **Edit**.
+
+#. In the toolbar in the component editor, click **HTML**.
+
+#. In the HTML source code editor, locate the following HTML (line 7). This HTML includes the ``<iframe>`` element:
+
+   .. code-block:: html
+
+      <p><iframe src="https://studio.edx.org/c4x/edX/DemoX/asset/eulerLineDemo.html" width="402" height="402" marginwidth="0" marginheight="0" frameborder="0" scrolling="no">You need an iFrame capable browser to view this.</iframe></p>
+
+5. Replace the default URL in the **src** attribute (**https://studio.edx.org/c4x/edX/DemoX/asset/eulerLineDemo.html**) with the URL of the page that contains the exercise or tool. **This URL must start with https**. Make sure you don't delete the quotation marks that surround the URL.
+
+#. Change the attributes in the IFrame element to specify any other settings that you want. For more information about these settings, see :ref:`IFrame Settings`. You can also change the text between the opening and closing ``<iframe>`` tags. A student only sees this text if the student uses a browser that does not support IFrames.
+
+7. Click **OK** to close the HTML source code editor and return to the Visual editor.
+
+#. In the Visual editor, replace the default text with your own text.
+
+#. Click **Save**.
+
+.. _IFrame Settings:
+
+======================
+IFrame Settings
+======================
+
+To specify settings for your IFrame, you'll add, remove, or change the attributes inside the opening ``<iframe>`` tag. The ``<iframe>`` tag **must** contain a **src** attribute that specifies the URL of the web page you want. Other attributes are optional. 
+
+You can add these attributes in any order you want.
+
+.. list-table::
+   :widths: 20 80
+   :header-rows: 1
+ 
+   * - Attribute
+     - Description
+   * - **src** (required)
+     - Specifies the URL of the page that contains the exercise or tool.
+   * - **width** and **height** (optional)
+     - Specify the width and height of the IFrame, in pixels or as a percentage. To specify the value in pixels, enter numerals. To specify a percentage, enter numerals followed by a percent sign.
+
+       If you don't specify the width and height, the IFrame uses the dimensions that the linked page has set. These dimensions vary by website. If you change the width and height of the IFrame, the content from the linked page may be resized, or only part of the content may appear.
+
+   * - **marginwidth** and **marginheight** (optional)
+     - Specify the size of the space between the edges of the IFrame and your exercise or tool, in pixels.
+   * - **frameborder** (optional)
+     - Specifies whether a border appears around your IFrame. If the value is 0, no border appears. If the value is any positive number, a border appears.
+   * - **scrolling** (optional)
+     - Specifies whether a scrollbar appears to help users see all of the IFrame's content if your IFrame is smaller than the exercise or tool it contains. For example, if the content in your IFrame is very tall, you can set the IFrame's height to a smaller number and add a vertical scroll bar for users, as in the first image below.
+
+For example, compare how the different settings in each of the ``<iframe>`` elements below affect the IFrame. 
+
+.. code-block:: html
+
+      <p><iframe src="https://studio.edx.org/c4x/edX/DemoX/asset/eulerLineDemo.html" width="442" height="200" marginwidth="20" marginheight="20" frameborder="1" scrolling="yes">You need an iFrame capable browser to view this.</iframe></p>
+
+.. image:: /Images/IFrame_3.png
+   :alt: IFrame with only top half showing and vertical scroll bar on the side
+   :width: 500
+
+.. code-block:: html
+
+      <p><iframe src="https://studio.edx.org/c4x/edX/DemoX/asset/eulerLineDemo.html" width="550" height="250" marginwidth="30" marginheight="60" frameborder="1" scrolling="no">You need an iFrame capable browser to view this.</iframe></p>
+
+.. image:: /Images/IFrame_4.png
+   :alt: 
+   :width: 500
+
+For more information about IFrame attributes, see the `IFrame specification <http://www.w3.org/wiki/HTML/Elements/iframe>`_.

docs/en_us/shared/exercises_tools/image_mapped_input.rst

+.. _Image Mapped Input:
+
+###########################
+Image Mapped Input Problem
+###########################
+
+In an image mapped input problem, students click inside a defined area in an image. You define this area by including coordinates in the body of the problem.
+
+.. image:: /Images/ImageMappedInputExample.png
+ :alt: Image of an image mapped input problem
+
+****************************************
+Create an Image Mapped Input Problem
+****************************************
+
+To create a image mapped input problem:
+
+#. In the unit where you want to create the problem, click **Problem**
+   under **Add New Component**, and then click the **Advanced** tab.
+#. Click **Image Mapped Input**.
+#. In the component that appears, click **Edit**.
+#. In the component editor, replace the example code with your own code.
+#. Click **Save**.
+
+**Problem Code**:
+
+.. code-block:: xml
+
+  <problem>
+    <p><b>Example Problem</b></p>
+     <startouttext/>
+      <p>In the image below, click the triangle.</p>
+      <endouttext/>
+      <imageresponse>
+      <imageinput src="/static/threeshapes.png" width="220" height="150" rectangle="(80,40)-(130,90)" />
+      </imageresponse>
+  </problem>
+
+
+.. _Image Mapped Input Problem XML:
+
+******************************
+Image Mapped Input Problem XML 
+******************************
+
+==========
+Template
+==========
+
+.. code-block:: xml
+
+  <problem>
+    <startouttext/>
+      <p>In the image below, click the triangle.</p>
+    <endouttext/>
+        <imageresponse>
+         <imageinput src="IMAGE FILE PATH" width="NUMBER" height="NUMBER" rectangle="(X-AXIS,Y-AXIS)-(X-AXIS,Y-AXIS)" />
+        </imageresponse>
+  </problem>
+
+=====
+Tags
+=====
+
+* ``<imageresponse>``: Indicates that the problem is an image mapped input problem.
+* ``<imageinput>``: Specifies the image file and the region in the file that the student must click.
+
+**Tag:** ``<imageresponse>``
+
+Indicates that the problem is an image mapped input problem.
+
+  Attributes
+
+  (none)
+
+  Children
+
+  * ``<imageinput>``
+
+**Tag:** ``<imageinput>``
+
+Specifies the image file and the region in the file that the student must click.
+
+  Attributes
+
+   .. list-table::
+      :widths: 20 80
+
+      * - Attribute
+        - Description
+      * - src (required)
+        - The URL of the image
+      * - height (required)
+        - The height of the image, in pixels
+      * - width (required)
+        - The width of the image, in pixels
+      * - rectangle (required)
+        - An attribute with four embedded values in the format (<start_width>,<start_height>)-(<end_width>,<end-height>). All coordinates start with (0,0) in the top left corner and increase in value toward the bottom right corner, very similar to the progression of reading English. The two coordinates defined form the two opposite corners of a box which a student can click inside of.
+
+  Children
+  
+  (none)
+

docs/en_us/shared/exercises_tools/index.rst

+.. _Exercises and Tools Index:
+
+############################
+Creating Exercises and Tools
+############################
+
+Use the chapters in this section to understand how to create exercises and
+tools in your course.
+
+For information on how to develop your course content in the Studio Outline
+page, see :ref:`Developing Your Course Index`.
+
+For information on building specific course component types, see :ref:`Creating
+Course Content Index`.
+
+
+.. toctree::
+   :maxdepth: 2
+   
+   create_exercises_and_tools
+   annotation
+   checkbox
+   chemical_equation
+   circuit_schematic_builder
+   conditional_module
+   custom_javascript
+   drag_and_drop
+   dropdown
+   external_graders
+   full_screen_image
+   gene_explorer
+   google_hangouts
+   iframe
+   image_mapped_input
+   lti_component
+   math_expression_input
+   molecule_editor
+   multiple_choice
+   mult_choice_num_input
+   numerical_input
+   open_response_assessment
+   periodic_table
+   poll
+   problem_with_hint
+   problem_in_latex
+   protein_builder
+   text_input
+   vitalsource
+   word_cloud
+   custom_python
+   zooming_image
+   mathjax
\ No newline at end of file

docs/en_us/shared/exercises_tools/lti_component.rst

+.. _LTI Component:
+
+###############
+LTI Component
+###############
+
+You may have discovered or developed an external learning application
+that you want to add to your online course. Or, you may have a digital
+copy of your textbook that uses a format other than PDF. You can add
+external learning applications or textbooks to Studio by using a
+Learning Tools Interoperability (LTI) component. The LTI component is
+based on the `IMS Global Learning Tools
+Interoperability <http://www.imsglobal.org/LTI/v1p1p1/ltiIMGv1p1p1.html>`_
+version 1.1.1 specifications.
+
+You can use an LTI component in several ways.
+
+* You can add external LTI content that is displayed only, such as textbook
+  content that doesn’t require a student response.
+
+* You can add external LTI content that requires a student response. An external
+  provider will grade student responses.
+
+* You can use the component as a placeholder for syncing with an external
+  grading system.
+
+For example, the following LTI component incorporates a Cerego tool that students interact with. 
+
+.. image:: /Images/LTIExample.png
+   :alt: Cerego LTI component example
+
+.. _LTI Information:
+
+************************
+Obtain LTI Information
+************************
+
+Before you create an LTI component from an external LTI provider in a
+unit, you need the following information.
+
+-  The **launch URL** (if the LTI component requires a student response
+   that will be graded). You obtain the launch URL from the LTI
+   provider. The launch URL is the URL that Studio sends to the external
+   LTI provider so that the provider can send back students’ grades.
+
+- The **LTI Passports** policy key. This policy key has three parts: an LTI ID,
+  a client key, and a client secret.
+
+  -  The **LTI ID**. This is a value that you create to refer to the external LTI
+     provider. You should create an LTI ID that you can remember easily.
+
+     The LTI ID can contain uppercase and lowercase alphanumeric
+     characters, as well as underscore characters (_). It can be any length. For example, you may create an LTI ID that is
+     as simple as **test_lti_id**, or your LTI ID may be a string of
+     numbers and letters such as  **id_21441** or
+     **book_lti_provider_from_new_york**.
+  -  The **client key**. This value is a sequence of characters that you
+     obtain from the LTI provider. The client key is used for
+     authentication and can contain any number of characters. For example,
+     your client key may be **b289378-f88d-2929-ctools.school.edu**.
+  -  The **client secret**. This value is a sequence of characters that
+     you obtain from the LTI provider. The client secret is used for
+     authentication and can contain any number of characters. For example,
+     your client secret can be something as simple as **secret**, or it
+     may be a string of numbers and letters such as **23746387264** or
+     **yt4984yr8**.
+
+  To create the **LTI Passports** policy key, combine the LTI ID, client key, and client secret in the following format (make sure to include the colons):
+
+  ``lti_id:client_key:client_secret``
+
+  For example, an **LTI Passports** policy key may resemble any of the following:
+
+  ``test_lti_id:b289378-f88d-2929-ctools.school.edu:secret``
+  
+  ``id_21441:b289378-f88d-2929-ctools.school.edu:23746387264``
+
+  ``book_lti_provider_from_new_york:b289378-f88d-2929-ctools.company.com:yt4984yr8``
+
+************************
+Create an LTI Component
+************************
+
+Creating an LTI component in your course has three steps.
+
+#. Add LTI to the **Advanced Module List**  policy key.
+#. Register the LTI provider.
+#. Create the LTI component in an individual unit.
+
+======================================================
+Step 1. Add LTI to the Advanced Module List Policy Key
+======================================================
+
+#. On the **Settings** menu, click **Advanced Settings**.
+
+#. In the field for the **Advanced Module List** policy key, place your cursor
+   between the brackets.
+
+#. Enter ``“lti”``. Make sure to include the quotation marks, but not the
+   period.
+
+   .. image:: /Images/LTIPolicyKey.png
+     :width: 500
+     :alt: Image of the advanced_modules key in the Advanced Settings page, with the LTI value added
+
+.. note:: If the **Advanced Module List** field already contains text, place your cursor directly
+   after the closing quotation mark for the final item, and then enter a comma
+   followed by ``“lti”`` (make sure that you include the quotation marks).
+
+4. At the bottom of the page, click **Save Changes**.
+
+The page refreshes automatically. At the top of the page,
+you see a notification that your changes have been saved.
+
+==========================================
+Step 2. Register the External LTI Provider
+==========================================
+
+To register the external LTI provider, you’ll add the **LTI Passports** policy
+key to the course's advanced settings.
+
+#. On the **Advanced Settings** page, locate the **LTI Passports**
+   policy key.
+
+#. Place your cursor between the brackets.
+
+#. Enter the **LTI Passports** policy key surrounded by quotation marks.
+
+   For example, the text in the **LTI Passports** field may resemble the following.
+
+   ``"test_lti_id:b289378-f88d-2929-ctools.umich.edu:secret"``
+
+   If you have multiple LTI providers, separate the values for each **LTI
+   Passports** policy key with a comma. Make sure to surround each entry with
+   quotation marks.
+
+   .. code-block:: xml
+
+      "test_lti_id:b289378-f88d-2929-ctools.umich.edu:secret",
+      "id_21441:b289378-f88d-2929-ctools.school.edu:23746387264",
+      "book_lti_provider_from_new_york:b289378-f88d-2929-ctools.company.com:yt4984yr8"
+
+4. At the bottom of the page, click **Save Changes**.
+
+The page refreshes automatically. At the top of the page, you see a
+notification that your changes have been saved, and you can see your entries
+for the **LTI Passports** policy key.
+
+==========================================
+Step 3. Add the LTI Component to a Unit
+==========================================
+
+#. In the unit where you want to create the problem, click **Advanced**
+   under **Add New Component**, and then click **LTI**.
+#. In the component that appears, click **Edit**.
+#. In the component editor, specify the settings that you want. See :ref:`LTI Component Settings` for a description of each setting.
+#. Click **Save**.
+
+.. _LTI Component settings:
+
+**********************
+LTI Component Settings
+**********************
+
+.. list-table::
+   :widths: 10 80
+   :header-rows: 1
+
+   * - Setting
+     - Description
+   * - Custom Parameters
+     - Enables you to add one or more custom parameters. For example, if you've added an e-book, you can set a custom parameter that opens the e-book to a specific page. You could also use a custom parameter to set the background color of the LTI component.
+
+       Every custom parameter has a key and a value. You must add the key and value in the following format.
+
+       ::
+
+          key=value
+
+       For example, a custom parameter may resemble the following.
+
+       ::
+
+          bgcolor=red
+
+          page=144
+
+       To add a custom parameter, click **Add**.
+   * - Display Name
+     - Specifies the name of the problem. This name appears above the problem and in the course ribbon at the top of the page in the courseware. Analytics reports may also use the display name to identify this component.
+   * - Hide External Tool
+     - Indicates whether you want to launch an external tool or to use this component as a placeholder for syncing with an external grading system. If you set the value to **True**, Studio hides the **Launch** button and any IFrames for this component. By default, this value is set to **False**.
+   * - LTI ID
+     - Specifies the LTI ID for the external LTI provider. This value must be the same LTI ID that you entered on the **Advanced Settings** page.
+   * - LTI URL
+     - Specifies the URL of the external tool that this component launches. This setting is applicable when **Hide External Tool** is set to False.
+   * - Open in New Page
+     - Indicates whether the problem opens in a new page. If you set this value to **True**,          the student clicks a link that opens the LTI content in a new window. If you set this value to **False**, the LTI content opens in an IFrame in the current page. This setting is applicable when **Hide External Tool** is set to False.
+   * - Scored
+     - Indicates whether the LTI component receives a numerical score from the external LTI system. By default, this value is set to **False**.
+   * - Weight
+     - Specifies the number of points possible for the problem. By default, if an external LTI provider grades the problem, the problem is worth 1 point, and a student’s score can be any value between 0 and 1. This setting is applicable when **Scored** is set to **True**.
+
+       For more information about problem weights and computing point scores, see :ref:`Problem Weight`.

docs/en_us/shared/exercises_tools/math_expression_input.rst

+.. _Math Expression Input:
+
+####################################
+Math Expression Input Problems
+####################################
+
+In math expression input problems, students enter text that represents a mathematical expression into a field, and text is converted to a symbolic expression that appears below that field. Unlike numerical input problems, which only allow integers and a few select constants, math expression problems can include unknown variables and more complicated symbolic expressions. 
+
+.. image:: /Images/MathExpressionInputExample.png
+ :alt: Image of math expression input problem
+
+For more information about characters that students can enter, see :ref:`Math Response Formatting for Students`.
+
+The grader uses a numerical sampling to determine whether the student's response matches the instructor-provided math expression, to a specified numerical tolerance. The instructor must specify the allowed variables in the expression as well as the range of values for each variable.
+
+.. warning:: Math expression input problems cannot currently include negative numbers raised to fractional powers, such as (-1)^(1/2). Math expression input problems can include complex numbers raised to fractional powers, or positive non-complex numbers raised to fractional powers.
+
+When you create a math expression input problem in Studio, you'll use `MathJax <http://www.mathjax.org>`_ to change your plain text into "beautiful math." For more information about how to use MathJax in Studio, see :ref:`MathJax in Studio`.
+
+************************************************
+Create a Math Expression Input Problem
+************************************************
+
+To create a math expression input problem:
+
+#. In the unit where you want to create the problem, click **Problem**
+   under **Add New Component**, and then click the **Advanced** tab.
+#. Click **Math Expression Input**.
+#. In the component that appears, click **Edit**.
+#. In the component editor, replace the example code with your own code. To practice, you may want to use the sample problem code below.
+#. Click **Save**.
+
+**Sample Problem Code**
+
+.. code-block:: xml
+
+  <problem>
+    <p>Some problems may ask for a mathematical expression. Practice creating mathematical expressions by answering the questions below.</p>
+
+    <p>Write an expression for the product of R_1, R_2, and the inverse of R_3.</p>
+    <formularesponse type="ci" samples="R_1,R_2,R_3@1,2,3:3,4,5#10" answer="$VoVi">
+      <responseparam type="tolerance" default="0.00001"/>
+      <formulaequationinput size="40" label="Enter the equation"/>
+    </formularesponse>
+
+  <script type="loncapa/python">
+  VoVi = "(R_1*R_2)/R_3"
+  </script>
+
+    <p>Let <i>x</i> be a variable, and let <i>n</i> be an arbitrary constant. What is the derivative of <i>x<sup>n</sup></i>?</p>
+  <script type="loncapa/python">
+  derivative = "n*x^(n-1)"
+  </script>
+    <formularesponse type="ci" samples="x,n@1,2:3,4#10" answer="$derivative">
+      <responseparam type="tolerance" default="0.00001"/>
+      <formulaequationinput size="40"  label="Enter the equation"/>
+    </formularesponse>
+
+    <solution>
+      <div class="detailed-solution">
+        <p>Explanation or Solution Header</p>
+        <p>Explanation or solution text</p>
+      </div>
+    </solution>
+  </problem>
+
+.. _Math Expression Input Problem XML:
+
+**********************************
+Math Expression Input Problem XML
+**********************************
+
+============
+Templates
+============
+
+.. code-block:: xml
+
+  <problem>
+    <p>Write an expression for the product of R_1, R_2, and the inverse of R_3.</p>
+    <formularesponse type="ci" samples="R_1,R_2,R_3@1,2,3:3,4,5#10" answer="R_1*R_2/R_3">
+      <responseparam type="tolerance" default="0.00001"/> 
+      <formulaequationinput size="40"  label="Enter the equation" />
+    </formularesponse>
+  </problem>
+
+.. code-block:: xml
+
+  <problem>
+    <p>Problem text</p>
+    <formularesponse type="ci" samples="VARIABLES@LOWER_BOUNDS:UPPER_BOUNDS#NUMBER_OF_SAMPLES" answer="$VoVi">
+      <responseparam type="tolerance" default="0.00001"/>
+      <formulaequationinput size="20"  label="Enter the equation" />
+    </formularesponse>
+
+  <script type="loncapa/python">
+  PYTHON SCRIPT
+  </script>
+
+    <solution>
+      <div class="detailed-solution">
+        <p>Explanation or Solution Header</p>
+        <p>Explanation or solution text</p>
+      </div>
+    </solution>
+  </problem>
+
+====
+Tags
+====
+
+* ``<formularesponse>``
+* ``<formulaequationinput />``
+* ``<responseparam>``
+* ``<script>``
+
+**Tag:** ``<formularesponse>``
+
+Specifies that the problem is a math expression input problem. The ``<formularesponse>`` tag is similar to ``<numericalresponse>``, but ``<formularesponse>`` allows unknown variables.
+
+  Attributes
+
+  **type**: Can be "cs" (case sensitive, the default) or "ci" (case insensitive, so that capitalization doesn't matter in variable names).
+
+  **answer**: The correct answer to the problem, given as a mathematical expression. If you precede a variable name in the problem with a dollar sign ($), you can include a script in the problem that computes the expression in terms of that variable.
+
+  **samples**: Specifies important information about the problem in four lists:
+
+    * **variables**: A set of variables that students can enter.
+    * **lower_bounds**: For every defined variable, a lower bound on the numerical tests to use for that variable.
+    * **upper_bounds**: For every defined variable, an upper bound on the numerical tests to use for that variable.
+    * **num_samples**: The number of times to test the expression.
+
+    Commas separate items inside each of the four individual lists, and the at sign (@), colon (:), and pound sign (#) characters separate the four lists. The format is the following:
+
+    ``"variables@lower_bounds:upper_bounds#num_samples``
+
+    For example, a ``<formularesponse>`` tag that includes the **samples** attribute may look like either of the following.
+
+    ``<formularesponse samples="x,n@1,2:3,4#10">``
+
+    ``<formularesponse samples="R_1,R_2,R_3@1,2,3:3,4,5#10">``
+
+  Children
+
+  * ``<formulaequationinput />``
+
+**Tag:** ``<formulaequationinput />``
+
+Creates a response field where a student types an answer to the problem in plain text, as well as a second field below the response field where the student sees a typeset version of the plain text. The parser that renders the student's plain text into typeset math is the same parser that evaluates the student's response for grading.
+
+  Attributes
+
+  .. list-table::
+     :widths: 20 80
+
+     * - Attribute
+       - Description
+     * - label (required)
+       - Specifies the name of the response field.
+     * - size (optional)
+       - Specifies the width, in characters, of the response field where students enter answers.
+
+  Children
+  
+  (none)
+
+**Tag:** ``<responseparam>``
+
+Used to define an upper bound on the variance of the numerical methods used to approximate a test for equality.
+
+  Attributes
+
+  .. list-table::
+     :widths: 20 80
+
+     * - Attribute
+       - Description
+     * - default (required)
+       - A number or a percentage specifying how close the student and grader expressions must be. Failure to include a tolerance leaves expressions vulnerable to unavoidable rounding errors during sapling, causing some student input to be graded as incorrect, even if it is algebraically equivalent to the grader's expression.
+     * - type
+       - "tolerance"--defines a tolerance for a number
+
+  Children
+  
+  (none)
+

docs/en_us/shared/exercises_tools/mathjax.rst

+.. _MathJax in Studio:
+
+############################################
+A Brief Introduction to MathJax in Studio
+############################################
+
+To write clear and professional-looking symbols and equations, we use a LaTeX-like 
+language called
+`MathJax <http://www.google.com/url?q=http%3A%2F%2Fwww.mathjax.org%2F&sa=D&sntz=1&usg=AFQjCNGef2H-mZCdmCo7-kWHfu9fUGVCfg>`_.
+Your MathJax equations can appear with other text in the paragraph (inline equations) or
+on their own lines (display equations).
+
+- For inline equations, you can do either of the following.
+
+  - Surround your Mathjax expression with backslashes and **parentheses**.
+    
+    ``\( equation \)``
+
+  - Surround your Mathjax expression with [mathjaxinline] tags. Note that these 
+    tags use square brackets ([]).
+
+    [mathjaxinline] equation [/mathjaxinline]
+    
+- For display equations, you can do either of the following.
+
+  - Surround your Mathjax expression with backslashes and **brackets**.
+
+    ``\[ equation \]``
+
+  - Surround your Mathjax expression with [mathjax] tags. Note that these tags use 
+    square brackets ([]).
+
+    [mathjax] equation [/mathjax]
+
+You can use MathJax in HTML (text) components and in Problem components.
+
+.. note:: Complete MathJax documentation (together with a testing tool) can be 
+          found at `http://www.onemathematicalcat.org/MathJaxDocumentation/TeXSyntax.htm <http://www.google.com/url?q=http%3A%2F%2Fwww.onemathematicalcat.org%2FMathJaxDocumentation%2FTeXSyntax.htm&sa=D&sntz=1&usg=AFQjCNEV8PtCX6Csp0lW7lDKOLIKCOCkHg>`_.
+
+****************************
+HTML (Text) Components
+****************************
+
+In the HTML component editor, you can use MathJax both in Visual view and in HTML view.
+
+.. image:: /Images/MathJax_HTML.png
+ :alt: Image of an HTML component with MathJax in both the Visual and HTML views
+
+*********************
+Problem Components
+*********************
+
+In the Problem component editor, you can use MathJax both in the Simple Editor 
+and in the Advanced Editor.
+
+In the example problem below, note that the Einstein equation in the
+explanation is enclosed in backslashes and parentheses, so it appears inline with the text. The
+Navier-Stokes equation is enclosed in backslashes and brackets, so it appears on its
+own line.
+
+.. image:: /Images/MathJax_Problem.png
+ :alt: Image of a problem component with MathJax in both the Visual and HTML views
\ No newline at end of file

docs/en_us/shared/exercises_tools/molecule_editor.rst

+.. _Molecule Editor:
+
+#######################
+Molecule Editor Tool
+#######################
+
+Students can use the molecule editor to learn how to create molecules. The molecule editor allows students to draw molecules that follow the rules for covalent bond formation and formal charge, even if the molecules are chemically impossible, are unstable, or do not exist in living systems. The molecule editor warns students if they try to submit a structure that is chemically impossible.
+
+The molecule editor incorporates two tools: the JSME molecule editor created by Peter Erl and Bruno Bienfait, and JSmol, a JavaScript-based molecular viewer from Jmol. (You don't need to download either of these tools--Studio uses them automatically.) For more information about the JSME molecule editor, see `JSME Molecule Editor <http://peter-ertl.com/jsme/index.html>`_. For more information about JSmol, see `JSmol <http://sourceforge.net/projects/jsmol/>`_.
+
+.. image:: /Images/Molecule_Editor.png
+  :alt: Image of the molecule editor
+
+.. _Create the Molecule Editor:
+
+******************************
+Create the Molecule Editor
+******************************
+
+To create a molecule editor, you need the following files:
+
+* MoleculeAnswer.png
+* MoleculeEditor_HTML.png
+* dopamine.mol
+
+To download all of these files in a .zip archive, go to http://files.edx.org/MoleculeEditorFiles.zip.
+
+.. note:: The molecule that appears when the tool starts is a dopamine molecule. To use a different molecule, download the .mol file for that molecule from the `list of molecules <http://www.biotopics.co.uk/jsmol/molecules/>`_ on the `BioTopics <http://www.biotopics.co.uk/>`_ website. Then, upload the .mol file to the **Files & Uploads** page for your course in Studio, and change "dopamine.mol" in the example code to the name of your .mol file.
+
+To create the molecule editor that appears in the image above, you need an HTML component followed by a Problem component.
+
+#. Upload all of the files listed above to the **Files & Uploads** page in your course.
+#. Create the HTML component.
+
+  #. In the unit where you want to create the problem, click **HTML** under **Add New Component**, and then click **HTML**.
+  #. In the component that appears, click **Edit**.
+  #. In the component editor, paste the HTML component code from below.
+  #. Make any changes that you want, and then click **Save**.
+
+3. Create the Problem component.
+
+  #. Under the HTML component, click **Problem** under **Add New Component**, and then click **Blank Advanced Problem**.
+  #. In the component that appears, click **Edit**.
+  #. In the component editor, paste the Problem component code from below.
+  #. Click **Save**.
+
+.. _EMC Problem Code:
+
+========================
+Molecule Editor Code
+========================
+
+To create the molecule editor, you need an HTML component and a Problem component.
+
+HTML Component Code
+***************************
+
+.. code-block:: xml
+
+  <h2>Molecule Editor</h2>
+  <p>The molecule editor makes creating and visualizing molecules easy. A chemistry professor may have you build and submit a molecule as part of an exercise.</p>
+  <div>
+  <script type="text/javascript">// <![CDATA[
+  function toggle2(showHideDiv, switchTextDiv) {
+              var ele = document.getElementById(showHideDiv);
+              var text = document.getElementById(switchTextDiv);
+              if(ele.style.display == "block") {
+                  ele.style.display = "none";
+                  text.innerHTML = "+ open";
+                  }
+              else {
+                  ele.style.display = "block";
+                  text.innerHTML = "- close";
+              }
+          }
+  // ]]></script>
+  </div>
+  <div>
+  <style type="text/css"></style>
+  </div>
+  <div id="headerDiv">
+  <div id="titleText">Using the Molecule Editor<a id="myHeader" href="javascript:toggle2('myContent','myHeader');">+ open </a></div>
+  </div>
+  <div id="contentDiv">
+  <div id="myContent" style="display: none;">
+  <p>In this problem you will edit a molecule using the molecular drawing program shown below:</p>
+  <img alt="" src="/static/MoleculeEditor_HTML.png" /></div>
+  </div>
+  <p>&nbsp;</p>
+  <div id="headerDiv">
+  <div id="titleText">Are the molecules I've drawn chemically possible?<a id="IntroductionHeader" href="javascript:toggle2('IntroductionContent','IntroductionHeader');">+ open </a></div>
+  </div>
+  <div id="contentDiv">
+  <div id="IntroductionContent" style="display: none;">
+  <p>The chemical editor you are using ensures that the structures you draw are correct in one very narrow sense, that they follow the rules for covalent bond formation and formal charge. However, there are many structures that follow these rules that are chemically impossible, unstable, do not exist in living systems, or are beyond the scope of this course. The editor will let you draw them because, in contrast to the rules of formal charge, these properties cannot be easily and reliably predicted from structures.</p>
+  <p>If you submit a structure that includes atoms that are not possible or are beyond the scope of this course, the software will warn you specifically about these parts of your structure and you will be allowed to edit your structure and re-submit. Submitting an improper structure will not count as one of your tries. In general, you should try to use only the atoms most commonly cited in this course: C, H, N, O, P, and S. If you want to learn about formal charge, you can play around with other atoms and unusual configurations and look at the structures that result.</p>
+  </div>
+  </div>
+  <div id="ap_listener_added">&nbsp;</div>
+
+
+
+
+Problem Component Code
+***************************
+
+.. code-block:: xml
+
+  <problem>
+  <p>The dopamine molecule, as shown, cannot make ionic bonds. Edit the dopamine molecule so it can make ionic bonds.</p>
+  <p>When you are ready, click Check. If you need to start over, click Reset.</p>
+    <script type="loncapa/python">
+  def check1(expect, ans):
+      import json
+      mol_info = json.loads(ans)["info"]
+      return any(res == "Can Make Ionic Bonds" for res in mol_info)
+      </script>
+    <customresponse cfn="check1">
+      <editamoleculeinput file="/static/dopamine.mol">
+          </editamoleculeinput>
+    </customresponse>
+    <solution>
+      <img src="/static/MoleculeAnswer.png"/>
+    </solution>
+  </problem>
+
+**Problem 2**
+
+::
+
+  <problem>
+  <p>The dopamine molecule, as shown, cannot make strong hydrogen bonds. Edit the dopamine molecule so that it can make strong hydrogen bonds.</p>
+  <script type="loncapa/python">
+  def grader_1(expect, ans):
+      import json
+      mol_info = json.loads(ans)["info"]
+      return any(res == "Cannot Make Strong Hydrogen Bonds" for res in mol_info)
+  </script>
+    <customresponse cfn="grader_1">
+      <editamoleculeinput file="/static/dopamine.mol">
+      </editamoleculeinput>
+    </customresponse>
+  </problem>
+
+**Problem 3**
+
+::
+
+  <problem>
+  <p>The dopamine molecule has an intermediate hydrophobicity. Edit the dopamine molecule so that it is more hydrophobic.</p>
+  <script type="loncapa/python">
+  def grader_2(expect, ans):
+      import json
+      mol_info = json.loads(ans)["info"]
+
+      hydrophobicity_index_str=mol_info[0]
+      hydrophobicity_index=float(hydrophobicity_index_str[23:])
+      return hydrophobicity_index &gt; .490
+  </script>
+    <customresponse cfn="grader_2">
+      <editamoleculeinput file="/static/dopamine.mol">
+      </editamoleculeinput>
+  </customresponse>
+  </problem>
\ No newline at end of file

docs/en_us/shared/exercises_tools/mult_choice_num_input.rst

+.. _Multiple Choice and Numerical Input:
+
+############################################
+Multiple Choice and Numerical Input Problem
+############################################
+
+You can create a problem that combines a multiple choice and numerical input problems. Students not only select a response from options that you provide, but also provide more specific information, if necessary.
+
+.. image:: /Images/MultipleChoice_NumericalInput.png
+  :alt: Image of a multiple choice and numerical input problem
+
+.. note:: Currently, students can only enter numerals in the text field. Students cannot enter words or mathematical expressions.
+
+.. _Create an MCNI Problem:
+
+********************************************************
+Create a Multiple Choice and Numerical Input Problem
+********************************************************
+
+To create a multiple choice and numerical input problem:
+
+#. In the unit where you want to create the problem, click **Problem** under **Add New Component**, and then click the **Advanced** tab.
+#. Click **Blank Advanced Problem**.
+#. In the component that appears, click **Edit**.
+#. In the component editor, paste the code from below.
+#. Replace the example problem and response options with your own text.
+#. Click **Save**.
+
+.. _MCNI Problem Code:
+
+************************************************
+Multiple Choice and Numerical Input Problem Code
+************************************************
+
+.. code-block:: xml
+
+  <problem>
+  The numerical value of pi, rounded to two decimal points, is 3.24.
+  <choicetextresponse>
+  <radiotextgroup>
+  <choice correct="false">True.</choice>
+  <choice correct="true">False. The correct value is <numtolerance_input answer="3.14"/>.</choice>
+  </radiotextgroup>
+  </choicetextresponse>
+  </problem>
\ No newline at end of file

docs/en_us/shared/exercises_tools/multiple_choice.rst

+.. _Multiple Choice:
+
+########################
+Multiple Choice Problem
+########################
+
+In multiple choice problems, students select one option from a list of answer options. Unlike with dropdown problems, whose answer choices don't appear until the student clicks the drop-down arrow, answer choices for multiple choice problems are always visible directly below the question.
+
+.. image:: /Images/MultipleChoiceExample.png
+ :alt: Image of a multiple choice problem
+
+Multiple choice problems also have several advanced options, such as presenting a random set of choices to each student. For more information about these options, see :ref:`Multiple Choice Advanced Options`.
+
+****************************************
+Create a Multiple Choice Problem
+****************************************
+
+You can create multiple choice problems in the Simple Editor or in the Advanced Editor.
+
+.. note:: All problems must include labels for accessibility. The label generally includes the text of the main question in your problem. To add a label for a common problem, surround the text of the label with angle brackets pointed toward the text (>>label text<<).
+
+================
+Simple Editor
+================
+
+#. Under **Add New Component**, click **Problem**.
+#. In the **Select Problem Component Type** screen, click **Multiple
+   Choice** on the **Common Problem Types** tab.
+#. When the new Problem component appears, click **Edit**.
+#. In the component editor, replace the sample problem text with the text of your 
+   problem. Enter each answer option on its own line.
+#. Determine the text of the problem to use as a label, and then surround that text with two sets of angle brackets (>><<).
+#. Select all the answer options, and then click the multiple choice button. 
+   
+   .. image:: /Images/ProbCompButton_MultChoice.png
+    :alt: Image of the multiple choice button
+   
+   When you do this, the component editor adds a pair of parentheses next to each 
+   possible answer.
+   
+#. Add an "x" between the parentheses next to the correct answer.
+   
+#. In the component editor, select the text of the explanation, and then click the 
+   explanation button to add explanation tags around the text.
+
+   .. image:: /Images/ProbCompButton_Explanation.png
+    :alt: Image of the explanation button
+
+#. On the **Settings** tab, specify the settings that you want. 
+#. Click **Save**.
+
+For the example problem above, the text in the Problem component is the
+following.
+
+::
+
+    >>Lateral inhibition, as was first discovered in the horsehoe crab:<<
+
+    ( ) is a property of touch sensation, referring to the ability of crabs to 
+    detect nearby predators.
+    ( ) is a property of hearing, referring to the ability of crabs to detect 
+    low frequency noises.
+    (x) is a property of vision, referring to the ability of crabs eyes to 
+    enhance contrasts.
+    ( ) has to do with the ability of crabs to use sonar to detect fellow horseshoe 
+    crabs nearby.
+    ( ) has to do with a weighting system in the crabs skeleton that allows it to 
+    balance in turbulent water.
+
+    [Explanation]
+    Horseshoe crabs were essential to the discovery of lateral inhibition, a property of 
+    vision present in horseshoe crabs as well as humans, that enables enhancement of 
+    contrast at edges of objects as was demonstrated in class. In 1967, Haldan Hartline 
+    received the Nobel prize for his research on vision and in particular his research 
+    investigating lateral inhibition using horseshoe crabs.
+    [Explanation]
+
+================
+Advanced Editor
+================
+
+To create this problem in the Advanced Editor, click the **Advanced** tab in the Problem component editor, and then replace the existing code with the following code.
+
+.. code-block:: xml
+
+  <problem>
+  <p>Lateral inhibition, as was first discovered in the horsehoe crab...</p>
+  <multiplechoiceresponse>
+    <choicegroup type="MultipleChoice" label="Lateral inhibition, as was first discovered in the horsehoe crab">
+      <choice correct="false">is a property of touch sensation, referring to the ability of crabs to detect nearby predators.</choice>
+      <choice correct="false">is a property of hearing, referring to the ability of crabs to detect low frequency noises.</choice>
+      <choice correct="false">is a property of vision, referring to the ability of crabs eyes to enhance contrasts.</choice>
+      <choice correct="true">has to do with the ability of crabs to use sonar to detect fellow horseshoe crabs nearby.</choice>
+      <choice correct="false">has to do with a weighting system in the crabs skeleton that allows it to balance in turbulent water.</choice>
+    </choicegroup>
+  </multiplechoiceresponse>
+  <solution>
+    <div class="detailed-solution">
+      <p>Explanation</p>
+      <p>Horseshoe crabs were essential to the discovery of lateral inhibition, a property of vision present in horseshoe crabs as well as humans, that enables enhancement of contrast at edges of objects as was demonstrated in class. In 1967, Haldan Hartline received the Nobel prize for his research on vision and in particular his research investigating lateral inhibition using horseshoe crabs.</p>
+    </div>
+  </solution>
+  </problem>
+
+.. _Multiple Choice Advanced Options:
+
+*********************************************
+Advanced Options for Multiple Choice Problems
+*********************************************
+
+Multiple choice problems have several advanced options. You can change the order of answers in the problem, include explanations that appear when a student selects a specific incorrect answer, or present a random set of choices to each student. For more information, see the following:
+
+
+* :ref:`Shuffle Answers in a Multiple Choice Problem`
+* :ref:`Targeted Feedback in a Multiple Choice Problem`
+* :ref:`Answer Pools in a Multiple Choice Problem`
+
+.. _Shuffle Answers in a Multiple Choice Problem:
+
+=============================================
+Shuffle Answers in a Multiple Choice Problem
+============================================= 
+
+Optionally, you can configure a multiple choice problem so that it shuffles the order of possible answers.
+
+For example, one view of the problem could be:
+
+.. image:: ../Images/multiple-choice-shuffle-1.png
+ :alt: Image of a multiple choice problem
+
+And another view of the same problem, for another student or for the same student of a subsequent view of the unit, could be:
+
+.. image:: ../Images/multiple-choice-shuffle-2.png
+ :alt: Image of a multiple choice problem with shuffled answers
+
+You can also have some answers shuffled, but not others. For example, you may want to have the answer "All of the Above" fixed at the end of the list, but shuffle other answers.
+
+You can configure the problem to shuffle answers through :ref:`Simple Editor` or :ref:`Advanced Editor`.
+
+
+Use the Simple Editor to Shuffle Answers
+*********************************************
+
+You can configure the problem to shuffle answers in :ref:`Simple Editor`.
+
+For example, the following text defines a multiple choice problem, before shuffling is enabled. The ``(x)`` indicates the correct answer::
+
+ >>What Apple device competed with the portable CD player?<<
+     ( ) The iPad
+     ( ) Napster
+     (x) The iPod
+     ( ) The vegetable peeler
+
+To add shuffling to this problem, add ``!`` in the parenthesis of the first answer::
+
+ >>What Apple device competed with the portable CD player?<<
+     (!) The iPad
+     ( ) Napster
+     (x) The iPod
+     ( ) The vegetable peeler
+
+To fix an answer's location in the list, add ``@`` in the parenthesis of that answer::
+
+ >>What Apple device competed with the portable CD player?<<
+     (!) The iPad
+     ( ) Napster
+     (x) The iPod
+     ( ) The vegetable peeler
+     (@) All of the above
+
+You can combine symbols within parenthesis as necessary. For example, to show the correct answer in a fixed location, you could use::
+ 
+  (x@) The iPod
+
+Use the Advanced Editor to Shuffle Answers
+*********************************************
+
+You can configure the problem to shuffle answers through XML in :ref:`Advanced Editor`.
+
+For example, the following XML defines a multiple choice problem, before shuffling is enabled:
+
+.. code-block:: xml
+
+ <p>What Apple device competed with the portable CD player?</p>
+ <multiplechoiceresponse>
+  <choicegroup type="MultipleChoice">
+    <choice correct="false">The iPad</choice>
+    <choice correct="false">Napster</choice>
+    <choice correct="true">The iPod</choice>
+    <choice correct="false">The vegetable peeler</choice>
+  </choicegroup>
+ </multiplechoiceresponse>
+
+
+To add shuffling to this problem, add ``shuffle="true"`` to the ``<choicegroup>`` element:
+
+.. code-block:: xml
+
+ <p>What Apple device competed with the portable CD player?</p>
+ <multiplechoiceresponse>
+  <choicegroup type="MultipleChoice" shuffle="true">
+    <choice correct="false">The iPad</choice>
+    <choice correct="false">Napster</choice>
+    <choice correct="true">The iPod</choice>
+    <choice correct="false">The vegetable peeler</choice>
+  </choicegroup>
+ </multiplechoiceresponse>
+
+To fix an answer's location in the list, add ``fixed="true"`` to the ``choice`` element for the answer:
+
+.. code-block:: xml
+
+ <p>What Apple device competed with the portable CD player?</p>
+ <multiplechoiceresponse>
+  <choicegroup type="MultipleChoice" shuffle="true">
+    <choice correct="false">The iPad</choice>
+    <choice correct="false">Napster</choice>
+    <choice correct="true">The iPod</choice>
+    <choice correct="false">The vegetable peeler</choice>
+    <choice correct="false" fixed="true">All of the above</choice>
+  </choicegroup>
+ </multiplechoiceresponse>
+
+
+.. _Targeted Feedback in a Multiple Choice Problem:
+
+===============================================
+Targeted Feedback in a Multiple Choice Problem
+===============================================
+
+You can configure a multiple choice problem so that explanations for incorrect answers are automatically shown to students. You can use these explanations to guide students towards the right answer. Therefore, targeted feedback is most useful for multiple choice problems for which students are allowed multiple attempts.
+
+
+Use the Advanced Editor to Configure Targeted Feedback
+********************************************************
+
+You configure the problem to provide targeted feedback through XML in :ref:`Advanced Editor`.
+
+Follow these XML guidelines:
+
+* Add a ``targeted-feedback`` attribute to the ``<multiplechoiceresponse>`` element, with no value: ``<multiplechoiceresponse targeted-feedback="">``
+* Add a ``<targetedfeedbackset>`` element before the ``<solution>`` element.
+* Within ``<targetedfeedbackset>``, add one or more ``<targetedfeedback>`` elements.
+* Within each ``<targetedfeedback>`` element, enter your explanation for the incorrect answer in HTML as markup described below.
+* Connect the ``<targetedfeedback>`` element with a specific incorrect answer by using the same ``explanation-id`` attribute value for each.
+* Use the ``<solution>`` element for the correct answer, with the same ``explanation-id`` attribute value as the correct ``<choice>`` element.
+
+For example, the XML for the multiple choice problem is:
+
+.. code-block:: xml
+
+   <p>What Apple device competed with the portable CD player?</p>
+   <multiplechoiceresponse targeted-feedback="">
+    <choicegroup type="MultipleChoice">
+      <choice correct="false" explanation-id="feedback1">The iPad</choice>
+      <choice correct="false" explanation-id="feedback2">Napster</choice>
+      <choice correct="true" explanation-id="correct">The iPod</choice>
+      <choice correct="false" explanation-id="feedback3">The vegetable peeler</choice>
+    </choicegroup>
+   </multiplechoiceresponse>
+ 
+This is followed by XML that defines the targeted feedback:
+
+.. code-block:: xml
+
+   <targetedfeedbackset>
+     <targetedfeedback explanation-id="feedback1">
+       <div class="detailed-targeted-feedback">
+         <p>Targeted Feedback</p>
+         <p>The iPad came out later and did not directly compete with portable CD players.</p>
+       </div>
+     </targetedfeedback>
+     <targetedfeedback explanation-id="feedback2">
+       <div class="detailed-targeted-feedback">
+         <p>Targeted Feedback</p>
+         <p>Napster was not an Apple product.</p>
+       </div>
+     </targetedfeedback>
+     <targetedfeedback explanation-id="feedback3">
+       <div class="detailed-targeted-feedback">
+         <p>Targeted Feedback</p>
+         <p>Vegetable peelers don't play music.</p>
+       </div>
+     </targetedfeedback>
+    </targetedfeedbackset>
+
+    <solution explanation-id="correct">
+     <div class="detailed-solution">
+      <p>The iPod directly competed with portable CD players.</p>
+     </div>
+    </solution>
+
+
+.. _Answer Pools in a Multiple Choice Problem:
+
+=============================================
+Answer Pools in a Multiple Choice Problem
+=============================================
+
+You can configure a multiple choice problem so that a random subset of choices are shown to each student. For example, you can add 10 possible choices to the problem, and each student views a set of five choices.
+
+The answer pool must have at least one correct answer, and can have more than one. In each set of choices shown to a student, one correct answer is included. For example, you may configure two correct answers in the set of 10. One of the two correct answers is included in each set a student views.
+
+Use the Advanced Editor to Configure Answer Pools
+**************************************************
+
+You configure the problem to provide answer pools through XML in :ref:`Advanced Editor`.
+
+Follow these XML guidelines:
+
+* In the ``<choicegroup>`` element, add the ``answer-pool`` attribute, with the numerical value indicating the number of possible answers in the set. For example, ``<choicegroup answer-pool="4">``.
+
+* For each correct answer, to the ``<choice>`` element, add an ``explanation-id`` attribute and value that maps to a solution. For example, ``<choice correct="true" explanation-id="iPod">The iPod</choice>``.
+
+* For each ``<solution>`` element, add an ``explanation-id`` attribute and value that maps back to a correct answer. For example, ``<solution explanation-id="iPod">``.
+
+.. note:: If the choices include only one correct answer, you do not have to use the ``explanation-id`` in either the ``choice`` or ``<solution>`` element. You do still use the ``<solutionset>`` element to wrap the ``<solution>`` element.
+
+For example, for the following multiple choice problem, a student will see four choices, and in each set one of the choices will be one of the two correct ones. The explanation shown for the correct answer is the one with the same explanation ID.
+
+.. code-block:: xml
+
+ <problem>
+   <p>What Apple devices let you carry your digital music library in your pocket?</p>
+   <multiplechoiceresponse>
+    <choicegroup type="MultipleChoice" answer-pool="4">
+      <choice correct="false">The iPad</choice>
+      <choice correct="false">Napster</choice>
+      <choice correct="true" explanation-id="iPod">The iPod</choice>
+      <choice correct="false">The vegetable peeler</choice>
+      <choice correct="false">The iMac</choice>
+      <choice correct="true" explanation-id="iPhone">The iPhone</choice>
+    </choicegroup>
+   </multiplechoiceresponse>
+
+    <solutionset>
+        <solution explanation-id="iPod">
+        <div class="detailed-solution">
+            <p>Explanation</p>
+            <p>Yes, the iPod is Apple's portable digital music player.</p>
+        </div>
+        </solution>
+        <solution explanation-id="iPhone">
+        <div class="detailed-solution">
+            <p>Explanation</p>
+            <p>In addition to being a cell phone, the iPhone can store and play your digital music.</p>
+        </div>
+        </solution>
+    </solutionset>
+ </problem>
+
+
+.. _Multiple Choice Problem XML:
+
+******************************
+Multiple Choice Problem XML 
+******************************
+
+================
+Template
+================
+
+.. code-block:: xml
+
+  <problem>
+  <p>Question text</p>
+  <multiplechoiceresponse>
+    <choicegroup type="MultipleChoice" label="label text">
+      <choice correct="false" name="a">Incorrect choice</choice>
+      <choice correct="true" name="b">Correct choice</choice>
+    </choicegroup>
+  </multiplechoiceresponse>
+
+  <solution>
+    <div class="detailed-solution">
+    <p>Explanation or solution header</p>
+    <p>Explanation or solution text</p>
+    </div>
+  </solution>
+  </problem>
+
+================
+Tags
+================
+
+* ``<multiplechoiceresponse>`` (required): Indicates that the problem is a multiple choice problem.
+* ``<choicegroup>`` (required): Indicates the beginning of the list of options. 
+* ``<choice>`` (required): Lists an answer option.
+
+**Tag:** ``<multiplechoiceresponse>``
+
+Indicates that the problem is a multiple choice problem.
+
+  Attributes
+
+  (none)
+
+  Children
+
+  * ``<choicegroup>``
+  * All standard HTML tags (can be used to format text)
+
+**Tag:** ``<choicegroup>``
+
+Indicates the beginning of the list of options.
+
+  Attributes
+
+  .. list-table::
+     :widths: 20 80
+
+     * - Attribute
+       - Description
+     * - label (required)
+       - Specifies the name of the response field.
+     * - type (required)
+       - Must be set to "MultipleChoice".
+
+  Children
+
+  * ``<choice>`` 
+
+**Tag:** ``<choice>``
+
+Lists an answer option. 
+
+  Attributes
+
+  .. list-table::
+     :widths: 20 80
+
+     * - Attribute
+       - Description
+     * - correct (at least one required)
+       - Indicates a correct or incorrect answer. When the attribute is set to "true", the choice is a correct answer. When the attribute is set to "false", the choice is an incorrect answer. Only one choice can be a correct answer.
+     * - name
+       - A unique name that the back end uses to refer to the choice.
+
+  Children
+  
+  (none)
\ No newline at end of file

docs/en_us/shared/exercises_tools/numerical_input.rst

+.. _Numerical Input:
+
+########################
+Numerical Input
+########################
+
+Numerical input problems are the simpler of the two mathematics tools that Studio offers. In these problems, students enter numbers or specific and relatively simple mathematical expressions to answer a question. The text that the students enter is converted to a symbolic expression that appears below the response field. 
+
+.. image:: /Images/image292.png
+ :alt: Image of a numerical input problem
+
+Note that students' responses don't have to be exact for these problems. You can specify a margin of error, or tolerance. You can also specify a correct answer explicitly, or use a Python script. For more information, see the instructions below.
+
+Responses for numerical input problems can include integers, fractions,
+and constants such as *pi* and *g*. Responses can also include text
+representing common functions, such as square root (sqrt) and log base 2
+(log2), as well as trigonometric functions and their inverses, such as
+sine (sin) and arcsine (arcsin). For these functions, the
+text that the student enters is converted into mathematical symbols. The following
+example shows the way the system renders students' text responses in
+numerical input problems. 
+
+.. image:: /Images/Math5.png
+ :alt: Image of a numerical input probem rendered by Studio
+
+For more information about characters that students can enter, see :ref:`Math Response Formatting for Students`.
+
+***********************************
+Create a Numerical Input Problem 
+***********************************
+
+You can create numerical problems in the Simple Editor or in the Advanced Editor regardless of the answer to the problem. If the text of your problem doesn't include any italics, bold formatting, or special characters, you can create the problem in the Simple Editor. If the text of your problem contains special formatting or characters, or if your problem contains a Python script, you'll use the Advanced Editor.
+
+For example, the following example problems require the Advanced Editor. 
+
+.. image:: /Images/NumericalInput_Complex.png
+ :alt: Image of a more complex numerical input problem
+
+For more information about including a Python script in your problem, see :ref:`Write Your Own Grader`.
+
+==================
+Simple Editor
+==================
+
+#. Under **Add New Component**, click **Problem**.
+#. In the **Select Problem Component Type** screen, click **Numerical
+   Input** on the **Common Problem Types** tab.
+   
+3. When the new Problem component appears, click **Edit**.
+#. In the component editor, replace the sample problem text with your own text.
+#. Determine the text of the problem to use as a label, and then surround that text with two sets of angle brackets (>><<).
+#. Select the text of the answer, and then click the numerical input button. 
+
+.. image:: /Images/ProbCompButton_NumInput.png
+    :alt: Image of the numerical input button
+
+When you do this, an equal sign appears next to the answer.
+        
+7. (Optional) Specify a margin of error, or tolerance. You can specify a percentage, number, or range.
+
+   * To specify a percentage on either side of the correct answer, add **+-NUMBER%** after the answer. For example, if you want to include a 2% tolerance, add **+-2%**. 
+
+   * To specify a number on either side of the correct answer, add **+-NUMBER** after the answer. For example, if you want to include a tolerance of 5, add **+-5**.
+
+   * To specify a range, use brackets [] or parentheses (). A bracket indicates that range includes the number next to it. A parenthesis indicates that the range does not include the number next to it. For example, if you specify **[5, 8)**, correct answers can be 5, 6, and 7, but not 8. Likewise, if you specify **(5, 8]**, correct answers can be 6, 7, and 8, but not 5.
+
+8. In the component editor, select the text of the explanation, and then click the 
+   explanation button to add explanation tags around the text.
+
+   .. image:: /Images/ProbCompButton_Explanation.png
+    :alt: Image of the explanation button
+
+9. On the **Settings** tab, specify the settings that you want. 
+#. Click **Save**.
+
+For the first example problem above, the text in the Problem component is the
+following.
+
+::
+
+   >>What base is the decimal numeral system in?<<
+
+   = 10
+    
+   [explanation]
+   The decimal numerial system is base ten.
+   [explanation]
+
+==================
+Advanced Editor
+==================
+
+To create this problem in the Advanced Editor, click the **Advanced** tab in the Problem component editor, and then replace the existing code with the following code.
+
+**Problem Code**:
+
+.. code-block:: xml
+
+  <problem>
+    <p><b>Example Problem</b></p>
+
+  <p>What base is the decimal numeral system in?
+      <numericalresponse answer="10">
+          <formulaequationinput label="What base is the decimal numeral system in?"/>
+      </numericalresponse>
+  </p>
+
+    <p>What is the value of the standard gravity constant <i>g</i>, measured in m/s<sup>2</sup>? Give your answer to at least two decimal places.
+    <numericalresponse answer="9.80665">
+      <responseparam type="tolerance" default="0.01" />
+      <formulaequationinput label="Give your answer to at least two decimal places"/>
+    </numericalresponse>
+  </p>
+
+  <!-- The following uses Python script spacing. Make sure it isn't indented when you add it to the Problem component. -->
+  <script type="loncapa/python">
+  computed_response = math.sqrt(math.fsum([math.pow(math.pi,2), math.pow(math.e,2)]))
+  </script>
+
+  <p>What is the distance in the plane between the points (pi, 0) and (0, e)? You can type math.
+      <numericalresponse answer="$computed_response">
+          <responseparam type="tolerance" default="0.0001" />
+          <formulaequationinput label="What is the distance in the plane between the points (pi, 0) and (0, e)?"/>
+      </numericalresponse>
+  </p>
+  <solution>
+    <div class="detailed-solution">
+      <p>Explanation</p>
+      <p>The decimal numerical system is base ten.</p>
+      <p>The standard gravity constant is defined to be precisely 9.80665 m/s<sup>2</sup>.
+      This is 9.80 to two decimal places. Entering 9.8 also works.</p>
+      <p>By the distance formula, the distance between two points in the plane is
+         the square root of the sum of the squares of the differences of each coordinate.
+        Even though an exact numerical value is checked in this case, the
+        easiest way to enter this answer is to type
+        <code>sqrt(pi^2+e^2)</code> into the editor.
+        Other answers like <code>sqrt((pi-0)^2+(0-e)^2)</code> also work.
+      </p>
+    </div>
+  </solution>
+  </problem>
+
+.. _Numerical Input Problem XML:
+
+****************************
+Numerical Input Problem XML
+****************************
+
+=========
+Templates
+=========
+
+The following templates represent problems with and without a decimal or percentage tolerance.
+
+Problem with no tolerance
+***************************
+
+.. code-block:: xml
+
+  <p>TEXT OF PROBLEM
+      <numericalresponse answer="ANSWER (NUMBER)">
+          <formulaequationinput label="TEXT OF PROBLEM"/>
+      </numericalresponse>
+  </p>
+   
+    <solution>
+    <div class="detailed-solution">
+    <p>TEXT OF SOLUTION</p>
+    </div>
+  </solution>
+  </problem>
+
+Problem with a decimal tolerance
+************************************
+
+.. code-block:: xml
+
+  <problem>
+   
+    <p>TEXT OF PROBLEM
+    <numericalresponse answer="ANSWER (NUMBER)">
+      <responseparam type="tolerance" default="NUMBER (DECIMAL, e.g., .02)" />
+      <formulaequationinput label="TEXT OF PROBLEM"/>
+    </numericalresponse>
+  </p>
+   
+    <solution>
+    <div class="detailed-solution">
+    <p>TEXT OF SOLUTION</p>
+    </div>
+  </solution>
+  </problem>
+
+Problem with a percentage tolerance
+************************************
+
+.. code-block:: xml
+
+  <problem>
+   
+   <p>TEXT OF PROBLEM
+    <numericalresponse answer="ANSWER (NUMBER)">
+      <responseparam type="tolerance" default="NUMBER (PERCENTAGE, e.g., 3%)" />
+      <formulaequationinput label="TEXT OF PROBLEM"/>
+    </numericalresponse>
+   </p>
+
+    <solution>
+    <div class="detailed-solution">
+    <p>TEXT OF SOLUTION</p>
+    </div>
+  </solution>
+  </problem>
+
+Answer created with a script
+************************************
+
+.. code-block:: xml
+
+  <problem>
+
+  <!-- The following uses Python script spacing. Make sure it isn't indented when you add it to the Problem component. -->
+  <script type="loncapa/python">
+  computed_response = math.sqrt(math.fsum([math.pow(math.pi,2), math.pow(math.e,2)]))
+  </script>
+
+  <p>TEXT OF PROBLEM
+      <numericalresponse answer="$computed_response">
+          <responseparam type="tolerance" default="0.0001" />
+          <formulaequationinput label="TEXT OF PROBLEM"/>
+      </numericalresponse>
+  </p>
+
+    <solution>
+    <div class="detailed-solution">
+     <p>TEXT OF SOLUTION</p>
+    </div>
+  </solution>
+  </problem>
+
+====
+Tags
+====
+
+* ``<numericalresponse>`` (required): Specifies that the problem is a numerical input problem.
+* ``<formulaequationinput />`` (required): Provides a response field where the student enters a response.
+* ``<responseparam>`` (optional): Specifies a tolerance, or margin of error, for an answer.
+* ``<script>`` (optional):
+
+.. note:: Some older problems use the ``<textline math="1" />`` tag instead of the ``<formulaequationinput />`` tag. However, the ``<textline math="1" />`` tag has been deprecated. All new problems should use the ``<formulaequationinput />`` tag.
+
+**Tag:** ``<numericalresponse>``
+
+Specifies that the problem is a numerical input problem. The ``<numericalresponse>`` tag is similar to the ``<formularesponse>`` tag, but the ``<numericalresponse>`` tag does not allow unspecified variables.
+
+  Attributes
+
+  .. list-table::
+     :widths: 20 80
+
+     * - Attribute
+       - Description
+     * - answer (required)
+       - The correct answer to the problem, given as a mathematical expression. 
+
+  .. note:: If you include a variable name preceded with a dollar sign ($) in the problem, you can include a script in the problem that computes the expression in terms of that variable.
+
+  The grader evaluates the answer that you provide and the student's response in the same way. The grader also automatically simplifies any numeric expressions that you or a student provides. Answers can include simple expressions such as "0.3" and "42", or more complex expressions such as "1/3" and "sin(pi/5)". 
+
+  Children
+  
+  * ``<responseparam>``
+  * ``<formulaequationinput>``
+
+**Tag:** * ``<formulaequationinput>``
+
+Creates a response field in the LMS where students enter a response.
+
+  Attributes
+
+  .. list-table::
+     :widths: 20 80
+
+     * - Attribute
+       - Description     
+     * - label (required)
+       - Specifies the name of the response field.
+     * - size (optional)
+       - Defines the width, in characters, of the response field in the LMS.
+  
+  Children
+
+  (none)
+
+**Tag:** ``<responseparam>``
+
+Specifies a tolerance, or margin of error, for an answer.
+
+  Attributes
+
+  .. list-table::
+     :widths: 20 80
+
+     * - Attribute
+       - Description
+     * - type (optional)
+       - "tolerance": Defines a tolerance for a number
+     * - default (optional)
+       - A number or a percentage specifying a numerical or percent tolerance.
+
+  Children
+  
+  (none)
+
+**Tag:** ``<script>``
+
+Specifies a script that the grader uses to evaluate a student's response. A problem behaves as if all of the code in all of the script tags were in a single script tag. Specifically, any variables that are used in multiple ``<script>`` tags share a namespace and can be overriden.
+
+As with all Python, indentation matters, even though the code is embedded in XML.
+
+  Attributes
+
+  .. list-table::
+     :widths: 20 80
+
+     * - Attribute
+       - Description
+     * - type (required)
+       - Must be set to "loncapa/python".
+
+  Children
+  
+  (none)

docs/en_us/shared/exercises_tools/open_response_assessment.rst

+.. _Open Response Assessment:
+
+#################################
+Open Response Assessment Problems
+#################################
+
+.. warning:: **Version 1 of of our Open Response Assessments suite has been deprecated.** This documentation is meant for past courses that have used this first version of open response assessments. We no longer support new open response assessments of this type.
+
+  Version 2 of our Open Response Assessments suite was released to a few courses in April 2014 and more broadly in May 2014. If you want to create a new open response assessment in your course, see `the new ORA documentation <http://edx.readthedocs.org/projects/edx-open-response-assessments/en/latest/>`_. 
+
+*********************************************
+Introduction to Open Response Assessments
+*********************************************
+
+.. note:: Problems can occur when you move your course from edge.edx.org to edx.org, or vice versa, if your course has the same URL in both places. To work around this problem, make sure that the URLs are different by specifying a different university or course number when you create each course. For example, if your university is edX and your course number is edX101, you can specify the course number as **edx_101** (note the underscore) on Edge and **edX101** on edX.
+
+Open response assessments allow instructors to assess student learning through questions that may not have definite answers. Tens of thousands of students can receive feedback on written responses of varying lengths as well as files, such as computer code or images, that the students upload. Open response assessment technologies include self assessment and peer assessment. With self assessments, students learn by comparing their answers to a rubric that you create. With peer assessments, students compare their peers' answers to the rubric.
+
+For more information, see the following:
+
+* :ref:`ORA Notes`
+* :ref:`ORA Components`
+* :ref:`ORA Types`
+* :ref:`ORA Effective Questions`
+* :ref:`ORA Rubrics`
+* :ref:`ORA Create an ORA Problem`
+* :ref:`ORA Grade an ORA`
+* :ref:`ORA Access Scores`
+
+.. _ORA Notes:
+
+*********************************************
+A Few Notes about Open Response Assessments
+*********************************************
+
+**Open response assessment technology is still in beta.** For a good
+experience with open response assessments, you'll need to follow a few
+guidelines.
+
+-  Do not create a new open response assessment in a running course.
+   Only create open response assessments in a test course.
+-  If your course will include open response assessments, add and
+   thoroughly test all the open response assessments *before* the course
+   is live.
+-  Set open response assessments to be optional, ungraded, or droppable
+   exercises until you've used the technology a few times and have
+   become familiar with it.
+-  Use open response assessments sparingly at first. Only include a few
+   in your course, and make sure that you have contingency plans in case
+   you run into problems.
+
+Finally, if you're at an edX consortium university and you plan to
+include open response assessments in a MOOC, make sure to notify your
+edX project manager (PM).
+
+.. _ORA Components:
+
+*********************************************
+Components of an Open Response Assessment
+*********************************************
+
+An open response assessment has three elements:
+
+-  The assessment type or types--self, peer, or artificial intelligence
+   (AI). The type of assessment and the order in which the assessments
+   run appears in the upper right corner of the ORA problem. In the
+   following example, the student performs a self assessment, then peers
+   perform peer assessments, and then an AI assessment runs.
+
+   .. image:: /Images/CITL_AssmtTypes.png
+      :alt: Image of ORA with assessment types circled
+
+-  The question that you want your students to answer. This appears near
+   the top of the component, followed by a field where the student
+   enters a response.
+
+   .. image:: /Images/CITLsample.png
+      :alt: Image of ORA question
+
+-  A rubric that you design. After the student enters a response and
+   clicks **Submit**, if the assessment is a self assessment, the
+   student sees the rubric below his answer and compares his answer to
+   the rubric. (If the assessment is an AI or peer assessment, the
+   student sees a "Your response has been submitted" message but doesn't
+   see the rubric.)
+
+   .. image:: /Images/CITL_SA_Rubric.png
+      :alt: Image of ORA with rubric showing below the student's response
+
+.. _ORA Types:
+
+******************************
+Open Response Assessment Types
+******************************
+
+There are three types of assessments for ORAs: self assessment, AI
+assessment, and peer assessment.
+
+-  Self assessment allows students to answer a question, and then assess
+   their response according to the rubric you created for the question.
+-  In AI assessment, a computer algorithm learns how to grade according
+   to the rubric from 100 or more instructor-graded responses, and
+   attempts to grade the rest of the student responses in the same way.
+-  Peer assessment allows students to score each other and provide
+   feedback, again using the same rubric.
+
+   .. warning:: In peer assessments, the **due date** that you set for the subsection that contains the ORA problem is the date by which students must not only submit their own responses, but finish grading the required number of peer responses.
+
+You can use one or more of these assessments in any problem. You can
+also set thresholds within the problem for each assessment, so that a
+response with a low score in one assessment does not move on to the next
+assessment.
+
+.. _ORA Effective Questions:
+
+******************************
+Effective Questions
+******************************
+
+When you write your question, we recommend that you specify an
+approximate number of words or sentences that a student's response has
+to have in the body of your question. You may also want to provide
+information about how to use the LMS. If you require students to upload
+a file as a response, you can provide specific instructions about how to
+upload and submit their files. You can let students know what to expect
+after they submit responses. You can also mention the number of times
+that a student will be able to submit a response for the problem.
+
+.. _ORA Rubrics:
+
+***************
+Rubrics
+***************
+
+The same rubric is used for all three ORA types, and it can include
+anything that you want it to include.
+
+In Studio, rubrics are arranged by *categories*. Each category has two
+or more *options*, and each option has a point value.
+
+Options must be listed in ascending order starting at 0 points. For
+example, in a category with three options, the first option is worth 0
+points, the second is worth 1 point, and the third is worth 2 points.
+The person or algorithm that grades the problem selects one value for
+each category.
+
+Different categories in the same problem can have different numbers of
+options.
+
+.. _ORA Create an ORA Problem:
+
+*********************************************
+Create an Open Response Assessment Problem
+*********************************************
+
+.. warning:: Open response assessments are still in beta. To enable open response assessments in your course, you'll need to work with your edX program manager.
+
+Creating an open response assessment is a multi-step process.
+
+* :ref:`ORA Step 1`
+* :ref:`ORA Step 2`
+* :ref:`ORA Step 3`
+* :ref:`ORA Step 4`
+* :ref:`ORA Step 5`
+* :ref:`ORA Step 6`
+* :ref:`ORA Step 7`
+* :ref:`ORA Step 8`
+* :ref:`ORA Step 9`
+
+Each of these steps is described in detail below.
+
+.. warning:: Problems can occur when you move your course from edge.edx.org to edx.org, or vice versa, if your course has the same URL in both places. To work around this problem, make sure that the URLs are different by specifying a different university or course number when you create each course. For example, if your university is edX and your course number is edX101, you can specify the course number as **edx_101** (note the underscore) on Edge and **edX101** on edX.
+
+.. _ORA Step 1:
+
+================================
+Step 1. Create the ORA Component
+================================
+
+#. Modify your course's advanced settings to allow open response assessments. For more information about how to do this, contact your edX program manager.
+#. In Studio, open the unit where you want to create the ORA.
+#. Under **Add New Component**, click **Advanced**, and then click
+   **Open Response Assessment**.
+#. In the problem component that appears, click **Edit**, and then click
+   **OK** in the dialog box that appears.
+#. The component editor opens. The component editor contains a sample
+   question ("prompt"), rubric, and the code for the assessment type and
+   scoring. You'll replace this sample content with the content for your
+   problem.
+
+.. image:: /Images/ORAComponentEditor.png
+   :alt: Image of component editor with prompt, rubric, and assessment type highlighted
+
+.. _ORA Step 2:
+
+========================
+Step 2. Add the Question
+========================
+
+#. In the component editor, locate the [prompt] tags.
+
+.. image:: /Images/ORA_Prompt.png
+      :alt: Image of component editor with prompt text highlighted
+
+2. Replace the sample text between the **[prompt]** tags with the text of
+   your question. When you replace the sample text, make sure you follow
+   these guidelines to avoid common formatting mistakes.
+
+   -  Leave the **[prompt]** tags in place.
+   -  Enclose all text in HTML tags.
+
+.. _ORA Step 3:
+
+========================
+Step 3. Add the Rubric
+========================
+
+.. note:: After you release your problem to students in your live course, make sure
+          you don't make any changes to the rubric that affect scoring, such as adding or removing an option
+          in a category. Changing the rubric can cause errors in live courses.*
+
+#. In the component editor, locate the [rubric] tags. (The sample rubric
+   is long, so you'll have to scroll down to locate the second tag.)
+
+.. image:: /Images/ORA_Rubric.png
+      :alt: Image of component editor with rubric text highlighted
+
+2. Replace the sample rubric with the text of your rubric. Make sure to
+   do the following.
+
+   -  Include the beginning and ending [rubric] tags.
+   -  Precede the categories with a plus (+) sign.
+   -  Precede the options with a minus (-) sign.
+   -  List the option that scores zero points first, followed by the option that scores one point, and so on.
+
+   For example, your rubric might resemble the following rubric.
+
+::
+
+    [rubric]
+
+    + Writing Applications
+    - The essay loses focus, has little information or supporting details, and the organization makes it difficult to follow.
+    - The essay presents a mostly unified theme, includes sufficient information to convey the theme, and is generally organized well.
+
+    + Language Conventions
+    - The essay demonstrates a reasonable command of proper spelling and grammar.
+    - The essay demonstrates superior command of proper spelling and grammar.
+
+    [rubric]
+
+.. _ORA Step 4:
+
+============================================
+Step 4. Set the Assessment Type and Scoring
+============================================
+
+.. note:: After you release your problem to students in your live course, make sure
+          you don't make any changes to the code for the assessment type and scoring. Changing
+          this code can cause errors in live courses.
+
+To set the assessment type and scoring for your open response assessment, you'll
+enter code that specifies the type and order of assessments to use along with
+the scoring thresholds for each assessment. The code uses the following format.
+
+::
+
+    [tasks]
+    (Type 1), ({min-max}Type 2), ({min-max}Type 3)
+    [tasks]
+
+-  The **[tasks]** tags surround the code.
+-  **Type 1**, **Type 2**, and **Type 3** are the names of the types of
+   assessments. Assessments run in the order in which they're listed.
+-  **min** is the point value the response must receive in the previous
+   assessment to move to this assessment. Note that you do not define a
+   scoring threshold for the first assessment, because there is no
+   required previous assessment.
+-  **max** is the maximum point value for the assessment. The maximum
+   score is the second number in the pair of numbers for each assessment
+   after the first assessment.
+
+For example, a problem might contain the following code.
+
+::
+
+    [tasks]
+    (Self), ({5-7}Peer), ({4-7}AI)
+    [tasks]
+
+The problem that includes this code has the following characteristics.
+
+-  The problem has a self assessment, a peer assessment, and then an AI
+   assessment.
+-  The maximum score for the problem is 7.
+-  To advance to the peer assessment, the response must have a self
+   assessment score of 5 or greater.
+-  To advance to the AI assessment, the response must have a peer
+   assessment score of 4 or greater.
+
+.. note:: If a response's score isn't high enough for the response to move to the next
+          assessment,
+
+Set the Assessment Type and Scoring
+************************************
+
+#. In the component editor, locate the [tasks] tags.
+
+.. image:: /Images/ORA_Tasks.png
+       :alt: Image of component editor with tasks tags and text highlighted
+
+#. Replace the sample code with the code for your problem.
+
+.. _ORA Step 5:
+
+============================
+Step 5. Set the Problem Name
+============================
+
+.. note::   After you release your problem to students in your live course, make sure
+            you don't change the name of the problem. Changing the display name when the problem
+            is live can cause a loss of student data.
+
+            You can change the display name of a problem while you're still testing the problem.
+            However, note that all the test responses and scores associated with the problem
+            will be lost when you change the name. To update the problem name on the
+            instructor dashboard, submit a new test response to the problem.
+
+The name of the problem appears as a heading above the problem in the
+courseware. It also appears in the list of problems on the **Staff
+Grading** page.
+
+.. image:: /Images/ORA_ProblemName1.png
+   :alt: Image of Staff Grading page with a problem name circled
+
+To change the name:
+
+#. In the upper-right corner of the component editor, click
+   **Settings**.
+
+#. In the **Display Name** field, replace **Open Response Assessment**
+   with the name of your problem.
+
+.. _ORA Step 6:
+
+=========================
+Step 6. Set Other Options
+=========================
+
+If you want to change the problem settings, which include the number of
+responses a student has to peer grade and whether students can upload
+files as part of their response, click the **Settings** tab, and then
+specify the options that you want.
+
+.. image:: /Images/ORA_Settings.png
+   :alt: Image of component editor with Settings tab selected
+
+Open response assessments include the following settings.
+
++---------------------------------------------+--------------------------------------------------------------------+
+| **Allow "overgrading" of peer submissions** | This setting applies only to peer grading. If all of the responses |
+|                                             | for a question have been graded, the instructor can allow          |
+|                                             | additional students to grade responses that were previously        |
+|                                             | graded. This can be helpful if an instructor feels that peer       |
+|                                             | grading has helped students learn, or if some students haven't     |
+|                                             | graded the required number of responses yet, but all available     |
+|                                             | responses have been graded.                                        |
++---------------------------------------------+--------------------------------------------------------------------+
+| **Allow File Uploads**                      | This setting specifies whether a student can upload a file, such   |
+|                                             | as an image file or a code file, as a response. Files can be of    |
+|                                             | any type.                                                          |
++---------------------------------------------+--------------------------------------------------------------------+
+| **Disable Quality Filter**                  | This setting applies to peer grading and AI grading. When the      |
+|                                             | quality filter is disabled (when this value is set to True),       |
+|                                             | Studio allows submissions that are of "poor quality" (such as      |
+|                                             | responses that are very short or that have many spelling or        |
+|                                             | grammatical errors) to be peer graded. For example, you may        |
+|                                             | disable the quality filter if you want students to include URLs to |
+|                                             | external content - otherwise Studio sees a URL, which may contain a|
+|                                             | long string of seemingly random characters, as a misspelled word.  |
+|                                             | When the quality filter is enabled (when this value is set to      |
+|                                             | False), Studio does not allow poor-quality submissions to be peer  |
+|                                             | graded.                                                            |
++---------------------------------------------+--------------------------------------------------------------------+
+| **Display Name**                            | This name appears in two places in the LMS: in the course ribbon   |
+|                                             | at the top of the page and above the exercise.                     |
++---------------------------------------------+--------------------------------------------------------------------+
+| **Graded**                                  | This setting specifies whether the problem counts toward a         |
+|                                             | student's grade. By default, if a subsection is set as a graded    |
+|                                             | assignment, each problem in that subsection is graded. However, if |
+|                                             | a subsection is set as a graded assignment, and you want this      |
+|                                             | problem to be a "test" problem that doesn't count toward a         |
+|                                             | student's grade, you can change this setting to **False**.         |
++---------------------------------------------+--------------------------------------------------------------------+
+| **Maximum Attempts**                        | This setting specifies the number of times the student can try to  |
+|                                             | answer the problem. Note that each time a student answers a        |
+|                                             | problem, the student's response is graded separately. If a student |
+|                                             | submits two responses to a peer-assessed problem (for example, by  |
+|                                             | using the **New Submission** button after her first response       |
+|                                             | receives a bad grade or because she wants to change her original   |
+|                                             | response), and the problem requires three peer graders, three      |
+|                                             | separate peer graders will have to grade each of the student's two |
+|                                             | responses. We thus recommend keeping the maximum number of         |
+|                                             | attempts for each question low.                                    |
++---------------------------------------------+--------------------------------------------------------------------+
+| **Maximum Peer Grading Calibrations**       | This setting applies only to peer grading. You can set the maximum |
+|                                             | number of responses a student has to "practice grade" before the   |
+|                                             | student can start grading other students' responses. The default   |
+|                                             | value is 6, but you can set this value to any number from 1 to 20. |
+|                                             | This value must be greater than or equal to the value set for      |
+|                                             | **Minimum Peer Grading Calibrations**.                             |
++---------------------------------------------+--------------------------------------------------------------------+
+| **Minimum Peer Grading Calibrations**       | This setting applies only to peer grading. You can set the minimum |
+|                                             | number of responses a student has to "practice grade" before the   |
+|                                             | student can start grading other students' responses. The default   |
+|                                             | value is 3, but you can set this value to any number from 1 to 20. |
+|                                             | This value must be less than or equal to the value set for         |
+|                                             | **Maximum Peer Grading Calibrations**.                             |
++---------------------------------------------+--------------------------------------------------------------------+
+| **Peer Graders per Response**               | This setting applies only to peer grading. This setting specifies  |
+|                                             | the number of times a response must be graded before the score and |
+|                                             | feedback are available to the student who submitted the response.  |
++---------------------------------------------+--------------------------------------------------------------------+
+| **Peer Track Changes**                      | This setting is new and still under development. This setting      |
+|                                             | applies only to peer grading. When this setting is enabled (set to |
+|                                             | **True**), peer graders can make inline changes to the responses   |
+|                                             | they're grading. These changes are visible to the student who      |
+|                                             | submitted the response, along with the rubric and comments for the |
+|                                             | problem.                                                           |
++---------------------------------------------+--------------------------------------------------------------------+
+| **Problem Weight**                          | This setting specifies the number of points the problem is worth.  |
+|                                             | By default, each problem is worth one point.                       |
+|                                             |                                                                    |
+|                                             | **Note** *Every problem must have a problem weight of at least     |
+|                                             | one point. Problems that have a problem weight of zero points      |
+|                                             | don't appear on the instructor dashboard.*                         |
++---------------------------------------------+--------------------------------------------------------------------+
+| **Required Peer Grading**                   | This setting specifies the number of responses that each student   |
+|                                             | who submits a response has to grade before the student receives a  |
+|                                             | grade for her response. This value can be the same as the value    |
+|                                             | for the **Peer Graders per Response** setting, but we recommend    |
+|                                             | that you set this value higher than the **Peer Graders per         |
+|                                             | Response** setting to make sure that every student's work is       |
+|                                             | graded. (If no responses remain to be graded, but a student still  |
+|                                             | needs to grade responses, you can set the **Allow "overgrading" of |
+|                                             | peer submissions** setting to allow more students to grade         |
+|                                             | previously graded responses.)                                      |
++---------------------------------------------+--------------------------------------------------------------------+
+
+.. _ORA Step 7:
+
+========================
+Step 7. Save the Problem
+========================
+
+-  After you have created the prompt and the rubric, set the assessment
+   type and scoring, changed the name of the problem, and specified any
+   additional settings, click **Save**.
+
+   The component appears in Studio. In the upper right corner, you can
+   see the type of assessments that you have set for this problem.
+
+   .. image:: /Images/ORA_Component.png
+      :alt: Image of ORA component with assessment types circled
+
+.. _ORA Step 8:
+
+==================================================================
+Step 8. Add the Peer Grading Interface (for peer assessments only)
+==================================================================
+
+You can add just one peer grading interface for the whole course, or you
+can add a separate peer grading interface for each individual problem.
+
+.. warning:: In peer assessments, the **due date** that you set for the subsection that contains the ORA problem is the date by which students must not only submit their own responses, but finish grading the required number of peer responses.
+
+.. _ORA Add a Single PGI:
+
+Add a Single Peer Grading Interface for the Course
+**************************************************
+
+When you add just one peer grading interface for the entire course, we
+recommend that you create that peer grading interface in its own section
+so that students can find it easily. Students will be able to access all
+the ORA problems for the course through this peer grading interface.
+
+#. Create a new section, subsection, and unit. You can use any names
+   that you want. One course used "Peer Grading Interface" for all
+   three.
+#. Under **Add New Component** in the new unit, click **Advanced**, and
+   then click **Peer Grading Interface**.
+
+   A new Peer Grading Interface component appears.
+
+#. To see the peer grading interface in the course, set the visibility
+   of the unit to **Public**, and then click **View Live**.
+
+   The **Peer Grading** page opens.
+
+   .. image:: /Images/PGI_Single.png
+      :alt: Image of LMS open to the Peer Grading page for the course
+
+   When students submit responses for peer assessments in your course,
+   the names of the problems appear in this interface.
+
+.. _ORA Add an Individual PGI:
+
+Add the Peer Grading Interface to an Individual Problem
+*******************************************************
+
+When you add a peer grading interface for an individual problem, you
+must add the identifier for the problem to that peer grading interface.
+If you don't add the identifier, the interface will show all of the peer
+assessments in the course.
+
+Note that the peer grading interface doesn't have to appear under the
+problem you want it to be associated with. As long as you've added the
+identifier of the problem, the peer grading interface will be associated
+with the problem, even if you include the peer grading interface in a
+later unit (for example, if you want the problem to be due after a
+week).
+
+#. Open the unit that contains the ORA.
+#. If the visibility of the unit is set to Public, click **View Live**.
+   If the visibility is set to Private, click **Preview**. The unit
+   opens in the LMS in a new tab. Make sure you're in Staff view rather
+   than Student view.
+#. Scroll down to the bottom of the ORA, and then click **Staff Debug
+   Info**.
+#. In the page that opens, locate the string of alphanumeric characters
+   to the right of the word **location**. Press CTRL+C to copy this
+   string, starting with **i4x**.
+
+   .. image:: /Images/PA_StaffDebug_Location.png
+      :alt: Image of Staff Debug screen with ORA problem location circled
+
+5. Switch back to the unit in Studio. If the visibility of the unit is
+   set to **Public**, change the visibility to **Private**.
+#. Scroll to the bottom of the unit, click **Advanced** under **Add New
+   Component**, and then click **Peer Grading Interface**.
+#. On the Peer Grading Interface component that opens, click **Edit**.
+#. In the Peer Grading Interface component editor, click **Settings**.
+#. In the **Link to Problem Location** field, paste the string of
+   alphanumeric characters that you copied in step 4. Then, change the
+   **Show Single Problem** setting to **True**.
+
+   .. image:: /Images/PGI_CompEditor_Settings.png
+
+#. Click **Save** to close the component editor.
+
+.. _ORA Step 9:
+
+========================
+Step 9. Test the Problem
+========================
+
+Test your problem by adding and grading a response.
+
+#. In Studio, open the unit that contains your ORA problem.
+#. Under **Unit Settings**, change the **Visibility** setting to
+   **Public**, and then click **View Live**.
+
+   When you click **View Live**, the unit opens in the LMS in a new tab.
+
+3. In the LMS, locate your ORA question, and then type your response in
+   the Response field under the question.
+
+   .. image:: /Images/ThreeAssmts_NoResponse.png
+
+   Note that when you view your ORA problem in the LMS as an instructor,
+   you see the following message below the problem. This message never
+   appears to students.
+
+   .. image:: /Images/ORA_DuplicateWarning.png
+
+4. Test the problem to make sure that it works as expected.
+
+To test your open response assessment, you may want to sign into your
+course as a student, using an account that's different from the account
+that you use as an instructor.
+
+-  If you want to keep your course open as an instructor when you sign
+   in as a student, either open a window in Incognito Mode in Firefox or
+   Chrome or use a different browser to access your course. For example,
+   if you used Firefox to create the course, use Chrome when you sign in
+   as a student.
+-  If you don't need to keep your course open, sign out of your course,
+   and then sign back in using a different account. Note that if you do
+   this, you can't make changes to your course without signing out and
+   signing back in as an instructor.
+
+When you test your problem, you may want to submit test responses that contain little
+text, random characters, or other content that doesn't resemble the responses that you
+expect from your students. Open response assessments include a quality filter that
+prevents instructors and other students from seeing these "low-quality" responses.
+This quality filter is enabled by default. If you want to see all of your test
+responses, including the "low-quality" responses, disable the quality filter.
+
+To disable the quality filter, open the problem component, click the **Settings** tab,
+and then set the **Disable Quality Filter** setting to **True**.
+
+.. _ORA Grade an ORA:
+
+*********************************************
+Grade an Open Response Assessment Problem
+*********************************************
+
+You'll grade student responses to both AI assessments and peer
+assessments from the **Staff Grading** page in the LMS. Take a moment to
+familiarize yourself with the features of this page.
+
+=======================
+The Staff Grading Page
+=======================
+
+When a response is available for you to grade, a yellow exclamation mark
+appears next to **Open Ended Panel** at the top of the screen.
+
+.. image:: /Images/OpenEndedPanel.png
+
+To access the **Staff Grading** page, click **Open Ended Panel**.
+
+When the **Open Ended Console** page opens, click **Staff Grading**.
+Notice the **New submissions to grade** notification.
+
+.. image:: /Images/OpenEndedConsole_NewSubmissions.png
+
+When the **Staff Grading** page opens, information about your open
+response assessment appears in several columns.
+
+.. image:: /Images/ProblemList-DemoCourse.png
+
++----------------------------------------------------+--------------------------------------------------------------------+
+| **Problem Name**                                   | The name of the problem. Click the name of the problem to open it. |
+|                                                    | Problems in your course do not appear under **Problem Name** on    |
+|                                                    | the **Staff Grading** page until at least one response to the      |
+|                                                    | problem has been submitted and is available to grade.              |
++----------------------------------------------------+--------------------------------------------------------------------+
+| **Graded**                                         | The number of responses for that problem that you have already     |
+|                                                    | graded. Even if the AI algorithm has graded all available          |
+|                                                    | responses, you can still grade the responses that the algorithm    |
+|                                                    | designates as low-confidence responses by clicking the problem     |
+|                                                    | name in the list.                                                  |
++----------------------------------------------------+--------------------------------------------------------------------+
+| **Available to grade**                             | The total number of ungraded student submissions.                  |
++----------------------------------------------------+--------------------------------------------------------------------+
+| **Required**                                       | The number of responses remaining to be graded to train the        |
+|                                                    | algorithm for AI or to calibrate the responses for peer grading.   |
+|                                                    | If your open response assessment calls for both AI and peer        |
+|                                                    | assessment, the 20 responses that you grade for the peer           |
+|                                                    | assessment count toward the 100 responses for the AI assessment.   |
++----------------------------------------------------+--------------------------------------------------------------------+
+| **Progress**                                       | A visual indication of your progress through the grading process.  |
++----------------------------------------------------+--------------------------------------------------------------------+
+
+===============
+Grade Responses
+===============
+
+.. warning:: In peer assessments, the **due date** that you set for the subsection that contains the ORA problem is the date by which students must not only submit their own responses, but finish grading the required number of peer responses.
+
+#. Go to the **Staff Grading** page.
+#. Under **Problem Name**, click the name of the problem that you want.
+
+   When the problem opens, the information about the number of responses
+   that are still available to grade, that have been graded, and that an
+   instructor is required to grade appears under the problem name. You
+   can also find out about the AI algorithm's error rate. The error rate
+   is a calculation of the difference between the scores that AI
+   algorithm provides and the scores that the instructor provides.
+
+.. image:: /Images/ResponseToGrade.png
+
+3. In the rubric below the response, select the option that best
+   describes the response.
+#. If applicable, add additional feedback.
+
+   -  You can provide comments for the student in the **Written Feedback** field.
+   -  If you do not feel that you can grade the response (for example,
+      if you're a member of course staff but you would rather have the
+      instructor grade the response), you can click **Skip** to skip it.
+   -  If the response contains inappropriate content, you can select the
+      **Flag as inappropriate content for later review** check box.
+      Flagged content is accessed on the **Staff Grading** page. If
+      necessary, course staff can ban a student from peer grading.
+
+.. image:: /Images/AdditionalFeedback.png
+
+5. When you are done grading the response, click **Submit**.
+
+When your course is running, another response opens automatically after
+you grade the first response, and a message appears at the top of the
+page.
+
+.. image:: /Images/FetchingNextSubmission.png
+
+After you've graded all responses for this problem, **No more
+submissions to grade** appears on the page.
+
+.. image:: /Images/NoMoreSubmissions.png
+
+Click **Back to problem list** to return to the list of problems. You
+can also wait for a few minutes and click **Re-check for submissions**
+to see if any other students have submitted responses.
+
+.. note:: After you've graded enough responses for AI assessments to start, the number
+          of responses in the **Available to grade** column decreases rapidly as
+          the algorithm grades responses and returns them to your students in just
+          a few seconds. No student data is lost.
+
+.. note:: When a response opens for you to grade, it leaves the current "grading pool"
+          that other instructors or students are grading from, which prevents other
+          instructors or students from grading the response while you are working on
+          it. If you do not submit a score for this response within 30 minutes,
+          the response returns to the grading pool (so that it again becomes available
+          for others to grade), even if you still have the response open on your screen.
+
+          If the response returns to the grading pool (because the 30 minutes have passed),
+          but the response is still open on your screen, you can still submit feedback for
+          that response. If another instructor or student grades the response after it returns to the
+          grading pool but before you submit your feedback, the response receives two grades.
+
+          If you click your browser's **Back** button to return to the problem list before you
+          click **Submit** to submit your feedback for a response, the response stays outside
+          the grading pool until 30 minutes have passed. When the response returns to the
+          grading pool, you can grade it.
+
+.. _ORA Access Scores:
+
+******************************
+Access Scores and Feedback
+******************************
+
+=======
+Scoring
+=======
+
+Scores for open response assessment problems that have more than one assessment type are not cumulative. That is, if a problem has a value of 10 points and it contains both a self assessment and an AI assessment, the total score is out of 10 points rather than 20.
+
+The final score for an open response assessment is the score that the response receives in the last assessment that it undergoes. If a response doesn't score high enough to move to another assessment, the final score is the score that the response receives in the last assessment that it qualifies for.
+
+In peer assessment, the final score is the median of the scores that the response receives from each peer grader.
+
+For example:
+
+A 20-point problem includes self assessment, peer assessment, and AI assessment. To move from self assessment to peer assessment, the response must score 10 points. To move from peer assessment to AI assessment, the response must score 12 points.
+
+* Student A gives himself 9 points in the self assessment. Because the minimum score to move from self assessment to peer assessment is 10, the response cannot continue to peer assessment. Student A's final score is 9 out of 20.
+
+* Student B gives herself 16 points in the self assessment. In the peer assessment, the response receives scores of 14, 11, and 10. Because the median is 11, the response cannot continue to AI assessment. Student B's final score is 11 out of 20.
+
+* Student C gives herself 17 points in the self assessment. In the peer assessment, the response receives scores of 10, 18, and 14. Because the median is 14, the response moves to AI assessment. AI assessment gives the response a score of 16. Student C's final score is 16 out of 20.
+
+
+Note that if the same 20-point problem changes the assessment order, the student's final score may be different. For example, suppose the assessment order for the above example changes to self assessment, then AI assessment, and then peer assessment. To move from self assessment to AI assessment, the response must score 10 points. To move from AI assessment to peer assessment, the response must score 12 points.
+
+* Student D gives himself 17 points in the self assessment. AI assessment gives the response a score of 16. In the peer assessment, the response receives scores of 10, 18, and 14; the median is 14. Student D's final score is 14 out of 20.
+
+.. note:: Because the assessment order can affect a student's final score, we recommend that you specify peer assessments as the last assessments for ORA problems. If the last assessment is a self assessment, the student can award herself full points for a response, even if the response received low grades from the AI and peer assessments.
+
+================
+Accessing Scores
+================
+
+You access your scores for your responses to AI and peer assessment problems through the **Open Ended Console** page.
+
+#. From any page in the LMS, click the **Open Ended Panel** tab at the
+   top of the page.
+
+.. image:: /Images/OpenEndedPanel.png
+
+2. On the **Open Ended Console** page, click **Problems You Have
+   Submitted**.
+
+.. image:: /Images/ProblemsYouHaveSubmitted.png
+
+3. On the **Open Ended Problems** page, check the **Status** column to
+   see whether your responses have been graded.
+#. When grading for a problem has been finished, click the name of a
+   problem in the list to see your score for that problem. When you
+   click the name of the problem, the problem opens in the courseware.
+
+For both AI and peer assessments, the score appears below your response
+in an abbreviated version of the rubric. For peer assessments, you can
+also see the written feedback that your response received from different
+graders.
+
+**Graded AI Assessment**
+
+.. image:: /Images/AI_ScoredResponse.png
+
+**Graded Peer Assessment**
+
+.. image:: /Images/Peer_ScoredResponse.png
+
+If you want to see the full rubric for either an AI or peer assessment,
+click **Toggle Full Rubric**.
+
+.. note:: For a peer assessment, if you haven't yet graded enough
+          problems to see your score, you receive a message that lets you know how
+          many problems you still need to grade.
+
+.. image:: /Images/FeedbackNotAvailable.png

docs/en_us/shared/exercises_tools/periodic_table.rst

+.. _Periodic Table:
+
+#####################
+Periodic Table Tool
+#####################
+
+You can create an interactive periodic table of the elements to help your students learn about various elements' properties. In the table below, detailed information about each element appears as the student moves the mouse over the element.
+
+.. image:: /Images/Periodic_Table.png
+  :alt: Image of the interactive periodic table
+
+.. _Create the Periodic Table:
+
+******************************
+Create the Periodic Table Tool
+******************************
+
+To create a periodic table, you need the following files:
+
+* Periodic-Table.js
+* Periodic-Table.css
+* Periodic-Table-Colors.css
+* PeriodicTableHTML.txt
+
+To download all of these files in a .zip archive, click http://files.edx.org/PeriodicTableFiles.zip. 
+
+To create the periodic table, you need an HTML component.
+
+#. Upload all of the files listed above *except PeriodicTable.txt* to the **Files & Uploads** page in your course.
+#. In the unit where you want to create the problem, click **HTML** under **Add New Component**, and then click **HTML**.
+#. In the component that appears, click **Edit**.
+#. In the component editor, switch to the **HTML** tab.
+#. Open the PeriodicTable.txt file in any text editor.
+#. Copy all of the text in the PeriodicTable.txt file, and paste it into the HTML component editor. (Note that the PeriodicTableHTML.txt file contains over 6000 lines of code. Paste all of this code into the component editor.)
+#. Click **Save**.
\ No newline at end of file

docs/en_us/shared/exercises_tools/poll.rst

+
+.. _Poll:
+
+##########
+Poll Tool
+##########
+
+You can run polls in your course so that your students can share opinions on different questions.
+
+.. image:: /Images/PollExample.png
+
+.. note:: Creating a poll requires you to export your course, edit some of your course's XML files in a text editor, and then re-import your course. We recommend that you create a backup copy of your course before you create the poll. We also recommend that you only edit the files that will contain polls in the text editor if you're very familiar with editing XML. 
+
+**************
+Terminology
+**************
+
+Sections, subsections, units, and components have different names in the **Course Outline** view and in the list of files that you'll see after you export your course and open the .xml files for editing. The following table lists the names of these elements in the **Course Outline** view and in a list of files.
+
+.. list-table::
+   :widths: 15 15
+   :header-rows: 0
+
+   * - Course Outline View
+     - File List
+   * - Section
+     - Chapter
+   * - Subsection
+     - Sequential
+   * - Unit
+     - Vertical
+   * - Component
+     - Discussion, HTML, problem, or video
+
+For example, when you want to find a specific section in your course, you'll look in the **Chapter** folder when you open the list of files that your course contains. To find a unit, you'll look in the **Vertical** folder.
+
+.. _Create a Poll:
+
+**************
+Create a Poll
+**************
+
+#. In the unit where you want to create the poll, create components that contain all the content that you want *except* for the poll. Make a note of the 32-digit unit ID that appears in the **Unit Identifier** field under **Unit Location**.
+
+#. Export your course. For information about how to do this, see :ref:`Exporting and Importing a Course`. Save the .tar.gz file that contains your course in a memorable location so that you can find it easily.
+
+#. Locate the .tar.gz file that contains your course, and then unpack the .tar.gz file so that you can see its contents in a list of folders and files.
+
+   - To do this on a Windows computer, you'll need to download a third-party program. For more information, see `How to Unpack a tar File in Windows <http://www.haskell.org/haskellwiki/How_to_unpack_a_tar_file_in_Windows>`_, `How to Extract a Gz File <http://www.wikihow.com/Extract-a-Gz-File>`_, `The gzip Home Page <http://www.gzip.org/>`_, or the `Windows <http://www.ofzenandcomputing.com/how-to-open-tar-gz-files/#windows>`_ section of the `How to Open .tar.gz Files <http://www.ofzenandcomputing.com/how-to-open-tar-gz-files/>`_ page.
+
+   - For information about how to do this on a Mac, see the `Mac OS X <http://www.ofzenandcomputing.com/how-to-open-tar-gz-files/#mac-os-x>`_ section of the `How to Open .tar.gz Files <http://www.ofzenandcomputing.com/how-to-open-tar-gz-files/>`_ page.
+
+#. In the list of folders and files, open the **Vertical** folder. 
+
+   .. note:: If your unit is not published, open the **Drafts** folder, and then open the **Vertical** folder in the **Drafts** folder.
+
+#. In the **Vertical** folder, locate the .xml file that has the same name as the unit ID that you noted in step 1, and then open the file in a text editor such as Sublime 2. For example, if the unit ID is e461de7fe2b84ebeabe1a97683360d31, you'll open the e461de7fe2b84ebeabe1a97683360d31.xml file.
+
+   The file contains a list of all the components in the unit, together with the URL names of the components. For example, the following file contains an HTML component followed by a Discussion component.
+
+   .. code-block:: xml
+     
+       <vertical display_name="Test Unit">
+        <html url_name="b59c54e2f6fc4cf69ba3a43c49097d0b"/>
+        <discussion url_name="8320c3d511484f3b96bdedfd4a44ac8b"/>
+       </vertical>
+
+#. Add the following poll code in the location where you want the poll. Change the text of the prompt to the text that you want.
+
+   .. code-block:: xml
+      
+    <poll_question display_name="Poll Question">
+      <p>Text of the prompt</p>
+      <answer id="yes">Yes</answer>
+      <answer id="no">No</answer>
+    </poll_question>
+
+   In the example above, if you wanted your poll to appear between the HTML component and the Discussion component in the unit, your code would resemble the following.
+
+   .. code-block:: xml
+
+     <vertical display_name="Test Unit">
+      <html url_name="b59c54e2f6fc4cf69ba3a43c49097d0b"/>
+      <poll_question display_name="Poll Question">
+        <p>Text of the prompt</p>
+        <answer id="yes">Yes</answer>
+        <answer id="no">No</answer>
+      </poll_question>
+      <discussion url_name="8320c3d511484f3b96bdedfd4a44ac8b"/>
+     </vertical>
+
+#. After you add the poll code, save and close the .xml file.
+
+#. Re-package your course as a .tar.gz file.
+
+   * For information about how to do this on a Mac, see `How to Create a Tar GZip File from the Command Line <http://osxdaily.com/2012/04/05/create-tar-gzip/>`_.
+
+   * For information about how to do this on a Windows computer, see `How to Make a .tar.gz on Windows <http://stackoverflow.com/questions/12774707/how-to-make-a-tar-gz-on-windows>`_.
+
+#. In Studio, re-import your course. You can now review the poll question and answers that you added in Studio.
+
+.. note::
+
+  * Although polls render correctly in Studio, you cannot edit them in Studio. You will need to follow the export/import process outlined above to make any edits to your polls.
+  
+  * A .csv file that contains student responses to the problem is not currently available for polls. However, you can obtain the aggregate data directly in the problem.  
+
+*********************
+Format description
+*********************
+
+The main tag of Poll module input is:
+
+.. code-block:: xml
+
+    <poll_question> ... </poll_question>
+
+``poll_question`` can include any number of the following tags:
+any xml and ``answer`` tag. All inner xml, except for ``answer`` tags, we call "question".
+
+==================
+poll_question tag
+==================
+
+Xmodule for creating poll functionality - voting system. The following attributes can
+be specified for this tag::
+
+    name - Name of xmodule.
+    [display_name| AUTOGENERATE] - Display name of xmodule. When this attribute is not defined - display name autogenerate with some hash.
+    [reset | False] - Can reset/revote many time (value = True/False)
+
+============
+answer tag
+============
+
+Define one of the possible answer for poll module. The following attributes can
+be specified for this tag::
+
+    id - unique identifier (using to identify the different answers)
+
+Inner text - Display text for answer choice.
+
+***********
+Example
+***********
+
+==================
+Example of poll
+==================
+
+.. code-block:: xml
+
+    <poll_question name="second_question" display_name="Second question">
+        <h3>Age</h3>
+        <p>How old are you?</p>
+        <answer id="less18">&lt; 18</answer>
+        <answer id="10_25">from 10 to 25</answer>
+        <answer id="more25">&gt; 25</answer>
+    </poll_question>
+
+================================================
+Example of poll with unable reset functionality
+================================================
+
+.. code-block:: xml
+
+    <poll_question name="first_question_with_reset" display_name="First question with reset"
+        reset="True">
+        <h3>Your gender</h3>
+        <p>You are man or woman?</p>
+        <answer id="man">Man</answer>
+        <answer id="woman">Woman</answer>
+    </poll_question>
\ No newline at end of file

docs/en_us/shared/exercises_tools/problem_in_latex.rst

+.. _Problem Written in LaTeX:
+
+############################
+Problem Written in LaTeX
+############################
+
+.. warning:: This problem type is still a prototype and may not be supported in the future. By default, the ability to create these problems is not enabled in Studio. You must change the advanced settings in your course before you can create problems with LaTeX. Use this problem type with caution.
+
+If you have an problem that is already written in LaTeX, you can use this problem type to easily convert your code into XML. After you paste your code into the LaTeX editor, you'll only need to make a few minor adjustments. 
+
+.. note:: If you want to use LaTeX to typeset mathematical expressions
+          in problems that you haven't yet written, use any of the other problem
+          templates together with `MathJax <http://www.mathjax.org>`_. For more
+          information about how to create mathematical expressions in Studio using
+          MathJax, see *A Brief Introduction to MathJax in Studio*.
+
+.. image:: /Images/ProblemWrittenInLaTeX.png
+ :alt: Image of a problem written in LaTeX
+
+************************************
+Create a Problem Written in LaTeX
+************************************
+
+To create a problem written in LaTeX:
+
+#. Enable the policy key in your course.
+
+   #. In Studio, click **Settings**, and then click **Advanced Settings**.
+   #. In the field for the **Enable LaTeX Compiler** policy key, change
+      **false** to **true**.
+   #. At the bottom of the page, click **Save Changes**.
+   
+#. In the unit where you want to create the problem, click **Problem**
+   under **Add New Component**, and then click the **Advanced** tab.
+#. Click **Problem Written in LaTeX**.
+#. In the component editor that appears, click **Edit**.
+#. In the lower left corner of the component editor, click **Launch
+   LaTeX Source Compiler**.
+#. Replace the example code with your own code. You can also upload a Latex file into the editor from your computer by clicking **Upload** in the bottom right corner.
+#. In the lower left corner of the LaTeX source compiler, click **Save &
+   Compile to edX XML**.
\ No newline at end of file

docs/en_us/shared/exercises_tools/problem_with_hint.rst

+.. _Problem with Adaptive Hint:
+
+################################
+Problem with Adaptive Hint
+################################
+
+A problem with an adaptive hint evaluates a student's response, then gives the student feedback or a hint based on that response so that the student is more likely to answer correctly on the next attempt. These problems can be text input problems.
+
+.. image:: /Images/ProblemWithAdaptiveHintExample.png
+ :alt: Image of a problem with an adaptive hint
+
+******************************************
+Create a Problem with an Adaptive Hint
+******************************************
+
+To create the above problem:
+
+#. In the unit where you want to create the problem, click **Problem**
+   under **Add New Component**, and then click the **Advanced** tab.
+#. Click **Problem with Adaptive Hint**.
+#. In the component that appears, click **Edit**.
+#. In the component editor, replace the example code with the code below.
+#. Click **Save**.
+
+.. code-block:: xml
+
+    <problem>
+	    <text>
+	        <script type="text/python" system_path="python_lib">
+	def test_str(expect, ans):
+	  print expect, ans
+	  ans = ans.strip("'")
+	  ans = ans.strip('"')
+	  return expect == ans.lower()
+
+	def hint_fn(answer_ids, student_answers, new_cmap, old_cmap):
+	  aid = answer_ids[0]
+	  ans = str(student_answers[aid]).lower()
+	  print 'hint_fn called, ans=', ans
+	  hint = ''
+	  if '10' in ans:
+	     hint = 'If the ball costs 10 cents, and the bat costs one dollar more than the ball, how much does the bat cost? If that is the cost of the bat, how much do the ball and bat cost together?'
+	  elif '.05' in ans:
+	     hint = 'Make sure to enter the number of cents as a whole number.'
+
+	  if hint:
+	    hint = "&lt;font color='blue'&gt;Hint: {0}&lt;/font&gt;".format(hint)
+	    new_cmap.set_hint_and_mode(aid,hint,'always')
+	        </script>
+	        <p>If a bat and a ball cost $1.10 together, and the bat costs $1.00 more than the ball, how much does the ball cost? Enter your answer in cents, and include only the number (that is, do not include a $ or a ¢ sign).</p>
+	        <p>
+	            <customresponse cfn="test_str" expect="5">
+	                <textline correct_answer="5" label="How much does the ball cost?"/>
+	                <hintgroup hintfn="hint_fn"/>
+	            </customresponse>
+	        </p>
+	    </text>
+    </problem>
+
+.. _Problem with Adaptive Hint XML:
+
+*********************************
+Problem with Adaptive Hint XML
+*********************************
+
+========
+Template
+========
+
+.. code-block:: xml
+
+	<problem>
+	  <text>
+	    <script type="text/python" system_path="python_lib">
+	def test_str(expect, ans):
+	  print expect, ans
+	  ans = ans.strip("'")
+	  ans = ans.strip('"')
+	  return expect == ans.lower()
+
+	def hint_fn(answer_ids, student_answers, new_cmap, old_cmap):
+	  aid = answer_ids[0]
+	  ans = str(student_answers[aid]).lower()
+	  print 'hint_fn called, ans=', ans
+	  hint = ''
+	  if 'incorrect answer 1' in ans:
+	     hint = 'hint for incorrect answer 1'
+	  elif 'incorrect answer 2' in ans:
+	     hint = 'hint for incorrect answer 2'
+
+	  if hint:
+	    hint = "&lt;font color='blue'&gt;Hint: {0}&lt;/font&gt;".format(hint)
+	    new_cmap.set_hint_and_mode(aid,hint,'always')
+	</script>
+	    <p>TEXT OF PROBLEM</p>
+	    <p>
+	      <customresponse cfn="test_str" expect="ANSWER">
+	        <textline correct_answer="answer" label="LABEL TEXT"/>
+	        <hintgroup hintfn="hint_fn"/>
+	      </customresponse>
+	    </p>
+	  </text>
+	</problem>
+
+.. note:: If the hints that you supply include characters, the letters must be lowercase.
+
+========
+Tags
+========
+
+* ``<text>``: Surrounds the script and text in the problem.
+* ``<customresponse>``: Indicates that this problem has a custom response.
+* ``<textline>``: Creates a response field in the LMS where the student enters a response.
+* ``<hintgroup>``: Specifies that the problem contains at least one hint.
+
+**Tag:** ``<customresponse>``
+
+  Attributes
+
+  (none)
+
+  Children
+
+     * ``<textline>``
+     * ``<hintgroup>``
+
+**Tag:** ``<textline>``
+
+  Attributes
+
+  .. list-table::
+     :widths: 20 80
+     :header-rows: 1
+
+     * - Attribute
+       - Description
+     * - label (required)
+       - Contains the text of the problem.
+     * - size (optional)
+       - Specifies the size, in characters, of the response field in the LMS.
+     * - hidden (optional)
+       - If set to "true", students cannot see the response field.
+     * - correct_answer (optional)
+       - The answer to the problem. To supply a correct_answer value that
+         includes letters, all letters **must be lowercase**. (Students'
+         responses to the problem are not case sensitive. They can contain both
+         uppercase and lowercase letters.)
+
+  Children
+  
+  (none)
+
+**Tag:** ``<hintgroup>``
+
+  Attributes
+
+  .. list-table::
+     :widths: 20 80
+     :header-rows: 1
+
+     * - Attribute
+       - Description
+     * - hintfn
+       - Must be set to **hint_fn** (that is, the tag must appear as ``<hintgroup hintfn="hint_fn"/>``).
\ No newline at end of file

docs/en_us/shared/exercises_tools/protein_builder.rst

+.. _Protein Builder:
+
+############################
+Protex Protein Builder Tool
+############################
+
+The Protex protein builder asks students to create specified protein shapes by stringing together amino acids. In the example below, the goal protein shape is a simple line. 
+
+
+.. image:: /Images/ProteinBuilder.png
+  :alt: Image of the protein builder
+
+.. _Create the Protein Builder:
+
+********************************
+Create the Protein Builder Tool
+********************************
+
+To create the protein builder:
+
+#. Under **Add New Component**, click **Problem**, and then click **Blank Advanced Problem**.
+#. In the component that appears, click **Edit**.
+#. In the component editor, paste the Problem component code from below.
+#. Make any changes that you want, and then click **Save**.
+
+.. _Protein Builder Code:
+
+*************************
+Protein Builder Tool Code
+*************************
+
+.. code-block:: xml
+
+  <problem>
+      <p>The protein builder allows you string together the building blocks of proteins, amino acids, and see how that string will form into a structure. You are presented with a goal protein shape, and your task is to try to re-create it. In the example below, the shape that you are asked to form is a simple line.</p> 
+     <p>Be sure to click "Fold" to fold your protein before you click "Check".</p>
+
+  <script type="loncapa/python">
+
+  def protex_grader(expect,ans):
+    import json
+    ans=json.loads(ans)
+    if "ERROR" in ans["protex_answer"]:
+      raise ValueError("Protex did not understand your answer. Try folding the protein.")
+    return ans["protex_answer"]=="CORRECT"
+
+  </script>
+ 
+    <text>
+      <customresponse cfn="protex_grader">
+        <designprotein2dinput width="855" height="500" target_shape="W;W;W;W;W;W;W"/>
+      </customresponse>
+    </text>
+    <solution>
+      <p>
+        Many protein sequences, such as the following example, fold to a straight line.You can play around with the protein builder if you're curious.
+      </p>
+      <ul>
+        <li>
+            Stick: RRRRRRR
+        </li>
+      </ul>
+    </solution>
+  </problem>
+
+In this code:
+ 
+* **width** and **height** specify the dimensions of the application, in pixels.
+* **target_shape** lists the amino acids that, combined in the order specified, create the shape you've asked students to create. The list can only include the following letters, which correspond to the one-letter code for each amino acid. (This list appears in the upper-left corner of the protein builder.)
+
+  .. list-table::
+     :widths: 15 15 15 15
+     :header-rows: 0
+
+     * - A
+       - R
+       - N
+       - D
+     * - C
+       - Q
+       - E
+       - G
+     * - H
+       - I
+       - L
+       - K
+     * - M
+       - F
+       - P
+       - S
+     * - T
+       - W
+       - Y
+       - V

docs/en_us/shared/exercises_tools/text_input.rst

+.. _Text Input:
+
+########################
+Text Input Problem
+########################
+
+
+
+In text input problems, students enter text into a response field. The response can include numbers, letters, and special characters such as punctuation marks. Because the text that the student enters must match the instructor's specified answer exactly, including spelling and punctuation, we recommend that you specify more than one attempt for text input problems to allow for typographical errors.
+
+.. image:: /Images/TextInputExample.png
+ :alt: Image of a text input probem
+
+****************************
+Create a Text Input Problem
+****************************
+
+You can create text input problems in the Simple Editor or in the Advanced Editor.
+
+.. note:: All problems must include labels for accessibility. The label generally includes the text of the main question in your problem. To add a label for a common problem, surround the text of the label with angle brackets pointed toward the text (>>label text<<).
+
+==============
+Simple Editor
+==============
+
+To create a text input problem in the Simple Editor, follow these steps.
+
+#. Under **Add New Component**, click **Problem**.
+#. In the **Select Problem Component Type** screen, click **Text Input**
+   on the **Common Problem Types** tab.
+#. In the new Problem component that appears, click **Edit**.
+#. Replace the default text with the text for your problem.
+#. Determine the text of the problem to use as a label, and then surround that text with two sets of angle brackets (>><<).
+#. Select the text of the answer, and then click the text input button. 
+   
+   .. image:: /Images/ProbCompButton_TextInput.png
+    :alt: Image of the text input button
+   
+   When you do this, an equal sign appears next to the answer.
+  
+   
+#. In the component editor, select the text of the explanation, and then click the 
+   explanation button to add explanation tags around the text.
+
+   .. image:: /Images/ProbCompButton_Explanation.png
+    :alt: Image of the explanation button
+
+#. On the **Settings** tab, specify the settings that you want. 
+#. Click **Save**.
+
+For the example problem above, the text in the Problem component is the
+following.
+
+::
+
+    >>What is the technical term that refers to the fact that, when enough people 
+    sleep under a bednet, the disease may altogether disappear?<<
+    = herd immunity
+
+    [explanation]
+    The correct answer is herd immunity. As more and more people use bednets, 
+    the risk of malaria begins to fall for everyone – users and non-users alike. 
+    This can fall to such a low probability that malaria is effectively eradicated 
+    from the group (even when the group does not have 100% bednet coverage).
+    [explanation]
+
+=====================
+Advanced Editor
+=====================
+
+To create this problem in the Advanced Editor, click the **Advanced** tab in the Problem component editor, and then replace the existing code with the following code.
+
+.. code-block:: xml
+
+  <problem>
+  <p>
+    <em>This problem is adapted from an exercise that first appeared in MITx's 14.73x The Challenges of Global Poverty course, spring 2013.</em>
+  </p>
+  <p>What is the technical term that refers to the fact that, when enough people sleep under a bednet, the disease may altogether disappear?</p>
+  <stringresponse answer=".*herd immunity.*" type="ci regexp">
+         <additional_answer>community immunity</additional_answer>
+          <additional_answer>population immunity</additional_answer>
+          <textline size="20" label="What is the technical term that refers to the fact that, when enough people sleep under a bednet, the disease may altogether disappear?"/>
+          <hintgroup>
+              <stringhint answer="contact immunity" type="ci" name="contact_immunity_hint" />
+              <hintpart on="contact_immunity_hint">
+                  <startouttext />
+                  In contact immunity, a vaccinated individual passes along his immunity to another person through contact with feces or bodily fluids. The answer to the question above refers to the form of immunity that occurs when so many members of a population are protected, an infectious disease is unlikely to spread to the unprotected population.
+                  <endouttext />
+              </hintpart >
+              <stringhint answer="firewall immunity" type="ci" name="firewall_immunity_hint" />
+              <hintpart on="firewall_immunity_hint">
+                  <startouttext />
+                  Although a firewall provides protection for a population, the term "firewall" is used more in computing and technology than in epidemiology.
+                  <endouttext />
+              </hintpart >
+          </hintgroup>
+  </stringresponse>
+  <solution>
+    <div class="detailed-solution">
+      <p>Explanation</p>
+      <p>The correct answer is <b>herd immunity</b>. As more and more people use bednets, the risk of malaria begins to fall for everyone – users and non-users alike. This can fall to such a low probability that malaria is effectively eradicated from the group (even when the group does not have 100% bednet coverage).</p>
+    </div>
+  </solution>
+  </problem>
+
+
+
+
+******************************************
+Multiple Responses in Text Input Problems
+******************************************
+
+You can specify more than one correct response for text input problems. 
+For example, instead of requiring students to enter exactly "Dr. Martin Luther 
+King, Junior," you can allow answers of "Martin Luther King," "Doctor Martin 
+Luther King," and other variations. To do this, you can use the Simple Editor or the Advanced Editor.
+
+==============
+Simple Editor
+==============
+
+To specify additional correct responses in the Simple Editor, include "or=" (without the quotation marks) before each additional correct response.
+
+::
+
+    >>What African-American led the United States civil rights movement during the 1960s?<<
+    = Dr. Martin Luther King, Jr.
+    or= Dr. Martin Luther King, Junior
+    or= Martin Luther King, Jr.
+    or= Martin Luther King
+
+=====================
+Advanced Editor
+=====================
+
+To specify additional correct responses in the Advanced Editor, add an ``<additional_answer>``  for each correct response inside the opening and closing ``<stringresponse>`` tags.
+
+.. code-block:: xml
+
+  <problem>
+
+  <p>What African-American led the United States civil rights movement during the 1960s?</p>
+    
+  <stringresponse answer="Dr. Martin Luther King, Jr." type="ci" >
+    <additional_answer>Dr. Martin Luther King, Junior</additional_answer>
+    <additional_answer>Martin Luther King, Jr.</additional_answer>
+    <additional_answer>Martin Luther King</additional_answer>
+    <textline label="What African-American led the United States civil rights movement during the 1960s?" size="20"/>
+  </stringresponse>
+
+  </problem>
+
+
+******************************************
+Case Sensitivity and Text Input Problems
+******************************************
+
+By default, text input problems do not require a case sensitive response. You can change this
+and require a case sensitive answer.
+
+To make a text input response case sensitive, you must use :ref:`Advanced Editor`.
+
+In the Advanced Editor, you see that the **type** attribute of the **stringresponse** 
+element equals **ci**, for *case insensitive*. For example:
+
+::
+
+    <stringresponse answer="Michigan" type="ci">
+      <textline size="20"/>
+    </stringresponse>
+
+To make the response case sensitive, change the value of the **type** attribute to **cs**.
+
+::
+
+    <stringresponse answer="Michigan" type="cs">
+      <textline size="20"/>
+    </stringresponse>
+
+*************************************************
+Response Field Length of Text Input Problems
+*************************************************
+
+By default, the response field for text input problems is 20 characters long. 
+
+You should preview the unit to ensure that the length of the response input field
+accommodates the correct answer, and provides extra space for possible incorrect answers.
+
+If the default response field length is not sufficient, you can change it using :ref:`Advanced Editor`.
+
+In the advanced editor, in the XML block for the answer, you see that the **size** attribute of the **textline** element equals **20**:
+
+::
+
+    <stringresponse answer="Democratic Republic of the Congo" type="ci">
+      <textline size="20"/>
+    </stringresponse>
+
+To change the response field length, change the value of the **size** attribute:
+
+::
+
+    <stringresponse answer="Democratic Republic of the Congo" type="ci">
+      <textline size="40"/>
+    </stringresponse>
+
+********************************************************
+Hints and Regular Expressions in Text Input Problems
+********************************************************
+
+You can provide hints that appear when students enter common incorrect answers in text input problems. You can also set a text input problem to allow a regular expression as an answer. To do this, you'll have to modify the problem's XML in the Advanced Editor. 
+
+The regular expression that the student enters must contain the part of the answer that the instructor specifies. For example, if an instructor has specified  ``<answer=".*example answer.*" type="regexp">``, correct answers include ``example answered``, ``two example answers``, or even ``==example answer==``, but not ``examples`` or ``example anser``.
+
+You can add ``regexp`` to the value of the ``type`` attribute, for example: ``type="ci regexp"`` or ``type="regexp"`` or ``type="regexp cs"``. In this case, any answer or hint are treated as regular expressions.
+
+.. _Text Input Problem XML:
+
+***********************
+Text Input Problem XML
+***********************
+
+==============
+Template
+==============
+
+.. code-block:: xml
+
+  <problem>
+      <p>Problem text</p>
+      <stringresponse answer="**.Correct answer 1.**" type="ci regexp">
+          <additional_answer>Correct answer 2</additional_answer>
+          <additional_answer>Correct answer 3</additional_answer>
+          <textline size="20" label="label text"/>
+          <hintgroup>
+              <stringhint answer="Incorrect answer A" type="ci" name="hintA" />
+                <hintpart on="hintA">
+                    <startouttext />Text of hint for incorrect answer A<endouttext />
+                </hintpart >
+              <stringhint answer="Incorrect answer B" type="ci" name="hintB" />
+                <hintpart on="hintB">
+                    <startouttext />Text of hint for incorrect answer B<endouttext />
+                </hintpart >
+              <stringhint answer="Incorrect answer C" type="ci" name="hintC" />
+                <hintpart on="hintC">
+                    <startouttext />Text of hint for incorrect answer C<endouttext />
+                </hintpart >
+          </hintgroup>
+      </stringresponse>
+      <solution>
+      <div class="detailed-solution">
+      <p>Explanation or Solution Header</p>
+      <p>Explanation or solution text</p>
+      </div>
+    </solution>
+  </problem>
+
+=======
+Tags
+=======
+
+* ``<stringresponse>``: Indicates that the problem is a text input problem. 
+* ``<textline>``: Child of ``<stringresponse>``. Creates a response field in the LMS where the student enters a response.
+* ``<additional_answer>`` (optional): Specifies an additional correct answer for the problem. A problem can contain an unlimited number of additional answers.
+* ``<hintgroup>`` (optional): Indicates that the instructor has provided hints for certain common incorrect answers.
+* ``<stringhint />`` (optional): Child of ``<hintgroup>``. Specifies the text of the incorrect answer to provide the hint for. Contains answer, type, name.
+* ``<hintpart>``: Contains the name from ``<stringhint>``. Associates the incorrect answer with the hint text for that incorrect answer.
+* ``<startouttext />``: Indicates the beginning of the text of the hint.
+* ``<endouttext />``: Indicates the end of the text of the hint.
+
+**Tag:** ``<stringresponse>``
+
+Indicates that the problem is a text input problem.
+
+  Attributes
+
+  .. list-table::
+     :widths: 20 80
+
+     * - Attribute
+       - Description
+     * - answer (required)
+       - Specifies the correct answer. To designate the answer as a regular expression, add "regexp" to the **type** attribute. If you do not add "regexp" to the **type** attribute, the student's answer must match the value in this attribute exactly.
+     * - type (optional)
+       - Can specify whether the problem is case sensitive and allows regular expressions. If the ``<stringresponse>`` tag includes ``type="ci"``, the problem is not case sensitive. If the tag includes ``type="cs"``, the problem is case sensitive. If the tag includes ``type="regexp"``, the problem allows regular expressions. A **type** attribute in a ``<stringresponse>`` tag can also combine these values. For example, ``<stringresponse type="regexp cs">`` specifies that the prolem allows regular expressions and is case sensitive.
+
+  Children
+
+  * ``<textline />`` (required)
+  * ``<additional_answer>`` (optional)
+  * ``<hintgroup>`` (optional)
+    
+**Tag:** ``<textline />``
+ 
+Creates a response field in the LMS where the student enters a response.
+
+  Attributes
+
+  .. list-table::
+     :widths: 20 80
+
+     * - Attribute
+       - Description
+     * - label (required)
+       - Contains the text of the problem.
+     * - size (optional)
+       - Specifies the size, in characters, of the response field in the LMS.
+     * - hidden (optional)
+       - If set to "true", students cannot see the response field.
+     * - correct_answer (optional)
+       - Lists the correct answer to the problem.
+
+  Children
+  
+  (none)
+
+**Tag:** ``<additional_answer>``
+
+Specifies an additional correct answer for the problem. A problem can contain an unlimited number of additional answers.
+
+  Attributes
+
+  (none)
+
+  Children
+
+  (none)
+
+**Tag:** ``<hintgroup>``
+
+Indicates that the instructor has provided hints for certain common incorrect answers.
+
+  Attributes
+
+  (none)
+
+  Children
+  
+  * ``<stringhint>`` (required)
+
+**Tag:** ``<stringhint>``
+
+Specifies a common incorrect answer to the problem.
+
+  Attributes
+
+  .. list-table::
+     :widths: 20 80
+
+     * - Attribute
+       - Description
+     * - answer (required)
+       - The text of the incorrect answer.
+     * - name (required)
+       - The name of the hint that you want to provide.
+     * - type
+       - Specifies whether the text of the specified incorrect answer is case sensitive. Can be set to "cs" (case sensitive) or "ci" (case insensitive).
+
+  Children
+
+  * ``<hintpart>`` (required)
+
+**Tag:** ``<hintpart>``
+
+Associates a common incorrect answer with the hint for that incorrect answer.
+
+  Attributes
+
+  .. list-table::
+     :widths: 20 80
+
+     * - Attribute
+       - Description
+     * - on
+       - The name of the hint. This must be the same as the **name** attribute of the ``<stringhint>`` tag. (The ``<stringhint>`` tag provides the name of the hint and the incorrect answer to associate with the hint. The ``<hintpart>`` tag contains the name of the hint and the text of the hint.)
+
+  Children
+
+  * ``<startouttext />`` (required)
+  * ``<endouttext />`` (required)
+
+**Tags:** ``<startouttext />`` and ``<endouttext>``
+
+Surround the text of the hint.
+
+  Attributes
+  
+  (none)
+
+  Children
+  
+  (none)
+

docs/en_us/shared/exercises_tools/vitalsource.rst

+.. _VitalSource:
+
+#########################
+VitalSource E-Reader Tool
+#########################
+
+The VitalSource Bookshelf e-reader tool provides your students with easy access to electronic books. In addition to reading text, students can quickly browse and search content (including figures and notes), use multiple highlighters, create and manage notes, and copy notes into external documents.
+
+.. image:: /Images/VitalSource.png
+   :width: 500
+   :alt: VitalSource e-book with highlighted note
+
+For more information about Vital Source and its features, visit the `VitalSource Bookshelf support site <https://support.vitalsource.com>`_.
+
+.. note:: Before you add a VitalSource Bookshelf e-reader to your course, you must work with Vital Source to make sure the content you need already exists in the Vital Source inventory. If the content is not yet available, Vital Source works with the publisher of the e-book to create an e-book that meets the VitalSource Bookshelf specifications. **This process can take up to four months.** The following steps assume that the e-book you want is already part of the Vital Source inventory.
+
+**************************
+Add a VitalSource E-Reader
+**************************
+
+Adding a VitalSource Bookshelf e-reader has several steps:
+
+#. :ref:`Obtain specific information<VS Obtain VS Info>` about your e-book from Vital Source.
+
+#. :ref:`Modify the course's advanced settings<VS Modify Advanced Settings>` to allow you to create a Vital Source Learning Tools Interoperability (LTI) component.
+
+#. :ref:`Add the VitalSource Bookshelf e-reader<VS Add VS EReader>` to a unit.
+
+.. _VS Obtain VS Info:
+
+===========================================
+Step 1. Obtain Information from VitalSource
+===========================================
+
+To create a VitalSource Bookshelf e-reader, you need the following information from Vital Source:
+
+- The **LTI Passports** policy key. This policy key enables you to create an
+  LTI component for the VitalSource Bookshelf e-reader. For more information
+  about the **LTI Passports** policy key, see :ref:`LTI Information` in
+  :ref:`LTI Component`.
+
+- The Vital Souce Book ID (VBID) for your e-book. This is a specific code that Vital Source creates for the book when Vital Source adds the e-book to its inventory.
+
+To obtain this information, your course team selects a member point person
+(MPP) to work with Vital Source. Vital Source delivers the **LTI Passports**
+policy key and VBID to the MPP.
+
+
+.. _VS Modify Advanced Settings:
+
+=============================================
+Step 1. Modify the Course's Advanced Settings
+=============================================
+
+In this step, you'll modify the course's advanced settings to allow you to
+create an LTI component and add the **LTI Passports** policy key for Vital
+Source.
+
+#. In Studio, click the **Settings** menu, and then click **Advanced Settings**.
+
+#. In the field for the  **Advanced Module List** policy key, place your cursor
+   between the brackets.
+
+#. Enter ``“lti”``. Make sure to include the quotation marks, but not the
+   period.
+
+   .. image:: /Images/LTIPolicyKey.png
+    :alt: Image of the Advanced Module List key in the Advanced Settings page, with the LTI value added
+
+  .. note:: If the value field already contains text, place your cursor directly after the closing quotation mark for the final item, and then enter a comma followed by ``“lti”`` (make sure that you include the quotation marks). For example, the value for **Advanced Module List** may resemble the following:
+
+   ``["value_1","lti"]``
+
+4. Scroll down to the **LTI Passports** policy key.
+
+#. In the policy value field, place your cursor between the brackets, and then
+   enter the value for the **LTI Passports** policy key that you obtained from
+   Vital Source. Make sure to surround the value with quotation marks.
+
+   For example, the value in this field may resemble the following:
+
+   ``"id_21441:b289378-ctools.school.edu:23746387264"``
+
+6. At the bottom of the page, click **Save Changes**.
+
+The page refreshes automatically. At the top of the page, you see a notification that your changes have been saved.
+
+.. _VS Add VS EReader:
+
+==============================================================
+Step 3. Add the VitalSource Bookshelf E-Reader to a Unit
+==============================================================
+
+To add the VitalSource Bookshelf e-reader to a unit, you'll create an LTI component, and then configure several settings in the component.
+
+#. In the unit where you want to create the problem, click **Advanced** under **Add New Component**, and then click **LTI**.
+
+#. In the component that appears, click **Edit**.
+
+#. In the **Display Name** field, type the name of your e-book. This name appears at the top of the component and in the course ribbon at the top of the page in the courseware.
+
+#. Next to **Custom Parameters**, click **Add**.
+
+#. In the field that appears, enter the following (where ``VitalSourceCode`` is the VBID for the e-book):
+
+   ``vbid=VitalSourceCode``
+
+   If you want to experiment with an e-book in your course, but you don't yet have a VBID for your e-book, you can enter ``vbid=L-999-70103`` to create a link to *Pride and Prejudice*.
+
+#. If you want your e-book to open to a specific page, click **Add** next to **Custom Parameters** again, and then add the following (where ``35`` is the page of the e-book):
+
+   ``book_location=page/35``
+
+#. In the **Launch URL** field, enter the following (make sure to use ``https`` instead of ``http``):
+
+  ``https://bc.vitalsource.com/books/book``
+
+8. In the **LTI ID** field, enter the following:
+
+  ``vital_source``
+
+9. Click **Save**.
+
+**************************
+Information for Students
+**************************
+
+Each institution's Vital Source account manager will train the MPP on the VitalSource Bookshelf e-reader and provide supporting documentation as part of the onboarding process. However, to improve the learner experience, we recommend that you provide the following explanation of the e-reader to your students:
+
+  Digital textbooks in the VitalSource Bookshelf e-reader offer simple, user-friendly navigation and instant, intuitive access to content. You'll most often use several VitalSource Bookshelf e-reader features during the course:
+
+  * Browse content, figures, and notes and filter search results.
+  * Use multiple highlighters.
+  * Create and manage notes.
+  * Copy and paste notes into external documents.
+
+  For more information about how to use these features, visit the `VitalSource Bookshelf support site <https://support.vitalsource.com>`_.
+

docs/en_us/shared/exercises_tools/word_cloud.rst

+.. _Word Cloud:
+
+##################
+Word Cloud Tool
+##################
+
+
+In a word cloud tool, students enter words into a field in response
+to a question or prompt. The words all the students have entered then
+appear instantly as a colorful graphic, with the most popular responses
+appearing largest. The graphic becomes larger as more students answer.
+Students can both see the way their peers have answered and contribute
+their thoughts to the group.
+
+
+For example, the following word cloud was created from students'
+responses to a question in a HarvardX course.
+
+.. image:: /Images/WordCloudExample.png
+  :alt: Image of a word cloud problem
+
+****************************
+Create a Word Cloud Tool
+****************************
+
+To create a word cloud tool:
+
+#. Add the Word Cloud advanced component. 
+
+    #. On the **Settings** menu, click **Advanced Settings**.
+
+    #. In the field for the **Advanced Module List** policy key, place your
+       cursor between the brackets.
+
+    #. Enter the following value. Make sure to include the quotation marks.
+
+       ``"word_cloud"``
+
+    4. At the bottom of the page, click **Save Changes**.
+
+       The page refreshes automatically. At the top of the page, you see a
+       notification that your changes have been saved.
+
+    5. Return to the unit where you want to add the specialized problem. The
+       list of possible components now contains an Advanced component.
+
+#. In the unit where you want to create the problem, click **Advanced**
+   under **Add New Component**.
+#. In the list of problem types, click **Word Cloud**.
+#. In the component that appears, click **Edit**.
+#. In the component editor, specify the settings that you want. You can
+   leave the default value for everything except **Display Name**.
+
+   -  **Display Name**: The name that appears in the course ribbon and
+      as a heading above the problem.
+   -  **Inputs**: The number of text boxes into which students can enter
+      words, phrases, or sentences.
+   -  **Maximum Words**: The maximum number of words that the word cloud
+      displays. If students enter 300 different words but the maximum is
+      set to 250, only the 250 most commonly entered words appear in the
+      word cloud.
+   -  **Show Percents**: The number of times that students have entered
+      a given word as a percentage of all words entered appears near
+      that word.
+
+#. Click **Save**.

docs/en_us/shared/exercises_tools/zooming_image.rst

+.. _Zooming Image:
+
+##################
+Zooming Image Tool
+##################
+
+You may want to present information to your students as an image. If your image is very large or very detailed, students may not be able to see all the information in the image. You can use the zooming image tool to enlarge areas of your image as the student moves the mouse over the image, as in the example below.
+
+.. image:: /Images/Zooming_Image.png
+  :alt: Example zooming image tool showing a chemistry exercise
+
+***********************************
+Components of a Zooming Image Tool
+***********************************
+
+To create a zooming image tool, you need the following files.
+
+* The image that you want students to see when they access the unit.
+* The image that appears in the magnified area when a student clicks the regular image. This image may be larger than the regular image.
+* The **jquery.loupeAndLightbox.js** JavaScript file. Every zooming image tool uses this JavaScript file, and you won't make any changes to it. `To download this file, right-click here <http://files.edx.org/jquery.loupeAndLightbox.js>`_, and then click **Save Link As** to save the file on your computer.
+
+****************************
+Create a Zooming Image Tool
+****************************
+
+#. Upload your regular-sized image file, your small image file, and the **jquery.loupeAndLightbox.js** file to the **Files & Uploads** page. For more information about how to do this, see :ref:`Add Files to a Course`.
+
+#. Under **Add New Component**, click **html**, and then click **Zooming Image**.
+
+#. In the new component that appears, click **Edit**.
+
+#. In the component editor, replace the default problem text with your own text.
+
+#. Switch to the **HTML** tab.
+
+#. Replace the following placeholders with your own content.
+
+   - Replace the following file name and path with the name and path of the image that you want to appear magnified when the user hovers over the regular image.
+
+     **https://studio.edx.org/c4x/edX/DemoX/asset/pathways_detail_01.png**
+
+     For example, your file name and path may be **/static/Image1.jpg**.
+
+   - Replace the following file name and path with the name and path of the image that you want to appear when the page opens.
+     
+     **https://studio.edx.org/c4x/edX/DemoX/asset/pathways_overview_01.png**
+
+     For example, your file name and path may be **/static/Image2.jpg**.
+
+   - Replace the following name and file path with the name and path of the JavaScript file for your course.
+
+     **https://studio.edx.org/c4x/edX/DemoX/asset/jquery.loupeAndLightbox.js**
+
+     Because you uploaded the **jquery.loupeAndLightbox.js** file to the **Files & Uploads** page, your file name and path is **/static/jquery.loupeAndLightbox.js**.
+
+   - (Optional) If you want the magnified area to be larger or smaller, change the **width** and **height** values from 350 to larger or smaller numbers. For example, you can change both numbers to 450. Or, if you want a horizontal oval instead of a circle, you can change the **width** value to a number such as 500 and the **height** value to a number such as 150.
+
+   The HTML in your zooming image tool may resemble the following.
+
+   .. image:: /Images/ZoomingImage_Modified.png
+     :alt: Example HTML for a zooming image tool
+
+#. Click **Save** to save the HTML component.
+
+