Trick's List

These are list of tricks that have been done.
1. Changing Circle Color with Timer
2. Drag and Drop Answers

Changing Circle Color with Timer

Try it

In this trick, I periodically change color of 16 circle which is inside a box.
These are the key points to create this:
  1. Make an element with border that will be used as box. Give value which is multipy of 4 for height and width because each row and column will have 4 circles. Number of circles and value for height/width could be changed depends on situation.
  2. Inside box element, create some elements that will be filled with circle element. Make sure no space in your code around this part of code because it will generated some spaces in the browser.
  3. Circle element is made by giving value to border-radius in its css or style. The value given to border-radius is half of circle element's height and width.
  4. Give z-index value to box and circle element css or style. Make sure circle element has greater z-index value than box element.
  5. Use javascript to change circle or box color, by change style.backgroundColor value for each circle.
  6. Value for color is 17 css default color.
  7. Timer effect is created by using javascript's timeout function.
  8. Use javascript worker, to change color in parallel.
This is the video which show the result of that trick.

Drag and Drop Answers

Try it

Drag and drop available answers, after submit you will see that the answers is what you dropped on the box. These are the key points:
  1. Drag and Drop using HTML5 function
  2. Modification of name attribute when answer is dropped
  3. Every box on question could only have 1 answer