(  german version )

---

aims | construction of new tasks | types of tasks | further hints | links | ©

---

Target group

This JavaScript is basically aimed at people who

• are able to edit html-documents on their own
• have some basic knowledge about the construction of forms in the www (or who are at least willing to acquire this)
• want to integrate some smaller interactive elements into their html-documents
• but who cannot - or do not want to - program these tasks on their own


This is addressed to all instructors wanting to extend their instructional www-material by some interactive elements with reasonable technical effort.

Educational aims

The aim was to restrict some of the known types of tasks (as for example multiple choice or short answer) to the in my opinion most important educational aims and to allow the use of these interactions via the internet and locally. At any rate the basic requirement will be a JavaScript-compatible browser (e.g. Netscape).
Basically the types of tasks being mentioned here are only suitable for exercise purposes. There will be no examinations nor credits and you will not get a quantitative end result. These programs assume that the reader is constructive and willing to learn. The most important features of these tasks in my opinion are:
 
• to make demands (questions)
• to mark an answer as wrong/correct (knowledge of result)
• to inform about the correct result (knowledge of correct result)
• to give opportunities for a discussion of the task (elaborated feedback)

 
Are tasks with an opportunity for feedback at all effective for the learner?  Yes they are, if one wants to answer the question briefly and somewhat simply.  Anyone looking for a more differentiated answer may be refered to my article: "Aufgaben stellen und Feedback geben".

Construction of New Tasks

For the adaptation of tasks a JavaScript-compatible browser will be required (this is nowadays the usual standard with personal computers). For the construction of tasks an editor will be needed. With Netscape (Navigator and Communicator) both will be at one's disposal in one program.

Construction of new tasks with  template.html

To construct exercises simply open the data file template.html with the editor and then save these under any given name. The data file template.html and respectively the copy of  template.html can be subdivided into
 

• JavaScript
• html-code with forms

 
The JavaScript contains some functions, to which the constructor of exercises just transfers some arguments as values. The constructor of these exercises is not meant to understand the script, but only has to know what sorts of values he can transfer to the script which can be arranged quite easily. Normally the constructor of these exercises ignores the JavaScript by concentrating his attention on the section beneath the JavaScript.

You can edit this page as usual. Just modify the examples according to your purposes. Basically you will have to work with the commands copy,  paste and modify.

Types of tasks

 

Standard types of tasks on this page

Simple  Multiple Choice	an arbitrary series of alternatives; one correct answer
Extended Multiple Choice	an arbitrary series of alternatives; several correct answers
Short Answer	short free answer;  three examplary comparisons; type of comparison:  exact correspondence or to be precise the model has to be contained in the answer
Essay-Test	extensive textual answer, which can only be compared with one examplary answer
Clickable Maps	you can click on a certain position in a graphic

The German version contains some further variations. To use these variations effectively some of the text in these scripts would have to be translated into the appropriate language.

Construction of tasks with a simple example:

Simple Multiple Choice (Example 1)

Who was the founder of psychoanalysis?

1.)Carl Gustav Jung
2.)Alfred Adler
3.)Sigmund Freud
4.)Wilhelm Reich

<FORM>
<P><B>Who was the founder of psychoanalysis?</B></P>
<P>
1.)<INPUT type=radio name="mc" value="0">Carl Gustav Jung<BR>
2.)<INPUT type=radio name="mc" value="0">Alfred Adler<BR>
3.)<INPUT type=radio name="mc" value="1">Sigmund Freud<BR>
4.)<INPUT type=radio name="mc" value="0">Wilhelm Reich</P>
<P>
<INPUT type=hidden name=feedback value ="The founder of psychoanalysis is Sigmund Freud. Important terms of his teachings are for example: Ich, Es, Überich, Libido, Übertragung, Angstabwehr, Verdrängung and Widerstand.">
<!-- ---------------------------------------------------------------------------------------------------------------------------------------/!-->
<INPUT type=hidden name=bearbeitet value = "false">
<INPUT TYPE="BUTTON" NAME="Aufgabe" VALUE= "Aufgabe bestätigen" ONCLICK= "mccheck(this.form)" >
<INPUT TYPE="BUTTON" NAME="Lösung" VALUE= "Korrekte Lösung?" ONCLICK= "lmccheck(this.form)" >
</FORM></P>

