Using JavaScript to simulate formative assessment questioning in web-based open learning materials
Authors
Dr Chris Bowerman, Charlie Mansfield & Keith Sewell
School of Computing & Information Systems and Learning Development Services
University of Sunderland, Hutton Building, Chester Road, Sunderland SR1 3SD, United Kingdom
© 1997
Abstract
Questions in traditional print-based
materials
Questions in on-line materials:
a new approach
A first example: simple questions
A second example: series of
MC questions
Principles of good HCI-design
Some practical experiences
Real-life examples
Conclusions
References and
Bibliography
Abstract
This paper provides the JavaScript code for asking questions in web-based learning materials. The paper situates the setting of formative assessment exercises and questioning in the tradition of open learning materials design. Re-usable examples of code for HTML 3 and JavaScript are provided.
Keywords
Open-learning JavaScript HTML web learning
questions assessment
Questions in traditional print-based materials
Self-diagnostic questioning has long been a feature of effective open learning in traditional print-based materials (Mansfield 1987; 27). The pattern, established since at least the mid-eighties, has been for the course authors to pose a self-assessed question, then provide a suggested answer followed by a short discursive text by the course authors. This model encourages the learners by posing a question, as in a classroom situation, and providing enough space for the learners to attempt a solution to the question themselves. The course authors then provide enough material for the learners to assess their performance diagnostically. This is the basis of new learning since the learners form new connections through this process by revising their reading up to the point of questioning and making new connections between information (Lyotard 1979: passim).
Questions in on-line materials: a new approach
Corrective and evaluative testing during learning are also features of Vigorelli's models for cognitive interpretation as summarised by Van den Brande (Van den Brande 1993:26). Van den Brande points out that corrective instruction may be included in flexible learning technologies to help the system eliminate errors in the learner's knowledge, while evaluative techniques may be deployed by the courseware authors to verify the real knowledge of the learner. This paper suggests that teachers can add these two features to their on-line materials by integrating JavaScript questions. This will improve the interactivity of what may have been simply on-line texts for students to down-load and read. More importantly, however, from a pedagogic standpoint, is that learners will now be engaged in cognitive interpretation under Vigorelli's scheme.
As part of continued staff development at The University of Sunderland, Mansfield devised a strategy for providing the academics who are responsible for undergraduate teaching with a set of ready-mades or plug-and-play pieces of code initially in HTML. These pieces of re-usable code were already proven in learning materials projects which had gone to implementation phase. Mansfield applied the same principle to JavaScript when it became available along with Netscape Navigator 3.0 Gold towards the end of 1996. Mansfield developed a system specification for two types of questioning and the plug-and-play models were coded by Bowerman for re-use by academic staff in their own teaching and learning applications on the web.
A first example: simple questions
Our first example piece of JavaScript code provides authors of open learning materials on the web a method of setting single questions to their learners. The answers will be in the form of text, for example, short, one or two word answers. The value to the learning process of using client-side programming is that the learners are provided with rapid feedback on their response. The key feature from a self-study point of view is that the answers are hidden until the learner has attempted a response. Learners soon realise that they can take risks in answering the questions which they may not normally do in an open classroom situation.
<!- (c) Chris. Bowerman 1997>
<html>
<script language=javascript>
//'text1=apple&submit1=done' is contents of all form data
function formproc(theform)
{
if(theform.text1.value == "allumé")
{
location.href="yes.htm";
return true;
}
location.href="no.htm";
return false;
}
</script>
<form>
What French word does the poet use to convey the sense of illumination?<br>
Type in the word and then click "done" button<br>
<input type=text name="text1" value="erase this text" size=10>
<input type="button" value="done" ONCLICK="formproc(this.form)">
</form>
As you can probably see in the body of the JavaScript code two further files are called. These we named yes.htm and no.htm so that courseware authors can use these to reward the learner (yes.htm) or to perform some corrective teaching by providing additional textual help at this stage (no.htm). This latter file is the equivalent of the print-based discussion or 'Tutors' Suggested Response'. After reading the further help the learner may be permitted to try the question again for reinforcement.
We see these type of questions, above, as ideal for testing the acquisition of new language skills in the humanities or meta-language skills in science or technical subjects.
A second example: series of MC questions
The second example is to set up a series of multiple choice questions (MCQs). This requires two html files with JavaScript code in each one. The support file should be named carefully as mcqans3.html so that the MCQ Test program file can find it. The MCQ file may be amended to pose any number of questions in a single batch. The automatic marking program will then calculate a percentage result. We conceived this mode of batch questionning for two main reasons, viz. to provide variation from the single questions and, secondly, to simulate examination questionning by greatly reducing the success of guesswork. It is hoped that the learners will use these MCQs in a different learning strategy to diagnose their current status, constantly returning to re-profile themselves. Consider the speed with which they can re-run the test and receive results.
Here is the MCQ Test program file:
<!- (c) Chris. Bowerman 1997>
<!- Basic MCQ Test>
<!- Needs this file and mcqans3.html>
<!- Just copy 'question' form as many times as needed and edit for each question>
<SCRIPT>
// if pick right MCQ element then returns true
// NB as array starts at 0 for 1st element the user's number is - 1 answers=new Array(100);
for(var i=0; i < 100; i++) {answers[i]=0}
document.cookie=""
function rightOne(selectObject,question,choice)
{
if(selectObject.elements[choice - 1].checked)
{
answers[question]="1";
}
else
{
answers[question]="2"
}
}
// 1 = correct; 2 = incorrect
function feedback()
{
for(var i=0; i < 100; i++)
{
document.cookie += answers[i]
}
location.href="mcqans3.html"
}
</SCRIPT>
<!-- START CUT>
<!-- Change: form name; rightOne Qno, Element>
<form name=mcq1>
<p>What is the answer to this question? What type of poems does the poet write?
<br>Click on the correct answer:
<br><input type="radio" name="item1" CHECKED>1: Iambic
<br><input type="radio" name="item1">2: Prose
<br><input type="radio" name="item1">3: Narrative
<br><input type="radio" name="item1">4: Conventional
<br><input type="radio" name="item1">5: Alexandrin
<br><INPUT TYPE="button" VALUE="Submit Answer" onClick="rightOne(document.mcq1,1,2)">
</form>
<!-- END CUT>
<form name=feedback>
<P><INPUT TYPE="button" VALUE="Get Feedback on Test" onClick="feedback();return true">
</form>
Use the rems START CUT and END CUT to Edit, Copy and Paste in new questions to incresae the size of your batch when you are using this code. You can set up to one hundred questions in each batch. In practice we have found that batches of five or ten are more likely to maintain the interest of the learner.
Below is the code for mcqans3.html which is the support file for marking and calculating the percentage score. It is important to install this file in the same server account as the question file or, at least, to point to it from the question.
<!- (c) Chris. Bowerman 1997>
<script language="javascript">
document.write("<h2> MCQ Feedback</h2>")
answers = document.cookie
ccount = 0
wcount = 0
qcount = 0
score = 0
for(var i=0; i < 100; i++)
{
if (answers.substring(i,i+1) == "1")
{
qcount++
ccount++
document.write("Question " + i + " correct.<br>")
}
if (answers.substring(i,i+1) == "2")
{
qcount++
wcount++
document.write("Question " + i + " incorrect.<br>")
}
}
score = ((ccount/qcount)*100)
document.write("<br>You scored " + score + "%")
</script>
You may wish to set these questions in a multiple frame web page environment. This provides your learners with a true desktop which simulates the look of multimedia teaching materials usually supplied on CD-ROM. The example code and a discussion of this environment are given in an earlier paper (Mansfield 1996). The value of a multimedia look is that the common Graphical User Interface (GUI) standards, for example, menus and buttons need not be used; the interface can be tailored to suit the content, with the user clicking on pictures, animations or text to answer questions or navigate through the material.
Principles of good HCI-design
When exploiting the advantages of the multimedia approach you should still bear in mind the principles of good HCI design, which we feel are as follows:
- focus attention on content: the mechanism of the interface should be transparent to the user
- avoid hard-edged frames dividing up the screen unless this is appropriate
- use the central area of the screen for content. The screen perimeter should not be allowed to draw attention away from the important information on screen, it should either be a light neutral colour or be used to house buttons such as navigational tools.
- never assume that a user will take n number of seconds to absorb a piece of information, give the user control of the pace of delivery unless pace is part of the teaching specification.
- movement on the screen should direct attention to important information, careless use of animations can distract and cause an annoying break in concentration.
Some practical experiences
The opportunity to use JavaScript in the authoring of an on-line package of learning materials occured in July 1997. At the University of Sunderland the English Studies department has provided a web-based learning environment for its level one undergraduates as part of a compulsory module in stylistics and close reading since September 1995. The web-based package, POETICA, allows learners to study metrical analysis of contemporary English verse over the web. The Internet was chosen as a delivery mechanism in 1995 because many of the students work on a split campus, away from the main English Studies department. Other reasons impacted on this choice of delivery medium and are documented elsewhere (Mansfield & Robertson 1996).
In July 1997 the requirement to make the materials more suitable for independent study coincided with a growing interest from other European universities in Sunderland's poetry learning materials. The Czech Technical University of Prague and the Université de Lille-III amongst others had particular interest in the web-based package. The fact that mainland European institutions were viewing the materials and may want to use them with their students became one of the important design considerations as we began to author a new section in the learning materials.
We had three key considerations as we began to write: speed of development (we only had five weeks of an academic author's time; the author was new to HTML and had never seen JavaScript before), Europe-wide accessibility (we translated this into producing screens with low transmission overheads), and the need to produce a set of learning sessions that could be used easily by students without technical support. With our European partners, we could not be there in person to help students to start using the materials in France and the Czech Republic, for example.
We achieved low transmission overheads by keeping the screen design as text-only, that is, no graphics were included on the web pages. However, we did achieve a layout and colour scheme that improves the legibility of the package by use of the HTML frameset features for multiple frames on one screen, by use of font colour, size and face settings now available under HTML 3.2, and by careful use of tables with differently coloured backgrounds. Further, the employment of the JavaScript routines for formative self-assessment by the learner would mean that processing time would be kept client-side, minimising the calls on the remote unix server back in Sunderland. This is an important consideration when designing web materials for use by several European partners.
The challenge of making the materials suitable for distant independent study we met by using a standard format for each task. We broke the work down into Lessons. Each lesson has a learning objective followed by a short study text. The learning is consolidated by providing a formative self-assessment question at the end which the learner can answer and have marked instantly by the JavaScript routine.
Examples
The results of our work can be viewed and used at the following location on the web http://www.sunderland.ac.uk/~us0cma/poetica.html the new Self-Study Route option appears at the top of this screen. We offer the older style materials alongside the newer, self-study route so that we can begin to perfom comparisons of the two styles of learning materials in later years.
As you can see from the code for our Lesson 1, given below, the new academic author had three jobs to do with each Lesson. First to plug in the JavaScript routine in the head section at the top of the page of HTML code. Then, to make the form work at the bottom of each Lesson page and finally to write yes.htm and no.htm files. This pragmatic rationalisation of the authoring process gave us the speed of productivity we needed to complete the project in the five weeks we had.
<html>
<head>
<title>LESSON 1</title>
<script language=javascript>
//'text1=apple&submit1=done' is contents of all form data
function formproc(theform)
{
if(theform.text1.value == "stress")
{
location.href="yes1";
return true;
}
location.href="no1";
return false;
}
</script>
</head>
<body bgcolor="ccccff">
<table border=0 cellspacing=1 cellpadding=8>
<tr>
<th width="70%" align="left">
<font color=000000 size=3 face=arial><b>LEARNING OBJECTIVE 1:
<font color=000000 size=2 face=arial><br>- to understand the history of the Latin terms<p>
<th width="30%">
<th bgcolor=ffffcc align="top">
<font color=000000 size=5 face=arial><b>Lesson 1<br>Terms
</tr>
</table>
<font color="000000" size="4" face="arial">
<br>
We have a thousand year residue of taught Latin. Many poets we study today
learnt Latin. Poets draw on existing traditions and meanings to
contextualise their work and give it resonance even though they are doing
something innovative with every new piece.
The very precise terminology of Latin prosody (e.g. iambs, pentameter) was
therefore borrowed to describe English verse. It does not fit exactly
because of the stress differences in the two languages. So a long Latin
syllable is considered the same as a stressed English syllable and a short
Latin syllable is treated as an unstressed English syllable for the
purposes of metrical description.
<br>
<br>
<br>
<p>
<center>
<TABLE BGCOLOR="ffffcc" BORDER=0>
<TR ALIGN=LEFT>
<TD><FONT SIZE=3><center>
<font color="cccc00" size="2" face="arial">ACTIVITY 1
<font color="000000" size="4" face="arial">
<br>
<form>
What word describes the emphasis on a poetic word?<br>
Click in the answer box, type in your word and then click the "done"
button.<br>
<input type=text name="text1" value="" size=10>
<input type="button" value="done" ONCLICK="formproc(this.form)">
</form>
</center>
</center>
</td>
<TD><font size=3><center></center>
</td>
</TR>
</table>
<p>.
</body>
</html>
Conclusions
In conclusion it can be said that with the introduction of JavaScript and HTML3 for frames design on the web there is now an opportunity for teaching staff within universities to begin building their own open learning environments for their course materials. As we move into a more computer-literate Information Society in Europe and as Internet connectivity increases the demand for university-level teaching to be delivered into the workplace and home will increase. Teaching staff with the skills to re-engineer their own course materials in the web's new languages and who have an understand of good user-interface design will be assured of a place in this new Information Society.
References and Bibliography
Van den Brande, Lieve. (1993). Flexible and Distance Learning - A Special Report. Wiley
and Commission of the European Communities Directorate-General XIII, Brussels.
ISBN 0 471 93015 6
Lyotard, Jean-François. (1979). La condition postmoderne, rapport sur le savoir. Minuit, Paris
Mansfield, C., Robertson, S.(1996) Developing Internet Courseware to Create Freedom and
Flexibility for Learners in University English Studies, in Deliberations, Ed. Wisdom,
Pollard, Downey, Rao, Slater. London Guildhall & Kingston. ISSN 1363-6715
http://www.lgu.ac.uk/deliberations/home.html
Mansfield, Charlie. (1996). Designing Outcome-driven Independent Learning Materials for
the Worldwide Web, in Online Educa Berlin 1996 - International Conference on Technology
Supported Learning , eds. Jaeger, Marks & Stahl, ICEF GmbH, Bonn, pp. 133-136.
ISBN 3 925144 09 9
http://www.sunderland.ac.uk/~us0cma/berlin.htm
Mansfield, Charlie. (1987). The Communications Course - English for Industry. Icon, Nottingham.