答题类小游戏设计与实现

答题类小游戏设计与实现作者：***
来源：《现代信息科技》2024年第11期
摘要：網站建设与开发课程主要讲授HTML超文本标记语言、CSS层叠样式表、JavaScript脚本语言等知识，属于代码类课程，但是不同于C语言等编程语言，此课程的代码逻辑相对简单，缺点是单词量多，难以记忆。

为此设计了以课程单词记忆为主的知识答题小游戏。

基于木疙瘩软件进行小游戏设计，设置知识题库，学生实名登录后可进行知识答题，还可进行班级内排名，每周统计排行榜前五位，并按位次算分。

学生也可以邀请好友进行答题PK，获胜者加分。

小游戏的最终分数将计入课程平时考核成绩。

关键词：网站建设与开发；答题小游戏；木疙瘩
中图分类号：TP311.5 文献标识码：A 文章编号：2096-4706（2024）11-0090-06
Design and Implementation of Answering Game
—Taking Website Construction and Development Course as an Example
ZHANG Qiaoling
（School of Design and Art， Shandong Huayu University of Technology， Dezhou 253034，China）
Abstract： Website Construction and Development course mainly teaches HTML hypertext markup language， CSS cascading style sheet， JavaScript scripting language and other
knowledge， it belongs to the code course， but it is different from C language and other programming languages， the code logic of this course is relatively simple， the disadvantage is that it has a large vocabulary and is difficult to remember. Therefore， a knowledge answering game is designed to focus on memorizing course vocabulary. It designs small games based on Mugeda software， sets up knowledge question bank， students can log in with their real names to answer knowledge questions， and rank in the class， collect the top 5 in the ranking every week， and add points according to the ranking. Students can also invite their friends to participate in the PK， and the winner gets extra points. The final score of the game will be included in the regular assessment of the course.
Keywords： Website Construction and Development; answering game; Mugeda
0 引言
网站建设与开发课程含有丰富的题库，涵盖网站建设前端的相关知识，包括HTML常用标签和属性、CSS选择器和常用属性、JavaScript常用事件和关键词等。

而知识答题小游戏以知识问答为主要形式，将课程知识和小游戏结合在一起[1]，主要考察学生的知识掌握情况和反应能力。

此外，小游戏中还设置了班级排行榜和好友PK功能，增加了游戏的趣味性和挑战性。

同时将小游戏的最终得分与网站建设与开发课程的平时考核成绩相结合，增加学生答题的积极性。

知识答题小游戏的制作软件很多，大多数是程序设计类的软件，需要通过编程代码来完成，但是针对代码不怎么精通的人群可借助木疙瘩软件来完成小游戏制作。

1 木疙瘩
木疙瘩软件可一站式生产APP图文、微信图文、网页专题、交互H5动画内容，是专业的融媒内容制作与管理的平台。

兼容APP、网站、微信等渠道格式，支持一键推送到公众号及其他渠道的定制服务。

本软件主要有三个版本：H5专业版编辑器、H5简约版编辑器、H5模板编辑器。

其中，H5专业版编辑器其操作习惯及功能类似Adobe Animate（原Flash）软件，基于图层和关键帧的专业动画编辑器支持1 000多种无代码交互功能，可无代码制作答题、抽奖、点赞、排行榜、小游戏等活动，提供JavaScript的常用API，可无限扩展功能。

木疙瘩可提供灵活强大的内容发布服务，可绑定自己的域名和公众号进行发布，同时提供发布CDN加速服务，也可将作品导出部署到自有服务器。

定制服务可直接将内容发布到自己指定的网站栏目、APP、微信后台或其他渠道。

木疙瘩提供统一的数据采集接口，可收集管理表单、照片、录音、绘图等用户反馈数据。

同时提供详细的传播分析数据及浏览行为分析数据，内容的流量、设备、地域和微信传播途径等尽在掌握，精准分析每个用户的浏览和交互行为数据，可用于内容评估、精准营销、用户画像等场景[2]。

