Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-11T20:45:03Z

Hmukhta: /* Adding Multi-Language Support */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
*** _publishing_rights.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many students are from other countries. So, we aimed to allow them to view their pages in another language. This is done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown. We focused on adding the Hindi language as a lot of students are Indian.

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* [[File: Internationalization Navigation dropdown 2.JPG]]
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** [[File:Internationalization Route rb 2.JPG]]
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* <code>student_task</code> is the folder under views: <code>views/student_task</code>
* list is the name of the html page: <code>view/student_task/list.html.erb</code>
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

*
----------------------------
* Student Views were translated as shown below:
** Regular Static Strings
*** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace "Assignment", with <code><%=t ".key_name" %></code>
*** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
*** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
*** This is how you would change the strings for an html page.
** Static strings for buttons, dropdowns, etc.
*** You can also translate static string field values that you would find in buttons, dropdowns, etc. When you change these types of strings, you need slightly different code to translate it.
*** Example: <code><%= submit_tag 'Save' %> </code>. You would replace 'Save' with <code>t('.key_name')</code>.
*** It would now look like this <code> <%= submit_tag t('.key_name') %></code>
** Other Info
*** Because the <code>.yml</code> know what view folders to look in when choosing the keys, when you type . for the key_namefor the translation code (shown above), it will show the list of keys available for the html page you are in, at least in RubyMine.
*** Reference keys in other html files (Look at below code for example)
**** You can reference keys under from another html file within the same sub view folder.
***** For example, you can reference the key <code>select_assignment</code> from the <code>view/student_task/view.html.erb</code> in <code>view/student_task/list.html.erb</code> by doing <code><%=t ".view.select_assignment" %></code> for a static string in <code>view/student_task/list.html.erb</code>
**** You can reference keys from another html file in a different sub view folder
***** For example, you can reference the key <code>sign_up</code> from <code>view/publishing/view.html.erb</code> in <code>view/student_task/list.html.erb</code> from by doing <code><%=t ".publishing.view.sign_up" %></code> for a static string in <code>view/student_task/list.html.erb</code>
**** By referencing keys not in the html file you are working on, you can reduce duplicate key names.

<code>
en:
student_task
list:
assignment: "Assignment"
view:
select_assignment: "Select Assignment"
publishing
view:
sign_up: "Sign Up"
</code>

===Example Output===

====Original Page====
[[File:Internationalization ssignment main page.JPG]]

====Translated Page====

[[File:Internationalization assignment main translated page.JPG]]

===Test Plan===

====Student Credentials====
username: student1016 or student[4000-8000]

password: password

====Before Testing====

* When going between pages, use the Back button link located on the bottom of pages, not on the browser
* When going to the main Assignment page, use the Back button link to get there to test out the scenarios below, not the link in the navigation bar.

====Scenario 1====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

6. Go back to the main Assignment page and choose English from the dropdown.

7. See if the language was changed in the URL to en.

8. See if the strings are translated back to English for all Assignment related pages.

====Scenario 3====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

5. Now change the language back from hi_IN to en in the URL.

6. See if the Hindi strings are translated back to English for all Assignment related pages.

==Future Work==

Due to time, there were some things we weren't able to fix or work on.
* Problems:
** When a student goes back to the main Assignment page, views/student_task/list, by clicking the link in the navigation bar, the language locale doesn't appear in the URL. This means that if you did change the language from the dropdown or manually, it will go back to the default locale language. See the URL below:
*** [[File:Internationalization assignment link langauge error.JPG]]
** If you try to use the language dropdown in a page other than the main Assignment page, it will give an error like the one shown below:
*** [[File:Internationalization langauge dropdown error.JPG]]
** But if you manually change the language in the URL, it works fine and persists as you navigate through the pages.
* Feature:
** Having a translation only show up for the user who changes it and not in the entire system.
** We also have translated keys for many course pages, but did not implement the actual translation code in the view files for them. You should be able to look at the keys to find out which view files they are.
** Adding translation for Chinese.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video: https://youtu.be/TA9PkcK61QM

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-11T20:34:00Z

Hmukhta: /* Adding Multi-Language Support */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
*** _publishing_rights.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many students are from other countries. So, we aimed to allow them to view their pages in another language. This is done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown. We focused on adding the Hindi language as a lot of students are Indian.

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* [[File: Internationalization Navigation dropdown 2.JPG]]
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** [[File:Internationalization Route rb 2.JPG]]
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* <code>student_task</code> is the folder under views: <code>views/student_task</code>
* list is the name of the html page: <code>view/student_task/list.html.erb</code>
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

*
----------------------------
* Student Views were translated as shown below:
** Regular Static Strings
*** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace "Assignment", with <code><%=t ".keyName" %></code>
*** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
*** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
*** This is how you would change the strings for an html page.
** Static strings for buttons, dropdowns, etc.
*** You can also translate static string field values that you would find in buttons, dropdowns, etc. When you change these types of strings, you need slightly different code to translate it.
*** Example: <code><%= submit_tag 'Save' %> </code>. You would replace 'Save' with <code>t('.key_name')</code>.
*** It would now look like this <code> <%= submit_tag t('.key_name') %></code>
** Other Info

<code>
en:
student_task
list:
assignment: "Assignment"
view:
select_assignment: "Select Assignment"
publishing
view:
sign_up: "Sign Up"
</code>
** Reference keys in other html files
*** You can also reference keys under from another html files within the same sub view folder.
**** For example, in student_task folder, you can reference the key select_assignment from the view.html.erb in list.html.erb by doing <code><%=t ".view.select_assignment" %></code> for a static string in list.html.erb
*** You can reference keys from another html files in another sub view folder
**** For example, you can reference the key sign_up from the view.html.erb in view/publishing in list.html.erb from view/student_task by doing <code><%=t ".publishing.view.sign_up" %></code> for a static string in list.html.erb

===Example Output===

====Original Page====
[[File:Internationalization ssignment main page.JPG]]

====Translated Page====

[[File:Internationalization assignment main translated page.JPG]]

===Test Plan===

====Student Credentials====
username: student1016 or student[4000-8000]

password: password

====Before Testing====

* When going between pages, use the Back button link located on the bottom of pages, not on the browser
* When going to the main Assignment page, use the Back button link to get there to test out the scenarios below, not the link in the navigation bar.

====Scenario 1====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

6. Go back to the main Assignment page and choose English from the dropdown.

7. See if the language was changed in the URL to en.

8. See if the strings are translated back to English for all Assignment related pages.

====Scenario 3====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

5. Now change the language back from hi_IN to en in the URL.

6. See if the Hindi strings are translated back to English for all Assignment related pages.

==Future Work==

Due to time, there were some things we weren't able to fix or work on.
* Problems:
** When a student goes back to the main Assignment page, views/student_task/list, by clicking the link in the navigation bar, the language locale doesn't appear in the URL. This means that if you did change the language from the dropdown or manually, it will go back to the default locale language. See the URL below:
*** [[File:Internationalization assignment link langauge error.JPG]]
** If you try to use the language dropdown in a page other than the main Assignment page, it will give an error like the one shown below:
*** [[File:Internationalization langauge dropdown error.JPG]]
** But if you manually change the language in the URL, it works fine and persists as you navigate through the pages.
* Feature:
** Having a translation only show up for the user who changes it and not in the entire system.
** We also have translated keys for many course pages, but did not implement the actual translation code in the view files for them. You should be able to look at the keys to find out which view files they are.
** Adding translation for Chinese.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video: https://youtu.be/TA9PkcK61QM

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-06T20:25:00Z

Hmukhta: /* Future Work */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
*** _publishing_rights.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many students are from other countries. So, we aimed to allow them to view their pages in another language. This is done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown. We focused on adding the Hindi language as a lot of students are Indian.

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* [[File: Internationalization Navigation dropdown 2.JPG]]
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** [[File:Internationalization Route rb 2.JPG]]
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Regular Static Strings
*** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace "Assignment", with <code><%=t ".keyName" %></code>
*** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
*** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
*** This is how you would change the strings for an html page.
** Static strings for buttons, dropdowns, etc.
*** You can also translate static string field values that you would find in buttons, dropdowns, etc. When you change these types of strings, you need slightly different code to translate it.
*** Example: <code><%= submit_tag 'Save' %> </code>. You would replace 'Save' with <code>t('.key_name')</code>.
*** It would now look like this <code> <%= submit_tag t('.key_name') %></code>

===Example Output===

====Original Page====
[[File:Internationalization ssignment main page.JPG]]

====Translated Page====

[[File:Internationalization assignment main translated page.JPG]]

===Test Plan===

====Student Credentials====
username: student1016 or student[4000-8000]

password: password

====Before Testing====

* When going between pages, use the Back button link located on the bottom of pages, not on the browser
* When going to the main Assignment page, use the Back button link to get there to test out the scenarios below, not the link in the navigation bar.

====Scenario 1====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

6. Go back to the main Assignment page and choose English from the dropdown.

7. See if the language was changed in the URL to en.

8. See if the strings are translated back to English for all Assignment related pages.

====Scenario 3====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

5. Now change the language back from hi_IN to en in the URL.

6. See if the Hindi strings are translated back to English for all Assignment related pages.

==Future Work==

Due to time, there were some things we weren't able to fix or work on.
* Problems:
** When a student goes back to the main Assignment page, views/student_task/list, by clicking the link in the navigation bar, the language locale doesn't appear in the URL. This means that if you did change the language from the dropdown or manually, it will go back to the default locale language. See the URL below:
*** [[File:Internationalization assignment link langauge error.JPG]]
** If you try to use the language dropdown in a page other than the main Assignment page, it will give an error like the one shown below:
*** [[File:Internationalization langauge dropdown error.JPG]]
** But if you manually change the language in the URL, it works fine and persists as you navigate through the pages.
* Feature:
** Having a translation only show up for the user who changes it and not in the entire system.
** We also have translated keys for many course pages, but did not implement the actual translation code in the view files for them. You should be able to look at the keys to find out which view files they are.
** Adding translation for Chinese.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-06T20:18:13Z

