What is an Annotation XBlock?
#############################

In an annotation problem, you highlight specific text inside a larger text block and then ask questions about that text. The questions appear when learners move their cursors over the highlighted text. The questions also appear in a section below the text block, along with space for learners’ responses.


What are the benefits of using Annotation XBlock? 
*************************************************

- Annotations provides multiple means of representation to give learners various ways of acquiring information and knowledge.
- Facilitates the monitoring of quality and level of engagement of an individual, groups, and of the entire student population.
- Allows multiple means of engagement to capture learners' interests, present suitable challenges, and motivate them to learn.
- Fosters crowdsourcing to enhance learning though collaborative research.


How to implement an Annotation XBlock?
**************************************

**Step 1:**
  Go to Studio. Remember, you can access it through the link in your `ECC account <https://public.docs.edunext.co/en/latest/external/managers/how_ecc/how-ecc-works.html?highlight=ecc>`_ or by going to `studio.edunext.co <https://studio.edunext.co>`_ and signing in with your email and password.

**Step 2:**
  Open the course where you will add the Annotation XBlock.

**Step 3:**
  Click on the **Settings** tab and select the **Advanced Settings** option.

  .. image:: ../../_assets/advanced_settings.png
    :width: 500px
    :align: center
    :alt: This image shows where the Setting tab and the Advances Setting option are.

**Step 4:**
  In the section **Advanced Module List**, add ``annotatable`` between the square brackets. 

  .. code-block:: json

    [
      "annotatable"
    ]

  .. note::  Add the XBlock command with an indented space without any space before or after quotation marks, as shown in the example above, to avoid execution errors.

**Step 5:**
  At the bottom of the screen, click on **Save Changes**. 

  .. image:: ../../_assets/annotation_advanced_module.png
    :width: 500px
    :align: center
    :alt: This image shows the Annotation code in the Advanced Module List and the save button.

**Step 6:**
  After this, the XBlock should be available, so click the **Content** tab and select the **Outline** option to get back to the course content.

  .. image:: ../../_assets/content_outline.png
    :width: 500px
    :align: center
    :alt: This image shows the Content tab and the Outline option.

**Step 7:**
  Under Outline, go to the section, then the subsection, and finally to the unit or page where you want to add the Annotation XBlock. 

**Step 8:**
  Once you are there, click **Advanced Component** in the **Add New Component** bar.

  .. image:: ../../_assets/advanced_component.png
    :width: 500px
    :align: center
    :alt: This image shows the Advanced Component in the Add New Component bar.

**Step 9:**
  You will see a list of all the advanced components added to your course. Click on **Annotation**. The system will add the component immediately to the unit.

  .. image:: ../../_assets/annotation_option.png
    :width: 500px
    :align: center
    :alt: This image shows the Annotation option in the list.

**Step 10:**
  Add the **Instructions** and **Guided Discussion** segments of the problem, and then the **Annotation problem** segment of the problem. 

  To start the process, click the **Edit** button on the upper right corner of the new component.
  
  .. image:: ../../_assets/annotation_edit.png
    :width: 500px
    :align: center
    :alt: This image shows the Edit button.

**Step 11:**
  The editor window is going to open. In the component editor, replace the example code with your own code in order to add the **Instructions** and **Guided Discussion**.

  .. image:: ../../_assets/annotation_example.png
    :width: 500px
    :align: center
    :alt: This image shows the default setting of Annotation XBlock.

**Step 12:**
  Add the **Annotation problem** segment. For more information on this step, refer to this `article  <https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/annotation.html#add-annotation-problem>`_.

**Step 13:**
  Finish the configuration of the component and click on the **Save** button.

**Step 14:**
   **Publish** the unit and check how your new component looks on its final version by clicking the **View Live Version** button.

   .. image:: ../../_assets/annotation_publish.png
    :width: 500px
    :align: center
    :alt: This image shows the Publish button and the View Live Version button.

.. seealso:: This is also documented in the `official Open edX documentation <https://edx.readthedocs.io/projects/edx-partner-course-staff/en/latest/exercises_tools/annotation.html>`_.

.. seealso:: You may also visit our  `demo site <https://learner.demo.edunext.co/courses/course-v1:demo-site+DMS+01/courseware/5b50385f25044d6d9076b9964f7bcdbf/4186e0a70dcf41439bf314097f79a740/?activate_block_id=block-v1%3Ademo-site%2BDMS%2B01%2Btype%40sequential%2Bblock%404186e0a70dcf41439bf314097f79a740>`_ where you can find various examples of the use of the Annotation XBlock.