Cycle Theme Show

by darkk6

HTML

<script src="https://raw.github.com/malsup/cycle/master/jquery.cycle.all.js"></script>
<link rel="stylesheet" href="http://stu96.nknu.edu.tw/~d9671022/A/start/jquery-ui-1.8.14.custom.css">
<div style="float:left;width:80%">
    <center>
        <div align="left" class="questionContent shadowRadius" id="test">
            <pre>
        有兩個太太在聊天，一個是甲，另一個是乙

        甲：「你的三個女兒今年幾歲阿？」
        乙：「他們的年齡相乘為36」
        甲：「資訊不足」
        乙：「他們年齡的和是我們大學同住時的房間號碼」
        甲：「還是不夠」
        乙：「我最大的一個女兒眼睛是藍色的」
        </pre>
            <pre>
        甲：「嗯，我知道了」

        請問：
        1.他們大學時的房間號碼是幾號？
        2.乙三個女兒的年齡分別是多少？
        </pre>
        </div>
        <br>
        <div id="timeLimit"></div>
        <hr>
        <table border=0 width=50% height=100>
            <tr>
                <td id="ans1"><div id="ans1" class="shadowRadius answer">1. 女兒和我一樣大才 Fashion</div></td>
                <td id="ans2"><div id="ans2" class="shadowRadius answer">2. 一定 iPad 溫開水</div></td>
            </tr>
            <tr>
                <td id="ans3"><div id="ans3" class="shadowRadius answer">3. 整個場面我 Hold 住</div></td>
                <td id="ans4"><div id="ans4" class="shadowRadius answer">4. 一個 Move 拿出女兒的出生證明</div></td>
            </tr>
        </table>
        
    </center>
</div>
<div style="float:right;width:20%">
    <!-- 分數表 -->
    <div class="score scoreNext" id="lv15">1000000</div>
    <div class="score scoreNext" id="lv14">500000</div>
    <div class="score scoreNext" id="lv13">250000</div>
    <div class="score scoreNext" id="lv12">150000</div>
    <div class="score scoreNext" id="lv11">80000</div>
    <div class="score scoreNext" id="lv10">60000</div>
    <div class="score scoreNext" id="lv9">40000</div>
    <div class="score scoreNext" id="lv8">30000</div>
    <div class="score scoreNext" id="lv7">20000</div>
    <div class="score scoreNext" id="lv6">10000</div>
    <div class="score scoreNext" id="lv5">8000</div>
    <div class="score scoreNext" id="lv4">4000</div>
    <div...

CSS

div.questionContent{
    background-color:#9FE0FE;
    width:50%;
    height:200px;
}

div.shadowRadius{
    -webkit-box-shadow: 3px 3px 4px #0F0F0F;
    -webkit-border-radius: 5px;
    
    -khtml-box-shadow: 3px 3px 4px #0F0F0F;
    -khtml-border-radius: 5px;
    
    -moz-box-shadow: 3px 3px 4px #0F0F0F;
    -moz-border-radius: 5px;
    
    box-shadow: 3px 3px 4px #0F0F0F;
    border-radius: 5px;
}

div.answer{
    width:100%;
    height:50px;
    background-color:#80FF80;
}

div.answerHover{
    width:100%;
    height:50px;
    background-color:#FFFF80;
}

div#timeLimit{
    width:50%;
    height:20px;
}

td{
    Padding: 5px;
    width:50%;
}

div.score{
    border:1px solid #000000;
    text-align:center;
    
    width:100px;
    height:20px;
}

div.scoreNow{background-color:#80FF80}
div.scorePass{background-color:#FFFF80}
div.scoreNext{background-color:#9FE0FE}

JavaScript

var timeLimit = 40,
    alertTime = 10;
var times = timeLimit;
var currentLevel = 1;

$(document).ready(function() {

    $("div#test").cycle({
        fx: 'scrollUp',
        speed: 3000,
        timeout: 100
    });

    $("div#timeLimit").progressbar({
        value: 100
    });

    setInterval(countDown, 1000);


    $("div.answer").mouseenter(function() {
        $(this).toggleClass("answerHover answer");
    });
    $("div.answer").mouseleave(function() {
        $(this).toggleClass("answerHover answer");
    });

    for (var i = 1; i < 4; i++)
    $("div#ans" + i).click(function() {
        animateResult(false, 2);
    });
    //正確答案
    $("div#ans4").click(function() {
        animateResult(true, 2);
    });

});

function countDown() {
    times--;
    if (times < 0) {
        times = timeLimit;
        $("div#test").animate({
            backgroundColor: "#9FE0FE",
            color: "#000000",
        }, 1000);
    }
    else if (times <= alertTime) {
        $("div#test").animate({
            backgroundColor: "#DD0000",
            color: "#FFFFFF",
        }, 1000);
    }
    $("div#timeLimit").progressbar("option", "value", (times) / timeLimit * 100);
}

function animateResult(bingo, flashTime) {
    var theColor, dur;
    if (bingo) {
        theColor = "green";
        flashTime = 1;
        dur = 500;
    } else {
        theColor = "red";
        dur = 100;
    }

    $("body").animate({
        backgroundColor: theColor
    }, {
        duration: dur,
        complete: function() {
            $("body").animate({
                backgroundColor: "white"
            }, {
                duration: dur
            });
            flashTime--;
            if (flashTime > 0) animateResult(bingo, flashTime);
            if (bingo) levelUp();
        }
    });

}

function levelUp() {
    $("div#lv" + currentLevel).toggleClass("scoreNow scorePass");
    currentLevel++;
    if (currentLevel > 15) {
        alert("恭喜你獲得 1000000 !!");
        return;
...