<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8" />

    <title>Interactive Quiz</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.min.js"></script>

    <style>

      body { text-align: center; }

    </style>

  </head>

  <body>

    <script>

      let question = "Which color is calming?";

      let correctArea, wrongArea;

      let feedback = "";

 

      function setup() {

        createCanvas(800, 400);

        // Define clickable areas:

        // Left half (calming blue) will be correct.

        correctArea = { x: 0, y: 0, w: width/2, h: height };

        // Right half (energetic red) will be wrong.

        wrongArea = { x: width/2, y: 0, w: width/2, h: height };

      }

 

      function draw() {

        background(220);

       

        // Draw the left area (blue)

        fill(0, 150, 255);

        rect(correctArea.x, correctArea.y, correctArea.w, correctArea.h);

       

        // Draw the right area (red)

        fill(255, 100, 100);

        rect(wrongArea.x, wrongArea.y, wrongArea.w, wrongArea.h);

       

        // Display the question and feedback

        fill(0);

        textSize(24);

        textAlign(CENTER, CENTER);

        text(question, width / 2, 30);

        textSize(20);

        text(feedback, width / 2, height - 30);

      }

 

      function mousePressed() {

        if (mouseX < width/2) {

          feedback = "Correct! Blue is often seen as calming.";

        } else {

          feedback = "Oops! Try again.";

        }

      }

    </script>

  </body>

</html>