Subversion Repositories jquery

[/] [plugins/] [examples/] [jeopardy/] [jeopardy.html] - Blame information for rev 9

Details | Compare with Previous | View Log

Line No. Rev Author Line
1 5 -
2
  <head>
3 8 -
    <title>Soil Jeopardy</title>
4 5 -
    <meta content="">
5
<!--
6
**************************************************
7 8 -
*           Algebra Jeopardy/Soil Jeopardy
8 5 -
**************************************************
9
 
10
For: 4th Grade student teaching - Test preparation
11
 
12
Questions and Answers by: Lisa Emerald-Kaufman
13
Code by: Dan VerWeire ([email protected])
14
 
15
**************************************************
16
-->
17
18
body {
19
        padding : 0px;
20
        margin : 0px;
21
}
22
 
23
div.header {
24
        padding-top: 1%;
25 8 -
        font-family : comic sans ms;
26 5 -
        text-align : center;
27
        font-size : 25pt;
28
        font-weight : bold;
29
        background-color : #132764;
30
        border-color : 2px black solid;
31
        color : white;
32
        height : 8%;
33
}
34
 
35
 
36
 
37
body table {
38
        width : 100%;
39
        height : 90%;
40
}
41
 
42
body table td {
43
        cursor : pointer;
44
        vertical-align : center;
45
        text-align : center;
46
        font-size : 50pt;
47 8 -
        font-family : comic sans ms;
48 5 -
        border : 3px #031754 outset;
49
        width : 20%;
50
        color : orange;
51
        background-color : #031754;
52
 
53
}
54
 
55
body table td div div {
56
        vertical-align : center;
57
        padding : 10%;
58
}
59
 
60
tr.header td {
61
        height : 45pt;
62
        cursor : default;
63
        color : white;
64
        font-size : 30pt;
65
        border : 3px #000744 outset;
66
        background-color : #000744;
67
}
68
 
69
 
70
71 9 -
        <script src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
72 5 -
        <script>