Hmukhta: /* Project Description */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
*** _publishing_rights.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many students are from other countries. So, we aimed to allow them to view their pages in another language. This is done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown. We focused on adding the Hindi language as a lot of students are Indian.

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* [[File: Internationalization Navigation dropdown 2.JPG]]
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** [[File:Internationalization Route rb 2.JPG]]
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Regular Static Strings
*** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace "Assignment", with <code><%=t ".keyName" %></code>
*** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
*** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
*** This is how you would change the strings for an html page.
** Static strings for buttons, dropdowns, etc.
*** You can also translate static string field values that you would find in buttons, dropdowns, etc. When you change these types of strings, you need slightly different code to translate it.
*** Example: <code><%= submit_tag 'Save' %> </code>. You would replace 'Save' with <code>t('.key_name')</code>.
*** It would now look like this <code> <%= submit_tag t('.key_name') %></code>

===Example Output===

====Original Page====
[[File:Internationalization ssignment main page.JPG]]

====Translated Page====

[[File:Internationalization assignment main translated page.JPG]]

===Test Plan===

====Student Credentials====
username: student1016 or student[4000-8000]

password: password

====Before Testing====

* When going between pages, use the Back button link located on the bottom of pages, not on the browser
* When going to the main Assignment page, use the Back button link to get there to test out the scenarios below, not the link in the navigation bar.

====Scenario 1====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

6. Go back to the main Assignment page and choose English from the dropdown.

7. See if the language was changed in the URL to en.

8. See if the strings are translated back to English for all Assignment related pages.

====Scenario 3====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

5. Now change the language back from hi_IN to en in the URL.

6. See if the Hindi strings are translated back to English for all Assignment related pages.

==Future Work==

Due to time, there were some things we weren't able to fix or work on.
* Problems:
** When a student goes back to the main Assignment page, views/student_task/list, the language locale doesn't appear in the URL. This means that if you did change the language from the dropdown or manually, clicking the Assignment link in the navigation bar will go back to the default locale language.
*** [[File:Internationalization assignment link langauge error.JPG]]
** If you try to use the language dropdown in a page other than the main Assignment page, it will give an error like the one shown below:
*** [[File:Internationalization langauge dropdown error.JPG]]
** But if you manually change the language in the URL, it works fine and persists as you navigate through the pages.
* Feature:
** Having a translation only show up for the user who changes it and not in the entire system.
** We also have translated keys for many course pages, but did not implement the actual translation code in the view files for them. You should be able to look at the keys to find out which view files they are.
** Adding translation for Chinese.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-06T20:16:41Z

Hmukhta: /* Future Work */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
*** _publishing_rights.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many Expertiza users are from other countries. So, we aimed to allow students to view their pages in another language. This is done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown..

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* [[File: Internationalization Navigation dropdown 2.JPG]]
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** [[File:Internationalization Route rb 2.JPG]]
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Regular Static Strings
*** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace "Assignment", with <code><%=t ".keyName" %></code>
*** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
*** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
*** This is how you would change the strings for an html page.
** Static strings for buttons, dropdowns, etc.
*** You can also translate static string field values that you would find in buttons, dropdowns, etc. When you change these types of strings, you need slightly different code to translate it.
*** Example: <code><%= submit_tag 'Save' %> </code>. You would replace 'Save' with <code>t('.key_name')</code>.
*** It would now look like this <code> <%= submit_tag t('.key_name') %></code>

===Example Output===

====Original Page====
[[File:Internationalization ssignment main page.JPG]]

====Translated Page====

[[File:Internationalization assignment main translated page.JPG]]

===Test Plan===

====Student Credentials====
username: student1016 or student[4000-8000]

password: password

====Before Testing====

* When going between pages, use the Back button link located on the bottom of pages, not on the browser
* When going to the main Assignment page, use the Back button link to get there to test out the scenarios below, not the link in the navigation bar.

====Scenario 1====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

6. Go back to the main Assignment page and choose English from the dropdown.

7. See if the language was changed in the URL to en.

8. See if the strings are translated back to English for all Assignment related pages.

====Scenario 3====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

5. Now change the language back from hi_IN to en in the URL.

6. See if the Hindi strings are translated back to English for all Assignment related pages.

==Future Work==

Due to time, there were some things we weren't able to fix or work on.
* Problems:
** When a student goes back to the main Assignment page, views/student_task/list, the language locale doesn't appear in the URL. This means that if you did change the language from the dropdown or manually, clicking the Assignment link in the navigation bar will go back to the default locale language.
*** [[File:Internationalization assignment link langauge error.JPG]]
** If you try to use the language dropdown in a page other than the main Assignment page, it will give an error like the one shown below:
*** [[File:Internationalization langauge dropdown error.JPG]]
** But if you manually change the language in the URL, it works fine and persists as you navigate through the pages.
* Feature:
** Having a translation only show up for the user who changes it and not in the entire system.
** We also have translated keys for many course pages, but did not implement the actual translation code in the view files for them. You should be able to look at the keys to find out which view files they are.
** Adding translation for Chinese.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-06T20:15:27Z

Hmukhta: /* Project Description */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
*** _publishing_rights.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many Expertiza users are from other countries. So, we aimed to allow students to view their pages in another language. This is done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown..

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* [[File: Internationalization Navigation dropdown 2.JPG]]
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** [[File:Internationalization Route rb 2.JPG]]
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Regular Static Strings
*** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace "Assignment", with <code><%=t ".keyName" %></code>
*** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
*** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
*** This is how you would change the strings for an html page.
** Static strings for buttons, dropdowns, etc.
*** You can also translate static string field values that you would find in buttons, dropdowns, etc. When you change these types of strings, you need slightly different code to translate it.
*** Example: <code><%= submit_tag 'Save' %> </code>. You would replace 'Save' with <code>t('.key_name')</code>.
*** It would now look like this <code> <%= submit_tag t('.key_name') %></code>

===Example Output===

====Original Page====
[[File:Internationalization ssignment main page.JPG]]

====Translated Page====

[[File:Internationalization assignment main translated page.JPG]]

===Test Plan===

====Student Credentials====
username: student1016 or student[4000-8000]

password: password

====Before Testing====

* When going between pages, use the Back button link located on the bottom of pages, not on the browser
* When going to the main Assignment page, use the Back button link to get there to test out the scenarios below, not the link in the navigation bar.

====Scenario 1====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

6. Go back to the main Assignment page and choose English from the dropdown.

7. See if the language was changed in the URL to en.

8. See if the strings are translated back to English for all Assignment related pages.

====Scenario 3====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

5. Now change the language back from hi_IN to en in the URL.

6. See if the Hindi strings are translated back to English for all Assignment related pages.

==Future Work==

Due to time, there were some things we weren't able to fix or work on.
* Problems:
** When a student goes back to the main Assignment page, views/student_task/list, the language locale doesn't appear in the URL. This means that if you did change the language from the dropdown or manually, clicking the Assignment link in the navigation bar will go back to the default locale language.
*** [[File:Internationalization assignment link langauge error.JPG]]
** If you try to use the language dropdown in a page other than the main Assignment page, it will give an error like the one shown below:
*** [[File:Internationalization langauge dropdown error.JPG]]
** But if you manually change the language in the URL, it works fine and persists as you navigate through the pages.
* Feature:
** Having a translation only show up for the user who changes it and not in the entire system.
** We also have translated keys for many course pages, but did not implement the actual translation code in the view files for them. You should be able to look at the keys to find out which view files they are.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-06T19:36:14Z

Hmukhta: /* Before Testing */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
*** _publishing_rights.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many Expertiza users are from other countries. We aimed to allow students to view their pages in another language. This ase done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown..

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* [[File: Internationalization Navigation dropdown 2.JPG]]
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** [[File:Internationalization Route rb 2.JPG]]
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Regular Static Strings
*** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace "Assignment", with <code><%=t ".keyName" %></code>
*** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
*** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
*** This is how you would change the strings for an html page.
** Static strings for buttons, dropdowns, etc.
*** You can also translate static string field values that you would find in buttons, dropdowns, etc. When you change these types of strings, you need slightly different code to translate it.
*** Example: <code><%= submit_tag 'Save' %> </code>. You would replace 'Save' with <code>t('.key_name')</code>.
*** It would now look like this <code> <%= submit_tag t('.key_name') %></code>

===Example Output===

====Original Page====
[[File:Internationalization ssignment main page.JPG]]

====Translated Page====

[[File:Internationalization assignment main translated page.JPG]]

===Test Plan===

====Student Credentials====
username: student1016 or student[4000-8000]

password: password

====Before Testing====

* When going between pages, use the Back button link located on the bottom of pages, not on the browser
* When going to the main Assignment page, use the Back button link to get there to test out the scenarios below, not the link in the navigation bar.

====Scenario 1====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

6. Go back to the main Assignment page and choose English from the dropdown.

7. See if the language was changed in the URL to en.

8. See if the strings are translated back to English for all Assignment related pages.

====Scenario 3====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

5. Now change the language back from hi_IN to en in the URL.

6. See if the Hindi strings are translated back to English for all Assignment related pages.

==Future Work==

Due to time, there were some things we weren't able to fix or work on.
* Problems:
** When a student goes back to the main Assignment page, views/student_task/list, the language locale doesn't appear in the URL. This means that if you did change the language from the dropdown or manually, clicking the Assignment link in the navigation bar will go back to the default locale language.
*** [[File:Internationalization assignment link langauge error.JPG]]
** If you try to use the language dropdown in a page other than the main Assignment page, it will give an error like the one shown below:
*** [[File:Internationalization langauge dropdown error.JPG]]
** But if you manually change the language in the URL, it works fine and persists as you navigate through the pages.
* Feature:
** Having a translation only show up for the user who changes it and not in the entire system.
** We also have translated keys for many course pages, but did not implement the actual translation code in the view files for them. You should be able to look at the keys to find out which view files they are.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-06T19:17:20Z

Hmukhta: /* Relevant Files */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
*** _publishing_rights.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many Expertiza users are from other countries. We aimed to allow students to view their pages in another language. This ase done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown..

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* [[File: Internationalization Navigation dropdown 2.JPG]]
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** [[File:Internationalization Route rb 2.JPG]]
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Regular Static Strings
*** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace "Assignment", with <code><%=t ".keyName" %></code>
*** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
*** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
*** This is how you would change the strings for an html page.
** Static strings for buttons, dropdowns, etc.
*** You can also translate static string field values that you would find in buttons, dropdowns, etc. When you change these types of strings, you need slightly different code to translate it.
*** Example: <code><%= submit_tag 'Save' %> </code>. You would replace 'Save' with <code>t('.key_name')</code>.
*** It would now look like this <code> <%= submit_tag t('.key_name') %></code>

