The Interaction design and Realization of Answer System of Computer-Assisted

English Examination System based on QT WebKit

Yejun liang

Center of Modern Educational Technology University of Science and Technology of China

Hefei China jyejun@mail.ustc.edu.cn

Abstract-The computer-assisted English examination system

has become an important part of English examination. Its

interaction design will affect the examination result directly.

An effective interaction design can build a good examination

situation, making examinees more single-minded when they

are taking exams, reducing examinees' anxiety!l] and

stimulating their motivation of language expression and

potential in the computer-assisted examination. The design of

this system is based on the interaction mode combining

desktop with web and its interaction design will more comply

with the examinee's cognitive rule and learuing need, to

further improve the examinees' examination result.

Keywords-Qt Webkit; Interaction Design; Situated Cognition

I. FORWORD

Constructivism Learning Theory focuses on learner's centeredness, in the whole course of learning, teachers should play the role of organizers, instructors, helpers and promoters, making use of the environmental elements such as learning situation, coordination as well as dialogue to fully bring the learners' positiveness and initiative into play and eventually to achieve the purpose of letting students effectively construct the meanings of what they have learned; The interaction design of the examination is exactly the construction of examination situation which makes the

W umin, liahui Qi

Center of Modern Educational Technology University of Science and Technology of China

Hefei China

examinees perceive the examination situation and know how to control it, so the examinees could concentrate on the examination, interacting with various information, fully demonstrating their learning level[2].

Based on answering subsystem of QT WebKit computer­assisted English examination system, we adopted the design development mode combining Desktop with Web [3] .It utilizes the desktop interaction and improve the interaction performance of the program by the use of local resources, in order to invoke desktop files and system tasks and to save locally, providing the interaction with local program application, Web interaction provides information interaction of learning resource with examinees.

II. DESKTOP INTERACTION DESIGN

Desktop interaction makes the interactions between examinees and media interface, between application program and invigilate teacher (or test monitor) realized. Its main functions are to receive instruction and respond to the invigilation system, to invoke document and program, to process the data in the test paper package, also to record and compress examinees' answers and then upload them to test monitor! Having known its function, we can draw the general framework diagram of desktop interaction shown in figure 1.

Figure I. The framework diagram of desktop interaction

III. WEB INTERACTION DESIGN

The function of Web interaction design in this system is to display test paper on Qt Web kit and to interact with examinees in the examination, it also communicates with desktop, such as feeding back the key to each question to

978-1-61284-486-2/111$26.00 ©2011 IEEE

5

the desktop program. Web interaction design is to give examinees a new user experience in the examination, enable them to interact with the test questions positively and to answer easily so as to make examinees relaxed and comfortable and feel it a pleasure to take exams. It encourages examinees to learn, to take exams and could

stimulate their creativities. From the examination itself, the question interaction is the concrete implementation of Web interaction, the examination is also a course of citing and applying knowledge and innovation. These requirements are achieved by improving the interaction function of computer-assisted examination system, especially the question interaction function. A good design of the question type is able to combine examinees with examination situation effectively, which helps examinees to combine the old knowledge with the new one and to develop language expression and comprehensive abilities. The question type is designed on the basis of Situated Cognition, for the exam purpose of practical ability model, highly integrating testing content, examinees and situation in order to build an examination situation most conductive to examinees. The various media functions such as text, image, audio, video etc are handled comprehensively when

question type is being designed and a vivid, visual and very emotional examination situation has been established [4]

In order that a vivid, visual and very emotional examination situation could be established by computer­assisted English examination system, after invoking desktop program processed html by QWebView that is a widget used to view and edit web documents, the local JavaScript is allowed to be invoked to build practical, dynamic and interactive relation between questions and examinee, also to add more active and human contents to questions, such as video and audio. Meanwhile examination application program and QWebView can communicate with each other, jointly complete such questions needing interaction between desktop and Web. We can draw the general framework diagram of web interaction shown in figure 2.

Figure 2. The framework diagram of desktop interaction

A. Introduction to QT Webkit

Qt is a cross platform application and UI development framework. The Qt WebKit Integration is an integration of Web Kit with Qt. It provides an HTML browser engine that makes it easy to embed web content into native applications, and to enhance web content with native controls. QT Webkit is able to integrate rendering engine and utilize HTML, CSS as well as Javascript, also add Flash, audio and video into application program [5].

The test paper index document name is paper.xml and the paper structure consists of five layers, paper, group, part, section, item. Paper corresponds to test paper and may include multiple Groups, A Group includes multiple Parts, A Part includes multiple Sections, A Section includes multiple Assessment items. Group node defines one time control­group, controlling the time and navigation mode which is divided into processed questions and non-processed questions. The processed question is to show the process so that such question types as speaking, listening could display automatically following certain process, and the time for each question is known. The test paper structure is as follows:

<paper title = PaperTitle>

6

<group navigationMode = ModeType>

<part title = partType>

<section title = sectionType> <assessmentltem

identifier= itemid type = itemType >

</part>

</group> </paper>

</assessmentItem>

</section>

B. Interaction design of question type

This system design covers 46 question types of Shanghai Foreign Language Education Press, including writing, speed reading, picture describing, listening, dialogue repeating, video comprehension etc. Attention will be focused on the

design and realization of writing, cloze as well as video comprehension below[6l.

1) Writing Writing interaction is relatively simple. Examinees need

to input more English words while doing this type of question. During words-inputting, some examinees who are not so familiar with the keyboard will input words in a low speed and turn anxious, therefore the main requirements for the interactive design of writing is to keep interface aesthetic, to let examinees input meaningless words as less as possible and to help examinees to input and normalize the display format of composition.

