What is the capital of Canada?|Ottawa


How to adapt



To add a question and answer activity, add a division
<div class="wg-qa" id="a-0">
and ask jquery to transform that content into an interactive.
jQuery(".wg-qa#a-0")

The question and answer should be separated by a vertical bar "|"
What is the capital of Canada?|Ottawa

By default, the box in which the magnets appear is 210x120px, and the background colors for the question and answer cards are '#F9F9F9' (off white) and '#999' (gray). These values can be changed by editing the script options.
width: '210px',
height: '90px',
questionCardColor: '#FFF7C2',
answerCardColor: '#FFE180'

Code:
<div class="wg-qa" id="a-0">What is the capital of Canada?|Ottawa</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://widged.com/widgeds/js/jquery.flip.min.js"></script>
<script type="text/javascript" src="http://widged.com/widgeds/js/jquery.card-flip.js"></script>
<script language="JavaScript" type="text/javascript">
//<![CDATA[
<!--
jQuery(".wg-qa#a-0").wgCardFlip(
{
width: '210px',
height: '90px',
questionCardColor: '#FFF7C2',
answerCardColor: '#FFE180'
}
);
//-->
//]]>
</script>