基于WEB的英语学习策略自测软件的研发与应用
The Development and Application of the WEB-Based Self-Assessment Software of English Learning Strategy
DOI: 10.12677/CSA.2022.123054, PDF, HTML, XML, 下载: 322  浏览: 536 
作者: 丛海滋:山东大学,山东 济南
关键词: WEB英语学习策略自测软件WEB English Learning Strategies Self-Assessment Software
摘要: 英语学习策略自测软件使用HTML + CSS开发,用服务器端运行的脚本语言PHP链接和保存数据库,并在HTML文件中嵌入JS脚本语言,用于问卷选项的计分收集和计算。文章包括简要介绍、相关技术介绍、软件设计、关键技术的介绍、软件的测试和软件的应用和维护升级,以及结论。软件设计主要包括系统概要设计、各页面前端设计,后台数据库设计和前后台的数据传输。目前,该软件已经在校园网安装运行数年,用于调查山东大学学生的英语学习状况,为我校的大学英语教学改革提供反馈信息,发现并研究大学生英语学习中存在的问题,取得了良好的效果。
Abstract: The self-assessment software of English learning strategy is developed using HTML + CSS. It uses the script language PHP running on the server side to link and save the database server, and embeds the JS script language in the HTML file, which is used for the score collection and calculation of the questionnaire options. The article includes the brief introduction, the related technology introduction, the design of the software, the introduction of key technologies, the testing of the software and the application, maintenance and upgrading of the software, and the conclusions. The design of the software mainly includes the system outline design, the front-end design of each page, the back-end database design and the data transfer between front-end and back-end. At present, the software has been installed and operated on the campus network for several years. It is used to investigate the English learning status of Shandong University students, to provide feedback information for the reform of college English teaching in our school and to discover and study the problems existing in college students' English learning, which has achieved good results.
文章引用:丛海滋. 基于WEB的英语学习策略自测软件的研发与应用[J]. 计算机科学与应用, 2022, 12(3): 535-545. https://doi.org/10.12677/CSA.2022.123054

1. 引言

英语学习策略是英语学习成败的关键因素。了解、调整、优化自己的英语学习策略对英语学习者至关重要。为了便捷、准确、快速、高效地获取大学生英语学习策略的相关信息,提高大学英语教学的质量,改善学生的英语学习效果,我们研发了“基于WEB的英语学习策略自测与分析”网络调查软件。软件可以在互联网上运行,根据需要,收集、汇总、分析调查信息,生成、输出所需要的调查结果数据。

2. 软件的简要介绍

国内外类似的网络软件并不少见,但是尚未发现专门针对大学生英语学习情况进行调查的网络软件,而且现有的网络调查软件系统比较简单,不能满足对大学生复杂多样的英语学习情况进行调查的需要。因此,为了满足对大学生英语学习情况进行调查的需要,有必要研制一种专用软件。

本软件提供了一系列关于英语学习策略的自测问卷,内容涉及英语学习策略的方方面面,包括学习观念、学习过程、学习计划、学习心理、学习动机、生理机制、感知渠道,以及学习者的性格特征、学习者对语言含混现象的容忍度、对语言形式和语言内容的认识、对语言准确性与流利性的认识、听说读写的自我评估和对母语的倾向是否有意识地抑制,总共是十三个问卷 [1]。

这一网络调查软件主要由以下三个特点:问卷设计科学合理,结果分析准确可靠,自测实施简便易行。自测问卷及结果分析,均选自北京外国语大学英语教育专家文秋芳教授的著作《英语学习策略论》。在网上完成自测问卷并提交后,自测结果会自动生成。在查看自测结果的同时,也会看到英语教学专家对学习者自测结果的分析和相应的英语学习策略的调整、优化建议。学习者可以对自己各个方面的英语学习策略进行全面自测,也可以选择某一个或某几个方面的英语学习策略进行自测。

采用软件的方式设计调查问卷可以激发学生的兴趣。问卷设计精美,不同的页面用不同的颜色调解,会减少学生填写问卷的视觉疲劳。调查问卷的数据储存在数据库中,教师可以方便的获取数据,并进行分析。问卷调查是实时互动的,学生可以即时看到调查结果,以及根据问卷得分给出的英语学习策略调整、优化建议,有利于学生的主动参与。教师通过对问卷调查的数据进行分析,可以发现并研究大学生英语学习中存在的问题。软件易于操作、性能稳定,通用性好、安全可靠,价格低廉、便于推广。

