LImengbo
/
grade-answer


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
							<!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>Document</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.png" 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">
            <!--需要点击播放-->
            <audio id="audio" src="" autoplay="autoplay">
                您的浏览器不支持 audio 标签。
            </audio>
            <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="750px" height="1334px">
                您的浏览器不支持canvas标签。
            </canvas>
            <img class="bg" src="" alt=""  crossorigin="anonymous">
            <div class="baocun">长按保存，并分享至朋友圈</div>
            <div class="code">
                <img src="../image/question/2.jpg" alt="">
                <div class="text">
                    <span>长按识别二维码</span>
                    <span>即可获得小学课文朗读配音奖品</span>
                </div>
            </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> 
    var user = JSON.parse(localStorage.getItem('userData'));
    var uid = user.uid ? user.id : '7';
    var avatar = user.avatar ? user.avatar : '';
    var name = user.wechatName ? user.wechatName : '小朋友';
    //获取Canvas对象(画布)
    var canvas = document.getElementById("myCanvas");
    var data = {
        "activityId": "1",
        "answer": "",
        "questionId": "",
        "requestId": ""
    }
    var ind = 0;
    function recursion() {
        ajaxData("https://readertest.lingjiao.cn/activity/activity/xq", 7, data, function(result){
            var length = result.data.questionNum;
            if( ind >= length && result.data.isEnd === 0) {
                $('#audio').attr('src', "")
                $('.popup').show();
                //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
                if(canvas.getContext){  
                    //获取对应的CanvasRenderingContext2D对象(画笔)
                    var ctx = canvas.getContext("2d");
                    //回调地狱，可优化，暂时这样写
                    alert(result.data.poster)
                    canvasImg(ctx, result.data.poster, 0, 0, '750', '1334', function() {
                        ctx.moveTo(365,20);
                        ctx.lineTo(365,170);
                        ctx.fillStyle = '#fff';
                        ctx.font="36px Arial";
                        ctx.textAlign="center";
                        alert(name)
                        ctx.fillText(name + "学前测评报告",365,370);
                        alert(avatar)
                        circleImg(ctx, avatar, 328, 836, 41)
                    })
                    ctx.restore();
                }
                // 1.5s后生成图片
                setTimeout(function() {
                    var dataURL = canvas.toDataURL("image/jpeg",1.0);
                    $('.bg').attr('src', dataURL)
                }, 1500)
                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)
            $('.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(ind + 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) {
        $('#audio').attr('src', datas.audio)
        var renders =  '<div class="audio">' + 
                        // '<audio src="'+ datas.audio +'" autoplay="autoplay" loop="loop">' +
                        //     '您的浏览器不支持 audio 标签。' +
                        // '</audio>' +
                        '<img class="audiobtn" src="../image/question/audiobtn.png" alt="audiobtn">' +
                        '<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);
        audioAutoPlay('audio');     
    }
    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);             
        };
    }
    // 解决苹果不能播放
    function audioAutoPlay(id){
    　　var audio = document.getElementById(id),
　　　　play = function(){
            audio.load();
　　　　　　 audio.play();
            window.removeEventListener("touchstart",play, false);
　　　　};
        window.addEventListener("touchstart",play, false);
    }
</script>
</html>