Emoticon Animation
It is never easy to pursuade a user not only to stay in the website but also finish a certain task, even if it only takes a few minutes. Online Survey is indeed a challenge and visual element is always a powerful method if you use it right.
I applied vividly animated emoticons to the questions, which is designed to draw user's emotional response and attention to the question. These wild, small, familiar faces can easily set the mood to participate.
CSS Animation to attract user's attention and engage them. But in any case, visual elements should never hurt the accessibility or loading time. For that reason, I only used css elements, meaning that I drew every design element with CSS without using any raster or even vector image. For the most part I barely used any JavaScript either. This CSS-only-animated graphics are clear, fast and easy to modify.
And I arranged the CSS to shift the state of the emoticon with a single classname. So, If you change the emoticon's emotion from angry to smile, all you have to do is change a single class name in the HTML.
I also crafted some 3D emoticons on Blender and applied them to the top area of the page as a background image aiming the deeper user engagement.
To achieve the better responsive design, I changed some bar design for evaluate the satisfaction from a horizontal bar to a vertical bar.