How to Create a Custom Multiple Choice Activity with HTML, JavaScript, and CSS

Hey everyone! Chris Richter here — welcome back! Today, we’re diving into something super practical and fun: building your own multiple-choice activity using just HTML, JavaScript, and CSS. If you’re starting to develop interactive content for online courses, this is a great project to get your feet wet.

I’ll walk you through:

The HTML structure
The JavaScript logic
The CSS styling
How to embed the whole thing into your online course platform (assuming your platform supports custom HTML embeds)

Let’s jump straight into it!

Why Build Custom Interactive Content?

Creating your own activities gives you full control over the learning experience. No plugins, no third-party frameworks — just lightweight, flexible, fully-customizable exercises that make your course more engaging.

If you want to check out my full courses on Moodle LMS and other tools, click here — and don’t forget to like and subscribe to keep up with our interactive content series!

Setting Up: Using JSFiddle.net

For quick development and testing, I’m using JSFiddle.net. It’s a free online editor where you can instantly see your HTML, CSS, and JavaScript come to life. I’ll drop a link below so you can grab the exact fiddle if you want to follow along.

Building the Activity: HTML, CSS, and JavaScript

HTML

Here’s the basic structure:

A <div> container for spacing
A heading (<h2>) for the question
A simple <form> with checkbox inputs for each possible answer
A “Check Answer” button
Hidden divs to display Correct or Incorrect messages based on user input

Each checkbox has a unique ID like riItem1, riItem2, etc., to make it easy to reference in JavaScript later.

<code><div style="margin: 20px;">
  <h2>Choose three of the best-selling albums in Australia:</h2>
  <form>
    <input type="checkbox" id="riItem1"> Bat Out of Hell<br>
    <input type="checkbox" id="riItem2"> Whispering Jack<br>
    <input type="checkbox" id="riItem3"> Empire Between (my band's album!)<br>
    <input type="checkbox" id="riItem4"> Back in Black<br>
    <button type="button" id="riCheckAnswer">Check Answer</button>
  </form>
  <div id="riCorrect" class="ri-hide ri-alert-success">Correct!</div>
  <div id="riIncorrect" class="ri-hide ri-alert-danger">Incorrect. Try again!</div>
</div></code>
Code language: HTML, XML (xml)

CSS

Very simple styling here:

<code>.ri-hide {
  display: none;
}
.ri-alert-success {
  color: green;
  font-weight: bold;
}
.ri-alert-danger {
  color: red;
  font-weight: bold;
}</code>
Code language: HTML, XML (xml)

The .ri-hide class keeps the feedback hidden until needed.

JavaScript

This is where the magic happens:

<code>document.addEventListener("DOMContentLoaded", function() {
  document.getElementById("riCheckAnswer").addEventListener("click", fnCheckAnswer);

  function fnCheckAnswer() {
    hideFeedback();

    const item1 = document.getElementById("riItem1").checked;
    const item2 = document.getElementById("riItem2").checked;
    const item3 = document.getElementById("riItem3").checked;
    const item4 = document.getElementById("riItem4").checked;

    if (item1 && item2 && !item3 && item4) {
      showFeedback('riCorrect');
    } else {
      showFeedback('riIncorrect');
    }
  }

  function hideFeedback() {
    document.getElementById("riCorrect").classList.add("ri-hide");
    document.getElementById("riIncorrect").classList.add("ri-hide");
  }

  function showFeedback(id) {
    document.getElementById(id).classList.remove("ri-hide");
  }
});</code>
Code language: JavaScript (javascript)

What’s happening here?

When the page loads, it waits for the user to click the “Check Answer” button.
It checks which checkboxes are selected.
If the correct three albums are chosen (Bat Out of Hell, Whispering Jack, Back in Black) and the incorrect one is NOT selected (Empire Between), it shows “Correct!” — otherwise, “Incorrect. Try again!”

(And yes, Empire Between is my band’s album — check it out at empirebetween.com or our YouTube channel!)

Embedding Your Activity in an Online Course

Once you’re happy with your activity, embedding it into your LMS or online course is super easy:

In JSFiddle, click “Embed”.
Deselect all options except “Result.”
Copy the provided iframe code.
In your course, insert the iframe into a page just like you would embed a YouTube video.
Adjust the height (I recommend about 350px) so it fits nicely without scroll bars.

Now your students can interact with your custom multiple-choice activity right inside your course!

What’s Next?

This is just the beginning! In upcoming posts and videos, I’ll show you how to create even more interactive activities, like:

Selecting images
Typing in answers and validating them
Randomized calculation questions
And more!

Be sure to subscribe and stay tuned — you won’t want to miss these powerful tools to make your courses stand out!

Thanks for hanging out today — see you in the next one!

✌️
Chris

How to create a MULTIPLE CHOICE ACTIVITY using HTML and JavaScript