===Example Output===

====Original Page====
[[File:Internationalization ssignment main page.JPG]]

====Translated Page====

[[File:Internationalization assignment main translated page.JPG]]

===Test Plan===

====Student Credentials====
username: student1016 or student[4000-8000]

password: password

====Before Testing====

* When going between pages, use the Back button link located on the bottom of pages
* When going to the main Assignment page, use the Back button link to get there to test out the scenarios below

====Scenario 1====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

6. Go back to the main Assignment page and choose English from the dropdown.

7. See if the language was changed in the URL to en.

8. See if the strings are translated back to English for all Assignment related pages.

====Scenario 3====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

5. Now change the language back from hi_IN to en in the URL.

6. See if the Hindi strings are translated back to English for all Assignment related pages.

==Future Work==

Due to time, there were some things we weren't able to fix or work on.
* Problems:
** When a student goes back to the main Assignment page, views/student_task/list, the language locale doesn't appear in the URL. This means that if you did change the language from the dropdown or manually, clicking the Assignment link in the navigation bar will go back to the default locale language.
*** [[File:Internationalization assignment link langauge error.JPG]]
** If you try to use the language dropdown in a page other than the main Assignment page, it will give an error like the one shown below:
*** [[File:Internationalization langauge dropdown error.JPG]]
** But if you manually change the language in the URL, it works fine and persists as you navigate through the pages.
* Feature:
** Having a translation only show up for the user who changes it and not in the entire system.
** We also have translated keys for many course pages, but did not implement the actual translation code in the view files for them. You should be able to look at the keys to find out which view files they are.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-06T19:16:32Z

Hmukhta: /* Future Work */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many Expertiza users are from other countries. We aimed to allow students to view their pages in another language. This ase done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown..

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* [[File: Internationalization Navigation dropdown 2.JPG]]
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** [[File:Internationalization Route rb 2.JPG]]
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Regular Static Strings
*** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace "Assignment", with <code><%=t ".keyName" %></code>
*** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
*** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
*** This is how you would change the strings for an html page.
** Static strings for buttons, dropdowns, etc.
*** You can also translate static string field values that you would find in buttons, dropdowns, etc. When you change these types of strings, you need slightly different code to translate it.
*** Example: <code><%= submit_tag 'Save' %> </code>. You would replace 'Save' with <code>t('.key_name')</code>.
*** It would now look like this <code> <%= submit_tag t('.key_name') %></code>

===Example Output===

====Original Page====
[[File:Internationalization ssignment main page.JPG]]

====Translated Page====

[[File:Internationalization assignment main translated page.JPG]]

===Test Plan===

====Student Credentials====
username: student1016 or student[4000-8000]

password: password

====Before Testing====

* When going between pages, use the Back button link located on the bottom of pages
* When going to the main Assignment page, use the Back button link to get there to test out the scenarios below

====Scenario 1====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

6. Go back to the main Assignment page and choose English from the dropdown.

7. See if the language was changed in the URL to en.

8. See if the strings are translated back to English for all Assignment related pages.

====Scenario 3====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

5. Now change the language back from hi_IN to en in the URL.

6. See if the Hindi strings are translated back to English for all Assignment related pages.

==Future Work==

Due to time, there were some things we weren't able to fix or work on.
* Problems:
** When a student goes back to the main Assignment page, views/student_task/list, the language locale doesn't appear in the URL. This means that if you did change the language from the dropdown or manually, clicking the Assignment link in the navigation bar will go back to the default locale language.
*** [[File:Internationalization assignment link langauge error.JPG]]
** If you try to use the language dropdown in a page other than the main Assignment page, it will give an error like the one shown below:
*** [[File:Internationalization langauge dropdown error.JPG]]
** But if you manually change the language in the URL, it works fine and persists as you navigate through the pages.
* Feature:
** Having a translation only show up for the user who changes it and not in the entire system.
** We also have translated keys for many course pages, but did not implement the actual translation code in the view files for them. You should be able to look at the keys to find out which view files they are.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-06T19:14:45Z

Hmukhta: /* Future Work */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many Expertiza users are from other countries. We aimed to allow students to view their pages in another language. This ase done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown..

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* [[File: Internationalization Navigation dropdown 2.JPG]]
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** [[File:Internationalization Route rb 2.JPG]]
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Regular Static Strings
*** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace "Assignment", with <code><%=t ".keyName" %></code>
*** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
*** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
*** This is how you would change the strings for an html page.
** Static strings for buttons, dropdowns, etc.
*** You can also translate static string field values that you would find in buttons, dropdowns, etc. When you change these types of strings, you need slightly different code to translate it.
*** Example: <code><%= submit_tag 'Save' %> </code>. You would replace 'Save' with <code>t('.key_name')</code>.
*** It would now look like this <code> <%= submit_tag t('.key_name') %></code>

===Example Output===

====Original Page====
[[File:Internationalization ssignment main page.JPG]]

====Translated Page====

[[File:Internationalization assignment main translated page.JPG]]

===Test Plan===

====Student Credentials====
username: student1016 or student[4000-8000]

password: password

====Before Testing====

* When going between pages, use the Back button link located on the bottom of pages
* When going to the main Assignment page, use the Back button link to get there to test out the scenarios below

====Scenario 1====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

6. Go back to the main Assignment page and choose English from the dropdown.

7. See if the language was changed in the URL to en.

8. See if the strings are translated back to English for all Assignment related pages.

====Scenario 3====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

5. Now change the language back from hi_IN to en in the URL.

6. See if the Hindi strings are translated back to English for all Assignment related pages.

==Future Work==

Due to time, there were some things we weren't able to fix or work on.
* Problems:
** When a student goes back to the main Assignment page, views/student_task/list, the language locale doesn't appear in the URL. This means that if you did change the language from the dropdown or manually, clicking the Assignment link in the navigation bar will go back to the default locale language.
*** [[File:Internationalization assignment link langauge error.JPG]]
** If you try to use the language dropdown in a page other than the main Assignment page, it will give an error like the one shown below:
*** [[File:Internationalization langauge dropdown error.JPG]]
** But if you manually change the language in the URL, it works fine and persists as you navigate through the pages.
* Feature:
** Having a translation only show up for the user who changes it and not in the entire system.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-06T19:13:46Z

Hmukhta: /* Future Work */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many Expertiza users are from other countries. We aimed to allow students to view their pages in another language. This ase done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown..

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* [[File: Internationalization Navigation dropdown 2.JPG]]
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** [[File:Internationalization Route rb 2.JPG]]
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Regular Static Strings
*** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace "Assignment", with <code><%=t ".keyName" %></code>
*** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
*** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
*** This is how you would change the strings for an html page.
** Static strings for buttons, dropdowns, etc.
*** You can also translate static string field values that you would find in buttons, dropdowns, etc. When you change these types of strings, you need slightly different code to translate it.
*** Example: <code><%= submit_tag 'Save' %> </code>. You would replace 'Save' with <code>t('.key_name')</code>.
*** It would now look like this <code> <%= submit_tag t('.key_name') %></code>

===Example Output===

====Original Page====
[[File:Internationalization ssignment main page.JPG]]

====Translated Page====

[[File:Internationalization assignment main translated page.JPG]]

===Test Plan===

====Student Credentials====
username: student1016 or student[4000-8000]

password: password

====Before Testing====

* When going between pages, use the Back button link located on the bottom of pages
* When going to the main Assignment page, use the Back button link to get there to test out the scenarios below

====Scenario 1====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

6. Go back to the main Assignment page and choose English from the dropdown.

7. See if the language was changed in the URL to en.

8. See if the strings are translated back to English for all Assignment related pages.

====Scenario 3====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

5. Now change the language back from hi_IN to en in the URL.

6. See if the Hindi strings are translated back to English for all Assignment related pages.

==Future Work==

Due to time, there were some things we weren't able to fix or work on.
* Problems:
** When a student goes back to the main Assignment page, views/student_task/list, the language locale doesn't appear in the URL. This means that if you did change the language from the dropdown or manually, clicking the Assignment link in the navigation bar will go back to the default locale language.
*** [[File:Internationalization langauge dropdown error.JPG]]
** If you try to use the language dropdown in a page other than the main Assignment page, it will give an error like the one shown below:
*** [[File:Internationalization assignment link langauge error.JPG]]
** But if you manually change the language in the URL, it works fine and persists as you navigate through the pages.
* Feature:
** Having a translation only show up for the user who changes it and not in the entire system.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

File:Internationalization assignment link langauge error.JPG

2018-12-06T19:13:29Z

Hmukhta: language goes away in URL when you click the assignment link

language goes away in URL when you click the assignment link

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-06T19:12:06Z

Hmukhta: /* Future Work */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many Expertiza users are from other countries. We aimed to allow students to view their pages in another language. This ase done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown..

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* [[File: Internationalization Navigation dropdown 2.JPG]]
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** [[File:Internationalization Route rb 2.JPG]]
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Regular Static Strings
*** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace "Assignment", with <code><%=t ".keyName" %></code>
*** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
*** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
*** This is how you would change the strings for an html page.
** Static strings for buttons, dropdowns, etc.
*** You can also translate static string field values that you would find in buttons, dropdowns, etc. When you change these types of strings, you need slightly different code to translate it.
*** Example: <code><%= submit_tag 'Save' %> </code>. You would replace 'Save' with <code>t('.key_name')</code>.
*** It would now look like this <code> <%= submit_tag t('.key_name') %></code>

===Example Output===

====Original Page====
[[File:Internationalization ssignment main page.JPG]]

====Translated Page====

[[File:Internationalization assignment main translated page.JPG]]

===Test Plan===

====Student Credentials====
username: student1016 or student[4000-8000]

password: password

====Before Testing====

* When going between pages, use the Back button link located on the bottom of pages
* When going to the main Assignment page, use the Back button link to get there to test out the scenarios below

