Updated query builder gifs and instructions

app/templates/_base/_modals/_manual/09_query_builder.html.j2

@@ -22,9 +22,9 @@ A "translation" of your query into Corpus Query Language (CQL) is shown below.</
 <div style="border: 1px solid; padding-left: 20px; margin-right: 400px; margin-bottom: 40px;">
   <h5>Content</h5>
   <ol style="list-style-type:disc">
-    <li><a href="#add-new-token-tutorial">Add new token to your query</a></li>
+    <li><a href="#add-new-token-tutorial">Add a new token to your query</a></li>
     <li><a href="#edit-options-tutorial">Options for editing your query</a></li>
-    <li><a href="#add-structural-attribute-tutorial">Add structural Attributes to your query</a></li>
+    <li><a href="#add-structural-attribute-tutorial">Add structural attributes to your query</a></li>
     <li><a href="#general-options-query-builder">General options</a></li>
   </ol>
 </div>
@@ -38,7 +38,7 @@ A "translation" of your query into Corpus Query Language (CQL) is shown below.</
   <p>If you are only looking for a specific token, you can click on the left 
   button and select the type of token you are looking for from the drop-down menu. 
   By default "Word" is selected. </p>
-
+  <br>
   <h5>Word and Lemma</h5>
   <p>If you want to search for a specific word or lemma and the respective 
   category is selected in the drop-down menu, you can type in the word or lemma 
@@ -54,13 +54,13 @@ A "translation" of your query into Corpus Query Language (CQL) is shown below.</
   "simple_pos" to search for different parts-of-speech. You can find an overview 
   of all tags under the "Tagsets" tab.</p>
   <img src="{{ url_for('static', filename='images/manual/query_builder/pos.gif') }}" alt="part-of-speech-tag explanation" width="100%;" style="margin-bottom:20px;">
+  <br>
 
   <h5>Empty Token</h5>
-  <p>Here you can search for an empty token. This selection should never stand 
+  <p>Here you can search for a token with unspecified attributes (also called wildcard token). This 
-  alone and should always be extended with an incidence modifier or stand in a 
+  selection should never stand alone and should always be extended with an incidence modifier or stand in a 
   larger query, because otherwise all possible tokens would be searched for and 
   the program would crash.</p>
-  <p></p>
   <br>
 </div>
 
@@ -84,7 +84,6 @@ A "translation" of your query into Corpus Query Language (CQL) is shown below.</
   variants are not limited, so you can manually enter more options in the same 
   format. "Option1" and "option2" must be replaced accordingly. </p>
   <img src="{{ url_for('static', filename='images/manual/query_builder/option_group.gif') }}" alt="option group explanation" width="100%;" style="margin-bottom:20px;">
-  <p></p>
   <br>
 
   <h5>Incidence Modifiers</h5>
@@ -93,7 +92,7 @@ A "translation" of your query into Corpus Query Language (CQL) is shown below.</
   not at all or once: <br> 
   [word = "is"] [word="it"] [word="your"] [word="litte"]? [word = "dog"] <br>
   Here the word "little" should occur either once or not at all. With 
-  [word="dogs?"] the search is for "dog "or "dogs". </p>
+  [word="dogs?"] the search is for "dog "or "dogs".</p>
   <br>
 
   <h5>Ignore Case</h5>
@@ -131,27 +130,33 @@ A "translation" of your query into Corpus Query Language (CQL) is shown below.</
   This search can of course be specified if you search for particular tokens or 
   entities between the sentence tags (<s></s>). For example, you can search for
   sentences that contain only a noun, verb, and adjective. <br> 
-  Click on Sentence to add two sentence chips: <div class="chip" style="background-color:#FD9720;">Sentence Start</div> 
+  Click on Sentence to add the sentence chips: <div class="chip" style="background-color:#FD9720;">Sentence Start</div> 
   and <div class="chip" style="background-color:#FD9720;">Sentence End</div>. 
-  Use drag-and-drop if needed to mark where the sentence starts and ends. After 
+  These mark where the sentence starts and ends. Use drag-and-drop to place them accordingly. When 
-  adding the Sentence attribute, the input marker will automatically be 
+  the Sentence attribute is added, the input marker will automatically be 
   moved between the sentence chips. Use drag-and-drop as needed to continue your query 
-  at a different position. <br>
+  at a different position.
   <br>
 
   <h5>Entities</h5>
