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

Quiz-app

Dessa quiz är för- och efterföreläsningsquiz för datavetenskapskursen på https://aka.ms/webdev-beginners

Lägga till en översatt quizuppsättning

Lägg till en quizöversättning genom att skapa matchande quizstrukturer i mappen assets/translations. De ursprungliga quizzen finns i assets/translations/en. Quizzen är uppdelade i flera grupperingar. Se till att numreringen stämmer överens med rätt quizsektion. Det finns totalt 40 quiz i denna kurs, med numreringen som börjar på 0.

Så här ser en översättningsfil ut:

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

Efter att du har redigerat översättningarna, redigera index.js-filen i översättningsmappen för att importera alla filer enligt konventionerna i en.

Redigera index.js-filen i assets/translations för att importera de nya översatta filerna.

Till exempel, om din översättnings-JSON finns i ex.json, gör 'ex' till lokaliseringsnyckeln och lägg till den som visas nedan för att importera den.

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;

Kör Quiz-appen lokalt

Förutsättningar

• Ett GitHub-konto
• Node.js och Git

Installera & Ställ in

1. Skapa ett repository från denna mall

2. Klona ditt nya repository och navigera till quiz-appen

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

3. Installera npm-paketen och beroenden

   npm install
   

Bygg appen

1. För att bygga lösningen, kör:

   npm run build
   

Starta appen

1. För att köra lösningen, kör:

   npm run dev
   

[Valfritt] Lintning

1. För att säkerställa att koden är lintad, kör:

   npm run lint
   

Distribuera Quiz-appen till Azure

Förutsättningar

• Ett Azure-abonnemang. Registrera dig för ett gratis här.

  Kostnadsuppskattning för att distribuera denna quiz-app: GRATIS

När du har loggat in på Azure via länken ovan, välj ett abonnemang och en resursgrupp och gör sedan följande:

• Detaljer för Static Web App: Ange ett namn och välj en hostingplan

• GitHub-inloggning: Ställ in din distributionskälla som GitHub, logga sedan in och fyll i de obligatoriska fälten i formuläret:

  • Organisation – Välj din organisation.
  • Repository – Välj repository för Web Dev for Beginners-kursen.
  • Branch - Välj en branch (main)

• Byggförinställningar: Azure Static Web Apps använder en detekteringsalgoritm för att identifiera ramverket som används i din applikation.

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

• Distribution: Klicka på 'Review + Create', sedan 'Create'

  När distributionen är klar kommer en arbetsflödesfil att skapas i .github-katalogen i ditt repository. Denna arbetsflödesfil innehåller instruktioner om händelser som kommer att trigga en omdistribution av appen till Azure, till exempel en push på branch main etc.

  Exempel på arbetsflödesfil

  Här är ett exempel på hur GitHub Actions arbetsflödesfil kan se ut: 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
  

• Efter distribution: När distributionen är klar, klicka på 'Go to Deployment' och sedan 'View app in browser'.

När din GitHub Action (arbetsflöde) har körts framgångsrikt, uppdatera den live-sidan för att se din applikation.

---

Ansvarsfriskrivning:
Detta dokument har översatts med hjälp av AI-översättningstjänsten Co-op Translator. Även om vi strävar efter noggrannhet, bör du vara medveten om att automatiserade översättningar kan innehålla fel eller felaktigheter. Det ursprungliga dokumentet på dess ursprungliga språk bör betraktas som den auktoritativa källan. För kritisk information rekommenderas professionell mänsklig översättning. Vi ansvarar inte för eventuella missförstånd eller feltolkningar som uppstår vid användning av denna översättning.