We are working on a course about ovens in our stores. In this activity, we want the user to take the green scrub pad and wash the inside of the oven and to hit all the panels (there are 7 – left, top, back, bottom, interior door, heating element). The desire is to only have 1 green scrub pad (because they’d only use 1 in real life), drag it to the oven to “clean” the interior of the oven, and for our foam to appear. They get the activity right if they hit all 7 areas.
Figure A – the start of the activity with the wet oven, wash bucket, and green scrub pad
Figure B – example of the user dragging the green scrub pad to left panel and foam appearing on the interior left panel
I feel like drag and drop could be an option but I don’t want there to be more than 1 scrub pad, there are 7 drop zones, and I’d prefer the scrub pad not to snap back to the bucket.
Thank you Tim! I hadn’t thought about changing the cursor into the green scrub pad. So I took your course and added all of my elements but I can’t seem to get it to work right. I’m sure I’ve fumbled with the coding somewhere, it is not my forte. Any help would be appreciated!
Your file above misses the “extern” folder, that is required to make it work in IE. The transparent rectangle and all “cleaning areas” need to have the CSS Class “scrubpad”. This is responsible for displaying the image instead of the default cursor while the mouse is over it. If you need more cleaning areas you can either copy one of the existing or give the new one this class.