LImengbo
/
school-answer


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>无限潜能</title>
    <link rel="stylesheet" href="../css/question.css">
    <script src="../utils/size.js"></script>
</head>
<body>
    <div class="content">
    <div class="question-container">
        <img class="container-bg" src="../image/question/questionbg.jpg" alt="">
        <div class="title">
            <img src="../image/question/title.png" alt="title">
        </div>
        <div class="subject">
            <img class="inset" src="../image/question/inset.png" alt="inset">
            <img class="bottom" src="../image/question/bottom.png" alt="bottom">
            <div class="question-box"></div>
            <!--
            <div class="question" >
                <div class="audio">
                    <audio src="http://www.ytmp3.cn/down/44537.mp3" autoplay="autoplay" preload="auto">
                        您的浏览器不支持 audio 标签。
                    </audio>
                    <img class="audiobtn" src="../image/question/audiobtn.png" alt="audiobtn">
                    <span>甜甜圈从左数是第几个？</span>
                </div>
                <div class="question-photo"></div>
                <ul class="option">
                    <li class="select">第一个</li>
                    <li>第二个</li>
                    <li>第三个</li>
                </ul> 
                <div class="order">
                    <span>1</span><span>/5</span>    
                </div> 
            </div>
            -->
        </div>
    </div>
    <div class="popup">
        <div class="popup-content">
            <canvas id="myCanvas" width="661px" height="812px">
                您的浏览器不支持canvas标签。
            </canvas>
            <img class="bg" src="" alt=""  crossorigin="anonymous">
            <div class="baocun">
                <p>长按图片保存并分享朋友圈</p>
                <p>作为领奖凭证</p>
            </div>
            <a href="./awards.html" class="lingqu"></a>
            <!--
            <div class="lingqu">
                <img src="../image/question/lingqu.png" alt="">
            </div>
            -->
            <!--
            <img class="head" src="../image/question/头像.jpg" alt="">
            -->
        </div>
    </div>
    </div>
</body>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script> 
window.onload=function(){
    if(localStorage.getItem('userData') == 'undefined') {
        alert('请重新扫码登陆')
        window.location.href = '../index.html'
        return false;
    }
    var user = JSON.parse(localStorage.getItem('userData'));
    var uid = user.uid;
    var avatar = user.avatar ? user.avatar : '';
    var name = user.wechatName ? user.wechatName : '小朋友';
    // var uid = 56;
    //获取Canvas对象(画布)
    var canvas = document.getElementById("myCanvas");
    var data = {
        "activityId": "2",
        "answer": "",
        "questionId": "",
        "requestId": ""
    }
    var ind = 0;
    function recursion() {
        ajaxData("https://activity.lingjiao.cn/activity/activity/xx", uid, data, function(result){
            if(result.code != 200) {
                alert('题目已经答完了')
                return false;
            }
            console.log(result)
            var page = result.data.currentNum;
            var length = result.data.questionNum;
            if( page >= length && result.data.isEnd === 0) {
                console.log('奖品', result.data.prize)
                localStorage.setItem('prize', result.data.prize);
                $('.popup').show();
                //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
                if(canvas.getContext){  
                    //获取对应的CanvasRenderingContext2D对象(画笔)
                    var ctx = canvas.getContext("2d");
                    //回调地狱，可优化，暂时这样写
                    ctx.fillStyle = '#fff';
                    ctx.fillRect(0,0,661,812);
                    canvasImg(ctx, '../image/question/xx_02.png', 0, 0, '661', '812', function() {
                        ctx.fillStyle = '#000';
                        ctx.font = "bold 18px Arial";
                        ctx.fillText(name,150,206);
                        ctx.fillText(result.data.prizeName + "等奖",200,258);
                    })
                    ctx.restore();
                }
                // 0.5s后生成图片
                setTimeout(function() {
                    var dataURL = canvas.toDataURL("image/jpeg",1.0);
                    $('.bg').attr('src', dataURL)
                }, 500)
                return false;
            }
            data.questionId = result.data.question.id;
            data.requestId = result.data.requestId;
            // 一开始创建div 没内容
            $("<div></div>", {
            "class": "question", // 设置样式类
            html: '<div class="order">' +
                        '<span class="ind">1</span><span>/'+ length +'</span>' +   
                    '</div>', // 设置内容 
            }).appendTo($('.question-box')); // 追加到body标签
            // 初次渲染第一题
            renderDiv(ind, result.data.question, page)
            $('.question').eq(ind).children('ul').find('li').on('click', function() {
                data.answer = $(this).data('answer');
                ind++;
                $(this).addClass('select').siblings().removeClass('select');
                var that = this;
                recursion();
                setTimeout(function () {
                    $(that).parents('.question').slideUp('slow', function () {
                        $('.question').eq(ind).find('.ind').text(page + 1);
                    });
                }, 100)
            })
        })
    }
    recursion();
    // ajax请求
    function ajaxData (url, uid, data, success) {
        $.ajax({
            url: url,
            type: 'POST',
            headers: {'uid': uid},
            contentType:'application/json;charset=utf-8',
            data: JSON.stringify(data),
            success: success
        });
    }
    // 渲染元素
    function renderDiv (ind, datas, page) {
        var renders =  '<div class="audio">' + 
                        '<div>'+ datas.content +'</div>' +
                    '</div>' +
                    '<div class="question-photo">'+
                        '<img src="'+ datas.imgUrl +'" alt="">'+
                    '</div>' +
                    '<ul class="option">' +
                        '<li data-answer="A">'+ datas.optionA +'</li>' +
                        '<li data-answer="B">'+ datas.optionB +'</li>' +
                        '<li data-answer="C">'+ datas.optionC +'</li>' +
                    '</ul>'
        $('.question').eq(ind).prepend(renders);
        $('.question').eq(ind).find('.ind').text(page);  
    }
    function canvasImg (ctx, url, x, y, w, h, success) {
        //创建新的图片对象
        var img = new Image();
        img.setAttribute('crossOrigin', 'anonymous');
        //指定图片的URL
        img.src = url;
        //浏览器加载图片完毕后再绘制图片
        img.onload = function(){
            //以Canvas画布上的坐标(10,10)为起始点，绘制图像
            ctx.drawImage(img, x, y, w, h);  
            success();          
        };
    }
    // 封装了一个简单截取头像的方法
    function circleImg(ctx, url, x, y, r) {
        //创建新的图片对象
        var img = new Image();
        img.setAttribute('crossOrigin', 'anonymous');
        //指定图片的URL
        img.src = url;
        ctx.save();
        var d =2 * r;
        var cx = x + r;
        var cy = y + r;
        img.onload = function(){
            ctx.arc(cx, cy, r, 0, 2 * Math.PI);
            ctx.clip();
            //以Canvas画布上的坐标(10,10)为起始点，绘制图像
            ctx.drawImage(img, x, y, d, d);             
        };
    }
}
</script>
</html>