question.html 9.0 KB

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