value="0" means: This alternative is wrong.
value="1" means: This alternative is correct.
ATTENTION: Only one of these alternatives can be correct (therefore value=1 can only be chosen once)

With the help of Netscape Composer you can very easily construct these tasks as you might see in the following screen shot: Here the field "feedback" has been clicked on and the dialogue field "HTML-Tag" has been opened. In this dialogue field you can simply write the text for your feedback in between the quotation marks.

---

Simple multiple choice (Example 2)

(is only listed here simply to emphasise that you can test more than just simple facts with simple multiple choice: also this task is constructed in the shape of a table. This exercise has been taken from:
http://www2.gasou.edu/psychology/courses/dewey/ch05mcq.htm)

Negative reinforcement...
 

1.)		increases the rate of behavior
2.)		involves following a behavior with a noxious or aversive stimulus
3.)		is a form of punishment
4.)		is also called DRL
5.)		requires an extinction period

---

Simple multiple choice (Example 3)

Can you construct simple True/False-questions with "Simple Multiple Choice"?

1.)Yes
2.)No

Multiple choice with several correct alternatives

Please tick all the chancellors of The Federal Republic of Germany (up to 3.2.1997)!

1) Stresemann
2) Heuss
3) Adenauer
4) Erhard
5) Carstens
6) Kiesinger
7) Barzel
8) Gerstenmaier
9) Brandt
10)Schmidt
11)Kohl
12)Lafontaine

<P><FORM></P>

<P><B>Please tick all the chancellors of 
The Federal Republic of Germany (up to 3.2.1997)!</B></P>

<P>
1) <INPUT type=checkbox name="box" value="0">Stresemann<BR>
2) <INPUT type=checkbox name="box" value="0">Heus<BR>
3) <INPUT type=checkbox name="box" value="1">Adenauer<BR>
4) <INPUT type=checkbox name="box" value="1">Erhard<BR>
5) <INPUT type=checkbox name="box" value="0">Carstens<BR>
6) <INPUT type=checkbox name="box" value="1">Kiesinger<BR>
7) <INPUT type=checkbox name="box" value="0">Barzel<BR>
8) <INPUT type=checkbox name="box" value="0">Gerstenmaier<BR>
9) <INPUT type=checkbox name="box" value="1">Brandt<BR>
10)<INPUT type=checkbox name="box" value="1">Schmidt<BR>
11)<INPUT type=checkbox name="box" value="1">Kohl<BR>
12)<INPUT type=checkbox name="box" value="0">Lafontaine</P>

<P><INPUT type=hidden name=feedback value ="The chancellors of Germany are (up to 3.2. 1997):<p>Adenauer<br>Erhard<br>Kiesinger<br>Brandt<br>Schmidt<br>Kohl">
<!-- ---------------------------------------------------------------------------------------------------------------------------------------/!-->
<INPUT type=hidden name=bearbeitet value = "false">
<INPUT TYPE="BUTTON" NAME="Aufgabe" VALUE= "confirm answer" ONCLICK= "boxcheck(this.form)" >
<INPUT TYPE="BUTTON" NAME="Lösung" VALUE= "solution?" ONCLICK= "lboxcheck(this.form)" >
</FORM></P>

---

The necessary information is basically the same as in simple multiple choice tasks.The only difference is that there can be several correct alternatives (that means: value="1" can be used several times)

Matching tasks have to be understood as compact multiple choice tasks because every single matching task can be subdivided into several simple multiple choice tasks. It is possible here to represent the matching tasks with multiple choice with several correct alternatives as the following example shows:

