基于Web的趣味测试题系统设计与实现.docx
《基于Web的趣味测试题系统设计与实现.docx》由会员分享，可在线阅读，更多相关《基于Web的趣味测试题系统设计与实现.docx（29页珍藏版）》请在冰豆网上搜索。
基于Web的趣味测试题系统设计与实现
郑州大学毕业设计（论文）
题目：
基于Web的趣味测试题系统设计与实现
指导教师：
职称：
学生姓名：
学号：
专业：
计算机科学与技术（软件开发.NET）
院（系）：
软件与应用科技学院
完成时间：
2017年6月2日
2017年6月2日
摘要
随着移动互联网端的不断发展趋向于成熟，越来越多的工作都离不开移动互联网端，移动互联网端加速了各种工作的进程，各种各样的测试、问卷调查等一些收集一些数据，可以挖掘出用户的个人喜好、情感、状态等等一系列信息。
这些测试趣味性强，对用户具有吸引性。
基于Web的趣味测试题系统是为用户提供多种不同类别的趣味测试，让用户能够通过不同测试（文字测试，游戏测试，图片测试），测试出自己的不同性格或其他开心搞笑的事物，为其他事业，例如医疗事业，网络推广事业等提供一些趣味测试，使之更容易采集信息或推广一些事物。
因此制作一个趣味测试题系统显得尤为必要。
本系统主要讲述了基于Web的趣味测试题系统的基本功能和使用前端技术和ASP.NET技术，使用了jQuery框架，VisualStudio2015进行编译，用SQLServer数据库进行数据处理，用AdobePhotoshopCC2017对一些页面图标进行美工以及其他相关开发工具来进行配合开发，其系统的主要功能实现了loading预加载、选项类测试、游戏类测试、屏幕自适应、横屏处理、夜间模式用户注册、用户登录、用户信息查看等基本功能。
并且网页能够正常运行，页面美观，各个页面交互性良好。
在整个设计中基本上运用JavaScript实现相应的效果和交互，使用Html5完成动画效果，使用C#和SQLServer完成数据类交互。
关键词:
趣味测试Web前端H5小游戏预加载
ABSTRACT
WiththedevelopmentofmobileInternetsideconstantlytendtomature,moreandmoreworkisinseparablefromthemobileInternet,mobileInternetendacceleratedtheprocessofallkindsofwork,allkindsoftest,sometocollectsomedata,suchasquestionnairesurvey,candigupstate,emotion,andsoonaseriesofuser'spersonalpreferenceinformation.thesetestprocedures,isattractedtotheuser.interestingtestsystembasedonWebistoprovideuserswithavarietyofdifferentcategoriesofinteresttest,letuserscanthroughdifferenttesting（imagetexttest,gametesting,testing）,testouttheirowndifferentpersonalityorotherhappyfunnythings,forotherbusiness,suchasthemedicalenterprise,networkmarketingbusinesssuchasprovidesomeinterestingtest,makeiteasiertogatherinformationorpromotingsomethings.
ThissystemismainlyaboutthebasicfunctionofinterestingtestsystembasedonWebandASP.NETandusethefront-endtechnology,USESthejQueryframework,VisualStudio2015compile,dataprocessing,usingSQLServerdatabaseusingAdobePhotoshopCCforsomepageicon2017artists,aswellasotherrelateddevelopmenttoolstocoordinatedevelopment,themainfunctionofthesystemhasrealizedtheloadingpreloading,optiontest,games,test,screen,adaptive,landscape,nightmodeuserregistration,userlogin,userinformationtocheckthebasicfunctionsuchas.Beautifulanditcanrunnormally,webpages,eachpageinteractiveisgood.InthewholedesignbasicallyuseJavaScripttoachievethecorrespondingeffectandinteraction,useHTML5completeanimationeffects,usingc#andSQLServertocompletedataclassinteraction.
Keywords:
TastetestWebfront-endH5littlegamepreloading
1绪论
1.1课题背景
随着不断发展成熟的移动互联网端，从移动端推广业务实行调查测试，变得尤为重要，目前存在于移动互联网端的用户逐年增长，同时越来越多的工作都离不开移动互联网端。
移动互联网端也加速了各种工作的进程，是工作变得轻松、快捷。
移动互联网比在电脑端的用户量更大也更便捷，网页端比较App更加快捷，无需下载也不会占用内存，现在各种各样的测试、问卷调查等用来测试出用户的个人喜好、情感、状态等等一系列信息来，使用户得到自己想要的信息。
本系统页面美观、交互性强和不错的体验，同时趣味性测试趣味性强，对用户更具有吸引力。
因此一个手机网页端的趣味测试题系统拥有存在的意义。
我采用Html中的div加css编辑页面，更加快捷，采用JavaScript和Html5动画进行页面交互[1]，使用SQLServer数据库，完全支持Web，更加快捷。
基于Web的趣味测试题系统，为用户提供趣味性的测试，好用好玩，可为教育事业、医疗事业等提供所需的推广和测试。
1.2课题目的
目前国内互联网用户突破7亿，而移动互联网的用户总数几乎是互联网用户2倍，因此各行各业与互联网的交互尤为重要，而移动互联网能提供更多的用户量，对于一些需要推广传播的事物显得更加重要。
现在是大数据时代，信息的采集获取也需要大力的推广和传播才能获得跟多。
而基于Web的趣味测试题系统，存在于移动互联网端，因其在移动端传播，优美的画面，趣味的测试，人性化的交互，使信息的推广传播速度将变的更快，更加便捷，用户量更大，同时能为个个所需行业提供不同推广和测试，对于其他行业来进行用户的获取和产品的推广不失为一个很好的途径。
因此我想做一个基于Web的趣味测试题系统。
1.3研究的现状
1.3.1国内研究现状
在国内WebApp属于近年来新兴的。
WebApp使用的技术是Html或Html5编辑前端界面，使用css样式表编辑页面样式，使用JavaScript进行页面交互[2]，使用技术ASP.NET编译其他功能，些相对于电脑端、跨平台有很大的优势，它可以跨平台，有浏览器就能使用，很便捷，且移动浏览器对Html5的支持优于桌面浏览器，浏览器对Html5具有良好兼容性[3]。
目前国内移动互联网端用户众多，几近互联网用户的二倍，用户众多，移动设备应用最广，对于发展WebApp有很好的优势。
微信端Html5小游戏的成功就说明国内WebApp的高速发展，关于微信的实用性、移动端支付就力压国外。
1.3.2国外研究现状
在国外，因为移动互联网发展的早，关于WebApp的技术、知识都比较全面[4]。
相关技术发展的已经很先进，WebApp页面内容都比较优美，框架和结构都比较规范，但相关WebApp功能方面都比较单一，支付功能、聊天功能、购物功能、视频通话功能都是一个独立Webpp，相比国内一个微信就包含以上全部功能，较之国外很人性化，即使一些技术并没有达到国际先进水平，但实用性较之国外很强大实用[5]。
国外的趣味测试题多和大数据和心理测试相结合。
1.4课题概述
基于Web的趣味测试题系统，是一个基于Web的移动端WebApp，采用Html5，css3布置页面内容，用JavaScript，ASP.NET技术进行页面的交互和功能的实现，使用Jquery框架简化编译难度，使用SQLServer数据库进行数据操作。
主要功能是为用户提供多种多样的趣味测试，趣味小游戏，以此来让用户了解自己的隐性信息，也可为其他需要推广功能和调查功能的各行各业提供支持，小测试和小游戏会通过用户得分推断出不同结果。
其他基础功能包括loading预加载、屏幕自适应、横屏处理、包括夜间模式、登录功能、注册功能、个人信息查看功能等等[6]。
1.5相关技术软件概述
基于Web的趣味测试题系统，使用前端技术和ASP.NET技术，使用了jQuery框架，VisualStudio2015进行编译，用SQLServer数据库进行数据处理[7]，用AdobePhotoshopCC2017进行页面设计和制图。
1.5.1Web前端开发技术
运用HTML和css布置页面内容，JavaScript来实现交互，配合ASP.NET技术实现功能，运用Firefox等浏览器进行调试，可以使用多种框架，符合W3C准则，使用js配合animation动画完成页面动画交互。
1.5.2VisualStudio2015
VisualStudio2015能满足前端后台数据库的同时编译，代码编辑支持SQL、C#、HTML、css和JavaScript，完全满足WebAPP的开发条件，对系统进行调试可以直接显示出问题代码处[8]。
2系统分析
2.1系统可行性分析
2.1.1技术及开发方法可行性
基于Web的趣味测试题系统，是基于Web的A程序，采用Html5，css3布置页面内容，用JavaScript，ASP.NET技术进行页面的交互和功能的实现，使用Jquery框架简化编译难度[9]，使用SQLServer数据库进行数据操作。
Html5，css3，JavaScript能够很好的完成前端所需的绝大多数功能，并能提供便捷、优美的画面。
Css3可以再不改变其他系统功能和不影响其他句子语义情况下，为程序员提供更多的选择来对提升页面的美观度[10]。
同时Html的存在，程序员可以直接在网页查看代码，并进行调试，更容易找出错误，很方便，并可以通过JavaScript和Html页面的配合做到屏幕自适应浏览器，SQLServer配合Web的数据库，两者的交互性很好[11]。
因此在技术上可行。
2.1.2管理可行性
本系统基于Web所建，html5编辑页面，保证了可扩展性强，对于页面的管理很方面，后期页面的增加删除修改很方面、可维护性强、费用低。
使用JavaScript进行页面交互，操作html的dom很方便。
数据的处理都由前台完成处理传给后台，数据的处理通过SQLServer数据库[12]。
SQLServer和VisualStudio2015关联性良好支持度高，可以良好的应对后台对数据库的密集操作[13]。
Html机构标准、css表现标准、JavaScript行为标准，相互分离互补影响，前期制作后期维护都狠方便，因此在管理上可行。
2.1.3经济可行性
本系统使用WebApp开发成本低，前端编译页面，后期维护更新低。
使用HTML、css和JavaScript和所使用的开发软件均属于开源，因此经济上可行。
2.2系统需求分析
2.2.1功能分析
基于Web的趣味测试题系功能模块，分别是用户注册登录、夜间模式、用户分别进行文字类测试、图片类测试和游戏类测试、用户个人信息查询、用户测试记录查询。
如图2.1功能需求图所示。
图2.1功能需求图
2.2.2需求分析
基于Web的趣味测试题系统的功能需求包括以下几个方面：
登录模块：
后台将输入的用户名和密码与数据库进行对比确认是否正确[14]，如果用户不存在，就去注册。
可以跳过登录或跳过注册直接进入主页，需要注册就输入注册信息，录入数据库，满足输入条件，既注册成功，可登陆主页[15]。
Loading预加载模块：
使用loading预加载对页面进行预加载，防止网速过慢情况下出现的页面不稳地状况，首先监测页面是否第一次加载，如果第一次加载就进行loading预加载模块，loading页面最先显示，其他页面不显示，loading页面动态显示当前加载进度，loading预加载动画进行平滑处理，不会因网速慢卡死或因网速过快一闪而过。
页面处理模块：
使用css和JavaScript的紧密配合，完成页面的交互和功能，横屏提示，当页面处于横屏状态使进行横屏提示。
页面自适应，当页面大小发生变化后，页面内容将等比例缩放，内容不会发生变形。
夜间模式，点击夜间模式触发屏幕亮度变为夜间模式，夜间模式有两个等级。
个人中心模块：
用户或游客可以再首页侧边栏进入个人中心，在个人中心游客可以登录，用户可以在此查看自己的个人信息，游客可以在个人中心登录，同时也可以将页面调成夜间模式。
测试模块：
用户和游客进行测试，在文字类测试中，没选择一个选项都将获得不同的分数，如果当前题不是最后一题，则分数累加并进入下一题，如果当前题是最后一题，则根据总分显示不同结果。
在游戏类测试里，每选对一题或完成一关，则获得一定分数，选错失败不得分，选题选到最后一题，分数统计显示结果，关卡类失败既结束游戏，根据当前得分显示结果。
2.2.3性能分析
基于Web的趣味测试题系统需要满足以下性能：
外观性要求：
本系统使用Html5、css3和Photoshop，所以页面美观尤为重要，并且需要简洁，操作简单，页面转换要转换融洽。
数据要求：
对于账号和密码，类型和是否匹配，必须严格要求，不能出现差错。
测试要求：
测试需要拥有趣味性、可玩性。
2.3业务流程分析
业务流程图见图2.2，输入网址，网页进行自适应当前页面大小，并进行横屏处理，同时进入loading预加载页，预加载完毕，进入登录页，注册登录成功或者成为游客，进入先导页（可招标广告），2s后进入主页，用户可在个人中心，查看个人信息，可调节夜间模式。
在主页选择不同测试模式，进入不同测试，进行测试，在测试页每道测试可选择不同的选项，同时获得分数，测试完毕后根据分数显示结果，返回主页，用户可选择不同测试题页面进行多种不同的趣味测试。
测试可以是趣味测试，趣味推广，趣味调查。
图2.2业务流程图
3系统设计
3.1系统物理环境配置
WebApp可跨平台，在Android和ios等不同系统的浏览器中运行，在SQLServer数据库内需设置成SQLServer身份验证，网页调试功能开启。
电脑配置，处理器Intel（R）Core（TM）i5-3337UCPU@1.8GHz，内存4GB，系统类型64位操作系统，X64处理器，Windows10系统，安装数位板控件，链接外部数位板。
3.2系统规划
本系统采用Html5和css3进行页面设计，用JavaScrip进行页面交互和功能实现，采用JavaScript和后台同时对数据进行处理，后台将数据存入调出数据库。
本系统为用户提供不同趣味测试，用户或游客与本应用进行互动，用户进行不同趣味测试获取不同趣味结果。
用户进入系统后，先进入loading页面，loading页面完成后进入登录页面，登录成功或跳过的登陆后即可进入主页，在主页可以点开侧边栏进入个人中心也可以调节夜间模式，在个人中心可也查看个人信息和查看个人测试记录，在主页可以选择三个测试方向来进行测试，进入不同测试分页后开始选择要测试的题或游戏，选择测试题，测试结束后可以选择返回首页。
3.3系统总体设计
系统总体设计见图3.1，进入loading进行预加载，预加载完毕后进入登录页，用户选择注册登录或跳过登录后，进入主页主页显示，主页可以点开内包含侧边栏页、文字类测试页、图片类测试页、游戏类测试页。
侧边栏页包含个人中心页，设置页，夜间模式按钮，三个类测试页可进入测试页和游戏页，测试页和游戏页显示不同的趣味测试和不同的小游戏，趣味测试或游戏结束后显示结果页。
个人中心包括用户个人信息页和用户测试记录页，用户测试记录页包括测试记录详细页。
游戏类测试和文字类测试，包含测试内容页和结果页，游戏类测试还单独包含规则页。
测试页内容为题目动画交互。
图3.1系统总体设计图
3.4系统详细设计
3.4.1loading预加载模块设计
loading预加载模块设计见图3.2，进入loading预加载页，js判断页面是否第一次加载，不是第一次加载，直接跳过预加载进入登录页，否则开始预加载预加载页，预加载页加载完毕先显示预加载页并开始预加载除预加载页外的全部页面内图片。
loading动画表示预加载进度，loading动画结束即加载完毕，loading动画变化速度因网速过慢或忽快忽慢而变化，为应对此类变化，动画实施平滑loading处理后进行显示。
平滑loading设施合理时间为3秒，根据合理时间、当前速度、上次速度来计算合理速度，速度过慢平滑不会使动画直接卡死（除因页面错误而导致的动画停止），速度过快平滑处理后是速度保持在合理速度，速度非常快则，则直接控制loading动画速度为强制显示三秒。
当预加载动画播放结束，则除预加载页外的所有图片预加载结束，预加载页隐藏，显示登录页。
图3.2loading预加载设计图
3.4.2登录模块设计
登录模块的设计见图3.3，用户loading预加载结束后，可以选择是否跳过登录直接进行趣味测试，不跳过的话后台将输入的用户名和密码与数据库进行对比确认是否正确，如果用户不存在，就去注册。
可以跳过注册直接进入主页，需要注册就输入注册信息，录入数据库，满足输入条件，即输入不能为空，名字必须为汉字或英文，年龄只能输入2为的数字，然后注册成功，可登陆主页，直接跳过更加方便快捷。
对于只想测试的用户来说，减少了测试时间，本系统主要进行推广和调查的趣味测试题和小游戏，因此是否为用户并无关紧要。
用户登陆成功后，页面传用户名值给下一个页面即首页，首页获得用户名值之后在做其他相关处理。
图3.3登录模块的实现
3.4.3首页模块设计
首页模板设计见图3.4，首页可以进入所有页面，可打开侧边栏进入个人中心查看个人信息，在侧边栏调节夜间模式，游客可进入个人中心进行登录，可在主页选择不同测试页面，然后选择不同测试题，不同的测试页面包括文字类测试、图片类测试、游戏类测试。
首页模块是本系统的中心转接页。
链接了登录页和测试页，登录后进入主页，测试页返回主页。
图3.4首页模块设计
3.4.4测试页模块设计
测试页模板设计见图3.5，进入测试页面，开始测试，在测试中途也可以选择返回首页，返回首页时重置测试进度，进行测试选择选项，选择后显示下一题，如果选择到最后一题，则出现结果页。
测试模块通过记分推算结果，读题选择答案，不同答案对应不同分数，选择后进入下一题，若当前题目为最后一题，选择答案后，结束测试显示结果页。
图3.5测试页模块设计图
测试页逻辑见图3.6，测试页有文字类测试和游戏类测试。
文字类测试有一个选择或多个选择，一个选择的文字类测试单个选项既对应某个答案。
多个选择的情况下，选择不同选项获得不同分数，不同分数对应不同结果。
进入文字类测试后，选择选项，获得分数，进入下一题，分数累加，若就一个选项则直接进入结果页，多个选项，则依次选择，分数叠加计算推出结果，结果显示选择返回首页结束。
游戏类测试根据游戏规则，每完成一关，正确得一分，错误不得分，关卡完结游戏计算得分显示结果结束游戏，游戏结束后可以选择返回首页。
图3.6测试页逻辑
3.5数据库设计
趣味测试题系统，数据库的设计主要是添加和查询，登录判断查询数据，注册信息的添加，个人信息的显示。
3.5.1E-R图
系统E-R图见图3.7，用户拥有用户名、密码、名字、年龄和ID，可以操作测试题，拥有测试记录，测试题拥有测试题名、A评价、B评价、C评价、D评价，测试记录拥有用户名、测试题名、测试评价、结果得分，记录测试题记录，当用户登陆后进入个人中心即可点击个人信息进行查看个人信息，同时用户拥有测试记录和可以操作测试题来进行游戏测试，用户也可以在个人中心点击测试记录查看以往测试，在测试记录页点击详情即可查看测试的详情内容。
图3.7系统E-R图
3.5.2数据库概要设计
表3.1数据设计由基于Web的趣味测试题系统功能需求所设计。
建立表时使用SQLServer能满足本系统对数据库的所需技术。
SQLServer也能和VisualStudio2015平台进行很好的交互。
数据设计有三个表分别为用户所有信息，测试题全部信息，用户的测试记录。
表3.1数据设计
表名
说明
login
表内存放了用户的所有信息
test
表内存放了测试题的全部信息
userRecord
表内存放了用户的测试记录
3.5.3详细表设计
表3.2用户信息表，表内存放用户所有信息，个人中心查看用户信息查看本表。
表3.2用户信息表
列名
数据类型
长度
是否可空
注释
username
nchar
50
是
用户名
password
nchar
50
是
密码
name
nchar
20
是
名字
age
nchar
3
是
年龄
id
nchar
10
是
表3.3测试题表，test表存放游戏信息，配合用户查看测试分析和查看自己的测试记录。
表3.3测试题表
列名
数据类型
长度
是否可空
注释
gameName
nchar
50
是
测试题名
resultA
text
无限制
是
A评价
resultB
text
无限制
是
B评价
resultC
text
无限制
是
C评价
resultD
text
无限制
是
D评价
表3.4用户测试记录表，userRecord表存放用户所完成过的测试、所完成过得测试的结果和对测试题进行的评论，用于用户查看自己的测试记录，和test表配合显示测试结果。
表3.4用户测试记录表
列名
数据类型
长度
是否可
升级会员 