<!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>