- April 3, 2014
- Posted by: thestateofart
- Category: Design
In this test called “Who Killed Kenny?”, participants are supposed to create a function in javascript and CSS where users can select a character from the lineup and it moves to another row. Reset button should move the cards back to their original place (Instructions). The tester said my solution “didn’t work” and gave no more clarification. They were wrong as you can see here: Who Killed Kenny.
Here’s the CSS to highlight one and shade the others:
[prettify class=”css”]
#container:hover span {opacity:0.4; filter:alpha(opacity=40);}
#container span:hover {opacity:1;filter:alpha(opacity=100); cursor:pointer;}
[/prettify]
And here’s the javascript (jQuery):
[prettify class=”js”]
jQuery(“window”).ready(function(){
/*move cards to bottom row on click*/
jQuery(“.card”).click(function(){
jQuery(“#holder”).append(this);
});
/*save original content*/
var orig = jQuery(“#container”).html();
jQuery(“#reset”).click(function(){
jQuery(“.card”).remove();
jQuery(“#container”).append(orig);
/*return click function*/
jQuery(“.card”).click(function() {
jQuery(“#holder”).append(this);
});
});
});
[/prettify]
Any feedback would be appreciated!