Web-Dev-For-Beginners/quiz-app

Quiz app

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

• A GitHub account
• Node.js and Git

Install & Setup

1. Create a repository from this template

2. Clone your new repository, and navigate to the quiz-app

   git clone https://github.com/your-github-organization/repo-name
   cd repo-name/quiz-app
   

3. Install the npm packages & dependencies

   npm install
   

Build the app

1. To build the solution, run:

   npm run build
   

Start the App

1. To run the solution, run:

   npm run dev
   

[Optional] Linting

1. To ensure the code is linted, run:

   npm run lint
   

Deploy the Quiz-app to Azure

Prerequisites

• An Azure Subscription. Cost Estimate: FREE

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

Once your GitHub Action is executed successfully, refresh the live page to view your application.