====Scenario 1====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

6. Go back to the main Assignment page and choose English from the dropdown.

7. See if the language was changed in the URL to en.

8. See if the strings are translated back to English for all Assignment related pages.

====Scenario 3====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

5. Now change the language back from hi_IN to en in the URL.

6. See if the Hindi strings are translated back to English for all Assignment related pages.

==Future Work==

Due to time, there were some things we weren't able to fix or work on.
* Problems:
** When a student goes back to the main Assignment page, views/student_task/list, the language locale doesn't appear in the URL. This means that if you did change the language from the dropdown or manually, clicking the Assignment link in the navigation bar will go back to the default locale language.
*** [[File:Internationalization langauge dropdown error.JPG]]
** If you try to use the language dropdown in a page other than the main Assignment page, it will give an error like the one shown below:
*** image here
** But if you manually change the language in the URL, it works fine and persists as you navigate through the pages.
* Feature:
** Having a translation only show up for the user who changes it and not in the entire system.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

File:Internationalization langauge dropdown error.JPG

2018-12-06T19:11:43Z

Hmukhta: Error for when you change a language with a dropdown in page other than the main assignment page

Error for when you change a language with a dropdown in page other than the main assignment page

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-06T19:09:23Z

Hmukhta: /* Original Page */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many Expertiza users are from other countries. We aimed to allow students to view their pages in another language. This ase done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown..

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* [[File: Internationalization Navigation dropdown 2.JPG]]
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** [[File:Internationalization Route rb 2.JPG]]
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Regular Static Strings
*** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace "Assignment", with <code><%=t ".keyName" %></code>
*** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
*** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
*** This is how you would change the strings for an html page.
** Static strings for buttons, dropdowns, etc.
*** You can also translate static string field values that you would find in buttons, dropdowns, etc. When you change these types of strings, you need slightly different code to translate it.
*** Example: <code><%= submit_tag 'Save' %> </code>. You would replace 'Save' with <code>t('.key_name')</code>.
*** It would now look like this <code> <%= submit_tag t('.key_name') %></code>

===Example Output===

====Original Page====
[[File:Internationalization ssignment main page.JPG]]

====Translated Page====

[[File:Internationalization assignment main translated page.JPG]]

===Test Plan===

====Student Credentials====
username: student1016 or student[4000-8000]

password: password

====Before Testing====

* When going between pages, use the Back button link located on the bottom of pages
* When going to the main Assignment page, use the Back button link to get there to test out the scenarios below

====Scenario 1====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

6. Go back to the main Assignment page and choose English from the dropdown.

7. See if the language was changed in the URL to en.

8. See if the strings are translated back to English for all Assignment related pages.

====Scenario 3====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

5. Now change the language back from hi_IN to en in the URL.

6. See if the Hindi strings are translated back to English for all Assignment related pages.

==Future Work==

Due to time, there were some things we weren't able to fix or work on.
* Problems:
** When a student goes back to the main Assignment page, views/student_task/list, the language locale doesn't appear in the URL. This means that if you did change the language from the dropdown or manually, clicking the Assignment link in the navigation bar will go back to the default locale language.
*** image here
** If you try to use the language dropdown in a page other than the main Assignment page, it will give an error like the one shown below:
*** image here
** But if you manually change the language in the URL, it works fine and persists as you navigate through the pages.
* Feature:
** Having a translation only show up for the user who changes it and not in the entire system.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-06T19:08:21Z

Hmukhta: /* Translated Page */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many Expertiza users are from other countries. We aimed to allow students to view their pages in another language. This ase done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown..

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* [[File: Internationalization Navigation dropdown 2.JPG]]
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** [[File:Internationalization Route rb 2.JPG]]
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Regular Static Strings
*** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace "Assignment", with <code><%=t ".keyName" %></code>
*** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
*** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
*** This is how you would change the strings for an html page.
** Static strings for buttons, dropdowns, etc.
*** You can also translate static string field values that you would find in buttons, dropdowns, etc. When you change these types of strings, you need slightly different code to translate it.
*** Example: <code><%= submit_tag 'Save' %> </code>. You would replace 'Save' with <code>t('.key_name')</code>.
*** It would now look like this <code> <%= submit_tag t('.key_name') %></code>

===Example Output===

====Original Page====
[[File:Internationalization assignment main page.JPG]]

====Translated Page====

[[File:Internationalization assignment main translated page.JPG]]

===Test Plan===

====Student Credentials====
username: student1016 or student[4000-8000]

password: password

====Before Testing====

* When going between pages, use the Back button link located on the bottom of pages
* When going to the main Assignment page, use the Back button link to get there to test out the scenarios below

====Scenario 1====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

6. Go back to the main Assignment page and choose English from the dropdown.

7. See if the language was changed in the URL to en.

8. See if the strings are translated back to English for all Assignment related pages.

====Scenario 3====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

5. Now change the language back from hi_IN to en in the URL.

6. See if the Hindi strings are translated back to English for all Assignment related pages.

==Future Work==

Due to time, there were some things we weren't able to fix or work on.
* Problems:
** When a student goes back to the main Assignment page, views/student_task/list, the language locale doesn't appear in the URL. This means that if you did change the language from the dropdown or manually, clicking the Assignment link in the navigation bar will go back to the default locale language.
*** image here
** If you try to use the language dropdown in a page other than the main Assignment page, it will give an error like the one shown below:
*** image here
** But if you manually change the language in the URL, it works fine and persists as you navigate through the pages.
* Feature:
** Having a translation only show up for the user who changes it and not in the entire system.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-06T19:08:08Z

Hmukhta: /* Original Page */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many Expertiza users are from other countries. We aimed to allow students to view their pages in another language. This ase done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown..

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* [[File: Internationalization Navigation dropdown 2.JPG]]
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** [[File:Internationalization Route rb 2.JPG]]
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Regular Static Strings
*** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace "Assignment", with <code><%=t ".keyName" %></code>
*** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
*** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
*** This is how you would change the strings for an html page.
** Static strings for buttons, dropdowns, etc.
*** You can also translate static string field values that you would find in buttons, dropdowns, etc. When you change these types of strings, you need slightly different code to translate it.
*** Example: <code><%= submit_tag 'Save' %> </code>. You would replace 'Save' with <code>t('.key_name')</code>.
*** It would now look like this <code> <%= submit_tag t('.key_name') %></code>

===Example Output===

====Original Page====
[[File:Internationalization assignment main page.JPG]]

====Translated Page====

[[File:Edit Course mock hi IN.PNG]]

===Test Plan===

====Student Credentials====
username: student1016 or student[4000-8000]

password: password

====Before Testing====

* When going between pages, use the Back button link located on the bottom of pages
* When going to the main Assignment page, use the Back button link to get there to test out the scenarios below

====Scenario 1====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

6. Go back to the main Assignment page and choose English from the dropdown.

7. See if the language was changed in the URL to en.

8. See if the strings are translated back to English for all Assignment related pages.

====Scenario 3====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

5. Now change the language back from hi_IN to en in the URL.

6. See if the Hindi strings are translated back to English for all Assignment related pages.

==Future Work==

Due to time, there were some things we weren't able to fix or work on.
* Problems:
** When a student goes back to the main Assignment page, views/student_task/list, the language locale doesn't appear in the URL. This means that if you did change the language from the dropdown or manually, clicking the Assignment link in the navigation bar will go back to the default locale language.
*** image here
** If you try to use the language dropdown in a page other than the main Assignment page, it will give an error like the one shown below:
*** image here
** But if you manually change the language in the URL, it works fine and persists as you navigate through the pages.
* Feature:
** Having a translation only show up for the user who changes it and not in the entire system.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

File:Internationalization assignment main translated page.JPG

2018-12-06T19:07:41Z

Hmukhta: main assignment page translated to Hindi

main assignment page translated to Hindi

File:Internationalization ssignment main page.JPG

2018-12-06T19:07:09Z

Hmukhta: The main assigment page in english

The main assigment page in english

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-06T18:50:54Z

Hmukhta: /* Example Output */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many Expertiza users are from other countries. We aimed to allow students to view their pages in another language. This ase done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown..

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* [[File: Internationalization Navigation dropdown 2.JPG]]
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** [[File:Internationalization Route rb 2.JPG]]
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Regular Static Strings
*** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace "Assignment", with <code><%=t ".keyName" %></code>
*** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
*** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
*** This is how you would change the strings for an html page.
** Static strings for buttons, dropdowns, etc.
*** You can also translate static string field values that you would find in buttons, dropdowns, etc. When you change these types of strings, you need slightly different code to translate it.
*** Example: <code><%= submit_tag 'Save' %> </code>. You would replace 'Save' with <code>t('.key_name')</code>.
*** It would now look like this <code> <%= submit_tag t('.key_name') %></code>

===Example Output===

====Original Page====
[[File:Edit Course default.PNG]]

====Translated Page====

[[File:Edit Course mock hi IN.PNG]]

===Test Plan===

====Student Credentials====
username: student1016 or student[4000-8000]

password: password

====Before Testing====

* When going between pages, use the Back button link located on the bottom of pages
* When going to the main Assignment page, use the Back button link to get there to test out the scenarios below

====Scenario 1====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

6. Go back to the main Assignment page and choose English from the dropdown.

7. See if the language was changed in the URL to en.

8. See if the strings are translated back to English for all Assignment related pages.

====Scenario 3====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

5. Now change the language back from hi_IN to en in the URL.

6. See if the Hindi strings are translated back to English for all Assignment related pages.

==Future Work==

Due to time, there were some things we weren't able to fix or work on.
* Problems:
** When a student goes back to the main Assignment page, views/student_task/list, the language locale doesn't appear in the URL. This means that if you did change the language from the dropdown or manually, clicking the Assignment link in the navigation bar will go back to the default locale language.
*** image here
** If you try to use the language dropdown in a page other than the main Assignment page, it will give an error like the one shown below:
*** image here
** But if you manually change the language in the URL, it works fine and persists as you navigate through the pages.
* Feature:
** Having a translation only show up for the user who changes it and not in the entire system.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-06T18:49:30Z

