左右脑应用

add.css

@charset "utf-8";
/* CSS Document */
.add1{padding-top:10px;height:30px;font-size:20px;}
.add2{color:#67d4f1;font-size:28px;line-height:68px;height:100px;}
.add3{padding-top:30px;font-size:12px;}
h1{height:68px;width:370px;background:url(../img/ui.png) no-repeat center top ;margin:71px auto 30px;font-size:28px;line-height:58px;color:#fff;padding:0 80px 0 80px;}
h2{height:68px;width:370px;background:url(../img/ui.png) no-repeat center top ;margin:20px auto 0;font-size:24px;line-height:58px;color:#fff;padding:0 80px 0 80px;}
h5{height:48px;color:#67d4f1;font-size:14px;font-weight:normal;}
.button,.button2{color:#fff;display:block;background:url(../img/ui.png) no-repeat 0 -68px;width:251px;height:80px;margin:0 auto;cursor:pointer;font-size:30px;line-height:70px;text-shadow: #999999 1px 1px 0;}
.button2{background:url(../img/ui.png) no-repeat -252px -69px;width:211px;height:64px;font-size:26px;line-height:54px;text-align:center;}
.button a, .button a:visited { color:#fff; text-decoration:none}
.button a { display:block; height:68px}
.button a:hover { text-decoration:none}
#intro h5{margin-top:-30px;}


#test02 .button{margin-top:100px;}
.vorgabe{margin-top:48px;font-weight:normal;}

#test03 h1{font-size:22px;}
#test05 h2,#test06 h2,#test07 h2,#test08 h2,#test09 h2{font-size:20px;margin-top:115px;margin-bottom:100px;}
#test02 h1,#test09 h2{font-size:18px;line-height:20px;padding-top:5px;height:63px;}
.fb_box{width:660px;margin:48px auto;border:1px solid #7edbfd;background:#fff;border-radius: 5px;padding:36px 0;}
.fb_box1{width:498px;border:1px solid #7edbfd;border-radius: 5px;margin:0 auto;padding:10px 30px;font-size:12px;line-height:18px;}
.fb_box2{display:block;margin:20px auto;width:408px;box-shadow: 2px 2px 2px #ddd;}
.add4{width:100%;position:absolute;top:0;left:0;background:url(../img/1.jpg) no-repeat center top #c9f8fe;z-index:99999;display:none;}
.add41{width:800px;margin:0 auto;text-align:center;padding-top:30px;height:500px;}
.add4 h2{font-size:28px;}

.download_bar{width:434px;margin:0 auto 0;height:34px;line-height:34px;overflow:hidden;font-size:17px;font-family: "微软雅黑";text-align:center;background:url(../img/download.png) no-repeat;}
.download_bar a{color:#5EB7E6;text-decoration: none;}
.download_bar a:hover{text-decoration: underline;}

base64.min.js

(function(global){"use strict";if(global.Base64)return;var version="2.1.2";var buffer;if(typeof module!=="undefined"&&module.exports){buffer=require("buffer").Buffer}var b64chars="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";var b64tab=function(bin){var t={};for(var i=0,l=bin.length;i<l;i++)t[bin.charAt(i)]=i;return t}(b64chars);var fromCharCode=String.fromCharCode;var cb_utob=function(c){if(c.length<2){var cc=c.charCodeAt(0);return cc<128?c:cc<2048?fromCharCode(192|cc>>>6)+fromCharCode(128|cc&63):fromCharCode(224|cc>>>12&15)+fromCharCode(128|cc>>>6&63)+fromCharCode(128|cc&63)}else{var cc=65536+(c.charCodeAt(0)-55296)*1024+(c.charCodeAt(1)-56320);return fromCharCode(240|cc>>>18&7)+fromCharCode(128|cc>>>12&63)+fromCharCode(128|cc>>>6&63)+fromCharCode(128|cc&63)}};var re_utob=/[\uD800-\uDBFF][\uDC00-\uDFFFF]|[^\x00-\x7F]/g;var utob=function(u){return u.replace(re_utob,cb_utob)};var cb_encode=function(ccc){var padlen=[0,2,1][ccc.length%3],ord=ccc.charCodeAt(0)<<16|(ccc.length>1?ccc.charCodeAt(1):0)<<8|(ccc.length>2?ccc.charCodeAt(2):0),chars=[b64chars.charAt(ord>>>18),b64chars.charAt(ord>>>12&63),padlen>=2?"=":b64chars.charAt(ord>>>6&63),padlen>=1?"=":b64chars.charAt(ord&63)];return chars.join("")};var btoa=global.btoa||function(b){return b.replace(/[\s\S]{1,3}/g,cb_encode)};var _encode=buffer?function(u){return new buffer(u).toString("base64")}:function(u){return btoa(utob(u))};var encode=function(u,urisafe){return!urisafe?_encode(u):_encode(u).replace(/[+\/]/g,function(m0){return m0=="+"?"-":"_"}).replace(/=/g,"")};var encodeURI=function(u){return encode(u,true)};var re_btou=new RegExp(["[À-ß][€-¿]","[à-ï][€-¿]{2}","[ð-÷][€-¿]{3}"].join("|"),"g");var cb_btou=function(cccc){switch(cccc.length){case 4:var cp=(7&cccc.charCodeAt(0))<<18|(63&cccc.charCodeAt(1))<<12|(63&cccc.charCodeAt(2))<<6|63&cccc.charCodeAt(3),offset=cp-65536;return fromCharCode((offset>>>10)+55296)+fromCharCode((offset&1023)+56320);case 3:return fromCharCode((15&cccc.charCodeAt(0))<<12|(63&cccc.charCodeAt(1))<<6|63&cccc.charCodeAt(2));default:return fromCharCode((31&cccc.charCodeAt(0))<<6|63&cccc.charCodeAt(1))}};var btou=function(b){return b.replace(re_btou,cb_btou)};var cb_decode=function(cccc){var len=cccc.length,padlen=len%4,n=(len>0?b64tab[cccc.charAt(0)]<<18:0)|(len>1?b64tab[cccc.charAt(1)]<<12:0)|(len>2?b64tab[cccc.charAt(2)]<<6:0)|(len>3?b64tab[cccc.charAt(3)]:0),chars=[fromCharCode(n>>>16),fromCharCode(n>>>8&255),fromCharCode(n&255)];chars.length-=[0,0,2,1][padlen];return chars.join("")};var atob=global.atob||function(a){return a.replace(/[\s\S]{1,4}/g,cb_decode)};var _decode=buffer?function(a){return new buffer(a,"base64").toString()}:function(a){return btou(atob(a))};var decode=function(a){return _decode(a.replace(/[-_]/g,function(m0){return m0=="-"?"+":"/"}).replace(/[^A-Za-z0-9\+\/]/g,""))};global.Base64={VERSION:version,atob:atob,btoa:btoa,fromBase64:decode,toBase64:encode,utob:utob,encode:encode,encodeURI:encodeURI,btou:btou,decode:decode};if(typeof Object.defineProperty==="function"){var noEnum=function(v){return{value:v,enumerable:false,writable:true,configurable:true}};global.Base64.extendString=function(){Object.defineProperty(String.prototype,"fromBase64",noEnum(function(){return decode(this)}));Object.defineProperty(String.prototype,"toBase64",noEnum(function(urisafe){return encode(this,urisafe)}));Object.defineProperty(String.prototype,"toBase64URI",noEnum(function(){return encode(this,true)}))}}})(this);

brain.js

window.log = function f() {
    log.history = log.history || [];
    log.history.push(arguments);
    if (this.console) {
        var args = arguments,
        newarr;
        args.callee = args.callee.caller;
        newarr = [].slice.call(args);
        if (typeof console.log === 'object') log.apply.call(console.log, console, newarr);
        else console.log.apply(console, newarr);
    }
}; 
(function(a) {
    function b() {}
    for (var c = "assert,count,debug,dir,dirxml,error,exception,group,groupCollapsed,groupEnd,info,log,markTimeline,profile,profileEnd,time,timeEnd,trace,warn".split(","), d; !! (d = c.pop());) {
        a[d] = a[d] || b;
    }
})(function() {
    try {
        console.log();
        return window.console;
    } catch(a) {
        return (window.console = {});
    }
} ());
function getURLParameter(name) {
    return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [, ""])[1].replace(/\+/g, '%20')) || null;
}
d = getURLParameter('data');
if (d) {
    x = Base64.decode(d);
    $(".test.result").attr('data-resultleft', x.split(',')[0]);
    $(".test.result").attr('data-resultright', x.split(',')[1]);
    $("#wrapper").addClass('showresult');
}
if (!$('#wrapper').hasClass('showresult')) {
    $('#intro').fadeIn(300);
}
wronganswers = 0;
notanswered = 0;
color = 0;
o = 0;
points_left = 0;
points_right = 0;
functionstopped = false;
res_taenzerin = '';
res_farben = '4';
res_figuren = '';
res_passtzu = '';
res_freundschaft = '';
res_kopf = '';
res_arme = '';
res_beine = '';
res_auge = '';
device = 'desktop';
if ($('html').hasClass('mobile')) {
    device = 'mobile';
}
if ($('html').hasClass('tablet')) {
    device = 'tablet';
}
$('#intro .button').click(function() {
    $('#intro').fadeOut(300,
    function() {
        $('#test01').fadeIn(300);
    });
});
$('.farben .button').click(function() {});
$('.answer').click(function() {
    if (!$(this).hasClass('farbe')) {
        points_left = points_left + parseFloat($(this).attr('data-pointsleft'));
        points_right = points_right + parseFloat($(this).attr('data-pointsright'));
        question_name = $(this).attr('data-name');
        if (question_name == 'res_taenzerin') {
            res_taenzerin = parseFloat($(this).attr('data-pointsleft')) + ',' + parseFloat($(this).attr('data-pointsright'));
        }
        if (question_name == 'res_figuren') {
            res_figuren = parseFloat($(this).attr('data-pointsleft')) + ',' + parseFloat($(this).attr('data-pointsright'));
        }
        if (question_name == 'res_passtzu') {
            res_passtzu = parseFloat($(this).attr('data-pointsleft')) + ',' + parseFloat($(this).attr('data-pointsright'));
        }
        if (question_name == 'res_freundschaft') {
            res_freundschaft = parseFloat($(this).attr('data-pointsleft')) + ',' + parseFloat($(this).attr('data-pointsright'));
        }
        if (question_name == 'res_kopf') {
            res_kopf = parseFloat($(this).attr('data-pointsleft')) + ',' + parseFloat($(this).attr('data-pointsright'));
        }
        if (question_name == 'res_arme') {
            res_arme = parseFloat($(this).attr('data-pointsleft')) + ',' + parseFloat($(this).attr('data-pointsright'));
        }
        if (question_name == 'res_beine') {
            res_beine = parseFloat($(this).attr('data-pointsleft')) + ',' + parseFloat($(this).attr('data-pointsright'));
        }
        if (question_name == 'res_auge') {
            res_auge = parseFloat($(this).attr('data-pointsleft')) + ',' + parseFloat($(this).attr('data-pointsright'));
        }
        test = $(this).closest('.test');
        if ($(test).next('.test').hasClass('result')) {
            $(test).fadeOut(300,
            function() {
                $('.result').delay(300).fadeIn(300);
                hidebar();
            });
            setTimeout(getresult, 1000);
        } else {
            $(test).fadeOut(300,
            function() {
                $(test).next('.test').delay(300).fadeIn(300);
                hidebar();
            });
        }
    }
});
$('.button.why').click(function() {
    $(this).closest('.test').fadeOut(300,
    function() {
        $('#wrapper').height('auto');
        $('.explaination').delay(300).fadeIn(300);
        hidebar();
    })
});
$('.explaination .button').click(function() {
    $(this).closest('.test').fadeOut(300,
    function() {
        $('#wrapper').height('530px');
        $('.danke').delay(300).fadeIn(300);
        hidebar();
    })
});
function hidebar() {
    window.scrollTo(0, 0);
}
setTimeout(hidebar, 100);
$('.farben .button').click(function() {
    $(this).fadeOut(0);
    nextcolor();
});
$('.farben .answer').live('click',
function() {
    $('.counter .bar .inner').stop(true, true);
    i = 4;
    if ($(this).hasClass('wrong')) wronganswers++;
    clearnumber();
    clearInterval(shownext);
    nextcolor();
});
function changenumber() {
    i--;
    if (i == 0) {
        notanswered++;
    }
    $('.counter .number').html(i);
}
function clearnumber() {
    clearInterval(refreshnumber);
}
function farbencounter() {
    i = 4;
    refreshnumber = setInterval(changenumber, 1000);
    $('.counter .bar .inner').animate({
        'width': '0px'
    },
    4000, 'linear');
    setTimeout(clearnumber, 4000);
}
function nextcolor() {
    $('.farben .answer').css({
        'display': 'block'
    });
    color++;
    $('.answer.farbe').removeClass('wrong');
    if (color == 1) {
        $('.farben .left').html('红色');
        $('.farben .right').html('蓝色');
        $('.farben .left').css({
            'color': '#ff0000'
        });
        $('.farben .right').addClass('wrong');
        $('.farben .right').css({
            'color': '#00c5fe'
        });
        $('.farben .vorgabe').html('红色');
        $('.farben .vorgabe').css({
            'color': '#ff0000'
        });
    }
    if (color == 2) {
        $('.farben .left').html('橙色');
        $('.farben .right').html('粉色');
        $('.farben .left').css({
            'color': '#ff8a00'
        });
        $('.farben .right').addClass('wrong');
        $('.farben .right').css({
            'color': '#ff8bb9'
        });
        $('.farben .vorgabe').html('粉色');
        $('.farben .vorgabe').css({
            'color': '#ff8a00'
        });
    }
    if (color == 3) {
        $('.farben .left').html('粉色');
        $('.farben .right').html('绿色');
        $('.farben .left').css({
            'color': '#ff8bb9'
        });
        $('.farben .right').addClass('wrong');
        $('.farben .right').css({
            'color': '#05e000'
        });
        $('.farben .vorgabe').html('绿色');
        $('.farben .vorgabe').css({
            'color': '#ff8bb9'
        });
    }
    if (color == 4) {
        $('.farben .left').html('棕色');
        $('.farben .right').html('红色');
        $('.farben .left').css({
            'color': '#a86f00'
        });
        $('.farben .right').css({
            'color': '#ff0000'
        });
        $('.farben .left').addClass('wrong');
        $('.farben .vorgabe').html('棕色');
        $('.farben .vorgabe').css({
            'color': '#ff0000'
        });
    }
    if (color == 5) {
        $('.farben .left').html('绿色');
        $('.farben .right').html('黄色');
        $('.farben .left').css({
            'color': '#05e000'
        });
        $('.farben .right').addClass('wrong');
        $('.farben .right').css({
            'color': '#ffe400'
        });
        $('.farben .vorgabe').html('绿色');
        $('.farben .vorgabe').css({
            'color': '#05e000'
        });
    }
    if (color == 6) {
        $('.farben .left').html('橙色');
        $('.farben .right').html('粉色');
        $('.farben .left').css({
            'color': '#ff8a00'
        });
        $('.farben .right').addClass('wrong');
        $('.farben .right').css({
            'color': '#ff8bb9'
        });
        $('.farben .vorgabe').html('粉色');
        $('.farben .vorgabe').css({
            'color': '#ff8a00'
        });
    }
    if (color == 7) {
        $('.farben .left').html('红色');
        $('.farben .right').html('蓝色');
        $('.farben .left').css({
            'color': '#ff0000'
        });
        $('.farben .right').addClass('wrong');
        $('.farben .right').css({
            'color': '#00c5fe'
        });
        $('.farben .vorgabe').html('蓝色');
        $('.farben .vorgabe').css({
            'color': '#ff0000'
        });
    }
    if (color == 8) {
        $('.farben .left').html('绿色');
        $('.farben .right').html('红色');
        $('.farben .left').css({
            'color': '#05e000'
        });
        $('.farben .right').css({
            'color': '#ff0000'
        });
        $('.farben .left').addClass('wrong');
        $('.farben .vorgabe').html('绿色');
        $('.farben .vorgabe').css({
            'color': '#ff0000'
        });
    }
    if (color < 9) {
        $('.counter .number').html(4);
        counterwidth = '200px';
        if ($('html').hasClass('mobile')) {
            counterwidth = '135px';
        }
        $('.counter .bar .inner').css({
            'width': counterwidth
        });
        farbencounter();
        shownext = setTimeout(nextcolor, 4100);
    } else {
        hidebar();
        $('.farben').fadeOut(300,
        function() {
            $('.figuren').fadeIn(300);
        });
        farbenresult = notanswered + wronganswers;
        if (farbenresult > 0) {
            points_left = points_left + 4;
            res_farben = '4,0';
        } else {
            points_right = points_right + 4;
            res_farben = '0,4';
        }
    }
}
function showkeywords(key) {
    prestyle = $(key).css('font-size');
    $(key).css({
        'font-size': '1px'
    });
    $(key).delay(500).animate({
        'font-size': prestyle,
        'opacity': '100'
    },
    300);
}
function getresult() {
        allpoints = parseInt(points_left) + parseInt(points_right);
        onepoint = 100 / allpoints;
        prozent_links = Math.round(points_left * onepoint);
        prozent_rechts = 100 - prozent_links;
    if (points_left*1 > points_right*1) {
        faktorleft = 2000;
        faktorright = 1000;
		$('.result h2').html("恭喜,您属于左脑型的人。");
        $('#share_btn_ok_link').attr('href', 'http://service.weibo.com/share/share.php?source=bookmark&title=%23左右脑PK%23，根据测试，我的左脑是' + prozent_links + '%，我的右脑是' + prozent_rechts + '%,我是属于左脑型的人。快来看看你是左脑还是右脑占主导吧：www.xishanju.com/zt/brain/brian201403/index.html&pic=http://app.liebao.cn/brain/img/brain.jpg')
    }else if (points_left*1 < points_right*1) {
        faktorleft = 1000;
        faktorright = 2000;
        $('.result h2').html("恭喜,您属于右脑型的人。");
        $('#share_btn_ok_link').attr('href', 'http://service.weibo.com/share/share.php?source=bookmark&title=%23左右脑PK%23，根据测试，我的左脑是' + prozent_links + '%，我的右脑是' + prozent_rechts + '%,我是属于右脑型的人。快来看看你是左脑还是右脑占主导吧：www.xishanju.com/zt/brain/brian201403/index.html&pic=http://app.liebao.cn/brain/img/brain.jpg');
    }else{
        faktorleft = 1000;
        faktorright = 1000;
        $('.result h2').html("恭喜,您左右脑使用情况一致。");
        $('#share_btn_ok_link').attr('href', 'http://service.weibo.com/share/share.php?source=bookmark&title=%23左右脑PK%23，根据测试，我的左脑是' + prozent_links + '%，我的右脑是' + prozent_rechts + '%,我是属于均衡型的人。快来看看你是左脑还是右脑占主导吧：www.xishanju.com/zt/brain/brian201403/index.html&pic=http://app.liebao.cn/brain/img/brain.jpg')    }
    $('.leftresult_text').html(prozent_links + '%');
    $('.rightresult_text').html(prozent_rechts + '%');
    brainplus = 310;
    if ($('html').hasClass('mobile')) {
        brainplus = 180;
    }
    $('.leftresult').delay(500).animate({
        'height': (brainplus / 100) * prozent_links + 20
    },
    2000);
    $('.rightresult').delay(500).animate({
        'height': (brainplus / 100) * prozent_rechts + 20
    },
    2000);
    $('.resulttext').delay(2400).fadeIn(100);
    setTimeout(function() {
        showkeywords('.regeln')
    },
    100 + faktorleft);
    setTimeout(function() {
        showkeywords('.strategie')
    },
    250 + faktorleft);
    setTimeout(function() {
        showkeywords('.logik')
    },
    400 + faktorleft);
    setTimeout(function() {
        showkeywords('.rationalitaet')
    },
    500 + faktorleft);
    setTimeout(function() {
        showkeywords('.details')
    },
    650 + faktorleft);
    setTimeout(function() {
        showkeywords('.sprache')
    },
    700 + faktorleft);
    setTimeout(function() {
        showkeywords('.intuition')
    },
    800 + faktorright);
    setTimeout(function() {
        showkeywords('.neugierde')
    },
    950 + faktorright);
    setTimeout(function() {
        showkeywords('.kreativitaet')
    },
    100 + faktorright);
    setTimeout(function() {
        showkeywords('.fantasie')
    },
    200 + faktorright);
    setTimeout(function() {
        showkeywords('.chaos')
    },
    400 + faktorright);
    setTimeout(function() {
        showkeywords('.bilder')
    },
    550 + faktorright);
    
}

if ($('#wrapper').hasClass('showresult')) {
    getresult();
}

$(function() {
    $("#last_test1,#last_test2").click(function() {
        $(".add4").css("display", "block");
    });
	 $(".add4 .button").click(function() {
        $(".add4").css("display", "none");
    })
});

index.html

<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="zh">
<!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>右脑型？还是左脑型？参加测试确认！</title>
    <meta name="description" content="">
    <meta name="author" content="">
    <link type="text/css" rel="stylesheet" href="css/min.css" />
    <link type="text/css" rel="stylesheet" href="css/add.css?sfs" />
    <script src="js/base64.min.js"></script>
    <script src="js/modernizr.min.js"></script>
  </head>
  <body>
    <div style="margin: 0 auto; width:960px;">
      <div role="main" id="wrapper">
	<div class="test" id="intro">
		<p class="add1">．．．．．．<span class="yh">左右脑使用报告</span>．．．．．．</p>
	  <h1>您大脑的哪一边更占主导性？</h1>
	  <h5>30 秒脑力测试</h5>
	  <img class="brain" alt="大脑" src="img/brain_zh.png"/>
	  <p class="button">立即测试</p>
	</div>

	<div class="test taenzerin" id="test01">
	  <h1>请选择图中女子的转动方向</h1>
	  
	  <div class="taenzerinimg_wrap">
	    <img class="taenzerinimg" alt="Taenzerin" src="img/taenzerin.gif"/>
	  </div>


	  <div class="answers">
	    <p class="answer left" data-pointsleft="4" data-pointsright="0" data-name="res_taenzerin">
	      <img width="73" height="98" class="circle circle01" alt="Circle" src="img/circle_left.png"/>
	    </p>
	    <p class="answer right" data-pointsleft="0" data-pointsright="4" data-name="res_taenzerin">
	      <img width="73" height="98" class="circle circle02" alt="Circle" src="img/circle_right.png"/>
	    </p>
	  </div>
	</div>

	<div class="test farben" id="test02">
	  <h1>选择文字的颜色，而不是文字含义代表的<br />颜色。每道题有 4 秒时间。</h1>
	  <p class="button">开始</p>
	  <p class="vorgabe"></p>
	  <div class="answers">
	    <p class="answer left farbe" data-pointsleft="0" data-pointsright="0" data-name="res_farben"></p>
	    <p class="answer right farbe" data-pointsleft="0" data-pointsright="0" data-name="res_farben"></p>
	  </div>

	  <div class="counter">
	    <div class="bar">
	      <div class="inner"></div>
	    </div>
	    <p class="number">4</p>
	  </div>
	</div>

	<div class="test figuren" id="test03">
	  <h1>下列哪张图片最能吸引您的注意力？</h1>
	  <div class="answers_images">
	    <img class="answer figurimg figur01" alt="Figur" src="img/figur01.png" data-pointsleft="4" data-pointsright="0" data-name="res_figuren"/>
	    <img class="answer figurimg figur02" alt="Figur" src="img/figur02.png" data-pointsleft="2" data-pointsright="2" data-name="res_figuren"/>
	    <img class="answer figurimg figur03" alt="Figur" src="img/figur03.png" data-pointsleft="0" data-pointsright="4" data-name="res_figuren"/>
	  </div>
	</div>

	<div class="test passen" id="test04">
	  <img class="passenimg passen00" alt="相似性" src="img/passen_vorgabe.png"/>
	  <h2>选出下图中你认为与上图最相似的</h2>
	  <div class="answers_images">
	    <img class="answer passenimg passen01" alt="Passen" src="img/passen01.png" data-pointsleft="0" data-pointsright="4" data-name="res_passtzu"/>
	    <img class="answer passenimg passen02" alt="Passen" src="img/passen02.png" data-pointsleft="4" data-pointsright="0" data-name="res_passtzu"/>
	    <img class="answer passenimg passen03" alt="Passen" src="img/passen03.png" data-pointsleft="0" data-pointsright="4" data-name="res_passtzu"/>
	  </div>
	</div>

	<div class="test freundschaft" id="test05">
	  <h2>下列哪张图片更加切合友情这一主题？</h2>
	  <div class="answers_images">
	    <img class="answer freundschaftimg freundschaft01" alt="Freundschaft" src="img/freundschaft01.png" data-pointsleft="4" data-pointsright="0" data-name="res_freundschaft"/>
	    <img class="answer freundschaftimg freundschaft02" alt="Freundschaft" src="img/freundschaft02.png" data-pointsleft="2" data-pointsright="2" data-name="res_freundschaft"/>
	    <img class="answer freundschaftimg freundschaft03" alt="Freundschaft" src="img/freundschaft03.png" data-pointsleft="0" data-pointsright="4" data-name="res_freundschaft"/>
	  </div>
	</div>

	<div class="test kopf" id="test06">
	  <h2>把您的一只手放在头顶，您会用哪只手？</h2>
	  <div class="answers text">
	    <p class="answer left text" data-pointsleft="0" data-pointsright="3" data-name="res_kopf">左</p>
	    <p class="answer right text" data-pointsleft="3" data-pointsright="0" data-name="res_kopf">右</p>
	  </div>
	</div>

	<div class="test arme" id="test07">
	  <h2>手臂交叉放于胸前，您的哪只手在上？</h2>
	  <div class="answers text">
	    <p class="answer left text" data-pointsleft="0" data-pointsright="3" data-name="res_arme">左</p>
	    <p class="answer right text" data-pointsleft="3" data-pointsright="0" data-name="res_arme">右</p>
	  </div>
	</div>

	<div class="test beine" id="test08">
	  <h2>双腿交叉，您的哪条腿在上？</h2>
	  <div class="answers text">
	    <p class="answer left text" data-pointsleft="0" data-pointsright="3" data-name="res_beine">左</p>
	    <p class="answer right text" data-pointsleft="3" data-pointsright="0" data-name="res_beine">右</p>
	  </div>
	</div>

	<div class="test auge" id="test09">
	  <h2>闭上一只眼睛，盯住一个物体。<br />哪只眼仍然是睁开的？</h2>
	  <div class="answers text">
	    <p class="answer left text" data-pointsleft="0" data-pointsright="3" data-name="res_auge" id="last_test1">左</p>
	    <p class="answer right text" data-pointsleft="3" data-pointsright="0" data-name="res_auge" id="last_test2">右</p>
	  </div>
	</div>




	<div class="test result" id="result">
	  <p class="add1">．．．．．．<span class="yh">左右脑使用报告</span>．．．．．．</p>
      <h2 style="height:65px"></h2>
	  <div class="braincon">
	    <div class="leftresult">
	      <p class="leftresult_text resulttext" id="leftresult"></p>
	    </div>

	    <div class="rightresult">
	      <p class="rightresult_text resulttext" id="rightresult"></p>
	    </div>
	    
	    <img width="284" height="312" class="brain" alt="Gehirn" src="img/brain_result.png"/>
	    <p class="button" id="share_re"><a id="share_btn_ok_link">分享结果</a></p>
	    <p style="left: -198px;top: 48px;font-size:30px;" class="keyword left regeln">策略</p>
	    <p style="left: -320px;top: 60px;font-size: 24px;" class="keyword left sprache">适应性</p>
	    <p style="left:-180px;top:100px;font-size:52px;" class="keyword left strategie">语言能力</p>
	    <p style="left:-90px;top:60px;font-size:18px" class="keyword left details">细致</p>
	    <p style="left: -242px;top: 160px;font-size: 43px;" class="keyword left rationalitaet">理性</p>
	    <p style="left: -135px;top: 205px;font-size:33px;" class="keyword left logik">逻辑</p>
	    <p style="left: -185px;top: 250px;font-size:18px;" class="keyword left logik">条理性</p>

	    <p style="right: -102px;top: 57px;font-size:30px;" class="keyword right chaos">混乱</p>
	    <p style="right: -200px;top: 100px;font-size: 55px;" class="keyword right kreativitaet">创意</p>
	    <p style="right:-140px;top:160px;font-size:43px;" class="keyword right intuition">直观</p>
	    <p style="right:-260px;top:152px;font-size:14px" class="keyword right fantasie">幻想</p>
	    <p style="right: -272px;top: 177px;font-size: 20px;" class="keyword right bilder">图像</p>
	    <p style="right: -228px;top: 205px;font-size:22px;" class="keyword right neugierde">好奇</p>
	    <p style="right: -128px;top: 245px;font-size:18px;" class="keyword right neugierde">感性</p>
	  </div>
	</div>

	<div class="explaination test page">

	  <div class="explain q1">
	    <h3>问题 1： </h3><h5>舞者</h5>
	    
	    <div class="text">
	      <img style="padding-right:20px;padding-bottom:10px;padding-top:5px" width="60" height="auto" src="img/taenzerin.gif">
	      <p>根据大脑工作理论，舞者会顺时针或逆时针转向。如果舞者顺时针转向，则说明您更倾向于使用您的右脑，并且您极有可能是右撇子。</p>
	    </div>
	  </div>

	  <div class="explain q2">
	    <h3>问题 2： </h3><h5>颜色测试</h5>

	    <div class="text">
	      <h5>冲突：</h5>
	      <img width="95" height="auto" style="padding-right:10px;" src="img/explain_farben.png">
	      <p>右脑想选择与单词本身的颜色一致的颜色，左脑则想选择单词所表述的颜色。当您犯了错误的时候，左脑在起作用。</p>
	    </div>
	  </div>

	  <div class="explain q3">
	    <h3>问题 3： </h3><h5>图片</h5>

	    <div class="text">
	      <h5>答案 A：</h5>
	      <img width="75" height="60" src="img/figur01.png">
	      <p>如果您选择了这张照片，说明您的左脑更具主导性。原因是图中圆圈的形状比较简单及可辨认，容易进行界定。</p>
	      <h5>答案 B：</h5>
	      <img width="75" height="60" src="img/figur02.png">
	      <p>该形状是第一张简单图片及答案 C 中比较狂野的图片两者的折中。该形状更为复杂且引人注目，但同时又有所保留。因此左右脑平衡的人更多的会去选择此答案。</p>
	      <h5>答案 C:</h5>
	      <img width="75" height="60" src="img/figur03.png">
	      <p>若您选择了该图片，说明您的右脑更具主导性。该图片显得不完整，没有形状或方向，有发展的可能。</p>
	    </div>
	  </div>

	  <div class="explain q4">
	    <h3>问题 4： </h3><h5>与（put content after "to" here）相似</h5>

	    <div class="text">
	      <h5>答案 A：</h5>
	      <img width="75" height="60" src="img/passen01.png">
	      <p>这些图像大小一致。颜色几乎相同。如果你选择答案 A，说明您的右脑更具主导性。</p>
	      <h5>答案 B：</h5>
	      <img width="75" height="60" src="img/passen02.png">
	      <p>这里的图像大小一致，但是它们在颜色上差异很大。出现这种视觉因素的原因是您的左脑更具主导性。</p>
	      <h5>答案 C:</h5>
	      <img width="75" height="60" src="img/passen03.png">
	      <p>原始图片在这里被分成了几块。若您选择了此答案，说明您的右脑更具主导性。</p>
	    </div>

	  </div>

	  <div class="explain q5">
	    <h3>问题 5： </h3><h5>友情</h5>

	    <div class="text">
	      <h5>答案 A：</h5>
	      <img width="75" height="60" src="img/freundschaft01.png">
	      <p>该图中圆圈成松散分组，但又不是完全的无结构排列。若您选择了此答案，说明您的左右脑优势相同。</p>
	      <h5>答案 B：</h5>
	      <img width="75" height="60" src="img/freundschaft02.png">
	      <p>该图中圆圈的排列是预期的典型朋友圈排列。该视觉因素产生的原因是您的左脑更具主导性。</p>
	      <h5>答案 C:</h5>
	      <img width="75" height="60" src="img/freundschaft03.png">
	      <p>在此图像中，圆圈彼此之间的距离相等。右脑占主导性的人会更倾向于选择答案 C。</p>
	    </div>
	  </div>

	  <div class="explain q6">
	    <h3>问题 6、7 及 8：</h3>

	    <div class="text">
	      <p>若您处于右脑模式，您将会使用您的左手、左腿或左眼。</p>
	      <p>若您处于左脑模式，您将会使用您的右手、右腿或右眼。在这种情况下，身体的右半边被左脑控制，反之亦然。</p>
	    </div>
	  </div>

	  <p class="button weiter">下一个</p>
	  <br><br>

	</div>

	<div class="danke test page">
	  <h2> 感谢您的<br/> 参与。<br/> 我们欢迎您的反馈。</h2>
	  <a href="#" class="button weiter" id="next_sommersommer_exit">下一个</a>
	  <br><br>
	</div>


      </div>

    </div>

</div>

<div class="add4">
	<div class="add41">
	  <h2>左右脑使用报告</h2>
	  <div class="add2">测试完成</div>
	  <p class="button" onclick="guanzhua()">立即查看结果</p>
	  <p class="add3"><input type="checkbox" id='guangzhu' checked="checked"/>关注西山居游戏 更多精彩</p>
	</div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/brain.js?t=20140411m1626"></script>
<script>
$(function(){
	var web_left_val = args["l"];
	var web_right_val = args["r"];
	var res="";
	if(typeof web_left_val != 'undefined'){
				$.ajax({
                url: 'http://app.jx3.xoyo.com/app/api/weibo/follow/xsjgame/',
                dataType: 'jsonp',
			    type:'GET',
			    data: {
                   uids: "2074833864"
				}
					
				});
		$('#result').show().siblings("div").hide();
		$("#share_re").empty().html("分享结果");
		points_left = web_left_val;
		points_right = web_right_val;
		getresult();
		if(parseInt(web_left_val)>parseInt(web_right_val)){
			var res="左脑占主导型";
		}else if(parseInt(web_left_val)<parseInt(web_right_val)){
			var res="右脑占主导型";
		}else{
			var res="均衡型";
		}
		
		$("#share_re").click(function(){
		window.location.href="http://service.weibo.com/share/share.php?source=bookmark&title=%23左右脑PK%23 我的左脑是"+prozent_links+"%25，我的右脑是"+prozent_rechts+"%25，属于"+res+"。快来看看你是左脑还是右脑占主导吧!!：http://www.xishanju.com/zt/brain/brian201403/index.html&pic=http://www.xishanju.com/zt/brain/brian201403/img/brain.jpg";
		})
    }
	
});	

        function getQueryStringArgs(){
        
            //get query string without the initial ?
            var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
            
                //object to hold data
                args = {},
            
                //get individual items
                items = qs.length ? qs.split("&") : [],
                item = null,
                name = null,
                value = null,
                
                //used in for loop
                i = 0,
                len = items.length;
            
            //assign each item onto the args object
            for (i=0; i < len; i++){
                item = items[i].split("=");
                name = decodeURIComponent(item[0]);
                value = decodeURIComponent(item[1]);
                
                if (name.length){
                    args[name] = value;
                }
            }
            
            return args;
        }

        //assume query string of ?q=javascript&num=10
        
        var args = getQueryStringArgs();


function guanzhua(){


    if($("#guangzhu").attr("checked")){
	
	// 设置微博回调地址
	$.ajax({
            url: 'http://app.jx3.xoyo.com/app/api/weibo/jump/xsjgame/?url=' + encodeURIComponent("http://www.xishanju.com/zt/brain/brian201403/index.html?l="+points_left+"&r="+points_right),
            dataType: 'jsonp',
			type:'GET',
			success: function(){
			    $.ajax({
                url: 'http://app.jx3.xoyo.com/app/api/weibo/follow/xsjgame/',
                dataType: 'jsonp',
			    type:'GET',
			    data: {
                   uids: "2074833864"
                },
                success: function($data){
				    if($data.status > 0 ){
			          
				    }else if($data.status == -10 ){
					   window.location.href=$data.tips				    
					}
				   
				}
					
				});
					
			
			}
	});
	
    }else{
    }	
}
</script>

</body>
</html>

min.css

article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block }
audio, canvas, video { display: inline-block; *display:inline;
*zoom:1
}
audio:not([controls]) { display: none }
[hidden] { display: none }
html { font-size: 100%; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100% }
html, button, input, select, textarea { font-family: sans-serif; color: #222 }
body { margin: 0; font-size: 1em; line-height: 1.4;background:url(../img/1.jpg) no-repeat center top #c9f8fe;font-family: "微软雅黑";}
::-moz-selection {
background:#FECC00;
color:#9E9E9E;
text-shadow:none
}
::selection { background: #FECC00; color: #9E9E9E; text-shadow: none }
a { color: #00e }
a:visited { color: #551a8b }
a:hover { color: #06e }
a:focus { outline: thin dotted }
a:hover, a:active { outline: 0 }
abbr[title] { border-bottom: 1px dotted }
b, strong { font-weight: bold }
blockquote { margin: 1em 40px }
dfn { font-style: italic }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0 }
ins { background: #ff9; color: #000; text-decoration: none }
mark { background: #ff0; color: #000; font-style: italic; font-weight: bold }
pre, code, kbd, samp { font-family: monospace, serif; _font-family: 'courier new', monospace; font-size: 1em }
pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word }
q { quotes: none }
q:before, q:after { content: ""; content: none }
small { font-size: 85% }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline }
sup { top: -0.5em }
sub { bottom: -0.25em }
ul, ol { margin: 1em 0; padding: 0 0 0 40px }
dd { margin: 0 0 0 40px }
nav ul, nav ol { list-style: none; list-style-image: none; margin: 0; padding: 0 }
img { border: 0; -ms-interpolation-mode: bicubic; vertical-align: middle }
svg:not(:root) { overflow: hidden }
figure { margin: 0 }
form { margin: 0 }
fieldset { border: 0; margin: 0; padding: 0 }
label { cursor: pointer }
legend { border: 0; *margin-left:-7px;
padding: 0; white-space: normal }
button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align:middle
}
button, input { line-height: normal }
button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; *overflow:visible
}
button[disabled], input[disabled] { cursor: default }
input[type="checkbox"], input[type="radio"] { box-sizing: border-box; padding: 0; *width:13px;
*height:13px
}
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box }
input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {
-webkit-appearance:none
}
button::-moz-focus-inner, input::-moz-focus-inner {
border:0;
padding:0
}
textarea { overflow: auto; vertical-align: top; resize: vertical }
input:valid, textarea:valid {
}
input:invalid, textarea:invalid {
background-color:#f0dddd
}
table { border-collapse: collapse; border-spacing: 0 }
td { vertical-align: top }
.chromeframe { margin: .2em 0; background: #ccc; color: black; padding: .2em 0 }
div.taenzerin-copyright p { font-size: 12px }

@media only screen and (min-width:35em) {
}
.ir { display: block; border: 0; text-indent: -999em; overflow: hidden; background-color: transparent; background-repeat: no-repeat; text-align: left; direction: ltr; *line-height:0
}
.ir br { display: none }
.hidden { display: none!important; visibility: hidden }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px }
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto }
.invisible { visibility: hidden }
.clearfix:before, .clearfix:after { content: ""; display: table }
.clearfix:after { clear: both }
.clearfix { *zoom:1
}

@media print {
* { background: transparent!important; color: black!important; box-shadow: none!important; text-shadow: none!important; filter: none!important; -ms-filter: none!important }
a, a:visited { text-decoration: underline }
a[href]:after { content: "(" attr(href) ")" }
abbr[title]:after { content: "(" attr(title) ")" }
.ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: "" }
pre, blockquote { border: 1px solid #999; page-break-inside: avoid }
thead { display: table-header-group }
tr, img { page-break-inside: avoid }
img { max-width: 100%!important }
@page { margin: .5cm }
p, h2, h3 { orphans: 3; widows: 3 }
h2, h3 { page-break-after: avoid }
}
* { margin: 0; padding: 0; border: none }
body, html { height: auto; min-height: 100%; color: #9E9E9E }
body { overflow-x: hidden }
#wrapper { display:inline-block; *display:inline; *zoom:1; height: 530px; position: relative; margin:0 auto 50px; text-align: center;}
.tablet #wrapper { border: none }
#logo { width: 400px; height: 44px; background: url(../img/sommer_logo.jpg) 0 0 no-repeat; display: block; margin: auto; margin-top: -57px; position: absolute; left: 50%; margin-left: -200px }
h1, h2, h3, h4, h5 { font-weight: normal; font-size: 30px; margin-top: 30px; margin-bottom: 20px; z-index: 100; position: relative }
h4 { font-size: 19px; margin-top: 50px }
.explain h5, .explain h4, .explain h3 { margin-top: 0 }
h4, h5 { color: #FECC00; font-size: 18px; margin-top: -5px }
.brain {display:block;margin:0 auto 15px;}
a.languagelink, a.languagelink:link, a.languagelink:visited, a.languagelink:hover { color: #9E9E9E }
a.languagelink.active { color: #fecc00 }
a.legallink { color: #9E9E9E; position: absolute; right: 10px; top: 0 }
a.call.button { display: none; color: #9E9E9E; width: 600px; height: 60px; text-align: center; font-size: 20px; line-height: 60px; background: #FECC00; color: #fff; position: absolute; top: 520px; left: 50%; margin-left: -300px; text-transform: none; text-decoration: none }
a.call.button:hover { background: #acacac }
a.study.button { display: none; width: 840px; height: 68px; line-height: 68px; position: absolute; top: 520px; left: 50%; margin-left: -480px; border: 1px solid #CACACA; color: #CACACA; padding-left: 120px; text-transform: none; background: url(../img/study_button.png) 0 0 no-repeat }
a.study.button:hover { background: url(../img/study_button.png) 0 0 no-repeat }
.farben .answer, .vorgabe, a.button { width: 200px; height: 45px; border: 1px solid #abb6b7; line-height: 45px; font-weight: bold; color: #FECC00; font-size: 20px; text-transform: uppercase; margin: auto; text-decoration: none; display: block; cursor: pointer }


.test, .result { height: 500px; width: 960px; position: relative; display: none; text-align: center; }
.test.explaination { height: auto }
.answer { display: inline-block; float: left; cursor: pointer }
.answer.text { font-size: 23px;border:1px solid #aaa;padding:6px 50px;border-radius: 5px;}
.answer.text.right { float: right }
img.answer { float: none; display: block; margin: auto }
.answers { width: 520px; margin: auto }
.taenzerinimg { width: 250px; height: auto }
.taenzerinimg_wrap { padding-top: 15px; width: 280px; height: 348px; margin: auto;}
.taenzerin .answer.right { float: right }
.farben .answers { width: 360px; margin: auto;}
.answers_images { width: 535px; margin: auto; margin-top: 50px }
.answers_images img { }
img.figur03, img.passen03, img.freundschaft03 { float: right!important }
img.figur02, img.passen02, img.freundschaft02 { margin-left: 47px!important }
.test img.passen00 { float: none!important; border: none; display:block;margin:60px auto 30px;}
.test.figuren h1, .test.freundschaft h2, .test.kopf h2, .test.arme h2, .test.beine h2, .test.auge h2 { margin-top: 115px }
.test.kopf h4, .test.arme h4, .test.beine h4, .test.auge h4 { margin-top: -20px; margin-bottom: 100px }
.taenzerin .answers { margin-top: -110px }
.counter { position: absolute; bottom: 70px; left: 50%; margin-left: -142px; width: 284px; font-weight: bold }
.counter .bar { width: 200px; height: 15px; margin: auto; margin-bottom: 5px; position: relative }
.counter .bar .inner { background:url(../img/dot.png) repeat-x; width: 200px; height: 15px; position: absolute }
.farben .answer { float: left; display: none; width: 170px; height: 45px; line-height: 45px; font-size: 30px; margin-top: 60px;font-family:"微软雅黑";font-weight:normal;border-radius: 5px;background:#fff;}
.answer.left { margin-right: 10px }
.answer.text.left { margin-right: 30px }
.answers.text { text-align: center; width: 300px; font-size: 20px }
.en .answers.text { width: 102px }
.farben .vorgabe { text-transform: uppercase; font-size: 45px; border: none }
img.figurimg, img.passenimg, img.freundschaftimg {float: left }
#result .brain { position: relative; z-index: 50 }
#result h2 { height: 87px }
.braincon { position: relative; height: 300px; width: 400px; margin: auto }
.leftresult { height: 0; position: absolute; background: #444; width: 140px; left: 60px; bottom: -10px; background: url(../img/result_left_bar_xl.png) 0 25px no-repeat }
.rightresult { height: 0; position: absolute; background: #444; width: 140px; right: 62px; bottom: -10px; background: url(../img/result_right_bar_xl.png) 0 15px no-repeat }
.resulttext { position: absolute; z-index: 100; font-weight: bold; top:-6px; text-shadow: 0 0 5px #fff; line-height:32px; font-size:30px; display: none;color:#00a8ff;background:#fff;}
.rightresult_text { right: 56px }
.leftresult_text { left: 62px }
.keyword { text-align: center; position: absolute; z-index: 220; width: 250px; text-align: center; height: 50px; line-height: 50px; opacity: 0; filter: alpha(opacity=0); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; color: #67d4f1; }
.explaination { clear: both; position: absolute; border: 1px solid #CACACA }
.explain { margin: auto; margin-bottom: 40px; height: auto; width: 650px }
.explain .text { padding-left: 20px; padding-right: 20px; text-align: left }
.explain.q1 { height: 280px }
.explain.q4 { margin-bottom: 60px }
.explain.q1 img { width: 150px; height: auto }
.explain.q2 img { margin-top: -40px }
.explain p { width: 400px }
.explain.q6 p { margin-left: 0!important; width: 640px!important }
.explain h3 { padding-left: 20px }
.explain h3 { margin-right: 7px }
.explain h3, .explain h5 { float: left; text-transform: uppercase; font-size: 21px }
.explain .text { clear: both }
.explain img { float: left; clear: left }
.explain .image01 { margin-top: -25px }
.explain .image03, .explain .image02 { margin-top: -10px }
.text h5 { float: none; margin-bottom: 0; margin-top: 20px; font-size: 15px; margin-left: 230px; clear: left }
.explaination { display: none }
.explain.q6 { margin-bottom: 50px }
.explain.q3 img, .explain.q4 img, .explain.q5 img { width: 130px; height: auto }
.explain img { position: absolute }
.explain .text p { margin-left: 230px }
.lang { position: absolute; width: 30px; bottom: 20px; left: 0; display: none }
.lang a { display: block; height: 24px }
.showresult #intro { display: none }
.showresult .test.result .button.why { display: none }
.button.why { position: absolute; left: 50%; margin-left: -100px; bottom: -75px; z-index: 100 }
ul.share { display: none; position: absolute; bottom: 2px; right: 8px }
ul.share span { position: absolute; right: 8px; bottom: 40px }
ul.share a { display: block; width: 30px; height: 30px }
.share li { list-style: none; float: left; display: inline; width: 30px; height: 30px; margin-right: 10px; background: #FECC00 }
.share li:hover { background: #acacac }
li.mail a { background: url(../img/icon_mail.png) }
li.facebook a { background: url(../img/icon_fb.png) }
li.twitter a { background: url(../img/icon_twitter.png) }
li.googleplus a { background: url(../img/icon_g.png); .showresult .share {
display:none
}
.showresult a.call.button { }
.test.auge .answers { }
.explain h5 { margin-top: 30px }
#nav_lang { width: 55px; position: absolute; right: -2px; top: -83px }
.lt-ie9 #nav_lang { top: -48px }
#nav_lang a { width: 20px; overflow: hidden; margin-left: 4px }
#nav_lang a.lang_en { margin-left: -4px }
div.facebook { position: absolute; top: -46px }
#adLeft { position: absolute; left: 50%; margin-left: -660px; top: 30px }
#adRight { position: absolute; left: 50%; margin-left: 500px; top: 30px }
.fb-share-button iframe { display: none }

@media only screen and (-webkit-min-device-pixel-ratio:2) {
#logo { background: url(../img/sommersommer_logo@2x.png) no-repeat; -webkit-background-size: 235px 30px }
}

modernizr.min.js

/* Modernizr 2.5.3 (Custom Build) | MIT & BSD
 * Build: http://www.modernizr.com/download/#-fontface-backgroundsize-borderimage-borderradius-boxshadow-flexbox-hsla-multiplebgs-opacity-rgba-textshadow-cssanimations-csscolumns-generatedcontent-cssgradients-cssreflections-csstransforms-csstransforms3d-csstransitions-applicationcache-canvas-canvastext-draganddrop-hashchange-history-audio-video-indexeddb-input-inputtypes-localstorage-postmessage-sessionstorage-websockets-websqldatabase-webworkers-geolocation-inlinesvg-smil-svg-svgclippaths-touch-webgl-shiv-cssclasses-teststyles-testprop-testallprops-hasevent-prefixes-domprefixes-load
 */
;window.Modernizr=function(a,b,c){function C(a){j.cssText=a}function D(a,b){return C(n.join(a+";")+(b||""))}function E(a,b){return typeof a===b}function F(a,b){return!!~(""+a).indexOf(b)}function G(a,b){for(var d in a)if(j[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function H(a,b,d){for(var e in a){var f=b[a[e]];if(f!==c)return d===!1?a[e]:E(f,"function")?f.bind(d||b):f}return!1}function I(a,b,c){var d=a.charAt(0).toUpperCase()+a.substr(1),e=(a+" "+p.join(d+" ")+d).split(" ");return E(b,"string")||E(b,"undefined")?G(e,b):(e=(a+" "+q.join(d+" ")+d).split(" "),H(e,b,c))}function K(){e.input=function(c){for(var d=0,e=c.length;d<e;d++)u[c[d]]=c[d]in k;return u.list&&(u.list=!!b.createElement("datalist")&&!!a.HTMLDataListElement),u}("autocomplete autofocus list placeholder max min multiple pattern required step".split(" ")),e.inputtypes=function(a){for(var d=0,e,f,h,i=a.length;d<i;d++)k.setAttribute("type",f=a[d]),e=k.type!=="text",e&&(k.value=l,k.style.cssText="position:absolute;visibility:hidden;",/^range$/.test(f)&&k.style.WebkitAppearance!==c?(g.appendChild(k),h=b.defaultView,e=h.getComputedStyle&&h.getComputedStyle(k,null).WebkitAppearance!=="textfield"&&k.offsetHeight!==0,g.removeChild(k)):/^(search|tel)$/.test(f)||(/^(url|email)$/.test(f)?e=k.checkValidity&&k.checkValidity()===!1:/^color$/.test(f)?(g.appendChild(k),g.offsetWidth,e=k.value!=l,g.removeChild(k)):e=k.value!=l)),t[a[d]]=!!e;return t}("search tel url email datetime date month week time datetime-local number range color".split(" "))}var d="2.5.3",e={},f=!0,g=b.documentElement,h="modernizr",i=b.createElement(h),j=i.style,k=b.createElement("input"),l=":)",m={}.toString,n=" -webkit- -moz- -o- -ms- ".split(" "),o="Webkit Moz O ms",p=o.split(" "),q=o.toLowerCase().split(" "),r={svg:"http://www.w3.org/2000/svg"},s={},t={},u={},v=[],w=v.slice,x,y=function(a,c,d,e){var f,i,j,k=b.createElement("div"),l=b.body,m=l?l:b.createElement("body");if(parseInt(d,10))while(d--)j=b.createElement("div"),j.id=e?e[d]:h+(d+1),k.appendChild(j);return f=["&#173;","<style>",a,"</style>"].join(""),k.id=h,m.innerHTML+=f,m.appendChild(k),l||(m.style.background="",g.appendChild(m)),i=c(k,a),l?k.parentNode.removeChild(k):m.parentNode.removeChild(m),!!i},z=function(){function d(d,e){e=e||b.createElement(a[d]||"div"),d="on"+d;var f=d in e;return f||(e.setAttribute||(e=b.createElement("div")),e.setAttribute&&e.removeAttribute&&(e.setAttribute(d,""),f=E(e[d],"function"),E(e[d],"undefined")||(e[d]=c),e.removeAttribute(d))),e=null,f}var a={select:"input",change:"input",submit:"form",reset:"form",error:"img",load:"img",abort:"img"};return d}(),A={}.hasOwnProperty,B;!E(A,"undefined")&&!E(A.call,"undefined")?B=function(a,b){return A.call(a,b)}:B=function(a,b){return b in a&&E(a.constructor.prototype[b],"undefined")},Function.prototype.bind||(Function.prototype.bind=function(b){var c=this;if(typeof c!="function")throw new TypeError;var d=w.call(arguments,1),e=function(){if(this instanceof e){var a=function(){};a.prototype=c.prototype;var f=new a,g=c.apply(f,d.concat(w.call(arguments)));return Object(g)===g?g:f}return c.apply(b,d.concat(w.call(arguments)))};return e});var J=function(c,d){var f=c.join(""),g=d.length;y(f,function(c,d){var f=b.styleSheets[b.styleSheets.length-1],h=f?f.cssRules&&f.cssRules[0]?f.cssRules[0].cssText:f.cssText||"":"",i=c.childNodes,j={};while(g--)j[i[g].id]=i[g];e.touch="ontouchstart"in a||a.DocumentTouch&&b instanceof DocumentTouch||(j.touch&&j.touch.offsetTop)===9,e.csstransforms3d=(j.csstransforms3d&&j.csstransforms3d.offsetLeft)===9&&j.csstransforms3d.offsetHeight===3,e.generatedcontent=(j.generatedcontent&&j.generatedcontent.offsetHeight)>=1,e.fontface=/src/i.test(h)&&h.indexOf(d.split(" ")[0])===0},g,d)}(['@font-face {font-family:"font";src:url("https://")}',["@media (",n.join("touch-enabled),("),h,")","{#touch{top:9px;position:absolute}}"].join(""),["@media (",n.join("transform-3d),("),h,")","{#csstransforms3d{left:9px;position:absolute;height:3px;}}"].join(""),['#generatedcontent:after{content:"',l,'";visibility:hidden}'].join("")],["fontface","touch","csstransforms3d","generatedcontent"]);s.flexbox=function(){return I("flexOrder")},s.canvas=function(){var a=b.createElement("canvas");return!!a.getContext&&!!a.getContext("2d")},s.canvastext=function(){return!!e.canvas&&!!E(b.createElement("canvas").getContext("2d").fillText,"function")},s.webgl=function(){try{var d=b.createElement("canvas"),e;e=!(!a.WebGLRenderingContext||!d.getContext("experimental-webgl")&&!d.getContext("webgl")),d=c}catch(f){e=!1}return e},s.touch=function(){return e.touch},s.geolocation=function(){return!!navigator.geolocation},s.postmessage=function(){return!!a.postMessage},s.websqldatabase=function(){return!!a.openDatabase},s.indexedDB=function(){return!!I("indexedDB",a)},s.hashchange=function(){return z("hashchange",a)&&(b.documentMode===c||b.documentMode>7)},s.history=function(){return!!a.history&&!!history.pushState},s.draganddrop=function(){var a=b.createElement("div");return"draggable"in a||"ondragstart"in a&&"ondrop"in a},s.websockets=function(){for(var b=-1,c=p.length;++b<c;)if(a[p[b]+"WebSocket"])return!0;return"WebSocket"in a},s.rgba=function(){return C("background-color:rgba(150,255,150,.5)"),F(j.backgroundColor,"rgba")},s.hsla=function(){return C("background-color:hsla(120,40%,100%,.5)"),F(j.backgroundColor,"rgba")||F(j.backgroundColor,"hsla")},s.multiplebgs=function(){return C("background:url(https://),url(https://),red url(https://)"),/(url\s*\(.*?){3}/.test(j.background)},s.backgroundsize=function(){return I("backgroundSize")},s.borderimage=function(){return I("borderImage")},s.borderradius=function(){return I("borderRadius")},s.boxshadow=function(){return I("boxShadow")},s.textshadow=function(){return b.createElement("div").style.textShadow===""},s.opacity=function(){return D("opacity:.55"),/^0.55$/.test(j.opacity)},s.cssanimations=function(){return I("animationName")},s.csscolumns=function(){return I("columnCount")},s.cssgradients=function(){var a="background-image:",b="gradient(linear,left top,right bottom,from(#9f9),to(white));",c="linear-gradient(left top,#9f9, white);";return C((a+"-webkit- ".split(" ").join(b+a)+n.join(c+a)).slice(0,-a.length)),F(j.backgroundImage,"gradient")},s.cssreflections=function(){return I("boxReflect")},s.csstransforms=function(){return!!I("transform")},s.csstransforms3d=function(){var a=!!I("perspective");return a&&"webkitPerspective"in g.style&&(a=e.csstransforms3d),a},s.csstransitions=function(){return I("transition")},s.fontface=function(){return e.fontface},s.generatedcontent=function(){return e.generatedcontent},s.video=function(){var a=b.createElement("video"),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('video/ogg; codecs="theora"').replace(/^no$/,""),c.h264=a.canPlayType('video/mp4; codecs="avc1.42E01E"').replace(/^no$/,""),c.webm=a.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/^no$/,"")}catch(d){}return c},s.audio=function(){var a=b.createElement("audio"),c=!1;try{if(c=!!a.canPlayType)c=new Boolean(c),c.ogg=a.canPlayType('audio/ogg; codecs="vorbis"').replace(/^no$/,""),c.mp3=a.canPlayType("audio/mpeg;").replace(/^no$/,""),c.wav=a.canPlayType('audio/wav; codecs="1"').replace(/^no$/,""),c.m4a=(a.canPlayType("audio/x-m4a;")||a.canPlayType("audio/aac;")).replace(/^no$/,"")}catch(d){}return c},s.localstorage=function(){try{return localStorage.setItem(h,h),localStorage.removeItem(h),!0}catch(a){return!1}},s.sessionstorage=function(){try{return sessionStorage.setItem(h,h),sessionStorage.removeItem(h),!0}catch(a){return!1}},s.webworkers=function(){return!!a.Worker},s.applicationcache=function(){return!!a.applicationCache},s.svg=function(){return!!b.createElementNS&&!!b.createElementNS(r.svg,"svg").createSVGRect},s.inlinesvg=function(){var a=b.createElement("div");return a.innerHTML="<svg/>",(a.firstChild&&a.firstChild.namespaceURI)==r.svg},s.smil=function(){return!!b.createElementNS&&/SVGAnimate/.test(m.call(b.createElementNS(r.svg,"animate")))},s.svgclippaths=function(){return!!b.createElementNS&&/SVGClipPath/.test(m.call(b.createElementNS(r.svg,"clipPath")))};for(var L in s)B(s,L)&&(x=L.toLowerCase(),e[x]=s[L](),v.push((e[x]?"":"no-")+x));return e.input||K(),C(""),i=k=null,function(a,b){function g(a,b){var c=a.createElement("p"),d=a.getElementsByTagName("head")[0]||a.documentElement;return c.innerHTML="x<style>"+b+"</style>",d.insertBefore(c.lastChild,d.firstChild)}function h(){var a=k.elements;return typeof a=="string"?a.split(" "):a}function i(a){var b={},c=a.createElement,e=a.createDocumentFragment,f=e();a.createElement=function(a){var e=(b[a]||(b[a]=c(a))).cloneNode();return k.shivMethods&&e.canHaveChildren&&!d.test(a)?f.appendChild(e):e},a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+h().join().replace(/\w+/g,function(a){return b[a]=c(a),f.createElement(a),'c("'+a+'")'})+");return n}")(k,f)}function j(a){var b;return a.documentShived?a:(k.shivCSS&&!e&&(b=!!g(a,"article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block}audio{display:none}canvas,video{display:inline-block;*display:inline;*zoom:1}[hidden]{display:none}audio[controls]{display:inline-block;*display:inline;*zoom:1}mark{background:#FF0;color:#000}")),f||(b=!i(a)),b&&(a.documentShived=b),a)}var c=a.html5||{},d=/^<|^(?:button|form|map|select|textarea)$/i,e,f;(function(){var a=b.createElement("a");a.innerHTML="<xyz></xyz>",e="hidden"in a,f=a.childNodes.length==1||function(){try{b.createElement("a")}catch(a){return!0}var c=b.createDocumentFragment();return typeof c.cloneNode=="undefined"||typeof c.createDocumentFragment=="undefined"||typeof c.createElement=="undefined"}()})();var k={elements:c.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",shivCSS:c.shivCSS!==!1,shivMethods:c.shivMethods!==!1,type:"default",shivDocument:j};a.html5=k,j(b)}(this,b),e._version=d,e._prefixes=n,e._domPrefixes=q,e._cssomPrefixes=p,e.hasEvent=z,e.testProp=function(a){return G([a])},e.testAllProps=I,e.testStyles=y,g.className=g.className.replace(/(^|\s)no-js(\s|$)/,"$1$2")+(f?" js "+v.join(" "):""),e}(this,this.document),function(a,b,c){function d(a){return o.call(a)=="[object Function]"}function e(a){return typeof a=="string"}function f(){}function g(a){return!a||a=="loaded"||a=="complete"||a=="uninitialized"}function h(){var a=p.shift();q=1,a?a.t?m(function(){(a.t=="c"?B.injectCss:B.injectJs)(a.s,0,a.a,a.x,a.e,1)},0):(a(),h()):q=0}function i(a,c,d,e,f,i,j){function k(b){if(!o&&g(l.readyState)&&(u.r=o=1,!q&&h(),l.onload=l.onreadystatechange=null,b)){a!="img"&&m(function(){t.removeChild(l)},50);for(var d in y[c])y[c].hasOwnProperty(d)&&y[c][d].onload()}}var j=j||B.errorTimeout,l={},o=0,r=0,u={t:d,s:c,e:f,a:i,x:j};y[c]===1&&(r=1,y[c]=[],l=b.createElement(a)),a=="object"?l.data=c:(l.src=c,l.type=a),l.width=l.height="0",l.onerror=l.onload=l.onreadystatechange=function(){k.call(this,r)},p.splice(e,0,u),a!="img"&&(r||y[c]===2?(t.insertBefore(l,s?null:n),m(k,j)):y[c].push(l))}function j(a,b,c,d,f){return q=0,b=b||"j",e(a)?i(b=="c"?v:u,a,b,this.i++,c,d,f):(p.splice(this.i++,0,a),p.length==1&&h()),this}function k(){var a=B;return a.loader={load:j,i:0},a}var l=b.documentElement,m=a.setTimeout,n=b.getElementsByTagName("script")[0],o={}.toString,p=[],q=0,r="MozAppearance"in l.style,s=r&&!!b.createRange().compareNode,t=s?l:n.parentNode,l=a.opera&&o.call(a.opera)=="[object Opera]",l=!!b.attachEvent&&!l,u=r?"object":l?"script":"img",v=l?"script":u,w=Array.isArray||function(a){return o.call(a)=="[object Array]"},x=[],y={},z={timeout:function(a,b){return b.length&&(a.timeout=b[0]),a}},A,B;B=function(a){function b(a){var a=a.split("!"),b=x.length,c=a.pop(),d=a.length,c={url:c,origUrl:c,prefixes:a},e,f,g;for(f=0;f<d;f++)g=a[f].split("="),(e=z[g.shift()])&&(c=e(c,g));for(f=0;f<b;f++)c=x[f](c);return c}function g(a,e,f,g,i){var j=b(a),l=j.autoCallback;j.url.split(".").pop().split("?").shift(),j.bypass||(e&&(e=d(e)?e:e[a]||e[g]||e[a.split("/").pop().split("?")[0]]||h),j.instead?j.instead(a,e,f,g,i):(y[j.url]?j.noexec=!0:y[j.url]=1,f.load(j.url,j.forceCSS||!j.forceJS&&"css"==j.url.split(".").pop().split("?").shift()?"c":c,j.noexec,j.attrs,j.timeout),(d(e)||d(l))&&f.load(function(){k(),e&&e(j.origUrl,i,g),l&&l(j.origUrl,i,g),y[j.url]=2})))}function i(a,b){function c(a,c){if(a){if(e(a))c||(j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}),g(a,j,b,0,h);else if(Object(a)===a)for(n in m=function(){var b=0,c;for(c in a)a.hasOwnProperty(c)&&b++;return b}(),a)a.hasOwnProperty(n)&&(!c&&!--m&&(d(j)?j=function(){var a=[].slice.call(arguments);k.apply(this,a),l()}:j[n]=function(a){return function(){var b=[].slice.call(arguments);a&&a.apply(this,b),l()}}(k[n])),g(a[n],j,b,n,h))}else!c&&l()}var h=!!a.test,i=a.load||a.both,j=a.callback||f,k=j,l=a.complete||f,m,n;c(h?a.yep:a.nope,!!i),i&&c(i)}var j,l,m=this.yepnope.loader;if(e(a))g(a,0,m,0);else if(w(a))for(j=0;j<a.length;j++)l=a[j],e(l)?g(l,0,m,0):w(l)?B(l):Object(l)===l&&i(l,m);else Object(a)===a&&i(a,m)},B.addPrefix=function(a,b){z[a]=b},B.addFilter=function(a){x.push(a)},B.errorTimeout=1e4,b.readyState==null&&b.addEventListener&&(b.readyState="loading",b.addEventListener("DOMContentLoaded",A=function(){b.removeEventListener("DOMContentLoaded",A,0),b.readyState="complete"},0)),a.yepnope=k(),a.yepnope.executeStack=h,a.yepnope.injectJs=function(a,c,d,e,i,j){var k=b.createElement("script"),l,o,e=e||B.errorTimeout;k.src=a;for(o in d)k.setAttribute(o,d[o]);c=j?h:c||f,k.onreadystatechange=k.onload=function(){!l&&g(k.readyState)&&(l=1,c(),k.onload=k.onreadystatechange=null)},m(function(){l||(l=1,c(1))},e),i?k.onload():n.parentNode.insertBefore(k,n)},a.yepnope.injectCss=function(a,c,d,e,g,i){var e=b.createElement("link"),j,c=i?h:c||f;e.href=a,e.rel="stylesheet",e.type="text/css";for(j in d)e.setAttribute(j,d[j]);g||(n.parentNode.insertBefore(e,n),m(c,0))}}(this,document),Modernizr.load=function(){yepnope.apply(window,[].slice.call(arguments,0))};