Payoff functions can be presented to the participants in formulas, payoff tables on paper, on-screen calculators, or a combination of these. Using on-screen calculators has several advantages: (1) it is easy for the participants, and (2) the experimenter can keep track of what decisions the participant is considering (which is of course not possible when you give them a payoff table on paper). A on-screen calculator has typically several input fields (in this example the production of other firms and the own production in an oligopoly) and one or more output fields (in this example the profit of the decision maker, but we could have added the price per unit as an additional output field). We can implement a calculator using javascript, so all calculations are done on the client's computer and we limit the workload for the server.
The most simple version makes use of (number) input fields. The participants enter numbers in the two fields and clicks the button. However, if the number of possible inputs is very large, participants may not like all this typing, and we may use a slider instead.
These kind of sliders are new in HTML5, and they don't show numbers. This is awkward, because the decision-maker is searching for a number. Therefore we added with javascript a number just behind the slider, which is automatically updated when the slider is moved. The user can use the mouse to slide, but when a slider is active the keyboard arrows can also be used, in order to input more precisely. Note that these sliders can look very differently in different browsers, and older browsers will not show the slider. This is of course no problem in the lab where every participant uses the same browser, but it may be problematic in an internet experiment.
In the third form the user can decide what input to use: the slider (mouse and arrows) or a text input.
Finally, you can use a calculator without a submit button. This is very users-friendly but has an enormous drawback: we cannot keep track of what decisions the participant is considering. In this version it is quite likely that the participant will look for best responses: fix the production of others and use the slider to find the best response.
It is quite easy to save this information: every time the "Calculate your profits" button is pressed and a javascript function calculates the profit, we add the numbers the participant entered at the end of a string called tekst:
tekst=tekst+"-"+productionother+"&"+yourproduction;
document.getElementById('hiddenField1').value=tekst;
and this string is put in a hidden field of the decision form: in this example this hidden field is called hiddenField1. When the participant makes a decision the value of this hidden field is send along and can be be saved in the database. The string has the form: -90&30-120&40-150&50 which in this example means that the participants has used the calculator three times this period, the first with the productionother 90 and yourproduction 30, the second time with productionother=120 and yourproduction=40, etc.
Download these four examples in one zip-file. The html files of the four examples are respectively named calculator0.html, calculator1.html, calculator2.html, calculator3.html.