2 需求分析
答题类小游戏不仅可以考查学生对知识的掌握情况和反应能力，还可以通过知识题库满足学生的学习需求[3]。

另外授课老师也可以通过答题类小游戏的设计激发学生的学习兴趣和积极性。

可通过微信、QQ扫描二维码的方式直接访问本答题类小游戏，进行学习和答题。

学生随时随地可以进入游戏利用碎片化时间学习，完全契合当前互联网+教育时代移动学习的需求[4]。

2.1 用户需求分析
本答题类小游戏基于网站建设与开发课程进行开发设计，所以在题库设计上比较具体，同时用户的定位也相对集中[5]，就是正在学习本门课程或已经学完本门课程的学生。

除此之外，本答题类小游戏中学生的得分计入网站建设与开发课程的平时考核成绩，所以本答题类小游戏的用户是正在学习本门课程的学生。

学生用户使用本答题类小游戏，需要实名认证，方便统计最后的得分。

学生用户可以通过本答题类小游戏中的知识题库有选择性地学习，提高知识的掌握程度。

另外学生用户也可以通过知识答题获取更高的分数，提高自己在班级排行榜中的排位。

除此之外，学生用户还可以通过好友PK赛来适当增加分数，同时提高知识获取过程中的挑战性和趣味性。

教师用户使用本答题类小程序需要提前建设知识题库[6]，每周日统计排行榜前5名的学生，并给予相应的分数。

同时还要更新和完善知识库，对于全部都能答对的题目可适当地予以删除，对于错误率比较高的题目可在课堂上进行讲解分析，做到“教学相长”。

2.2 设计题库结构
网站建设与开发课程主要讲述网站前端相关知识，其课程知识讲授的顺序是先通过HTML 创建网页元素，再通过CSS美化网页内容，最后通过JavaScript实现动态交互。

所以本答题类小游戏题库的设计需要与课程进度相符，答题共分四个关卡，第一个关卡命名为“H”，主要包含HTML标签和常用的属性设置，主要题型是单选题和判断题；第二个关卡命名为“S”，主要包含CSS选择器、CSS使用规则、CSS网页布局、CSS常用属性、CSS盒子模型、网站相关实例分析等，主要题型是单选题和判断题；第三个关卡命名为“J”，主要包含JavaScript常用事件、JavaScript条件语句和循环，主要题型是单选题和判断题；第四个关卡命名为“C”，主要包含综合的知识点和项目案例，主要题型是选择题。

学生需要通过学号注册，通过知识答题查看班内排行榜，每天有2次答题机会，每周日19：00授课教师查看排行榜分数并计入课程平时成绩。

学生除了通过排行榜获取分数外，还可以通过邀请好友PK获得一定的分数，每天有1次机会。

3 产品设计
学生可以通过微信或QQ等直接扫码进入小游戏，以答题的形式将网站建设与开发课程的知识点进行串联，借助移动平台的便利性对课程知识进行碎片化的处理，便于学生随时随地学习。

本小游戏的用户主要分为教师用户和学生用户[7]，教师用户主要负责题库上传和管理、学生成绩查看与统计、系统维护等，如图1所示。

学生用户主要使用题库学习、限时答题、答題PK等功能，如图2所示。

3.1 主界面设计
如图3所示，根据学生用户和教师用户功能分析，将主界面设计为包含四个模块，分别为知识题库、开始答题、好友PK、班级排行榜。

其中知识题库模块由教师用户提前上传，学生用户可通过知识题库自由学习，提高知识掌握程度[8]。

开始答题模块由学生用户完成，只有经过实名验证后才能使用此模块，每天有两次答题机会，每次系统会随机抽选10道题供用户作答，限时10秒完成，取两次答题的最高分进行班级排名。

好友PK模块由学生用户完成，学生可以实名邀请好友，也可以随机匹配答题，限时完成10道随机题目，答题结束后直接进行排名，排名第一位的可得到相应的分数。

班级排行榜模块则是根据每天学生答题的成绩进行排名，每周日19：00进行成绩统计分析，然后清零，周一上午8：00开始重新统计。