整个调查问卷系统包括13个问卷。在首页目录中有问卷的简要介绍,用户可以在目录中选择相应的问卷,即进入相应的调查问卷首页。调查问卷首页中有对本问卷的详细介绍,在此可以详细了解本问卷的调查内容。然后可以选择进入问卷或离开选择其它问卷。进入问卷后,即是问卷的内容页面,用户可以对每个调查题目进行选择,所有题目都是单选题。全部选择完毕后,点击提交,问卷就会弹出对话框。里面有本次作答问卷的分数和相应的英语学习策略调整建议,同时本次作答的数据保存在后台的数据库中。由于问卷的作答是匿名的形式,不用担心隐私泄露问题。

3. 软件开发的相关技术介绍

软件开发考虑在两种架构之间做出选择,一种是C/S架构,一种是B/S架构。

C/S架构,即Client/Server (客户端/服务器)架构,是一个典型的两层架构。通过将任务合理分配到客户端和服务器,降低了系统的通讯开销,需要安装客户端才可进行管理操作。客户端包含一个或多个运行在用户计算机上的程序,有两个服务器软件,一个是数据库服务器软件,客户端通过数据库连接访问服务器端数据;另一种是套接字服务器软件,它通过套接字程序与客户端通信。客户端和服务器端的程序不同,用户的程序主要在客户端,服务器端主要提供数据管理、数据共享、数据及系统维护和并发控制等,客户端程序主要完成用户具体的业务。开发比较容易,操作简便,但应用程序的升级和客户端程序的维护较为困难。

B/S架构,即Browser/Server (浏览器/服务器)架构。它由逻辑上相互分离的表示层、业务层和数据层构成。表示层向客户提供数据,业务层实施业务和数据规则,数据层定义数据访问标准;三层体系结构中的核心是组件对象模型。B/S系统统一了客户端和服务器端,无需特殊安装,拥有Web浏览器即可。它将系统功能实现的核心部分集中到服务器上,简化了系统的开发、维护和使用。可以在服务器上安装数据库软件,然后用户使用浏览器与数据库来进行数据交互 [2]。

C/S的优点是能充分发挥客户端PC的处理能力,很多工作可以在客户端处理后再提交给服务器。对应的优点就是客户端响应速度快。缺点是只适用于局域网。而随着互联网的飞速发展,移动办公和分布式办公越来越普及,需要我们的系统具有扩展性。这种方式远程访问需要专门的技术。客户端需要安装专用的客户端软件。B/S最大的优点就是可以在任何地方进行操作而不用安装任何专门的软件。只要有一台能上网的电脑就能使用,客户端零维护。系统的扩展非常容易 [3] [4]。

由于本软件是面向广大学校师生的,并且软件的功能比较单一,采用B/S架构可以方便师生的使用,用浏览器打开一个链接就可以对英语学习策略进进行自测。而且考虑到软件后期的维护和升级,我们选择B/S架构进行软件的开发设计。

4. 软件的开发设计和关键技术介绍

英语学习策略自测软件使用HTML + CSS开发,用服务器端运行的脚本语言PHP链接和保存数据库,并在HTML文件中嵌入JS脚本语言,用于问卷选项的计分收集和计算。软件是基于B/S架构用HTML语言开发的调查问卷WEB应用,运行在LAMP服务器系统上,使用MYSQL数据库储存问卷调查结果数据。系统的总体业务架构图如图1

软件分为前端、后端和前后端的数据传输,前端主要有三大部分,首页页面,目录页面和调查内容页面。下面对软件的设计进行详细介绍。

Figure 1. Overall business architecture of the system

图1. 系统总体业务架构图

4.1. 前端页面设计

4.1.1. 首页页面

首页部分对软件进行了简要介绍,有网页计数器和进入问卷目录的链接。为了对访问网页的人数进行粗略的统计,设计了一个简易计数器。由于这个数据只是用来参考的,采用文件的方式储存计数数据,粗略的统计访问网站的点击量。

计数器文件counter.inc.php的代码如下所示:

< ?php

function counter(){

$counter = 0; //初始化变量

$max_len = 8;

$lj = explode(/,$_SERVER[PHP_SELF]);

//超全局变量$_SERVER['PHP_SELF']保存了当前运行脚本相对于网站根目录的位置地址:html/index2.php

$CounterFile=./counter/.$lj[count ($lj)-1]..dat

if(!file_exists($CounterFile)){

if(!file_exists(dirname($CounterFile))){

mkdir(dirname($CounterFile),0777);

}

$cf = fopen($CounterFile,'w');

fputs($cf,'0');

fclose($cf);

}

else{

$cf = fopen($CounterFile,'r');

$counter = trim(fgets($cf,$max_len));

fclose($cf);

}

$counter++;

$cf = fopen($CounterFile,'w');

fputs($cf,$counter);

fclose($cf);

echo $counter;

}

