Update of crowdinintegration.md (fixes open-learning-exchange#168) (o…

…pen-learning-exchange#174)

pages/crowdinintegration.md

@@ -1,26 +1,122 @@
 # Crowdin Integration
-----------
-Our first process on Crowdin is to provide screenshots and context for the strings. This can be done in the steps below. The long-term goal is to integrate our code with Crowdin so that there are live screens of the BeLL to help translators. We also want to simplify the process between our Crowdin and GitHub. Right now, we manually copy the texts into GitHub from Crowdin string by string, which as you can imagine, is time-consuming and inefficient as it cannot be switched easily from the downloadable csv format to a json for our git code. 
-
- 1. Go to main project page of the Open Learning Exchange Crowdin Project and click on Settings. It should lead you to the page show below. Now navigate to Screenshots. 
-![navigate to screenshots](/pages/uploads/images/crowdinmd1.png)
-
- 3. Once you’re there, you can begin adding screenshots of the BeLL interface. The screenshots should be of various pages in the BeLL interface. Once you have uploaded a screenshot, it should appear on the top left slot of the uploaded screenshots. 
- 4. Select the screenshot and then select drag and drop.
-![after clicking newlu-uploaded screenshot](/pages/uploads/images/crowdinmd2.png)
- 5. This will open up a side navigation bar as shown below.
-![screenshot navigation bar](/pages/uploads/images/crowdinmd3.png)
- 6. Click the text recognition tool at the top-left to highlight all relevant text on the image. 
-![text recognition tool](/pages/uploads/images/crowdinmd4.png)
- 7. Use it to highlight the text you want to tag. Once the text is highlighted, double check to make sure that the tag matches the text on the page and if not, click as shown below.
-![highlight text to be tagged](/pages/uploads/images/crowdinmd5.png)
- 8. This will open up an editor as shown below. Now you can edit in the editor to make sure that the tag matches the text on the page.
-![tag editor](/pages/uploads/images/crowdinmd6.png)
- 9. Once you have tagged on the strings, click save. Reopen the screenshot you just tagged (you will need this for reference). Open the main project page in a new tab. You will now need to check what your strings are linked to the right context in the translation interface. The following steps detail how to do this.
-![save and check strings](/pages/uploads/images/crowdinmd7.png)
- 10.  Select a language. Any language will do since we’re searching in English. 
-![select language](/pages/uploads/images/crowdinmd8.png)
- 11.  Selecting a language will bring you to this page. Click on OLE OpenBeLL Interface.
-![navigate to interface](/pages/uploads/images/crowdinmd9.png)
- 12. Now you can search up the a string that you tagged in the screenshot, and verify that your screenshot is visible in the main interface for each of the terms you tagged. You can either scroll through the terms using the scroll bars on the left or use the arrows below the “Enter translation here” box. For each of the strings you selected on your screenshot, verify that the screenshot is correct. Use the “Edit Context” to add a more detailed description of the string.
-![edit context](/pages/uploads/images/crowdinmd10.png)
+##Objectives:
+There are two objectives for this assignment:
+* 1- Provide exactly one screenshot for the strings in BeLL app, and tag it.
+* 2- Write good description of the strings in Context.
+
+These objectives are going to make sense as you go through the steps. Before we get to the steps, you should know what strings are, and what tagging is. 
+
+###Strings:
+>A string is a word or a sentence that describes the functionality of a button, or the title of a page on BeLL app. See the figure below. It shows the different strings on the main page of Bell App. Strings are highlighted with red squares.
+
+![Strings](/pages/uploads/images/strings.png)
+
+###Taggin:
+>Tagging in Crowdin is similar to tagging your friends on Facebook except here we tag strings on a screenshot.
+
+Now that you know what strings are and what tagging is, let’s show you how to accomplish the objectives above.
+
+##Objective 1: Providing and Tagging Screenshots:
+There are two major steps to accomplishing this objective which encompasses smaller steps.
+
+###Step 1: Find the string in BeLL app:
+>The goal in this step is to go through a list of strings, and for each string in the list, try to find where it might appear in BeLL app. Then, take a screenshot of the page where you found the string. Here are the steps to do that.
+
+1.1- Go to Crowdin either by clicking [here](https://crowdin.com/project/open-learning-exchange/invite), or by clicking the Translation tab on the MDwiki for Virtual Interns. See the figure below.
+
+![Translateion Tab](/pages/uploads/images/translation_tab.png)
+
+1.2- In Crowdin main page, click on any language. I chose Arabic, but you can choose something else. See the figure below.
+
+![Crowdin Main Page](/pages/uploads/images/crowdin_main.png)
+
+1.3- After you choose a language, click on OLE OpenBeLL Interface file. See the figure below.
+
+![OLE Interface file](/pages/uploads/images/tranlation_page.png)
+
+1.4- When you click on the file, the list of strings will be on the left side of the page. Note that there are 15 pages in the list. See the figure below.
+
+![List of Strings](/pages/uploads/images/list_of_strings.png)
+
+Now that you found the list of strings, go through each string and do the following:
+
+1.5- Make sure it is not tagged:
+>To find out if a string is tagged or not, simply click on it, and then look at the middle section of the page. If you see a screenshot, move on to the next string, but if you do not, go to step 1.6. The figures below show a tagged and an untagged string respectively.
+
+![Tagged String](/pages/uploads/images/tagged_string.png)
+
+![Untagged String](/pages/uploads/images/untagged_string.png)
+
+1.6- Take a screenshot:
+>Click through the BeLL app to find the string. Once you see the string in the app, take a screenshot of the page and save it.
+
+To see examples of screenshots, click on a tagged string, and take a look at the screenshot of that string. 
+
+#####Tip
+>When you see an untagged string, it might be helpful to ask yourself where can you find the string in the app? For example, where do think the string “compose” can be found? The most likely place is in the email page. Go there and take a screenshot if it is not already tagged. 
+
+###Step 2: Upload and Tag Screenshots:
+####1- Uploading Screenshots:
+
+2.1.1- If you are in OLE OpenBell Interface file, go to the main page by clicking [here](https://crowdin.com/project/open-learning-exchange?auto_accepted=13039143), or click Project > Open Learning Exchange Page. See the figure below. If you are in the main page, Click the Settings button.
+
+![To Get to Main Page in Crowdin](/pages/uploads/images/to_go_to_main_page.png)
+####Note
+>In Open Learning Exchange Crowdin Project, Emily has made you a manager. As a manager, you should be able to see the Settings button on the main page of Crowdin. See the figure below. If you do not see the Settings button, please let Emily or Dogi know in the chat.
+
+![Settings Button](/pages/uploads/images/settings_button.png)
+
+2.1.2- Click the Screenshots tab. See the figure below.
+
+![Screenshots Button](/pages/uploads/images/screenshots_button.png)
+
+2.1.3- Upload the screenshot you saved in Step 1 either by dragging and dropping, or click the Upload Screenshots button. See the figure below.
+
+![Screenshots Tab](/pages/uploads/images/screenshots_tab.png)
+
+2.1.4- After the upload is completed, you will see your screenshot right below the upload section to the left. See the figure below.
+
+![New Screenshots](/pages/uploads/images/new_screenshot.png)
+
+####2- Tagging Screenshots:
+Now that you uploaded the screenshot, let’s tag it.
+
+2.2.1- Click on the screenshot you uploaded.
+
+2.2.2- Activate Text Recognition either by pressing “T” on your keyboard or by clicking the T button on the upper-left corner of the page. See the figure below.
+
+![Text Recognition Button](/pages/uploads/images/text_recognition.png)
+
+2.2.3- Highlight/tag the string. Once you do, the string will appear in a text box. The figure above shows a number of tagged strings.
+
+2.2.4- Make sure that the text in the text box matches the string on the screenshot. Sometimes, Text Recognition will see different text. If you cannot see the whole text in the text box, expand the box by dragging the lower-right corner of the box. See the figure below.
+
+![Expanding Text Box](/pages/uploads/images/expanding_text_box.gif)
+
+2.2.5-Save your tags by clickin the Save button on the upper-right corner of the page.
+
+#####Text Recognition Cannot Recognize a String:
+If Text Recognition cannot recognize the string on the screenshot. Follow the steps below:
+
+1- Activate Drag and Drop either by pressing “H” on your keyboard, or click the hand on the top-left corner of the page. See the figure below.
+
+![Drag and Drop Button](/pages/uploads/images/drag_and_drop.png)
+
+2- The list of strings will appear on the right side of the screen. Search for the string you want to tag.
+
+3- Simply drag the string and drop it over the string you want to tag, then adjust the size of the text box so that it covers the intended string. See the figure below.
+
+![Drag and Drop Strings](/pages/uploads/images/drag_and_drop_strings.gif)
+
+You are now done with the first two objectives! Repeat these steps for half of the strings on the list. 
+
+##Objective 2: Writing Context:
+>Provide a good, strong, and thorough description of the strings.
+
+1- Follow steps 1.1-1.4 to get to OLE OpenBeLL Interface file.
+
+2- Go throught the list of strings, click Edit Text (see the figure below), and write good context of the strings.
+
+![Edit Context](/pages/uploads/images/edit_context.png)
+
+Hurray! You have completed the instructions for Crowdin Integration!