# Kvíz alkalmazás Ezek a kvízek a data science tananyag előtti és utáni előadásokhoz kapcsolódó kvízek a következő oldalon: https://aka.ms/webdev-beginners ## Fordított kvízkészlet hozzáadása Adj hozzá egy kvízfordítást úgy, hogy létrehozod a megfelelő kvízstruktúrákat az `assets/translations` mappákban. Az eredeti kvízek az `assets/translations/en` mappában találhatók. A kvízek több csoportba vannak osztva. Ügyelj arra, hogy a számozás igazodjon a megfelelő kvízszekcióhoz. Ebben a tananyagban összesen 40 kvíz található, a számozás 0-tól kezdődik.

Íme, hogyan néz ki egy fordítási fájl:

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

A fordítások szerkesztése után szerkeszd a translation mappában található index.js fájlt, hogy importáld az összes fájlt az `en` mappában található konvenciók szerint. Szerkeszd az `index.js` fájlt az `assets/translations` mappában, hogy importáld az új fordított fájlokat. Például, ha a fordítás JSON fájlod neve `ex.json`, akkor az 'ex' lesz a lokalizációs kulcs, és az alábbiak szerint add hozzá az importáláshoz:

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

## A Kvíz alkalmazás futtatása helyben ### Előfeltételek - Egy GitHub fiók - [Node.js és Git](https://nodejs.org/) ### Telepítés és beállítás 1. Hozz létre egy repót ebből a [sablonból](https://github.com/new?template_name=Web-Dev-For-Beginners&template_owner=microsoft) 1. Klónozd az új repót, és navigálj a kvíz-alkalmazás mappájába ```bash git clone https://github.com/your-github-organization/repo-name cd repo-name/quiz-app ``` 1. Telepítsd az npm csomagokat és függőségeket ```bash npm install ``` ### Az alkalmazás felépítése 1. Az alkalmazás felépítéséhez futtasd: ```bash npm run build ``` ### Az alkalmazás indítása 1. Az alkalmazás futtatásához futtasd: ```bash npm run dev ``` ### [Opcionális] Lintelés 1. A kód lintelésének biztosításához futtasd: ```bash npm run lint ``` ## A Kvíz alkalmazás telepítése Azure-ra ### Előfeltételek - Egy Azure előfizetés. Itt regisztrálhatsz ingyenesen: [itt](https://aka.ms/azure-free). _A kvíz alkalmazás telepítésének becsült költsége: INGYENES_ [](https://portal.azure.com/#create/Microsoft.StaticApp) Miután bejelentkeztél az Azure-ra a fenti linken keresztül, válassz egy előfizetést és egy erőforráscsoportot, majd: - Statikus webalkalmazás részletei: Adj meg egy nevet, és válassz egy tárhelyi tervet - GitHub bejelentkezés: Állítsd be a telepítési forrást GitHub-ra, majd jelentkezz be, és töltsd ki az űrlap szükséges mezőit: - *Szervezet* – Válaszd ki a szervezetedet. - *Repository* – Válaszd ki a Web Dev for Beginners tananyag repóját. - *Branch* - Válassz egy ágat (main) - Build Presets: Az Azure Static Web Apps egy észlelési algoritmust használ az alkalmazásodban használt keretrendszer felismerésére. - *App location* - ./quiz-app - *Api location* - - *Output location* - dist - Telepítés: Kattints a 'Review + Create', majd a 'Create' gombra. Miután a telepítés megtörtént, egy workflow fájl jön létre a repo *.github* könyvtárában. Ez a workflow fájl tartalmazza azokat az eseményeket, amelyek újratelepítést indítanak az alkalmazás Azure-ra, például _egy **push** a **main** ágon stb.

Példa Workflow fájl

Íme, hogyan nézhet ki a GitHub Actions workflow fájl: 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 ```

- Telepítés után: Miután a telepítés befejeződött, kattints a 'Go to Deployment', majd a 'View app in browser' gombra. Miután a GitHub Action (workflow) sikeresen lefutott, frissítsd az élő oldalt, hogy megtekinthesd az alkalmazásodat. --- **Felelősség kizárása**: Ez a dokumentum az AI fordítási szolgáltatás [Co-op Translator](https://github.com/Azure/co-op-translator) segítségével lett lefordítva. Bár törekszünk a pontosságra, kérjük, vegye figyelembe, hogy az automatikus fordítások hibákat vagy pontatlanságokat tartalmazhatnak. Az eredeti dokumentum az eredeti nyelvén tekintendő hiteles forrásnak. Kritikus információk esetén javasolt professzionális emberi fordítást igénybe venni. Nem vállalunk felelősséget semmilyen félreértésért vagy téves értelmezésért, amely a fordítás használatából eredhet.