What person stands for which psychological movement?
 

	Behaviourism	Psychoanalysis	Cognitivism
Freud	1.)	2.)	3.)
Skinner	4.)	5.)	6.)
Piaget	7.)	8.)	9.)
Watson	10.)	11.)	12.)

The alternatives have to be numbered so that the automatical feedback can be given correctly.

Short answer tasks for text [and whole numbers] (Example 1)

Who was the founder of psychoanalysis?

<FORM method=post>
<P><B>Who was the founder of psychoanalysis?</B></P>

<P><INPUT type=text name="antwort" size=40 value="" >

<INPUT type=hidden name=muster1 value ="Sigmund Freud">
<INPUT type=hidden name=muster2 value ="Freud">
<INPUT type=hidden name=muster3 value ="">
<INPUT type=hidden name=vergleich value = "="><BR>
<INPUT type=hidden name=feedback value ="The founder of psychoanalysis is Sigmund Freud. Important terms of his teachings are for example: Ich, Es, Überich, Libido, Übertragung, Angstabwehr, Verdrängung and Widerstand.">
<!-- ------------------------------------------------------/-->
<INPUT type=hidden name=bearbeitet value = "false">
<INPUT TYPE="BUTTON" NAME="Aufgabe" VALUE= "confirm answer" ONCLICK= "shortcheck (this.form)" >
<INPUT TYPE="BUTTON" NAME="Lösung" VALUE= "solution?" ONCLICK= "lshortcheck(this.form)" >
</FORM></P>

All in all there are three examplatory answers (patterns [in German muster]) with whom the learner's answer can be compared.

muster1

- corresponds with the best possible answer and is given as the correct solution

- should at any rate contain a certain value

muster2 and muster3

- are alternatively correct solutions

- do not have to contain a certain value (e.g. muster3 in this case)

comparison

= means: exact correspondence between answer and examplary answer

!= means: exemplary answer is contained in the answer (capital letters are being ignored)

 
An answer is correct if it corresponds (according to the type of comparison) with one of the given patterns. An exemplatory comparison with "" will be ignored because this would make every answer appear to be correct.

---

go top

---

Short Answer test for text [and whole numbers]  (Example 2)

How do you call the theoretical position within psychology which only claims observable behaviour to be relevant for an analysis and does not refer to interactions between stimulus and response?

In this question the exemplatory comparison "pattern contained in answer" has been used.
Many answers can be given correct feedback which would otherwise be noted as incorrect as a result of wrong spelling or correct extensions.  <input type=hidden name=vergleich value ="!="> in correspondence with muster3="behavi" has the effect that for example all the following answers will be marked as correct:  behavior, behaviorism, behaviourism, Behaviorism.

Short Answer Test especially for numbers

1/2 = 

correct would be then for example: 0.5; .5; 0,50000

Signification of the modifieable input variables (with an example)

