/*******************************************************************************
 * A visual interval quiz. Gives the player a starting note and an
 * interval. The player must guess the note that is the given interval
 * above or below the given starting note.
 *
 * Required HTML elements:
 * - viqQuestion: The question.
 * - viqChoices: The multiple choice options.
 * - viqScoreBox: Place for scores.
 ******************************************************************************/


var viq = new VisualIntervalQuiz(4);

function VisualIntervalQuiz(nChoices)
{
  this.nChoices = 4;
  this.answer = null;
  this.nTries = 0;
  this.nCorrect = 0;

  this.MakeQuestion = function () {
    var accidental = RandomChoice(['#', 'b']);
    var noteNum = RandomInt(0, 12);
    var startingNote = NoteNumToName(noteNum, accidental);
    var interval = RandomInt(1, 12);
    var direction = RandomChoice([-1, 1]);
    var directionName = direction == -1 ? 'below ' : 'above';
    var answerNum = (noteNum + interval * direction + 12) % 12;
    this.answer = NoteNumToName(answerNum, accidental);

    choices = [];
    choiceNums = [];
    for (var i = 1; i < nChoices; i++) {
      var choiceNum;
      do {
	choiceNum = (noteNum + RandomInt(1, 12)) % 12;
      } while (choiceNum == answerNum || ArrayIndexOf(choiceNums, choiceNum) != -1);
      choiceNums.push(choiceNum);
      choices.push(NoteNumToName(choiceNum, accidental));
    }
    choices.splice(RandomInt(0, nChoices), 0, this.answer);
      
    document.getElementById('viqQuestion').innerHTML = 'What is a ' + IntervalToLongName(interval) +
    ' <span id="viqDirection">' + directionName + ' </span>' + startingNote + '?';
    var choicesText = '<ul class="viqChoicesList">';
    for (var i = 0; i < choices.length; i++) {
      choicesText += '<li><a href="#" onClick="return viq.Guess(this)">' + choices[i] +
	'</a></li>';
    }
    choicesText += '</ul>';
    document.getElementById('viqChoices').innerHTML = choicesText;
  }

  this.Guess = function(el) {
    if (el.innerHTML == this.answer) {
      document.getElementById('viqLastResult').innerHTML = 'Correct!';
      document.getElementById('viqLastResult').style.color = 'blue';
      this.nCorrect++;
    } else {
      document.getElementById('viqLastResult').innerHTML = 'Incorrect. Correct answer was ' + this.answer + '.';
      document.getElementById('viqLastResult').style.color = 'red';
    }
    this.nTries++;
    percentage = Math.round(this.nCorrect / this.nTries * 100);
    document.getElementById('viqScore').innerHTML = this.nCorrect + ' out of ' + this.nTries + ' (' + percentage + '%)';
    document.getElementById('viqScore').style.display = 'block';
    this.MakeQuestion();
    return false;
  }

  this.GetHtml = function() {
    return '<div id="viq">' +
    '<div id="viqLastResult"></div>' +
    '<div id="viqQuestion"></div>' +
    '<div id="viqChoices"></div>' +
    '<div id="viqScore"></div>' +
    '</div>';
  }

  this.GetCss = function() {
    return '<style type="text/css">' +
    '#viq {' +
    '   border-style:solid;' +
    '   border-width:1px;' +
    '   border-color:black;' +
    '   width:30em;' +
    '   margin:2px;' +
    '}' +
    '#viqScore {' +
    '   border-top-style:solid;' +
    '   border-top-width:1px;' +
    '   border-color:black;' +
    '   background:#dddddd;' +
    '   text-align:center;' +
    '   display:none;' +
    '}' +
    '#viqChoices a {' +
    '   width:3em;' +
    '   background:#FFFFFF;' +
    '   margin-bottom:2px;' +
    '}' +
    '</style>';
  }

  this.EmbedMe = function() {
    document.write(this.GetCss());
    document.write('<p>This quiz tests your understanding of the musical intervals. Choose the correct response to the question below.</p>');
    document.write(this.GetHtml());
    this.MakeQuestion();
    return false;
  }
}