Hmukhta: /* Adding Multi-Language Support */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many Expertiza users are from other countries. We aimed to allow students to view their pages in another language. This ase done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown..

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* [[File: Internationalization Navigation dropdown 2.JPG]]
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** [[File:Internationalization Route rb 2.JPG]]
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Regular Static Strings
*** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace "Assignment", with <code><%=t ".keyName" %></code>
*** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
*** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
*** This is how you would change the strings for an html page.
** Static strings for buttons, dropdowns, etc.
*** You can also translate static string field values that you would find in buttons, dropdowns, etc. When you change these types of strings, you need slightly different code to translate it.
*** Example: <code><%= submit_tag 'Save' %> </code>. You would replace 'Save' with <code>t('.key_name')</code>.
*** It would now look like this <code> <%= submit_tag t('.key_name') %></code>

===Example Output===

====Original Page====
[[File:Edit Course default.PNG]]

====Language Dropdown====

[[File:Edit Course mock en.PNG]]

====Translated Page====

[[File:Edit Course mock hi IN.PNG]]

===Test Plan===

====Student Credentials====
username: student1016 or student[4000-8000]

password: password

====Before Testing====

* When going between pages, use the Back button link located on the bottom of pages
* When going to the main Assignment page, use the Back button link to get there to test out the scenarios below

====Scenario 1====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

6. Go back to the main Assignment page and choose English from the dropdown.

7. See if the language was changed in the URL to en.

8. See if the strings are translated back to English for all Assignment related pages.

====Scenario 3====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

5. Now change the language back from hi_IN to en in the URL.

6. See if the Hindi strings are translated back to English for all Assignment related pages.

==Future Work==

Due to time, there were some things we weren't able to fix or work on.
* Problems:
** When a student goes back to the main Assignment page, views/student_task/list, the language locale doesn't appear in the URL. This means that if you did change the language from the dropdown or manually, clicking the Assignment link in the navigation bar will go back to the default locale language.
*** image here
** If you try to use the language dropdown in a page other than the main Assignment page, it will give an error like the one shown below:
*** image here
** But if you manually change the language in the URL, it works fine and persists as you navigate through the pages.
* Feature:
** Having a translation only show up for the user who changes it and not in the entire system.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-06T18:47:19Z

Hmukhta: /* Adding Multi-Language Support */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many Expertiza users are from other countries. We aimed to allow students to view their pages in another language. This ase done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown..

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* [[File: Internationalization Navigation dropdown 2.JPG]]
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** [[File:Internationalization Route rb 2.JPG]]
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Regular Static Strings
*** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace "Assignment", with <code><%=t ".keyName" %></code>
*** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
*** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
*** This is how you would change the strings for an html page.
** Static strings for buttons, dropdowns, etc.
*** You can also translate static string field values that you would find in buttons, dropdowns, etc. When you change these types of strings, you need slightly different code to translate it. Example: <code><%= submit_tag 'Save' %> </code>. You would replace 'Save' with <code>t('.key_name')</code>.
*** It would look like this <code> <%= submit_tag t('.key_name') %></code>

===Example Output===

====Original Page====
[[File:Edit Course default.PNG]]

====Language Dropdown====

[[File:Edit Course mock en.PNG]]

====Translated Page====

[[File:Edit Course mock hi IN.PNG]]

===Test Plan===

====Student Credentials====
username: student1016 or student[4000-8000]

password: password

====Before Testing====

* When going between pages, use the Back button link located on the bottom of pages
* When going to the main Assignment page, use the Back button link to get there to test out the scenarios below

====Scenario 1====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

6. Go back to the main Assignment page and choose English from the dropdown.

7. See if the language was changed in the URL to en.

8. See if the strings are translated back to English for all Assignment related pages.

====Scenario 3====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

5. Now change the language back from hi_IN to en in the URL.

6. See if the Hindi strings are translated back to English for all Assignment related pages.

==Future Work==

Due to time, there were some things we weren't able to fix or work on.
* Problems:
** When a student goes back to the main Assignment page, views/student_task/list, the language locale doesn't appear in the URL. This means that if you did change the language from the dropdown or manually, clicking the Assignment link in the navigation bar will go back to the default locale language.
*** image here
** If you try to use the language dropdown in a page other than the main Assignment page, it will give an error like the one shown below:
*** image here
** But if you manually change the language in the URL, it works fine and persists as you navigate through the pages.
* Feature:
** Having a translation only show up for the user who changes it and not in the entire system.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-06T18:38:33Z

Hmukhta: /* Adding Multi-Language Support */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many Expertiza users are from other countries. We aimed to allow students to view their pages in another language. This ase done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown..

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* [[File: Internationalization Navigation dropdown 2.JPG]]
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** [[File:Internationalization Route rb 2.JPG]]
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace the text with <code><%=t ".keyName" %></code>
** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
** This is how you would change the strings for an html page.
** You can also translate static string field values that you would find in buttons, dropdowns, etc. When you change these types of strings, you need slightly different code to translate it. Example: <code><%= submit_tag 'Save' %> </code>. You would replace 'Save' with <cod>t('.key_name')</code>.

===Example Output===

====Original Page====
[[File:Edit Course default.PNG]]

====Language Dropdown====

[[File:Edit Course mock en.PNG]]

====Translated Page====

[[File:Edit Course mock hi IN.PNG]]

===Test Plan===

====Student Credentials====
username: student1016 or student[4000-8000]

password: password

====Before Testing====

* When going between pages, use the Back button link located on the bottom of pages
* When going to the main Assignment page, use the Back button link to get there to test out the scenarios below

====Scenario 1====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

6. Go back to the main Assignment page and choose English from the dropdown.

7. See if the language was changed in the URL to en.

8. See if the strings are translated back to English for all Assignment related pages.

====Scenario 3====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

5. Now change the language back from hi_IN to en in the URL.

6. See if the Hindi strings are translated back to English for all Assignment related pages.

==Future Work==

Due to time, there were some things we weren't able to fix or work on.
* Problems:
** When a student goes back to the main Assignment page, views/student_task/list, the language locale doesn't appear in the URL. This means that if you did change the language from the dropdown or manually, clicking the Assignment link in the navigation bar will go back to the default locale language.
*** image here
** If you try to use the language dropdown in a page other than the main Assignment page, it will give an error like the one shown below:
*** image here
** But if you manually change the language in the URL, it works fine and persists as you navigate through the pages.
* Feature:
** Having a translation only show up for the user who changes it and not in the entire system.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-06T18:30:56Z

Hmukhta: /* Allowing Student to change language for Assignment Pages */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many Expertiza users are from other countries. We aimed to allow students to view their pages in another language. This ase done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown..

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* [[File: Internationalization Navigation dropdown 2.JPG]]
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** [[File:Internationalization Route rb 2.JPG]]
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace the text with <code><%=t ".keyName" %></code>
** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
** This is how you would change the strings for an html page.

===Example Output===

====Original Page====
[[File:Edit Course default.PNG]]

====Language Dropdown====

[[File:Edit Course mock en.PNG]]

====Translated Page====

[[File:Edit Course mock hi IN.PNG]]

===Test Plan===

====Student Credentials====
username: student1016 or student[4000-8000]

password: password

====Before Testing====

* When going between pages, use the Back button link located on the bottom of pages
* When going to the main Assignment page, use the Back button link to get there to test out the scenarios below

====Scenario 1====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

6. Go back to the main Assignment page and choose English from the dropdown.

7. See if the language was changed in the URL to en.

8. See if the strings are translated back to English for all Assignment related pages.

====Scenario 3====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

5. Now change the language back from hi_IN to en in the URL.

6. See if the Hindi strings are translated back to English for all Assignment related pages.

==Future Work==

Due to time, there were some things we weren't able to fix or work on.
* Problems:
** When a student goes back to the main Assignment page, views/student_task/list, the language locale doesn't appear in the URL. This means that if you did change the language from the dropdown or manually, clicking the Assignment link in the navigation bar will go back to the default locale language.
*** image here
** If you try to use the language dropdown in a page other than the main Assignment page, it will give an error like the one shown below:
*** image here
** But if you manually change the language in the URL, it works fine and persists as you navigate through the pages.
* Feature:
** Having a translation only show up for the user who changes it and not in the entire system.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

File:Internationalization Navigation dropdown 2.JPG

2018-12-06T18:27:10Z

Hmukhta: Placement of the dropdown in the navigation bar

Placement of the dropdown in the navigation bar

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-06T18:17:49Z

Hmukhta: /* Adding Multi-Language Support */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many Expertiza users are from other countries. We aimed to allow students to view their pages in another language. This ase done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown..

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book
* Dropdown image goes here

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** [[File:Internationalization Route rb 2.JPG]]
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace the text with <code><%=t ".keyName" %></code>
** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
** This is how you would change the strings for an html page.

===Example Output===

====Original Page====
[[File:Edit Course default.PNG]]

====Language Dropdown====

[[File:Edit Course mock en.PNG]]

====Translated Page====

[[File:Edit Course mock hi IN.PNG]]

===Test Plan===

====Student Credentials====
username: student1016 or student[4000-8000]

password: password

====Before Testing====

* When going between pages, use the Back button link located on the bottom of pages
* When going to the main Assignment page, use the Back button link to get there to test out the scenarios below

====Scenario 1====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

6. Go back to the main Assignment page and choose English from the dropdown.

7. See if the language was changed in the URL to en.

8. See if the strings are translated back to English for all Assignment related pages.

====Scenario 3====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

5. Now change the language back from hi_IN to en in the URL.

6. See if the Hindi strings are translated back to English for all Assignment related pages.

==Future Work==

Due to time, there were some things we weren't able to fix or work on.
* Problems:
** When a student goes back to the main Assignment page, views/student_task/list, the language locale doesn't appear in the URL. This means that if you did change the language from the dropdown or manually, clicking the Assignment link in the navigation bar will go back to the default locale language.
*** image here
** If you try to use the language dropdown in a page other than the main Assignment page, it will give an error like the one shown below:
*** image here
** But if you manually change the language in the URL, it works fine and persists as you navigate through the pages.
* Feature:
** Having a translation only show up for the user who changes it and not in the entire system.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

File:Internationalization Route rb 2.JPG

2018-12-06T18:13:31Z