Firstly, in order to reduce some unnecessary mistakes during the words inputting, some special keys, such as CTRL, Alt and ESC are shielded. Secondly, it's required to replace some useless characters and combine spaces. Finally, writing line is allowed to prolong automatically, in case that the writing area is restricted.

The designed html content for writing is shown below: result+="<textarea size=\""+QString("%l").arg(question)

->Iength 0 )+"\"" +cols=\" 80\" na me=\" key" +QStri ng("% 1 ").

arg(Model->questionld(question)) +"\"> </textarea>"; <textarea>label defines multiple line text input control.

Rows and cols are respectively used to specifY the textarea size. For achieving the above interaction effect, it will be realized in 1avaScript as follows:

if(event.ctrIKey II event.altKey II event.which=='13' II

event.which == '27')

{ event.preventDefaultO; Iishielded some special

keys

}; jQuery.trim( editbox.text(). replace(/\u 200b* Ig,""). replac

e(/\s+/g," ")); Ilreplace some useless characters and combine spaces

2) Cloze Generally cloze test is a familiar not too long but short

passage with 20 blanks. Each blank corresponds to one question to which one of four choices that suits best is to be chosen by examinees under the condition of comprehending the passage to restore its meaning and structure.

Firstly, the computer screen commonly used for examination cannot display the passage and choices within the same frame as test paper, so examinees are required to move the scrollbar up and down continuously, it's known that scrollbar causes many inconvenience to the examinees according the user interface Steering law[7l analysis. Therefore passage and choices are displayed in different screens separately, passage are in the left screen and choices in the right screen, their corresponding to each makes examinees accustomed and feel easy to answer.

Secondly, when examinees click the passage blank, the corresponding choices will be activated, making blank and choices corresponding so that examinees could answer swiftly. Its codes in the javascript are as follows:

$(' .cloze.textu[refid]'). bind.("click" ,function( e)

{

7

activateQuestion( qid,true); / / activate choice

Thirdly, in practical operation, mischoosing often occurs due to the small size of option button. According to Fitts' Law, if the option button is small, examinees operate slowly when making choice and are prone to mischoosing. Here is a brief introduction to Fitts' Law. Fitts' Law predicts the time required to directly move mouse pointer to a definite target area. Its mathematical expression is T = a + b*(log2(D/W +1)) 0 Where, T is operating time, a, b are both time constants. D is the distance from existing pointer position to the center of target. W is width of the target. According to this law, the larger the range of choice is and the shorter is the operating time, faster and more conveniently examinees operate. So in interaction design, when mouse pointer is moved to the option line, it will lighten and choice can be made. This helps to enlarge the range of choice and reduce operating time and mischoosing.

3) Video Description Video Description requires examinees' description and

comment after watching an episode of video. The computer must have the functions of video displaying and sound recording. Below is a part of video description in test paper engine document.

<video duration = viduration Src=videosrc /> <pause duration = "60" hint = "Preparation" /> <record duration = "120" />

A video is defined by its node. Duration property is playing time and playing subjects to it. Src property is the video route relative to the test paper. The nodes of video, pause and record is played following certain sequences. For such question type, the combination of desktop interaction and web interaction is required. Desktop system is used to control the video and recording time, we also use it to invoke recording module and use web to invoke flash player for video playing and display test paper. Both communicate and coordinate with each other. Desktop system figures out the time t from linear navigation to video, when the time equals to t, desktop sends message to QWebVview and show video function js is carried out and when the video play finishes, desktop sends message to QWebView to hide audio. Its codes in the javascript file are as follows:

js="GenVideoContent("'+videoLocation+"','''+nodeSrc+'' ')";

contentview->pageO->mainFrameO-> evaluate1 avaScriptU s);

GenVideoContentO is to display video, videoLocation is the position of web playing, nodeSrc is video link. Joint development of web and local application is achieved in this way.

IV. CONCLUSION

The interaction design of answering system of computer­assisted English examination system which based on desktop and web characteristics is much superior to the previous computer-assisted English examination system in interaction and aesthetics, providing a broad design space and realization mode for system interaction. It's this interactive

mode that helps to stimulate examinees' language expression motivation and potential and enables them to comprehend the test content quickly and correctly, promoting their performance of language comprehensive competence.

REFERENCES

[I] ShengLei, WangXiaoHou, and ZhuoHan,ChenXuan, "Research on examinee's anxiety level in computer-assisted English oral test," Foreign Language Learning Theory and Practice, February, 2010,pp. 51-58.

[2] WuHua and MaDongYan, "Multiple situations of mathematics teaching created by multimedia technology," China Educational Technology,June,2007, pp.80-83.

8

[3] HuangRuMing,"Rich media courseware and its interaction function," Modern Educational Technology, September, 2009, pp.98-102.

[4] DengGuiDong,SongYaFei and LanYu, "Question type design and realization of interaction function in computer-assisted English oral test of NMT," Guangxi Social Science, November ,2009, pp.127-130

[5] Jasmin Blanchette and Mark Summerfield, C++ GUI Programming with Qt 4, Publishing House Of Electronics Industry, 2nd , 2009.

[6] ChenGang,ChenMingXuan. "lndividualized interaction design based onlnternet learning performance," Modern Educational Technology, February,2009,pp. 83-87

[7] http://www.google. com/reader/view/#search/%E7%A4%BE%E4%B C%9A %E5%8C%96%E5%AA %92%E4%BD%93I.Retrieved dec, I 2,20 I O,from source