jQuery+PHP 版既 "精神年齡鑑定"

編寫、設計網頁與程式。

版主: hamu278, 銘仔

版面規則
  • 本版面亦可以討論網頁寄存公司

jQuery+PHP 版既 "精神年齡鑑定"

文章Freeman » 2009-03-30, 01:34

主要練習下 jQuery 同一D PHP 基本運算既
佢本身已經用 JS 寫, 除左唔開 JS 用唔到之外, 佢個CODE寫得都唔好(相對)
所以我果個 JQ 既部分除左練習基本上無咩用 :oops:
計算方面已經比左 PHP 做

幫手睇下D CODE :mrgreen:

P.S.個XHTML唔標準既, 未搞 :oops:

我既版本:
http://www.fs-hk.com/think/

原作者:
http://mathsking.net/test/think.htm

CODE:
代碼: 選擇全部
<?php
$questions = array(
               '有時會有『只有這個不能讓步』的想法'       => array('yes' => 2, 'no' => 0, 'dont_know' => 1),
               '不能想困難的事情'                   => array('yes' => 0, 'no' => 1, 'dont_know' => 0),
               '很能忍耐'                      => array('yes' => 2, 'no' => 0, 'dont_know' => 1),
               '常哭'                         => array('yes' => 0, 'no' => 1, 'dont_know' => 0),
               '偶爾會被人說有中年人的味道'          => array('yes' => 7, 'no' => 0, 'dont_know' => 2),
               
               '只要有不稱心的事馬上就會生氣'          => array('yes' => 0, 'no' => 1, 'dont_know' => 0),
               '比起同年的朋友,和年長的朋友較合得來'    => array('yes' => 2, 'no' => 0, 'dont_know' => 1),
               '一個人早上起不來'                   => array('yes' => 0, 'no' => 1, 'dont_know' => 0),
               '在意服裝&nbsp; &amp;&nbsp; 髮型'       => array('yes' => 0, 'no' => 3, 'dont_know' => 1),
               '起床的時候會說鼓勵自己的話'          => array('yes' => 5, 'no' => 0, 'dont_know' => 2),
               
               '知道『色即是空』的意思'             => array('yes' => 1, 'no' => 0, 'dont_know' => 0),
               '常會什麼都不想就行動'                => array('yes' => 0, 'no' => 1, 'dont_know' => 0),
               '旅行或什麼大事的前一晚會睡不著'          => array('yes' => 0, 'no' => 1, 'dont_know' => 0),
               '不知道最近年輕人流行什麼'             => array('yes' => 4, 'no' => 0, 'dont_know' => 2),
               '有夢想'                         => array('yes' => 1, 'no' => 4, 'dont_know' => 2),
               
               '人生至今遇過許多挫折'                => array('yes' => 3, 'no' => 0, 'dont_know' => 1),
               '常浪費'                         => array('yes' => 0, 'no' => 1, 'dont_know' => 0),
               '用報紙打蟑螂是家常便飯'             => array('yes' => 2, 'no' => 0, 'dont_know' => 1),
               '沒辦法一個人住'                   => array('yes' => 0, 'no' => 3, 'dont_know' => 1),
               '想趕快變成歐吉桑 (歐巴桑)'             => array('yes' => 6, 'no' => 0, 'dont_know' => 3),
               
               '喜歡起鬨'                      => array('yes' => 0, 'no' => 1, 'dont_know' => 0),
               '比起旅行,比較喜歡待在家裡'          => array('yes' => 3, 'no' => 0, 'dont_know' => 1),
               '能讀書,可是不想讀'                => array('yes' => 3, 'no' => 0, 'dont_know' => 1),
               '人生計畫已很完美'                   => array('yes' => 2, 'no' => 0, 'dont_know' => 1),
               '會突然唱起歌來'                   => array('yes' => 0, 'no' => 1, 'dont_know' => 0),
               
               '比起都市,覺得住鄉下比較合自己的個性'    => array('yes' => 2, 'no' => 0, 'dont_know' => 1),
               '常被人耍'                      => array('yes' => 0, 'no' => 1, 'dont_know' => 0),
               '情感波動激烈'                   => array('yes' => 0, 'no' => 1, 'dont_know' => 0),
               '覺得有完結的人生才有意思'             => array('yes' => 4, 'no' => 0, 'dont_know' => 2),
               '會把一天當很多天用'                => array('yes' => 0, 'no' => 2, 'dont_know' => 1)
               );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>精神年齡鑑定</title>
    <link type="text/css" rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
    <!--
   $(document).ready(function () {
      ///*
      var questions = 0;
      var pager = '';
      
      function qToggle(q, hide) {
         if ( hide == 1 ) {
            $('ol dd').slideUp();
         }
         $('#' + q + 'body').slideToggle();
      }
      
      $('li').each(function() {
         questions++;
         pager += '<a href="javascript:void(0);" rel="q' + questions + '">' + questions + '</a> ';
      });
      $('#pager').html(pager);
      
      $('#pager a').click(function () {
         qToggle(this.rel, 1);
      });
      
      $('input:radio').click(function () {
         qToggle(this.name);
      });
      
      $('dt').click(function () {
         qToggle(this.id, 1);
      });
      
      //*/
   });
    -->
    </script>
