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

测验应用程序

这些测验是数据科学课程（https://aka.ms/webdev-beginners）中的课前和课后测验。

添加翻译后的测验集

通过在 assets/translations 文件夹中创建匹配的测验结构来添加测验翻译。原始测验位于 assets/translations/en 文件夹中。测验被分为几个部分。请确保编号与正确的测验部分对齐。整个课程共有 40 个测验，编号从 0 开始。

以下是翻译文件的结构示例：

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

编辑翻译文件后，修改翻译文件夹中的 index.js 文件，按照 en 文件夹中的约定导入所有文件。

编辑 assets/translations 文件夹中的 index.js 文件以导入新的翻译文件。

例如，如果你的翻译 JSON 文件是 ex.json，将 'ex' 作为本地化键，然后按照以下方式导入：

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;

本地运行测验应用程序

前置条件

• 一个 GitHub 账户
• Node.js 和 Git

安装与设置

1. 从这个 模板 创建一个代码库

2. 克隆你的新代码库，并导航到 quiz-app 文件夹

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

3. 安装 npm 包和依赖项

   npm install
   

构建应用程序

1. 要构建解决方案，请运行：

   npm run build
   

启动应用程序

1. 要运行解决方案，请运行：

   npm run dev
   

[可选] 代码检查

1. 要确保代码通过检查，请运行：

   npm run lint
   

将测验应用程序部署到 Azure

前置条件

• 一个 Azure 订阅。你可以在 这里 免费注册。

  部署此测验应用程序的费用估算：免费

登录 Azure 后，选择一个订阅和资源组，然后：

• 静态 Web 应用详情：提供一个名称并选择一个托管计划

• GitHub 登录：将部署源设置为 GitHub，然后登录并填写表单中的必填字段：

  • 组织 – 选择你的组织。
  • 代码库 – 选择 Web Dev for Beginners 课程代码库。
  • 分支 - 选择一个分支（main）

• 构建预设：Azure Static Web Apps 使用检测算法来识别应用程序中使用的框架。

  • 应用位置 - ./quiz-app
  • API 位置 -
  • 输出位置 - dist

• 部署：点击“Review + Create”，然后点击“Create”

  部署完成后，一个工作流文件将被创建在代码库的 .github 目录中。这个工作流文件包含触发应用程序重新部署到 Azure 的事件指令，例如，在分支 main 上的 push 等。

  工作流文件示例

  以下是 GitHub Actions 工作流文件的示例： 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
  

• 部署后：部署完成后，点击“Go to Deployment”，然后点击“View app in browser”。

当你的 GitHub Action（工作流）成功执行后，刷新页面即可查看你的应用程序。

免责声明：
本文档使用AI翻译服务Co-op Translator进行翻译。尽管我们努力确保翻译的准确性，但请注意，自动翻译可能包含错误或不准确之处。原始语言的文档应被视为权威来源。对于重要信息，建议使用专业人工翻译。我们对因使用此翻译而产生的任何误解或误读不承担责任。