<html> |
<head> |
<title>Algebra Jeopardy</title> |
<meta content=""> |
<!-- |
************************************************** |
* Algebra Jeopardy |
************************************************** |
|
For: 4th Grade student teaching - Test preparation |
|
Questions and Answers by: Lisa Emerald-Kaufman |
Code by: Dan VerWeire ([email protected]) |
|
************************************************** |
--> |
<style> |
body { |
padding : 0px; |
margin : 0px; |
} |
|
div.header { |
padding-top: 1%; |
font-family : arial; |
text-align : center; |
font-size : 25pt; |
font-weight : bold; |
background-color : #132764; |
border-color : 2px black solid; |
color : white; |
height : 8%; |
} |
|
|
|
body table { |
width : 100%; |
height : 90%; |
} |
|
body table td { |
cursor : pointer; |
vertical-align : center; |
text-align : center; |
font-size : 50pt; |
font-family : arial; |
border : 3px #031754 outset; |
width : 20%; |
color : orange; |
background-color : #031754; |
|
} |
|
body table td div div { |
vertical-align : center; |
padding : 10%; |
} |
|
tr.header td { |
height : 45pt; |
cursor : default; |
color : white; |
font-size : 30pt; |
border : 3px #000744 outset; |
background-color : #000744; |
} |
|
|
</style> |
<script src="jquery-1.3.2.min.js"></script> |
<script> |
$(function () { |
var container = 'body'; |
var useAnimation = true; |
|
var inOutTableVirtical = |
'<table width="100" border="1" style="width:100px" align="center"> ' + |
' <tr><th>IN</th><th>OUT</th></tr> ' + |
' <tr><td>6</td><td>3</td></tr> ' + |
' <tr><td>8</td><td>5</td></tr> ' + |
' <tr><td>13</td><td>10</td></tr> ' + |
' <tr><td>N</td><td></td></tr> ' + |
'</table> '; |
|
var boardContents = { |
'Vocabulary' : { |
'100' : { |
question : 'What is a sequence that repeats and tells us what to expect next?', |
answer : 'A pattern' |
}, |
'200' : { |
question : 'What is a symbol or letter that stands for a number?', |
answer : 'A variable' |
}, |
'300' : { |
question : 'What is a number sentence that uses the equal sign to show that two expressions have the same value?', |
answer : 'An equation' |
}, |
'400' : { |
question : 'What is the term to describe one way of representing what we know in a word problem which contains numbers and at least one operation?', |
answer : 'A number expression' |
}, |
'500' : { |
question : 'What is an expression with a variable which contains at least one operation?', |
answer : 'An algebraic expression' |
} |
}, |
'Expressions' : { |
'100' : { |
question : 'Evaluate the expression for W = 2. <br /><br /> W + 4', |
answer : '6' |
}, |
'200' : { |
question : 'Evaluate the expression for W = 5. <br /><br /> 10 - W', |
answer : '5' |
}, |
'300' : { |
question : 'What is the number expression for the phrase "$12 increased by $4" ?', |
answer : '$12 + $4' |
}, |
'400' : { |
question : 'What is the number sentence for the phrase "twice the number of 7 cars" ?', |
answer : '2 x 7 = 14 cars' |
}, |
'500' : { |
question : 'What is the number sentence for the phrase "15 less than 30 days" ?', |
answer : '30 - 15 = 15 days' |
} |
}, |
'Equations' : { |
'100' : { |
question : '<br /><br />M + 200 = 400<br />', |
answer : '<br /><br />M = 200' |
}, |
'200' : { |
question : '<br /><br />26 - R = 20<br />', |
answer : '<br /><br />R = 6' |
}, |
'300' : { |
question : '<br /><br />Z - 13 = 7<br />', |
answer : '<br /><br />Z = 20' |
}, |
'400' : { |
question : '<br /><br />11 x 8 = P<br />', |
answer : '<br /><br />P = 88' |
}, |
'500' : { |
question : '<br /><br />35 <img src="divide.png" style="vertical-align:middle"/> N = 5', |
answer : '<br /><br />N = 7' |
} |
}, |
'What is the Rule?' : { |
'100' : { |
question : 'When a function machine has an input of 10 and a rule of +4, what is the output?', |
answer : '14' |
}, |
'200' : { |
question : 'When a function machine has an input of 5 and an output of 15, what is the rule?', |
answer : 'Add 10' |
}, |
'300' : { |
question : |
'<table width="100" border="1" style="width:100px;margin-bottom:-50pt" align="center" >' + |
' <tr class="header"><td class="header">IN</td><td class="header">OUT</td></tr> ' + |
' <tr><td>6</td><td>3</td></tr> ' + |
' <tr><td>8</td><td>5</td></tr> ' + |
' <tr><td>13</td><td>10</td></tr> ' + |
' <tr><td>N</td><td> </td></tr> ' + |
'</table>', |
answer : 'N - 3. Rule = subtract three' |
}, |
'400' : { |
question : |
'<table width="100" border="1" style="width:100px;margin-bottom:-50pt" align="center" >' + |
' <tr class="header"><td class="header">IN</td><td class="header">OUT</td></tr> ' + |
' <tr><td>9</td><td>3</td></tr> ' + |
' <tr><td>21</td><td>7</td></tr> ' + |
' <tr><td>18</td><td>6</td></tr> ' + |
' <tr><td>G</td><td> </td></tr> ' + |
'</table>', |
answer : 'G <img src="divide.png" style="vertical-align:middle"/> 3. Rule = divide by three' |
}, |
'500' : { |
question : |
'<table border="1" style="height : 100px; width: auto; margin-bottom:-50pt" align="center" >' + |
' <tr><td class="header">IN</td><td>5</td><td>1</td><td>10</td><td>L</td></tr> ' + |
' <tr><td class="header">OUT</td><td>25</td><td>5</td><td>50</td><td> </td></tr> ' + |
'</table>', |
answer : 'L x 5. Rule = multiply by five' |
} |
}, |
'Miscellaneous' : { |
'100' : { |
question : '<br /><br />X+X+X+X+, X+X+X+, X+X+, _________ <br />', |
answer : '<br /><br /><u>X+</u>. Rule = minus one X and minus one +' |
}, |
'200' : { |
question : '<br /><br />A, C, E, G, I, K, __, __ <br />', |
answer : '<br /><br /><u>M</u>, <u>O</u>. Rule = skip a letter' |
}, |
'300' : { |
question : '<br /><br />11:15, 11:25, 11:35, ____, ____ <br />', |
answer : '<br /><br /><u>11:45</u>, <u>11:55</u>. Rule = add ten minutes' |
}, |
'400' : { |
question : 'How is a number sentence different from a number expression?', |
answer : 'A number sentence has an equal sign and an answer. An example of a number sentence is 2 + 2 = 4. An example of a number expression is 2 + 2.' |
}, |
'500' : { |
question : 'Name two of the three methods you may use to solve an equation or to find a rule.', |
answer : 'Mental math, inverse operations, guess and check' |
} |
} |
} |
|
|
var $header = $('<div />').addClass('header').append("Algebra Jeopardy"); |
var $board = $('<table cellpadding="0" cellspacing="0" />'); |
|
var $rows = []; |
$rows[$rows.length] = $('<tr />').addClass('header').appendTo($board); |
|
$.each(boardContents, function (categoryName) { |
var rowIndex = 0; |
var category = this; |
|
var $td = $('<td />') |
.html(categoryName) |
.appendTo($rows[rowIndex]); |
|
rowIndex++; |
|
$.each(category, function (amt) { |
var thisCategory = this; |
|
if (!$rows[rowIndex]) { |
var $row = $('<tr />').appendTo($board); |
$rows[$rows.length] = $row; |
} |
else { |
var $row = $rows[rowIndex]; |
} |
|
|
var contentMode = 'question'; |
var $fullPage = null; |
var $fullPageContent = null; |
|
var $td = $('<td />') |
.appendTo($row) |
.click(function () { |
var value; |
|
switch (contentMode) { |
case 'amt' : |
value = amt; |
contentMode = 'question'; |
$content.html(value); |
break; |
case 'done' : |
value = '-'; |
contentMode = 'amt'; |
$content.html(value); |
$fullPage && $fullPage.remove(); |
|
break; |
case 'question' : |
value = thisCategory.question |
contentMode = 'answer'; |
|
|
if (useAnimation) { |
$fullPage = $('<div />').appendTo(document.body) |
.css({ |
left : $td.offset().left + ($td.width() / 2), |
top : $td.offset().top + ($td.height() / 2), |
width : '0px', |
height : '0px', |
|
color : 'white', |
fontSize : '35pt', |
backgroundColor : '#031754', |
border : '#031754 10px outset', |
|
//display : 'table-cell', |
verticalAlign : 'middle', |
position : 'absolute' |
|
}) |
.animate ({ |
top : '0px', |
left : '0px', |
width : '90%', |
height : '90%', |
marginRight : '5%', |
marginLeft : '5%', |
marginTop: '2%' |
}, 'slow', function () { |
$fullPageContent |
.html('Question: ' + value + '<br /><br />'); |
}) |
.click(function () { |
$td.trigger('click'); |
}) |
|
} |
else { |
$fullPage = $('<div />').appendTo($td) |
.css({ |
top : '0px', |
left : '0px', |
width : '90%', |
height : '90%', |
marginRight : '5%', |
marginLeft : '5%', |
marginTop: '2%', |
|
color : 'white', |
fontSize : '35pt', |
backgroundColor : '#031754', |
border : '#031754 10px outset', |
|
verticalAlign : 'middle', |
position : 'absolute' |
|
}) |
.html('Question: ' + value + '<br /><br />'); |
} |
|
$fullPageContent = $('<div />') |
.appendTo($fullPage); |
|
break; |
case 'answer' : |
value = thisCategory.answer; |
contentMode = 'done'; |
|
$fullPageContent && $fullPageContent.append('Answer: ' + value + '<br /><br />'); |
|
break; |
} |
|
|
/*$($content).fadeOut(function () { |
$content = $('<div />') |
.html(value) |
.css({display : 'none'}) |
.appendTo($td) |
.fadeIn(); |
});*/ |
|
|
}) |
|
|
var $content = $('<div />') |
.append(amt) |
.appendTo($td); |
|
rowIndex++; |
}); |
}); |
|
|
|
$('body').append($header).append($board); |
}); |
</script> |
</head> |
<body></body> |
</html> |