question.html 8.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
  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. </div>
  62. </div>
  63. <!--
  64. <img class="head" src="../image/question/头像.jpg" alt="">
  65. -->
  66. </div>
  67. </div>
  68. </div>
  69. </body>
  70. <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  71. <script>
  72. //console.log(localStorage.getItem('userData') == 'undefined')
  73. window.onload=function(){
  74. if(localStorage.getItem('userData') == 'undefined') {
  75. //alert('请重新扫码登陆')
  76. window.location.href = '../index.html'
  77. return false;
  78. }
  79. var user = JSON.parse(localStorage.getItem('userData'));
  80. var uid = user.uid;
  81. var avatar = user.avatar ? user.avatar : '';
  82. var name = user.wechatName ? user.wechatName : '小朋友';
  83. //获取Canvas对象(画布)
  84. var canvas = document.getElementById("myCanvas");
  85. var data = {
  86. "activityId": "1",
  87. "answer": "",
  88. "questionId": "",
  89. "requestId": ""
  90. }
  91. var ind = 0;
  92. function recursion() {
  93. ajaxData("https://readertest.lingjiao.cn/activity/activity/xq", uid, data, function(result){
  94. var length = result.data.questionNum;
  95. if( ind >= length && result.data.isEnd === 0) {
  96. $('#audio').attr('src', "")
  97. $('.popup').show();
  98. //简单地检测当前浏览器是否支持Canvas对象,以免在一些不支持html5的浏览器中提示语法错误
  99. if(canvas.getContext){
  100. //获取对应的CanvasRenderingContext2D对象(画笔)
  101. var ctx = canvas.getContext("2d");
  102. //回调地狱,可优化,暂时这样写
  103. //alert(result.data.poster)
  104. canvasImg(ctx, result.data.poster, 0, 0, '750', '1334', function() {
  105. ctx.moveTo(365,20);
  106. ctx.lineTo(365,170);
  107. ctx.fillStyle = '#fff';
  108. ctx.font="36px Arial";
  109. ctx.textAlign="center";
  110. //alert(name)
  111. ctx.fillText(name + "学前测评报告",365,370);
  112. //alert(avatar)
  113. circleImg(ctx, avatar, 328, 836, 41)
  114. })
  115. ctx.restore();
  116. }
  117. // 2.5s后生成图片
  118. setTimeout(function() {
  119. var dataURL = canvas.toDataURL("image/jpeg",1.0);
  120. $('.bg').attr('src', dataURL)
  121. }, 2500)
  122. return false;
  123. }
  124. data.questionId = result.data.question.id;
  125. data.requestId = result.data.requestId;
  126. // 一开始创建div 没内容
  127. $("<div></div>", {
  128. "class": "question", // 设置样式类
  129. html: '<div class="order">' +
  130. '<span class="ind">1</span><span>/'+ length +'</span>' +
  131. '</div>', // 设置内容
  132. }).appendTo($('.question-box')); // 追加到body标签
  133. // 初次渲染第一题
  134. renderDiv(ind, result.data.question)
  135. $('.question').eq(ind).children('ul').find('li').one('click', function() {
  136. data.answer = $(this).data('answer');
  137. ind++;
  138. $(this).addClass('select').siblings().removeClass('select');
  139. var that = this;
  140. recursion();
  141. setTimeout(function () {
  142. $(that).parents('.question').slideUp('slow', function () {
  143. $('.question').eq(ind).find('.ind').text(ind + 1);
  144. });
  145. }, 100)
  146. })
  147. })
  148. }
  149. recursion();
  150. // ajax请求
  151. function ajaxData (url, uid, data, success) {
  152. $.ajax({
  153. url: url,
  154. type: 'POST',
  155. headers: {'uid': uid},
  156. contentType:'application/json;charset=utf-8',
  157. data: JSON.stringify(data),
  158. success: success
  159. });
  160. }
  161. // 渲染元素
  162. function renderDiv (ind, datas) {
  163. $('#audio').attr('src', datas.audio)
  164. var renders = '<div class="audio">' +
  165. // '<audio src="'+ datas.audio +'" autoplay="autoplay" loop="loop">' +
  166. // '您的浏览器不支持 audio 标签。' +
  167. // '</audio>' +
  168. '<img class="audiobtn" src="../image/question/audiobtn.png" alt="audiobtn">' +
  169. '<div>'+ datas.content +'</div>' +
  170. '</div>' +
  171. '<div class="question-photo">'+
  172. '<img src="'+ datas.imgUrl +'" alt="">'+
  173. '</div>' +
  174. '<ul class="option">' +
  175. '<li data-answer="A">'+ datas.optionA +'</li>' +
  176. '<li data-answer="B">'+ datas.optionB +'</li>' +
  177. '<li data-answer="C">'+ datas.optionC +'</li>' +
  178. '</ul>'
  179. $('.question').eq(ind).prepend(renders);
  180. audioAutoPlay('audio');
  181. }
  182. function canvasImg (ctx, url, x, y, w, h, success) {
  183. //创建新的图片对象
  184. var img = new Image();
  185. img.setAttribute('crossOrigin', 'anonymous');
  186. //指定图片的URL
  187. img.src = url;
  188. //浏览器加载图片完毕后再绘制图片
  189. img.onload = function(){
  190. //以Canvas画布上的坐标(10,10)为起始点,绘制图像
  191. ctx.drawImage(img, x, y, w, h);
  192. success();
  193. };
  194. }
  195. // 封装了一个简单截取头像的方法
  196. function circleImg(ctx, url, x, y, r) {
  197. //创建新的图片对象
  198. var img = new Image();
  199. img.setAttribute('crossOrigin', 'anonymous');
  200. //指定图片的URL
  201. img.src = url;
  202. ctx.save();
  203. var d =2 * r;
  204. var cx = x + r;
  205. var cy = y + r;
  206. img.onload = function(){
  207. ctx.arc(cx, cy, r, 0, 2 * Math.PI);
  208. ctx.clip();
  209. //以Canvas画布上的坐标(10,10)为起始点,绘制图像
  210. ctx.drawImage(img, x, y, d, d);
  211. };
  212. }
  213. // 解决苹果不能播放
  214. function audioAutoPlay(id){
  215.   var audio = document.getElementById(id);
  216.     play = function(){
  217. audio.load();
  218.        audio.play();
  219.     };
  220. $('.audiobtn').on("click",play);
  221. }
  222. }
  223. </script>
  224. </html>