Using JavaScript to Implement the Real Time Feedback in Online Learning

(1)

Using JavaScript to Implement the Real Time Feedback in Online Learning

Yi-Wen Luo

Department of Information Management, Chung Hwa University of Medical Technology.

E-mail : Kevin@mail.hwai.edu.tw

Abstract

With the rapid growth of web pages implementation skills, the online-learning materials have become much more interesting and increased learners’ motivation. Adding real time feedback into online learning web pages can reinforce the users’ learning outcomes of the teaching materials and prepares users for better result on future tests. To create real time feedback in online learning web pages, a combination of Hyper Text Markup Language (HTML), Cascading Style Sheets (CSS) and JavaScript could be used to implement web pages, and the JavaScript plays the most important part of them. This paper will discuss how the JavaScript make the real time feedback of E-learning web site and display various examples implemented by the combination of JavaScript, HTML and CSS. Such a combination is also known as Dynamic HTML (DHTML).

Keywords: JavaScript, HTML, CSS, Real Time Feedback

1. Introduction

JavaScript was designed to add interactivities to HTML pages. It is a simple programming language that can be written directly into HTML documents to allow for increased interactivities with the user. In other words, JavaScript could be used in the client-side to control the browser elements and HTML Document Object Model (DOM) to offer interactivities to users. With JavaScript, webs designers have a full control of HTML objects (elements) to create and modify objects dynamically. It means, JavaScript allows web designers to devise web pages that are dynamic, so that the pages can produce many different types of displays and features depending on the viewer's actions such as the images that change when you move the mouse over a graphic. One of advantages of JavaScript is it can provide web interactivities without relying CGI (Common gateway Interface) programming language (such as ASP or PHP), which means the pages can be interactive even when your computer is not connected to the Internet. Another advantage is JavaScript also provides useful commands to incorporate graphics and sound files or to create a dialogue between the web page and its users. Most of the web interactivities and dialogues are real time feedback.

Moore[1] indicated that real time feedback can reinforces the learners' expectations and the learning outcomes of the curriculum. It raises the users’ learning interest and motivation and allows users to involve them in the subject matter because they can get the instant response. Using HTML and JavaScript plus multimedia files to implement teaching materials like review session and quizzes could makes the web pages easier for visitors to memorize and come back to the site again.

Judith [2] surveyed many financial and statistical courses and found that real time problem-solving, question and answer review sessions can be very beneficial because the results are immediate. Many students often choose the online courses because they can access them anytime and anywhere. The same course students could also ©2010 National Kaohsiung University of Applied Sciences, ISSN 1813-3851

(2)

enjoy getting together from anywhere at a specific time to interact in real time.

Paul Kerry[3] defined that Web Page Interactivity is a reference to “dynamic” content that means interactive allow the user to interact with the web pages in a way that causes the pages to respond to the user's input instantly. By using these dynamic contents, web designers can implement many real time feedbacks. Gary[4] study the Convenient Interactivity for the Class Web Page, found interactive is a valuable addition to web pages. They allow students to review materials and to get an immediate feedback as they answer questions.

There are four types of real time feedbacks brought up by Moore[1] and they are Verification, Elaboration, Visualization and Audio which could be created by JavaScript. Fernandez[5] also mentioned three kinds of online interactivity which are also created through the manipulation of (HTML, JavaScript and CSS) and could be used as real time feedback, they are Rollover text, Rollover buttons and Pop-windows. According the previous studies, the web designers could use JavaScript to create web page interactivities through which the real time feedbacks can be achieved.

2. Examples

The following examples are based on the ideas of four types of real time feedbacks which are brought by Matt Moore. Those examples are implemented by JavaScript.

2.1. Verification

This type of feedback is that learners move the mouse on the choice and feedback on right or wrong answers is notified immediately. Using onMouseOver and onMouseOut functions provided by JavaScript could implement such real time feedbacks. Rollover text interactivity could also make this type of feedback.

