Idea

So at the beginning of the semester I wrote to Mimi that I want to do a

https://editor.p5js.org/bettyz-mushroom/sketches/fBCt2oany

The code:

// =====================
// QUIZ DATA
// =====================

let tools = [
  "Robot Vacuum",
  "Mop",
  "Vacuum Cleaner",
  "Washing Machine",
  "Rice Cooker",
  "Tool Kit",
];

let questions = [
  {
    q: "What's your ideal weekend pace?",
    options: [
      "Sleep in all morning",
      "Relax and tidy up a bit",
      "Go out for a walk",
      "Stay home and watch shows",
      "Cook a warm meal",
      "Try some DIY projects",
    ],
  },
  {
    q: "How do you like your favorite sounds?",
    options: [
      "Quiet background hum",
      "Water dripping / mopping",
      "Whirring of machines",
      "Clothes spinning",
      "Rice cooker bubbling",
      "Sizzling of fried food",
    ],
  },
  {
    q: "What annoys you the most?",
    options: [
      "Too noisy",
      "Messy floors",
      "Clutter everywhere",
      "Irregular routines",
      "No home-cooked meals",
      "Broken tools",
    ],
  },
  {
    q: "How should your soulmate show love?",
    options: [
      "Take care of chores automatically",
      "Slowly and gently support me",
      "Handle tasks efficiently",
      "Be reliable and steady",
      "Make me a warm meal",
      "Fix things when problems arise",
    ],
  },
  {
    q: "Which trait do you value most in a partner?",
    options: [
      "Quiet and independent",
      "Gentle and caring",
      "Fast and efficient",
      "Reliable and consistent",
      "Warm and comforting",
      "Handy and resourceful",
    ],
  },
];

let mapping = [
  [
    "Robot Vacuum",
    "Mop",
    "Vacuum Cleaner",
    "Washing Machine",
    "Rice Cooker",
    "Tool Kit",
  ],
  [
    "Robot Vacuum",
    "Mop",
    "Vacuum Cleaner",
    "Washing Machine",
    "Rice Cooker",
    "Tool Kit",
  ],
  [
    "Robot Vacuum",
    "Mop",
    "Vacuum Cleaner",
    "Washing Machine",
    "Rice Cooker",
    "Tool Kit",
  ],
  [
    "Robot Vacuum",
    "Mop",
    "Vacuum Cleaner",
    "Washing Machine",
    "Rice Cooker",
    "Tool Kit",
  ],
  [
    "Robot Vacuum",
    "Mop",
    "Vacuum Cleaner",
    "Washing Machine",
    "Rice Cooker",
    "Tool Kit",
  ],
];

// =====================
// GAME STATE
// =====================

let currentQ = 0;
let scores = {};
let buttons = [];
let state = "start"; // start, quiz, result
//declare bg images
let startImg,
  bgImages = [],
  resultBgs = [];
//?
let resultTool = "";

// declare three musics
let bgmStart, bgmQuiz, bgmResult;

// =====================
// PRELOAD
// =====================

function preload() {
  //preload background images
  startImg = loadImage("soulmate.png");
  for (let i = 0; i < 5; i++) {
    bgImages[i] = loadImage(`soulmateQ${i + 1}.png`);
  }
  for (let i = 0; i < 6; i++) {
    resultBgs[i] = loadImage(`soulmateResult${i + 1}.png`);
  }
  //preload background musics
  bgmStart = loadSound("carelessW.MP3");
  bgmQuiz = loadSound("cutebgm.MP3");
  bgmResult = loadSound("onlyYou.MP3");
}

// =====================
// SETUP
// =====================

function setup() {
  //general setup
  createCanvas(600, 450);
  textSize(18);
  textAlign(LEFT, TOP);
  
  //initialize score
  for (let t of tools) scores[t] = 0;

  bgmStart.loop();
// the start button setup
  let startBtn = createButton("Start Quiz");
  startBtn.style("font-size", "16px");
  startBtn.style("font-family", "Snell Roundhand");
  startBtn.style("background-color", "#FFD2E5");
  startBtn.style("border-radius", "20px");
  startBtn.style("padding", "8px 15px");
  startBtn.style("color", "#D43A77");
  startBtn.style("border", "2px solid #FFAECF");
  startBtn.style("box-shadow", "4px 4px 5px rgba(255,60,138,0.5)");
  startBtn.mouseOver(() => startBtn.style("background-color", "#FFFFFF"));
  startBtn.mouseOut(() => startBtn.style("background-color", "#FFD2E5"));
  startBtn.position(177, 345);

//when mouse pressed, remove start button, enter the next state, stop startbgm
  startBtn.mousePressed(() => {
    state = "quiz";
    startBtn.remove();
    if (bgmStart.isPlaying()) bgmStart.stop();
    bgmQuiz.loop();
    showQuestion();
  });
}

// =====================
// DRAW
// =====================

function draw() {
  background(0);

  if (state === "start") {
    image(startImg, 0, 0, width, height);
  } else if (state === "quiz") {
    if (currentQ < bgImages.length) {//?
      image(bgImages[currentQ], 0, 0, width, height);
      textSize(24);
      textFont("Snell Roundhand");
      fill("#DE3679");
      text(questions[currentQ].q, 50, 50);
    }
  } else if (state === "result") {
    if (resultTool !== "") {
      let toolIndex = tools.indexOf(resultTool);
      if (toolIndex !== -1) image(resultBgs[toolIndex], 0, 0, width, height);
    }
    showResultText();
  }
}