<input type=hidden name=muster value ="0.5"> defines 0.5 as correct answer with which the student's answer is being compared; this answer is also defined as the only correct pattern for the solution
<input type=hidden name=ergebnisart value ="Zahl"> defines that the student's answer will be interpreted as number and not as an expression. ergebnisart value ="Ausdruck" also accepts arithmetical expressions as answers, e.g. 0.25*2. If the answer should be valued as number and/or expression, the the code should be: value="Ausdruck".
<input type=hidden name=toleranz value ="0"> marks the student's answer only as correct if it corresponds exactly with the pattern. If you have a tolerance of value = "0.01", then the student's  answer will be marked correct if it does not vary more than 0.01 from the correct result (= the value of the input variable with the name muster. You can use an abritrary number of tolerance values.

Furthermore only the input variable feedback will have to be changed as in example 1.
<input type=hidden name=feedback value ="1/2 = 0.5" >

The construction of these special short answer tasks is explained (in German) on the following website:
Short - Answer (Zahl) - Aufgabe zur Überprüfung von Zahlen.

Essay test

How can escape learning be converted into avoidance learning?

<P><FORM method=post>
<B>How can escape learning be converted into avoidance learning?  </B></P>
<P><TEXTAREA name="antwort" rows=10 cols=50 wrap=virtual></TEXTAREA></P>
<P><INPUT type=hidden name=feedback value="<b>by giving the animal a warning signal </b><p> If the animal receives a warning before an aversive stimulus, the animal has a chance to avoid the stimulus by performing some behavior, such as running away. This is avoidance conditioning or avoidance learning.">
<!-- ---------------------------------------------------------------------------------------------------------------------------------------/!-->
<INPUT type=hidden name=bearbeitet value = "false">
<INPUT TYPE="BUTTON" NAME="Aufgabe" VALUE= "confirm answer" ONCLICK= "essay (this.form)" >
<INPUT TYPE="BUTTON" NAME="Lösung" VALUE= "solution?" ONCLICK= "lessay(this.form)" >
</FORM>

In this case the only possibility left is to define the exemplatory answer as value of the variable feedback.
The exercise above has been slightly modified and was taken from:
http://www2.gasou.edu/psychology/courses/dewey/ch05mcq.htm)

Clickable map

These exercises are not so easy to construct. If you have little time you should not even start with it, because you will have to put quite a lot of effort in it.  (This exercise only functions locally if the file dreieck.gif lies in the same directory as this file!)

Please click on the hypotenuse!

<P>
<FORM>
<B>Please click on the hypotenuse!</B> </P><P>
 <IMG USEMAP="#dreieck" SRC="dreieck.gif" HEIGHT=132 WIDTH=204></P><P>
 <MAP NAME="dreieck">
   <AREA Shape="poly" COORDS="14,21 28,21 188,108 188,113 14,21" href= "javascript:meldung('1','You have clicked on the hypotenuse')"  onMouseOver="window.status='Please click with the mouse on the correct part!'; return true"; onMouseOut="window.status=''; return true" >
   <AREA Shape="rect" COORDS="181,14 188,101" href= "javascript:meldung('0','You have clicked on a leg')" onMouseOver="window.status='Please click with the mouse on the correct part!'; return true"; onMouseOut="window.status=''; return true">
   <AREA Shape="rect" COORDS="22,14 187,20" href= "javascript:meldung('0','You have clicked on a leg')" onMouseOver="window.status='Please click with the mouse on the correct part!'; return true"; onMouseOut="window.status=''; return true">
 </MAP> </P><P>
 <!-----------------------------------------------------------------------------------------------------------------------------------------/!-->
 <INPUT type=hidden name=bearbeitet value = "false"> 
 <INPUT type=hidden name=feedback value ="The side y is the hypotenuse.<p> In a right-angled triangle the hypotenuse is the side which lies opposite the right angle. This is in this case the side y. The hypotenuse is the longest side in a triangle.<p> The two other sides which lie in a right angle are the legs.">
 <INPUT TYPE="BUTTON" NAME="Lösung" VALUE= "more explanation" ONCLICK= "graphfeedback(this.form)" >
</FORM></P>

---

First of all you will need a www-compatible graphic (gif, jpg). Then the clickable parts of it should be defined with Area Shape and coordinates which can easily done with the appropriate program (e.g.: Getting Utilities for Creating Clickable Maps). Then the graphic will have to be integrated into the www as you can see above (maybe you will have to modify it slightly). If you have several exercises of this shape the names of the maps should be different from each other.

Adaptions of the lines starting with <AREA...:

Shape and COORDS according to the values of the defined areas

meldung ('first value=correct/wrong','second value= direct feedback'..), in the example

meldung ('1','You have clicked on the hypotenuse') = correct and special  feedback
meldung ('0','You have clicked on a leg') = false and special feedback

You can as well give further explanations in the hidden variable feedback.
The direct feedback should be relatively short and should not contain an html-code.
The feedback in the variable feedback can contain an html-code.

Graphical exercises need a lot of effort and you will have to try out a lot of things. The example above which only serves as a means of demonstration could have been constructed much easier by using simple multiple choice. So make sure that you really need a graphic image for your exercise. The clicking on certain positions in a graphic image is only useful if it is hard to describe the same thing in words.

Further hints and recommendations

Help with answers

It is possible to provide more information for one exercise. This is useful if you want to give the learner several options for answering to a question, to give elaborated feedback or to refer to interesting links in the www.
These kinds of modifications normally require appropriate programming skills.
Some exercise hints can be easily integrated without special knowledge as you might see in the following examples.

The easiest way to offer help with the answering of the exercises is to include a hint which provides the piece of information via JacvaScript. You will not need any programming skills for that.

example: Help

Source text:

<A HREF="javascript:alert ('Here comes help')">help</A>

Simply copy the source text of the link and change the text according to your wishes. In this manner you can even provide several dialogue fields with help for one and the same exercise.

Example


Who was the founder of psychoanalysis?

1.)  Jung
2.)  Adler
3.)  Freud
4.)  Reich

