Translation for user created content in Tutorial/Project

[frozenhelium]

User created content like project, tutorial cannot be translated using the current processs through transifex.
We need a mechanism to define and use translations for these content.

We are proposing a simple feature that allows translation of these content through the manager dashboard.

What should be translated?

Project

• Title
• Look For
• Project Details (Markdown)

Tutorial

• Title
• Option
  • Title
  • Description
• Sub-option
  • Title
• Information Pages
  • Title
  • Text Block (Markdown)
• Scenario Pages
  • Instruction
    • Title
    • Description
  • Hint
    • Title
    • Description
  • Success
    • Title
    • Description

How?

We define a set of supported languages for translation in the manager dashboard.
This set of languages should be the same as the set of languages supported in the app.
(https://github.com/mapswipe/mapswipe/blob/master/src/shared/constants.js)

Changes in Manager Dashboard

• User can export the translation for a particular tutorial for multiple languages.
• User can import the translation for a particular tutorial for multiple languages.
• User can see the translation status of the tutorial.

The format for the import/export for a tutorial is detailed below:

tutorial-id	source-key	source-string	cs	da	de	eo	et	en	es	fa-AF	fr	it	hu	ja	ne	nl	pt	ru	sw	zh
tutorial_-N_I7142vmwv8Z2ABANW	customOptions:0:description	the shape does outline a building in the image
tutorial_-N_I7142vmwv8Z2ABANW	customOptions:0:title	Yes
tutorial_-N_I7142vmwv8Z2ABANW	customOptions:1:description	the shape doesn't match a building in the image
tutorial_-N_I7142vmwv8Z2ABANW	customOptions:1:title	No
tutorial_-N_I7142vmwv8Z2ABANW	customOptions:2:description	if you're not sure or there is cloud cover / bad imagery
tutorial_-N_I7142vmwv8Z2ABANW	customOptions:2:title	Not Sure
tutorial_-N_I7142vmwv8Z2ABANW	customOptions:2:subOptions:0:description	Hidden beneath clouds
tutorial_-N_I7142vmwv8Z2ABANW	customOptions:2:subOptions:1:description	Blurry image
tutorial_-N_I7142vmwv8Z2ABANW	informationPages:0:blocks:0:textDescription	This is how a collapsed bridge potentially would look like from the satellite imagery
tutorial_-N_I7142vmwv8Z2ABANW	informationPages:0:title	Collapsed bridge
tutorial_-N_I7142vmwv8Z2ABANW	lookFor	Collapsed bridge
tutorial_-N_I7142vmwv8Z2ABANW	name	Footprint type tutorial for testing
tutorial_-N_I7142vmwv8Z2ABANW	projectDetails	This is a tutorial
tutorial_-N_I7142vmwv8Z2ABANW	screens:0:instructions:description	The shape does match a bridge and its also collapsed. Tap the Check icon (green one) to answer yes
tutorial_-N_I7142vmwv8Z2ABANW	screens:0:instructions:title	Does it outline a bridge?

Similarly, we can also support translation of project.

Note:

• Approval process not required for the translations.
• Manager should also verify the length of the translated strings.

Changes in Firebase

• We store the translations separately from the tutorial.
• The key for the translation should be translations/tutorial/<tutorial_id>/<language_code>

The structure for the translations is similar to the structure of the tutorial

Structure of tutorial

{
  "customOptions": [
    {
      "description": "the shape does outline a building in the image",
      "icon": "check",
      "iconColor": "green",
      "title": "Yes",
      "value": 1
    },
    {
      "description": "the shape doesn't match a building in the image",
      "icon": "close-outline",
      "iconColor": "red",
      "title": "No",
      "value": 0
    },
    {
      "description": "if you're not sure or there is cloud cover / bad imagery",
      "icon": "remove-outline",
      "iconColor": "orange",
      "subOptions": [
        {
          "description": "Hidden beneath clouds",
          "value": 3
        },
        {
          "description": "Blurry image",
          "value": 4
        }
      ],
      "title": "Not Sure",
      "value": 2
    }
  ],
  "informationPages": [
    {
      "blocks": [
        {
          "blockNumber": 1,
          "blockType": "text",
          "textDescription": "This is how a collapsed bridge potentially would look like from the satellite imagery"
        },
        {
          "blockNumber": 2,
          "blockType": "image",
          "image": "https://firebasestorage.googleapis.com/v0/b/dev-mapswipe.appspot.com/o/tutorialImages%2F1689316759614-block-image-2-1.png?alt=media&token=1234a271-5a2a-4dff-a2ec-119eba135ee8"
        }
      ],
      "pageNumber": 1,
      "title": "Collapsed bridge"
    }
  ],
  "inputGeometries": "/root/.local/share/mapswipe_workers/input_geometries/valid_input_tutorial_-N_I7142vmwv8Z2ABANW.geojson",
  "lookFor": "Collapsed bridge",
  "name": "Footprint type tutorial for testing",
  "progress": 0,
  "projectDetails": "This is a tutorial",
  "projectId": "tutorial_-N_I7142vmwv8Z2ABANW",
  "projectType": 2,
  "screens": [
    {
      "instructions": {
        "description": "The shape does match a bridge and its also collapsed. Tap the Check icon (green one) to answer yes",
        "icon": "tap",
        "title": "Does it outline a bridge?"
      }
    }
  ],
  "status": "tutorial",
  "tileServer": {
    "apiKey": "",
    "credits": "© 2019 ESRI",
    "name": "esri",
    "url": "https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
  },
  "tutorialDraftId": "-N_I7142vmwv8Z2ABANW",
  "zoomLevel": 18
}

Structure of translations for tutorial

{
  "customOptions": [
    {
      "description": "the shape does outline a building in the image",
      "title": "Yes",
    },
    {
      "description": "the shape doesn't match a building in the image",
      "title": "No",
    },
    {
      "description": "if you're not sure or there is cloud cover / bad imagery",
      "subOptions": [
        {
          "description": "Hidden beneath clouds",
        },
        {
          "description": "Blurry image",
        }
      ],
      "title": "Not Sure",
    }
  ],
  "informationPages": [
    {
      "blocks": [
        {
          "textDescription": "This is how a collapsed bridge potentially would look like from the satellite imagery"
        },
        { }
      ],
      "title": "Collapsed bridge"
    }
  ],
  "lookFor": "Collapsed bridge",
  "name": "Footprint type tutorial for testing",
  "projectDetails": "This is a tutorial",
  "screens": [
    {
      "instructions": {
        "description": "The shape does match a bridge and its also collapsed. Tap the Check icon (green one) to answer yes",
        "title": "Does it outline a bridge?"
      }
    }
  ],
}

Changes in App

• We additionally fetch the translation of the tutorial for the selected language
• We will then merge the translations with the tutorial
• If the translation is not available, then the default strings is used.

Changes in Website

To show the translated content of the project in the project page, we will also require changes to the database and the api server.