Improve multi-language input user experience

[paninee]

Participedia.net currently supports multi-language translation of user entered text in multiple language. However this current flow is confusing, and the user does not have a choice to publish multiple languages on the first publish.

Errors occur when users enter text in a language that differs from the language selector in the site header. We assume these errors are occurring because it is unclear that the drop-down language selector controls both the “display language” (the site content is displayed in) as well as the “entry language” (the language key assigned to each new entry in the database). Multilingual users may be used to the Facebook or Twitter paradigm of entering text in a language different from the display language.

As the first step to this project, we propose to update the UI in the entry form to include tabs for each language version across the top, to allow for simultaneous editing across languages. We can later build on this new UI to address multi-language synching, allowing translations to be run again, after first publish, without overwriting user-entered text edits made in other language versions.

• [x] Add tabbar at the top of the Create Entry page, both quick submission and full submission.
• [x] Make sure this tabbar appears at the top of every type of entry: case, method, organization and collection.
• [x] When the user switches between each language tab, they can fill the content in another language according to the language they selected.
• [x] Once the user tries to save, we have to validate all of the required fields on the form in every single language. If the user fills in all of the required fields in a specific language, we save that input in the database according to the language they put in.
• [x] If a form in any language is totally blank, the backend will auto-generate its content as we do today.
• [x] If a form in any language is partially filled and invalid (missing required field), display an error telling the user they're missing the fields.
• [x] The dropdown values and the generated pre-filled Narrative need to be shown in the language the user selected from the tabbar.
• [x] When a user edits an entry, we should show this same functionality. Except that we won't auto-translate again. We update whatever the new data the user fills in according to the languages.

[plscully]

@paninee Thank you for thinking this through so thoroughly. I hope we can make room for this at or near the top of our to do list.

[jesicarson]

@plscully yep its happening now! Pan and I discussed and bumped it up to the top to the queue, as we are seeing continued confusion with the existing system.

[jesicarson]

@paninee I am wondering about adding a bit of explanatory text along with the tabs. Text could be something like: "You may edit this entry in the following languages. To change the website display language, use the language selector located beside the search bar above."

[jesicarson]

@paninee

[jesicarson]

Edit this entry in multiple languages using these tabs (To change the website display language, use the drop down menu at the top of the site)

[jesicarson]

[jesicarson]

Add link “do you know another language?” which opens language drop down. If another language is selected they get a blank field. (option to later add a "translate or populate button TBC)

On publish - need to check for text entered in languages other than main language for each field.

[jesicarson]

Click the "Do you know another language?" link, but if no text entered in displ lang entered the drop down is greyed out / not clickable + note appears to enter disp lang first:

"Once you enter text in [ disp lang ] you can add other languages."

• info icon text only shows for NEW entries: Any language that is not entered will be machine translated from [ disp lang ].

[paninee]

@jesicarson ready to be tested on stage http://ppedia-stage.herokuapp.com/case/new?full=1

[jesicarson]

@paninee tested and identified one thing that seems like a bug. i submitted usersnaps.