You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
Web-Dev-For-Beginners/quiz-app
chris b693422fdd
Update README.md
2 months ago
..
public upgrading app to vue 3 2 months ago
src fixing lint errors 2 months ago
.eslintrc.cjs upgrading app to vue 3 2 months ago
.gitignore remvoing .vscode 2 months ago
README.md Update README.md 2 months ago
index.html upgrading app to vue 3 2 months ago
jsconfig.json upgrading app to vue 3 2 months ago
package-lock.json upgrading app to vue 3 2 months ago
package.json upgrading app to vue 3 2 months ago
vite.config.js upgrading app to vue 3 2 months ago

README.md

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.

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.

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;

Run the Quiz App locally

Prerequisites

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. Sign up for one for free here.

    Cost Estimate to deploy this quiz-app: FREE

Deploy to Azure

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'

    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 Heres 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'.

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