</head>
<body>
   <div id="header">
      <h1>精神年齡鑑定</h1>
    </div>
    <div id="content">
       <?php
      
      if ( isset($_POST['submit']) ) {
         
         $now_age = (int) $_POST['now_age'];
         
         if ( empty($now_age) ) {
            exit('請輸入年齡。');
         }
         
         $i = 1;
         foreach ( $questions as $ans ) {
            $q[$i] = $_POST['q' . $i];
            if ( !in_array($q[$i], array($ans['yes'], $ans['no'], $ans['dont_know'])) ) {
               exit('請回答所有問題。');
            }
            $toshi += $q[$i];
            ++$i;
         }
         
         $nensa = $toshi - ceil($now_age);
         
         $calc = array(
                    'youchi'    => array(
                                  'percentage'    => 25,
                                  'questions'    => array(1, 2, 3, 4, 6, 8, 12, 13, 17, 18, 19, 21, 23 , 25, 27, 28, 30)
                                  ),
                    'otona'    => array(
                                  'percentage'    => 28,
                                  'questions'    => array(1, 2, 3, 6, 11, 12, 13, 16, 18, 19, 23, 24, 29, 30)
                                  ),
                    'roujin'    => array(
                                  'percentage'    => 36,
                                  'questions'    => array(5, 7, 9, 10, 14, 15, 20, 22, 26)
                                  )
                    );
         
         foreach ( $calc as $item => $detail ) {
            foreach ( $detail['questions'] as $qid ) {
               $$item += $q[$qid];
            }
            $$item = ($$item / $detail['percentage']) * 100;
            if ( $$item == 'youchi' ) {
               $$item = 100 - $$item;
            }
            $$item = ceil($$item);
         }
         
         echo '
            <div id="result">
               <h2>鑑定結果</h2>
               <p>您的精神年齡 ' . $toshi . ' 歲</p>
               <p>與您實際年齡差 ' . $nensa . ' 歲</p>
               <p>幼稚度 ' . $youchi . ' %</p>
               <p>成熟度 ' . $otona . ' %</p>
               <p>老化度 ' . $roujin . ' %</p>
            </div>
            <a href="' . $_SERVER['PHP_SELF'] . '">重新鑑定</a>
            ';
         
      } else {
      
      ?>
        <form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
            <fieldset>
                <dl>
                    <dt>你的實際年齡</dt>
                    <dd><input maxlength="3" size="2" id="now_age" name="now_age" /></dd>
                </dl>
                <span id="pager"></span>
                <ol>
                   <?php
               
               $i = 1;
               foreach ( $questions as $q => $ans ) {
                  echo '
                  <li id="' . $i . '">
                     <dl>
                        <dt id="q' . $i . '">' . $i . '.' . $q . '</dt>
                        <dd id="q' . $i . 'body">
                           <span><input type="radio" value="' . $ans['yes'] . '" name="q' . $i . '" />是</span>
                           <span><input type="radio" value="' . $ans['no'] . '" name="q' . $i . '" />不是</span>
                           <span><input type="radio" value="' . $ans['dont_know'] . '" name="q' . $i . '" />兩者皆非</span>
                           <input type="radio" value="999" name="q' . $i . '" checked="checked" class="default" />
                        </dd>
                     </dl>
                  </li>
                  ';
                  ++$i;
               }
               
               ?>
                </ol>
            </fieldset>
            <fieldset id="buttons">
                <input type="submit" value="鑑定開始" id="submit" name="submit" />
            </fieldset>
        </form>
        <?php
      
      }
      
      ?>
    </div>
