let y = 10;

let canvas;

let metrics = ["Presentation: 10%", "Composition: 10%", "Taste: 40%", "Atmosphere: 15%", "Design: 15%", "Service: 10%", "Price to Quality: 0-1%"];

​

//This array holds the text box objects.

let matrixScores = [];

let finalScore = 0;

​

let finalScoreText;

​

let metricExplanations = [

    "How the food is plated.",

    "What the food is composed of and how.",

    "How the food tastes.",

    "The nonphysical aspects of a restaurant.",

    "The restaurant's interior decor, menu layout, etc.",

    "Style, hospitality, and attentiveness of staff.",

    "An optional deduction."

]

​

function setup() {

​

    canvas = createCanvas(200, 50);

    canvas.position(25, 510);

​

    // let intro1 = createP("In each box, enter a score between 0 and 10.");

    // let intro2 = createP("For the price to quality ratio, enter a score between 0 and 1.");

    // intro1.position(x, y + 550)

    // intro2.position(x, y + 580)

​

    // This loop creates seven text boxes and "explainers" for each metric.

    fill(0);

    for (i = 0; i < 7; i++) {

        y += 55;

​

        let textBox = createP(metrics[i]);

        textBox.position(x, y);

​

        matrixScores[i] = createInput("");

        matrixScores[i].position(x - 5, y + 35);

​

        let explainers = createP(metricExplanations[i]);

        explainers.position(x + 155, y);

    }

​

    // This is where the calculate score button is created. If you press it, it runs the function calculateSum(), below.

    var button = createButton("Calculate score");

    button.mousePressed(calculateSum);

    button.position(x - 5, y + 70);

}

​

// This function takes in the value of each textbox and applies the Matrix forumla to it.

function calculateSum() {

    finalScore = 0.1 * parseFloat(matrixScores[0].value(), 10) + 0.1 * parseFloat(matrixScores[1].value(), 10) + 0.4 * parseFloat(matrixScores[2].value(), 10) + 0.15 * parseFloat(matrixScores[3].value(), 10) + 0.15 * parseFloat(matrixScores[4].value(), 10) + 0.1 * parseFloat(matrixScores[5].value(), 10) - parseFloat(matrixScores[6].value(), 10);

​

}

​

function draw() {

    clear();

    fill(0);

​

    // Suprisingly, the canvas only holds the final score text. If is easy to format and edit this way.

​

    textFont("Times New Roman");

    textSize(18);

    fill(255, 129, 84);

    finalScoreText = text("Final Score: " + finalScore, 0, 25);

}