Pasted

var c = document.getElementById('myCanvas');
var elemLeft = c.offsetLeft;
var elemTop = c.offsetTop;
var ctx = c.getContext('2d');
 
var canvasWidth = c.width;
var canvasHeight = c.height;
 
var attributesList = [];
var levelsDict = [];
var numTrials = 0;
var attributesPerPage = 0;
returnedText = readTextFile("./surveyinfo.txt").split("\n");
for (i = 1; i < returnedText.length; i++)
{
    if (i != returnedText.length - 1)
    {
        attributesList.push(returnedText[i].split(":")[0])
        levelsDict.push(returnedText[i].split(":")[1].split(","))
    }
    else
    {
        numTrials = Number(returnedText[i])
    }
}
 
if (attributesList.length > 8)
{
    attributesPerPage = 8
}
else
{
    attributesPerPage = attributesList.length
}
 
console.log(attributesList);
console.log(levelsDict);
 
ctx.font = "30px Times";
 
redraw();
 
function readTextFile(file)
{   
    var allText;
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                allText = rawFile.responseText;
                //alert(allText);
            }
        }
    }
    rawFile.send(null);
    return allText;
}
 
function ellipse(context, cx, cy, rx, ry){
    context.save(); // save state
    context.beginPath();
 
    context.translate(cx-rx, cy-ry);
    context.scale(rx, ry);
    context.arc(1, 1, 1, 0, 2 * Math.PI, false);
 
    context.restore(); // restore to original state
    context.stroke();
}
 
function redraw() {
    ctx.font = "30px Times";
 
    ctx.beginPath();
    ctx.fillStyle = "#D3D3D3";
    ctx.fillRect(0,0,canvasWidth,canvasHeight); 
    
    var aFirst = true;
    var bFirst = false;
    
    var isAFirst = Math.floor(Math.random() * 2);
    if (isAFirst === 1)
    {
        aFirst = true;
        bFirst = false;
    }
    else
    {
        aFirst = false;
        bFirst = true;
    }
    
    ctx.beginPath();
    ctx.fillStyle = "black";
    ctx.fillText("Choice A", 303 + Number(aFirst)*187, 40);
    ctx.fillText("Choice B", 303 + Number(bFirst)*187, 40);
    ctx.fillText("Pick one ->", 60, canvasHeight - 30)
    ctx.moveTo(453,0);
    ctx.lineTo(453,720);
    ctx.stroke();
    ctx.moveTo(266,0);
    ctx.lineTo(266,720);
    ctx.stroke();
    for (i = 0; i < 9; i++)
    {
        ctx.moveTo(0,72*(i+1));
        ctx.lineTo(640,72*(i+1));
        ctx.stroke();
    }
    ellipse(ctx, 360,canvasHeight - 40,10,10)
    ellipse(ctx, 545,canvasHeight - 40,10,10)
}
 
// Add event listener for `click` events.
c.addEventListener('click', function(event) {
    var x = event.pageX - elemLeft;
    var y = event.pageY - elemTop;
        
    console.log(x)
    console.log(y)
    
    redraw();
}, false);