#!/bin/bash
#
# genquiz.sh < optimqna > optim.html
#

cat <<'EOF'
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Optimism questionnaire</title>
<style type="text/css">
<!--
  .tab { margin-left: 40px; }
  .init { background-color: initial; }
  .flagged { background-color: pink; }
-->
</style>
</head>
<body>
<h1>Optimism questionnaire</h1>
<p>Below are 48 situations.
Choose the answer which most closely reflects your likely response</p>
EOF

for i in {1..48}
do
	read -r trait s
	cat <<EOF
<p id="s$i" class="init">$i. $s</p>
EOF
	read -r l1 a1
	l1=${l1/0}
	l1=${l1/1/$trait}
	read -r l2 a2
	l2=${l2/0}
	l2=${l2/1/$trait}
	cat <<EOF
  <p class="tab"><input type="radio" name="a$i" value="$l1">$a1</p>
  <p class="tab"><input type="radio" name="a$i" value="$l2">$a2</p>
EOF
done

cat <<'EOF'
<div><button type="button" onclick= "calculateScores()">Compute results</button></div>
<div id="interpretation"></div>
<div id="result"></div>
<script>
  function flagQuestions() {
    var anyunanswered = false;
    for (i = 1; i <= 48; i++) {
      var a = document.getElementsByName('a' + i);
      var unanswered = true;
      for (j = 0; j < a.length; j++) {
        if (a[j].checked)
          unanswered = false;
      }
      var s = document.getElementById('s' + i);
      s.className = unanswered ? 'flagged' : 'init';
      anyunanswered ||= unanswered;
    }
    return anyunanswered;
  }

  function badoptim(score) {
    if (score < 2)
      return 'very optimistic';
    else if (score < 4)
      return 'moderately optimistic';
    else if (score < 5)
      return 'average';
    else if (score < 7)
      return 'quite pessimistic';
    else
      return 'very pessimistic';
  }

  function goodoptim(score) {
    if (score > 6)
      return 'very optimistic';
    else if (score > 5)
      return 'moderately optimistic';
    else if (score > 3)
      return 'average';
    else if (score > 2)
      return 'quite pessimistic';
    else
      return 'very pessimistic';
  }

  function unhopeful(score) {
    if (score < 3)
      return 'extraordinarily hopeful';
    else if (score < 7)
      return 'moderately hopeful';
    else if (score < 9)
      return 'average';
    else if (score < 12)
      return 'moderately hopeless';
    else
      return 'severely hopeless';
  }

  function acrosstheboard(score) {
    if (score > 8)
      return 'very optimistic';
    else if (score > 5)
      return 'moderately optimistic';
    else if (score > 2)
      return 'average';
    else if (score > 0)
      return 'quite pessimistic';
    else
      return 'very pessimistic';
  }

  function calculateScores() {
    var incomplete = flagQuestions();
    if (incomplete) {
      document.getElementById('interpretation').innerHTML = '<b>There are unanswered situations which are highlighted above</b>';
      return;
    }
    var PmB = 0, PmG = 0, PvB = 0, PvG = 0, PsB = 0, PsG = 0;
    for (i = 1; i <= 48; i++) {
      var a = document.getElementsByName('a' + i);
      for (j = 0; j < a.length; j++) {
        if (a[j].checked) {
          switch (a[j].value) {
          case 'm':
            PmG++;
            break;
          case 'M':
            PmB++;
            break;
          case 's':
            PsG++;
            break;
          case 'S':
            PsB++;
            break;
          case 'v':
            PvG++;
            break;
          case 'V':
            PvB++;
            break;
          }
        }
      }
    }
    var HoB = PmB + PvB;
    var TotB = PmB + PsB + PvB;
    var TotG = PmG + PsG + PvG;
    var G_B = TotG - TotB;
    document.getElementById('interpretation').innerHTML = `You are ${badoptim(PmB)} about the permanence of bad events<br/>You are ${goodoptim(PmG)} about the continuation of good events<br/>You are ${badoptim(PvB)} about the pervasiveness of bad events<br/>You are ${goodoptim(PvG)} about the pervasiveness of good events<br/>You are ${unhopeful(HoB)}<br/>You are ${badoptim(PsB)} about the personalisation of bad events<br/>You are ${goodoptim(PsG)} about the personalisation of good events<br/>Across the board you are ${acrosstheboard(G_B)}`;
    document.getElementById('result').innerHTML = `Raw results:<br/>PmB ${PmB} PmG ${PmG} PvB ${PvB} PvG ${PvG} HoB ${HoB}<br/>PsB ${PsB} PsG ${PsG}<br/>TotB ${TotB} TotG ${TotG}<br/>G - B ${G_B}`
  }
</script>
</body>
</html>
EOF
