Web-Dev-For-Beginners/translations/tl/quiz-app

Quiz app

Ang mga pagsusulit na ito ay pre- at post-lecture quizzes para sa data science curriculum sa https://aka.ms/webdev-beginners

Pagdaragdag ng isinaling set ng pagsusulit

Magdagdag ng salin ng pagsusulit sa pamamagitan ng paggawa ng katugmang istruktura ng pagsusulit sa mga folder na assets/translations. Ang mga orihinal na pagsusulit ay nasa assets/translations/en. Ang mga pagsusulit ay hinati sa ilang grupo. Siguraduhing i-align ang pag-number sa tamang seksyon ng pagsusulit. May kabuuang 40 pagsusulit sa curriculum na ito, na nagsisimula sa 0.

Narito ang anyo ng isang file ng salin:

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

Pagkatapos i-edit ang mga salin, i-edit ang index.js file sa translation folder upang i-import ang lahat ng mga file ayon sa mga convention sa en.

I-edit ang index.js file sa assets/translations upang i-import ang mga bagong isinaling file.

Halimbawa, kung ang iyong JSON na salin ay nasa ex.json, gawing 'ex' ang localization key, pagkatapos ay ilagay ito tulad ng ipinapakita sa ibaba upang i-import ito.

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;

Patakbuhin ang Quiz App nang lokal

Mga Kinakailangan

• Isang GitHub account
• Node.js at Git

Pag-install at Setup

1. Gumawa ng repository mula sa template

2. I-clone ang iyong bagong repository, at mag-navigate sa quiz-app

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

3. I-install ang npm packages at dependencies

   npm install
   

I-build ang app

1. Upang i-build ang solusyon, patakbuhin:

   npm run build
   

Simulan ang App

1. Upang patakbuhin ang solusyon, patakbuhin:

   npm run dev
   

[Opsyonal] Linting

1. Upang matiyak na ang code ay na-lint, patakbuhin:

   npm run lint
   

I-deploy ang Quiz-app sa Azure

Mga Kinakailangan

• Isang Azure Subscription. Mag-sign up nang libre dito.

  Tinatayang Gastos sa pag-deploy ng quiz-app na ito: LIBRE

Kapag naka-sign in ka na sa Azure sa pamamagitan ng link sa itaas, pumili ng subscription at resource group pagkatapos:

• Mga Detalye ng Static Web App: Magbigay ng pangalan at pumili ng hosting plan

• GitHub Login: Itakda ang iyong deployment source bilang GitHub pagkatapos mag-log in at punan ang mga kinakailangang field sa form:

  • Organization – Piliin ang iyong organisasyon.
  • Repository – Piliin ang Web Dev for Beginners curriculum repository.
  • Branch - Piliin ang branch (main)

• Build Presets: Gumagamit ang Azure Static Web Apps ng detection algorithm upang matukoy ang framework na ginamit sa iyong application.

  • App location - ./quiz-app
  • Api location -
  • Output location - dist

• Deployment: I-click ang 'Review + Create', pagkatapos 'Create'

  Kapag na-deploy na, isang workflow file ang malilikha sa .github directory ng iyong repo. Ang workflow file na ito ay naglalaman ng mga tagubilin sa mga event na magti-trigger ng re-deployment ng app sa Azure, halimbawa, isang push sa branch main atbp.

  Halimbawa ng Workflow File

  Narito ang isang halimbawa kung ano ang maaaring hitsura ng GitHub Actions workflow file: 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: Pagkatapos makumpleto ang deployment, i-click ang 'Go to Deployment' pagkatapos 'View app in browser'.

Kapag matagumpay na na-execute ang iyong GitHub Action (workflow), i-refresh ang live page upang makita ang iyong application.

---

Paunawa:
Ang dokumentong ito ay isinalin gamit ang AI translation service na Co-op Translator. Bagama't sinisikap naming maging tumpak, tandaan na ang mga awtomatikong pagsasalin ay maaaring maglaman ng mga pagkakamali o hindi pagkakatugma. Ang orihinal na dokumento sa kanyang katutubong wika ang dapat ituring na opisyal na sanggunian. Para sa mahalagang impormasyon, inirerekomenda ang propesyonal na pagsasalin ng tao. Hindi kami mananagot sa anumang hindi pagkakaunawaan o maling interpretasyon na maaaring magmula sa paggamit ng pagsasaling ito.