​

This project was inspired by analog self-assessment tools like. 

My students 8th grade students were learning to code using python and the turtle module.

​

Diana Dias, 2019 - diasdiana.com

​

*/

​

let trackers = []; //objects

let widthGray = 150; //width of my gray area

let trackerText; //list of text trackers

//let locked = false;

let myFont;

let myFontB;

let c;

let saveX;

let saveY;

let x;

let colorButton = 150;

let overButton = false;

let begin = false;

let name = "myname";

let grade = "";

let resp;

let nameOk = false;

​

function preload() {

  trackerText = loadStrings('assets/text.txt');

  myFont = loadFont('assets/CaeciliaLTStd-Roman.otf');

  myFontB = loadFont('assets/CaeciliaLTStd-Bold.otf');

}

​

function setup() {

  c = createCanvas(windowWidth, windowHeight);

​

  saveX = width - 50;

  saveY = height - 50;

  x = (width + widthGray) / 2

​

  for (let i = 0; i < trackerText.length; i++) {

    let y = 10 + 2.5 * trackerText.length * i

    trackers[i] = new Tracker(trackerText[i], 15, y, 120, 30);

  }

}

​

function draw() {

 // background(255);

 // questionName();

  //if (nameOk) {

    background(255);

    backgroundDiv();

    rubric()

    saveButton()

    text(name, widthGray + 10, 10); 

    //}

    //text trackers

    noStroke()

    textSize(12);

    textAlign(LEFT);

    textFont(myFont);

    //fill(100)

    for (let i = 0; i < trackers.length; i++) {

      trackers[i].show();

​

    }

  //}

}

​

/*function questionName() {

  noStroke();

  fill(100);

  textSize(15);

  textAlign(LEFT);

  textFont(myFont);

  text("Type your name_class and press ENTER (e.g.: Fulano_6A): ", widthGray + 10, 30)

  fill(0);

  text(name, 585, 30)

  //name = createInput("Type here your name+class and press ENTER (e.g.: Fulano_6A)");

  //name.size(400, 24);

  //name.position(widthGray+10, 10);

  //text("type your name and class as the example 'fulano_6a', press ENTER to continue", width / 2, height / 2, 200);

  // text(name, width / 2, height / 2 + 20, 200);

​

}

​

​

​

function keyTyped() {

  if (!nameOk) {

    name += key;

    //print(name.substring(15));

  }

}

​

​

function keyPressed() {

  if (keyCode == RETURN || keyCode == ENTER) {

​

    //var output = markov.generateSentences(1)[0];

    nameOk = true

    //name = name.substring(15)

    //resp = createP(name);

    //resp.position(300, 100);

  }

  if (keyCode == BACKSPACE) {

    name = name.substring(0, name.length - 1);

  }

}*/

​

function backgroundDiv() {

  //gray area

  noStroke()

  fill(240)

  rect(0, 0, widthGray, height)

​

  //lines

  stroke(240)

  strokeWeight(3)

  line(x, 0, x, height)

  line(0, height / 2, width, height / 2)

}

​

function rubric() {

  //text 

  noStroke()

  textFont(myFontB);

  textSize(width * 0.015);

  textAlign(LEFT);

  fill(3, 161, 252); //blue

  text("“I think I remember how to do this on my own!”", widthGray + 20, 40);

  fill("#32d15d"); //green

  text("“I think I can look up how to do this!”", x + 20, 40);

  fill("#ffe100"); //yellow

  text("“I sort of remember this, but will probably need help!”", widthGray + 20, (height / 2) + 30);

  fill(255, 17, 0); //red

  text("“I have no idea what this means!”", x + 20, (height / 2) + 30);

}

​

function saveButton() {

  //savebutton

  let d = dist(mouseX, mouseY, saveX, saveY)

  if (d < 50) {

    colorButton = 0;

    overButton = true;

  } else {

    colorButton = 150;

    overButton = false;

  }

​

  fill(colorButton);

  ellipse(saveX, saveY, 50, 50)

  fill(255)

  textFont(myFontB);

  textSize(12);

  text("Save!", saveX - 15, saveY + 5)

}

​

function mousePressed() {

  for (let i = 0; i < trackers.length; i++) {

    trackers[i].click(mouseX, mouseY);

  }

  if (overButton) {

    saveCanvas(c, name, 'jpg');

  }

}

​

function mouseDragged() {

  for (let i = 0; i < trackers.length; i++) {

    trackers[i].draggred(mouseX, mouseY);

  }

}

​

function mouseReleased() {

  for (let i = 0; i < trackers.length; i++) {

    trackers[i].release(mouseX, mouseY);

  }

  overButton = false;

}