// =====================
// show questions
// =====================

function showQuestion() {
  for (let b of buttons) b.remove();
  buttons = [];

  if (currentQ < questions.length) {
    for (let i = 0; i < questions[currentQ].options.length; i++) {
      let btn = createButton(questions[currentQ].options[i]);
      btn.position(50, 100 + i * 50);
      btn.style("font-size", "16px");
      btn.style("font-family", "Snell Roundhand");
      btn.style("background-color", "#FFFFFF");
      btn.style("border-radius", "20px");
      btn.style("padding", "8px 15px");
      btn.style("color", "#D43A77");
      btn.style("border", "2px solid #FFAECF");
      btn.style("box-shadow", "4px 4px 5px rgba(255,60,138,0.5)");
      btn.mouseOver(() => btn.style("background-color", "#FFAECF"));
      btn.mouseOut(() => btn.style("background-color", "#FFFFFF"));

      btn.mousePressed(() => {
        let tool = mapping[currentQ][i];
        scores[tool]++;
        currentQ++;
        showQuestion();
      });

      buttons.push(btn);
    }
  } else {
    showResult();
  }
}

// =====================
// show result
// =====================

function showResult() {
  state = "result";

  for (let b of buttons) b.remove();
  buttons = [];

  if (bgmQuiz.isPlaying()) bgmQuiz.stop();
  if (!bgmResult.isPlaying()) bgmResult.loop();

  let maxScore = 0;
  resultTool = "";
  for (let t of tools) {
    if (scores[t] > maxScore) {
      maxScore = scores[t];
      resultTool = t;
    }
  }
}

// =====================
// show result text
// =====================

function showResultText() {
  if (resultTool === "") return;

  let messages = {
    "Robot Vacuum":
      "Your soulmate is a Robot Vacuum:\\nsilently taking care of mess and efficiency!",
    Mop:
      "Your soulmate is a Mop:\\ngently cleaning up life's little messes with love!",
    "Vacuum Cleaner":
      "Your soulmate is a Vacuum Cleaner:\\npowerful, unstoppable, and always on a mission to\\ndevour dust.",
    "Washing Machine":
      "Your soulmate is a Washing Machine:\\nreliable, steady, and always spinning for you!",
    "Rice Cooker":
      "Your soulmate is a Rice Cooker:\\nwarm, comforting, and full of home-cooked love!",
    "Tool Kit":
      "Your soulmate is a Tool Kit:\\nhandy, resourceful, and fixing problems together!",
  };

  fill("#DE3679");
  textSize(24);
  text(messages[resultTool], 50, 50);
}

Places I didn’t understand:

let tools = [
  "Robot Vacuum",
  "Mop",
  "Vacuum Cleaner",
  "Washing Machine",
  "Rice Cooker",
  "Tool Kit",
];

let questions = [
  {
    q: "What's your ideal weekend pace?",
    options: [
      "Sleep in all morning",
      "Relax and tidy up a bit",
      "Go out for a walk",
      "Stay home and watch shows",
      "Cook a warm meal",
      "Try some DIY projects",
    ],
  },
  {
    q: "How do you like your favorite sounds?",
    options: [
      "Quiet background hum",
      "Water dripping / mopping",
      "Whirring of machines",
      "Clothes spinning",
      "Rice cooker bubbling",
      "Sizzling of fried food",
    ],
  },
  {
    q: "What annoys you the most?",
    options: [
      "Too noisy",
      "Messy floors",
      "Clutter everywhere",
      "Irregular routines",
      "No home-cooked meals",
      "Broken tools",
    ],
  },
  {
    q: "How should your soulmate show love?",
    options: [
      "Take care of chores automatically",
      "Slowly and gently support me",
      "Handle tasks efficiently",
      "Be reliable and steady",
      "Make me a warm meal",
      "Fix things when problems arise",
    ],
  },
  {
    q: "Which trait do you value most in a partner?",
    options: [
      "Quiet and independent",
      "Gentle and caring",
      "Fast and efficient",
      "Reliable and consistent",
      "Warm and comforting",
      "Handy and resourceful",
    ],
  },
];

let mapping = [
  [
    "Robot Vacuum",
    "Mop",
    "Vacuum Cleaner",
    "Washing Machine",
    "Rice Cooker",
    "Tool Kit",
  ],
  [
    "Robot Vacuum",
    "Mop",
    "Vacuum Cleaner",
    "Washing Machine",
    "Rice Cooker",
    "Tool Kit",
  ],
  [
    "Robot Vacuum",
    "Mop",
    "Vacuum Cleaner",
    "Washing Machine",
    "Rice Cooker",
    "Tool Kit",
  ],
  [
    "Robot Vacuum",
    "Mop",
    "Vacuum Cleaner",
    "Washing Machine",
    "Rice Cooker",
    "Tool Kit",
  ],
  [
    "Robot Vacuum",
    "Mop",
    "Vacuum Cleaner",
    "Washing Machine",
    "Rice Cooker",
    "Tool Kit",
  ],
];

tools: all the possible test results (the tools) I could get

question: the questions and choices

mapping: and array of arrays, my order of choices for each question is the same, so it means no matter which question is, choice 1 = robot vacuum, etc.

let scores = {};

Why an empty object not an empty array?

object is better because here I’m using strings (”mop”) to mapping, not arrays.

"Robot Vacuum" → 5 "Mop" → 2

let resultTool = "";