Skip to content

Commit 1104962

Browse files
juliamuiruri4juliamuiruri4
committed
Added examples for managing translations on the app
1 parent 470e245 commit 1104962

File tree

1 file changed

+105
-36
lines changed

1 file changed

+105
-36
lines changed

‎quiz-app/README.md

Lines changed: 105 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,72 @@ These quizzes are the pre- and post-lecture quizzes for the data science curricu
66

77
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.
88

9+
10+
<details>
11+
<summary>Here's the shape of a translation file:</summary>
12+
13+
```
14+
[
15+
{
16+
"title": "A title",
17+
"complete": "A complete button title",
18+
"error": "An error message upon selecting the wrong answer",
19+
"quizzes": [
20+
{
21+
"id": 1,
22+
"title": "Title",
23+
"quiz": [
24+
{
25+
"questionText": "The question asked",
26+
"answerOptions": [
27+
{
28+
"answerText": "Option 1 title",
29+
"isCorrect": true
30+
},
31+
{
32+
"answerText": "Option 2 title",
33+
"isCorrect": false
34+
}
35+
]
36+
}
37+
]
38+
}
39+
]
40+
}
41+
]
42+
```
43+
</details>
44+
945
After editing the translations, edit the index.js file in the translation folder to import all the files following the conventions in `en`.
1046

11-
Edit the `index.js` file in `assets/translations` to import the new translated files.
47+
Edit the `index.js` file in `assets/translations` to import the new translated files.
48+
49+
For example, if your translation JSON is in `ex.json`, make 'ex' the localization key, then enter it as shown below to import it
50+
51+
<details>
52+
<summary>index.js</summary>
53+
54+
```
55+
import ex from "./ex.json";
56+
57+
// if 'ex' is localization key then enter it like so in `messages` to expose it
58+
59+
const messages = {
60+
ex: ex[0],
61+
};
62+
63+
export default messages;
64+
```
65+
66+
</details>
1267

13-
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.
68+
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:
69+
70+
<details>
71+
<summary>App.vue</summary>
72+
TODO
73+
74+
</details>
1475

1576
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.
1677

@@ -65,7 +126,9 @@ Finally, edit all the quiz links in the translated lessons, if they exist, to in
65126
## Deploy the Quiz-app to Azure
66127

67128
### Prerequisites
68-
- An Azure Subscription. _Cost Estimate: FREE_
129+
- An Azure Subscription. Sign up for one for free [here](https://aka.ms/azure-free).
130+
131+
_Cost Estimate to deploy this quiz-app: FREE_
69132

70133
[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp)
71134

@@ -76,43 +139,49 @@ Once you are signed in on Azure through the link above, select a subscription an
76139
- *Organization* – Choose your organization.
77140
- *Repository* – Select the Web Dev for Beginners curriculum repository.
78141
- *Branch* - Select a branch (main)
79-
- Build Presets - Azure Static Web Apps uses a detection algorithm to detect the framework used in your application.
142+
- Build Presets: Azure Static Web Apps uses a detection algorithm to detect the framework used in your application.
80143
- *App location* - ./quiz-app
81144
- *Api location* -
82145
- *Output location* - dist
83146
- Deployment: Click 'Review + Create', then 'Create'
84-
- Post-Deployment: After deployment is complete, click on 'Go to Deployment' then 'View app in browser'.
85147

86-
### Example Workflow File
148+
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.
87149

88-
Here’s an example of what the GitHub Actions workflow file might look like:
89-
name: Azure Static Web Apps CI/CD
90-
```
91-
on:
92-
push:
93-
branches:
94-
- main
95-
pull_request:
96-
types: [opened, synchronize, reopened, closed]
97-
branches:
98-
- main
99-
100-
jobs:
101-
build_and_deploy_job:
102-
runs-on: ubuntu-latest
103-
name: Build and Deploy Job
104-
steps:
105-
- uses: actions/checkout@v2
106-
- name: Build And Deploy
107-
id: builddeploy
108-
uses: Azure/static-web-apps-deploy@v1
109-
with:
110-
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
111-
repo_token: ${{ secrets.GITHUB_TOKEN }}
112-
action: "upload"
113-
app_location: "quiz-app" # App source code path
114-
api_location: ""API source code path optional
115-
output_location: "dist" #Built app content directory - optional
116-
```
150+
<details>
151+
<summary>Example Workflow File</summary>
152+
Here’s an example of what the GitHub Actions workflow file might look like:
153+
name: Azure Static Web Apps CI/CD
154+
155+
```
156+
on:
157+
push:
158+
branches:
159+
- main
160+
pull_request:
161+
types: [opened, synchronize, reopened, closed]
162+
branches:
163+
- main
164+
165+
jobs:
166+
build_and_deploy_job:
167+
runs-on: ubuntu-latest
168+
name: Build and Deploy Job
169+
steps:
170+
- uses: actions/checkout@v2
171+
- name: Build And Deploy
172+
id: builddeploy
173+
uses: Azure/static-web-apps-deploy@v1
174+
with:
175+
azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
176+
repo_token: ${{ secrets.GITHUB_TOKEN }}
177+
action: "upload"
178+
app_location: "quiz-app" # App source code path
179+
api_location: ""API source code path optional
180+
output_location: "dist" #Built app content directory - optional
181+
```
182+
183+
</details>
184+
185+
- Post-Deployment: After deployment is complete, click on 'Go to Deployment' then 'View app in browser'.
117186

118-
Once your GitHub Action is executed successfully, refresh the live page to view your application.
187+
Once your GitHub Action (workflow) is executed successfully, refresh the live page to view your application.

0 commit comments

Comments
 (0)