Spanish Test

A Spanish Test!

by fordcars

HTML

<body id="bodyId"></body>

JavaScript

var bodyNode;
var canNode;
var can;

//Constants
var bodyId = "bodyId";
var canHeight = 400;
var canWidth = 400;
var clickOffsetX = -11;
var clickOffsetY = -10;
var maxTextWidth = canWidth - 10;

var answersStart = 100;
var answersSeperation = 20;
var squaresSize = 10;

var backgroundColor = "white";
var canBorder = "solid red";
var textFont = "20px Arial";
var textColor = "black";

var questions = [];
var questionNumber = 0;

start();

function start()
{
    bodyNode = document.getElementById(bodyId);
    bodyNode.innerHTML = "<canvas id='canId' height='" + canHeight + "' width='" + canWidth + "'>Doh!</canvas>";
    canNode = document.getElementById("canId");
    can = canNode.getContext("2d");
    
    canNode.style.border = canBorder;
    canNode.addEventListener("click",function(){handleClicks(event);},false);
}

function handleClicks(event)
{
    var clickX = event.clientX + clickOffsetX;
    var clickY = event.clientY + clickOffsetY;

    drawQuestion(newQuestion("radio","What is your name?",["Carl","Phil"],[0]));
}

function drawText(string)
{
    wrapText(can,string,10,50,maxTextWidth,25,textColor);
}

function wrapText(context, text, x, y, maxWidth, lineHeight,color) //Thanks to http://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/
{
    var words = text.split(' ');
    var line = '';

    can.fillStyle = color;
    can.font = textFont;
    
    for(var n = 0; n < words.length; n++)
    {
        var testLine = line + words[n] + ' ';
        var metrics = context.measureText(testLine);
        var testWidth = metrics.width;
        if (testWidth > maxWidth && n > 0)
        {
            context.fillText(line, x, y);
            line = words[n] + ' ';
            y += lineHeight;
        }
        else
        {
            line = testLine;
        }
    }
        context.fillText(line, x, y);
}

function drawQuestion(question)
{
    if(question.type=="radio")
    {
        drawText(question.question);
        can.fillStyle =...