Direct Scroll

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 class="questionContent shadowRadius" id="test">
            <div id="content">
                有兩個太太在聊天，一個是甲，另一個是乙<br>
                <br>
                甲：「你的三個女兒今年幾歲阿？」<br>
                乙：「他們的年齡相乘為36」<br>
                甲：「資訊不足」<br>
                乙：「他們年齡的和是我們大學同住時的房間號碼」<br>
                甲：「還是不夠」<br>
                乙：「我最大的一個女兒眼睛是藍色的」<br>
                甲：「嗯，我知道了」<br>
                <br>
                請問：<br>
                1.他們大學時的房間號碼是幾號？<br>
                2.乙三個女兒的年齡分別是多少？<br>
            </div>
        </div>
        <br>
        <div id="timeLimit"></div>
        <hr>
        <table border=0 width=50% height=100>
            <tr>
                <td class="answerTable"><div id="ans1" class="shadowRadius answer">1. 女兒和我一樣大才 Fashion</div></td>
                <td class="answerTable"><div id="ans2" class="shadowRadius answer">2. 一定 iPad 溫開水</div></td>
            </tr>
            <tr>
                <td class="answerTable"><div id="ans3" class="shadowRadius answer">3. 整個場面我 Hold 住</div></td>
                <td class="answerTable"><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"...

CSS

div#content{position:relative;top:20px;left:0px;}

div.questionContent{
    text-align:left;
    background-color:#9FE0FE;
    width:50%;
    height:200px;
    overflow:hidden;
}

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() {

    setInterval(scrollContent, 50);

    $("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 scrollContent() {
    var h = parseInt($("div#content").css("height").replace("px", ""), 10);
    var t = parseInt($("div#content").css("top").replace("px", ""), 10);
    t -= 1;
    console.log(h);
    $("div#content").css("top", t);
    if ((t * -1) > h) $("div#content").css("top", h);
}

function countDown() {
    times--;
    if (times < 0) {
        times = timeLimit;
        $("div#test").animate({
            backgroundColor: "#9FE0FE",
            color: "#000000",
        }, 1000);
        //更換題目
/*
                $.post("themeReader.php",{num:0},function(data){
                    $("div#test").html(data['content']);
                    $("div#ans1").html(data['a1']);
                    $("div#ans2").html(data['a2']);
                    $("div#ans3").html(data['a3']);
                    $("div#ans4").html(data['a4']);
                },"json");
                */
    }
    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 {
       ...