智商，自以爲是的人總是以此作爲自傲的本錢。
聽說你很聰明？來來來，是騾子是馬溜溜再說。小編前幾天在網絡上發現了一篇智商測試題目，遂動了動手將他做成了一個小玩具，僅供各位愛好vue、layui的同學娛樂。
如果你想要試一試在線版本，看這裏：
http://www.xunsu.online/qa/iq/exam/paper/iq60
開發技術分析：
前端：layui + vue + axios + font-awesome + webpack
後端：thinkphp6 + mariadb + linux + php7 + apache
界面如下：
想要在自己站上或公衆號使用的同學可以直接ifream方式使用。
iframe 源碼示例：
<html>
<head>
<title>智商測試</title>
<meta name=keywords content="智商測試.">
<meta name=description content="智商測試。">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta http-equiv='description' content='www.xunsu.online' />
<style>
body {
margin: 0;
}
#xsen {
width: 100%;
height: 100%;
border: none;
}
#vendor {
position: fixed;
bottom: 0;
right: 0;
width: 6.66rem;
}
</style>
</head>
<body>
<iframe src="http://www.xunsu.online/qa/iq/exam/paper/iq60" id="xsen">
</iframe>
<img src="#" id="vendor" alt="廣告位招商">
</body>
</html>
注意：
前車之鑑，本測試沒有開源，需要請鏈接使用。
原因是小編實在是沒時間給各路朋友調代碼，見諒。
智商測試 歡迎頁HTML源碼分析
頁頭，引入各前端開源框架和UI庫
<!DOCTYPE html>
<html lang='zh-cn'>
<head>
<title>國際標準智商測試題開始測試</title>
<!-- Chasing Dreams and Encouragement Network -->
<meta name=keywords content="勵志網, 尋溯勵志網, 夢想, 勵志, 激勵, 九型人格, 抑鬱症, 在線測試.">
<meta name=description
content="尋溯勵志網，以成爲優質勵志主題服務平臺爲目標，以治癒每一位暫處心靈低谷的朋友爲己任。勵志文章、勵志語錄，九型人格、抑鬱症、蓋洛普、霍蘭德（MBTI）免費在線測試。">
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv='description' content='www.xunsu.online' />
<meta name="baidu-site-verification" content="usAt5Y5BE2" />
<link rel="stylesheet" type="text/css" href="/lib/layui/css/layui.css">
<link rel="stylesheet" type="text/css" href="/d/iq-welcom-iq60.css">
<link rel="stylesheet" type="text/css" href="/d/comment.css">
<link rel="stylesheet" href="/lib/font-awesome/css/font-awesome.min.css">
<script src="/lib/vue/vue.min.js"></script>
</head>
body，歡迎頁展示主體內容
<body>
<div class="layui-container">
<div class="layui-row">
<blockquote class="layui-elem-quote layui-quote-nm logo-block">
<div class="logo-jxrg-item">
International standard IQ test
<hr class="layui-bg-gray">
國際標準智商測試題
</div>
</blockquote>
<div
class="layui-col-xs10 layui-col-sm8 layui-col-md6 layui-col-xs-offset1 layui-col-sm-offset2 layui-col-md-offset3">
<fieldset class="layui-elem-field">
<legend>簡介</legend>
<div class="layui-field-box content-jxrg">
智商，即智力的商數，是用來衡量一個人智力高低的標準。...<br />
<hr class="layui-bg-gray">
本系統共60題，完成測試大約需要45分鐘。<br />
<hr class="layui-bg-gray">
<strong>測試前言</strong><br />
得分140以上是天才！
</div>
</fieldset>
<table>
<tr>
<td class="layui-bg-red">￥89.99，限時免費！</td>
<td>   </td>
<td>已有 24 人蔘與測試！</td>
</tr>
</table>
<hr class="layui-bg-gray">
<div id="jxrg">
<a type="button" class="layui-btn layui-btn-normal layui-btn-fluid" href="/c/iq/iq60/index.html">開始測試</a>
</div>
<hr class="layui-bg-gray">
<fieldset class="layui-elem-field">
<legend>國際標準智商測試</legend>
<div class="layui-field-box align-center">
<img src="/qa/index/qrcode?target=/iq/iq60" />
<br />分享二維碼，讓朋友們一起來！
<a href="/qa" class="layui-badge layui-bg-blue">
<i class="fa fa-hand-pointer-o" aria-hidden="true"></i><span>更多...<span>
</a>
</div>
</fieldset>
<hr class="layui-bg-gray">
</div>
</div>
</div>
評論區，只支持微信，這裏是評論應用vue框架的組件入口
<div id="xs-comment">
<xs-comment-index></xs-comment-index>
</div>
footer，一些支持類庫，比如layui支持庫、axios支持庫、百度訪問統計等
<script src="/lib/layui/layui.js"></script>
<script src="/lib/axios/axios.min.js"></script>
<script src="/lib/visit/baidu.js"></script>
<script src="/d/iq-welcom-iq60.js"></script>
<script src="/d/comment.js"></script>