|
|
@@ -18,6 +18,9 @@
|
|
|
<div class="subject">
|
|
|
<img class="inset" src="../image/question/inset.png" alt="inset">
|
|
|
<img class="bottom" src="../image/question/bottom.png" alt="bottom">
|
|
|
+ <audio class="play" src="" autoplay="autoplay" loop="loop" style=" position: absolute;top: .5rem;left: .5rem;">
|
|
|
+ 您的浏览器不支持 audio 标签。
|
|
|
+ </audio>
|
|
|
<div class="question-box"></div>
|
|
|
<!--
|
|
|
<div class="question" >
|
|
|
@@ -64,77 +67,105 @@
|
|
|
</body>
|
|
|
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
|
|
|
<script>
|
|
|
- var num = 2;
|
|
|
- var length = 2;
|
|
|
- var ind = 0;
|
|
|
- for(var i = 0; i <= length; i++) {
|
|
|
- $("<div></div>", {
|
|
|
- "class": "question", // 设置样式类
|
|
|
- html: '<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>第一个</li>' +
|
|
|
- '<li>第二个</li>' +
|
|
|
- '<li>第三个</li>' +
|
|
|
- '</ul>' +
|
|
|
- '<div class="order">' +
|
|
|
- '<span class="ind">1</span><span>/'+ (length + 1) +'</span>' +
|
|
|
- '</div>' +
|
|
|
- '', // 设置内容
|
|
|
- style: 'z-index:'+ num-- +'',
|
|
|
- }).appendTo($('.question-box')); // 追加到body标签
|
|
|
- }
|
|
|
- $('.question').each(function(index) {
|
|
|
- $(this).children('ul').find('li').on('click', function() {
|
|
|
- ind++;
|
|
|
- $(this).addClass('select').siblings().removeClass('select');
|
|
|
- var that = this;
|
|
|
- setTimeout(function () {
|
|
|
- // 因为每个问题高度不同必须重置高度
|
|
|
- var height = $(that).parents('.question').height();
|
|
|
- $('.question-box').height(height);
|
|
|
- if( ind > length) {
|
|
|
- $('.popup').show();
|
|
|
- return false;
|
|
|
- }
|
|
|
- $(that).parents('.question').slideUp('slow', function () {
|
|
|
- $('.question').eq(ind).find('.ind').text(ind + 1);
|
|
|
- });
|
|
|
- }, 500)
|
|
|
- })
|
|
|
- })
|
|
|
- setTimeout(function () {
|
|
|
- var height = $('.question').height();
|
|
|
- $('.question-box').height(height);
|
|
|
- },0)
|
|
|
//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)
|
|
|
+ var data = {
|
|
|
+ "activityId": "1",
|
|
|
+ "answer": "",
|
|
|
+ "questionId": "",
|
|
|
+ "requestId": ""
|
|
|
+ }
|
|
|
+ var ind = 0;
|
|
|
+ function recursion() {
|
|
|
+ ajaxData("https://readertest.lingjiao.cn/activity/activity", '7', data, function(result){
|
|
|
+ var length = result.data.questionNum;
|
|
|
+ if( ind >= length) {
|
|
|
+ $('.popup').show();
|
|
|
+ //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
|
|
|
+ if(canvas.getContext){
|
|
|
+ //获取对应的CanvasRenderingContext2D对象(画笔)
|
|
|
+ var ctx = canvas.getContext("2d");
|
|
|
+ //回调地狱，可优化，暂时这样写
|
|
|
+ canvasImg(ctx, '../image/question/2.jpg', 0, 0, '255', '466', function() {
|
|
|
+ canvasImg(ctx, '../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(ctx, '../image/question/2.jpg', 110, 290, 15)
|
|
|
+ })
|
|
|
+ })
|
|
|
+ ctx.restore();
|
|
|
+ }
|
|
|
+ //0.5s后生成图片
|
|
|
+ setTimeout(function() {
|
|
|
+ var dataURL = canvas.toDataURL("image/png",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)
|
|
|
+ $('.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)
|
|
|
})
|
|
|
})
|
|
|
- ctx.restore();
|
|
|
}
|
|
|
- function canvasImg (url, x, y, w, h, success) {
|
|
|
+ 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) {
|
|
|
+ console.log(datas.audio)
|
|
|
+ $('.play').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)
|
|
|
+ }
|
|
|
+ function canvasImg (ctx, url, x, y, w, h, success) {
|
|
|
//创建新的图片对象
|
|
|
var img = new Image();
|
|
|
//指定图片的URL
|
|
|
@@ -147,7 +178,7 @@
|
|
|
};
|
|
|
}
|
|
|
// 封装了一个简单截取头像的方法
|
|
|
- function circleImg(url, x, y, r) {
|
|
|
+ function circleImg(ctx, url, x, y, r) {
|
|
|
//创建新的图片对象
|
|
|
var img = new Image();
|
|
|
//指定图片的URL
|
|
|
@@ -163,10 +194,5 @@
|
|
|
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>
|
