<!--
CO_OP_TRANSLATOR_METADATA:
{
  "original_hash": "5301875c55bb305e6046bed3a4fd06d2",
  "translation_date": "2025-08-28T11:53:58+00:00",
  "source_file": "quiz-app/README.md",
  "language_code": "en"
}
-->
# 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 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.

  
<details>
<summary>Here's the structure of a translation file:</summary>

```
[
    {
        "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
                            }
                        ]
                    }
                ]
            }
        ]
    }
]
```
</details>

After editing the translations, update the `index.js` file in the translation folder to import all the files according to the conventions in `en`.

Edit the `index.js` file in `assets/translations` to import the newly translated files. 

For example, if your translation JSON file is named `ex.json`, use 'ex' as the localization key, and include it as shown below to import it:

<details>
<summary>index.js</summary>

```
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;
```

</details>

## Run the Quiz App locally

### Prerequisites

- A GitHub account
- [Node.js and Git](https://nodejs.org/)

### Install & Setup

1. Create a repository using 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 directory:

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

1. Install the npm packages and 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, execute:

    ```bash
    npm run dev
    ```

### [Optional] Linting

1. To ensure the code is properly linted, run:

    ```bash
    npm run lint
    ```

## Deploy the Quiz-app to Azure 

### Prerequisites
- An Azure Subscription. You can sign up for a free one [here](https://aka.ms/azure-free).

    _Estimated cost to deploy this quiz-app: FREE_

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

Once signed in to Azure via the link above, select a subscription and resource group, then:

- Static Web App details: Provide a name and choose a hosting plan.
- GitHub Login: Set your deployment source to GitHub, then log in and complete the required fields in the form:
    - *Organization* – Select your organization.
    - *Repository* – Choose the Web Dev for Beginners curriculum repository. 
    - *Branch* - Select a branch (main). 
- Build Presets: Azure Static Web Apps uses a detection algorithm to identify the framework used in your application. 
    - *App location* - ./quiz-app
    - *Api location* -
    - *Output location* - dist
- Deployment: Click 'Review + Create', then 'Create'.

    After deployment, a workflow file will be created in the *.github* directory of your repository. This workflow file contains instructions for events that will trigger a re-deployment of the app to Azure, such as _a **push** to branch **main**, etc._

    <details>
    <summary>Example Workflow File</summary>
    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
    ```

    </details>

- Post-Deployment: Once deployment is complete, click 'Go to Deployment' and then 'View app in browser'.

After your GitHub Action (workflow) runs successfully, refresh the live page to see your application.

---

**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.