</body>
</html>


CODE(OLD):
代碼: 選擇全部
<?php
$questions = array(
               '有時會有『只有這個不能讓步』的想法'       => array('yes' => 2, 'no' => 0, 'dont_know' => 1),
               '不能想困難的事情'                   => array('yes' => 0, 'no' => 1, 'dont_know' => 0),
               '很能忍耐'                      => array('yes' => 2, 'no' => 0, 'dont_know' => 1),
               '常哭'                         => array('yes' => 0, 'no' => 1, 'dont_know' => 0),
               '偶爾會被人說有中年人的味道'          => array('yes' => 7, 'no' => 0, 'dont_know' => 2),
               
               '只要有不稱心的事馬上就會生氣'          => array('yes' => 0, 'no' => 1, 'dont_know' => 0),
               '比起同年的朋友,和年長的朋友較合得來'    => array('yes' => 2, 'no' => 0, 'dont_know' => 1),
               '一個人早上起不來'                   => array('yes' => 0, 'no' => 1, 'dont_know' => 0),
               '在意服裝&nbsp; &amp;&nbsp; 髮型'       => array('yes' => 0, 'no' => 3, 'dont_know' => 1),
               '起床的時候會說鼓勵自己的話'          => array('yes' => 5, 'no' => 0, 'dont_know' => 2),
               
               '知道『色即是空』的意思'             => array('yes' => 1, 'no' => 0, 'dont_know' => 0),
               '常會什麼都不想就行動'                => array('yes' => 0, 'no' => 1, 'dont_know' => 0),
               '旅行或什麼大事的前一晚會睡不著'          => array('yes' => 0, 'no' => 1, 'dont_know' => 0),
               '不知道最近年輕人流行什麼'             => array('yes' => 4, 'no' => 0, 'dont_know' => 2),
               '有夢想'                         => array('yes' => 1, 'no' => 4, 'dont_know' => 2),
               
               '人生至今遇過許多挫折'                => array('yes' => 3, 'no' => 0, 'dont_know' => 1),
               '常浪費'                         => array('yes' => 0, 'no' => 1, 'dont_know' => 0),
               '用報紙打蟑螂是家常便飯'             => array('yes' => 2, 'no' => 0, 'dont_know' => 1),
               '沒辦法一個人住'                   => array('yes' => 0, 'no' => 3, 'dont_know' => 1),
               '想趕快變成歐吉桑 (歐巴桑)'             => array('yes' => 6, 'no' => 0, 'dont_know' => 3),
               
               '喜歡起鬨'                      => array('yes' => 0, 'no' => 1, 'dont_know' => 0),
               '比起旅行,比較喜歡待在家裡'          => array('yes' => 3, 'no' => 0, 'dont_know' => 1),
               '能讀書,可是不想讀'                => array('yes' => 3, 'no' => 0, 'dont_know' => 1),
               '人生計畫已很完美'                   => array('yes' => 2, 'no' => 0, 'dont_know' => 1),
               '會突然唱起歌來'                   => array('yes' => 0, 'no' => 1, 'dont_know' => 0),
               
               '比起都市,覺得住鄉下比較合自己的個性'    => array('yes' => 2, 'no' => 0, 'dont_know' => 1),
               '常被人耍'                      => array('yes' => 0, 'no' => 1, 'dont_know' => 0),
               '情感波動激烈'                   => array('yes' => 0, 'no' => 1, 'dont_know' => 0),
               '覺得有完結的人生才有意思'             => array('yes' => 4, 'no' => 0, 'dont_know' => 2),
               '會把一天當很多天用'                => array('yes' => 0, 'no' => 2, 'dont_know' => 1)
               );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>精神年齡鑑定</title>
    <link type="text/css" rel="stylesheet" href="style.css" />
    <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
    <!--
   $(document).ready(function () {
      
      //$('li').bind('click', function(){$('#' + this.id).hide()});
      
      ///*
      var current_id = $('li:first').attr('id');
      var questions = 0;
      var jump;
      var page;
      
      function page(page) {
         if ( page != current_id ) {
            if ( page == 'next' ) {
               page = '.current + li';
            } else {
               page = '#' + page;
            }
            $(page).show().addClass('current');
            $('#' + current_id).hide().removeClass('current');
            current_id = $('.current').attr('id');
         }
      }
      
      function check_last() {
         if ( current_id == (questions - 1) ) {
            $('#buttons').slideDown();
         }
      }
      
      $('li, #buttons').hide();
      $('li:first').slideDown().addClass('current');
       
      $('li').each(function() {
         questions++;
         $('#pager').html($('#pager').html() + '<a href="javascript:void(0);" rel="' + questions + '">' + questions + '</a> ');
       });
      
      $('input:radio').click(function () {
         check_last();
         $('#pager a[rel=' + current_id + ']').hide();
         page('next');
      });
      
      $('#pager a').click(function () {
         check_last();
         page(this.rel);
      });
      //*/
   });
    -->
    </script>
