Create an Interactive Area Calculation Activity with HTML and JavaScript

If you’ve been following along with my recent videos, you know we’ve been diving into creating simple, interactive activities with HTML and JavaScript. Today’s project is another great one you can add to your teaching toolkit: an automatic area calculation activity where students can input their answer and get instant feedback. Plus, we add a visual rectangle based on the given dimensions to make it more engaging.

If you missed any of the previous activities, make sure to check them out — there’s a whole collection growing! Don’t forget to subscribe so you don’t miss the upcoming tutorials too. Now, let’s jump into what this activity looks like and how you can build it yourself.

---

The Activity: Area Calculation Made Fun

The concept is simple but effective:

• The page automatically generates random height and width values.
• Students are asked to calculate the area based on those dimensions.
• They type in their answer and hit Check Answer.
• Instant feedback lets them know if they’re correct or incorrect.
• A rectangle is drawn on the page with the same height-to-width ratio, helping students visualize the shape they’re working with.
• Clicking New Question generates a fresh set of dimensions and redraws a new rectangle.

This activity is lightweight, adaptable, and a perfect example of how a little bit of HTML and JavaScript can go a long way in making online learning interactive.

---

Building It: The HTML

The HTML structure is kept super simple:

• A heading for the question.
• A paragraph showing the randomly generated dimensions (height and width).
• An input box for the student’s answer.
• Two buttons — one to check the answer, and one to generate a new question.
• A canvas element where the rectangle is drawn.
• Small sections to display whether the answer is correct or incorrect, hidden by default.

Here’s a quick summary of the key HTML elements:

<style>
.rihide {
  display: none;
}
</style>
<h2>
  What is the area of this rectangle?
</h2>
<div class="clearfix">
  <p id="rishapeinfo"></p>
  <input id="riareaguess" type='text' placeholder="Answer">
  <div id="richeckanswer" class="btn btn-primary">Check answer
  </div>
  <div id="rinewquestion" class="btn btn-primary">New question
  </div>
</div>
<br>
<div id="ricorrect" class="alert alert-success riresponse rihide">
  Correct
</div>
<div id="riincorrect" class="alert alert-danger riresponse rihide">
  Incorrect
</div>
<canvas id="riCanvas" height="250" width="250"></canvas>
Code language: HTML, XML (xml)

A bit of CSS is included to handle the visibility of the feedback messages using a class called .ri-hide that simply sets display: none.

---

The Magic: JavaScript

Now for the JavaScript! Here’s the breakdown:

1. Initialization:
   Set up a 2D drawing context for the canvas. Define default shape width and height values (starting at 100×100).
2. Reset Function:
   • Clears previous feedback messages.
   • Resets the input field.
   • Generates a new random width and height (between 1 and 100).
   • Clears and redraws the rectangle with the new dimensions, scaled appropriately to fit the canvas.
3. Drawing the Rectangle:
   • Start from (10,10) to leave some margin.
   • Multiply the random dimensions by 2 to make it fit nicely within the canvas space (which is 250×250 pixels).
4. Check Answer Function:
   • Fetch the student’s input.
   • Calculate the correct area (width × height).
   • Compare the student’s answer with the correct area.
   • Show the “correct” or “incorrect” message based on the comparison.
5. Event Listeners:
   • The “Check Answer” button triggers the answer validation.
   • The “New Question” button triggers the reset and redraw.

Here’s a simplified snippet of what the reset function looks like:

var shapewidth = 100;
var shapeheight = 100;
var c = document.getElementById("riCanvas");
var ctx = c.getContext("2d");

(function() {
  // your page initialization code here
  fnReset(); //call reset on document ready

  document.getElementById("richeckanswer").addEventListener('click', function(event) {
    fnCheck();
  });

  document.getElementById("rinewquestion").addEventListener('click', function(event) {

    fnReset();
  });

})();

function fnReset() {
  Array.from(document.querySelectorAll('.riresponse')).forEach((el) => el.classList.add('rihide'));

  document.getElementById('riareaguess').value = '';

  // random width number 1 to 100
  shapewidth = Math.floor((Math.random() * 100) + 1);
  // random height number 1 to 100
  shapeheight = Math.floor((Math.random() * 100) + 1);
  ctx.clearRect(0, 0, c.width, c.height);
  ctx.beginPath();
  ctx.rect(10, 10, shapewidth * 2, shapeheight * 2);
  ctx.stroke();
  document.getElementById('rishapeinfo').innerHTML = 'Height=' + shapeheight + ', Width=' + shapewidth;
}

function fnCheck() {
  Array.from(document.querySelectorAll('.riresponse')).forEach((el) => el.classList.add('rihide'));

  var guess = document.getElementById('riareaguess').value;
  if (parseInt(guess, 10) === parseInt(shapewidth * shapeheight, 10)) {
    document.getElementById('ricorrect').classList.remove("rihide");
  } else {
    document.getElementById('riincorrect').classList.remove("rihide");
  }
}
Code language: JavaScript (javascript)

---

Embedding the Activity

To use this activity on your own site or course page, you can simply embed it inside an <iframe>, or copy the HTML, CSS, and JavaScript directly into your webpage.

If you’re using an iframe, make sure to adjust the height to fit everything nicely (around 500px should work). Here’s a basic iframe embed example:

<code><iframe src="your-activity-url.html" width="600" height="500"></iframe></code>
Code language: HTML, XML (xml)

---

Wrapping Up

And that’s it! You now have a fully working interactive area calculation tool for your students — complete with random questions, real-time feedback, and visual aids. It’s simple, effective, and easy to customize further if you want to expand it.

I hope you found this guide helpful!
I’m Chris Richter — make sure to subscribe if you haven’t already, and stay tuned for more interactive content ideas. See you in the next tutorial!

---