73
$(function () {
74
        var container = 'body';
75
        var useAnimation = true;
76
 
77
        var inOutTableVirtical =
78
                '<table width="100" border="1" style="width:100px" align="center"> ' +
79
                '       <tr><th>IN</th><th>OUT</th></tr> ' +
80
                '       <tr><td>6</td><td>3</td></tr> ' +
81
                '       <tr><td>8</td><td>5</td></tr> ' +
82
                '       <tr><td>13</td><td>10</td></tr> ' +
83
                '       <tr><td>N</td><td></td></tr> ' +
84
                '</table> ';
85
 
86 8 -
        //Algebra Jeopardy
87 5 -
        var boardContents = {
88
                'Vocabulary' : {
89
                        '100' : {
90
                                question : 'What is a sequence that repeats and tells us what to expect next?',
91
                                answer : 'A pattern'
92
                        },
93
                        '200' : {
94
                                question : 'What is a symbol or letter that stands for a number?',
95
                                answer : 'A variable'
96
                        },
97
                        '300' : {
98
                                question : 'What is a number sentence that uses the equal sign to show that two expressions have the same value?',
99
                                answer : 'An equation'
100
                        },
101
                        '400' : {
102
                                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?',
103
                                answer : 'A number expression'
104
                        },
105
                        '500' : {
106
                                question : 'What is an expression with a variable which contains at least one operation?',
107
                                answer : 'An algebraic expression'
108
                        }
109
                },
110
                'Expressions' : {
111
                        '100' : {
112
                                question : 'Evaluate the expression for W = 2. <br /><br /> W + 4',
113 7 -
                                answer : '2 + 4 = 6'
114 5 -
                        },
115
                        '200' : {
116
                                question : 'Evaluate the expression for W = 5. <br /><br /> 10 - W',
117 7 -
                                answer : '10 - 5 = 5'
118 5 -
                        },
119
                        '300' : {
120
                                question : 'What is the number expression for the phrase "$12 increased by $4" ?',
121
                                answer : '$12 + $4'
122
                        },
123
                        '400' : {
124
                                question : 'What is the number sentence for the phrase "twice the number of 7 cars" ?',
125
                                answer : '2 x 7 = 14 cars'
126
                        },
127
                        '500' : {
128
                                question : 'What is the number sentence for the phrase "15 less than 30 days" ?',
129
                                answer : '30 - 15 = 15 days'
130
                        }
131
                },
132
                'Equations' : {
133
                        '100' : {
134
                                question : '<br /><br />M + 200 = 400<br />',
135
                                answer : '<br /><br />M = 200'
136
                        },
137
                        '200' : {
138
                                question : '<br /><br />26 - R = 20<br />',
139
                                answer : '<br /><br />R = 6'
140
                        },
141
                        '300' : {
142
                                question : '<br /><br />Z - 13 = 7<br />',
143
                                answer : '<br /><br />Z = 20'
144
                        },
145
                        '400' : {
146
                                question : '<br /><br />11 x 8 = P<br />',
147
                                answer : '<br /><br />P = 88'
148
                        },
149
                        '500' : {
150
                                question : '<br /><br />35 <img src="divide.png" style="vertical-align:middle"/> N = 5',
151
                                answer : '<br /><br />N = 7'
152
                        }
153
                },
154
                'What is the Rule?' : {
155
                        '100' : {
156
                                question : 'When a function machine has an input of 10 and a rule of +4, what is the output?',
157
                                answer : '14'
158
                        },
159
                        '200' : {
160
                                question : 'When a function machine has an input of 5 and an output of 15, what is the rule?',
161 7 -
                                answer : 'Add 10 or multiply by three'
162 5 -
                        },
163
                        '300' : {
164
                                question :
165
                                        '<table width="100" border="1" style="width:100px;margin-bottom:-50pt" align="center" >' +
166
                                        '       <tr class="header"><td class="header">IN</td><td class="header">OUT</td></tr> ' +
167
                                        '       <tr><td>6</td><td>3</td></tr> ' +
168
                                        '       <tr><td>8</td><td>5</td></tr> ' +
169
                                        '       <tr><td>13</td><td>10</td></tr> ' +
170
                                        '       <tr><td>N</td><td>&nbsp;</td></tr> ' +
171
                                        '</table>',
172
                                answer : 'N - 3. Rule = subtract three'
173
                        },
174
                        '400' : {
175
                                question :
176
                                        '<table width="100" border="1" style="width:100px;margin-bottom:-50pt" align="center" >' +
177
                                        '       <tr class="header"><td class="header">IN</td><td class="header">OUT</td></tr> ' +
178
                                        '       <tr><td>9</td><td>3</td></tr> ' +
179
                                        '       <tr><td>21</td><td>7</td></tr> ' +
180
                                        '       <tr><td>18</td><td>6</td></tr> ' +
181
                                        '       <tr><td>G</td><td>&nbsp;</td></tr> ' +
182
                                        '</table>',
183
                                answer : 'G <img src="divide.png" style="vertical-align:middle"/> 3. Rule = divide by three'
184
                        },
185
                        '500' : {
186
                                question :
187
                                        '<table border="1" style="height : 100px; width: auto; margin-bottom:-50pt" align="center" >' +
188
                                        '       <tr><td class="header">IN</td><td>5</td><td>1</td><td>10</td><td>L</td></tr> ' +
189
                                        '       <tr><td class="header">OUT</td><td>25</td><td>5</td><td>50</td><td>&nbsp;</td></tr> ' +
190
                                        '</table>',
191
                                answer : 'L x 5. Rule = multiply by five'
192
                        }
193
                },
194
                'Miscellaneous' : {
195
                        '100' : {
196
                                question : '<br /><br />X+X+X+X+, X+X+X+, X+X+, _________ <br />',
197
                                answer : '<br /><br /><u>X+</u>. Rule = minus one X and minus one +'
198
                        },
199
                        '200' : {
200
                                question : '<br /><br />A, C, E, G, I, K, __, __ <br />',
201
                                answer : '<br /><br /><u>M</u>, <u>O</u>. Rule = skip a letter'
202
                        },
203
                        '300' : {
204
                                question : '<br /><br />11:15, 11:25, 11:35, ____, ____ <br />',
205
                                answer : '<br /><br /><u>11:45</u>, <u>11:55</u>. Rule = add ten minutes'
206
                        },
207
                        '400' : {
208
                                question : 'How is a number sentence different from a number expression?',
209
                                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.'
210
                        },
211
                        '500' : {
212
                                question : 'Name two of the three methods you may use to solve an equation or to find a rule.',
213
                                answer : 'Mental math, inverse operations, guess and check'
214
                        }
215
                }
216 8 -
        };
217
 
218
        //Soil Jeopardy
219
        var boardContents = {
220
                'Worms' : {
221
                        '100' : {
222
                                question : 'Worms make tunnels in the soil. How does this help plants grow?',
223
                                answer : 'It makes room for roots to live and spread out.<br>' +
224
                                        'It allows air into the soil.<br>' +
225
                                        'It allows water to reach the roots easier.'
226
                        },
227
                        '200' : {
228
                                question : 'Worms put nutrients back into soil by ____________',
229
                                answer : 'Eating and passing soil and decaying matter.'
230
                        },
231
                        '300' : {
232
                                question : 'Vocabulary: <br> This is a pile or heap of food scraps, leaves, or other garden material layered and covered in soil.',
233
                                answer : 'Compost'
234
                        }
235
                },
236
                'Soil #1' : {
237
                        '100' : {
238
                                question : 'When dry, this soil feels gritty or grainy like salt.',
239
                                answer : 'Sand'
240
                        },
241
                        '200' : {
242
                                question : 'When wet, this soil is sticky and holds its shape.',
243
                                answer : 'Clay'
244
                        },
245
                        '300' : {
246
                                question : 'This soil smells like mulch.',
247
                                answer : 'Humus'
248
                        }
249
                },
250
                'Soil #2' : {
251
                        '100' : {
252
                                question : 'This soil can be colored pink, white, black or tan.',
253
                                answer : 'Sand'
254
                        },
255
                        '200' : {
256
                                question : 'What is found in some clay that makes it an orange-red color?',
257
                                answer : 'Iron'
258
                        },
259
                        '300' : {
260
                                question : 'Name two things you find in humus (not dirt)',
261
                                answer : 'Woodchips, bugs, worms, plant or animal decaying matter'
262
                        }
263
                },
264
                'Vocabulary' : {
265
                        '100' : {
266
                                question : 'Something we think might happen in the future because of what has happened before.',
267
                                answer : 'Prediction'
268
                        },
269
                        '200' : {
270
                                question : 'Material matter that is or once was living.',
271
                                answer : 'Organic'
272
                        },
273
                        '300' : {
274
                                question : 'Matter containing rocks that have broken down into tiny pieces of sand or clay.',
275
                                answer : 'Inorganic'
276
                        }
277
                }
278 5 -
        }
279 8 -
 
280
        var $header = $('<div />').addClass('header').append("Soil Jeopardy");
281 5 -
        var $board = $('<table cellpadding="0" cellspacing="0" />');
282
 
283
        var $rows = [];
284
        $rows[$rows.length] = $('<tr />').addClass('header').appendTo($board);
285
 
286
        $.each(boardContents, function (categoryName) {
287
                var rowIndex = 0;
288
                var category = this;
289
 
290
                var $td = $('<td />')
291
                        .html(categoryName)
292
                        .appendTo($rows[rowIndex]);
293
 
294
                rowIndex++;
295
 
296
                $.each(category, function (amt) {
297
                        var thisCategory = this;
298
 
299
                        if (!$rows[rowIndex]) {
300
                                var $row = $('<tr />').appendTo($board);
301
                                $rows[$rows.length] = $row;
302
                        }
303
                        else {
304
                                var $row = $rows[rowIndex];
305
                        }
306
 
307
 
308
                        var contentMode = 'question';
309
                        var $fullPage = null;
310
                        var $fullPageContent = null;
311
 
312
                        var $td = $('<td />')
313
                                .appendTo($row)
314
                                .click(function () {
315
                                        var value;
316
 
317
                                        switch (contentMode) {
318
                                                case 'amt' :
319
                                                        value = amt;
320
                                                        contentMode = 'question';
321
                                                        $content.html(value);
322
                                                        break;
323
                                                case 'done' :
324
                                                        value = '-';
325
                                                        contentMode = 'amt';
326
                                                        $content.html(value);
327
                                                        $fullPage && $fullPage.remove();
328
 
329
                                                        break;
330
                                                case 'question' :
331
                                                        value = thisCategory.question
332
                                                        contentMode = 'answer';
333
 
334
                                                        if (useAnimation) {
335
                                                                $fullPage = $('<div />').appendTo(document.body)
336
                                                                        .css({
337
                                                                                left : $td.offset().left + ($td.width() / 2),
338
                                                                                top : $td.offset().top + ($td.height() / 2),
339
                                                                                width : '0px',
340
                                                                                height : '0px',
341
 
342
                                                                                color : 'white',
343 8 -
                                                                                fontFamily : 'comic sans ms',
344 5 -
                                                                                fontSize : '35pt',
345
                                                                                backgroundColor : '#031754',
346
                                                                                border : '#031754 10px outset',
347
 
348 9 -
                                                                        //      display : 'table',
349 5 -
                                                                                verticalAlign : 'middle',
350 6 -
                                                                                position : 'absolute',
351
                                                                                textAlign : 'center'
352 5 -
 
353
                                                                        })
354
                                                                        .animate ({
355
                                                                                top : '0px',
356
                                                                                left : '0px',
357
                                                                                width : '90%',
358
                                                                                height : '90%',
359
                                                                                marginRight : '5%',
360
                                                                                marginLeft : '5%',
361
                                                                                marginTop: '2%'
362
                                                                        }, 'slow', function () {
363 9 -
                                                                                $fullPageContent//.css({ display : 'table-cell', verticalAlign : 'middle' })
364 5 -
                                                                                        .html('Question: ' + value + '<br /><br />');
365
                                                                        })
366
                                                                        .click(function () {
367
                                                                                $td.trigger('click');
368
                                                                        })
369
 
370
                                                        }
371
                                                        else {
372
                                                                $fullPage = $('<div />').appendTo($td)
373
                                                                        .css({
374
                                                                                top : '0px',
375
                                                                                left : '0px',
376
                                                                                width : '90%',
377
                                                                                height : '90%',
378
                                                                                marginRight : '5%',
379
                                                                                marginLeft : '5%',
380
                                                                                marginTop: '2%',
381
 
382
                                                                                color : 'white',
383
                                                                                fontSize : '35pt',
384
                                                                                backgroundColor : '#031754',
385
                                                                                border : '#031754 10px outset',
386
 
387
                                                                                verticalAlign : 'middle',
388
                                                                                position : 'absolute'
389
 
390
                                                                        })
391
                                                                        .html('Question: ' + value + '<br /><br />');
392
                                                        }
393
 
394
                                                        $fullPageContent = $('<div />')
395
                                                                .appendTo($fullPage);
396
 
397
                                                        break;
398
                                                case 'answer' :
399
                                                        value = thisCategory.answer;
400
                                                        contentMode = 'done';
401
 
402
                                                        $fullPageContent && $fullPageContent.append('Answer: ' + value + '<br /><br />');
403
 
404
                                                        break;
405
                                        }
406
 
407 8 -
                                        /*$($content).fadeOut(function () {
408
                                                $content = $('<div />')
409
                                                        .html(value)
410
                                                        .css({display : 'none'})
411
                                                        .appendTo($td)
412
                                                        .fadeIn();
413
                                        });*/
414
                                });
415 5 -
 
416
                        var $content = $('<div />')
417
                                .append(amt)
418
                                .appendTo($td);
419 8 -
 
420 5 -
                        rowIndex++;
421
                });
422
        });
423
 
424
 
425
 
426
        $('body').append($header).append($board);
427
});
428
        </script>
429
  </head>
430
  <body></body>
431 9 -
</html>