Xerte Community Documentation

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Interactivity > Highlight Text ======

A page that presents the learner with two panels; one panel containing a text, sections of which can be highlighted by the learner, and the other panel presenting either a model answer for the task, other feedback or a box into which the learner can paste and edit the highlighted text.

There are two variations. **Highlighting** allows the learner to highlight text and then compare against the model answer. **Notetaking** allows the learner to highlight, import the highlight text into an editor box and edit it.  For both variations, all the content (including learner interactions) is available as a Word document download.

===== Example demo =====

This is an example of the **Highlighting **variation of this page type. There is also a link to the **Note Taking** variation, below this demo.

{{url>https://xot.xerte.org.uk/play.php?template_id=116#highlighttext_notes}}

or view at [[https://xot.xerte.org.uk/play.php?template_id=116#highlighttext_notes|Highlight Text - Highlighting example]] (opens in new tab).

[[https://xot.xerte.org.uk/play_400|Highlight Text - Note Taking]]


===== Editor Interface =====

{{:xerte-inter-highlighttext-editor.jpg?800&direct}}

==== Core Properties ====

^ Property ^ Description ^ Type ^ Additional information ^
| Page Title | Text that appears in header of published page. | Text |   |
| Interactivity  Type | {**Highlighting**/Note Taking} | Drop-down | The two task types are very different, and you really need to decide which type you want to use before authoring the content. |
| Page Text: Title | Title that appears as a tab above the Page Text | Text | Note that this property is only visible if you have selected Left, Panel or Panel 2 as the **Page Text: Position** property (see below), or if you have added **Download Notes** from the Optional Properties |
| Page Text: Text | Content that appears in any of the locations listed below  | Text+  | Use this to give the context or instructions for the task.  Other content (e.g. images, audio, video) can be embedded here.  |
| Page Text: Position | Where the Page Text appears on the page {**Top**/Left/Panel 1/Panel 2} | Drop-down | Don't choose **Top **if you have a lot of Page Text, because it reduces :?:  //What's the difference between Left and Panel 1 here - not  clear when you play the page.//  |
| Initial Text: Title | Title that appears as a tab above the Initial Text | Text |   |
| Initial Text: Text | This is the text that learners interact with. They can highlight sections of text and either save that highlighting for comparison with a model answer, or copy it into their (editable) Notes tab. | Text+ |   |
| Initial Text: Position | Which panel the Initial Text appears in {**Panel 1**/Panel 2} | Drop-down  | Panel 1 is the left panel, Panel 2 is the right panel. |
| Suggested Text: Title | Title that appears as a tab above the Suggested Text  | Text  |   |
| Suggested Text: Text | If you are using the Highlighting variation, this will probably be a "model answer", including a copy of the initial text with appropriate sections highlighted  | Text+  |   |
| Suggested Text: Position | Which panel the Initial Text appears in {Panel 1/**Panel 2**}  | Drop-down  | If you are using the Highlighting variation, it makes sense for the Initial Text and the Suggested Text to be in different panels, so they can be viewed side by side  |
| Notes Area: Title | Title that appears as a tab above the Suggested Text |   | This property is only only visible in the Note Taking variation |
| Notes Area: Position | Which panel the Notes Area appears in {Panel 1/**Panel 2**}. |   | This property is only only visible in the Note Taking variation |
| Highlight Colour | The colour of the highlighting as the learner selects text  | Colour picker  |   |
| Select Colour | The colour of the highlighting after the learner has saved it (i.e. after clicking on the Highlight button)  | Colour picker  |   |

==== Optional Properties ====

=== Page-specific ===

^ Property ^ Description ^ Type ^ Additional information ^
| Allow Typing | Allows the learners to edit in the Notes box. This property is only visible in the Note Taking variation. | Text+ |   |
| Answer Required Before Feedback | **Submit **button is greyed out, and only works when the learner has either saved highlighting, or has copied highlighted text to Notes (depending which variation you have chosen) | Drop-down |   |
| Download Notes: Allow Download | Makes the Download button available  | Tick box  |   |
| Download Notes:  Filename (without extension) | Changes the name of the download file - this is recommended as it helps the learner manage files. | Text | Default - "fileHighlight" |
| Download Notes: File Orientation | {Portrait/Landscape} | Drop-down |   |
| Download Notes: h1, h2, h3, p | Sets the font size of headings and body paragraph in the download | Numbers |   |
| Feedback Text: Title | The title that appears on the tab and and at the top of the downloaded document  | Text  |   |
| Feedback Text: Text | Text that appears in the tab after the highlighted sect has been submitted  | Text +  |   |
| Feedback Text: | Location of the Feedback tab and text {**Panel 1**/Panel 2} | Drop-down | This really needs to be in a different panel to the Initial Text, so that the learner's submitted highlighting and any model answer can be viewed side by side  |
| Notes Placeholder Text | Editable text displayed in the Notes box before any notes that the learner has added. This property is only visible in the Note Taking variation. | Text+  |   |
| Panels to Tabs | Forces both panels to be displayed as tabbed navigators,  even when a panel only contains one tab  | Drop-down | Recommended - ensures that all titles are displayed  |

=== General ===

See [[:optional_properties#General optional properties|General optional properties]]

==== Language Options ====

:!: Most of the Language Options for this page relate to the **Copy and Paste Info** optional property.

^ Property ^ Description ^ Type ^ Additional information |   |
| Select Button Label | Text on button that saves learner highlighting (Highlighting variation only)  | Text | Default - "Highlight" |   |
| Notes Button Label | Text on button that copies learner highlighting to the Notes tab (Note Taking variation only) | Text | Default  - "Copy to Notes"  |   |
| Download Button Label | Text on the Download button | Text | Default - "Download" |   |
| Check Button Label | Text on the button to submit "answer" when all the highlighting has been completed | Text | Default - "Submit" |   |
| Clear Button Label | :?:  //Check that this button exists.// | Text | Default - "Clear" |   |
| Reset Button Label | Deletes interactions and resets the task so that the learner can restart it without leaving the page | Text | Default - "Reset" |   |
| Selection Error | Text on pop-up if learner attempts to highlight across paragraphs  | Text | Default - "Selection error - you can not select content from more than one paragraph at a time"  |   |
| Highlight Error | Text on pop-up if learner clicks on **Highlight **or **Copy to Notes** without highlighting any text  | Text | Default - "Selection error - no text selected"  |   |
| Initial Text Label (Notes) | :?: //Not sure what this and the following 3 LPs do? Not tooltips or screen reader info? Error? //  | Text | Default - "Initial text - select text and copy to your notes"  |   |
| Initial Text Label (Highlight) |   | Text | Default - "Initial text - select text before clicking highlight button |   |
| Suggested Text Label |   | Text | Default - "A suggested  answer" |   |
| Notes Text Label |  | Text | Default - "Notes"  |   |


===== Further information =====

__The__ two variations offer quite different learning opportunities, and so you really need to have decided which one meets your learning objective before you start authoring the page. Essentially, **Highlighting **requires the learner to notice key features of a text for comparison with a model answer; **Note Taking**, on the other hand, allows learners to create and edit their own text, including content given to them.

When authoring with the **Note Taking** variation you may need to consider issues around academic integrity, referencing and citing sources.

Here are a number of key features of this page type that you need to bear in mind when authoring;

  * content is presented in two panels, each of which can include 2 or 3 tabs
  * any tab can be displayed in either the left or right panel
  * the **Page Text** is always displayed when the learner lands on the page
  * at least one tab is always hidden until the learner interacts with either the **Initial Text **(**Highlighting**) or the **Notes Area **(**Note Taking**). In each case the hidden tab appears when the learner clicks on **Submit**.

The tabs are given default titles (Page Text, Initial Text, Suggested Text, Feedback, Notes Area) but these can be changed, and in fact it is better to think of these as content areas that are either;

  * available before interaction (**Page Text**, **Initial Text**, **Notes Area**)
  * or hidden until the learner has interacted in some way (**Suggested Text**, **Feedback**.

You also need to consider what content needs to be visible side by side, i.e. in different panels.

{{tag>pagetype interactivity}}