</head>
<body>
   <div id="header">
      <h1>精神年齡鑑定</h1>
    </div>
    <div id="content">
       <?php
      
      if ( isset($_POST['submit']) ) {
         
         $now_age = (int) $_POST['now_age'];
         
         if ( empty($now_age) ) {
            exit('請輸入年齡。');
         }
         
         $i = 1;
         foreach ( $questions as $ans ) {
            $q[$i] = $_POST['q' . $i];
            if ( !in_array($q[$i], array($ans['yes'], $ans['no'], $ans['dont_know'])) ) {
               exit('請回答所有問題。');
            }
            $toshi += $q[$i];
            ++$i;
         }
         
         $nensa = $toshi - ceil($now_age);
         
         $calc = array(
                    'youchi'    => array(
                                  'percentage'    => 25,
                                  'questions'    => array(1, 2, 3, 4, 6, 8, 12, 13, 17, 18, 19, 21, 23 , 25, 27, 28, 30)
                                  ),
                    'otona'    => array(
                                  'percentage'    => 28,
                                  'questions'    => array(1, 2, 3, 6, 11, 12, 13, 16, 18, 19, 23, 24, 29, 30)
                                  ),
                    'roujin'    => array(
                                  'percentage'    => 36,
                                  'questions'    => array(5, 7, 9, 10, 14, 15, 20, 22, 26)
                                  )
                    );
         
         foreach ( $calc as $item => $detail ) {
            foreach ( $detail['questions'] as $qid ) {
               $$item += $q[$qid];
            }
            $$item = ($$item / $detail['percentage']) * 100;
            if ( $$item == 'youchi' ) {
               $$item = 100 - $$item;
            }
            $$item = ceil($$item);
         }
         
         echo '
            <div id="result">
               <h2>鑑定結果</h2>
               <p>您的精神年齡 ' . $toshi . ' 歲</p>
               <p>與您實際年齡差 ' . $nensa . ' 歲</p>
               <p>幼稚度 ' . $youchi . ' %</p>
               <p>成熟度 ' . $otona . ' %</p>
               <p>老化度 ' . $roujin . ' %</p>
            </div>
                                <a href="' . $_SERVER['PHP_SELF'] . '">重新鑑定</a>
            ';
         
      } else {
      
      ?>
        <form method="post" action="<?php echo $_SERVER['PHP_SELF'];?>">
            <fieldset>
                <dl>
                    <dt>你的實際年齡</dt>
                    <dd><input maxlength="3" size="2" id="now_age" name="now_age" /></dd>
                </dl>
                <span id="pager"></span>
                <ol>
                   <?php
               
               $i = 1;
               foreach ( $questions as $q => $ans ) {
                  echo '
                  <li id="' . $i . '">
                     <dl>
                        <dt>' . $i . '.' . $q . '</dt>
                        <dd>
                           <span><input type="radio" value="' . $ans['yes'] . '" name="q' . $i . '" />是</span>
                           <span><input type="radio" value="' . $ans['no'] . '" name="q' . $i . '" />不是</span>
                           <span><input type="radio" value="' . $ans['dont_know'] . '" name="q' . $i . '" />兩者皆非</span>
                           <input type="radio" value="999" name="q' . $i . '" checked="checked" class="default" />
                        </dd>
                     </dl>
                  </li>
                  ';
                  ++$i;
               }
               
               ?>
                </ol>
            </fieldset>
            <fieldset id="buttons">
                <input type="submit" value="鑑定開始" id="submit" name="submit" />
            </fieldset>
        </form>
        <?php
      
      }
      
      ?>
    </div>
