Subversion Repositories jquery

[/] [plugins/] [examples/] [jeopardy/] [jeopardy.html] - Rev 9

Compare with Previous | Blame | View Log

<html>
  <head>
    <title>Soil Jeopardy</title>
    <meta content="">
<!--
**************************************************
*           Algebra Jeopardy/Soil 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 : comic sans ms;
        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 : comic sans ms;
        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="http://code.jquery.com/jquery-1.4.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> ';

        //Algebra Jeopardy
        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 : '2 + 4 = 6'
                        },
                        '200' : {
                                question : 'Evaluate the expression for W = 5. <br /><br /> 10 - W',
                                answer : '10 - 5 = 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 or multiply by three'
                        },
                        '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>&nbsp;</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>&nbsp;</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>&nbsp;</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'
                        }
                }
        };
       
        //Soil Jeopardy
        var boardContents = {
                'Worms' : {
                        '100' : {
                                question : 'Worms make tunnels in the soil. How does this help plants grow?',
                                answer : 'It makes room for roots to live and spread out.<br>' +
                                        'It allows air into the soil.<br>' +
                                        'It allows water to reach the roots easier.'
                        },
                        '200' : {
                                question : 'Worms put nutrients back into soil by ____________',
                                answer : 'Eating and passing soil and decaying matter.'
                        },
                        '300' : {
                                question : 'Vocabulary: <br> This is a pile or heap of food scraps, leaves, or other garden material layered and covered in soil.',
                                answer : 'Compost'
                        }
                },
                'Soil #1' : {
                        '100' : {
                                question : 'When dry, this soil feels gritty or grainy like salt.',
                                answer : 'Sand'
                        },
                        '200' : {
                                question : 'When wet, this soil is sticky and holds its shape.',
                                answer : 'Clay'
                        },
                        '300' : {
                                question : 'This soil smells like mulch.',
                                answer : 'Humus'
                        }
                },
                'Soil #2' : {
                        '100' : {
                                question : 'This soil can be colored pink, white, black or tan.',
                                answer : 'Sand'
                        },
                        '200' : {
                                question : 'What is found in some clay that makes it an orange-red color?',
                                answer : 'Iron'
                        },
                        '300' : {
                                question : 'Name two things you find in humus (not dirt)',
                                answer : 'Woodchips, bugs, worms, plant or animal decaying matter'
                        }
                },
                'Vocabulary' : {
                        '100' : {
                                question : 'Something we think might happen in the future because of what has happened before.',
                                answer : 'Prediction'
                        },
                        '200' : {
                                question : 'Material matter that is or once was living.',
                                answer : 'Organic'
                        },
                        '300' : {
                                question : 'Matter containing rocks that have broken down into tiny pieces of sand or clay.',
                                answer : 'Inorganic'
                        }
                }
        }

        var $header = $('<div />').addClass('header').append("Soil 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',
                                                                                fontFamily : 'comic sans ms',
                                                                                fontSize : '35pt',
                                                                                backgroundColor : '#031754',
                                                                                border : '#031754 10px outset',
                                                                               
                                                                        //      display : 'table',
                                                                                verticalAlign : 'middle',
                                                                                position : 'absolute',
                                                                                textAlign : 'center'
                                                                               
                                                                        })
                                                                        .animate ({
                                                                                top : '0px',
                                                                                left : '0px',
                                                                                width : '90%',
                                                                                height : '90%',
                                                                                marginRight : '5%',
                                                                                marginLeft : '5%',
                                                                                marginTop: '2%'
                                                                        }, 'slow', function () {
                                                                                $fullPageContent//.css({ display : 'table-cell', verticalAlign : 'middle' })
                                                                                        .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>
 

Compare with Previous | Blame | View Log