let width = 800; // screen size let height = 500; let checkDragSize = 50; let congratsSize = 500; let scene = 60; // current scene let textColor = [0,0,0]; // can be changed if needed let dragCorrect = [[3], [3], [0,4], [0,4], [1,2], [1,2]]; // Final order based on index from above array let dragText = ["GDPR", "GDPR", "Copyright", "Copyright", "COPPA", "COPPA"]; // Intial order printed on side let descriptions = ["Akash has created a website for displaying some of his art and doesn't want anyone to use the pictures.", "Rebeca started a new business to help teach first graders math facts. She wants to have a sign up for the students, but not sure if she can.", "Ando wants to sign up for an Instagram account, but he is only 10 years old. Instagram will not let him sign up.", "Jakob created an Instagram account, but doesn't want to share his data with online advertisers, so he asked them to delete the data.","Amala writes original songs, but she recently got into trouble because another artist thought that her song was too similar to their song."]; let instructions = "Instructions: Drag the law that is most applicable to the given situation. Not all blocks will be used."; let dragPos = [[590, 170], [590, 220], [590, 270], [590, 320], [590, 370], [590, 420]]; // Current x, y position of each drag box. // These variables are used to track items while they are dragged let dragXOffset = 0.0; let dragYOffset = 0.0; let dragChecked = false; let dragComplete = false; let locked = -1; let dragGameEnabled = false; let dragPlace = [-1, -1, -1, -1, -1, -1]; // Location in the grid; -1 means not in grid /** * Preload all images, sounds, and movies. */ function preload() { correctImg = loadImage('https://codehs.com/uploads/fbc024fbaf51b213411220950c47be94'); wrongImg = loadImage('https://codehs.com/uploads/9597d517cb5b1bd8130ad0226176f7b5'); congratsImg = loadImage('https://codehs.com/uploads/c71f1da9bd682e006415da34d2f04f22'); } // Adds a bubble only. Also used for boxes function drawSpeechBubble(x, y, w, h, r, shade) { let c = color(shade[0], shade[1], shade[2]); if (shade.length == 4) {; c.setAlpha(shade[3]); } fill(c); return rect(x, y, w, h, r); } // Add text. Offset assuming it goes in a box function addText(x, y, w, h, message, scale = 1) { textAlign(CENTER, CENTER); let c = color(textColor[0], textColor[1], textColor[2]); fill(c); textSize(18 * scale); return text(message, x + 5, y + 10, w - 10, h - 20); } // Add the click image. Position is a constant and default // is bottom center function addClick(offset = 0) { clickObj = image(clickImg, clickX + offset, clickY); clickOffset = offset; return clickObj; } // Note - text and bubble should have same positions offset is // taken care of in the text function function scene60() { dragGameEnabled = true; let obj = []; obj.push(drawSpeechBubble(15, 15, 520, 470, 10, [153, 168, 50])) // Make grid 5 x 2 obj.push(drawSpeechBubble(25, 25, 500, 90, 0, [0,0,0,0])); obj.push(drawSpeechBubble(25, 115, 500, 90, 0, [0,0,0,0])); obj.push(drawSpeechBubble(25, 205, 500, 90, 0, [0,0,0,0])); obj.push(drawSpeechBubble(25, 295, 500, 90, 0, [0,0,0,0])); obj.push(drawSpeechBubble(25, 385, 500, 90, 0, [0,0,0,0])); obj.push(drawSpeechBubble(25, 25, 250, 450, 0, [0,0,0,0])); // Populate problems on the left for (let i = 0; i < descriptions.length; i++) { obj.push(addText(25, 25 + 90 * i, 250, 90, descriptions[i], 0.8)); } obj.push(addText(550, 10, 240, 180, instructions, 1.2)); for (let i = 0; i < dragPos.length; i ++) { obj.push(drawSpeechBubble(dragPos[i][0], dragPos[i][1], 200, 40, 5, [192, 180, 194,230])); obj.push(addText(dragPos[i][0], dragPos[i][1], 200, 40, dragText[i])); } // check box let countFilled = 0; for (let i = 0; i < dragPlace.length; i++) { if (dragPlace[i] != -1) { countFilled ++; } } if (!dragChecked && countFilled == 5) { obj.push(drawSpeechBubble(660, 430, 110, 35, 5, [5, 163, 50])); obj.push(addText(660, 430, 110, 35, "Check Results", 0.8)); } else if (dragChecked) { // place checks let correctCount = 0; for (let i = 0; i < dragCorrect.length; i++) { if (!dragCorrect[i].includes(dragPlace[i])) { obj.push(image(wrongImg, 450, 40 + dragPlace[i] * 90)); } else { correctCount ++; obj.push(image(correctImg, 450, 40 + dragPlace[i] * 90)); } } if (correctCount == 5) { obj.push(drawSpeechBubble(660, 430, 110, 35, 5, [5, 163, 50])); obj.push(addText(660, 430, 110, 35, "Continue", 0.8)); dragComplete = true; } else if (countFilled == 5) { obj.push(drawSpeechBubble(660, 430, 110, 35, 5, [5, 163, 50])); obj.push(addText(660, 430, 110, 35, "Check Results", 0.8)); } } return obj; } // Screen after hitting continue. This can be disables if needed. function scene61() { let obj = []; let x = 00; let y = 400; let w = width; let h = 3 * 22 + 20; // rows obj.push(addText(x, y, w, h, "Thanks for completing the exercise!", 2)); obj.push(image(congratsImg, 150, 40)); return obj; } function setup() { createCanvas(width, height); strokeWeight(2); correctImg.resize(checkDragSize, checkDragSize); wrongImg.resize(checkDragSize, checkDragSize); congratsImg.resize(congratsSize, 0); } function draw() { background(52, 168, 235); let obj = []; if (scene == 60) { obj = scene60(); } else if (scene == 61) { obj = scene61(); } for (let i = 0; i < obj.length; i++) { obj[i]; } } function overBox(mouseX, mouseY) { // check each box for (let i = 0; i < dragPos.length; i++) { if (mouseX > dragPos[i][0] && mouseX < dragPos[i][0] + 200 && mouseY > dragPos[i][1] && mouseY < dragPos[i][1] + 40) { return i; } } return -1; } function occupied(box) { for (let i = 0; i < dragPlace.length; i++) { if (dragPlace[i] == box) { return true; } } return false; } function mousePressed() { if (dragGameEnabled) { let box = overBox(mouseX, mouseY); if (box != -1) { locked = box; dragXOffset = mouseX - dragPos[locked][0]; dragYOffset = mouseY - dragPos[locked][1]; } else if (mouseX > 660 && mouseX < 770 && mouseY > 430 && mouseY < 465) { if (dragComplete) { scene = 61; dragGameEnabled = false; } else { dragChecked = true; } } } } function mouseDragged() { if (locked != -1) { dragPos[locked][0] = mouseX - dragXOffset; dragPos[locked][1] = mouseY - dragYOffset; dragChecked = false; } } function mouseReleased() { // Check if it is in a box, and if so, snap into that position if (mouseX > 275 && mouseX < 525) { if (mouseY > 25 && mouseY < 115) { if (!occupied(0)){ // box 0 dragPlace[locked] = 0; // snap to grid dragPos[locked][0] = 300; dragPos[locked][1] = 50; } else { dragPos[locked][0] = 550; dragPos[locked][1] = 50; dragPlace[locked] = -1; } } else if (mouseY > 115 && mouseY < 205) { if (!occupied(1)){ // box 1 dragPlace[locked] = 1; // snap to grid dragPos[locked][0] = 300; dragPos[locked][1] = 140; } else { dragPos[locked][0] = 550; dragPos[locked][1] = 140; dragPlace[locked] = -1; } } else if (mouseY > 205 && mouseY < 295) { if (!occupied(2)){ // box 2 dragPlace[locked] = 2; // snap to grid dragPos[locked][0] = 300; dragPos[locked][1] = 230; } else { dragPos[locked][0] = 550; dragPos[locked][1] = 230; dragPlace[locked] = -1; } } else if (mouseY > 295 && mouseY < 385) { if (!occupied(3)){ // box 3 dragPlace[locked] = 3; // snap to grid dragPos[locked][0] = 300; dragPos[locked][1] = 320; } else { dragPos[locked][0] = 550; dragPos[locked][1] = 320; dragPlace[locked] = -1; } } else if (mouseY > 385 && mouseY < 475) { if (!occupied(4)){ // box 4 dragPlace[locked] = 4; // snap to grid dragPos[locked][0] = 300; dragPos[locked][1] = 410; } else { dragPos[locked][0] = 550; dragPos[locked][1] = 410; dragPlace[locked] = -1; } } else { dragPlace[locked] = -1; } } else { dragPlace[locked] = -1; } locked = -1; }