|
|
@@ -4,7 +4,7 @@
|
|
|
<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>
|
|
|
+ <title>无限潜能</title>
|
|
|
<link rel="stylesheet" href="../css/question.css">
|
|
|
<script src="../utils/size.js"></script>
|
|
|
</head>
|
|
|
@@ -43,18 +43,20 @@
|
|
|
</div>
|
|
|
<div class="popup">
|
|
|
<div class="popup-content">
|
|
|
- <canvas id="myCanvas" width="255px" height="466px">
|
|
|
+ <canvas id="myCanvas" width="750px" height="1334px">
|
|
|
您的浏览器不支持canvas标签。
|
|
|
</canvas>
|
|
|
- <img class="bg" src="../image/question/2.jpg" alt="">
|
|
|
+ <img class="bg" src="../image/question/2.jpg" alt="" crossorigin="anonymous">
|
|
|
+ <!--
|
|
|
<div class="baocun">长按保存，并分享至朋友圈</div>
|
|
|
<div class="code">
|
|
|
- <img src="../image/question/2.jpg" alt="">
|
|
|
+ <img src="../image/question/code.jpg" alt="">
|
|
|
<div class="text">
|
|
|
<span>长按识别二维码</span>
|
|
|
<span>即可获得小学课文朗读配音奖品</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ -->
|
|
|
<!--
|
|
|
<img class="head" src="../image/question/头像.jpg" alt="">
|
|
|
-->
|
|
|
@@ -63,20 +65,67 @@
|
|
|
</div>
|
|
|
</body>
|
|
|
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
|
|
|
-<script>
|
|
|
- var answer = "";
|
|
|
- var questionId = "";
|
|
|
- var requestId = "";
|
|
|
+<script>
|
|
|
+//console.log(localStorage.getItem('userData') == 'undefined')
|
|
|
+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 = 36;
|
|
|
+ //获取Canvas对象(画布)
|
|
|
+ var canvas = document.getElementById("myCanvas");
|
|
|
var data = {
|
|
|
- "activityId": "1",
|
|
|
+ "activityId": "2",
|
|
|
"answer": "",
|
|
|
"questionId": "",
|
|
|
"requestId": ""
|
|
|
}
|
|
|
var ind = 0;
|
|
|
function recursion() {
|
|
|
- ajaxData("https://readertest.lingjiao.cn/activity/activity", '7', data, function(result){
|
|
|
+ ajaxData("https://readertest.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) {
|
|
|
+ alert(result.data.prize)
|
|
|
+ // $('.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();
|
|
|
+ // }
|
|
|
+ // // 2.5s后生成图片
|
|
|
+ // setTimeout(function() {
|
|
|
+ // var dataURL = canvas.toDataURL("image/jpeg",1.0);
|
|
|
+ // $('.bg').attr('src', dataURL)
|
|
|
+ // }, 2500)
|
|
|
+ return false;
|
|
|
+ }
|
|
|
data.questionId = result.data.question.id;
|
|
|
data.requestId = result.data.requestId;
|
|
|
// 一开始创建div 没内容
|
|
|
@@ -87,7 +136,7 @@
|
|
|
'</div>', // 设置内容
|
|
|
}).appendTo($('.question-box')); // 追加到body标签
|
|
|
// 初次渲染第一题
|
|
|
- renderDiv(ind, result.data.question)
|
|
|
+ renderDiv(ind, result.data.question, page)
|
|
|
$('.question').eq(ind).children('ul').find('li').on('click', function() {
|
|
|
data.answer = $(this).data('answer');
|
|
|
ind++;
|
|
|
@@ -95,14 +144,10 @@
|
|
|
var that = this;
|
|
|
recursion();
|
|
|
setTimeout(function () {
|
|
|
- if( ind >= length) {
|
|
|
- $('.popup').show();
|
|
|
- return false;
|
|
|
- }
|
|
|
$(that).parents('.question').slideUp('slow', function () {
|
|
|
- $('.question').eq(ind).find('.ind').text(ind + 1);
|
|
|
+ $('.question').eq(ind).find('.ind').text(page + 1);
|
|
|
});
|
|
|
- }, 500)
|
|
|
+ }, 100)
|
|
|
})
|
|
|
})
|
|
|
}
|
|
|
@@ -119,12 +164,8 @@
|
|
|
});
|
|
|
}
|
|
|
// 渲染元素
|
|
|
- function renderDiv (ind, datas) {
|
|
|
+ function renderDiv (ind, datas, page) {
|
|
|
var renders = '<div class="audio">' +
|
|
|
- '<audio src="'+ datas.audio +'">' +
|
|
|
- '您的浏览器不支持 audio 标签。' +
|
|
|
- '</audio>' +
|
|
|
- '<img class="audiobtn" src="../image/question/audiobtn.png" alt="audiobtn">' +
|
|
|
'<div>'+ datas.content +'</div>' +
|
|
|
'</div>' +
|
|
|
'<div class="question-photo">'+
|
|
|
@@ -135,33 +176,13 @@
|
|
|
'<li data-answer="B">'+ datas.optionB +'</li>' +
|
|
|
'<li data-answer="C">'+ datas.optionC +'</li>' +
|
|
|
'</ul>'
|
|
|
- $('.question').eq(ind).prepend(renders)
|
|
|
- }
|
|
|
-
|
|
|
- //canvas绘制图片
|
|
|
- //获取Canvas对象(画布)
|
|
|
- var canvas = document.getElementById("myCanvas");
|
|
|
- //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
|
|
|
- if(canvas.getContext){
|
|
|
- //获取对应的CanvasRenderingContext2D对象(画笔)
|
|
|
- var ctx = canvas.getContext("2d");
|
|
|
- //回调地狱，可优化，暂时这样写
|
|
|
- canvasImg('../image/question/2.jpg', 0, 0, '255', '466', function() {
|
|
|
- canvasImg('../image/question/2.jpg', 200, 400, '50', '50', function() {
|
|
|
- ctx.moveTo(125,20);
|
|
|
- ctx.lineTo(125,170);
|
|
|
- ctx.fillStyle = '#fff';
|
|
|
- ctx.font="14px Arial";
|
|
|
- ctx.textAlign="center";
|
|
|
- ctx.fillText("王丽丽王丽丽丽丽学前测评报告",125,120);
|
|
|
- circleImg('../image/question/2.jpg', 110, 290, 15)
|
|
|
- })
|
|
|
- })
|
|
|
- ctx.restore();
|
|
|
+ $('.question').eq(ind).prepend(renders);
|
|
|
+ $('.question').eq(ind).find('.ind').text(page);
|
|
|
}
|
|
|
- function canvasImg (url, x, y, w, h, success) {
|
|
|
+ function canvasImg (ctx, url, x, y, w, h, success) {
|
|
|
//创建新的图片对象
|
|
|
var img = new Image();
|
|
|
+ img.setAttribute('crossOrigin', 'anonymous');
|
|
|
//指定图片的URL
|
|
|
img.src = url;
|
|
|
//浏览器加载图片完毕后再绘制图片
|
|
|
@@ -172,9 +193,10 @@
|
|
|
};
|
|
|
}
|
|
|
// 封装了一个简单截取头像的方法
|
|
|
- function circleImg(url, x, y, r) {
|
|
|
+ function circleImg(ctx, url, x, y, r) {
|
|
|
//创建新的图片对象
|
|
|
var img = new Image();
|
|
|
+ img.setAttribute('crossOrigin', 'anonymous');
|
|
|
//指定图片的URL
|
|
|
img.src = url;
|
|
|
ctx.save();
|
|
|
@@ -188,10 +210,6 @@
|
|
|
ctx.drawImage(img, x, y, d, d);
|
|
|
};
|
|
|
}
|
|
|
- //0.5s后生成图片
|
|
|
- setTimeout(function() {
|
|
|
- var dataURL = canvas.toDataURL("image/png",1.0);
|
|
|
- $('.bg').attr('src', dataURL)
|
|
|
- }, 500)
|
|
|
+}
|
|
|
</script>
|
|
|
</html>
|