授课教师可通过排行榜了解学生的学习情况和答题情况，及时督促提醒学生查缺补漏。

3.2 答题界面设计
如图4所示为小游戏答题界面[9]，主要包含答题学生的头像、10秒倒计时、已答对的题目数、答题的题目和选项。

选择正确时显示绿色，选择错误时显示红色。

选择错误时会标注正确的选项，以便学生用户学习。

3.3 班级排行榜设计
如图5所示为每周班级排行榜界面，主要注明是第几周的班级排行榜，同时注明本周答对的题目总数。

点击“领取本周奖励”按钮可跳转至个人排行榜位次，前5名会获得相应的分数。

点击“分享排名”可将当前排名分享至微信朋友圈。

授课教师可通过每周的班级排行榜进行成绩统计，并将成绩计入课程的平时考核中。

4 小游戏设计与制作
本小游戏的主要功能有知识题库、随机答题、倒计时、排行榜、分享等。

接下来以木疙瘩H5专业版编辑器为例详细分析如何实现以上功能。

木疙瘩H5专业版编辑器在线版界面左侧工具栏有一项预置考题，如图6所示。

预置考题选项卡中包含单选题、多选题、判断题、填空题、拖拽题、题库和动态题库。

通过不同的选项卡进行不同类型题目的设置。

对于本小游戏中的知识题库，可通过预置考题选项卡中的题库选项进行题库设置，如图7所示。

点击左侧的新建文件夹，可以设置不同关卡的题库，本小游戏总共有4个关卡，创建4个文件夹分别存放HTML部分题库、CSS部分题库、JavaScript部分题库和网站综合案例题库。

4.2 随机答题功能
使用预置考题选项卡中的题库选项进行题库设置，完成题库设置后，点击“随机选题”按钮可弹出“随机组题”窗口，如图8所示。

在“随机组题”窗口中可进行随机组题，主要包含题目类型、抽取数量和分数范围。

2 需求分析
答题类小游戏不仅可以考查学生对知识的掌握情况和反应能力，还可以通过知识题库满足学生的学习需求[3]。

另外授课老师也可以通过答题类小游戏的设计激发学生的学习兴趣和积极性。

可通过微信、QQ扫描二维码的方式直接访问本答题类小游戏，进行学习和答题。

学生随时随地可以进入游戏利用碎片化时间学习，完全契合当前互联网+教育时代移动学习的需求[4]。

2.1 用户需求分析
本答题类小游戏基于网站建设与开发课程进行开发设计，所以在题库设计上比较具体，同时用户的定位也相对集中[5]，就是正在学习本门课程或已经学完本门课程的学生。

除此之外，本答题类小游戏中学生的得分计入网站建设与开发课程的平时考核成绩，所以本答题类小游戏的用户是正在学习本门课程的学生。

学生用户使用本答题类小游戏，需要实名认证，方便统计最后的得分。

学生用户可以通过本答题类小游戏中的知识题库有选择性地学习，提高知识的掌握程度。

另外学生用户也可以通过知识答题获取更高的分数，提高自己在班级排行榜中的排位。

除此之外，学生用户还可以通过好友PK赛来适当增加分数，同时提高知识获取过程中的挑战性和趣味性。

教师用户使用本答题类小程序需要提前建设知识题库[6]，每周日统计排行榜前5名的学生，并给予相应的分数。

同时还要更新和完善知识库，对于全部都能答对的题目可适当地予以删除，对于错误率比较高的题目可在课堂上进行讲解分析，做到“教学相长”。

网站建设与开发课程主要讲述网站前端相关知识，其课程知识讲授的顺序是先通过HTML 创建网页元素，再通过CSS美化网页内容，最后通过JavaScript实现动态交互。

