Skip to content

Commit a11828a

Browse files
softchrissoftchris
authored
Merge pull request #1332 from juliamuiruri4/main
Added instructions to run quiz app locally and on Azure
2 parents d0cf3ac + 1104962 commit a11828a

File tree

1 file changed

+170
-18
lines changed

1 file changed

+170
-18
lines changed

‎quiz-app/README.md

Lines changed: 170 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,187 @@
11
# Quiz app
22

3-
This quiz app helps you display questions and answers in a quiz format.
3+
These quizzes are the pre- and post-lecture quizzes for the data science curriculum at https://aka.ms/webdev-beginners
44

5-
## Install the app
5+
## Adding a translated quiz set
66

7-
Run `npm install` to install the dependencies.
7+
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-
```sh
10-
npm install
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+
]
1142
```
43+
</details>
44+
45+
After editing the translations, edit the index.js file in the translation folder to import all the files following the conventions in `en`.
1246

13-
## Build the app
47+
Edit the `index.js` file in `assets/translations` to import the new translated files.
1448

15-
To build the solution, run `npm run build`.
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>
1653

17-
```sh
18-
npm run build
1954
```
55+
import ex from "./ex.json";
2056
21-
## Run
57+
// if 'ex' is localization key then enter it like so in `messages` to expose it
2258
23-
To run the solution, run `npm run dev`.
59+
const messages = {
60+
ex: ex[0],
61+
};
2462
25-
```bash
26-
npm run dev
63+
export default messages;
2764
```
2865

29-
## Lint
66+
</details>
67+
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>
75+
76+
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.
77+
78+
## Run the Quiz App locally
79+
80+
### Prerequisites
81+
82+
- A GitHub account
83+
- [Node.js and Git](https://nodejs.org/)
84+
85+
### Install & Setup
86+
87+
1. Create a repository from this [template](https://github.com/new?template_name=Web-Dev-For-Beginners&template_owner=microsoft)
88+
89+
1. Clone your new repository, and navigate to the quiz-app
90+
91+
```bash
92+
git clone https://github.com/your-github-organization/repo-name
93+
cd repo-name/quiz-app
94+
```
95+
96+
1. Install the npm packages & dependencies
97+
98+
```bash
99+
npm install
100+
```
101+
102+
### Build the app
103+
104+
1. To build the solution, run:
105+
106+
```bash
107+
npm run build
108+
```
109+
110+
### Start the App
111+
112+
1. To run the solution, run:
113+
114+
```bash
115+
npm run dev
116+
```
117+
118+
### [Optional] Linting
119+
120+
1. To ensure the code is linted, run:
121+
122+
```bash
123+
npm run lint
124+
```
125+
126+
## Deploy the Quiz-app to Azure
127+
128+
### Prerequisites
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_
132+
133+
[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp)
134+
135+
Once you are signed in on Azure through the link above, select a subscription and resource group then:
136+
137+
- Static Web App details: Provide a name and select a hosting plan
138+
- GitHub Login: Set your deployment source as GitHub then log in and fill in the required fields on the form:
139+
- *Organization* – Choose your organization.
140+
- *Repository* – Select the Web Dev for Beginners curriculum repository.
141+
- *Branch* - Select a branch (main)
142+
- Build Presets: Azure Static Web Apps uses a detection algorithm to detect the framework used in your application.
143+
- *App location* - ./quiz-app
144+
- *Api location* -
145+
- *Output location* - dist
146+
- Deployment: Click 'Review + Create', then 'Create'
147+
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.
149+
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>
30184

31-
To ensure the code is linted, run `npm run lint`.
185+
- Post-Deployment: After deployment is complete, click on 'Go to Deployment' then 'View app in browser'.
32186

33-
```bash
34-
npm run lint
35-
```
187+
Once your GitHub Action (workflow) is executed successfully, refresh the live page to view your application.

0 commit comments

Comments
 (0)