ソートクイズ - OpenProcessing

mySketch
xxxxxxxxxx
 
let bin, sel, ins, hid;
let bmp = 0;
​
function setup() {
  createCanvas(windowWidth, windowHeight);
  bin = loadImage("ビンソート.png");
  sel = loadImage("選択ソート.png");
  ins = loadImage("挿入ソート.png");
  hid = loadImage("隠す.png");
  
  
  background(255);
}
​
function draw() {
  textSize(50);
  text("広島県の島のソートクイズ", 100, 100);
  
  button = createButton("第１問");
  button.position(900, 40);
  button.style("width", "120px");
  button.style("height", "70px");
  button.mousePressed(BMP);
  
  button = createButton("第２問");
  button.position(1050, 40);
  button.style("width", "120px");
  button.style("height", "70px");
  button.mousePressed(BBMMPP);
  
  button = createButton("第３問");
  button.position(1200, 40);
  button.style("width", "120px");
  button.style("height", "70px");
  button.mousePressed(BBBMMMPPP);
  
  switch(bmp){
    case 1 :
      image(hid, 100, 180, 1300, 700);
      image(bin, 100, 200, 1300, 650);
      
      textSize(50);
      text("広島県の島のソートクイズ", 100, 100);
      
      textSize(30);
      text("Q.正しいのはどれ？", 100, 180);
​
      button = createButton("ビンソート");
      button.position(1450, 200);
      button.style("width", "120px");
      button.style("height", "70px");
      button.mousePressed(firstTrue);
      
      button = createButton("せんたくソート");
      button.position(1600, 200);
      button.style("width", "120px");
      button.style("height", "70px");
      button.mousePressed(firstFalse);
      
      button = createButton("そうにゅうソート");
      button.position(1750, 200);
      button.style("width", "120px");
      button.style("height", "70px");
      button.mousePressed(firstFalse);
      break;
      
    case 2 :
      image(hid, 100, 180, 1300, 700);
      image(sel, 100, 190, 1300, 700);
      
      textSize(50);
      text("広島県の島のソートクイズ", 100, 100);
      
      textSize(30);
      text("Q.正しいのはどれ？", 100, 180);
​
      button = createButton("ビンソート");
      button.position(1450, 200);
      button.style("width", "120px");
      button.style("height", "70px");
      button.mousePressed(secondFalse);
      
      button = createButton("せんたくソート");
      button.position(1600, 200);
      button.style("width", "120px");
      button.style("height", "70px");
      button.mousePressed(secondTrue);
      
      button = createButton("そうにゅうソート");
      button.position(1750, 200);
      button.style("width", "120px");
      button.style("height", "70px");
      button.mousePressed(secondFalse);
      break;
      
    case 3 :
      image(hid, 100, 180, 1300, 700);
      image(ins, 100, 190, 1300, 700);
      
      textSize(50);
      text("広島県の島のソートクイズ", 100, 100);
      
      textSize(30);
      text("Q.正しいのはどれ？", 100, 180);
​
      button = createButton("ビンソート");
      button.position(1450, 200);
      button.style("width", "120px");
      button.style("height", "70px");
      button.mousePressed(thirdFalse);
      
      button = createButton("せんたくソート");
      button.position(1600, 200);
      button.style("width", "120px");
      button.style("height", "70px");
      button.mousePressed(thirdFalse);
      
      button = createButton("そうにゅうソート");
      button.position(1750, 200);
      button.style("width", "120px");
      button.style("height", "70px");
      button.mousePressed(thirdTrue);
      break;  
  }
}
​
function BMP() {
  bmp = 1;
}
​
function BBMMPP() {
  bmp = 2;
}
​
function BBBMMMPPP() {
  bmp = 3;
}
​
function firstTrue() {
  image(hid, 1400, 300, 600, 500);
  
  textSize(30);
  text("正解！これはビンソートです！\n\nもしも並べかえる島が\n100個あったとき、\n対応する場所をさがすのが\nとても大変です。\n\nつまりビンソートには、\nあまりにもたくさんの量の\n並べかえをするのは\nむずかしいという弱点がある！", 1450, 400);
}
​
function firstFalse() {
  image(hid, 1400, 300, 600, 500);
  
  textSize(30);
  text("\n\n残念！これはビンソートでした！\n\nもう一度ちょうせんしてみよう！", 1450, 400);
}
​
function secondTrue() {
  image(hid, 1400, 300, 600, 500);
  
  textSize(30);
  text("正解！\nこれはせんたくソートです！\n\n1番小さい数字を見つけては\n先頭と入れかえるので、\n先頭から確実に並べかえる\nことができます！\n\nしかし1番小さい数字を\n見つけるとき、数字を\nまちがえないことが大切です！", 1450, 400);
}
​
function secondFalse() {
  image(hid, 1400, 300, 600, 500);
  
  textSize(30);
  text("\n\n残念！\nこれはせんたくソートでした！\n\nもう一度ちょうせんしてみよう！", 1450, 400);
}
​
function thirdTrue() {
  image(hid, 1400, 300, 600, 600);
  
  textSize(30);
  text("正解！\nこれはそうにゅうソートです！\n\n背の順で並ぶみんなの列に\nおくれてきた友達を\n入れてあげたいとき、\nその友達の並ぶべき場所に\n入れてあげるのも\nそうにゅうソートです！\n\nみんなが無意識にやっている\nソートで、そうにゅうソートが\n1番多いかなと思います！", 1450, 350);
}
​
function thirdFalse() {
  image(hid, 1400, 300, 600, 600);
  
  textSize(30);
  text("\n\n残念！\nこれはそうにゅうソートでした！\n\nもう一度ちょうせんしてみよう！", 1450, 400);
}