所以本答题类小游戏题库的设计需要与课程进度相符，答题共分四个关卡，第一个关卡命名为“H”，主要包含HTML标签和常用的属性设置，主要题型是单选题和判断题；第二个关卡命名为“S”，主要包含CSS选择器、CSS使用规则、CSS网页布局、CSS常用属性、CSS盒子模型、网站相关实例分析等，主要题型是单选题和判断题；第三个关卡命名为“J”，主要包含JavaScript常用事件、JavaScript条件语句和循环，主要题型是单选题和判断题；第四个关卡命名为“C”，主要包含综合的知识点和项目案例，主要题型是选择题。

学生需要通过学号注册，通过知识答题查看班内排行榜，每天有2次答题机会，每周日19：00授课教师查看排行榜分数并计入课程平时成绩。

学生除了通过排行榜获取分数外，还可以通过邀請好友PK获得一定的分数，每天有1次机会。

3 产品设计
学生可以通过微信或QQ等直接扫码进入小游戏，以答题的形式将网站建设与开发课程的知识点进行串联，借助移动平台的便利性对课程知识进行碎片化的处理，便于学生随时随地学习。

本小游戏的用户主要分为教师用户和学生用户[7]，教师用户主要负责题库上传和管理、学生成绩查看与统计、系统维护等，如图1所示。

学生用户主要使用题库学习、限时答题、答题PK等功能，如图2所示。

3.1 主界面设计
如图3所示，根据学生用户和教师用户功能分析，将主界面设计为包含四个模块，分别为知识题库、开始答题、好友PK、班级排行榜。

其中知识题库模块由教师用户提前上传，学生用户可通过知识题库自由学习，提高知识掌握程度[8]。

开始答题模块由学生用户完成，只有经过实名验证后才能使用此模块，每天有两次答题机会，每次系统会随机抽选10道题供用户作答，限时10秒完成，取两次答题的最高分进行班级排名。

好友PK模块由学生用户完成，学生可以实名邀请好友，也可以随机匹配答题，限时完成10道随机题目，答题结束后直接进行排名，排名第一位的可得到相应的分数。

班级排行榜模块则是根据每天学生答题的成绩进行排名，每周日19：00进行成绩统计分析，然后清零，周一上午8：00开始重新统计。

授课教师可通过排行榜了解学生的学习情况和答题情况，及时督促提醒学生查缺补漏。

3.2 答题界面设计
如图4所示为小游戏答题界面[9]，主要包含答题学生的头像、10秒倒计时、已答对的题目数、答题的题目和选项。

选择正确时显示绿色，选择错误时显示红色。

选择错误时会标注正确的选项，以便学生用户学习。

3.3 班级排行榜设计
如图5所示为每周班级排行榜界面，主要注明是第几周的班级排行榜，同时注明本周答对的题目总数。

点击“领取本周奖励”按钮可跳转至个人排行榜位次，前5名会获得相应的分数。

点击“分享排名”可将当前排名分享至微信朋友圈。

授课教师可通过每周的班级排行榜进行成绩统计，并将成绩计入课程的平时考核中。

4 小游戏设计与制作
本小游戏的主要功能有知识题库、随机答题、倒计时、排行榜、分享等。

接下来以木疙瘩H5专业版编辑器为例详细分析如何实现以上功能。

4.1 知识题库功能
木疙瘩H5专业版编辑器在线版界面左侧工具栏有一项预置考题，如图6所示。

预置考题选项卡中包含单选题、多选题、判断题、填空题、拖拽题、题库和动态题库。

通过不同的选项卡进行不同类型题目的设置。

对于本小游戏中的知识题库，可通过预置考题选项卡中的题库选项进行题库设置，如图7所示。

点击左侧的新建文件夹，可以设置不同关卡的题库，本小游戏总共有4个关卡，创建4个文件夹分别存放HTML部分题库、CSS部分题库、JavaScript部分题库和网站综合案例题库。

4.2 随机答题功能
使用预置考题选项卡中的题库选项进行题库设置，完成题库设置后，点击“随机选题”按钮可弹出“随机组题”窗口，如图8所示。

在“随机组题”窗口中可进行随机组题，主要包含题目类型、抽取数量和分数范围。