-  <p>With entities, i.e. units of meaning, you search for text sections that 
+  <p>With entities, i.e. units of meaning, you can search for text sections that 
-  follow a certain code. For example, persons, dates, certain events. You can 
+  contain more specific information, for example, persons, dates, or events. The 
-  select the codes using the drop-down menus. You can find an explanation of 
+  codes for these categories can be selected using the drop-down menus. You can find an explanation of 
-  the respective abbreviations under the tab "Tagsets". <br>
+  these abbreviations under the tab "Tagsets". <br>
   You can also search for unspecified entities by selecting "Add entity of any type".</p>
-  To close the entity query you started, you have to click the entity button one more time. This will make the <div class="chip" style="background-color:#A6E22D;">Entity End</div> element appear in your query.
+  Click on the Entity button to add the entity chips <div class="chip" style="background-color:#A6E22D;">Entity Type=</div> and <div class="chip" style="background-color:#A6E22D;">Entity End</div>.
+  <p>The entity type can be changed by clicking on the pen symbol on the chip. When 
+  the Entity attribute is added, the input marker will automatically be 
+  moved between the entity chips. Use drag-and-drop as needed to continue your query 
+  at a different position.</p>
   <img src="{{ url_for('static', filename='images/manual/query_builder/entity.gif') }}" alt="entity explanation" width="100%;" style="margin-bottom:20px;">
   <p></p>
   <br>
 
-  <h5>Meta Data</h5>
+  <h5>Meta Data (currently unavailable)</h5>
-  <p>With the meta data you can annotate your text and add specific conditions. 
+  <p>The meta data function is being worked on and cannot currently be used!
+  <br>
+  With the meta data you can annotate your text and add specific conditions. 
   You can select a category on the left and enter your desired value on the right. 
   The selected metadata will apply to your entire request and will be added at the end.</p>
   <img src="{{ url_for('static', filename='images/manual/query_builder/meta_data.gif') }}" alt="meta data explanation" width="100%;" style="margin-bottom:20px;">
@@ -167,14 +172,39 @@ A "translation" of your query into Corpus Query Language (CQL) is shown below.</
   <br>
   <h4 id="general-options-query-builder">General Options of the query builder</h4>
   <p>You have several options to edit your query after adding it to the preview.</p>
+  <br>
+
+  <h5>Editing the elements</h5>
+  <p>You can edit your query chips by clicking on the pen icon.</p>
+  <img src="{{ url_for('static', filename='images/manual/query_builder/editing_chips.gif') }}" alt="editing explanation" width="100%;" style="margin-bottom:20px;">
+  <br>
 
   <h5>Deleting the elements</h5>
   <p>You can delete the added elements from the query by clicking the X behind the respective content.</p>
   <img src="{{ url_for('static', filename='images/manual/query_builder/delete.gif') }}" alt="delete explanation" width="100%;" style="margin-bottom:20px;">
+  <br>
 
   <h5>Move the elements of your query</h5>
   <p>You can drag and drop elements to customize your query.</p>
   <img src="{{ url_for('static', filename='images/manual/query_builder/drag_and_drop.gif') }}" alt="Drag&Drop explanation" width="100%;" style="margin-bottom:20px;">
+  <br>
+
+  <h5>Setting an incidence modifier</h5>
+  <p>With the incidence modifier option, you can specify the amount of 
+  times a token should appear in your query. This is particularly relevant for empty
+  tokens (tokens with unspecified attributes). Click on a token (blue chip) and 
+  select the desired option from the list to add an incidence modifier. To 
+  close the list without adding anything, click on the token again.</p>
+  <img src="{{ url_for('static', filename='images/manual/query_builder/incidence_modifier.gif') }}" alt="incidence modifier explanation" width="100%;" style="margin-bottom:20px;">
+  <br>
+  
+  <h5>Switching between Query Builder and Expert mode</h5>
+  <p>To work with the plain Corpus Query Language instead of using the Query Builder, click on the "expert mode" 
+  switch. Your query can be entered into the input field. All elements previously added will be carried over 
+  into expert mode. Click on the switch again to switch back to the Query Builder if desired. All recognized elements 
+  will be parsed into chips; those not recognized will be deleted from the query.</p>
+  <img src="{{ url_for('static', filename='images/manual/query_builder/expert_mode.gif') }}" alt="expert mode explanation" width="100%;" style="margin-bottom:20px;">
+
 
 </div>