If you have any difficulties in answering this question,  Hint 1 and/or Hint 2 might help you.


---

with exercise hints:

 
5 CDs cost 20 Euro. How much cost  8 CDs?

8 CD's cost  Euro
If you have any difficulties in answering this question, the  might help you.

--------------------------------------------------------
In this case simply the button "hint" has been added to the short-answer task.

<INPUT type=Button name=Aufgabenhinweis value=Aufgabenhinweis onClick = 'gibfeedback ("First think about the price of one CD!")'>

The contents of this exercise hint is given in between quotation marks after  gibfeedback. gibfeedback is a function of the script and shows the text as it appears in the feedback window. If you want to integrate a hint into a new exercise all you will have to do is to insert the button "hint" in the new exercise and to slightly modify the text of your feedback.

With some experience you can easily construct the following tasks:


All geometrical figures with 4 sides are quadrilaterals

1.)Yes
2.)No

If you have any difficulties in answering this question, the  might help you.

----------------------------------------------------------------
In this case the button "hint" has simply been inserted into the exercise. The text of the hint reads as follows in the script:

<INPUT type=Button name=Aufgabenhinweis value=Aufgabentip onClick = 'gibfeedback ("Are these quadrilaterals as well? <P><IMG SRC=vier1.gif HEIGHT=54 WIDTH=46><IMG SRC=vier2.gif HEIGHT=43 WIDTH=76>")'>

Prompting in a Short Answer exercise


The german word Fenster in English means
Hints for the answer




Here two new buttons have been created which write the information into the answer field when you click them. This looks as follows in the JavaScript:

<INPUT type=Button name=hint value="the word begins with" onClick ='JavaScript:this.form.antwort.value="w" '>

Hint: You will find more exercises with the opportunity to give help after the answering of the question on the following site (in german): Übungsaufgaben mit antwortabhängiger Rückmeldung.

References to JavaScript

For users wanting to edit several html-sites with exercises it would be useful to include the JavaScript template.js. Instead of listing the script on every single page, the file template.js will simply be integrated in an exercise html site. For this you will
1. need the file template.js
2. know how to integrate the file into an exercise html site.

Save template.js and auf1.html !

relevant JavaScript which has to be integrated	procedure to save the files (with Netscape)	examplatory exercise html-site auf1.html with integrated JavaScript template.js
template.js	please click with the right mouse button on these links and save as "template.js" resp. "auf1.html"	auf1.html

Try to open the file auf1.html after saving and check whether the exercise works.

As you might see in the file auf1.html the JavaScript is integrated as follows:

<SCRIPT SRC="template.js">
</SCRIPT>

