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

Quiz-App

Diese Quizze sind die Vor- und Nachlese-Quizze für den Data-Science-Lehrplan unter https://aka.ms/webdev-beginners

Hinzufügen eines übersetzten Quiz-Sets

Fügen Sie eine Quiz-Übersetzung hinzu, indem Sie passende Quiz-Strukturen in den Ordnern assets/translations erstellen. Die ursprünglichen Quizze befinden sich in assets/translations/en. Die Quizze sind in mehrere Gruppen unterteilt. Stellen Sie sicher, dass die Nummerierung mit dem entsprechenden Quiz-Abschnitt übereinstimmt. Insgesamt gibt es 40 Quizze in diesem Lehrplan, beginnend mit der Nummer 0.

So sieht eine Übersetzungsdatei aus:

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

Nachdem Sie die Übersetzungen bearbeitet haben, bearbeiten Sie die Datei index.js im Übersetzungsordner, um alle Dateien gemäß den Konventionen in en zu importieren.

Bearbeiten Sie die Datei index.js in assets/translations, um die neuen übersetzten Dateien zu importieren.

Zum Beispiel, wenn Ihre Übersetzungs-JSON-Datei ex.json ist, machen Sie 'ex' zum Lokalisierungsschlüssel und fügen Sie ihn wie unten gezeigt ein, um ihn zu importieren:

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;

Quiz-App lokal ausführen

Voraussetzungen

• Ein GitHub-Konto
• Node.js und Git

Installation & Einrichtung

1. Erstellen Sie ein Repository aus dieser Vorlage

2. Klonen Sie Ihr neues Repository und navigieren Sie zur Quiz-App

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

3. Installieren Sie die npm-Pakete und Abhängigkeiten

   npm install
   

App erstellen

1. Um die Lösung zu erstellen, führen Sie aus:

   npm run build
   

App starten

1. Um die Lösung auszuführen, führen Sie aus:

   npm run dev
   

[Optional] Linting

1. Um sicherzustellen, dass der Code überprüft wird, führen Sie aus:

   npm run lint
   

Quiz-App auf Azure bereitstellen

Voraussetzungen

• Ein Azure-Abonnement. Registrieren Sie sich kostenlos hier.

  Kostenabschätzung für die Bereitstellung dieser Quiz-App: KOSTENLOS

Sobald Sie sich über den obigen Link bei Azure angemeldet haben, wählen Sie ein Abonnement und eine Ressourcengruppe aus:

• Details zur statischen Web-App: Geben Sie einen Namen an und wählen Sie einen Hosting-Plan aus.

• GitHub-Login: Legen Sie Ihre Bereitstellungsquelle als GitHub fest, melden Sie sich an und füllen Sie die erforderlichen Felder im Formular aus:

  • Organisation – Wählen Sie Ihre Organisation.
  • Repository – Wählen Sie das Repository des Web Dev for Beginners-Lehrplans.
  • Branch - Wählen Sie einen Branch (main)

• Build-Voreinstellungen: Azure Static Web Apps verwendet einen Erkennungsalgorithmus, um das Framework Ihrer Anwendung zu erkennen.

  • App-Standort - ./quiz-app
  • API-Standort -
  • Ausgabe-Standort - dist

• Bereitstellung: Klicken Sie auf 'Überprüfen + Erstellen', dann auf 'Erstellen'.

  Nach der Bereitstellung wird eine Workflow-Datei im .github-Verzeichnis Ihres Repos erstellt. Diese Workflow-Datei enthält Anweisungen zu Ereignissen, die eine erneute Bereitstellung der App auf Azure auslösen, z. B. ein Push auf Branch main usw.

  Beispiel-Workflow-Datei

  Hier ist ein Beispiel, wie die GitHub Actions Workflow-Datei aussehen könnte: 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
  

• Nach der Bereitstellung: Nachdem die Bereitstellung abgeschlossen ist, klicken Sie auf 'Zur Bereitstellung gehen' und dann auf 'App im Browser anzeigen'.

Sobald Ihre GitHub-Aktion (Workflow) erfolgreich ausgeführt wurde, aktualisieren Sie die Live-Seite, um Ihre Anwendung anzuzeigen.

Haftungsausschluss:
Dieses Dokument wurde mit dem KI-Übersetzungsdienst Co-op Translator übersetzt. Obwohl wir uns um Genauigkeit bemühen, beachten Sie bitte, dass automatisierte Übersetzungen Fehler oder Ungenauigkeiten enthalten können. Das Originaldokument in seiner ursprünglichen Sprache sollte als maßgebliche Quelle betrachtet werden. Für kritische Informationen wird eine professionelle menschliche Übersetzung empfohlen. Wir übernehmen keine Haftung für Missverständnisse oder Fehlinterpretationen, die sich aus der Nutzung dieser Übersetzung ergeben.