Added examples for managing translations on the app

pull/1332/head
Julia Muiruri 4 months ago
parent 470e2457f7
commit 1104962513

@ -6,11 +6,72 @@ These quizzes are the pre- and post-lecture quizzes for the data science curricu
Add a quiz translation by creating matching quiz structures in the `assets/translations` folders. The canonical quizzes are in `assets/translations/en`. The quizzes are broken into several groupings. Make sure to align the numbering with the proper quiz section. There are 40 quizzes total in this curriculum, with the count starting at 0. Add a quiz translation by creating matching quiz structures in the `assets/translations` folders. The canonical quizzes are in `assets/translations/en`. The quizzes are broken into several groupings. Make sure to align the numbering with the proper quiz section. There are 40 quizzes total in this curriculum, with the count starting at 0.
<details>
<summary>Here's the shape of a translation file:</summary>
```
[
{
"title": "A title",
"complete": "A complete button title",
"error": "An error message upon selecting the wrong answer",
"quizzes": [
{
"id": 1,
"title": "Title",
"quiz": [
{
"questionText": "The question asked",
"answerOptions": [
{
"answerText": "Option 1 title",
"isCorrect": true
},
{
"answerText": "Option 2 title",
"isCorrect": false
}
]
}
]
}
]
}
]
```
</details>
After editing the translations, edit the index.js file in the translation folder to import all the files following the conventions in `en`. After editing the translations, edit the index.js file in the translation folder to import all the files following the conventions in `en`.
Edit the `index.js` file in `assets/translations` to import the new translated files. Edit the `index.js` file in `assets/translations` to import the new translated files.
For example, if your translation JSON is in `ex.json`, make 'ex' the localization key, then enter it as shown below to import it
<details>
<summary>index.js</summary>
```
import ex from "./ex.json";
// if 'ex' is localization key then enter it like so in `messages` to expose it
const messages = {
ex: ex[0],
};
export default messages;
```
</details>
Then, edit the dropdown in `App.vue` in this app to add your language. Match the localized abbreviation to the folder name for your language. Then, edit the dropdown in `App.vue` in this app to add your language. Match the localized abbreviation to the folder name for your language. See example:
<details>
<summary>App.vue</summary>
TODO
</details>
Finally, edit all the quiz links in the translated lessons, if they exist, to include this localization as a query parameter: `?loc=fr` for example. Finally, edit all the quiz links in the translated lessons, if they exist, to include this localization as a query parameter: `?loc=fr` for example.
@ -65,7 +126,9 @@ Finally, edit all the quiz links in the translated lessons, if they exist, to in
## Deploy the Quiz-app to Azure ## Deploy the Quiz-app to Azure
### Prerequisites ### Prerequisites
- An Azure Subscription. _Cost Estimate: FREE_ - An Azure Subscription. Sign up for one for free [here](https://aka.ms/azure-free).
_Cost Estimate to deploy this quiz-app: FREE_
[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp) [![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp)
@ -76,43 +139,49 @@ Once you are signed in on Azure through the link above, select a subscription an
- *Organization* Choose your organization. - *Organization* Choose your organization.
- *Repository* Select the Web Dev for Beginners curriculum repository. - *Repository* Select the Web Dev for Beginners curriculum repository.
- *Branch* - Select a branch (main) - *Branch* - Select a branch (main)
- Build Presets - Azure Static Web Apps uses a detection algorithm to detect the framework used in your application. - Build Presets: Azure Static Web Apps uses a detection algorithm to detect the framework used in your application.
- *App location* - ./quiz-app - *App location* - ./quiz-app
- *Api location* - - *Api location* -
- *Output location* - dist - *Output location* - dist
- Deployment: Click 'Review + Create', then 'Create' - Deployment: Click 'Review + Create', then 'Create'
- Post-Deployment: After deployment is complete, click on 'Go to Deployment' then 'View app in browser'.
### Example Workflow File Once deployed, a workflow file will be created in the *.github* directory of your repo. This workflow file contains instructions of events that will trigger a re-deployment of the app to Azure, for example, _a **push** on branch **main**_ etc.
Heres an example of what the GitHub Actions workflow file might look like: <details>
name: Azure Static Web Apps CI/CD <summary>Example Workflow File</summary>
``` Heres an example of what the GitHub Actions workflow file might look like:
on: name: Azure Static Web Apps CI/CD
push:
branches: ```
- main on:
pull_request: push:
types: [opened, synchronize, reopened, closed] branches:
branches: - main
- main pull_request:
types: [opened, synchronize, reopened, closed]
jobs: branches:
build_and_deploy_job: - main
runs-on: ubuntu-latest
name: Build and Deploy Job jobs:
steps: build_and_deploy_job:
- uses: actions/checkout@v2 runs-on: ubuntu-latest
- name: Build And Deploy name: Build and Deploy Job
id: builddeploy steps:
uses: Azure/static-web-apps-deploy@v1 - uses: actions/checkout@v2
with: - name: Build And Deploy
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }} id: builddeploy
repo_token: ${{ secrets.GITHUB_TOKEN }} uses: Azure/static-web-apps-deploy@v1
action: "upload" with:
app_location: "quiz-app" # App source code path azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
api_location: ""API source code path optional repo_token: ${{ secrets.GITHUB_TOKEN }}
output_location: "dist" #Built app content directory - optional action: "upload"
``` app_location: "quiz-app" # App source code path
api_location: ""API source code path optional
output_location: "dist" #Built app content directory - optional
```
</details>
- Post-Deployment: After deployment is complete, click on 'Go to Deployment' then 'View app in browser'.
Once your GitHub Action is executed successfully, refresh the live page to view your application. Once your GitHub Action (workflow) is executed successfully, refresh the live page to view your application.
Loading…
Cancel
Save