? >

在计数器文件中,计数代码被封装成一个函数。在首页文件中通过include把计数器文件嵌入到网页中,该段脚本应该放在< HTML >标记之前;计数器文件counter.inc.php保存在与首页文件相同的文件夹下,否则在include 中要指明文件的存放路径。在首页文件中调用counter() 函数,该函数会返回计数器的值。

< ?php

include counter.inc.php

? >

< html >

< head >

< meta http-equiv=Content-Type content=text/html; charset=utf-8 / >

< title >英语学习策略调查问卷< /title >

< link href=../css/indexcss.css rel=stylesheet type=text/css / >

< /head >

< body >

……

< div class=counter >

您是本网站的第< ?php counter(); ? >位访客< /span >

< /div >

< /body >

< /html >

4.1.2. 目录页面

用户可以通过目录了解各个问卷的内容,选择相应的问卷进行自测。为了方便用户操作,在页面的顶部设计了各个问卷的链接。用户可以在自测完一个问卷后,方便的进入其它问卷进行自测,也可以返回目录了解内容,再决定进入哪个问卷继续自测。

4.1.3. 调查问卷页面

要进入调查内容页面只有通过每个调查问卷的首页才可以进入,这样可以让用户先了解问卷的内容,再进入相应的问卷回答问题进行自测。用户可以选择需要的问卷进行自测,这样会提高用户的效率。为了使用户获得较好的体验,在调查问卷的首页设计了不同的图片,并且每个调查问卷使用不同的背景颜色。这样能够让用户减少视觉疲劳,同时提高用户对问卷的兴趣,更好的完成问卷测验。调查问卷的内容页面是系统的主体部分,也是程序最复杂的部分。

为了收集网页的调查结果数据,并且计算得出结果,使用JavaScript编写代码来收集数据并进行计算。在计算之前,首先要判断问卷的全部题目是否全部得到选择。为此要判断两种情况,一种是是否是所有问题都没有选择,一种是是否是部分问题没有选择。因此首先计算每个题目是否选择,并用一个变量保存本题是否选择的状态 [5]。实例代码如下:

var radio1=document.getElementsByName(a);

for(var i=0;i< radio1.length;i++)

{

if(radio1.item(i).checked==true)

{

flag1=1;

break;

}

}

然后用“和函数”和“与函数”进行判断是否属于上面的两种情况。如果是其中的一种情况,会给出提示,让用户回答完所有的问题才会进入计算程序。实现代码如下:

if(!flag1&&!flag2&&!flag3&&!flag4&&!flag5&&!flag6&&!flag7&&!flag8)

{

Ext.MessageBox.alert(提示对不起,请回答问题!);

return false;

} if(!flag1||!flag2||!flag3||!flag4||!flag5||!flag6||!flag7||!flag8)

{

Ext.MessageBox.alert(提示对不起,请回答完其他的问题!);

return false;

}

对于结果的计算,情况比较复杂。有一些题目分值顺序和常规不同,这个处理比较简单,把input标签中的value的值改变即可。有的是分别计算几部分的题目的值,这个编写代码比较复杂,要对每个题目分别计算,然后相加。还有的是分别计算奇数句子和偶数句子的值,这个可以通过判断句子的序数对2取模,模为1则为奇数句子,模为0则为偶数句子。代码举例如下:

var a = new Array();

var b = new Array();

var i,j,k;

var sum1=0,sum2=0;

var page = 12;

for(i=0,j=0,k=0;i< document.getElementsByTagName(input).length-2;i++)

{

if((parseInt(i/5)+1)%2==1)

{

if(document.getElementsByTagName(input)[i].checked)

{

a[j]=parseInt(document.getElementsByTagName(input)[i].value);

j++;

}

}

else

{

if(document.getElementsByTagName(input)[i].checked)

{

b[k]=parseInt(document.getElementsByTagName(input)[i].value);

k++;

}

}

}

for(i=0;i< j;i++)

{

sum1=sum1+a[i];

}

for(i=0;i< k;i++)

{

sum2=sum2+b[i];

}

为了使调查问卷内容页面弹出的结果对话框更加美观。使用了客户端的JavaScript框架,EXT.JS,中的Ext.MessageBox消息框组件,获得了较好的显示效果。

4.2. 后端数据库设计

问卷的数据库为每张调查问卷都设计了一张表。每个表中储存了结果ID,每个题目的得分(相当于储存了选择的答案,因为每个答案的分值不同)和最后计算得出的总分。以下是某个调查问卷的数据库表(表1),其他的数据库表类似:

