微信客服：xiaoxionga100
微信客服：ITCS521
23T1-无代写
时间：2024-06-10
项目信息
创建于
2023 年 12 月 31 日
在制品
海登·史密斯 (Hayden Smith) 著 3个月前
姓名 上次提交 最后更新
修复小错误并调整获取答案的行为 9 个月前
更新 App.test.jsx 1年以前
为 23T1 做好准备 1年以前
为 23T1 做好准备 1年以前
为 23T1 做好准备 1年以前
在制品 3个月前
为 23T1 做好准备 1年以前
为 23T1 做好准备 1年以前
为 23T1 做好准备 1年以前
自述文件.md
评估 4 - ReactJS：BigBrain
背景与动机
任务（前端）
支持（后端）
约束和假设
团队合作
评分标准
作品的原创性
提交
延迟提交政策
0. 变更日志
不适用
1. 开始之前
1.1. 背景与动机
2022 年 3 月，你和你的朋友提出了一个创业想法，即为千禧一代打造一个创新的轻量级测验平台，这将在未来几年彻底改变中等和高等教育市场。你以基于
Web 的应用程序的形式提出了这个解决方案，并将这个测验应用程序命名为BigBrain。
一周后，您从一位天使投资人那里获得了一笔 50,000 美元的暂定投资，等待您制作出该应用程序的可运行 MVP。
不久之后，您与朋友讨论了功能和特性集，并一起写出了 RESTful 规范/接口，以便您可以在小组之间划分前端和后端工作。
后端
前端
.gitignore
A11Y.md
奖金.md
自述文件.md
测试.md
UIUX.md
进度.csv
您（以及可选的另一位朋友）决定着手构建前端。您编写了一份前端应遵循的要求和功能列表（在 中进行了描述 section 2）。您还决定在 中完成此应用程序
ReactJS，这是一个用于构建单页应用程序的声明式框架。此前端将基于预定义的接口与您的团队成员正在制作的 Restful API 进行交互。
由于您的 MVP 只会演示一次，因此您的团队认为必须对前端进行彻底测试。
为了满足现代的品味和期望，您还决定确保 UI/UX 和可访问性标准非常高。
此作业是您按照所述标准为该 MVP 构建前端的过程。此作业与流行游戏kahoot密切相关。如果您不熟悉该游戏，我们建议您花时间尝试一下，以便了解该应用
程序的运作方式。
1.2. 观看讲座
在开始之前，您至少需要观看以下讲座（它将帮助您入门）：
JavaScript 生态系统
Node 包管理器
ReactJS 介绍
ReactJS 全局 CSS 使用
ReactJS 生命周期
ReactJS useState 钩子
ReactJS useEffect 钩子
处理多个文件
组件和道具
语法检查
您至少需要观看以下讲座才能完整完成评估：
路由和 SPA
CSS 框架
useContext 钩子
测试介绍
组件测试
UI 测试
2. 前端（待完成的工作）
您需要为提供的后端构建一个前端。此前端应使用 ReactJS 构建。它应是一个单页应用程序，无需刷新即可更新状态。（如果无法将您的应用打造为完全单页
应用，将导致严重的分数扣分）
需要实现一些功能（如下所述）以使您的 ReactJS 应用程序满足任务的要求，并与 3.2 中描述的后端一起运行。
需求描述了一系列屏幕。屏幕可以是弹出窗口/模式，也可以是整个页面。使用该语言是为了让您能够选择如何显示它。屏幕本质上是您的基于 Web 的应用程序
的某种状态。
2.1. 功能 1. 管理员授权 (单人12%，双人10%)
2.1.1. 登录屏幕
此屏幕必须存在唯一路线
用户必须能够输入他们的 email和 password。
如果表单提交失败，则会显示合理的错误消息
必须存在一个按钮才能允许提交表单
表单必须能够在任意字段中按回车键提交
2.1.2. 注册屏幕
此屏幕必须存在唯一路线
用户必须能够输入他们的 email和 password和 name
应该存在一个确认 password字段，供用户重新输入密码。
如果两个密码不匹配，用户应该在提交之前收到错误弹出窗口。
如果表单提交失败，则会显示合理的错误消息
必须存在一个按钮才能允许提交表单
表单必须能够在任意字段中按回车键提交
2.1.3. 注销按钮
在所有需要授权用户的屏幕上，都有一个注销按钮。
单击此注销按钮后，将返回到登录屏幕。
2.2. 功能 2. 管理员创建和编辑游戏（单人游戏 24%，双人游戏 20%）
2.2.1. 仪表板
此屏幕必须存在唯一路线
显示所有游戏的仪表板，其中每个游戏显示标题、问题数量、缩略图和完成的总时间（所有单个问题时间的总和）
列出的每个游戏都应该有一个可点击的元素，让你进入编辑该特定游戏的屏幕
此屏幕上有一个按钮，允许您创建新游戏，并为游戏提供名称。单击它会在服务器上创建一个新游戏，并将另一个可见游戏添加到仪表板。** 此屏幕上有
一个按钮，允许您删除特定游戏。
2.2.2. 编辑 BigBrain 游戏
此屏幕必须存在一个唯一的路线，该路线以游戏 ID 为参数
此屏幕允许用户选择他们想要编辑的问题
此屏幕允许用户删除特定问题，或添加新问题
该屏幕还应允许编辑游戏元数据，例如名称和缩略图
2.2.3. 编辑 BigBrain 游戏问题
此屏幕必须存在一个唯一的路线，该路线在游戏 ID 和问题 ID 上均被参数化
本页可编辑的项目包括：
问题类型（多项选择、单项选择）
单选题有多个答案，玩家可以猜，但只有一个是正确的
多项选择题有多个答案供玩家猜测，但多个答案是正确的，玩家必须选出所有正确的答案
问题本身（作为字符串）
用户回答问题的时间限制
问题值多少分
可以选择附加 YouTube 视频的 URL，或者上传照片，以增强所提出的问题）。
2 到 6 个答案，每个答案都包含字符串形式的答案
2.3. 功能 3. 管理员开始、停止、游戏环节结果（单人游戏占 12%，双人游戏占 10%）
2.3.1. 开始游戏会话
在仪表板页面上，添加开始新会话的功能。
游戏会话开始时，会显示一个弹出窗口，以字符串形式显示游戏的会话 ID
此会话 ID 应该能够通过某种“复制链接ˮ按钮/元素进行复制。单击此项时，会将直接 URL 复制到剪贴板。转到此 URL 时，应向用户提供播放屏幕（如中所
述 2.4），其中已预先填充会话代码。
注意：每次只能激活一个游戏会话。
2.3.2. 停止游戏会话
在仪表板页面上，可以停止已开始的游戏会话。停止游戏会话会将所有活跃玩家发送到结果屏幕。已停止的会话无法重新启动。
当游戏会话停止时，会出现一个弹出窗口，提示管理员“您想查看结果吗？ˮ如果他们单击“是ˮ，则会转到 2.3.3
2.3.3. 推进并获取游戏结果
此屏幕必须存在一个唯一的路由，该路由在会话 ID 上参数化
如果游戏环节尚未结束，管理员应可以继续进行下一个问题或停止环节。您可以在问题进行过程中或问题结束后继续进行。
如果游戏会话已结束，则应显示以下内容：
最多前 5 名用户及其得分的表格
条形图/折线图显示了回答正确问题（X 轴）的人数百分比（Y 轴）的细分
显示每个问题的平均响应/回答时间的一些图表
您认为合适的任何其他有趣信息
2.4. 功能 4. 玩家可以加入并玩游戏（单人游戏占 12%，双人游戏占 10%）
2.4.1. 加入游戏
此屏幕必须存在唯一路线
用户可以通过以下方式进入会话：
导航到他们知道的预定 URL，然后输入管理员提供的会话 ID；或者
只需按照管理员提供的包含会话 ID 的 URL 即可
到达那里后，他们会输入自己的姓名以尝试加入会议。如果成功，他们将被带到 2.4.2。
2.4.2. 玩游戏
如果游戏会话尚未开始（即尚未进入第一个问题），则屏幕上会显示“请等待ˮ。
一旦进入至少第一个问题，用户就会看到一个显示当前正在询问的问题的屏幕。这包括：
问题文本
视频或图像，取决于其是否存在。
倒计时还剩多少秒，直到您无法再回答。
可点击的单个或多个答案的选择。
用户开始选择时，应将答案发送到服务器。如果修改了进一步的选择，则将发送更多请求
当计时器归零时，将显示该问题的答案/结果
答案屏幕一直可见，直到管理员将游戏问题推进到下一个问题。
注意：游戏一旦开始（进入第一个问题或更多问题），其他玩家就不能加入。
2.4.3. 游戏会话结果
回答完最后一个问题后，会显示一个页面，显示主要结果：
玩家在每一道题中的表现
2.5. 高级功能（单人 0%，双人 10%）
2.5.1. 游戏上传
对于 2.2.1，当创建新游戏时，用户可以选择上传包含游戏完整数据的 .csv 或 .json（您选择）文件。数据结构在正常传递到后端之前在前端进行验证。
您应该在项目存储库中提供示例数据文件的副本（）
如果您实现此功能，则必须将示例 .csv 或 .json 附加到项目文件夹中的 repo 中。此文件必须具有名称 2.5.json 或 2.5.csv。这样我们才能在标记时实
际测试它是否有效。
2.5.2. 大厅
如果游戏会话处于活动状态，但尚未移至位置 0（即仍处于位置 -1），则玩家处于不确定状态。构建一个“大厅ˮ屏幕，让用户在等待游戏开始时感到愉快和
有趣。
2.5.3. 过去游戏会话结果
允许管理员访问一个页面，通过该页面他们可以查看游戏先前会话的列表，然后查看先前会话的结果。
2.5.4. 积分系统
设计一个更先进的积分系统，其中玩家的得分是完成问题所花费的时间（即速度）和问题所值的分数的乘积。
应该在结果屏幕上向管理员和玩家解释该积分系统（以书面形式）。
2.6.语法检查
frontend必须通过运行从文件夹内部来运行 Linting npm run lint。
如果您想在热重载期间禁用 linting 检查（只需使用命令行上的检查），则将其 frontend/package.json替换 react-scripts start为
ESLINT_NO_DEV_ERRORS='true'; react-scripts start。注意：这在 Windows 机器上不起作用。
2.7. 测试
作为这项作业的一部分，您需要为您的组件（组件测试）和整个应用程序（UI 测试）编写一些测试。
对于组件测试，您必须：
为不同的组件编写测试（如果单独工作则为 3 个，如果成对工作则为 6 个）
对于每个组件，它们的相似度不得超过 50%（例如，您不能测试“Cardˮ组件和“BigCardˮ组件，因为它们实际上是相同的）
确保您的测试具有出色的覆盖率（查看所有不同的用例和边缘情况）
确保您的测试非常清晰（注释良好且代码不太复杂）
确保你的测试设计良好（测试的逻辑顺序，避免任何不必要的测试或没有增加任何有意义的价值的测试）
（我们鼓励您仅使用浅层组件渲染）
您可以使用讲座中讨论的方法进行组件测试，也可以使用 cypress。
对于UI 测试，你必须：
为管理员的“快乐路径ˮ编写测试，描述如下：
注册成功
成功创建新游戏
（非必须）成功更新游戏缩略图和名称（是的，不会有任何疑问）
成功开始游戏
成功结束游戏（是的，没有人会玩它）
成功加载结果页面
成功退出应用程序
成功重新登录应用程序
（如果是两人一组）还需要为程序的另一种路径编写测试，描述此选择背后的步骤和理由 TESTING.md
组件测试建议
找到一个你写过的简单原始组件，如果你没有，就写一个。这可能包括你使用的常用按钮、弹出窗口、框或输入。通常这些示例只是你可能稍微包装过的
MUI 或其他库组件，并包含你传入的一些 props
只需编写一些单元测试来检查对于给定的 prop 输入，组件是否以某种方式运行（例如动作或视觉显示）等等
例如创建一个 MyButton包装 MUI 的对象 Button。
例如，一个简单的例子是问题的答案列表。它接受我们定义的答案列表，并呈现一堆 MUI ListItems、Checkboxes、TextFields 和 IconButtons
您的应用将由一组页面组成，这些页面由原始组件组成。但是，如果这些页面之间没有组件层，则意味着您的代码模块化程度不够。另一个例子可能是，如
果我们告诉您 - 任何组件都不应超过 50 行代码。您可能会进行重构，将常见的原始集组合成一个新组件。<<<<<<< HEAD
UI 测试建议
对于 Cypress， cy.wait(1000)如果您发现页面渲染速度比 Cypress 尝试测试的速度慢，请考虑在必要时在测试中添加短暂的暂停。
如果您在 WSL2 上使用 Cypress 时遇到问题，请尝试按照本指南进行操作。
其他建议/帮助
如果您愿意，您可以使用 enzyme它进行测试 - 只要一切正常运行 npm run test。
对学生有帮助的一个主题是使用 jest 模拟 fetch 调用。
在评分过程中，导师将运行一个空的（重置）后端 npm run test。
有些学生会遇到 enzyme adapter兼容性问题。如果您遇到这些问题，您可以：
使用这个非官方的 React 17 适配器 ：https://www.npmjs.com/package/@wojtekmaj/enzyme-adapter-react-17；或者
将 react 和 react-dom 降级到 16，但这可能会破坏其他东西，具体取决于您所使用的其他依赖项。
运行测试
frontend必须通过运行从文件夹内部运行测试 npm run test。
=======
UI 测试建议
对于 Cypress， cy.wait(1000)如果您发现页面渲染速度比 Cypress 尝试测试的速度慢，请考虑在必要时在测试中添加短暂的暂停。
如果您在 WSL2 上使用 Cypress 时遇到问题，请尝试按照本指南进行操作。
其他建议/帮助
如果您愿意，您可以使用 enzyme它进行测试 - 只要一切正常运行 npm run test。
对学生有帮助的一个主题是使用 jest 模拟 fetch 调用。
在评分过程中，导师将运行一个空的（重置）后端 npm run test。
有些学生会遇到 enzyme adapter兼容性问题。如果您遇到这些问题，您可以：
使用这个非官方的 React 17 适配器 ：https://www.npmjs.com/package/@wojtekmaj/enzyme-adapter-react-17；或者
将 react 和 react-dom 降级到 16，但这可能会破坏其他东西，具体取决于您所使用的其他依赖项。
运行测试
frontend必须通过运行从文件夹内部运行测试 npm run test。然后您可能需要按 来 a运行所有测试。
欢迎您 npm run test通过更新 test中的脚本来修改命令 frontend/package.json。例如，如果您想在可以使用的 Cypress UI 测试旁边运行标准 React 测
试 react-scripts test —watchAll=false && npm run cypress open，并且如果您已使用 Cypress 进行组件和快乐路径测试，那么您可以将该行替换为
cypress open。
2.8. 其他说明
fetch您可以使用后端数据的端口定义在 frontend/src/config.json
这篇文章可能对一些学生有用
对于 Typescript 用户，请遵循本指南
对于图像，您只需传入 base64 编码的图像即可
对于某些请求，您可能需要“轮询ˮ后端，即让好友端每 1 秒重复进行一次 API 调用以检查更新。
3.1. 前端
导航到该 frontend文件夹 并运行 npm install以安装运行 ReactJS 应用程序所需的所有依赖项。然后运行 npm start以启动 ReactJS 应用程序。
您不需要在后端做任何繁琐的工作。但是，后端接收的一些属性被定义为空白对象。这些是您可以定义的对象，因为后端只会将您的对象存储在某些路由上，然
后在其他路由上将其返回给您（即后端不需要理解您传递给它的某些对象的架构）。感兴趣的属性是组件 questions。它将作为空对象出现在后端 API 中，但
您需要定义它。
我们采用的这种方法实际上是为了使任务更容易，因为它让您可以控制而不必担心后端架构。
不要忘记查看我们关于ReactJS 的有用资源。
3.2. 后端（提供）
您不得修改后端。后端无需做任何工作。它仅用于为您的前端提供支持。
后端服务器存在于您的个人存储库中。克隆此存储库后，您必须 npm install在 backend目录中运行一次。
要运行后端服务器，只需在目录 npm start中运行即可 backend。这将启动后端。
要查看后端的 API 接口，您可以导航到后端的基本 URL（例如 http://localhost:5005）。这将列出您可以与之交互的所有 HTTP 路由。
您的后端在数据存储方面是持久的。这意味着即使您的 express 服务器进程停止运行，数据仍将保留。如果您想将后端中的数据重置为原始起始状态，您可以
npm run reset在后端目录中运行。如果您想复制后端数据（例如用于备份），则只需复制 database.json。如果您想从空数据库开始，您可以 npm run
clear在后端目录中运行。
后端启动后，您可以通过导航 http://localhost:[port]到 Web 浏览器来查看 API 文档。
后端运行的端口（以及前端可以使用的端口）在 中指定 frontend/src/config.js。您可以在此文件中更改端口。此文件的存在是为了让前端知道在与后端通
信时要使用哪个端口。
由于与主要对象相关的数据结构由您定义，因此您需要通过修改 中定义的 3 个包装函数来调整后端 backend/src/custom.js。后端使用它从您的自定义数据
结构中提取含义。您必须在构建前端的后续部分时实现这些功能b>。
请注意：您可以修改后端以获得加分。但您不能修改后端以使作业的核心要求更容易（例如通过添加路线使其他功能构建更容易）。您需要通过论坛寻求批准奖
励后端更改。您还被禁止直接编写自己的后端。
4. 约束和假设
4.1. 语言
您必须在 ReactJS 中实现此任务。您不能使用其他声明式框架，例如 AngularJS 或 VueJS。
您必须尽可能使用 ReactJS 解决方案，并且避免进行任何直接 DOM 操作，除非完全不可避免（请咨询课程工作人员）。
您可以使用任何您想要的 CSS 库，例如 bootstrap 或material-ui。
您可以使用并安装任何可通过 进行安装的库 npm install。您必须提交 package.json更改。
4.2. 浏览器兼容性
您应该确保您的程序已经在以下两种浏览器之一上进行过测试：
本地，Google Chrome（各种操作系统）-确保是最新版本。
在 CSE 机器上。
4.3. 使用在线找到的代码
您可以使用从 Stack Overflow 或其他公开资源等网站获取的少量（< 10 行）通用代码（不特定于作业）。您应该在注释中明确注明此代码的来源。否
则，您不能使用其他人编写的代码。
4.4. 其他要求
规范故意模糊，以便您可以按照自己认为合适的方式构建前端组件。它们的大小、定位、颜色、布局几乎完全由您决定。我们需要一些基本标准，但主要规
定元素和行为。
除了上述需要避免的包之外，您还可以使用 npm 上提供的任何其他包。
禁止使用通用 CSS - 您必须使用 CSS 库（例如material-ui）或样式组件。
5.团队合作
此作业可由两人一组完成。但是，如果您愿意，也可以单独完成。课程协调员将分别组织和协调小组。
如果您组成了一对，除非有特殊情况，否则您将无法离开您的组合。您将一起接受作业评估。
如果您对作业的贡献不大致相等，那么教学人员可能会根据您的 gitlab 历史记录酌情为每个学生授予不同的分数。
请注意：您的贡献将根据通过 gitlab 贡献的代码行和提交来衡量。请通过您自己的机器或帐户提交。如果您是一对，如果是您的搭档将代码推送到 gitlab，您
的贡献将不被视为您的贡献。
请注意：当一对学生中的一人获得特殊考虑时，只会 1) 延长获得特殊考虑的人的截止日期（不会延长另一人的截止日期）；或 2) 得出分数等级。要确定哪种结
果合适，获得特殊考虑的人需要在截止日期前向讲师发送电子邮件，告知他们作业如何分配。
6. 评分标准
您的作业将由课程导师根据以下标准手工评分。
标准 加权 描述
功能集的功能
+ 移动响应能
力
50％ 实现的功能满足 `2.1`、`2.2`、`2.3`、`2.4` 和 `2.5`、`2.6`（针对对）中概述的要求。
当您部分或全部完成时，您必须更新 progress.csv此存储库根文件夹中的文件。有效值为“NOˮ、“PARTIALˮ和
“YESˮ。更新此文件是必要的，以便您的导师知道应该关注什么以及应该避免什么 - 让他们最好地了解您的工作并为您
提供您应得的分数。未能正确填写此文件将导致 5% 的扣分。
响应能力 15％ 以移动设备响应方式实现的功能可在宽度为 400px、高度为 700px 的小屏幕上运行
响应式设计将占本部分分数的四分之一
当您部分或全部完成时，您必须更新 progress.csv此存储库根文件夹中的文件。有效值为“NOˮ、“PARTIALˮ和
“YESˮ。更新此文件是必要的，以便您的导师知道应该关注什么以及应该避免什么 - 让他们最好地了解您的工作并为您
提供您应得的分数。未能正确填写此文件将导致 5% 的扣分。
用户界面/用户
体验
10％ 您的应用程序可用且易于导航。没有明显的可用性问题或令人困惑的布局/流程。
您的应用程序智能地使用了 UI/UX 讲座中讨论的 UI/UX 原则和模式。
在“UIUX.mdˮ中描述您为改进 UI/UX 所做的任何尝试。此部分将仅标记该文件中描述的内容。
代码风格 10％ 您的代码很干净，注释很好，变量命名良好，并且布局很好，正如课程风格指南中所强调的那样。
代码遵循讲座中讨论过的和课程风格指南中强调的常见 ReactJS 模式。
经过 Linted 的
代码
5％ 根据提供的 eslint 配置文件，提交的代码完全符合“eslintˮ标准。
测试 5％ 三分之二（10%）的分数来自符合第 2.7 节中有关**组件测试**的要求
三分之一 (5%) 的分数来自遵守第 `2.7` 节中有关 **ui 测试** 的要求
在“TESTING.mdˮ中描述您的测试方法。此部分将仅标记该文件中描述的内容。
无障碍设施 5％ 您的应用程序遵循讲座中涵盖的标准可访问性课程。
描述您为改进“A11Y.mdˮ中的可访问性所做的任何尝试。此部分将仅标记该文件中描述的内容。
（加分项）额
外功能
5％ 实现规范中未包含的额外功能。
额外功能应该是非平凡的，有明确的存在理由，并展示出技术、产品或创意的某种形式。
项目文件夹中的“BONUS.mdˮ中记录的所有额外功能
任何将你的 ass4 分数扩展到 100% 以上的加分都会计入其他作业分数，但不能计入分配给作业分数的 80% 课程分数
之外
为了达到同样的成绩，对单人团体的期望值将是双人团体的一半。
如果您独立工作并完整（高质量）完成高级功能（第 2.5 节），您可以获得满分的奖励分数。
7. 作品的原创性
所提交的作品必须是您自己的作品。不允许提交部分或全部源自他人的作品或与他人共同创作的作品。
此类违规行为的处罚可能包括扣分、自动不及格，甚至可能受到其他学术处罚。作业提交将通过自动和手动方式进行检查。
如果获得奖学金的学生涉及抄袭或其他不当行为，将会被通报给相关奖学金管理部门。
除了 COMP6080 的教学人员外，不要向任何其他人提供或展示你的作业。
如果您出于任何原因故意向他人提供或展示您的作业，并提交了由此衍生的作品，您可能会受到处罚，即使该作品是在未经您知情或同意的情况下提交的。即使
您的作品是由您不认识的第三方提交的，这也适用。
每次您在这个存储库上进行提交或推送时，您都承认您提交的工作是您自己的工作（如上所述）。
请注意，如果您的作品有可能在未经您同意或不知情的情况下被盗用，您不会受到惩罚。
请注意：为了确保您作品的原创性，我们要求您在发布此作业的几周内定期将您的作品提交到 git。定期提交小部分作品（基本上每天至少提交一次）至关重
要。未能定期提交（或至少未能以小部分提交）可能会导致高达 20% 的罚款或导致剽窃指控。
8. 提交
此项作业的截止日期为11月17日星期五晚上10点。
要提交作业，您必须将所有代码推送到 gitlab master 分支。您可以通过查看 gitlab 站点上 master 分支上的代码来检查是否已正确完成此操作。
我们将在您提交时收集您最新的作品在 gitlab 的 master 分支上。
您有责任确保您的代码从 Gitlab 克隆时能够成功运行。
试运行
您可以运行 dryrun 来检查代码的运行情况，基本方法如下：
将代码推送到 GitLab 上的 master
在 CSE 终端（vlab 或实验室机器）上，运行 6080 ass4dryrun bigbrain GROUP_NAME GROUP_NAME 是您的组的名称
9. 延迟提交政策
不接受逾期提交。
创建于
2023 年 12 月 31 日
在制品
海登·史密斯 (Hayden Smith) 著 3个月前
姓名 上次提交 最后更新
修复小错误并调整获取答案的行为 9 个月前
更新 App.test.jsx 1年以前
为 23T1 做好准备 1年以前
为 23T1 做好准备 1年以前
为 23T1 做好准备 1年以前
在制品 3个月前
为 23T1 做好准备 1年以前
为 23T1 做好准备 1年以前
为 23T1 做好准备 1年以前
自述文件.md
评估 4 - ReactJS：BigBrain
背景与动机
任务（前端）
支持（后端）
约束和假设
团队合作
评分标准
作品的原创性
提交
延迟提交政策
0. 变更日志
不适用
1. 开始之前
1.1. 背景与动机
2022 年 3 月，你和你的朋友提出了一个创业想法，即为千禧一代打造一个创新的轻量级测验平台，这将在未来几年彻底改变中等和高等教育市场。你以基于
Web 的应用程序的形式提出了这个解决方案，并将这个测验应用程序命名为BigBrain。
一周后，您从一位天使投资人那里获得了一笔 50,000 美元的暂定投资，等待您制作出该应用程序的可运行 MVP。
不久之后，您与朋友讨论了功能和特性集，并一起写出了 RESTful 规范/接口，以便您可以在小组之间划分前端和后端工作。
后端
前端
.gitignore
A11Y.md
奖金.md
自述文件.md
测试.md
UIUX.md
进度.csv
您（以及可选的另一位朋友）决定着手构建前端。您编写了一份前端应遵循的要求和功能列表（在 中进行了描述 section 2）。您还决定在 中完成此应用程序
ReactJS，这是一个用于构建单页应用程序的声明式框架。此前端将基于预定义的接口与您的团队成员正在制作的 Restful API 进行交互。
由于您的 MVP 只会演示一次，因此您的团队认为必须对前端进行彻底测试。
为了满足现代的品味和期望，您还决定确保 UI/UX 和可访问性标准非常高。
此作业是您按照所述标准为该 MVP 构建前端的过程。此作业与流行游戏kahoot密切相关。如果您不熟悉该游戏，我们建议您花时间尝试一下，以便了解该应用
程序的运作方式。
1.2. 观看讲座
在开始之前，您至少需要观看以下讲座（它将帮助您入门）：
JavaScript 生态系统
Node 包管理器
ReactJS 介绍
ReactJS 全局 CSS 使用
ReactJS 生命周期
ReactJS useState 钩子
ReactJS useEffect 钩子
处理多个文件
组件和道具
语法检查
您至少需要观看以下讲座才能完整完成评估：
路由和 SPA
CSS 框架
useContext 钩子
测试介绍
组件测试
UI 测试
2. 前端（待完成的工作）
您需要为提供的后端构建一个前端。此前端应使用 ReactJS 构建。它应是一个单页应用程序，无需刷新即可更新状态。（如果无法将您的应用打造为完全单页
应用，将导致严重的分数扣分）
需要实现一些功能（如下所述）以使您的 ReactJS 应用程序满足任务的要求，并与 3.2 中描述的后端一起运行。
需求描述了一系列屏幕。屏幕可以是弹出窗口/模式，也可以是整个页面。使用该语言是为了让您能够选择如何显示它。屏幕本质上是您的基于 Web 的应用程序
的某种状态。
2.1. 功能 1. 管理员授权 (单人12%，双人10%)
2.1.1. 登录屏幕
此屏幕必须存在唯一路线
用户必须能够输入他们的 email和 password。
如果表单提交失败，则会显示合理的错误消息
必须存在一个按钮才能允许提交表单
表单必须能够在任意字段中按回车键提交
2.1.2. 注册屏幕
此屏幕必须存在唯一路线
用户必须能够输入他们的 email和 password和 name
应该存在一个确认 password字段，供用户重新输入密码。
如果两个密码不匹配，用户应该在提交之前收到错误弹出窗口。
如果表单提交失败，则会显示合理的错误消息
必须存在一个按钮才能允许提交表单
表单必须能够在任意字段中按回车键提交
2.1.3. 注销按钮
在所有需要授权用户的屏幕上，都有一个注销按钮。
单击此注销按钮后，将返回到登录屏幕。
2.2. 功能 2. 管理员创建和编辑游戏（单人游戏 24%，双人游戏 20%）
2.2.1. 仪表板
此屏幕必须存在唯一路线
显示所有游戏的仪表板，其中每个游戏显示标题、问题数量、缩略图和完成的总时间（所有单个问题时间的总和）
列出的每个游戏都应该有一个可点击的元素，让你进入编辑该特定游戏的屏幕
此屏幕上有一个按钮，允许您创建新游戏，并为游戏提供名称。单击它会在服务器上创建一个新游戏，并将另一个可见游戏添加到仪表板。** 此屏幕上有
一个按钮，允许您删除特定游戏。
2.2.2. 编辑 BigBrain 游戏
此屏幕必须存在一个唯一的路线，该路线以游戏 ID 为参数
此屏幕允许用户选择他们想要编辑的问题
此屏幕允许用户删除特定问题，或添加新问题
该屏幕还应允许编辑游戏元数据，例如名称和缩略图
2.2.3. 编辑 BigBrain 游戏问题
此屏幕必须存在一个唯一的路线，该路线在游戏 ID 和问题 ID 上均被参数化
本页可编辑的项目包括：
问题类型（多项选择、单项选择）
单选题有多个答案，玩家可以猜，但只有一个是正确的
多项选择题有多个答案供玩家猜测，但多个答案是正确的，玩家必须选出所有正确的答案
问题本身（作为字符串）
用户回答问题的时间限制
问题值多少分
可以选择附加 YouTube 视频的 URL，或者上传照片，以增强所提出的问题）。
2 到 6 个答案，每个答案都包含字符串形式的答案
2.3. 功能 3. 管理员开始、停止、游戏环节结果（单人游戏占 12%，双人游戏占 10%）
2.3.1. 开始游戏会话
在仪表板页面上，添加开始新会话的功能。
游戏会话开始时，会显示一个弹出窗口，以字符串形式显示游戏的会话 ID
此会话 ID 应该能够通过某种“复制链接ˮ按钮/元素进行复制。单击此项时，会将直接 URL 复制到剪贴板。转到此 URL 时，应向用户提供播放屏幕（如中所
述 2.4），其中已预先填充会话代码。
注意：每次只能激活一个游戏会话。
2.3.2. 停止游戏会话
在仪表板页面上，可以停止已开始的游戏会话。停止游戏会话会将所有活跃玩家发送到结果屏幕。已停止的会话无法重新启动。
当游戏会话停止时，会出现一个弹出窗口，提示管理员“您想查看结果吗？ˮ如果他们单击“是ˮ，则会转到 2.3.3
2.3.3. 推进并获取游戏结果
此屏幕必须存在一个唯一的路由，该路由在会话 ID 上参数化
如果游戏环节尚未结束，管理员应可以继续进行下一个问题或停止环节。您可以在问题进行过程中或问题结束后继续进行。
如果游戏会话已结束，则应显示以下内容：
最多前 5 名用户及其得分的表格
条形图/折线图显示了回答正确问题（X 轴）的人数百分比（Y 轴）的细分
显示每个问题的平均响应/回答时间的一些图表
您认为合适的任何其他有趣信息
2.4. 功能 4. 玩家可以加入并玩游戏（单人游戏占 12%，双人游戏占 10%）
2.4.1. 加入游戏
此屏幕必须存在唯一路线
用户可以通过以下方式进入会话：
导航到他们知道的预定 URL，然后输入管理员提供的会话 ID；或者
只需按照管理员提供的包含会话 ID 的 URL 即可
到达那里后，他们会输入自己的姓名以尝试加入会议。如果成功，他们将被带到 2.4.2。
2.4.2. 玩游戏
如果游戏会话尚未开始（即尚未进入第一个问题），则屏幕上会显示“请等待ˮ。
一旦进入至少第一个问题，用户就会看到一个显示当前正在询问的问题的屏幕。这包括：
问题文本
视频或图像，取决于其是否存在。
倒计时还剩多少秒，直到您无法再回答。
可点击的单个或多个答案的选择。
用户开始选择时，应将答案发送到服务器。如果修改了进一步的选择，则将发送更多请求
当计时器归零时，将显示该问题的答案/结果
答案屏幕一直可见，直到管理员将游戏问题推进到下一个问题。
注意：游戏一旦开始（进入第一个问题或更多问题），其他玩家就不能加入。
2.4.3. 游戏会话结果
回答完最后一个问题后，会显示一个页面，显示主要结果：
玩家在每一道题中的表现
2.5. 高级功能（单人 0%，双人 10%）
2.5.1. 游戏上传
对于 2.2.1，当创建新游戏时，用户可以选择上传包含游戏完整数据的 .csv 或 .json（您选择）文件。数据结构在正常传递到后端之前在前端进行验证。
您应该在项目存储库中提供示例数据文件的副本（）
如果您实现此功能，则必须将示例 .csv 或 .json 附加到项目文件夹中的 repo 中。此文件必须具有名称 2.5.json 或 2.5.csv。这样我们才能在标记时实
际测试它是否有效。
2.5.2. 大厅
如果游戏会话处于活动状态，但尚未移至位置 0（即仍处于位置 -1），则玩家处于不确定状态。构建一个“大厅ˮ屏幕，让用户在等待游戏开始时感到愉快和
有趣。
2.5.3. 过去游戏会话结果
允许管理员访问一个页面，通过该页面他们可以查看游戏先前会话的列表，然后查看先前会话的结果。
2.5.4. 积分系统
设计一个更先进的积分系统，其中玩家的得分是完成问题所花费的时间（即速度）和问题所值的分数的乘积。
应该在结果屏幕上向管理员和玩家解释该积分系统（以书面形式）。
2.6.语法检查
frontend必须通过运行从文件夹内部来运行 Linting npm run lint。
如果您想在热重载期间禁用 linting 检查（只需使用命令行上的检查），则将其 frontend/package.json替换 react-scripts start为
ESLINT_NO_DEV_ERRORS='true'; react-scripts start。注意：这在 Windows 机器上不起作用。
2.7. 测试
作为这项作业的一部分，您需要为您的组件（组件测试）和整个应用程序（UI 测试）编写一些测试。
对于组件测试，您必须：
为不同的组件编写测试（如果单独工作则为 3 个，如果成对工作则为 6 个）
对于每个组件，它们的相似度不得超过 50%（例如，您不能测试“Cardˮ组件和“BigCardˮ组件，因为它们实际上是相同的）
确保您的测试具有出色的覆盖率（查看所有不同的用例和边缘情况）
确保您的测试非常清晰（注释良好且代码不太复杂）
确保你的测试设计良好（测试的逻辑顺序，避免任何不必要的测试或没有增加任何有意义的价值的测试）
（我们鼓励您仅使用浅层组件渲染）
您可以使用讲座中讨论的方法进行组件测试，也可以使用 cypress。
对于UI 测试，你必须：
为管理员的“快乐路径ˮ编写测试，描述如下：
注册成功
成功创建新游戏
（非必须）成功更新游戏缩略图和名称（是的，不会有任何疑问）
成功开始游戏
成功结束游戏（是的，没有人会玩它）
成功加载结果页面
成功退出应用程序
成功重新登录应用程序
（如果是两人一组）还需要为程序的另一种路径编写测试，描述此选择背后的步骤和理由 TESTING.md
组件测试建议
找到一个你写过的简单原始组件，如果你没有，就写一个。这可能包括你使用的常用按钮、弹出窗口、框或输入。通常这些示例只是你可能稍微包装过的
MUI 或其他库组件，并包含你传入的一些 props
只需编写一些单元测试来检查对于给定的 prop 输入，组件是否以某种方式运行（例如动作或视觉显示）等等
例如创建一个 MyButton包装 MUI 的对象 Button。
例如，一个简单的例子是问题的答案列表。它接受我们定义的答案列表，并呈现一堆 MUI ListItems、Checkboxes、TextFields 和 IconButtons
您的应用将由一组页面组成，这些页面由原始组件组成。但是，如果这些页面之间没有组件层，则意味着您的代码模块化程度不够。另一个例子可能是，如
果我们告诉您 - 任何组件都不应超过 50 行代码。您可能会进行重构，将常见的原始集组合成一个新组件。<<<<<<< HEAD
UI 测试建议
对于 Cypress， cy.wait(1000)如果您发现页面渲染速度比 Cypress 尝试测试的速度慢，请考虑在必要时在测试中添加短暂的暂停。
如果您在 WSL2 上使用 Cypress 时遇到问题，请尝试按照本指南进行操作。
其他建议/帮助
如果您愿意，您可以使用 enzyme它进行测试 - 只要一切正常运行 npm run test。
对学生有帮助的一个主题是使用 jest 模拟 fetch 调用。
在评分过程中，导师将运行一个空的（重置）后端 npm run test。
有些学生会遇到 enzyme adapter兼容性问题。如果您遇到这些问题，您可以：
使用这个非官方的 React 17 适配器 ：https://www.npmjs.com/package/@wojtekmaj/enzyme-adapter-react-17；或者
将 react 和 react-dom 降级到 16，但这可能会破坏其他东西，具体取决于您所使用的其他依赖项。
运行测试
frontend必须通过运行从文件夹内部运行测试 npm run test。
=======
UI 测试建议
对于 Cypress， cy.wait(1000)如果您发现页面渲染速度比 Cypress 尝试测试的速度慢，请考虑在必要时在测试中添加短暂的暂停。
如果您在 WSL2 上使用 Cypress 时遇到问题，请尝试按照本指南进行操作。
其他建议/帮助
如果您愿意，您可以使用 enzyme它进行测试 - 只要一切正常运行 npm run test。
对学生有帮助的一个主题是使用 jest 模拟 fetch 调用。
在评分过程中，导师将运行一个空的（重置）后端 npm run test。
有些学生会遇到 enzyme adapter兼容性问题。如果您遇到这些问题，您可以：
使用这个非官方的 React 17 适配器 ：https://www.npmjs.com/package/@wojtekmaj/enzyme-adapter-react-17；或者
将 react 和 react-dom 降级到 16，但这可能会破坏其他东西，具体取决于您所使用的其他依赖项。
运行测试
frontend必须通过运行从文件夹内部运行测试 npm run test。然后您可能需要按 来 a运行所有测试。
欢迎您 npm run test通过更新 test中的脚本来修改命令 frontend/package.json。例如，如果您想在可以使用的 Cypress UI 测试旁边运行标准 React 测
试 react-scripts test —watchAll=false && npm run cypress open，并且如果您已使用 Cypress 进行组件和快乐路径测试，那么您可以将该行替换为
cypress open。
2.8. 其他说明
fetch您可以使用后端数据的端口定义在 frontend/src/config.json
这篇文章可能对一些学生有用
对于 Typescript 用户，请遵循本指南
对于图像，您只需传入 base64 编码的图像即可
对于某些请求，您可能需要“轮询ˮ后端，即让好友端每 1 秒重复进行一次 API 调用以检查更新。
3.1. 前端
导航到该 frontend文件夹 并运行 npm install以安装运行 ReactJS 应用程序所需的所有依赖项。然后运行 npm start以启动 ReactJS 应用程序。
您不需要在后端做任何繁琐的工作。但是，后端接收的一些属性被定义为空白对象。这些是您可以定义的对象，因为后端只会将您的对象存储在某些路由上，然
后在其他路由上将其返回给您（即后端不需要理解您传递给它的某些对象的架构）。感兴趣的属性是组件 questions。它将作为空对象出现在后端 API 中，但
您需要定义它。
我们采用的这种方法实际上是为了使任务更容易，因为它让您可以控制而不必担心后端架构。
不要忘记查看我们关于ReactJS 的有用资源。
3.2. 后端（提供）
您不得修改后端。后端无需做任何工作。它仅用于为您的前端提供支持。
后端服务器存在于您的个人存储库中。克隆此存储库后，您必须 npm install在 backend目录中运行一次。
要运行后端服务器，只需在目录 npm start中运行即可 backend。这将启动后端。
要查看后端的 API 接口，您可以导航到后端的基本 URL（例如 http://localhost:5005）。这将列出您可以与之交互的所有 HTTP 路由。
您的后端在数据存储方面是持久的。这意味着即使您的 express 服务器进程停止运行，数据仍将保留。如果您想将后端中的数据重置为原始起始状态，您可以
npm run reset在后端目录中运行。如果您想复制后端数据（例如用于备份），则只需复制 database.json。如果您想从空数据库开始，您可以 npm run
clear在后端目录中运行。
后端启动后，您可以通过导航 http://localhost:[port]到 Web 浏览器来查看 API 文档。
后端运行的端口（以及前端可以使用的端口）在 中指定 frontend/src/config.js。您可以在此文件中更改端口。此文件的存在是为了让前端知道在与后端通
信时要使用哪个端口。
由于与主要对象相关的数据结构由您定义，因此您需要通过修改 中定义的 3 个包装函数来调整后端 backend/src/custom.js。后端使用它从您的自定义数据
结构中提取含义。您必须在构建前端的后续部分时实现这些功能b>。
请注意：您可以修改后端以获得加分。但您不能修改后端以使作业的核心要求更容易（例如通过添加路线使其他功能构建更容易）。您需要通过论坛寻求批准奖
励后端更改。您还被禁止直接编写自己的后端。
4. 约束和假设
4.1. 语言
您必须在 ReactJS 中实现此任务。您不能使用其他声明式框架，例如 AngularJS 或 VueJS。
您必须尽可能使用 ReactJS 解决方案，并且避免进行任何直接 DOM 操作，除非完全不可避免（请咨询课程工作人员）。
您可以使用任何您想要的 CSS 库，例如 bootstrap 或material-ui。
您可以使用并安装任何可通过 进行安装的库 npm install。您必须提交 package.json更改。
4.2. 浏览器兼容性
您应该确保您的程序已经在以下两种浏览器之一上进行过测试：
本地，Google Chrome（各种操作系统）-确保是最新版本。
在 CSE 机器上。
4.3. 使用在线找到的代码
您可以使用从 Stack Overflow 或其他公开资源等网站获取的少量（< 10 行）通用代码（不特定于作业）。您应该在注释中明确注明此代码的来源。否
则，您不能使用其他人编写的代码。
4.4. 其他要求
规范故意模糊，以便您可以按照自己认为合适的方式构建前端组件。它们的大小、定位、颜色、布局几乎完全由您决定。我们需要一些基本标准，但主要规
定元素和行为。
除了上述需要避免的包之外，您还可以使用 npm 上提供的任何其他包。
禁止使用通用 CSS - 您必须使用 CSS 库（例如material-ui）或样式组件。
5.团队合作
此作业可由两人一组完成。但是，如果您愿意，也可以单独完成。课程协调员将分别组织和协调小组。
如果您组成了一对，除非有特殊情况，否则您将无法离开您的组合。您将一起接受作业评估。
如果您对作业的贡献不大致相等，那么教学人员可能会根据您的 gitlab 历史记录酌情为每个学生授予不同的分数。
请注意：您的贡献将根据通过 gitlab 贡献的代码行和提交来衡量。请通过您自己的机器或帐户提交。如果您是一对，如果是您的搭档将代码推送到 gitlab，您
的贡献将不被视为您的贡献。
请注意：当一对学生中的一人获得特殊考虑时，只会 1) 延长获得特殊考虑的人的截止日期（不会延长另一人的截止日期）；或 2) 得出分数等级。要确定哪种结
果合适，获得特殊考虑的人需要在截止日期前向讲师发送电子邮件，告知他们作业如何分配。
6. 评分标准
您的作业将由课程导师根据以下标准手工评分。
标准 加权 描述
功能集的功能
+ 移动响应能
力
50％ 实现的功能满足 `2.1`、`2.2`、`2.3`、`2.4` 和 `2.5`、`2.6`（针对对）中概述的要求。
当您部分或全部完成时，您必须更新 progress.csv此存储库根文件夹中的文件。有效值为“NOˮ、“PARTIALˮ和
“YESˮ。更新此文件是必要的，以便您的导师知道应该关注什么以及应该避免什么 - 让他们最好地了解您的工作并为您
提供您应得的分数。未能正确填写此文件将导致 5% 的扣分。
响应能力 15％ 以移动设备响应方式实现的功能可在宽度为 400px、高度为 700px 的小屏幕上运行
响应式设计将占本部分分数的四分之一
当您部分或全部完成时，您必须更新 progress.csv此存储库根文件夹中的文件。有效值为“NOˮ、“PARTIALˮ和
“YESˮ。更新此文件是必要的，以便您的导师知道应该关注什么以及应该避免什么 - 让他们最好地了解您的工作并为您
提供您应得的分数。未能正确填写此文件将导致 5% 的扣分。
用户界面/用户
体验
10％ 您的应用程序可用且易于导航。没有明显的可用性问题或令人困惑的布局/流程。
您的应用程序智能地使用了 UI/UX 讲座中讨论的 UI/UX 原则和模式。
在“UIUX.mdˮ中描述您为改进 UI/UX 所做的任何尝试。此部分将仅标记该文件中描述的内容。
代码风格 10％ 您的代码很干净，注释很好，变量命名良好，并且布局很好，正如课程风格指南中所强调的那样。
代码遵循讲座中讨论过的和课程风格指南中强调的常见 ReactJS 模式。
经过 Linted 的
代码
5％ 根据提供的 eslint 配置文件，提交的代码完全符合“eslintˮ标准。
测试 5％ 三分之二（10%）的分数来自符合第 2.7 节中有关**组件测试**的要求
三分之一 (5%) 的分数来自遵守第 `2.7` 节中有关 **ui 测试** 的要求
在“TESTING.mdˮ中描述您的测试方法。此部分将仅标记该文件中描述的内容。
无障碍设施 5％ 您的应用程序遵循讲座中涵盖的标准可访问性课程。
描述您为改进“A11Y.mdˮ中的可访问性所做的任何尝试。此部分将仅标记该文件中描述的内容。
（加分项）额
外功能
5％ 实现规范中未包含的额外功能。
额外功能应该是非平凡的，有明确的存在理由，并展示出技术、产品或创意的某种形式。
项目文件夹中的“BONUS.mdˮ中记录的所有额外功能
任何将你的 ass4 分数扩展到 100% 以上的加分都会计入其他作业分数，但不能计入分配给作业分数的 80% 课程分数
之外
为了达到同样的成绩，对单人团体的期望值将是双人团体的一半。
如果您独立工作并完整（高质量）完成高级功能（第 2.5 节），您可以获得满分的奖励分数。
7. 作品的原创性
所提交的作品必须是您自己的作品。不允许提交部分或全部源自他人的作品或与他人共同创作的作品。
此类违规行为的处罚可能包括扣分、自动不及格，甚至可能受到其他学术处罚。作业提交将通过自动和手动方式进行检查。
如果获得奖学金的学生涉及抄袭或其他不当行为，将会被通报给相关奖学金管理部门。
除了 COMP6080 的教学人员外，不要向任何其他人提供或展示你的作业。
如果您出于任何原因故意向他人提供或展示您的作业，并提交了由此衍生的作品，您可能会受到处罚，即使该作品是在未经您知情或同意的情况下提交的。即使
您的作品是由您不认识的第三方提交的，这也适用。
每次您在这个存储库上进行提交或推送时，您都承认您提交的工作是您自己的工作（如上所述）。
请注意，如果您的作品有可能在未经您同意或不知情的情况下被盗用，您不会受到惩罚。
请注意：为了确保您作品的原创性，我们要求您在发布此作业的几周内定期将您的作品提交到 git。定期提交小部分作品（基本上每天至少提交一次）至关重
要。未能定期提交（或至少未能以小部分提交）可能会导致高达 20% 的罚款或导致剽窃指控。
8. 提交
此项作业的截止日期为11月17日星期五晚上10点。
要提交作业，您必须将所有代码推送到 gitlab master 分支。您可以通过查看 gitlab 站点上 master 分支上的代码来检查是否已正确完成此操作。
我们将在您提交时收集您最新的作品在 gitlab 的 master 分支上。
您有责任确保您的代码从 Gitlab 克隆时能够成功运行。
试运行
您可以运行 dryrun 来检查代码的运行情况，基本方法如下：
将代码推送到 GitLab 上的 master
在 CSE 终端（vlab 或实验室机器）上，运行 6080 ass4dryrun bigbrain GROUP_NAME GROUP_NAME 是您的组的名称
9. 延迟提交政策
不接受逾期提交。