Hmukhta: Routes.rb file with internationalization

Routes.rb file with internationalization

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-05T23:41:23Z

Hmukhta: /* Future Work */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many Expertiza users are from other countries. We aimed to allow students to view their pages in another language. This ase done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown..

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book
* Dropdown image goes here

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** images here
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace the text with <code><%=t ".keyName" %></code>
** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
** This is how you would change the strings for an html page.

===Example Output===

====Original Page====
[[File:Edit Course default.PNG]]

====Language Dropdown====

[[File:Edit Course mock en.PNG]]

====Translated Page====

[[File:Edit Course mock hi IN.PNG]]

===Test Plan===

====Student Credentials====
username: student1016 or student[4000-8000]

password: password

====Before Testing====

* When going between pages, use the Back button link located on the bottom of pages
* When going to the main Assignment page, use the Back button link to get there to test out the scenarios below

====Scenario 1====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

6. Go back to the main Assignment page and choose English from the dropdown.

7. See if the language was changed in the URL to en.

8. See if the strings are translated back to English for all Assignment related pages.

====Scenario 3====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

5. Now change the language back from hi_IN to en in the URL.

6. See if the Hindi strings are translated back to English for all Assignment related pages.

==Future Work==

Due to time, there were some things we weren't able to fix or work on.
* Problems:
** When a student goes back to the main Assignment page, views/student_task/list, the language locale doesn't appear in the URL. This means that if you did change the language from the dropdown or manually, clicking the Assignment link in the navigation bar will go back to the default locale language.
*** image here
** If you try to use the language dropdown in a page other than the main Assignment page, it will give an error like the one shown below:
*** image here
** But if you manually change the language in the URL, it works fine and persists as you navigate through the pages.
* Feature:
** Having a translation only show up for the user who changes it and not in the entire system.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-05T23:38:40Z

Hmukhta: /* Future Work */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many Expertiza users are from other countries. We aimed to allow students to view their pages in another language. This ase done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown..

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book
* Dropdown image goes here

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** images here
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace the text with <code><%=t ".keyName" %></code>
** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
** This is how you would change the strings for an html page.

===Example Output===

====Original Page====
[[File:Edit Course default.PNG]]

====Language Dropdown====

[[File:Edit Course mock en.PNG]]

====Translated Page====

[[File:Edit Course mock hi IN.PNG]]

===Test Plan===

====Student Credentials====
username: student1016 or student[4000-8000]

password: password

====Before Testing====

* When going between pages, use the Back button link located on the bottom of pages
* When going to the main Assignment page, use the Back button link to get there to test out the scenarios below

====Scenario 1====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

6. Go back to the main Assignment page and choose English from the dropdown.

7. See if the language was changed in the URL to en.

8. See if the strings are translated back to English for all Assignment related pages.

====Scenario 3====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

5. Now change the language back from hi_IN to en in the URL.

6. See if the Hindi strings are translated back to English for all Assignment related pages.

==Future Work==

Due to time, there were some things we weren't able to fix or work on.
* Problems:
** When a student goes back to the main Assignment page, student_task/list, the language locale doesn't appear in the URL. This means that if you did change the language from the dropdown or manually, clicking the Assignment link in the navigation bar will go back to the default locale language.
*** image here
** If you try to use the language dropdown in a page other than the main assignment page, it will give an error like the one shown below:
*** image here
* Feature:
** Having a translation only show up for the user who changes it and not in the entire system.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-05T23:38:27Z

Hmukhta: /* Future Work */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many Expertiza users are from other countries. We aimed to allow students to view their pages in another language. This ase done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown..

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book
* Dropdown image goes here

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** images here
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace the text with <code><%=t ".keyName" %></code>
** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
** This is how you would change the strings for an html page.

===Example Output===

====Original Page====
[[File:Edit Course default.PNG]]

====Language Dropdown====

[[File:Edit Course mock en.PNG]]

====Translated Page====

[[File:Edit Course mock hi IN.PNG]]

===Test Plan===

====Student Credentials====
username: student1016 or student[4000-8000]

password: password

====Before Testing====

* When going between pages, use the Back button link located on the bottom of pages
* When going to the main Assignment page, use the Back button link to get there to test out the scenarios below

====Scenario 1====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

6. Go back to the main Assignment page and choose English from the dropdown.

7. See if the language was changed in the URL to en.

8. See if the strings are translated back to English for all Assignment related pages.

====Scenario 3====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

5. Now change the language back from hi_IN to en in the URL.

6. See if the Hindi strings are translated back to English for all Assignment related pages.

==Future Work==

* Due to time, there were some things we weren't able to fix or work on.
* Problems:
** When a student goes back to the main Assignment page, student_task/list, the language locale doesn't appear in the URL. This means that if you did change the language from the dropdown or manually, clicking the Assignment link in the navigation bar will go back to the default locale language.
*** image here
** If you try to use the language dropdown in a page other than the main assignment page, it will give an error like the one shown below:
*** image here
* Feature:
** Having a translation only show up for the user who changes it and not in the entire system.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-05T23:37:34Z

Hmukhta: /* Future Work */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many Expertiza users are from other countries. We aimed to allow students to view their pages in another language. This ase done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown..

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book
* Dropdown image goes here

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** images here
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace the text with <code><%=t ".keyName" %></code>
** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
** This is how you would change the strings for an html page.

===Example Output===

====Original Page====
[[File:Edit Course default.PNG]]

====Language Dropdown====

[[File:Edit Course mock en.PNG]]

====Translated Page====

[[File:Edit Course mock hi IN.PNG]]

===Test Plan===

====Student Credentials====
username: student1016 or student[4000-8000]

password: password

====Before Testing====

* When going between pages, use the Back button link located on the bottom of pages
* When going to the main Assignment page, use the Back button link to get there to test out the scenarios below

====Scenario 1====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

6. Go back to the main Assignment page and choose English from the dropdown.

7. See if the language was changed in the URL to en.

8. See if the strings are translated back to English for all Assignment related pages.

====Scenario 3====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

5. Now change the language back from hi_IN to en in the URL.

6. See if the Hindi strings are translated back to English for all Assignment related pages.

==Future Work==

* Due to time, there were some problems that we weren't able to fix or work on
* Problems:
** When a student goes back to the main Assignment page, student_task/list, the language locale doesn't appear in the URL. This means that if you did change the language from the dropdown or manually, clicking the Assignment link in the navigation bar will go back to the default locale language.
*** image here
** If you try to use the language dropdown in a page other than the main assignment page, it will give an error like the one shown below:
*** image here
* Feature:
** Having a translation only show up for the user who changes it and not affect the entire system.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-05T23:34:13Z

Hmukhta: /* Future Work */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many Expertiza users are from other countries. We aimed to allow students to view their pages in another language. This ase done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown..

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book
* Dropdown image goes here

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** images here
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace the text with <code><%=t ".keyName" %></code>
** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
** This is how you would change the strings for an html page.

===Example Output===

====Original Page====
[[File:Edit Course default.PNG]]

====Language Dropdown====

[[File:Edit Course mock en.PNG]]

====Translated Page====

[[File:Edit Course mock hi IN.PNG]]

===Test Plan===

====Student Credentials====
username: student1016 or student[4000-8000]

password: password

====Before Testing====

* When going between pages, use the Back button link located on the bottom of pages
* When going to the main Assignment page, use the Back button link to get there to test out the scenarios below

====Scenario 1====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

6. Go back to the main Assignment page and choose English from the dropdown.

7. See if the language was changed in the URL to en.

8. See if the strings are translated back to English for all Assignment related pages.

====Scenario 3====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

5. Now change the language back from hi_IN to en in the URL.

6. See if the Hindi strings are translated back to English for all Assignment related pages.

==Future Work==

* Due to time, there were some problems that we weren't able to fix
* They are:
** When a student goes back to the main Assignment page, student_task/list, the language locale doesn't appear in the URL. This means that if you did change the language and click the Assignment link in the navigation bar, it will go back to the default locale language.
** If you try to use the language dropdown in a page other than the main assignment page, it will give an error like the one shown below:
*** image here

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-05T23:29:10Z

Hmukhta: /* Links/References */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many Expertiza users are from other countries. We aimed to allow students to view their pages in another language. This ase done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown..

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book
* Dropdown image goes here

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** images here
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace the text with <code><%=t ".keyName" %></code>
** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
** This is how you would change the strings for an html page.

===Example Output===

====Original Page====
[[File:Edit Course default.PNG]]

====Language Dropdown====

[[File:Edit Course mock en.PNG]]

====Translated Page====

[[File:Edit Course mock hi IN.PNG]]

===Test Plan===

====Student Credentials====
username: student1016 or student[4000-8000]

password: password

====Before Testing====

* When going between pages, use the Back button link located on the bottom of pages
* When going to the main Assignment page, use the Back button link to get there to test out the scenarios below

====Scenario 1====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

6. Go back to the main Assignment page and choose English from the dropdown.

7. See if the language was changed in the URL to en.

8. See if the strings are translated back to English for all Assignment related pages.

====Scenario 3====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

5. Now change the language back from hi_IN to en in the URL.

6. See if the Hindi strings are translated back to English for all Assignment related pages.

==Future Work==

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-05T23:24:22Z

Hmukhta: /* Navigation */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many Expertiza users are from other countries. We aimed to allow students to view their pages in another language. This ase done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown..

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book
* Dropdown image goes here

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** images here
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace the text with <code><%=t ".keyName" %></code>
** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
** This is how you would change the strings for an html page.

===Example Output===

====Original Page====
[[File:Edit Course default.PNG]]

====Language Dropdown====

[[File:Edit Course mock en.PNG]]

====Translated Page====

[[File:Edit Course mock hi IN.PNG]]

===Test Plan===

====Student Credentials====
username: student1016 or student[4000-8000]

password: password

====Before Testing====

* When going between pages, use the Back button link located on the bottom of pages
* When going to the main Assignment page, use the Back button link to get there to test out the scenarios below

====Scenario 1====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

6. Go back to the main Assignment page and choose English from the dropdown.

7. See if the language was changed in the URL to en.

8. See if the strings are translated back to English for all Assignment related pages.

