Background

Decades ago, my employer sent me to training courses. There were some psychology questionnaires and this got me interested in psychology such that in recent years I've taken MOOCs in subjects such as Behavioural Economics.

One of the questionnaires I found during that period was for gauging optimism. Unfortunately I did not note where I found it. I coded it up as a C program for Turbo-C to be run on PCs (that's how long ago it was). Recently I came across the code and wondered if I could rewrite it in HTML+Javascript. So this quick project is a bash and Javascript refresher.

Format of situations and responses

The questionnaire contains 48 situations for which one of two responses must be selected. The format I'm starting from, slightly modified from the C data initialisations, is:

s The project you are in charge of is a great success
1 I kept a close watch over everyone's work
0 Everyone devoted a lot of time and energy to it

The first column of the situation indicates the trait it pertains to. The other traits are m and v. These mean respectively personalisation (is it me?), permanence/continuation (will it always be so?), and pervasiveness (is it always the case?). There are also inverse situations, marked by S, M and V respectively. An example of an inverse situation is:

S You get lost driving to a friend's house
1 I missed a turn
0 My friend gave me bad directions

The first column of the answers indicates whether that answer will contribute to the score for that trait, 1 for true.

6 traits and 8 situations each gives 48 items. Thus the maximum score for each of the 6 traits is 8.

HTML generation script

I considered the usual suspects for scripting, bash, Ruby, Python and Perl and settled on bash. It's very much within bash's capabilities.

The HTML code for each situation is straightforward, a situation followed by a radio button for each answer. For example:

<p id="s1" class="init">1. The project you are in charge of is a great success</p>
  <p class="tab"><input type="radio" name="a1" value="s">I kept a close watch over everyone's work</p>
  <p class="tab"><input type="radio" name="a1" value="">Everyone devoted a lot of time and energy to it</p>

The value attribute is used when tallying the counts from the DOM. For the answers the class attribute is used to indent using CSS. For the situation the class attribute is to highlight unanswered situations, the other state being "flagged". The id attribute is used to find each situation using GetElementById later. The answers are found using GetElementsByName as ids have to be unique. (Note, plural GetElements...)

It's easy to loop through the input file consuming 48 situations and 96 answers, generating the HTML. Notice the use of the range operator in the for loop. I make no apology for hardcoding 48 as the script is specific to this project.

For calculating the results and presenting them, I used a Javascript function that's tied to a button. It calls auxiliary functions for repeated code. For me it was a useful refresher in Javascript. My starting point is Javascript is modelled after C, so many C constructs exist in Javascript too, for example, increment, assignment, short circuit boolean, and ternary operators.

For string output, while you can concatenate strings and integers to get a string, Javascript has template literals which are useful for interpolating values into strings. For example:

s = `Across the board you are ${acrosstheboard(G_B)}`

The part inside ${} is executed as Javascript code and will result in the function call: acrosstheboard(G_B).

This feature requires a modern browser so it's not supported in Internet Explorer, but who cares about that, even Microsoft has EOLed it.

Position of Javascript code

I checked the Internet for advice on whether to put the Javascript code at the top of the file, in the head tag, or further down, in the body tag. I was convinced by the argument that putting the Javascript...