Fig1_1. Wrong or Correct will be shown immediately by moving the mouse pointer on the choices.

Fig1_2. Rollover text show the answer immediately by moving the mouse pointer on the text

2.2. Elaboration

This type of real-time feedback provides immediate elaboration of the verified answer. No matter what choice is made correct or incorrect, learners can get immediate elaboration for their choices.

(3)

Fig2. Learners can get immediate elaboration for their choices.

2.3. Visualization

In order to help learners get better understanding and recall of the materials, visual feedback could be used to achieve the purpose. Using real images related to the learning materials make learners associate the images with the materials and enhance their memorization.

Fig3. Learners can get both immediate elaboration and images for their choices.

2.4. Audio

In addition to graphics, sound also play a very important role in online learning. Some teaching materials presented with sound used in real-time feedbacks can also increase learners’ motivation.

(4)

3. Code

The codes shown on Table1 is the example of verification shown on Fig1_1. Functions Showthis and Hidethis are used to control the visibility of div1 and div2 which are the <div> tags. Moving mouse pointer on the choices will trigger Onmouseover and Onmouseout functions to evoke functions Showthis and Hidethis to show “Wrong!” or “Correct!” To do elaboration, visualization and audio real time feedbacks, we simply change the four variables band1, band2, band3 and band4 by adding more texts and images. To make the audio feedbacks, add more codes shown on Table2 could carry out it.

Table 1. Codes to make Fig1_1 <script> function Showthis(thisthing) { document.all(thisthing).style.visibility = 'visible'; } function Hidethis(thisthing) { document.all(thisthing).style.visibility = 'hidden'; } var band1='Wrong !'; var band2='Wrong !'; var band3='Correct !'; var band4='Wrong !';

var content1=('<Div id="div1" style="color:red;font-size:30; position:absolute; top:60; visibility:hidden " >'+band1+'</DIV>');

var content2=('<Div id="div2" style="color:red;font-size:30; position:absolute; top:60; visibility:hidden " >'+band3+'</DIV>'); document.write(content1); //顯示畫面 document.write(content2); //顯示畫面 </script> <body> <div style="background-color: #CCCCCC"> <font size="4">

<b>How many bits at most that can be assigned <br>to a variable of type float?</b><br> </font><p><font size="4">

<b>

<a href="#" onmouseover="Showthis('div1')" onmouseout="Hidethis('div1')"> It depends on the platform. </a>    

(5)

Table 2 Extra codes to make Fig.4 function soundPlay(sndName) { mySND.src = sndName; } ……….

<bgsound src="silent.aif" id="mySND"> ……….

4. Conclusions

With JavaScript, we can create many interactivities to achieve the online real-time feedbacks. Above examples shows that we can swap the images or texts by moving the mouse pointer over them or click the mouse to engage the audio and the learners can get the correspondent real-time feedbacks. Because JavaScript is a decision-making program language, we can control the attributes of HTML and make the web page more flexible and smarter. That means a web designer could use JavaScript to implement a lot of interactivities and real-time feedbacks. JavaScript also provides many object items such as alert message, sub-windows, From, Date and so on. Most of the web pages interactivities are dynamic and re-programmable and JavaScript has so many ready-to-use objects that allow web designers to devise more dynamic web pages. There are still more real-time feedbacks could be implemented by JavaScript only if the web designers know how to make the most use of JavaScript’s functions.

Reference

[1] Moore M., “Real time feedback in Programmed Learning. In B,” Hoffman (Ed.), Encyclopedia of Educational Technolog, 2005.

[2] Judith V. B., Ph.D. Designing for Learning. http://www.designingforlearning.info/services/writing/ecoach/tenbest.html [3] Paul K., “Web Page Design: Interactivity,” Encyclopedia of Educational Technology. SDSU, 2004.

[4] Gary P., “JavaScript: Convenient Interactivity for the Class Web Page,” Mid-South Instructional Technology Conference(Mufreesboro, TN, March 1999), 1999.