Demo: Custom element with a clickable image

This question has an example of an element that uses hidden input tags to send information to the server. Hidden inputs are useful for custom JavaScript elements that have custom data to be graded. Keep in mind that users can manipulate tags using browser devtools, so make sure that all grading is handled server-side when designing questions with hidden inputs. For example, do not grade the question client-side and return the number of earned points in a hidden input.

The clickable-image element on this page requires the user to click the image a certain number of times to receive full credit.

Click on the image this many times: 1

You have clicked the image 0 times.

Correct answer
Student view placeholder
In student views this area is used for assessment and score info.
Staff information
Staff user:
Dev User
dev@example.com
Question:
QID:
Title:
Demo: Custom element with a clickable image
Started at:
2024-09-19 17:51:04 (CDT)
Duration:
0 s
Show/Hide answer 
{
  "my-super-cool-clickable-image": 1
}
This box is not visible to students.