Table 1. Database table example

表1. 数据库表举例

4.3. 数据传输

为了把用户调查结果的数据储存在后台的数据库中,使用ajax可以在后台向数据库服务器实时发送数据,实现前端和后台数据库的数据传输 [6] [7],代码如下:

$.ajax({

type:post,

url:../php/save.php,

data:{a:asum:sumpage:page},

success:function(d){

console.log(JSON.parse(d));

$(h1).html(JSON.parse(d));

}

});

5. 软件的测试

5.1. 功能测试

5.1.1. 测试用例一

测试问卷在未输入数据时是否会正确显示错误信息,表2列举了它的测试用例:

Table 2. Test case I

表2. 测试用例一

实际测试结果,正常显示对话框,如图2

Figure 2. The result of test case I

图2. 测试用例一结果

5.1.2. 测试用例二

测试问卷在输入部分数据是否会正确显示错误信息,表3列举了它的测试用例:

Table 3. Test case II

表3. 测试用例二

实际测试结果,正常显示对话框,如图3

Figure 3. The result of test case II

图3. 测试用例二结果

5.1.3. 测试用例三

测试问卷三在输入全部数据时是否会显示正确的对话框,表4列举了它的测试用例:

Table 4. Test case III

表4. 测试用例三

实际测试结果,正常显示对话框,如图4

Figure 4. The result of test case III

图4. 测试用例三结果

5.2. 性能测试

性能测试主要测试了从发出请求到系统响应的等待时间和系统的无故障运行时间。测试显示响应时间在合理的范围内,通常的执行时间在1 s以内,达到了系统的要求。无故障运行时间测试结果是系统在无人员干预情况下能够保持7 * 24小时服务。

6. 软件的应用和维护升级

该软件已经在学校内网安装运行数年,主要用于调查山东大学学生的英语学习状况,为我校的大学英语教学改革提供反馈信息,发现并研究大学生英语学习中存在的问题。学生认为通过调查问卷,全面地了解了自己的学习策略,并根据专家建议,改进自己的学习策略和学习方法,从而有效地改善了英语学习的效果。

软件的维护较为容易,因为软件是B/S架构的,代码储存在服务器端。有问题只要对服务器端的代码修改即可。关于软件的升级,可以通过升级软件的CSS代码,使软件能够移植到手机、平板等移动设备上,从而使学生能够更加自由方便的使用该软件。还可以让学生注册使用软件,选择班级分类,这样教师就可以获得自己班级学生的学习策略状况的数据。软件还可以对数据进行可视化展示,把各种策略按照分类做成饼图,让教师快速直观的了解自己学生的数据信息。这些数据信息既可以用于教师的科研也可以用于教师的教学,是非常珍贵的资料。

7. 结论

该软件开发的意义不仅在于让学生了解自己的学习策略,从而自我改进学习方法,改善自己的学习效果,另一方面也可以为教师的教学科研助力。教师可以通过了解自己班级学生的学习策略概况,在教学中知己知彼,因材施教,从而有针对性地实施教学计划,改善教学的效果。教师还可以利用这些数据进行科研分析,研究学生的不同学习策略在特定教学方法下产生不同的学习效果等问题。

参考文献

[1] 文秋芳. 英语学习策略论:献给立志学好英语的朋友[M]. 上海: 上海外语教育出版社, 1996.
[2] 青灯夜游. B/S架构和C/S架构的区别是什么[Z/OL].
https://www.php.cn/faq/416654.html, 2020-10-12.
[3] c/s结构和b/s结构的优缺点[Z/OL].
https://zhidao.baidu.com/question/ 291169680.html, 2019-07-15.
[4] Zhang, J., Zhu, X. and Liang, X. (2009) C/S and B/S Mixed Style and the Application. 2009 First International Workshop on Education Tech-nology and Computer Science, Wuhan, 7-8 March 2009, 682-686.
https://doi.org/10.1109/ETCS.2009.412
[5] 吴瑞红, 张环冲. 浅谈 JavaScript库——Query, ExtJs的对比研究[J]. 科技信息, 2010(9): 58-59.
[6] 吕林涛, 万经华, 周红芳. 基于Ajax的web无刷新页面快速更新数据方法[J]. 计算机应用研究, 2006(11): 199-200.
[7] Adam, S.I. and Andolo, S. (2019) A New PHP Web Application Develop-ment Framework Based on MVC Architectural Pattern and Ajax Technology. 2019 1st International Conference on Cy-bernetics and Intelligent System (ICORIS), Denpasar, Indonesia, 22-23 August 2019, 45-50.
https://doi.org/10.1109/ICORIS.2019.8874912