单一顺序答题效果

前端入坑纪 41

最近做了个单一的答题手机页，分享走一个！

OK，first things first！ github项目地址

真实项目截图

HTML 结构

    <div class="mainWrp">
        <div class="tiBd">
            ![](wrap/img/2-1.png)
            <div class="mainBos">
                <h3>第<span id="tiNum">1</span>题</h3>
                <div class="tiWrp">
                    <p id="tiMu">目前你有好多的鸡和好多的蛋，这样子，那么你会先去吃哪个？</p>
                </div>
                <div class="ansWrp">
                    <ul id="tiAn">
                        <li>
                            <a href="javascript:;">
                                <p><span>A</span>.<strong>先吃鸡</strong></p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <p><span>B</span>.<strong>先吃蛋</strong></p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <p><span>C</span>.<strong>全吃</strong></p>
                            </a>
                        </li>
                        <li>
                            <a href="javascript:;">
                                <p><span>D</span>.<strong>先吃你妹啊</strong></p>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

div.tiBd里面包裹了图片2-1.png，撑开了它，然后里面的div.mainBos，也就是整个题目的html结构都是相对于div.tiBd，来绝对定位。之所以这么做，而不用背景，是为了不让2-1的大小比例变形，而是正常的展示。当然这样的前提是，题目不长，答案也不长。
答案的背景是会随着它的li大小变形的。

CSS 结构

        html,
        body {
            background-color: #9DD1FF;
            height: 100%;
        }
        
        .mainWrp {
            padding-top: 5%;
            height: 100%;
            box-sizing: border-box;
            background-image: url(wrap/img/2b.png);
            background-repeat: no-repeat;
            background-position: center 100%;
            background-size: 100% auto
        }
        
        .tiBd {
            margin: 2%;
            position: relative;
        }
        
        .ansWrp li {
            margin: 10px 0;
            line-height: 36px;
        }
        
        .ansWrp li a {
            padding: 6px;
            display: inline-block;
            color: #fff;
            width: 70%;
            background-image: url(wrap/img/2-2.png);
            background-repeat: no-repeat;
            background-position: center 100%;
            background-size: 100% 100%
        }
        
        .ansWrp li a:active {
            background-image: url(wrap/img/2-2-1.png);
        }
        
        .ansWrp li a p {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .ansWrp li a strong {
            margin-left: 5px;
        }
        
        .mainBos {
            width: 100%;
            position: absolute;
            left: 0;
            top: 0;
        }
        
        .mainBos h3 {
            line-height: 45px;
            text-align: center;
            font-size: 22px;
            color: #AD6303;
            background-image: url(wrap/img/2-1-1.png);
            background-repeat: no-repeat;
            background-position: 50% 50%;
            background-size: auto 100%
        }
        
        .tiWrp {
            line-height: 26px;
            font-size: 16px;
            margin: 20px 15%;
            width: 70%;
            font-weight: bold;
            color: #333;
        }
        
        .ansWrp {
            padding-top: 3%
        }
        
        .ansWrp li {
            color: #fff;
            font-size: 16px;
            text-align: center;
        }

这里我引用了外部的一个重置样式的rest.css，去github源文件可以查看到。一个小技巧： 当 html,body 都设置 height: 100%;那么div.mainWrp的 height: 100%时就可以和视窗一样高了。

JS 结构

//  获取要用到的元素
        var tiNum = document.getElementById('tiNum'),
            tiMu = document.getElementById('tiMu'),
            tiAn = document.getElementById('tiAn'),
            tiAnStrong = tiAn.getElementsByTagName('strong'),//  答案内容包裹的strong
            tiLiAs = tiAn.getElementsByTagName('li'),
            answers = [],//  设置空数组存放用户的答案
            indx = 0;//  答题过程的顺序数

//  初始化，第一题开始
        function inital() {
            indx = 1;
            tiMu.innerText = guessTs["t1"].title;
            for (var j = 0; j < 4; j++) {
                tiAnStrong[j].innerText = guessTs["t1"]["answer"][j];
            }
        }
        inital();

//  给用户点击答案时，执行的事件
        for (var i = 0; i < 4; i++) {
            ! function(i) {
                tiLiAs[i].onclick = function() {
                    var answer = this.getElementsByTagName('span')[0].innerText;//  获取点击时的答案（A?B?C?D）

                    //  还没到最后一题时的操作
                    if (indx < 15) { 
                        answers[indx - 1] = answer;//  数组从零开始计数
                        // console.log(answers);
                        indx++; //  每次点完加一
                        tiNum.innerText = indx;//  改变下一题的显示
                        tiMu.innerText = guessTs["t" + indx].title;//  改变下一题题目的内容

                        //  改变下一题答案的内容
                        for (var j = 0; j < 4; j++) {
                            tiAnStrong[j].innerText = guessTs["t" + indx]["answer"][j];
                        }
                    } else if (indx == 15) {
                        answers[indx - 1] = answer;
                        // 答完最后一道题目，输出答案，跳转结果                    
                        console.log(answers);
                        // location.href = ""
                    }
                }
            }(i)
        }

就是这样，答案可以直接前端判断对错，也可以后端来判断再输出答案。安全性而言，后端判断高！

好了，到此，本文告一段落！感谢您的阅读！祝您和您的家人身体健康，阖家幸福！