question.html 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>学前能力测试</title>
  8. <link rel="stylesheet" href="../css/question.css">
  9. <script src="../utils/size.js"></script>
  10. </head>
  11. <body>
  12. <div class="content">
  13. <div class="question-container">
  14. <img class="container-bg" src="../image/question/questionbg.jpg" alt="">
  15. <div class="title">
  16. <img src="../image/question/title.png" alt="title">
  17. </div>
  18. <div class="subject">
  19. <img class="inset" src="../image/question/inset.png" alt="inset">
  20. <img class="bottom" src="../image/question/bottom.png" alt="bottom">
  21. <!--需要点击播放-->
  22. <audio id="audio" src="" >
  23. 您的浏览器不支持 audio 标签。
  24. </audio>
  25. <div class="question-box"></div>
  26. <!--
  27. <div class="question" >
  28. <div class="audio">
  29. <audio src="http://www.ytmp3.cn/down/44537.mp3" autoplay="autoplay" preload="auto">
  30. 您的浏览器不支持 audio 标签。
  31. </audio>
  32. <img class="audiobtn" src="../image/question/audiobtn.png" alt="audiobtn">
  33. <span>甜甜圈从左数是第几个?</span>
  34. </div>
  35. <div class="question-photo"></div>
  36. <ul class="option">
  37. <li class="select">第一个</li>
  38. <li>第二个</li>
  39. <li>第三个</li>
  40. </ul>
  41. <div class="order">
  42. <span>1</span><span>/5</span>
  43. </div>
  44. </div>
  45. -->
  46. </div>
  47. </div>
  48. <div class="popup">
  49. <div class="popup-content">
  50. <canvas id="myCanvas" width="750px" height="1334px">
  51. 您的浏览器不支持canvas标签。
  52. </canvas>
  53. <!--<img class="bg" src="../image/question/2.jpg" alt="" crossorigin="anonymous">-->
  54. <img class="bg" alt="" crossorigin="anonymous">
  55. <div class="baocun">长按保存,并分享至朋友圈</div>
  56. <div class="code">
  57. <img src="../image/question/code.jpg" alt="">
  58. <div class="text">
  59. <span>* 如何提高孩子的洞察力</span>
  60. <span>* 学前阅读有方法,千万别走进误区</span>
  61. <span>长按左边二维码,获取答案</span>
  62. </div>
  63. </div>
  64. <!--
  65. <img class="head" src="../image/question/头像.jpg" alt="">
  66. -->
  67. </div>
  68. </div>
  69. </div>
  70. </body>
  71. <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  72. <script>
  73. //console.log(localStorage.getItem('userData') == 'undefined')
  74. window.onload=function(){
  75. if(localStorage.getItem('userData') == 'undefined') {
  76. //alert('请重新扫码登陆')
  77. window.location.href = '../index.html'
  78. return false;
  79. }
  80. var user = JSON.parse(localStorage.getItem('userData'));
  81. var uid = user.uid;
  82. var avatar = user.avatar ? user.avatar : '';
  83. var name = user.wechatName ? user.wechatName : '小朋友';
  84. //获取Canvas对象(画布)
  85. var canvas = document.getElementById("myCanvas");
  86. var data = {
  87. "activityId": "1",
  88. "answer": "",
  89. "questionId": "",
  90. "requestId": ""
  91. }
  92. var ind = 0;
  93. function recursion() {
  94. ajaxData("https://activity.lingjiao.cn/activity/activity/xq", uid, data, function(result){
  95. var length = result.data.questionNum;
  96. if( ind >= length && result.data.isEnd === 0) {
  97. $('#audio').attr('src', "")
  98. $('.popup').show();
  99. //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
  100. if(canvas.getContext){
  101. //获取对应的CanvasRenderingContext2D对象(画笔)
  102. var ctx = canvas.getContext("2d");
  103. //回调地狱,可优化,暂时这样写
  104. //alert(result.data.poster)
  105. canvasImg(ctx, result.data.poster, 0, 0, '750', '1334', function() {
  106. ctx.moveTo(365,20);
  107. ctx.lineTo(365,170);
  108. ctx.fillStyle = '#fff';
  109. ctx.font="36px Arial";
  110. ctx.textAlign="center";
  111. //alert(name)
  112. ctx.fillText(name + "学前测评报告",365,370);
  113. //alert(avatar)
  114. circleImg(ctx, avatar, 328, 836, 41)
  115. })
  116. ctx.restore();
  117. }
  118. // 2.5s后生成图片
  119. setTimeout(function() {
  120. var dataURL = canvas.toDataURL("image/jpeg",1.0);
  121. $('.bg').attr('src', dataURL)
  122. }, 2500)
  123. return false;
  124. }
  125. data.questionId = result.data.question.id;
  126. data.requestId = result.data.requestId;
  127. // 一开始创建div 没内容
  128. $("<div></div>", {
  129. "class": "question", // 设置样式类
  130. html: '<div class="order">' +
  131. '<span class="ind">1</span><span>/'+ length +'</span>' +
  132. '</div>', // 设置内容
  133. }).appendTo($('.question-box')); // 追加到body标签
  134. // 初次渲染第一题
  135. renderDiv(ind, result.data.question)
  136. $('.question').eq(ind).children('ul').find('li').one('click', function() {
  137. data.answer = $(this).data('answer');
  138. ind++;
  139. $(this).addClass('select').siblings().removeClass('select');
  140. var that = this;
  141. recursion();
  142. setTimeout(function () {
  143. $(that).parents('.question').slideUp('slow', function () {
  144. $('.question').eq(ind).find('.ind').text(ind + 1);
  145. });
  146. }, 100)
  147. })
  148. })
  149. }
  150. recursion();
  151. // ajax请求
  152. function ajaxData (url, uid, data, success) {
  153. $.ajax({
  154. url: url,
  155. type: 'POST',
  156. headers: {'uid': uid},
  157. contentType:'application/json;charset=utf-8',
  158. data: JSON.stringify(data),
  159. success: success
  160. });
  161. }
  162. // 渲染元素
  163. function renderDiv (ind, datas) {
  164. $('#audio').attr('src', datas.audio)
  165. var renders = '<div class="audio">' +
  166. // '<audio src="'+ datas.audio +'" autoplay="autoplay" loop="loop">' +
  167. // '您的浏览器不支持 audio 标签。' +
  168. // '</audio>' +
  169. '<img class="audiobtn" src="../image/question/audiobtn.gif" alt="audiobtn">' +
  170. '<div>'+ datas.content +'</div>' +
  171. '</div>' +
  172. '<div class="question-photo">'+
  173. '<img src="'+ datas.imgUrl +'" alt="">'+
  174. '</div>' +
  175. '<ul class="option">' +
  176. '<li data-answer="A">'+ datas.optionA +'</li>' +
  177. '<li data-answer="B">'+ datas.optionB +'</li>' +
  178. '<li data-answer="C">'+ datas.optionC +'</li>' +
  179. '</ul>'
  180. $('.question').eq(ind).prepend(renders);
  181. audioAutoPlay('audio');
  182. }
  183. function canvasImg (ctx, url, x, y, w, h, success) {
  184. //创建新的图片对象
  185. var img = new Image();
  186. img.setAttribute('crossOrigin', 'anonymous');
  187. //指定图片的URL
  188. img.src = url;
  189. //浏览器加载图片完毕后再绘制图片
  190. img.onload = function(){
  191. //以Canvas画布上的坐标(10,10)为起始点,绘制图像
  192. ctx.drawImage(img, x, y, w, h);
  193. success();
  194. };
  195. }
  196. // 封装了一个简单截取头像的方法
  197. function circleImg(ctx, url, x, y, r) {
  198. //创建新的图片对象
  199. var img = new Image();
  200. img.setAttribute('crossOrigin', 'anonymous');
  201. //指定图片的URL
  202. img.src = url;
  203. ctx.save();
  204. var d =2 * r;
  205. var cx = x + r;
  206. var cy = y + r;
  207. img.onload = function(){
  208. ctx.arc(cx, cy, r, 0, 2 * Math.PI);
  209. ctx.clip();
  210. //以Canvas画布上的坐标(10,10)为起始点,绘制图像
  211. ctx.drawImage(img, x, y, d, d);
  212. };
  213. }
  214. // 解决苹果不能播放
  215. function audioAutoPlay(id){
  216.   var audio = document.getElementById(id);
  217.     play = function(){
  218. audio.load();
  219.        audio.play();
  220.     };
  221. $('.audiobtn').on("click",play);
  222. }
  223. }
  224. </script>
  225. </html>