====Scenario 3====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

5. Now change the language back from hi_IN to en in the URL.

6. See if the Hindi strings are translated back to English for all Assignment related pages.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-05T23:23:56Z

Hmukhta: /* Test Plan */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many Expertiza users are from other countries. We aimed to allow students to view their pages in another language. This ase done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown..

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book
* Dropdown image goes here

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** images here
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace the text with <code><%=t ".keyName" %></code>
** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
** This is how you would change the strings for an html page.

===Example Output===

====Original Page====
[[File:Edit Course default.PNG]]

====Language Dropdown====

[[File:Edit Course mock en.PNG]]

====Translated Page====

[[File:Edit Course mock hi IN.PNG]]

===Test Plan===

====Student Credentials====
username: student1016 or student[4000-8000]

password: password

====Navigation====

* When going between pages, use the Back button link located on the bottom of pages
* When going to the main Assignment page, use the Back button link to get there to test out the scenarios below

====Scenario 1====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

6. Go back to the main Assignment page and choose English from the dropdown.

7. See if the language was changed in the URL to en.

8. See if the strings are translated back to English for all Assignment related pages.

====Scenario 3====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

5. Now change the language back from hi_IN to en in the URL.

6. See if the Hindi strings are translated back to English for all Assignment related pages.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-05T23:17:13Z

Hmukhta: /* Test Plan */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many Expertiza users are from other countries. We aimed to allow students to view their pages in another language. This ase done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown..

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book
* Dropdown image goes here

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** images here
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace the text with <code><%=t ".keyName" %></code>
** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
** This is how you would change the strings for an html page.

===Example Output===

====Original Page====
[[File:Edit Course default.PNG]]

====Language Dropdown====

[[File:Edit Course mock en.PNG]]

====Translated Page====

[[File:Edit Course mock hi IN.PNG]]

===Test Plan===

====Student Credentials====
username: student1016 or student[4000-8000]

password: password

====Scenario 1====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student.

2. Go to language dropdown in the navigation bar and choose Hindi.

3. Check if language is changed in the URL from en to hi_IN

4. Check to see if the English strings on the page are translated to Hindi

5. While still logged in as a Student, check if the other Assignment related pages are also translated.

6. Go back to the main Assignment page and choose English from the dropdown.

7. See if the language was changed in the URL to en.

8. See if the strings are translated back to English for all Assignment related pages.

====Scenario 3====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student.

2. Go to URL and change the language from en to hi_IN.

3. Check to see if the English strings on the page are translated to Hindi.

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

5. Now change the language back from hi_IN to en in the URL.

6. See if the Hindi strings are translated back to English for all Assignment related pages.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-05T23:14:47Z

Hmukhta: /* Test Plan */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many Expertiza users are from other countries. We aimed to allow students to view their pages in another language. This ase done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown..

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book
* Dropdown image goes here

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** images here
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace the text with <code><%=t ".keyName" %></code>
** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
** This is how you would change the strings for an html page.

===Example Output===

====Original Page====
[[File:Edit Course default.PNG]]

====Language Dropdown====

[[File:Edit Course mock en.PNG]]

====Translated Page====

[[File:Edit Course mock hi IN.PNG]]

===Test Plan===

====Student Credentials====
username: student1016 or student[4000-8000]

password: password

====Scenario 1====

1. Log in to Expertiza as a student. Go to language dropdown in the navigation bar and choose Hindi.

2. Check if language is changed in the URL from en to hi_IN

3. Check to see if the English strings on the page are translated to Hindi

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student. Go to language dropdown in the navigation bar and choose Hindi.

2. Check if language is changed in the URL from en to hi_IN

3. Check to see if the English strings on the page are translated to Hindi

4. While still logged in as a Student, check if the other Assignment related pages are also translated.

5. Go back to the main Assignment page and choose English from the dropdown.

6. See if the language was changed in the URL to en.

7. See if the strings are translated back to English for all Assignment related pages.

====Scenario 3====

1. Log in to Expertiza as a student. Go to URL and change the language from en to hi_IN. Check to see if the English strings on the page are translated to Hindi.

2. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student. Go to URL and change the language from en to hi_IN. Check to see if the English strings on the page are translated to Hindi.

2. While still logged in as a Student, check if the other Assignment related pages are also translated.

3. Now change the language back from hi_IN to en in the URL. See if the Hindi strings are translated back to English for all Assignment related pages.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-05T23:09:32Z

Hmukhta: /* Scenario 1 */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many Expertiza users are from other countries. We aimed to allow students to view their pages in another language. This ase done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown..

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book
* Dropdown image goes here

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** images here
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace the text with <code><%=t ".keyName" %></code>
** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
** This is how you would change the strings for an html page.

===Example Output===

====Original Page====
[[File:Edit Course default.PNG]]

====Language Dropdown====

[[File:Edit Course mock en.PNG]]

====Translated Page====

[[File:Edit Course mock hi IN.PNG]]

===Test Plan===

====Student Credentials====
username: student1016 or student[4000-8000]

password: password

====Scenario 1====

1. Log in to Expertiza as a student. Go to language dropdown in the navigation bar and choose Hindi. Check to see if the English strings on the page are translated to Hindi

2. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student. Go to the Assignment section of Expertiza. Go to language dropdown in the navigation bar and choose Hindi. Check to see if the English strings on that page are translated to Hindi

2. While still logged in as a Student, check if the other Assignment related pages are also translated.

3. Go back to the main Assignment page and choose English from the dropdown. See if the strings are translated back to English.

4. Check the other pages to see if the translations worked.

====Scenario 3====

1. Log in to Expertiza as a student. Go to the Assignment section of Expertiza. Go to URL and change the language from en to hi_IN. Check to see if the English strings on that page are translated to Hindi.

2. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student. Go to the Assignment section of Expertiza. Go to URL and change the language from en to hi_IN. Check to see if the English strings on that page are translated to Hindi.

2. While still logged in as a Student, check if the other Assignment related pages are also translated.

3. Now change the language back from hi_IN to en in the URL. See if the Hindi strings are translated back to English.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-05T23:08:58Z

Hmukhta: /* Student Credentials */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many Expertiza users are from other countries. We aimed to allow students to view their pages in another language. This ase done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown..

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book
* Dropdown image goes here

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** images here
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace the text with <code><%=t ".keyName" %></code>
** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
** This is how you would change the strings for an html page.

===Example Output===

====Original Page====
[[File:Edit Course default.PNG]]

====Language Dropdown====

[[File:Edit Course mock en.PNG]]

====Translated Page====

[[File:Edit Course mock hi IN.PNG]]

===Test Plan===

====Student Credentials====
username: student1016 or student[4000-8000]

password: password

====Scenario 1====

1. Log in to Expertiza as a student. Go to the Assignment section of Expertiza. Go to language dropdown in the navigation bar and choose Hindi. Check to see if the English strings on that page are translated to Hindi

2. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student. Go to the Assignment section of Expertiza. Go to language dropdown in the navigation bar and choose Hindi. Check to see if the English strings on that page are translated to Hindi

2. While still logged in as a Student, check if the other Assignment related pages are also translated.

3. Go back to the main Assignment page and choose English from the dropdown. See if the strings are translated back to English.

4. Check the other pages to see if the translations worked.

====Scenario 3====

1. Log in to Expertiza as a student. Go to the Assignment section of Expertiza. Go to URL and change the language from en to hi_IN. Check to see if the English strings on that page are translated to Hindi.

2. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student. Go to the Assignment section of Expertiza. Go to URL and change the language from en to hi_IN. Check to see if the English strings on that page are translated to Hindi.

2. While still logged in as a Student, check if the other Assignment related pages are also translated.

3. Now change the language back from hi_IN to en in the URL. See if the Hindi strings are translated back to English.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-05T23:08:09Z

Hmukhta: /* Test Plan */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many Expertiza users are from other countries. We aimed to allow students to view their pages in another language. This ase done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown..

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book
* Dropdown image goes here

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** images here
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace the text with <code><%=t ".keyName" %></code>
** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
** This is how you would change the strings for an html page.

===Example Output===

====Original Page====
[[File:Edit Course default.PNG]]

====Language Dropdown====

[[File:Edit Course mock en.PNG]]

====Translated Page====

[[File:Edit Course mock hi IN.PNG]]

===Test Plan===

====Student Credentials====
username: student1016
password: password

or

username: student[4000-8000]
password: password

====Scenario 1====

1. Log in to Expertiza as a student. Go to the Assignment section of Expertiza. Go to language dropdown in the navigation bar and choose Hindi. Check to see if the English strings on that page are translated to Hindi

2. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student. Go to the Assignment section of Expertiza. Go to language dropdown in the navigation bar and choose Hindi. Check to see if the English strings on that page are translated to Hindi

2. While still logged in as a Student, check if the other Assignment related pages are also translated.

3. Go back to the main Assignment page and choose English from the dropdown. See if the strings are translated back to English.

4. Check the other pages to see if the translations worked.

====Scenario 3====

1. Log in to Expertiza as a student. Go to the Assignment section of Expertiza. Go to URL and change the language from en to hi_IN. Check to see if the English strings on that page are translated to Hindi.

2. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student. Go to the Assignment section of Expertiza. Go to URL and change the language from en to hi_IN. Check to see if the English strings on that page are translated to Hindi.

2. While still logged in as a Student, check if the other Assignment related pages are also translated.

3. Now change the language back from hi_IN to en in the URL. See if the Hindi strings are translated back to English.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-05T23:05:10Z

Hmukhta: /* Allowing Student to change language for Assignment Pages */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many Expertiza users are from other countries. We aimed to allow students to view their pages in another language. This ase done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown..

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also manually change the language in the URL themselves by. The language is put before the page name. Example: www.example.com/en/book -> www.example.com/hi_IN/book
* Dropdown image goes here

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** images here
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace the text with <code><%=t ".keyName" %></code>
** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
** This is how you would change the strings for an html page.

===Example Output===

====Original Page====
[[File:Edit Course default.PNG]]

====Language Dropdown====

[[File:Edit Course mock en.PNG]]

====Translated Page====

[[File:Edit Course mock hi IN.PNG]]

===Test Plan===