The exercises only work if auf1.html and template.js are in the same directory.  If this is not the case you will have to modify the structure of the directory according to the file template.js.
Attention: Please check whether auf1.html runs on your server as well. The server will have to be configurated as follows:
type=application/x-javascript exts=js
more information: Specifying a file of JavaScript code

important advice: The integration of the file template.js can lead to advantages when used intern, but it can also lead to complications (resp. a higher amount of effort) with users,  who - worldwide - want to adapt the exercises locally. The integration is only an advantage if you want to construct a rather high amount of exercise html files. The JavaScript in every file is in any case less complicated and should always be used if you want to promote a worldwide revision of exercises on local computers without networks.

How to make changes in the script (only for users with appropriate experience):

If you have made any changes in the script you should note this as follows in a commentary line:
//Script has been modified on 5.5.97 by name, surname.

If you only need very special types of tasks for your purposes you can simply cancel the parts of the script which do not belong to these tasks. This saves you space. It is of course possible to modify the verbal standard feedback and to include your own addition.

The size of the feedback window has been defined as  300 x 400 pixel which appeared to me to be sensible as the monitor has a dissolving of 800 x 600 pixel. You can change the size of the window according to your requirements by changing the values of the following two variables:
      var window width=300
      var window height=400
In the JavaScript you can find these lines on top.

Changing the forms (only for users with appropriate experience!!!):

Some specifications among the  <Input.........> can be made without changing the proceding of the programs some others cannot be made.

Please do not change!

• the names of the variables
• anything from

<!-- -------------------------------------------------------------------------------/!-->
to inclusive
</FORM>
You can vary for example the following details:
• the details for size in a dialogue field
• the details for rows or cols in a textarea field
• to delete existing alternatives or to add new ones (whole input lines) for the multiple choice tasks.


How to deal with the variable feedback

Especially for the discussion of exercises it is possible to include quite a lot of text in the value of the variable feedback. This text can as well contain a html body code. You will have to proceed as follows: Just type the text (for example with Netscape Composer) as you want it to appear in the feedback window. Then copy the source text and paste it in between the quotation marks.

Basically you should pay attention to the following points:
 

• You should avoid links in the feedback as this would be too complicated and could lead to navigation problems and irritations. If you want to include links in the feedback however you should think of specifying the link address  (e.g.: target='_blank', target='_new', target='_top' oder target='special window name').
• The text for the feedback is limited by quotation marks. Additional quotation marks could lead to irritations and even not-wished-for results. For the beginners it would be better not to set any quotation marks by themselves within the feedback (with the exclusion of the quotation marks which have to be there anyway).
• For the experts I would recommend to edit extensive feedback as an html-page of its own and then to copy and paste the body code in between the two quotation marks. Important: Replace each "  within the quoatation  marks  by '.

Some critical remarks

The script is far from sufficing all software ergonomic standards and educational wishes. This has not been my intention anyway. There are for example lacking a reliability test for the construction of tasks, a variable control for the answer as well as sufficing possibilities for analysing the answer. Also there would be plenty of possibilities to improve the layout of this document.

Despite of these points the script appears to me to be quite useful if it comes to the balance of effort and result. Its actual use will depend on the constructors of the exercises and in how far they are able to ask questions and give effective feedback.

Hints to further interactive exercises

Interactive Exercises for On-line Education by Virginia Tech Chemistry Hypermedia Projects
Hot Potatos

Educational references

Assessment, a very substantial text dealing with several aspects of assessment, beneath it a discussion of several exercise types, University of Technology, Sydney
Guidelines for Multiple Choice Question Creation (short and in brief)
How to write tests
HOW TO WRITE BETTER TESTS
Multiple Choice Formats
Writing Multiple Choice Items which Require Comprehension  by Russ Dewey
Selection Test Items (comprehensive presentation with tips for the construction of selection tests))
Designing MCQ's (information supplied by: Helen Pownall )

© Bernhard Jacobs, 2001
free software only for noncommercial educational usage