</body>
</html>
最後由 Freeman 於 2009-03-30, 14:38 編輯,總共編輯了 2 次。
Freeman
地球會員
 
文章: 1680
註冊時間: 2008-06-25, 21:04

Re: jQuery+PHP 版既 "精神年齡鑑定"

文章hkmtrhah » 2009-03-30, 01:58

點解無得返返去重答? :oops:

精神年齡鑑定 寫:鑑定結果
您的精神年齡 41 歲
與您實際年齡差 27 歲
幼稚度 68 %
成熟度 79 %
老化度 45 %


:roll:
圖檔
頭像
hkmtrhah
地球會員
 
文章: 1583
註冊時間: 2008-05-26, 17:29

Re: jQuery+PHP 版既 "精神年齡鑑定"

文章Freeman » 2009-03-30, 02:31

加左 :)
Freeman
地球會員
 
文章: 1680
註冊時間: 2008-06-25, 21:04

Re: jQuery+PHP 版既 "精神年齡鑑定"

文章銘仔 » 2009-03-30, 12:10

slideDown...
一禁,d radio 就向下飛走唔見左...

PS: IE6 TEST
頭像
銘仔
金星會員
 
文章: 3017
註冊時間: 2007-04-05, 20:36

Re: jQuery+PHP 版既 "精神年齡鑑定"

文章Freeman » 2009-03-30, 12:52

銘仔 寫:slideDown...
一禁,d radio 就向下飛走唔見左...

PS: IE6 TEST

無IE6同 :P IETESTER
Freeman
地球會員
 
文章: 1680
註冊時間: 2008-06-25, 21:04

Re: jQuery+PHP 版既 "精神年齡鑑定"

文章lsp » 2009-03-30, 14:55

其實計算唔係應該交比 Client Side 做咩''!?
頭像
lsp
地球會員
 
文章: 1374
註冊時間: 2008-02-07, 11:58

Re: jQuery+PHP 版既 "精神年齡鑑定"

文章Freeman » 2009-03-30, 15:01

lsp 寫:其實計算唔係應該交比 Client Side 做咩''!?

兩者都得
只係佢本身已經用JS, 我又用咪得好少野寫...
Freeman
地球會員
 
文章: 1680
註冊時間: 2008-06-25, 21:04

Re: jQuery+PHP 版既 "精神年齡鑑定"

文章jl9404 » 2009-03-30, 17:35

用 onmouseover la 係咁 click 好煩-.-
上面條 bar 甘 30 ar 29 ar 5識自已slide down...
jl9404
土星會員
 
文章: 153
註冊時間: 2007-01-09, 19:50

Re: jQuery+PHP 版既 "精神年齡鑑定"

文章Freeman » 2009-03-30, 18:23

jl9404 寫:用 onmouseover la 係咁 click 好煩-.-
上面條 bar 甘 30 ar 29 ar 5識自已slide down...

用左mouseover,
而家好好玩 :P :P
Freeman
地球會員
 
文章: 1680
註冊時間: 2008-06-25, 21:04

Re: jQuery+PHP 版既 "精神年齡鑑定"

文章大大師兄 » 2009-03-31, 02:48

如果唔係要用 Javascript 分析,我實唔會開 Javascript,d 題目彈吓彈吓,想揀答案已經縮埋再開下一題... :evil:
圖檔
大大師兄
地球會員
 
文章: 1400
註冊時間: 2009-01-16, 14:04

Re: jQuery+PHP 版既 "精神年齡鑑定"

文章Freeman » 2009-03-31, 03:37

大大師兄 寫:如果唔係要用 Javascript 分析,我實唔會開 Javascript,d 題目彈吓彈吓,想揀答案已經縮埋再開下一題... :evil:

所以我比PHP做 :)
Freeman
地球會員
 
文章: 1680
註冊時間: 2008-06-25, 21:04


回到 [B1] 網頁製作、程式編寫與介面設計



誰在線上

正在瀏覽這個版面的使用者:Google [Bot] 和 26 位訪客

cron