====Scenario 1====

1. Log in to Expertiza as a student. Go to the Assignment section of Expertiza. Go to language dropdown in the navigation bar and choose Hindi. Check to see if the English strings on that page are translated to Hindi

2. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student. Go to the Assignment section of Expertiza. Go to language dropdown in the navigation bar and choose Hindi. Check to see if the English strings on that page are translated to Hindi

2. While still logged in as a Student, check if the other Assignment related pages are also translated.

3. Go back to the main Assignment page and choose English from the dropdown. See if the strings are translated back to English.

4. Check the other pages to see if the translations worked.

====Scenario 3====

1. Log in to Expertiza as a student. Go to the Assignment section of Expertiza. Go to URL and change the language from en to hi_IN. Check to see if the English strings on that page are translated to Hindi.

2. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student. Go to the Assignment section of Expertiza. Go to URL and change the language from en to hi_IN. Check to see if the English strings on that page are translated to Hindi.

2. While still logged in as a Student, check if the other Assignment related pages are also translated.

3. Now change the language back from hi_IN to en in the URL. See if the Hindi strings are translated back to English.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-05T23:01:14Z

Hmukhta: /* Scenarios */

== Introduction ==

===Team Members===

Jonathan Gill (jtgill@ncsu.edu)

Hasham Mukhtar (hmukhta@ncsu.edu)

Abhilasha Saini (asaini4@ncsu.edu)

Reddy Aravind Karnam Ganesh (rkarnam@ncsu.edu)

=== Mentor ===

Zhewei Hu (zhu6@ncsu.edu)

===Relevant Files===

config/locales/

* en.yml

* hi_IN.yml

config/

* routes.rb
* application.rb

app/controllers/
* applcation_controller.rb

Student View Files:

* app/views/
** shared/
*** _navigation.html.erb
** sign_up_sheet/
*** _suggested_topic.html.erb
*** _table_header.html.erb
*** list.html.erb
** student_task/
*** list.html.erb
*** view.html.erb
** student_teams/
*** edit.html.erb
*** view.html.erb
** submitted_content/
*** _hyperlink.html.erb
*** _main.html.erb
*** _self_review.html.erb
*** _submitted_files.html.erb
*** _title.html.erb
*** edit.html.erb
** grades/
*** view_my_scores.html.erb
*** view_team.html.erb
** student_review/
*** list.html.erb
*** _responses.html.erb
*** _set_dynamic_review.html.erb
** participants/
*** change_handle.html.erb

== Project Description ==

Currently Expertiza only supports the English language. Many Expertiza users are from other countries. We aimed to allow students to view their pages in another language. This ase done by internationalizing static strings in Expertiza for Student Assignment related pages to another language (ex: Hindi or Chinese). Students had the ability to change the language through a dropdown located in navigation bar at the top of the page. We did not affect any strings that are dynamically shown..

== Project Design ==

===Technical Design===

====Allowing Student to change language for Assignment Pages====

* We added a dropdown in the navigation bar for a student to use
* They are able to choose from English or Hindi
* When the language is clicked on it changed all the static strings in the Student Views related to Assignments to the newly selected language.
* Students could also language in the url themselves to switch the langauge. Example: www.example.com/en/book -> www.example.com/hi_IN/book
* Dropdown image goes here

====Adding Multi-Language Support====

* For this project, we added support for one language, Hindi.
* We used Google Translate to convert the strings to Hindi.
* We used the [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works Rails Internationalization (I18n) API] to help us add multi language support.
* There are two <code>yml</code> files in the <code>config/locales</code> directory representing the different languages that can be used in Expertiza.
** One for English, which will be the default language used, and another for Hindi.
*** <code>en.yml</code>
*** <code>hi_IN.yml</code>
** These <code>yaml</code> files contained the translated strings for their respective language.
* We editied the <code>routes.rb, application.rb, application_controller.rb</code> files and all the view files related to Student Assignments (which you can see at the top of the wiki) so that it can read from the <code>yml</code> files to show other languages.
------------------------------
* <code>application.rb</code>
** We've added the following two lines in the Recaptcha module of this file:
<code>
config.i18n.available_locales = [:en,:hi_IN]
</code>
* This tells the application all the available locale <code>.yml</code> files that are supported. If you wanted to add more language support, you can just add it to the list shown here.
<code>
config.i18n.default_locale = :en
</code>
* The sets the default language for the application. Which in this case is English.
----------------------------
* <code>application_controller.rb</code>
** We added the following to this file to get translations to work:
<code>
before_action :set_locale
</code>
* This will call the set_locale method
<code>
def set_locale
I18n.locale = params[:locale] || I18n.default_locale
end
</code>
* This sets the locale (language to use) for the application. The locale is taken from the URL query params list. If none is given, then it defaults to our default locale file (which is English). The application will always default to English and it won't pull from params until another language is chosen from the dropdown and sets :locale to something else.
<code>
def default_url_options(options={})
{locale: I18n.locale}.merge options
end
</code>
* This makes the URL always have a locale, which is set in the set_locale method, in it. This way the user doesn't have to manually enter a locale in the URL to translate the page. However, it adds the locale to the end of the URL like this: www.example.com/book/?locale=en. This is not something we want as it doesn't look good. This is fixed with routes.rb
-----------------------------
* <code> routes.rb </code>
** We wrapped the file in <code> routes.rb </code> with a <code>scope:</code> so that the locale can be added before the page name in the URL. Something like this: www.example.com/en/book
** images here
*** the code at the top prevents a Routing Error when you go to a page and don't specify the locale (www.example.com/book) and it allows the default locale to be used. It knows the available locales from line <code>/#{I18n.available_locales.join("|")} </code>. <code> available_locales </code> was set in the <code>application.rb</code> file
----------------------------
* <code>.yml</code> Files
** <code>.yml</code> files know to look at the <code>view</code> folder when looking for keys to show
** Because of that, <code>.yml</code> files are structured in a hierarchy as shown below:
<code>
locale_name:
folder_name:
html_page_name:
key_name_for_string:
</code>
* Below is a sample for how we formatted our two locale files
<code>
en:
student_task:
list:
assignments: "Assignments"
</code>
<code>
hi_IN:
student_task:
list:
assignments: "असाइनमेंट"
</code>
* student_task is the folder under views: views/student_task
* list is the name of the html page: view/student_task/list.html.erb
* assignments is the key that replaces the word "Assignments" in the code (see next section).
* If more keys are added, they would need to be added in this format

----------------------------
* Student Views were translated as shown below:
** Take any static, hard coded strings, like this one: <nowiki><h1> Assignments </h1></nowiki>, and replace the text with <code><%=t ".keyName" %></code>
** The new code would look like this <nowiki><h1><%=t ".key_name" %></h1> </nowiki>
** <code> key_name </code> comes from the key in the <code>.yml</code> files. The locale variable (en or hi_IN) would determine which one it pulls from.
** This is how you would change the strings for an html page.

===Example Output===

====Original Page====
[[File:Edit Course default.PNG]]

====Language Dropdown====

[[File:Edit Course mock en.PNG]]

====Translated Page====

[[File:Edit Course mock hi IN.PNG]]

===Test Plan===

====Scenario 1====

1. Log in to Expertiza as a student. Go to the Assignment section of Expertiza. Go to language dropdown in the navigation bar and choose Hindi. Check to see if the English strings on that page are translated to Hindi

2. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 2====

1. Log in to Expertiza as a student. Go to the Assignment section of Expertiza. Go to language dropdown in the navigation bar and choose Hindi. Check to see if the English strings on that page are translated to Hindi

2. While still logged in as a Student, check if the other Assignment related pages are also translated.

3. Go back to the main Assignment page and choose English from the dropdown. See if the strings are translated back to English.

4. Check the other pages to see if the translations worked.

====Scenario 3====

1. Log in to Expertiza as a student. Go to the Assignment section of Expertiza. Go to URL and change the language from en to hi_IN. Check to see if the English strings on that page are translated to Hindi.

2. While still logged in as a Student, check if the other Assignment related pages are also translated.

====Scenario 4====

1. Log in to Expertiza as a student. Go to the Assignment section of Expertiza. Go to URL and change the language from en to hi_IN. Check to see if the English strings on that page are translated to Hindi.

2. While still logged in as a Student, check if the other Assignment related pages are also translated.

3. Now change the language back from hi_IN to en in the URL. See if the Hindi strings are translated back to English.

== Links/References ==

===Project Links===

* Pull Request: https://github.com/expertiza/expertiza/pull/1286
* Github: https://github.com/mukhtar23/expertiza
* Video:

===Support Material===
* [https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works https://guides.rubyonrails.org/i18n.html#how-i18n-in-ruby-on-rails-works]
* [https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params https://guides.rubyonrails.org/i18n.html#setting-the-locale-from-url-params]
* [https://guides.rubyonrails.org/i18n.html#abstracting-localized-code https://guides.rubyonrails.org/i18n.html#abstracting-localized-code]
* [https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings https://guides.rubyonrails.org/i18n.html#providing-translations-for-internationalized-strings]
* [https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations https://guides.rubyonrails.org/i18n.html#passing-variables-to-translations]

* [https://www.youtube.com/watch?v=HLb0hEgrXTc https://www.youtube.com/watch?v=HLb0hEgrXTc]
* [https://phraseapp.com/blog/posts/rails-i18n-guide/ https://phraseapp.com/blog/posts/rails-i18n-guide/]

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-05T21:56:17Z

Hmukhta: /* Adding Multi-Language Support */

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-05T21:55:17Z

Hmukhta: /* Adding Multi-Language Support */

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-05T21:45:19Z

Hmukhta: /* Adding Multi-Language Support */

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-05T21:34:28Z

Hmukhta: /* Adding Multi-Language Support */

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-05T21:20:34Z

Hmukhta: /* Allowing Student to change language for Assignment Pages */

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-05T21:19:34Z

Hmukhta: /* Allowing Student to change language for Assignment Pages */

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-05T21:17:42Z

Hmukhta: /* Adding Multi-Language Support */

CSC/ECE 517 Fall 2018/E1866 Expertiza Internationalization

2018-12-05T20:46:35Z

Hmukhta: /* Project Description */