php和vue实现智商在线测试题

智商，自以为是的人总是以此作为自傲的本钱。

听说你很聪明？来来来，是骡子是马溜溜再说。小编前几天在网络上发现了一篇智商测试题目，遂动了动手将他做成了一个小玩具，仅供各位爱好vue、layui的同学娱乐。

如果你想要试一试在线版本，看这里：

https://www.yixzm.cn/iq/iq60.html

开发技术分析：

前端：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> &nbsp </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>

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/dreamstone_xiaoqw/article/details/106785395
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-06-12 12:10:07
阅读 ( 2091 )
分类：前端

php和vue实现智商在线测试题

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看