{"id":29924,"date":"2021-06-27T01:38:18","date_gmt":"2021-06-26T17:38:18","guid":{"rendered":"https:\/\/trails-game.com\/?page_id=29924"},"modified":"2023-03-21T10:29:45","modified_gmt":"2023-03-21T02:29:45","slug":"trails-quiz","status":"publish","type":"page","link":"https:\/\/trails-game.com\/en\/trails-quiz\/","title":{"rendered":"Trajectory Q&amp;A (Beta)"},"content":{"rendered":"<div data-elementor-type=\"wp-page\" data-elementor-id=\"29924\" class=\"elementor elementor-29924\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-bab89e3 elementor-section-height-full elementor-section-boxed elementor-section-height-default elementor-section-items-middle\" data-id=\"bab89e3\" data-element_type=\"section\" data-settings=\"{&quot;jet_parallax_layout_list&quot;:[{&quot;jet_parallax_layout_image&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;_id&quot;:&quot;a33287f&quot;,&quot;jet_parallax_layout_image_tablet&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;jet_parallax_layout_image_mobile&quot;:{&quot;url&quot;:&quot;&quot;,&quot;id&quot;:&quot;&quot;,&quot;size&quot;:&quot;&quot;},&quot;jet_parallax_layout_speed&quot;:{&quot;unit&quot;:&quot;%&quot;,&quot;size&quot;:50,&quot;sizes&quot;:[]},&quot;jet_parallax_layout_type&quot;:&quot;scroll&quot;,&quot;jet_parallax_layout_direction&quot;:&quot;1&quot;,&quot;jet_parallax_layout_fx_direction&quot;:null,&quot;jet_parallax_layout_z_index&quot;:&quot;&quot;,&quot;jet_parallax_layout_bg_x&quot;:50,&quot;jet_parallax_layout_bg_x_tablet&quot;:&quot;&quot;,&quot;jet_parallax_layout_bg_x_mobile&quot;:&quot;&quot;,&quot;jet_parallax_layout_bg_y&quot;:50,&quot;jet_parallax_layout_bg_y_tablet&quot;:&quot;&quot;,&quot;jet_parallax_layout_bg_y_mobile&quot;:&quot;&quot;,&quot;jet_parallax_layout_bg_size&quot;:&quot;auto&quot;,&quot;jet_parallax_layout_bg_size_tablet&quot;:&quot;&quot;,&quot;jet_parallax_layout_bg_size_mobile&quot;:&quot;&quot;,&quot;jet_parallax_layout_animation_prop&quot;:&quot;transform&quot;,&quot;jet_parallax_layout_on&quot;:[&quot;desktop&quot;,&quot;tablet&quot;]}],&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t\t\t<div class=\"elementor-background-overlay\"><\/div>\n\t\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-badcfd4\" data-id=\"badcfd4\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-4108ceb elementor-widget elementor-widget-html\" data-id=\"4108ceb\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"timer\"><\/div>\r\n    <div id=\"quizWrap\"><\/div>\r\n    <div class=\"footer\">\r\n      <div class=\"submit\">\r\n          <button type=\"submit\" id=\"submitButton\">start<\/button>\r\n      <\/div>\r\n<\/div>\r\n<script>\r\nconst container_anim = \"<svg class=\\\"svg\\\" version=\\\"1.0\\\" width=\\\"40\\\" height=\\\"40\\\" preserveAspectRatio=\\\"xMidYMid meet\\\" viewBox=\\\"0 0 1280.000000 1278.000000\\\"><g transform=\\\"translate(0.000000,1278.000000) scale(0.100000,-0.100000)\\\" fill=\\\"#ffffff\\\" stroke=\\\"#355bae\\\"><path d=\\\"M7239 12760 c-20 -11 -46 -31 -57 -44 -11 -14 -154 -276 -318 -583 -206 -384 -311 -570 -339 -599 l-40 -42 -135 -7 c-74 -4 -193 -8 -265 -8 -199 -3 -155 -47 -582 570 -197 285 -376 537 -399 562 -37 40 -46 45 -95 48 -49 4 -104 -12 -633 -190 -397 -135 -586 -203 -603 -219 -48 -44 -55 -75 -43 -216 18 -225 69 -883 81 -1033 11 -140 10 -148 -11 -196 -12 -28 -33 -62 -48 -75 -15 -14 -116 -86 -225 -161 -207 -142 -241 -157 -321 -144 -18 3 -305 118 -639 256 -333 138 -619 251 -635 251 -70 0 -97 -28 -481 -505 -242 -300 -375 -473 -383 -497 -8 -29 -8 -48 0 -76 7 -23 155 -226 392 -537 209 -275 386 -514 395 -532 8 -17 15 -57 15 -88 0 -50 -14 -90 -110 -322 -61 -146 -121 -278 -133 -295 -49 -67 -57 -69 -747 -194 -700 -125 -699 -125 -733 -196 -24 -51 -91 -554 -122 -923 -8 -99 -18 -215 -21 -257 l-7 -78 39 -16 c21 -9 308 -115 637 -235 330 -120 613 -226 630 -236 18 -11 46 -39 62 -64 27 -40 36 -75 89 -364 62 -337 65 -383 30 -449 -12 -23 -206 -211 -499 -484 -426 -397 -482 -452 -494 -491 -12 -37 -12 -50 0 -85 24 -71 501 -989 529 -1018 15 -14 44 -31 66 -38 36 -11 89 0 665 129 345 78 641 141 659 141 80 0 118 -30 371 -294 132 -138 250 -267 260 -288 40 -78 41 -72 -131 -746 -119 -463 -161 -641 -156 -665 14 -75 20 -79 532 -367 516 -290 535 -299 604 -270 16 7 233 219 481 472 262 266 468 467 490 478 74 38 93 36 459 -45 372 -83 399 -92 444 -163 13 -20 114 -310 225 -643 146 -439 208 -612 224 -627 54 -50 93 -62 198 -62 55 0 142 4 192 10 51 5 178 17 282 25 291 24 546 55 576 70 33 17 77 69 84 98 3 12 64 301 136 642 83 398 137 630 149 650 43 69 69 83 379 200 260 99 311 115 359 115 32 -1 69 -6 84 -13 15 -7 242 -185 504 -397 262 -212 493 -395 513 -407 44 -28 104 -30 148 -6 57 33 925 697 941 721 8 13 17 44 20 70 4 43 -18 106 -228 657 -128 335 -234 623 -237 641 -11 69 21 130 178 344 83 113 163 218 177 234 38 40 98 66 157 66 28 0 325 -29 660 -65 588 -63 612 -65 652 -50 24 9 51 29 62 43 22 32 419 1114 427 1163 4 24 -2 48 -18 79 -20 40 -78 86 -508 402 -641 472 -587 429 -617 496 l-26 56 16 248 c16 263 26 307 78 354 11 10 284 151 607 314 l587 296 27 49 c30 54 33 76 18 103 -5 9 -66 277 -134 595 -82 380 -132 589 -145 610 -42 68 -18 65 -746 112 -613 40 -668 45 -709 65 -63 30 -80 54 -192 262 -93 173 -98 185 -98 243 0 36 7 72 17 92 9 17 159 271 333 565 174 293 321 548 326 565 22 79 21 81 -455 565 -243 247 -454 456 -469 464 -15 8 -48 14 -73 14 -41 0 -100 -30 -616 -316 -335 -186 -587 -320 -612 -326 -68 -14 -112 2 -294 105 -222 126 -249 156 -258 289 -3 40 -15 336 -26 658 -11 322 -24 599 -30 617 -11 36 -67 90 -102 98 -716 174 -1188 287 -1207 290 -14 2 -41 -5 -61 -15z m-549 -2620 c920 -78 1731 -450 2370 -1090 612 -611 985 -1393 1082 -2265 17 -154 17 -634 0 -775 -106 -876 -451 -1611 -1042 -2224 -594 -614 -1361 -995 -2245 -1113 -166 -22 -694 -25 -855 -5 -635 80 -1160 271 -1665 605 -602 399 -1088 979 -1371 1637 -229 533 -326 1067 -302 1661 36 903 412 1776 1048 2433 385 397 829 693 1345 894 301 117 653 202 965 231 63 6 131 13 150 14 81 8 414 6 520 -3z\\\"\/><\/g><\/svg><svg height=\\\"50\\\" width=\\\"50\\\" class=\\\"svg_border\\\"><polygon points=\\\"23,5 5,23 28,40 40,28\\\" class = \\\"p_border\\\"\/><\/svg>\";\r\nconst char_mapping={0:\"A\",1:\"B\",2:\"C\",3:\"D\",4:\"E\",5:\"F\"};\r\n\r\nconst url=\"https:\/\/api.trails-game.com\/\"\r\nlet data = [];\r\n\r\nconst shuffle = (f) => f.sort(() => Math.random() - 0.5);\r\nconst questionNum = 5;\r\nconst timeAllowed = 600;\r\n\r\n\/\/Timer\r\nconst timer = document.getElementById(\"timer\");\r\nconst FULL_DASH_ARRAY = 283;\r\nconst WARNING_THRESHOLD = 180;\r\nconst ALERT_THRESHOLD = 60;\r\n\r\nconst COLOR_CODES = {\r\n  info: {\r\n    color: \"green\"\r\n  },\r\n  warning: {\r\n    color: \"orange\",\r\n    threshold: WARNING_THRESHOLD\r\n  },\r\n  alert: {\r\n    color: \"red\",\r\n    threshold: ALERT_THRESHOLD\r\n  }\r\n};\r\n\r\n\r\nlet timerInterval = null;\r\nlet remainingPathColor = COLOR_CODES.info.color;\r\n\r\nfunction onTimesUp() {\r\n  timer.innerHTML = \"Time is up\";\r\n  submit();\r\n}\r\n\r\nfunction startTimer() {\r\n  timerInterval = setInterval(() => {\r\n    timePassed = timePassed += 1;\r\n    timeLeft = timeAllowed - timePassed;\r\n    document.getElementById(\"base-timer-label\").innerHTML = formatTime(\r\n      timeLeft\r\n    );\r\n    setCircleDasharray();\r\n    setRemainingPathColor(timeLeft);\r\n\r\n    if (timeLeft === 0) {\r\n      onTimesUp();\r\n    }\r\n  }, 1000);\r\n  return timerInterval;\r\n}\r\n\r\nfunction formatTime(time) {\r\n  const minutes = Math.floor(time \/ 60);\r\n  let seconds = time % 60;\r\n\r\n  if (seconds < 10) {\r\n    seconds = `0${seconds}`;\r\n  }\r\n\r\n  return `${minutes}:${seconds}`;\r\n}\r\n\r\nfunction setRemainingPathColor(timeLeft) {\r\n  const { alert, warning, info } = COLOR_CODES;\r\n  if (timeLeft <= alert.threshold) {\r\n    document\r\n      .getElementById(\"base-timer-path-remaining\")\r\n      .classList.remove(warning.color);\r\n    document\r\n      .getElementById(\"base-timer-path-remaining\")\r\n      .classList.add(alert.color);\r\n  } else if (timeLeft <= warning.threshold) {\r\n    document\r\n      .getElementById(\"base-timer-path-remaining\")\r\n      .classList.remove(info.color);\r\n    document\r\n      .getElementById(\"base-timer-path-remaining\")\r\n      .classList.add(warning.color);\r\n  }\r\n}\r\n\r\nfunction calculateTimeFraction() {\r\n  const rawTimeFraction = timeLeft \/ timeAllowed;\r\n  return rawTimeFraction - (1 \/ timeAllowed) * (1 - rawTimeFraction);\r\n}\r\n\r\nfunction setCircleDasharray() {\r\n  const circleDasharray = `${(\r\n    calculateTimeFraction() * FULL_DASH_ARRAY\r\n  ).toFixed(0)} 283`;\r\n  document\r\n    .getElementById(\"base-timer-path-remaining\")\r\n    .setAttribute(\"stroke-dasharray\", circleDasharray);\r\n}\r\n\r\n\r\nlet counter = 0; \/\/ setInterval returns a number (ID)\r\nlet correctCount = 0;\r\n\r\nconst quizWrap = document.getElementById(\"quizWrap\");\r\nconst submitButton = document.getElementById(\"submitButton\");\r\nlet actualQuestions = [];\r\nlet userAns = [];\r\nlet userResult = [];\r\nlet qStats = [];\r\n\r\nclass Question {\r\n  constructor(data, i) {\r\n    \/**\r\n     * @param data: information of a question\r\n     * @param i: index of a question\r\n     *\/\r\n    this.currentQuestion = data;\r\n    this.i = i;\r\n  }\r\n\r\n  showQuestion() {\r\n    let qdiv = document.createElement(\"div\");\r\n    qdiv.className = \"question\";\r\n    quizWrap.appendChild(qdiv);\r\n\r\n    \/\/create a container for question so that padding can be added.\r\n    let title = document.createElement(\"div\");\r\n    title.className = \"question-title\";\r\n    title.id = \"trailsQuizQn\" + this.i;\r\n    title.innerHTML = \"\u7b2c\" + (this.i + 1) + \"\u9898\";\r\n    qdiv.append(title);\r\n    \r\n    let question = document.createElement(\"div\");\r\n    question.className = \"question-word\";\r\n    question.id = \"trailsQuizQn\" + this.i;\r\n    question.innerHTML = this.currentQuestion.question.s;\r\n    qdiv.append(question);\r\n\r\n    this.qdiv = qdiv;\r\n\r\n    \/\/the question contains image\r\n    if (this.currentQuestion.question.img.startsWith(\"https:\/\/\")) {\r\n      \/\/ the current question contains an img for the question\r\n      let qimg = document.createElement(\"div\");\r\n      qimg.className = \"trailsQuizQnImg\";\r\n      qimg.id = \"trailsQuizQnImg\" + this.i;\r\n      let imgBlock = document.createElement(\"img\");\r\n      imgBlock.src = this.currentQuestion.question.img;\r\n      qimg.appendChild(imgBlock);\r\n      qdiv.appendChild(qimg);\r\n    }\r\n\r\n    let answers = document.createElement(\"div\");\r\n    answers.className = \"trailsQuizAns\";\r\n    answers.id = \"trailsQuizAns\" + this.i;\r\n    qdiv.appendChild(answers);\r\n\r\n    this.answers = answers;\r\n  }\r\n\r\n  getCorrectResult() {\r\n    return this.currentQuestion.a;\r\n  }\r\n}\r\n\r\nclass MCWithTextOnly extends Question {\r\n  constructor(data, i) {\r\n    super(data, i);\r\n    this.classes =  \"choosed-word\";\r\n  }\r\n\r\n  show() {\r\n    super.showQuestion();\r\n\r\n    \/\/ shuffle the choices\r\n    shuffle(this.currentQuestion.options);\r\n    for (let a = 0; a < this.currentQuestion.options.length; a++) {\r\n      \r\n      let container = document.createElement(\"div\");\r\n      container.className = \"container\";\r\n      container.id = \"q\" + this.i + \"a\" + this.currentQuestion.options[a].oid + \"container\";\r\n      container.innerHTML = container_anim;\r\n      \r\n      let letter = document.createElement(\"div\");\r\n      letter.className = \"letter\";\r\n      letter.innerHTML = char_mapping[a];\r\n      container.appendChild(letter);\r\n\r\n      let box = document.createElement(\"div\");\r\n      box.id = \"q\" + this.i + \"a\" + this.currentQuestion.options[a].oid;\r\n      box.className = \"box\";\r\n      box.innerHTML = this.currentQuestion.options[a].s;\r\n      container.appendChild(box);\r\n      \r\n      container.addEventListener(\"click\", () => this.select(this.currentQuestion.options[a].oid));\r\n      this.answers.appendChild(container);\r\n    }\r\n  }\r\n\r\n  select(a) {\r\n    \/**\r\n     *@param a:the oid of the option in a question\r\n    **\/\r\n    if (userAns[this.i] != -1) {\r\n      let prevSelectedId = \"q\" + this.i + \"a\" + userAns[this.i];\r\n      document.getElementById(prevSelectedId).classList.remove(this.classes);\r\n    }\r\n    console.log(\"selected \" + a + \" for q \" + this.i);\r\n    \/\/ select the new selection\r\n    let selectedId = \"q\" + this.i + \"a\" + a;\r\n    userAns[this.i] = a;\r\n    document.getElementById(selectedId).classList.add(this.classes);\r\n  }\r\n\r\n  checkAns() {\r\n    let selectedid = \"q\" + this.i + \"a\" + userAns[this.i];\r\n    console.log(selectedid);\r\n    if (userAns[this.i] == this.getCorrectResult()) {\r\n      document.getElementById(selectedid).classList.add(\"trailsQuizAnsCorrect\");\r\n      correctCount += 1;\r\n      userResult.push({\"qid\": this.currentQuestion.question.id, \"result\" : \"c\"});\r\n    } else {\r\n      if (userAns[this.i] != -1) {\r\n          document.getElementById(selectedid).classList.add(\"trailsQuizAnsWrong\");\r\n      }\r\n      userResult.push({\"qid\": this.currentQuestion.question.id, \"result\" : \"w\"});\r\n    }\r\n  }\r\n}\r\n\r\nclass MCWithImg extends MCWithTextOnly {\r\n  constructor(data, i) {\r\n    super(data, i);\r\n    this.classes = \"choosed-img\";\r\n  }\r\n\r\n  show() {\r\n    super.showQuestion();\r\n\r\n    \/\/ shuffle the choices\r\n    shuffle(this.currentQuestion.options);\r\n    for (let a = 0; a < this.currentQuestion.options.length; a++) {\r\n\r\n      let container = document.createElement(\"div\");\r\n      container.className = \"container-img\";\r\n      container.id = \"q\" + this.i + \"a\" + this.currentQuestion.options[a].oid + \"container\";\r\n      container.innerHTML = container_anim;\r\n      \r\n      let letter = document.createElement(\"div\");\r\n      letter.className = \"letter\";\r\n      letter.innerHTML = char_mapping[a];\r\n      container.appendChild(letter);\r\n\r\n      let box = document.createElement(\"div\");\r\n      box.id = \"q\" + this.i + \"a\" + this.currentQuestion.options[a].oid;\r\n      box.className = \"box\";\r\n\r\n      let img = document.createElement(\"img\");\r\n      img.src = this.currentQuestion.options[a].img;\r\n      box.appendChild(img);\r\n\r\n      let wordDesc = document.createElement(\"div\");\r\n      wordDesc.innerHTML = this.currentQuestion.options[a].s;\r\n      box.appendChild(wordDesc);\r\n\r\n      container.appendChild(box);\r\n      \r\n      container.addEventListener(\"click\", () => this.select(this.currentQuestion.options[a].oid));\r\n      this.answers.appendChild(container);\r\n    }\r\n  }\r\n}\r\n\r\n\/\/Multiple answers\r\nclass MCWithTextOnlyMultiAns extends MCWithTextOnly{\r\n  select(a) {\r\n    let selectedId = \"q\" + this.i + \"a\" + a;\r\n    if (userAns[this.i].indexOf(a) == -1) {\r\n      \/\/ user has not selected this option before\r\n      userAns[this.i].push(a);\r\n      document.getElementById(selectedId).classList.add(this.classes);\r\n    } else {\r\n      \/\/ remove the selection\r\n      userAns[this.i] = userAns[this.i].filter(data => data !== a);\r\n      document.getElementById(selectedId).classList.remove(this.classes);\r\n    }\r\n    console.log(userAns[this.i]);\r\n  }\r\n\r\n  checkAns() {\r\n    let correct = true;\r\n    for (let j = 0; j < userAns[this.i].length; j++) {\r\n      let selectedId = \"q\" + this.i + \"a\" + userAns[this.i][j];\r\n      if (this.currentQuestion.a.indexOf(userAns[this.i][j]) == -1) {\r\n        \/\/ user choice is not a correct answer\r\n        correct = false;\r\n        document.getElementById(selectedId).style.backgroundColor=\"#e00000\";\r\n      } else {\r\n        document.getElementById(selectedId).style.backgroundColor=\"#1caa4e\";\r\n      }\r\n    }\r\n\r\n    if (userAns[this.i].length < this.currentQuestion.a.length) {\r\n      correct = false;\r\n      let missAns = document.createElement(\"div\");\r\n      missAns.innerHTML = \"Missing options\";\r\n      missAns.className = \"trailsQuizExplain\";\r\n      this.qdiv.appendChild(missAns);\r\n    }\r\n\r\n    if (correct == true) {\r\n      userResult.push({\"qid\": this.currentQuestion.question.id, \"result\" : \"c\"});\r\n      correctCount++;\r\n    } else {\r\n      userResult.push({\"qid\": this.currentQuestion.question.id, \"result\" : \"w\"});\r\n    }\r\n  }\r\n}\r\n\r\nclass MCWithImgMultiAns extends MCWithImg{\r\n  select(a) {\r\n    let selectedId = \"q\" + this.i + \"a\" + a;\r\n    if (userAns[this.i].indexOf(a) == -1) {\r\n      \/\/ user has not selected this option before\r\n      userAns[this.i].push(a);\r\n      document.getElementById(selectedId).classList.add(this.classes);\r\n    } else {\r\n      \/\/ remove the selection\r\n      userAns[this.i] = userAns[this.i].filter(data => data !== a);\r\n      document.getElementById(selectedId).classList.remove(this.classes);\r\n    }\r\n    console.log(userAns[this.i]);\r\n  }\r\n\r\n  checkAns() {\r\n    let correct = true;\r\n    for (let j = 0; j < userAns[this.i].length; j++) {\r\n      let selectedId = \"q\" + this.i + \"a\" + userAns[this.i][j];\r\n      if (this.currentQuestion.a.indexOf(userAns[this.i][j]) == -1) {\r\n        \/\/ user choice is not a correct answer\r\n        correct = false;\r\n        document.getElementById(selectedId).style.backgroundColor=\"#e00000\";\r\n      } else {\r\n        document.getElementById(selectedId).style.backgroundColor=\"#1caa4e\";\r\n      }\r\n    }\r\n\r\n    if (userAns[this.i].length < this.currentQuestion.a.length) {\r\n      correct = false;\r\n      let missAns = document.createElement(\"div\");\r\n      missAns.innerHTML = \"Missing options\";\r\n      missAns.className = \"trailsQuizExplain\";\r\n      this.qdiv.appendChild(missAns);\r\n    }\r\n\r\n    if (correct == true) {\r\n      userResult.push({\"qid\": this.currentQuestion.question.id, \"result\" : \"c\"});\r\n      correctCount++;\r\n    } else {\r\n      userResult.push({\"qid\": this.currentQuestion.question.id, \"result\" : \"w\"});\r\n    }\r\n  }\r\n}\r\n\r\nclass TextQuestion extends Question {\r\n  show() {\r\n    super.showQuestion();\r\n    let inputField = document.createElement(\"input\");\r\n    inputField.type = \"text\";\r\n    inputField.id = \"q\" + this.i + \"input\";\r\n    inputField.value = \"\";\r\n    inputField.addEventListener('change', () => this.updateAns(this.i));\r\n    this.inputField = inputField;\r\n    this.answers.appendChild(inputField);\r\n  }\r\n\r\n  updateAns(i) {\r\n    userAns[i] = this.inputField.value;\r\n    console.log(userAns[i]);\r\n  }\r\n\r\n  checkAns() {\r\n    if (userAns[this.i] == this.currentQuestion.a) {\r\n      this.answers.style.backgroundColor=\"#1caa4e\";\r\n      userResult.push({\"qid\": this.currentQuestion.question.id, \"result\" : \"c\"});\r\n      correctCount++;\r\n    } else if (typeof this.currentQuestion.a === 'object'\r\n        && this.currentQuestion.a.indexOf(userAns[this.i].toLowerCase()) !== -1) {\r\n      this.answers.style.backgroundColor=\"#1caa4e\";\r\n      userResult.push({\"qid\": this.currentQuestion.question.id, \"result\" : \"c\"});\r\n      correctCount++;\r\n    } else {\r\n      this.answers.style.backgroundColor=\"#e00000\";\r\n      userResult.push({\"qid\": this.currentQuestion.question.id, \"result\" : \"w\"});\r\n    }\r\n  }\r\n}\r\n\r\nclass MCWithAudio extends MCWithTextOnly {\r\n  show() {\r\n    super.show();\r\n    let musicdiv = document.createElement(\"div\");\r\n    musicdiv.className = \"trailsQuizMusic\";\r\n    let musicAudio = document.createElement(\"audio\");\r\n    musicAudio.style=\"width:100%\";\r\n    musicAudio.controls = true;\r\n    musicAudio.src = this.currentQuestion.audioLink;\r\n    musicAudio.innerHTML = \"Your browser does not support the audio element.\";\r\n    musicdiv.appendChild(musicAudio);\r\n    this.qdiv.insertBefore(musicdiv, this.answers);\r\n  }\r\n}\r\n\r\nclass TextWithAudio extends TextQuestion {\r\n  show() {\r\n    super.show();\r\n    let musicdiv = document.createElement(\"div\");\r\n    let musicAudio = document.createElement(\"audio\");\r\n    musicdiv.className = \"trailsQuizMusic\";\r\n    musicAudio.style=\"width:100%\";\r\n    musicAudio.controls = true;\r\n    musicAudio.src = this.currentQuestion.audioLink;\r\n    musicAudio.innerHTML = \"Your browser does not support the audio element.\";\r\n    musicdiv.appendChild(musicAudio);\r\n    this.qdiv.insertBefore(musicdiv, this.answers);\r\n  }\r\n}\r\n\r\nfunction removeInputListeners() {\r\n  for (let i = 0; i < data.length; i++) {\r\n    if (data[i].question.t != \"Text\") {\r\n      for (let a = 0; a < data[i].options.length; a++) {\r\n        let id = \"q\" + i + \"a\" + data[i].options[a].oid + \"container\";\r\n        let currContainer = document.getElementById(id);\r\n        currContainer.replaceWith(currContainer.cloneNode(true));\r\n      }\r\n    } else {\r\n      let id = \"q\" + i + \"input\";\r\n      document.getElementById(id).disabled = true;\r\n    }\r\n  }\r\n}\r\n\r\nasync function showExplanationAndResult() {\r\n  console.log(\"user result: \" + JSON.stringify(userResult));\r\n  const options = {\r\n    method: \"POST\",\r\n    body: JSON.stringify(userResult),\r\n    headers: {\r\n      \"Content-Type\": \"application\/json\",\r\n    }\r\n  }\r\n  let qstatsdata = await fetch(url + \"quiz-stats\", options);\r\n  qStats = await qstatsdata.json();\r\n  console.log(qStats);\r\n\r\n  let qs = document.getElementsByClassName(\"question\");\r\n  for (let i = 0; i < data.length; i++) {\r\n    let explaindiv = document.createElement(\"div\");\r\n    if (userResult[i][\"result\"] == \"c\") {\r\n      explaindiv.innerHTML = data[i].explain;\r\n    } else {\r\n      explaindiv.innerHTML = data[i].explain2;\r\n    }\r\n    explaindiv.className = \"trailsQuizExplain\";\r\n    qs[i].appendChild(explaindiv);\r\n\r\n    let qStatsdiv = document.createElement(\"div\");\r\n    qStatsdiv.innerHTML = qStats[i] + \"%\u7684\u73a9\u5bb6\u7b54\u5bf9\u4e86\u8fd9\u9053\u9898\";\r\n    qStatsdiv.className = \"trailsQuizExplain\";\r\n    qs[i].appendChild(qStatsdiv);\r\n  }\r\n\r\n  let result = document.createElement(\"div\");\r\n  result.innerHTML = \"<p>\" + questionNum + \"\u9053\u9898\u4e2d\uff0c\u4f60\u6b63\u786e\u56de\u7b54\u4e86\" + correctCount + \"\u9053\u9898<\/p>\" + \"<p>\u4f60\u8d85\u8fc7\u4e86\"+ qStats[qStats.length - 1] + \"%\u7684\u73a9\u5bb6<\/p>\";\r\n  result.className = \"trailsQuizResult\";\r\n  quizWrap.appendChild(result);\r\n}\r\n\r\nfunction submit() {\r\n\r\n  removeInputListeners();\r\n  clearInterval(counter);\r\n  timer.style.display = \"none\";\r\n\r\n  \/\/ check if the user got all the correct result\r\n  for (let i = 0; i < data.length; i++) {\r\n      actualQuestions[i].checkAns();\r\n  }\r\n\r\n  showExplanationAndResult();\r\n\r\n  submitButton.removeEventListener(\"click\", submit);\r\n  submitButton.addEventListener(\"click\", start);\r\n  submitButton.innerHTML = \"\u91cd\u8bd5\";\r\n}\r\n\r\nfunction setupPage() {\r\n  correctCount = 0;\r\n  actualQuestions = [];\r\n  userAns = [];\r\n  userResult = [];\r\n  qStats = [];\r\n  quizWrap.querySelectorAll('*').forEach(n => n.remove());\r\n  timePassed = 0;\r\n  timeLeft = timeAllowed;\r\n\r\n  shuffle(data);\r\n  for (let i = 0; i < data.length; i++) {\r\n    switch (data[i].question.t) {\r\n      case \"MCWithTextOnly\":\r\n        let newMCTextq = new MCWithTextOnly(data[i], i);\r\n        newMCTextq.show();\r\n        actualQuestions.push(newMCTextq);\r\n        userAns.push(-1);\r\n\r\n        break;\r\n      case \"MCWithImg\":\r\n        let newMCImgq = new MCWithImg(data[i], i);\r\n        newMCImgq.show();\r\n        actualQuestions.push(newMCImgq);\r\n        userAns.push(-1);\r\n\r\n        break;\r\n      case \"MCWithTextOnlyMultiAns\":\r\n        let newMCTMA = new MCWithTextOnlyMultiAns(data[i], i);\r\n        newMCTMA.show();\r\n        actualQuestions.push(newMCTMA);\r\n        userAns.push([]);\r\n\r\n        break;\r\n      case \"MCWithImgMultiAns\":\r\n        let newMCIMA = new MCWithImgMultiAns(data[i], i);\r\n        newMCIMA.show();\r\n        actualQuestions.push(newMCIMA);\r\n        userAns.push([]);\r\n\r\n        break;\r\n      case \"Text\":\r\n        let newText = new TextQuestion(data[i], i);\r\n        newText.show();\r\n        actualQuestions.push(newText);\r\n        userAns.push(\"\");\r\n\r\n        break;\r\n      case \"MCWithAudio\":\r\n        let newAudio = new MCWithAudio(data[i], i);\r\n        newAudio.show();\r\n        actualQuestions.push(newAudio);\r\n        userAns.push(-1);\r\n\r\n        break;\r\n      case \"TextWithAudio\":\r\n        let newAudioText = new TextWithAudio(data[i], i);\r\n        newAudioText.show();\r\n        actualQuestions.push(newAudioText);\r\n        userAns.push(\"\");\r\n\r\n        break;\r\n      default:\r\n        \/\/ do nothing to show error\r\n        break;\r\n    }\r\n  }\r\n  let elementorDiv = document.getElementsByClassName(\"elementor-section-height-full\");\r\n  for (let e of elementorDiv) {\r\n    e.style.height = \"100%\";\r\n  }\r\n\r\n\r\n  \/\/set up counter\r\n  \/\/timeLeftInSecond = timeAllowed;\r\n  timer.style.display = \"block\";\r\n  \r\n  \/\/counter = setInterval(countdown, 1000);\r\n  timer.innerHTML = `\r\n  <div class=\"base-timer\">\r\n    <svg class=\"base-timer__svg\" viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\r\n      <g class=\"base-timer__circle\">\r\n        <circle class=\"base-timer__path-elapsed\" cx=\"50\" cy=\"50\" r=\"45\"><\/circle>\r\n        <path\r\n          id=\"base-timer-path-remaining\"\r\n          stroke-dasharray=\"283\"\r\n          class=\"base-timer__path-remaining ${remainingPathColor}\"\r\n          d=\"\r\n            M 50, 50\r\n            m -45, 0\r\n            a 45,45 0 1,0 90,0\r\n            a 45,45 0 1,0 -90,0\r\n          \"\r\n        ><\/path>\r\n      <\/g>\r\n    <\/svg>\r\n    <span id=\"base-timer-label\" class=\"base-timer__label\">${formatTime(\r\n      timeLeft\r\n    )}<\/span>\r\n  <\/div>\r\n  `;\r\n  counter =startTimer();\r\n  submitButton.innerHTML = \"\u63d0\u4ea4\";\r\n  submitButton.removeEventListener(\"click\", start);\r\n  submitButton.addEventListener(\"click\", submit);\r\n}\r\n\r\n\r\nasync function start() {\r\n  let result = await fetch(url + \"quiz-questions?qn=\" + questionNum);\r\n  data = await result.json();\r\n  setupPage();\r\n  window.scrollTo(screenLeft, screenTop);\r\n}\r\n\r\nsubmitButton.addEventListener(\"click\", start);\r\n\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>start<\/p>","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":11,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-29924","page","type-page","status-publish","hentry"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/trails-game.com\/en\/wp-json\/wp\/v2\/pages\/29924","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/trails-game.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/trails-game.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/trails-game.com\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/trails-game.com\/en\/wp-json\/wp\/v2\/comments?post=29924"}],"version-history":[{"count":0,"href":"https:\/\/trails-game.com\/en\/wp-json\/wp\/v2\/pages\/29924\/revisions"}],"wp:attachment":[{"href":"https:\/\/trails-game.com\/en\/wp-json\/wp\/v2\/media?parent=29924"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}