How to create an IMAGE selection QUIZ using HTML and JavaScript

How to create an IMAGE selection QUIZ using HTML and JavaScript

Before we dive into today’s tutorial, make sure you subscribe to keep up with all the upcoming interactive activities we’re building using HTML and JavaScript.

Today, we’re going to create a fun little quiz activity where students click on an image to answer a question. Based on their selection, the quiz will instantly give feedback — all built with HTML, CSS, and JavaScript. Let’s get into it!

A Quick Example

Imagine you are learning about pop singers.
The activity might ask:

“Who sang the song Firework?”

Students click on an image to answer:

  • If they click Bruno Mars, it will show “Incorrect!” at the bottom.
  • If they click Katy Perry, they’ll see “Correct! Well done!”

At the bottom, there’s a “Next Question” button.
Clicking it moves you through the quiz:

  • Next Question: “Who is Peter Gene Hernandez?” (Answer: Bruno Mars)
  • Next Question: “Who was both the lead singer and drummer in the same band?” (Answer: Phil Collins from Genesis)

Finally, when the quiz is done, a Restart button appears so learners can go back and try again.

Building It: Step-by-Step

We used JSFiddle to build this activity. It’s a great tool where you can see the HTML, CSS, JavaScript, and the live result all at once!

Here’s how we built it:

1. HTML Structure

  • A heading (<h2>) for the quiz title
  • A div for the question box
  • A simple table to organize images (although tables aren’t ideal for layout, it kept things simple for now)
  • Each image has its own ID (e.g., img1, img2, img3)
  • A hidden div for feedback responses
  • A hidden Next Question button
  • A hidden Restart button

The images used are public domain pictures from Wikimedia Commons.

2. CSS Styling

We kept the styling:

  • .ri-hide class: hides elements (display: none)
  • .ri-correct class: makes feedback green when correct
  • .ri-incorrect class: makes feedback red when incorrect
  • Some simple sizing for images so they fit nicely

3. JavaScript Logic

The magic happens here!

  • We created a questions array where each item includes:
    • The question text
    • The correct answer ID
    • Feedback text
  • Event Listeners are added to each image so that when students click, it triggers a function to check if they chose correctly.
  • When an image is clicked:
    • If correct → Show a green “Correct!” message with the answer
    • If incorrect → Show a red “Incorrect!” message and prompt to try again
    • The Next Question button becomes visible only after answering
  • Clicking Next Question:
    • Advances to the next question
    • Resets the feedback area
  • After the final question:
    • Shows the Restart button to replay the quiz
  • Clicking Restart:
    • Resets everything back to the first question

How to Embed It

Once you’re happy with your quiz in JSFiddle:

  1. Go to the Embed option.
  2. Hide the HTML/CSS/JavaScript panels (only show the Result).
  3. Copy the iframe code.
  4. Paste the iframe into your Learning Management System (LMS) or website!

Tip: Turn off auto-resizing to make sure it looks good inside your LMS.

Final Thoughts

That’s it!
A simple but powerful way to create interactive quizzes using pure HTML, CSS, and JavaScript — without needing any fancy libraries.

With a few tweaks, you can:

  • Add more questions
  • Customize the look and feel
  • Use your own images

Play around with it, and you’ll soon be building your own custom activities for students or learners!

Thanks for reading — and don’t forget to subscribe for more tutorials!
Happy coding!

Code is available here: https://jsfiddle.net/ricoshae/dt7w531u/42/