From 6d9092bcfc8e1e48dd8222921df760f15a26132a Mon Sep 17 00:00:00 2001 From: Julia Muiruri Date: Wed, 4 Sep 2024 14:46:30 +0300 Subject: [PATCH 1/3] Added instructions to run quiz app locally and on Azure --- quiz-app/README.md | 127 +++++++++++++++++++++++++++++++++++---------- 1 file changed, 99 insertions(+), 28 deletions(-) diff --git a/quiz-app/README.md b/quiz-app/README.md index 1ff79c4d..5035580d 100644 --- a/quiz-app/README.md +++ b/quiz-app/README.md @@ -1,35 +1,106 @@ # Quiz app -This quiz app helps you display questions and answers in a quiz format. +These quizzes are the pre- and post-lecture quizzes for the data science curriculum at https://aka.ms/webdev-beginners -## Install the app +## Run the Quiz App locally -Run `npm install` to install the dependencies. +### Prerequisites -```sh -npm install +- A GitHub account +- [Node.js and Git](https://nodejs.org/) + +### Install & Setup + +1. Create a repository from this [template](https://github.com/new?template_name=Web-Dev-For-Beginners&template_owner=microsoft) + +1. Clone your new repository, and navigate to the quiz-app + + ```bash + git clone https://github.com/your-github-organization/repo-name + cd repo-name/quiz-app + ``` + +1. Install the npm packages & dependencies + + ```bash + npm install + ``` + +### Build the app + +1. To build the solution, run: + + ```bash + npm run build + ``` + +### Start the App + +1. To run the solution, run: + + ```bash + npm run dev + ``` + +### [Optional] Linting + +1. To ensure the code is linted, run: + + ```bash + npm run lint + ``` + +## Deploy the Quiz-app to Azure + +### Prerequisites +- An Azure Subscription. _Cost Estimate: FREE_ + +[![Deploy to Azure](https://aka.ms/deploytoazurebutton)](https://portal.azure.com/#create/Microsoft.StaticApp) + +Once you are signed in on Azure through the link above, select a subscription and resource group then: + +- Static Web App details: Provide a name and select a hosting plan +- GitHub Login: Set your deployment source as GitHub then log in and fill in the required fields on the form: + - *Organization* – Choose your organization. + - *Repository* – Select the Web Dev for Beginners curriculum repository. + - *Branch* - Select a branch (main) +- Build Presets - Azure Static Web Apps uses a detection algorithm to detect the framework used in your application. + - *App location* - ./quiz-app + - *Api location* - + - *Output location* - dist +- 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 + +Here’s an example of what the GitHub Actions workflow file might look like: +name: Azure Static Web Apps CI/CD +``` +on: + push: + branches: + - main + pull_request: + types: [opened, synchronize, reopened, closed] + branches: + - main + +jobs: + build_and_deploy_job: + runs-on: ubuntu-latest + name: Build and Deploy Job + steps: + - uses: actions/checkout@v2 + - name: Build And Deploy + id: builddeploy + uses: Azure/static-web-apps-deploy@v1 + with: + azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }} + repo_token: ${{ secrets.GITHUB_TOKEN }} + 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 ``` -## Build the app - -To build the solution, run `npm run build`. - -```sh -npm run build -``` - -## Run - -To run the solution, run `npm run dev`. - -```bash -npm run dev -``` - -## Lint - -To ensure the code is linted, run `npm run lint`. - -```bash -npm run lint -``` \ No newline at end of file +Once your GitHub Action is executed successfully, refresh the live page to view your application. \ No newline at end of file From 470e2457f7d3021722c1f5e936f005e4f2c9a2d3 Mon Sep 17 00:00:00 2001 From: Julia Muiruri Date: Wed, 4 Sep 2024 14:54:56 +0300 Subject: [PATCH 2/3] Added instructions for adding a translated quiz set --- quiz-app/README.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/quiz-app/README.md b/quiz-app/README.md index 5035580d..dc997df6 100644 --- a/quiz-app/README.md +++ b/quiz-app/README.md @@ -2,6 +2,18 @@ These quizzes are the pre- and post-lecture quizzes for the data science curriculum at https://aka.ms/webdev-beginners +## Adding a translated quiz set + +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. + +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. + +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. + +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. + ## Run the Quiz App locally ### Prerequisites From 11049625139f66c8a77fd90c4378f57d46a264fc Mon Sep 17 00:00:00 2001 From: Julia Muiruri Date: Thu, 5 Sep 2024 08:49:31 +0000 Subject: [PATCH 3/3] Added examples for managing translations on the app --- quiz-app/README.md | 143 +++++++++++++++++++++++++++++++++------------ 1 file changed, 106 insertions(+), 37 deletions(-) diff --git a/quiz-app/README.md b/quiz-app/README.md index dc997df6..3942da10 100644 --- a/quiz-app/README.md +++ b/quiz-app/README.md @@ -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. + +
+Here's the shape of a translation file: + +``` +[ + { + "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 + } + ] + } + ] + } + ] + } +] +``` +
+ 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. -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. +For example, if your translation JSON is in `ex.json`, make 'ex' the localization key, then enter it as shown below to import it + +
+index.js + +``` +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; +``` + +
+ +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: + +
+App.vue +TODO + +
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 ### 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) @@ -76,43 +139,49 @@ Once you are signed in on Azure through the link above, select a subscription an - *Organization* – Choose your organization. - *Repository* – Select the Web Dev for Beginners curriculum repository. - *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 - *Api location* - - *Output location* - dist - Deployment: Click 'Review + Create', then 'Create' + + 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. + +
+ Example Workflow File + Here’s an example of what the GitHub Actions workflow file might look like: + name: Azure Static Web Apps CI/CD + + ``` + on: + push: + branches: + - main + pull_request: + types: [opened, synchronize, reopened, closed] + branches: + - main + + jobs: + build_and_deploy_job: + runs-on: ubuntu-latest + name: Build and Deploy Job + steps: + - uses: actions/checkout@v2 + - name: Build And Deploy + id: builddeploy + uses: Azure/static-web-apps-deploy@v1 + with: + azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }} + repo_token: ${{ secrets.GITHUB_TOKEN }} + 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 + ``` + +
+ - Post-Deployment: After deployment is complete, click on 'Go to Deployment' then 'View app in browser'. -### Example Workflow File - -Here’s an example of what the GitHub Actions workflow file might look like: -name: Azure Static Web Apps CI/CD -``` -on: - push: - branches: - - main - pull_request: - types: [opened, synchronize, reopened, closed] - branches: - - main - -jobs: - build_and_deploy_job: - runs-on: ubuntu-latest - name: Build and Deploy Job - steps: - - uses: actions/checkout@v2 - - name: Build And Deploy - id: builddeploy - uses: Azure/static-web-apps-deploy@v1 - with: - azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }} - repo_token: ${{ secrets.GITHUB_TOKEN }} - 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 -``` - -Once your GitHub Action is executed successfully, refresh the live page to view your application. \ No newline at end of file +Once your GitHub Action (workflow) is executed successfully, refresh the live page to view your application. \ No newline at end of file