|
|
<!--
|
|
|
CO_OP_TRANSLATOR_METADATA:
|
|
|
{
|
|
|
"original_hash": "e92c33ea498915a13c9aec162616db18",
|
|
|
"translation_date": "2025-08-31T11:11:39+00:00",
|
|
|
"source_file": "quiz-app/README.md",
|
|
|
"language_code": "en"
|
|
|
}
|
|
|
-->
|
|
|
# Quizzes
|
|
|
|
|
|
These quizzes are the pre- and post-lecture quizzes for the data science curriculum at https://aka.ms/datascience-beginners
|
|
|
|
|
|
## Adding a translated quiz set
|
|
|
|
|
|
To add a quiz translation, create corresponding quiz structures in the `assets/translations` folders. The original quizzes are located in `assets/translations/en`. The quizzes are divided into several sections. Ensure the numbering matches the correct quiz section. There are 40 quizzes in total in this curriculum, starting from 0.
|
|
|
|
|
|
After updating the translations, modify the `index.js` file in the translation folder to import all the files, following the conventions in `en`.
|
|
|
|
|
|
Update the `index.js` file in `assets/translations` to import the newly translated files.
|
|
|
|
|
|
Next, update the dropdown in `App.vue` in this app to include your language. Match the localized abbreviation to the folder name for your language.
|
|
|
|
|
|
Finally, update all the quiz links in the translated lessons, if applicable, to include the localization as a query parameter: `?loc=fr`, for example.
|
|
|
|
|
|
## Project setup
|
|
|
|
|
|
```
|
|
|
npm install
|
|
|
```
|
|
|
|
|
|
### Compiles and hot-reloads for development
|
|
|
|
|
|
```
|
|
|
npm run serve
|
|
|
```
|
|
|
|
|
|
### Compiles and minifies for production
|
|
|
|
|
|
```
|
|
|
npm run build
|
|
|
```
|
|
|
|
|
|
### Lints and fixes files
|
|
|
|
|
|
```
|
|
|
npm run lint
|
|
|
```
|
|
|
|
|
|
### Customize configuration
|
|
|
|
|
|
Refer to [Configuration Reference](https://cli.vuejs.org/config/).
|
|
|
|
|
|
Credits: Thanks to the original version of this quiz app: https://github.com/arpan45/simple-quiz-vue
|
|
|
|
|
|
## Deploying to Azure
|
|
|
|
|
|
Here’s a step-by-step guide to help you get started:
|
|
|
|
|
|
1. Fork the GitHub Repository
|
|
|
Ensure your static web app code is in your GitHub repository. Fork this repository.
|
|
|
|
|
|
2. Create an Azure Static Web App
|
|
|
- Create an [Azure account](http://azure.microsoft.com)
|
|
|
- Go to the [Azure portal](https://portal.azure.com)
|
|
|
- Click on “Create a resource” and search for “Static Web App.”
|
|
|
- Click “Create.”
|
|
|
|
|
|
3. Configure the Static Web App
|
|
|
- Basics:
|
|
|
- Subscription: Select your Azure subscription.
|
|
|
- Resource Group: Create a new resource group or use an existing one.
|
|
|
- Name: Provide a name for your static web app.
|
|
|
- Region: Choose the region closest to your users.
|
|
|
|
|
|
- #### Deployment Details:
|
|
|
- Source: Select “GitHub.”
|
|
|
- GitHub Account: Authorize Azure to access your GitHub account.
|
|
|
- Organization: Select your GitHub organization.
|
|
|
- Repository: Choose the repository containing your static web app.
|
|
|
- Branch: Select the branch you want to deploy from.
|
|
|
|
|
|
- #### Build Details:
|
|
|
- Build Presets: Choose the framework your app is built with (e.g., React, Angular, Vue, etc.).
|
|
|
- App Location: Specify the folder containing your app code (e.g., `/` if it’s in the root).
|
|
|
- API Location: If you have an API, specify its location (optional).
|
|
|
- Output Location: Specify the folder where the build output is generated (e.g., `build` or `dist`).
|
|
|
|
|
|
4. Review and Create
|
|
|
Review your settings and click “Create.” Azure will set up the necessary resources and create a GitHub Actions workflow in your repository.
|
|
|
|
|
|
5. GitHub Actions Workflow
|
|
|
Azure will automatically create a GitHub Actions workflow file in your repository (`.github/workflows/azure-static-web-apps-<name>.yml`). This workflow will handle the build and deployment process.
|
|
|
|
|
|
6. Monitor the Deployment
|
|
|
Go to the “Actions” tab in your GitHub repository.
|
|
|
You should see a workflow running. This workflow will build and deploy your static web app to Azure.
|
|
|
Once the workflow completes, your app will be live on the provided Azure URL.
|
|
|
|
|
|
### 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
|
|
|
```
|
|
|
|
|
|
### Additional Resources
|
|
|
- [Azure Static Web Apps Documentation](https://learn.microsoft.com/azure/static-web-apps/getting-started)
|
|
|
- [GitHub Actions Documentation](https://docs.github.com/actions/use-cases-and-examples/deploying/deploying-to-azure-static-web-app)
|
|
|
|
|
|
---
|
|
|
|
|
|
**Disclaimer**:
|
|
|
This document has been translated using the AI translation service [Co-op Translator](https://github.com/Azure/co-op-translator). While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation. |