Matching sums to answers

Matching sums to answers

I am creating a simple maths game where a grid is populated with hidden numbers. These numbers are answers. When a hidden number in the grid is highlighted, a sum linked to that answer will appear in a div. The user will then choose a number that fits in the sums answer.

At the moment I am having trouble with pulling out the right sum for the answer. I do not know why but say the sum is "4-3=" the answer will not be "1". I think it is because I have not defined "answer" but am not sure.

<ul style="display:none;" id="answerlist">

 

    <li data-answer="1" data-sum="4 - 3 ="></li>

 

    <li data-answer="2" data-sum="7 - 5 ="></li>

 

    <li data-answer="3" data-sum="1 + 2 ="></li>

 

    <li data-answer="4" data-sum="1 + 3 ="></li>

 

    <li data-answer="5" data-sum="4 + 1 ="></li>

 

    <li data-answer="6" data-sum="10 - 4 ="></li>

 

    <li data-answer="7" data-sum="4 + 3 ="></li>

 

    <li data-answer="8" data-sum="2 x 4 ="></li>

 

    <li data-answer="9" data-sum="4 + 5 ="></li>

 

    <li data-answer="10" data-sum="1 x 10 ="></li>

 

    <li data-answer="11" data-sum="10 + 1 ="></li>

 

    <li data-answer="12" data-sum="2 x 6 ="></li>

 

    <li data-answer="13" data-sum="9 + 4 ="></li>

 

    <li data-answer="14" data-sum="2 x 7 ="></li>

 

    <li data-answer="15" data-sum="11 + 4 ="></li>

 

</ul>


Here is the code that pulls the data from the list at the moment


 var sum= $('#answerlist li[data-answer="'+answer+'"]').data('sum');

$('.sumstyle').text(sum);

I have been advised to use the "eval" function, but reading up on it doesn't sell it to me and I would rather use another approach

Here is a fiddle to get a deeper idea of what I am talking about...

http://jsfiddle.net/smilburn/ZAfVZ/12/