{"id":104169,"date":"2025-11-01T20:45:06","date_gmt":"2025-11-01T19:45:06","guid":{"rendered":"https:\/\/autobayng.com\/?page_id=104169"},"modified":"2025-11-26T08:28:54","modified_gmt":"2025-11-26T07:28:54","slug":"auto-quiz","status":"publish","type":"page","link":"https:\/\/autobayng.com\/auto-quiz\/","title":{"rendered":"Auto Quiz"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"104169\" class=\"elementor elementor-104169\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4a5914c e-flex e-con-boxed e-con e-parent\" data-id=\"4a5914c\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-aa520c0 elementor-widget elementor-widget-html\" data-id=\"aa520c0\" data-element_type=\"widget\" data-e-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=\"autoQuizApp\" style=\"font-family:Inter,system-ui,Arial;\">\r\n  <style>\r\n    #autoQuizApp {\r\n      background: radial-gradient(circle at center,#08121f 0%, #00060e 100%);\r\n      color:#e6eef6;\r\n      padding:18px;border-radius:14px;max-width:1024px;\r\n      margin:12px auto;box-shadow:0 10px 40px rgba(0,0,0,0.6);\r\n      position:relative;overflow:hidden;\r\n    }\r\n    .aq-header{text-align:center;margin-bottom:10px;}\r\n    .aq-title{color:#ffd700;font-size:1.8rem;font-weight:800;text-shadow:0 0 10px rgba(255,215,0,0.2);}\r\n    .aq-sub{color:#9aa4b2;font-size:.95rem;margin-top:4px;}\r\n    .aq-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:12px 0;}\r\n    .aq-person{text-align:center;}\r\n    .aq-person img{width:100px;height:100px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,215,0,0.3);}\r\n    .aq-person .name{margin-top:6px;color:#ffd700;font-weight:700;}\r\n    .aq-body{display:grid;grid-template-columns:1fr 260px;gap:12px;}\r\n    .aq-main{background:rgba(255,255,255,0.04);padding:14px;border-radius:10px;}\r\n    .aq-question{font-weight:700;font-size:1.05rem;text-align:center;margin-bottom:10px;min-height:60px;}\r\n    .aq-answers{display:grid;grid-template-columns:1fr 1fr;gap:8px;}\r\n    .aq-answer{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.05);padding:10px;border-radius:8px;cursor:pointer;transition:0.3s;}\r\n    .aq-answer:hover{background:rgba(255,215,0,0.08);}\r\n    .aq-answer.correct{background:rgba(46,204,113,0.25);}\r\n    .aq-answer.wrong{background:rgba(231,76,60,0.25);}\r\n    .aq-controls{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:10px;}\r\n    .aq-controls button{background:rgba(255,255,255,0.06);border:none;color:#fff;padding:8px 12px;border-radius:6px;cursor:pointer;}\r\n    .aq-controls button.used{opacity:.4;cursor:not-allowed;}\r\n    .aq-ladder{background:rgba(255,255,255,0.03);padding:10px;border-radius:8px;height:440px;overflow:auto;}\r\n    .ladder-item{padding:6px;margin:4px 0;border-radius:6px;display:flex;justify-content:space-between;}\r\n    .ladder-item.active{background:linear-gradient(90deg,rgba(255,215,0,0.25),rgba(255,215,0,0.1));color:#000;}\r\n    .start-screen{position:absolute;inset:0;background:rgba(0,0,0,0.95);\r\n      display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:10;}\r\n    .start-screen h1{color:#ffd700;font-size:2rem;margin-bottom:20px;animation:fadeIn 2s;}\r\n    .start-screen button{background:#ffd700;color:#000;font-weight:700;border:none;padding:10px 20px;border-radius:8px;cursor:pointer;animation:fadeIn 2.5s;}\r\n    @keyframes fadeIn{from{opacity:0;}to{opacity:1;}}\r\n    @media(max-width:900px){.aq-body{grid-template-columns:1fr;}.aq-ladder{height:220px;}}\r\n  <\/style>\r\n\r\n  <div class=\"aq-header\">\r\n    <div class=\"aq-title\">Who Wants to Be a Mechanic?<\/div>\r\n    <div class=\"aq-sub\">Hosted by AutobayNg<\/div>\r\n  <\/div>\r\n\r\n  <div class=\"aq-top\">\r\n    <div class=\"aq-person\"><img decoding=\"async\" src=\"https:\/\/cdn.pixabay.com\/photo\/2016\/08\/08\/09\/17\/avatar-1577909_960_720.png\" title=\"\"><div class=\"name\">Host: AutobayNg<\/div><\/div>\r\n    <div style=\"flex:1;text-align:center;\">\r\n      <img decoding=\"async\" src=\"https:\/\/cdn.pixabay.com\/photo\/2015\/10\/05\/22\/37\/blank-profile-picture-973460_1280.png\" style=\"width:70px;height:70px;border-radius:50%;border:3px solid rgba(255,255,255,0.1);\" title=\"\">\r\n      <div style=\"margin-top:4px;color:#ffd700;\">Contestant<\/div>\r\n    <\/div>\r\n    <div style=\"width:120px;text-align:center;\">\r\n      <div style=\"font-size:12px;color:#9aa4b2;\">Winnings<\/div>\r\n      <div style=\"font-size:18px;color:#ffd700;font-weight:700;\">\u20a6<span id=\"aqMoney\">0<\/span><\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"aq-body\">\r\n    <div class=\"aq-main\">\r\n      <div id=\"question\" class=\"aq-question\">Press Start to begin!<\/div>\r\n      <div id=\"answers\" class=\"aq-answers\"><\/div>\r\n      <div class=\"aq-controls\">\r\n        <button id=\"fiftyBtn\">50\/50<\/button>\r\n        <button id=\"audienceBtn\">Ask Audience<\/button>\r\n        <button id=\"phoneBtn\">Phone a Friend<\/button>\r\n      <\/div>\r\n      <div id=\"lifelineOutput\" style=\"margin-top:10px;text-align:center;\"><\/div>\r\n    <\/div>\r\n    <div class=\"aq-ladder\" id=\"ladder\"><\/div>\r\n  <\/div>\r\n\r\n  <div class=\"start-screen\" id=\"startScreen\">\r\n    <h1>Who Wants to Be a Mechanic?<\/h1>\r\n    <button id=\"startButton\">Start Game<\/button>\r\n  <\/div>\r\n\r\n  <script>\r\n  (function(){\r\n    const startBtn=document.getElementById(\"startButton\"),\r\n      startScreen=document.getElementById(\"startScreen\"),\r\n      qEl=document.getElementById(\"question\"),\r\n      aEl=document.getElementById(\"answers\"),\r\n      moneyEl=document.getElementById(\"aqMoney\"),\r\n      ladder=document.getElementById(\"ladder\"),\r\n      out=document.getElementById(\"lifelineOutput\"),\r\n      fifty=document.getElementById(\"fiftyBtn\"),\r\n      aud=document.getElementById(\"audienceBtn\"),\r\n      phone=document.getElementById(\"phoneBtn\");\r\n\r\n    \/\/ \u2705 Sound setup (created after user clicks Start)\r\n    const sounds = {\r\n      intro: new Audio(\"https:\/\/cdn.pixabay.com\/download\/audio\/2023\/07\/18\/audio_3f178b0797.mp3?filename=game-show-intro-146925.mp3\"),\r\n      music: new Audio(\"https:\/\/cdn.pixabay.com\/download\/audio\/2022\/03\/15\/audio_eea6d70d1f.mp3?filename=quiz-background-110337.mp3\"),\r\n      correct: new Audio(\"https:\/\/cdn.pixabay.com\/download\/audio\/2022\/03\/15\/audio_10a3dffb65.mp3?filename=correct-answer-110339.mp3\"),\r\n      clap: new Audio(\"https:\/\/cdn.pixabay.com\/download\/audio\/2023\/02\/28\/audio_8d5c78cf08.mp3?filename=small-crowd-clapping-142106.mp3\"),\r\n      wrong: new Audio(\"https:\/\/cdn.pixabay.com\/download\/audio\/2022\/03\/15\/audio_2296f7ab5a.mp3?filename=wrong-answer-110340.mp3\")\r\n    };\r\n\r\n    Object.values(sounds).forEach(s => s.volume = 0.8);\r\n\r\n    const safePlay = async (s, loop=false)=>{\r\n      if(!s) return;\r\n      s.loop = loop;\r\n      s.currentTime = 0;\r\n      try { await s.play(); }\r\n      catch(e){ console.warn(\"Autoplay blocked:\", s.src); }\r\n    };\r\n    const fadeOut = (s,d=1000)=>{\r\n      if(!s) return;\r\n      let vol = s.volume;\r\n      const step = vol \/ (d \/ 100);\r\n      const fade = setInterval(()=>{\r\n        vol -= step;\r\n        if(vol<=0){clearInterval(fade);s.pause();s.currentTime=0;}\r\n        else s.volume=vol;\r\n      },100);\r\n    };\r\n\r\n    const questions=[\r\n      {q:\"What does ABS stand for?\",a:[\"Anti-lock Braking System\",\"Air Brake Safety\",\"Auto Balance Sensor\",\"Accelerated Brake System\"],correct:0},\r\n      {q:\"Which company manufactures the Corolla?\",a:[\"Honda\",\"Toyota\",\"Nissan\",\"Mazda\"],correct:1},\r\n      {q:\"Which part charges the battery while the engine runs?\",a:[\"Starter\",\"Alternator\",\"Distributor\",\"Rectifier\"],correct:1},\r\n      {q:\"A turbocharger increases?\",a:[\"Fuel consumption\",\"Engine power\",\"Oil pressure\",\"Brake performance\"],correct:1},\r\n      {q:\"What does RPM stand for?\",a:[\"Revolutions Per Minute\",\"Rate Per Mile\",\"Rotations Power Mode\",\"Recoil Pressure Measure\"],correct:0},\r\n      {q:\"Which fuel type has the highest energy content?\",a:[\"Diesel\",\"Petrol\",\"CNG\",\"Ethanol\"],correct:0}\r\n    ];\r\n\r\n    const ladderValues=[\"1000\",\"5000\",\"10000\",\"20000\",\"50000\",\"100000\",\"250000\",\"500000\",\"1000000\",\"2000000\",\"5000000\",\"10000000\"];\r\n    ladder.innerHTML=\"\";\r\n    ladderValues.slice().reverse().forEach((amt,i)=>{\r\n      const d=document.createElement(\"div\");\r\n      d.className=\"ladder-item\";\r\n      d.innerHTML=`<span>${ladderValues.length-i}<\/span><span>\u20a6${amt}<\/span>`;\r\n      ladder.appendChild(d);\r\n    });\r\n\r\n    let qIndex=0,score=0,used={fifty:false,aud:false,phone:false};\r\n\r\n    function nextQuestion(){\r\n      if(qIndex>=questions.length){endGame();return;}\r\n      const q=questions[qIndex];\r\n      qEl.textContent=q.q;aEl.innerHTML=\"\";out.innerHTML=\"\";\r\n      q.a.forEach((opt,i)=>{\r\n        const d=document.createElement(\"div\");\r\n        d.className=\"aq-answer\";d.textContent=opt;\r\n        d.addEventListener(\"click\",()=>checkAnswer(i));\r\n        aEl.appendChild(d);\r\n      });\r\n      updateLadder();\r\n    }\r\n\r\n    function checkAnswer(i){\r\n      const q=questions[qIndex];\r\n      const opts=document.querySelectorAll(\".aq-answer\");\r\n      opts.forEach(o=>o.style.pointerEvents=\"none\");\r\n      if(i===q.correct){\r\n        opts[i].classList.add(\"correct\");\r\n        safePlay(sounds.correct);\r\n        setTimeout(()=>safePlay(sounds.clap),900);\r\n        score=parseInt(ladderValues[qIndex]);\r\n        moneyEl.textContent=score;\r\n        qIndex++;setTimeout(nextQuestion,1800);\r\n      }else{\r\n        opts[i].classList.add(\"wrong\");\r\n        safePlay(sounds.wrong);\r\n        setTimeout(endGame,1200);\r\n      }\r\n    }\r\n\r\n    function updateLadder(){\r\n      const items=document.querySelectorAll(\".ladder-item\");\r\n      items.forEach(e=>e.classList.remove(\"active\"));\r\n      items[items.length-1-qIndex]?.classList.add(\"active\");\r\n    }\r\n\r\n    \/\/ Lifelines\r\n    fifty.onclick=()=>{\r\n      if(used.fifty)return;\r\n      used.fifty=true;fifty.classList.add(\"used\");\r\n      const q=questions[qIndex];\r\n      const wrongIdx=[0,1,2,3].filter(x=>x!==q.correct);\r\n      wrongIdx.sort(()=>Math.random()-0.5).slice(0,2)\r\n        .forEach(i=>{aEl.children[i].style.visibility=\"hidden\";});\r\n    };\r\n\r\n    aud.onclick=()=>{\r\n      if(used.aud)return;\r\n      used.aud=true;aud.classList.add(\"used\");\r\n      const bars=[Math.floor(Math.random()*50+30),Math.floor(Math.random()*30+20),Math.floor(Math.random()*20+10),Math.floor(Math.random()*10)];\r\n      const correctIdx=questions[qIndex].correct;\r\n      bars[correctIdx]=Math.max(...bars)+10;\r\n      let html=\"<div style='margin-top:10px;'>\";\r\n      bars.forEach((b,i)=>{\r\n        html+=`<div style='margin:3px 0;'>${String.fromCharCode(65+i)}:\r\n          <div style='display:inline-block;background:#ffd700;height:10px;width:${b}%;'><\/div> ${b}%<\/div>`;\r\n      });\r\n      html+=\"<\/div>\";\r\n      out.innerHTML=html;\r\n    };\r\n\r\n    phone.onclick=()=>{\r\n      if(used.phone)return;\r\n      used.phone=true;phone.classList.add(\"used\");\r\n      const advice=[\"I\u2019m 70% sure it\u2019s A.\",\"I think it\u2019s B, but not 100%.\",\"Pretty sure it\u2019s C!\",\"It should be D!\"];\r\n      out.innerHTML=`<p style='color:#ffd700;font-weight:600;'>Friend: \"${advice[Math.floor(Math.random()*4)]}\"<\/p>`;\r\n    };\r\n\r\n    function endGame(){\r\n      fadeOut(sounds.music,800);\r\n      alert(`Game Over! You earned \u20a6${score}`);\r\n      startScreen.style.display=\"flex\";\r\n      qIndex=0;score=0;moneyEl.textContent=\"0\";\r\n      qEl.textContent=\"Press Start to begin!\";aEl.innerHTML=\"\";\r\n      used={fifty:false,aud:false,phone:false};\r\n      [fifty,aud,phone].forEach(b=>b.classList.remove(\"used\"));\r\n    }\r\n\r\n    startBtn.onclick=async()=>{\r\n      startScreen.style.display=\"none\";\r\n      \/\/ Play intro then start background music\r\n      await safePlay(sounds.intro);\r\n      setTimeout(async ()=>{\r\n        fadeOut(sounds.intro,800);\r\n        await safePlay(sounds.music,true);\r\n        nextQuestion();\r\n      },2500);\r\n    };\r\n  })();\r\n  <\/script>\r\n<\/div>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Who Wants to Be a Mechanic? Hosted by AutobayNg Host: AutobayNg Contestant Winnings \u20a60 Press Start to begin! 50\/50 Ask Audience Phone a Friend Who Wants to Be a Mechanic? Start Game<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-104169","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/autobayng.com\/api-json\/wp\/v2\/pages\/104169","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/autobayng.com\/api-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/autobayng.com\/api-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/autobayng.com\/api-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/autobayng.com\/api-json\/wp\/v2\/comments?post=104169"}],"version-history":[{"count":1,"href":"https:\/\/autobayng.com\/api-json\/wp\/v2\/pages\/104169\/revisions"}],"predecessor-version":[{"id":104750,"href":"https:\/\/autobayng.com\/api-json\/wp\/v2\/pages\/104169\/revisions\/104750"}],"wp:attachment":[{"href":"https:\/\/autobayng.com\/api-json\/wp\/v2\/media?parent=104169"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}